ghost tasks: switch from flow=None to graphDepth=0

src/components/cylc/table/Table.vue

@@ -31,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #item.task.name="{ item }">
       <div
         class="d-flex align-center flex-nowrap"
-        :class="{ 'flow-none': isFlowNone(item.task.node.flowNums) }"
+        :class="{ 'dimmed': !isN0(item.task.node.graphDepth) }"
         :data-cy-task-name="item.task.name"
       >
         <div v-bind="jobIconParentProps">
@@ -147,7 +147,7 @@ import {
 import {
   getRunTime,
   formatDuration,
-  isFlowNone,
+  isN0,
   isTruthyOrZero,
 } from '@/utils/tasks'
 import { useCyclePointsOrderDesc } from '@/composables/localStorage'

src/components/cylc/tree/TreeItem.vue

@@ -68,7 +68,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-else-if="node.type === 'task'"
             class="d-flex align-center"
-            :class="{ 'flow-none': isFlowNone(node.node.flowNums) }"
           >
             <!-- Task summary -->
             <Task
@@ -179,7 +178,7 @@ import JobLeaf from '@/components/cylc/tree/JobLeaf.vue'
 import {
   jobMessageOutputs,
   latestJob,
-  isFlowNone,
+  isN0,
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
 import { once } from '@/utils/reactivity'
@@ -251,7 +250,6 @@ export default {
 
     return {
       isExpanded,
-      isFlowNone,
       latestJob,
       renderChildren,
       toggleExpandCollapse,
@@ -285,7 +283,12 @@ export default {
       }
     },
     nodeDataClass () {
-      return ['node-data', `node-data-${this.node.type}`]
+      return {
+        'node-data': true,
+        [`node-data-${this.node.type}`]: true,
+        // dim nodes (tasks & families) that are outside the n=0 window
+        dimmed: !isN0(this.node.node?.graphDepth),
+      }
     },
     expandCollapseBtnStyle () {
       return {

src/services/mock/json/workflows/one.json

@@ -57,13 +57,15 @@
           "id": "~user/one//20000102T0000Z/root",
           "name": "root",
           "state": "failed",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z"
         },
         {
           "__typename": "FamilyProxy",
           "id": "~user/one//20000102T0000Z/BAD",
           "name": "BAD",
           "state": "failed",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
@@ -84,6 +86,7 @@
           "id": "~user/one//20000102T0000Z/GOOD",
           "name": "GOOD",
           "state": "succeeded",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
@@ -101,6 +104,7 @@
           "id": "~user/one//20000102T0000Z/SUCCEEDED",
           "name": "SUCCEEDED",
           "state": "succeeded",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/GOOD",
@@ -123,6 +127,7 @@
           "id": "~user/one//20000102T0000Z/checkpoint",
           "name": "checkpoint",
           "state": "running",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -147,6 +152,7 @@
           "id": "~user/one//20000102T0000Z/eventually_succeeded",
           "name": "eventually_succeeded",
           "state": "succeeded",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -171,6 +177,7 @@
           "id": "~user/one//20000102T0000Z/failed",
           "name": "failed",
           "state": "failed",
+          "graphDepth": 0,
           "isHeld": true,
           "isQueued": false,
           "isRunahead": false,
@@ -194,6 +201,7 @@
           "id": "~user/one//20000102T0000Z/retrying",
           "name": "retrying",
           "state": "waiting",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -217,6 +225,7 @@
           "id": "~user/one//20000102T0000Z/sleepy",
           "name": "sleepy",
           "state": "submitted",
+          "graphDepth": 1,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -240,6 +249,7 @@
           "id": "~user/one//20000102T0000Z/succeeded",
           "name": "succeeded",
           "state": "succeeded",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -267,6 +277,7 @@
           "id": "~user/one//20000102T0000Z/waiting",
           "name": "waiting",
           "state": "waiting",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,

src/styles/index.scss

@@ -98,7 +98,8 @@ html {
 }
 
 .c-tree, .c-table, .c-graph {
-  .flow-none {
-    opacity: 0.6;
+  // Dim nodes that are outside the n=0 (active) window, i.e. n != 0.
+  .dimmed {
+    opacity: 0.5;
   }
 }

src/utils/tasks.js

@@ -137,13 +137,20 @@ export function formatFlowNums (flowNums) {
 }
 
 /**
- * Return whether a task is in the None flow.
+ * Return whether a node is in the n=0 window (i.e. is an "active" node).
  *
- * @param {string=} flowNums
+ * The nodes the scheduler is currently operating on are said to be "n=0".
+ * See https://cylc.github.io/cylc-doc/stable/html/glossary.html#term-active-task
+ *
+ * Nodes without a graphDepth (e.g. before their data has loaded, or grouping
+ * nodes such as cycle points) are treated as being in the n=0 window so that
+ * they are not dimmed.
+ *
+ * @param {number=} graphDepth
  * @returns {boolean}
  */
-export function isFlowNone (flowNums) {
-  return Boolean(flowNums && !JSON.parse(flowNums).length)
+export function isN0 (graphDepth) {
+  return graphDepth == null || graphDepth === 0
 }
 
 export function isTruthyOrZero (value) {

src/views/Graph.vue

@@ -59,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :task="node"
             :jobs="node.children"
             :jobTheme="jobTheme"
-            :class="{ 'flow-none': isFlowNone(node.node.flowNums) }"
+            :class="{ 'dimmed': !isN0(node.node.graphDepth) }"
           />
         </g>
         <!-- the edges
@@ -129,7 +129,7 @@ import {
   mdiFileRotateRight,
   mdiVectorSelection
 } from '@mdi/js'
-import { isFlowNone } from '@/utils/tasks'
+import { isN0 } from '@/utils/tasks'
 
 // NOTE: Use TaskProxies not nodesEdges{nodes} to list nodes as this is what
 // the tree view uses which allows the requests to overlap with this and other
@@ -174,7 +174,7 @@ fragment TaskProxyData on TaskProxy {
   task {
     meanElapsedTime
   }
-  flowNums
+  graphDepth
   runtime {
     runMode
   }
@@ -275,7 +275,7 @@ export default {
       autoRefresh,
       spacing,
       groupCycle,
-      isFlowNone,
+      isN0,
     }
   },
 

src/views/Guide.vue

@@ -373,7 +373,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <GraphNode
                       v-bind="task"
                       :transform="`translate(0, ${ 240 * index })`"
-                      :class="{ 'flow-none': isFlowNone(task.task.node.flowNums) }"
+                      :class="{ 'dimmed': !isN0(task.task.node.graphDepth) }"
                       v-on:click.stop.capture
                     />
                     <text
@@ -410,8 +410,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </p>
 
             <p>
-              Note that the "future" tasks (the ones ahead of the workflow) are
-              grey. This indicates that are are not yet being managed by Cylc.
+              Note that the tasks outside of the active window (i.e. the ones
+              that are not n=0) are greyed out. This highlights the tasks that
+              Cylc is currently managing.
             </p>
           </v-card-text>
         </v-card>
@@ -429,7 +430,7 @@ import { workflowViews } from '@/views/views'
 import { TaskStateUserOrder } from '@/model/TaskState.model'
 import { Tokens } from '@/utils/uid'
 import { uniqueId } from 'lodash-es'
-import { isFlowNone } from '@/utils/tasks'
+import { isN0 } from '@/utils/tasks'
 
 export default {
   name: 'Guide',
@@ -453,7 +454,7 @@ export default {
         task: {
           name: 'a',
           tokens: new Tokens('2000/a', true),
-          node: { state: 'succeeded' },
+          node: { state: 'succeeded', graphDepth: 1 },
         },
         jobs: [{
           name: '01',
@@ -465,7 +466,7 @@ export default {
         task: {
           name: 'b',
           tokens: new Tokens('2000/b', true),
-          node: { state: 'running' },
+          node: { state: 'running', graphDepth: 0 },
         },
         jobs: [{
           name: '01',
@@ -477,23 +478,23 @@ export default {
         task: {
           name: 'c',
           tokens: new Tokens('2000/c', true),
-          node: { state: 'waiting', flowNums: '[]' },
+          node: { state: 'waiting', graphDepth: 1 },
         },
         jobs: [],
       },
       {
         task: {
           name: 'd',
           tokens: new Tokens('2000/d', true),
-          node: { state: 'waiting', flowNums: '[]' },
+          node: { state: 'waiting', graphDepth: 2 },
         },
         jobs: [],
       },
     ]
   }),
 
   methods: {
-    isFlowNone,
+    isN0,
   },
 }
 </script>

src/views/Table.vue

@@ -121,6 +121,7 @@ fragment TaskProxyData on TaskProxy {
     runMode
   }
   flowNums
+  graphDepth
 }
 
 fragment JobData on Job {

src/views/Tree.vue

@@ -129,6 +129,7 @@ fragment FamilyProxyData on FamilyProxy {
   isRetry
   isWallclock
   isXtriggered
+  graphDepth
 }
 
 fragment TaskProxyData on TaskProxy {
@@ -150,6 +151,7 @@ fragment TaskProxyData on TaskProxy {
     runMode
   }
   flowNums
+  graphDepth
 }
 
 fragment JobData on Job {

tests/e2e/specs/graph.cy.js

@@ -151,15 +151,15 @@ describe('Graph View', () => {
   })
 
   describe('Flow nums', () => {
-    it('Shows flow=None task dimmed', () => {
+    it('Shows n!=0 task dimmed', () => {
       cy.visit('/#/graph/one')
       waitForGraphLayout()
-      cy.get('.c-graph-node.flow-none').as('flowNone')
+      cy.get('.c-graph-node.dimmed').as('dimmed')
         .should('have.css', 'opacity')
         .then((opacity) => {
           expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
         })
-      cy.get('@flowNone')
+      cy.get('@dimmed')
         .contains('sleepy')
     })
   })

tests/e2e/specs/table.cy.js

@@ -259,15 +259,15 @@ describe('State saving', () => {
   })
 
   describe('Flow nums', () => {
-    it('Only shows flow nums when not 1, and flow=None is dimmed', () => {
+    it('Only shows flow nums when not 1, and n!=0 tasks are dimmed', () => {
       cy.visit('/#/table/one')
       cy.get('[data-cy-task-name=failed]')
         .find('[data-cy=flow-num-chip]')
         .contains('1, 2')
       cy.get('[data-cy-task-name=checkpoint]')
         .find('[data-cy=flow-num-chip]')
         .should('not.exist')
-      cy.get('[data-cy-task-name=sleepy].flow-none')
+      cy.get('[data-cy-task-name=sleepy].dimmed')
         .should('have.css', 'opacity')
         .then((opacity) => {
           expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)

tests/e2e/specs/tree.cy.js

@@ -419,29 +419,29 @@ describe('Tree view', () => {
   })
 
   describe('Flow nums', () => {
-    it('Only shows flow nums when not 1, and flow=None is dimmed', () => {
+    it('Only shows flow nums when not 1, and n!=0 tasks are dimmed', () => {
       cy.visit('/#/tree/one')
       cy.get('[data-node-name=failed]')
         .find('[data-cy=flow-num-chip]')
         .contains('1, 2')
       cy.get('[data-node-name=checkpoint]')
         .find('[data-cy=flow-num-chip]')
         .should('not.exist')
-      cy.get('[data-node-name=sleepy] .flow-none')
+      cy.get('[data-node-name=sleepy] .dimmed')
         .should('have.css', 'opacity')
         .then((opacity) => {
           expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
         })
       cy.get('[data-node-name=sleepy] .node-expand-collapse-button').click()
         // node expand/collapse button should not be dimmed
-        .parents('.flow-none')
+        .parents('.dimmed')
         .should('not.exist')
         // task icon should be dimmed
         .get('[data-node-name=sleepy] .c-task')
-        .parents('.flow-none')
+        .parents('.dimmed')
         // children should not be dimmed
         .get('[data-node-name=sleepy] .c-treeitem')
-        .parents('.flow-none')
+        .parents('.dimmed')
         .should('not.exist')
     })
   })