Only show flow nums if not 1 or None; dim flow=None

Also update mock data

src/components/cylc/commandMenu/Menu.vue

@@ -127,7 +127,7 @@ import WorkflowState from '@/model/WorkflowState.model'
 import { eventBus } from '@/services/eventBus'
 import CopyBtn from '@/components/core/CopyBtn.vue'
 import { upperFirst } from 'lodash-es'
-import { formatFlowNums } from '@/utils/tasks'
+import { formatFlowNums, flowNumsValid } from '@/utils/tasks'
 
 export default {
   name: 'CommandMenu',
@@ -218,7 +218,7 @@ export default {
           if (this.node.node.isRunahead) {
             ret += ' (runahead)'
           }
-          if (this.node.node.flowNums) {
+          if (flowNumsValid(this.node.node)) {
             ret += ` • Flows: ${formatFlowNums(this.node.node.flowNums)}`
           }
         }

src/components/cylc/common/FlowNumsChip.vue

@@ -0,0 +1,52 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <v-chip
+    v-if="showFlowNums"
+    label
+    density="compact"
+    size="small"
+    class="ml-1 cursor-default"
+    :prepend-icon="mdiLabelOutline"
+  >
+    {{ flowNumsStr }}
+    <v-tooltip location="right">
+      Flows: {{ flowNumsStr }}
+    </v-tooltip>
+  </v-chip>
+</template>
+
+<script setup>
+import { flowNumsValid, formatFlowNums } from '@/utils/tasks'
+import { mdiLabelOutline } from '@mdi/js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  node: Object,
+})
+
+const flowNumsStr = computed(
+  () => props.node.flowNums && formatFlowNums(props.node.flowNums)
+)
+
+// Hide flow=1 and flow=None by default
+const showFlowNums = computed(
+  () => flowNumsValid(props.node) && !['1', 'None'].includes(flowNumsStr.value)
+)
+
+</script>

src/components/cylc/table/Table.vue

@@ -28,7 +28,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-model:items-per-page="itemsPerPage"
   >
     <template v-slot:item.task.name="{ item }">
-      <div class="d-flex align-content-center flex-nowrap">
+      <div
+        class="d-flex align-center flex-nowrap"
+        :class="{ 'flow-none': isFlowNone(item.task.node) }"
+      >
         <div style="width: 2em;">
           <Task
             v-command-menu="item.task"
@@ -44,7 +47,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :previous-state="item.previousJob?.node?.state"
           />
         </div>
-        <div>{{ item.task.name }}</div>
+        {{ item.task.name }}
+        <FlowNumsChip
+          :node="item.task.node"
+          class="ml-2"
+        />
       </div>
     </template>
     <template v-slot:item.task.node.task.meanElapsedTime="{ item }">
@@ -110,13 +117,17 @@ import {
   datetimeComparator,
   numberComparator,
 } from '@/components/cylc/table/sort'
-import { dtMean } from '@/utils/tasks'
+import {
+  dtMean,
+  isFlowNone,
+} from '@/utils/tasks'
 import { useCyclePointsOrderDesc } from '@/composables/localStorage'
 import {
   initialOptions,
   updateInitialOptionsEvent,
   useInitialOptions
 } from '@/utils/initialOptions'
+import FlowNumsChip from '@/components/cylc/common/FlowNumsChip.vue'
 
 export default {
   name: 'TableComponent',
@@ -132,6 +143,7 @@ export default {
   },
 
   components: {
+    FlowNumsChip,
     Task,
     Job,
   },
@@ -243,6 +255,7 @@ export default {
       icons: {
         mdiChevronDown
       },
+      isFlowNone,
       itemsPerPageOptions: [
         { value: 10, title: '10' },
         { value: 20, title: '20' },

src/components/cylc/tree/TreeItem.vue

@@ -64,7 +64,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
             <span class="mx-1">{{ node.name }}</span>
           </template>
-          <template v-else-if="node.type === 'task'">
+          <div
+            v-else-if="node.type === 'task'"
+            class="d-flex align-center"
+            :class="{ 'flow-none': isFlowNone(node.node) }"
+          >
             <!-- Task summary -->
             <Task
               v-command-menu="node"
@@ -86,21 +90,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </div>
             <span class="mx-1">{{ node.name }}</span>
-            <v-chip
-              v-if="node.node.flowNums"
-              label
-              density="compact"
-              size="small"
-              class="ml-1 cursor-default"
-              :prepend-icon="$options.icons.flow"
-              :disabled="node.node.state === 'waiting' && !node.node.isQueued"
-            >
-              {{ formatFlowNums(node.node.flowNums) }}
-              <v-tooltip location="right">
-                Flows: {{ formatFlowNums(node.node.flowNums) }}
-              </v-tooltip>
-            </v-chip>
-          </template>
+            <FlowNumsChip :node="node.node"/>
+          </div>
           <template v-else-if="node.type === 'job'">
             <Job
               v-command-menu="node"
@@ -192,24 +183,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import {
   mdiChevronRight,
-  mdiLabelOutline,
 } from '@mdi/js'
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
 import JobDetails from '@/components/cylc/tree/JobDetails.vue'
 import {
-  formatFlowNums,
   jobMessageOutputs,
   latestJob,
+  isFlowNone,
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
 import { once } from '@/utils'
 import { useToggle } from '@vueuse/core'
+import FlowNumsChip from '@/components/cylc/common/FlowNumsChip.vue'
 
 export default {
   name: 'TreeItem',
 
   components: {
+    FlowNumsChip,
     Task,
     Job,
     JobDetails,
@@ -270,8 +262,8 @@ export default {
 
     return {
       isExpanded,
+      isFlowNone,
       latestJob,
-      formatFlowNums,
       renderChildren,
       toggleExpandCollapse,
     }
@@ -329,7 +321,6 @@ export default {
 
   icons: {
     mdiChevronRight,
-    flow: mdiLabelOutline
   },
 }
 </script>

src/services/mock/json/workflows/multi.json

@@ -145,6 +145,7 @@
             "isQueued": true,
             "isRunahead": false,
             "name": "foo",
+            "flowNums": "[1]",
             "task": {
               "meanElapsedTime": 0,
               "__typename": "Task"
@@ -162,6 +163,7 @@
             "isQueued": false,
             "isRunahead": false,
             "name": "foo",
+            "flowNums": "[1]",
             "task": {
               "meanElapsedTime": 0,
               "__typename": "Task"

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

@@ -154,7 +154,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
-          "flowNums": "[1]",
+          "flowNums": "[1,2]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/BAD",
             "name": "BAD",
@@ -187,12 +187,12 @@
         {
           "id": "~user/one//20000102T0000Z/sleepy",
           "name": "sleepy",
-          "state": "",
+          "state": "submitted",
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
-          "flowNums": "[1]",
+          "flowNums": "[]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
@@ -226,7 +226,7 @@
         {
           "id": "~user/one//20000102T0000Z/waiting",
           "name": "waiting",
-          "state": "",
+          "state": "waiting",
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -409,6 +409,20 @@
           "finishedTime": "2020-11-08T22:57:19Z",
           "state": "succeeded",
           "submitNum": 1
+        },
+        {
+          "id": "~user/one//20000102T0000Z/sleepy/1",
+          "firstParent": {
+            "id": "~user/one//20000102T0000Z/sleepy"
+          },
+          "jobRunnerName": "background",
+          "jobId": "61983",
+          "platform": "localhost",
+          "startedTime": "",
+          "submittedTime": "2020-11-08T23:02:09Z",
+          "finishedTime": "",
+          "state": "submitted",
+          "submitNum": 1
         }
       ],
       "edges": [

src/styles/index.scss

@@ -96,3 +96,9 @@ html {
 .apexcharts-text {
   font-size: 0.9rem;
 }
+
+.c-tree, .c-table, .c-graph {
+  .flow-none {
+    opacity: 0.6;
+  }
+}

src/utils/tasks.js

@@ -18,6 +18,13 @@
 import TaskState from '@/model/TaskState.model'
 import { TASK_OUTPUT_NAMES } from '@/model/TaskOutput.model'
 
+/**
+ * @typedef TaskNode
+ * @property {string?} flowNums
+ * @property {string} state
+ * @property {boolean} isQueued
+ */
+
 /**
  * States used when the parent is stopped.
  * @type {TaskState[]}
@@ -131,3 +138,24 @@ export function dtMean (taskNode) {
 export function formatFlowNums (flowNums) {
   return JSON.parse(flowNums).join(', ') || 'None'
 }
+
+/**
+ * Return whether a task has concrete flow numbers
+ * (i.e. not data store "ghost tasks").
+ *
+ * @param {TaskNode} node
+ * @returns {boolean}
+ */
+export function flowNumsValid (node) {
+  return Boolean(node.flowNums && (node.state !== 'waiting' || node.isQueued))
+}
+
+/**
+ * Return whether a task is in the None flow.
+ *
+ * @param {TaskNode} node
+ * @returns {boolean}
+ */
+export function isFlowNone (node) {
+  return Boolean(node.flowNums && !JSON.parse(node.flowNums).length)
+}

src/views/Graph.vue

@@ -59,6 +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) }"
           />
         </g>
         <!-- the edges
@@ -128,6 +129,7 @@ import {
   mdiFileRotateRight,
   mdiVectorSelection
 } from '@mdi/js'
+import { isFlowNone } 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
@@ -265,7 +267,8 @@ export default {
       transpose,
       autoRefresh,
       spacing,
-      groupCycle
+      groupCycle,
+      isFlowNone,
     }
   },
 

tests/e2e/specs/tree.cy.js

@@ -250,7 +250,7 @@ describe('Tree view', () => {
         .click({ force: true })
       cy
         .get('.node-data-task:visible')
-        .should('have.length', 1)
+        .should('have.length', 2)
         .contains('retrying')
     })
 
@@ -275,7 +275,7 @@ describe('Tree view', () => {
       // Navigate back
       cy.visit('/#/workspace/one')
         .get('.node-data-task:visible')
-        .should('have.length', 1)
+        .should('have.length', 2)
         .contains('retrying')
     })