From c6ae6aebef8a76406a0e798f1911b4b8c5507d44 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 6 Jan 2025 18:10:47 +0000
Subject: [PATCH 1/3] Simplify TreeItem and fix tests

---
 cypress/component/treeItem.cy.js              | 79 +++++++++++++++++++
 src/components/cylc/tree/TreeItem.vue         | 41 ++++------
 src/utils/index.js                            | 25 +++++-
 tests/unit/components/cylc/tree/tree.data.js  |  2 +-
 .../components/cylc/tree/treeitem.vue.spec.js | 15 ++--
 tests/unit/utils/index.spec.js                | 31 +++++++-
 6 files changed, 156 insertions(+), 37 deletions(-)
 create mode 100644 cypress/component/treeItem.cy.js

diff --git a/cypress/component/treeItem.cy.js b/cypress/component/treeItem.cy.js
new file mode 100644
index 000000000..fc052f1c5
--- /dev/null
+++ b/cypress/component/treeItem.cy.js
@@ -0,0 +1,79 @@
+/*
+ * 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/>.
+ */
+
+import TreeItem from '@/components/cylc/tree/TreeItem.vue'
+import {
+  simpleCyclepointNode,
+} from '$tests/unit/components/cylc/tree/tree.data'
+
+// Get lists of: a) all tree item nodes; b) only visible ones.
+Cypress.Commands.add('getNodeTypes', () => {
+  cy.get('.c-treeitem')
+    .then(($els) => {
+      const all = Array.from($els, ({ dataset }) => dataset.nodeType)
+      const visible = all.filter((val, i) => $els[i].checkVisibility())
+      return { all, visible }
+    })
+})
+
+// Expand/collapse the first node of this type.
+Cypress.Commands.add('toggleNode', (nodeType) => {
+  cy.get(`[data-node-type=${nodeType}] .node-expand-collapse-button:first`).click()
+})
+
+describe('TreeItem component', () => {
+  it('expands/collapses children', () => {
+    cy.vmount(TreeItem, {
+      props: {
+        node: simpleCyclepointNode,
+        filteredOutNodesCache: new WeakMap(),
+      },
+    })
+    cy.addVuetifyStyles(cy)
+
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        // Auto expand everything down to task nodes by default
+        all: ['cycle', 'task'],
+        visible: ['cycle', 'task']
+      })
+
+    cy.toggleNode('task')
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        all: ['cycle', 'task', 'job'],
+        visible: ['cycle', 'task', 'job']
+      })
+
+    cy.toggleNode('cycle')
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        // All previously expanded nodes under cycle should be hidden but remain rendered
+        all: ['cycle', 'task', 'job'],
+        visible: ['cycle']
+      })
+
+    cy.toggleNode('cycle')
+    cy.toggleNode('job')
+    cy.getNodeTypes()
+      .should('deep.equal', {
+        // Job node does not use a child TreeItem
+        all: ['cycle', 'task', 'job'],
+        visible: ['cycle', 'task', 'job']
+      })
+  })
+})
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index 8a7ecad70..849f54727 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <div
     v-show="!filteredOutNodesCache.get(node)"
     class="c-treeitem"
+    :data-node-type="node.type"
   >
     <div
       class="node d-flex align-center"
@@ -30,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-if="renderExpandCollapseBtn"
         aria-label="Expand/collapse"
         class="node-expand-collapse-button flex-shrink-0"
-        @click="toggleExpandCollapse"
+        @click="toggleExpandCollapse()"
         :style="expandCollapseBtnStyle"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
@@ -134,7 +135,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 class="ml-2 bg-grey text-white"
                 size="small"
                 link
-                @click="toggleExpandCollapse"
+                @click="toggleExpandCollapse()"
               >
                 +{{ jobMessageOutputs.length - 5 }}
               </v-chip>
@@ -184,6 +185,8 @@ import {
   jobMessageOutputs
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
+import { once } from '@/utils'
+import { useToggle } from '@vueuse/core'
 
 export default {
   name: 'TreeItem',
@@ -240,27 +243,22 @@ export default {
     },
   },
 
-  data () {
+  setup (props) {
+    const [isExpanded, toggleExpandCollapse] = useToggle(
+      props.autoExpandTypes.includes(props.node.type)
+    )
+    // Toggles to true when this.isExpanded first becomes true and doesn't get recomputed afterwards
+    const renderChildren = once(isExpanded)
+
     return {
-      manuallyExpanded: null,
+      isExpanded,
+      latestJob,
+      renderChildren,
+      toggleExpandCollapse,
     }
   },
 
   computed: {
-    isExpanded: {
-      get () {
-        return this.manuallyExpanded ?? this.autoExpandTypes.includes(this.node.type)
-      },
-      set (value) {
-        this.manuallyExpanded = value
-      }
-    },
-
-    renderChildren () {
-      // Toggles to true when this.isExpanded first becomes true and doesn't get recomputed afterwards
-      return this.renderChildren || this.isExpanded
-    },
-
     hasChildren () {
       return (
         // "job" nodes have auto-generated "job-detail" nodes
@@ -310,13 +308,6 @@ export default {
     }
   },
 
-  methods: {
-    toggleExpandCollapse () {
-      this.isExpanded = !this.isExpanded
-    },
-    latestJob
-  },
-
   icons: {
     mdiChevronRight,
   },
diff --git a/src/utils/index.js b/src/utils/index.js
index 0d794751b..2d476a683 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 
 /**
  * Watch source until it is truthy, then call the callback (and stop watching).
@@ -27,6 +27,10 @@ import { watch } from 'vue'
  * @param {import('vue').WatchOptions?} options
  */
 export function when (source, callback, options = {}) {
+  if (source.value) {
+    callback()
+    return
+  }
   const unwatch = watch(
     source,
     (ready) => {
@@ -35,7 +39,7 @@ export function when (source, callback, options = {}) {
         callback()
       }
     },
-    { immediate: true, ...options }
+    options
   )
 }
 
@@ -53,3 +57,20 @@ export function until (source, options = {}) {
     when(source, resolve, options)
   })
 }
+
+/**
+ * Return a ref that is permanently set to true when the source becomes truthy.
+ *
+ * @param {import('vue').WatchSource} source
+ * @param {import('vue').WatchOptions?} options
+ * @returns {import('vue').Ref<boolean>}
+ */
+export function once (source, options = {}) {
+  const _ref = ref(false)
+  when(
+    source,
+    () => { _ref.value = true },
+    options
+  )
+  return _ref
+}
diff --git a/tests/unit/components/cylc/tree/tree.data.js b/tests/unit/components/cylc/tree/tree.data.js
index 67e63fd18..c19834897 100644
--- a/tests/unit/components/cylc/tree/tree.data.js
+++ b/tests/unit/components/cylc/tree/tree.data.js
@@ -237,7 +237,7 @@ const simpleWorkflowTree4Nodes = [
           __typename: 'CyclePoint',
           state: 'failed'
         },
-        children: [],
+        children: ['stub'],
         familyTree: [
           {
             id: '~user/workflow1//20100101T0000Z/root',
diff --git a/tests/unit/components/cylc/tree/treeitem.vue.spec.js b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
index 113490c75..ae1310b3e 100644
--- a/tests/unit/components/cylc/tree/treeitem.vue.spec.js
+++ b/tests/unit/components/cylc/tree/treeitem.vue.spec.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -116,18 +116,17 @@ describe('TreeItem component', () => {
 
   describe('children', () => {
     it.each([
-      { manuallyExpanded: null, expected: ['CyclePoint', 'TaskProxy'] },
-      { manuallyExpanded: true, expected: ['CyclePoint', 'TaskProxy', 'Job'] },
-      { manuallyExpanded: false, expected: [] },
-    ])('recursively mounts child TreeItems if expanded ($manuallyExpanded)', ({ manuallyExpanded, expected }) => {
+      { autoExpandTypes: undefined, expected: ['CyclePoint', 'TaskProxy'] },
+      { autoExpandTypes: ['workflow', 'cycle', 'family', 'task'], expected: ['CyclePoint', 'TaskProxy', 'Job'] },
+      { autoExpandTypes: ['workflow'], expected: ['CyclePoint'] },
+      { autoExpandTypes: [], expected: [] },
+    ])('recursively mounts child TreeItems ($autoExpandTypes)', ({ autoExpandTypes, expected }) => {
       const wrapper = mountFunction({
         props: {
           node: simpleWorkflowNode,
           filteredOutNodesCache: new WeakMap(),
+          autoExpandTypes,
         },
-        data: () => ({
-          manuallyExpanded,
-        }),
       })
       expect(
         wrapper.findAllComponents({ name: 'TreeItem' })
diff --git a/tests/unit/utils/index.spec.js b/tests/unit/utils/index.spec.js
index 25fa72bf5..a1f99afc8 100644
--- a/tests/unit/utils/index.spec.js
+++ b/tests/unit/utils/index.spec.js
@@ -16,7 +16,7 @@
  */
 
 import { nextTick, ref } from 'vue'
-import { when, until } from '@/utils/index'
+import { once, when, until } from '@/utils/index'
 
 describe.each([
   { func: when, description: 'watches source until true and then stops watching' },
@@ -42,3 +42,32 @@ describe.each([
     expect(counter).toEqual(1)
   })
 })
+
+describe('when()', () => {
+  it('works for a source that is already truthy', () => {
+    const source = ref(true)
+    let counter = 0
+    when(source, () => counter++)
+    expect(counter).toEqual(1)
+  })
+})
+
+describe('once()', () => {
+  it('returns a ref that permanently toggles to true when the source bevomes truthy', async () => {
+    const source = ref(false)
+    const myRef = once(source)
+    expect(myRef.value).toEqual(false)
+    source.value = true
+    await nextTick()
+    expect(myRef.value).toEqual(true)
+    source.value = false
+    await nextTick()
+    expect(myRef.value).toEqual(true)
+  })
+
+  it('works for a source that is already truthy', () => {
+    const source = ref(true)
+    const myRef = once(source)
+    expect(myRef.value).toEqual(true)
+  })
+})

From 6de9d53e6ff3fe5725b5f056124959af9d77739f Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 6 Jan 2025 18:10:47 +0000
Subject: [PATCH 2/3] Show flow nums

Show flow nums in tree/table views if not 1 or None.
Dim flow=None in tree/table/graph views.
Show all flow nums in command menu.
Also update mock data.
---
 src/components/cylc/commandMenu/Menu.vue      | 13 +++-
 src/components/cylc/common/FlowNumsChip.vue   | 56 ++++++++++++++
 src/components/cylc/table/Table.vue           | 20 ++++-
 src/components/cylc/tree/TreeItem.vue         | 20 ++++-
 .../mock/checkpoint/get_checkpoint.py         |  1 +
 src/services/mock/json/workflows/multi.json   |  2 +
 src/services/mock/json/workflows/one.json     | 25 ++++++-
 src/styles/cylc/_tree.scss                    |  1 +
 src/styles/index.scss                         |  6 ++
 src/utils/tasks.js                            | 34 ++++++---
 src/views/Graph.vue                           |  6 +-
 src/views/Table.vue                           |  1 +
 src/views/Tree.vue                            |  1 +
 tests/e2e/specs/aotf.cy.js                    | 26 +++----
 tests/e2e/specs/graph.cy.js                   | 14 ++++
 tests/e2e/specs/table.cy.js                   | 38 ++++++----
 tests/e2e/specs/tree.cy.js                    | 73 +++++++++++--------
 .../cylc/common/flowNumsChip.vue.spec.js      | 37 ++++++++++
 .../components/cylc/tree/tree.vue.spec.js     | 11 +--
 tests/unit/utils/tasks.spec.js                | 31 +++++++-
 20 files changed, 319 insertions(+), 97 deletions(-)
 create mode 100644 src/components/cylc/common/FlowNumsChip.vue
 create mode 100644 tests/unit/components/cylc/common/flowNumsChip.vue.spec.js

diff --git a/src/components/cylc/commandMenu/Menu.vue b/src/components/cylc/commandMenu/Menu.vue
index a3e532ce9..8f8a9a849 100644
--- a/src/components/cylc/commandMenu/Menu.vue
+++ b/src/components/cylc/commandMenu/Menu.vue
@@ -126,6 +126,8 @@ import { mapGetters, mapState } from 'vuex'
 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'
 
 export default {
   name: 'CommandMenu',
@@ -199,14 +201,14 @@ export default {
         // can happen briefly when switching workflows
         return
       }
-      let ret = this.node.type
+      let ret = upperFirst(this.node.type)
       if (this.node.type !== 'cycle') {
         // NOTE: cycle point nodes don't have associated node data at present
-        ret += ' - '
+        ret += ' • '
         if (this.node.type === 'workflow') {
-          ret += this.node.node.statusMsg || this.node.node.status || 'state unknown'
+          ret += upperFirst(this.node.node.statusMsg || this.node.node.status || 'state unknown')
         } else {
-          ret += this.node.node.state || 'state unknown'
+          ret += upperFirst(this.node.node.state || 'state unknown')
           if (this.node.node.isHeld) {
             ret += ' (held)'
           }
@@ -216,6 +218,9 @@ export default {
           if (this.node.node.isRunahead) {
             ret += ' (runahead)'
           }
+          if (this.node.node.flowNums) {
+            ret += ` • Flows: ${formatFlowNums(this.node.node.flowNums)}`
+          }
         }
       }
       return ret
diff --git a/src/components/cylc/common/FlowNumsChip.vue b/src/components/cylc/common/FlowNumsChip.vue
new file mode 100644
index 000000000..38fb09b9b
--- /dev/null
+++ b/src/components/cylc/common/FlowNumsChip.vue
@@ -0,0 +1,56 @@
+<!--
+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"
+    data-cy="flow-num-chip"
+  >
+    {{ flowNumsStr }}
+    <v-tooltip location="right">
+      Flows: {{ flowNumsStr }}
+    </v-tooltip>
+  </v-chip>
+</template>
+
+<script setup>
+import { formatFlowNums } from '@/utils/tasks'
+import { mdiLabelOutline } from '@mdi/js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  flowNums: {
+    type: String,
+    required: false,
+  },
+})
+
+const flowNumsStr = computed(
+  () => props.flowNums && formatFlowNums(props.flowNums)
+)
+
+/** Hide flow=1 and flow=None by default */
+const showFlowNums = computed(
+  () => flowNumsStr.value && !['1', 'None'].includes(flowNumsStr.value)
+)
+
+</script>
diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index c6390c10b..fd2c6413b 100644
--- a/src/components/cylc/table/Table.vue
+++ b/src/components/cylc/table/Table.vue
@@ -28,7 +28,11 @@ 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.flowNums) }"
+        :data-cy-task-name="item.task.name"
+      >
         <div style="width: 2em;">
           <Task
             v-command-menu="item.task"
@@ -44,7 +48,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
+          :flowNums="item.task.node.flowNums"
+          class="ml-2"
+        />
       </div>
     </template>
     <template v-slot:item.task.node.task.meanElapsedTime="{ item }">
@@ -110,13 +118,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 +144,7 @@ export default {
   },
 
   components: {
+    FlowNumsChip,
     Task,
     Job,
   },
@@ -243,6 +256,7 @@ export default {
       icons: {
         mdiChevronDown
       },
+      isFlowNone,
       itemsPerPageOptions: [
         { value: 10, title: '10' },
         { value: 20, title: '20' },
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index 849f54727..da3b1fd0c 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-show="!filteredOutNodesCache.get(node)"
     class="c-treeitem"
     :data-node-type="node.type"
+    :data-node-name="node.name"
   >
     <div
       class="node d-flex align-center"
@@ -64,7 +65,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.flowNums) }"
+          >
             <!-- Task summary -->
             <Task
               v-command-menu="node"
@@ -86,7 +91,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </div>
             <span class="mx-1">{{ node.name }}</span>
-          </template>
+            <FlowNumsChip :flowNums="node.node.flowNums"/>
+          </div>
           <template v-else-if="node.type === 'job'">
             <Job
               v-command-menu="node"
@@ -176,22 +182,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mdiChevronRight } from '@mdi/js'
+import {
+  mdiChevronRight,
+} 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 {
+  jobMessageOutputs,
   latestJob,
-  jobMessageOutputs
+  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,
@@ -252,6 +263,7 @@ export default {
 
     return {
       isExpanded,
+      isFlowNone,
       latestJob,
       renderChildren,
       toggleExpandCollapse,
diff --git a/src/services/mock/checkpoint/get_checkpoint.py b/src/services/mock/checkpoint/get_checkpoint.py
index 649ededb0..d8b7d0e09 100644
--- a/src/services/mock/checkpoint/get_checkpoint.py
+++ b/src/services/mock/checkpoint/get_checkpoint.py
@@ -82,6 +82,7 @@
     meanElapsedTime
     name
   }
+  flowNums
 }
 
 fragment JobData on Job {
diff --git a/src/services/mock/json/workflows/multi.json b/src/services/mock/json/workflows/multi.json
index 83906f8b8..67a717f4d 100644
--- a/src/services/mock/json/workflows/multi.json
+++ b/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"
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 45ea00f2b..2e05e4d04 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -115,6 +115,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
@@ -133,6 +134,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/SUCCEEDED",
             "name": "SUCCEEDED",
@@ -152,6 +154,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1,2]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/BAD",
             "name": "BAD",
@@ -170,6 +173,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/BAD",
             "name": "BAD",
@@ -183,11 +187,12 @@
         {
           "id": "~user/one//20000102T0000Z/sleepy",
           "name": "sleepy",
-          "state": "",
+          "state": "submitted",
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
@@ -206,6 +211,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/SUCCEEDED",
             "name": "SUCCEEDED",
@@ -220,11 +226,12 @@
         {
           "id": "~user/one//20000102T0000Z/waiting",
           "name": "waiting",
-          "state": "",
+          "state": "waiting",
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
@@ -402,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": [
diff --git a/src/styles/cylc/_tree.scss b/src/styles/cylc/_tree.scss
index d80b9d64c..573e7a622 100644
--- a/src/styles/cylc/_tree.scss
+++ b/src/styles/cylc/_tree.scss
@@ -97,6 +97,7 @@ $icon-width: 1.5rem;
     .node-data {
       display: flex;
       flex-wrap: nowrap;
+      align-items: center;
       .node-summary {
         display: flex;
         flex-wrap: nowrap;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0e3534104..d7a75a465 100644
--- a/src/styles/index.scss
+++ b/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;
+  }
+}
diff --git a/src/utils/tasks.js b/src/utils/tasks.js
index 370edf39c..bf6cd4734 100644
--- a/src/utils/tasks.js
+++ b/src/utils/tasks.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -40,7 +40,7 @@ const isStoppedOrderedStates = [
  * @returns {string} a valid Task State name, or empty string if not found
  * @link @see https://github.com/cylc/cylc-flow/blob/d66ae5c3ce8c749c8178d1cd53cb8c81d1560346/lib/cylc/task_state_prop.py
  */
-function extractGroupState (childStates, isStopped = false) {
+export function extractGroupState (childStates, isStopped = false) {
   const states = isStopped ? isStoppedOrderedStates : TaskState.enumValues
   for (const state of states) {
     if (childStates.includes(state.name)) {
@@ -50,7 +50,7 @@ function extractGroupState (childStates, isStopped = false) {
   return ''
 }
 
-function latestJob (taskProxy) {
+export function latestJob (taskProxy) {
   return taskProxy?.children?.[0]?.node
 }
 
@@ -67,7 +67,7 @@ function latestJob (taskProxy) {
  *   }
  * }
  */
-function jobMessageOutputs (jobNode) {
+export function jobMessageOutputs (jobNode) {
   const ret = []
 
   for (const message of jobNode.node.messages || []) {
@@ -96,7 +96,7 @@ function jobMessageOutputs (jobNode) {
  * 00:00:00, rather than undefined
  * @return {string=} Formatted duration
  */
-function formatDuration (dur, allowZeros = false) {
+export function formatDuration (dur, allowZeros = false) {
   if (dur || (dur === 0 && allowZeros === true)) {
     const seconds = dur % 60
     const minutes = ((dur - seconds) / 60) % 60
@@ -118,16 +118,26 @@ function formatDuration (dur, allowZeros = false) {
   return undefined
 }
 
-function dtMean (taskNode) {
+export function dtMean (taskNode) {
   // Convert to an easily read duration format:
   const dur = taskNode.node?.task?.meanElapsedTime
   return formatDuration(dur)
 }
 
-export {
-  extractGroupState,
-  latestJob,
-  jobMessageOutputs,
-  formatDuration,
-  dtMean
+/**
+ * @param {string} flowNums - Flow numbers in DB format
+ * @returns {string} - Flow numbers in pretty format
+ */
+export function formatFlowNums (flowNums) {
+  return JSON.parse(flowNums).join(', ') || 'None'
+}
+
+/**
+ * Return whether a task is in the None flow.
+ *
+ * @param {string=} flowNums
+ * @returns {boolean}
+ */
+export function isFlowNone (flowNums) {
+  return Boolean(flowNums && !JSON.parse(flowNums).length)
 }
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 2c149952c..18d25778d 100644
--- a/src/views/Graph.vue
+++ b/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.flowNums) }"
           />
         </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
@@ -169,6 +171,7 @@ fragment TaskProxyData on TaskProxy {
   task {
     meanElapsedTime
   }
+  flowNums
 }
 
 fragment JobData on Job {
@@ -265,7 +268,8 @@ export default {
       transpose,
       autoRefresh,
       spacing,
-      groupCycle
+      groupCycle,
+      isFlowNone,
     }
   },
 
diff --git a/src/views/Table.vue b/src/views/Table.vue
index 4830ffdb9..d798c8f44 100644
--- a/src/views/Table.vue
+++ b/src/views/Table.vue
@@ -133,6 +133,7 @@ fragment TaskProxyData on TaskProxy {
   firstParent {
     id
   }
+  flowNums
 }
 
 fragment JobData on Job {
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index d6a029c45..83dbb964d 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -193,6 +193,7 @@ fragment TaskProxyData on TaskProxy {
   firstParent {
     id
   }
+  flowNums
 }
 
 fragment JobData on Job {
diff --git a/tests/e2e/specs/aotf.cy.js b/tests/e2e/specs/aotf.cy.js
index 29201b351..adbad4c9c 100644
--- a/tests/e2e/specs/aotf.cy.js
+++ b/tests/e2e/specs/aotf.cy.js
@@ -90,40 +90,37 @@ describe('Api On The Fly', () => {
       cy.wait(['@IntrospectQuery'])
 
       // expand the second task so that its job is visible
-      cy
-        .get(':nth-child(2) > .node > .node-data > .c-task:first')
-        .parent().parent()
-        .find('.node-expand-collapse-button:first')
+      cy.get('.c-tree [data-node-type=task]:eq(1) .node-expand-collapse-button')
         .click()
 
       const tests = [
         // cycle point
         {
-          selector: '.node-data-cycle > .c-task:first',
+          selector: '.node-data-cycle .c-task:first',
           mutationTitle: 'Cycle Mutation',
           mutationText: 'cycle'
         },
         // family
         {
-          selector: '.node-data-family > .c-task:first',
+          selector: '.node-data-family .c-task:first',
           mutationTitle: 'Namespace Mutation',
           mutationText: 'namespace'
         },
         // task
         {
-          selector: '.node-data-task > .c-task:first',
+          selector: '.node-data-task .c-task:first',
           mutationTitle: 'Namespace Mutation',
           mutationText: 'namespace'
         },
         // job (in task summary)
         {
-          selector: '.node-data-task > .node-summary > .c-job:first',
+          selector: '.node-data-task .node-summary .c-job:first',
           mutationTitle: 'Job Mutation',
           mutationText: 'job'
         },
         // job (expanded)
         {
-          selector: '.node-data-job:visible > .c-job',
+          selector: '.node-data-job:visible .c-job',
           mutationTitle: 'Job Mutation',
           mutationText: 'job'
         }
@@ -133,13 +130,11 @@ describe('Api On The Fly', () => {
         // click on a cycle point node
         cy
           .get(test.selector)
-          .should('exist')
           .should('be.visible')
           .click()
         // ensure it opens the mutation menu
         cy
           .get('.c-mutation-menu-list:first')
-          .should('exist')
           .should('be.visible')
           .within(() => {
             // ensure the mutation menu is associated with the correct object
@@ -152,13 +147,12 @@ describe('Api On The Fly', () => {
               .should('have.text', test.mutationText)
           })
         // click outside of the menu
-        cy
-          .get('.workflow-panel:first')
+        // (click on hidden element to avoid clicking on anything unexpected)
+        cy.get('noscript')
           .click({ force: true })
         // ensure that the menu has closed
-        cy
-          .get('.c-mutation-menu-list')
-          .should('not.be.visible')
+        cy.get('.c-mutation-menu-list')
+          .should('not.exist')
       }
     })
 
diff --git a/tests/e2e/specs/graph.cy.js b/tests/e2e/specs/graph.cy.js
index 56b9232dd..7589b3e5d 100644
--- a/tests/e2e/specs/graph.cy.js
+++ b/tests/e2e/specs/graph.cy.js
@@ -149,4 +149,18 @@ describe('Graph View', () => {
     waitForGraphLayout()
     checkRememberToolbarSettings('[data-cy="control-groupCycle"]', 'not.have.class', 'have.class')
   })
+
+  describe('Flow nums', () => {
+    it('Shows flow=None task dimmed', () => {
+      cy.visit('/#/graph/one')
+      waitForGraphLayout()
+      cy.get('.c-graph-node.flow-none').as('flowNone')
+        .should('have.css', 'opacity')
+        .then((opacity) => {
+          expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
+        })
+      cy.get('@flowNone')
+        .contains('sleepy')
+    })
+  })
 })
diff --git a/tests/e2e/specs/table.cy.js b/tests/e2e/specs/table.cy.js
index 4d5a6c3c9..f2cdc2790 100644
--- a/tests/e2e/specs/table.cy.js
+++ b/tests/e2e/specs/table.cy.js
@@ -37,15 +37,13 @@ describe('Table view', () => {
         .should('be.empty')
       cy.get('[data-cy="filter task state"] input')
         .should('have.value', '')
-      cy.get('td > div.d-flex > div')
-        .contains('sleepy')
+      cy.get('td [data-cy-task-name=sleepy]')
         .should('be.visible')
       for (const id of ['eep', '/sle']) {
         cy.get('[data-cy=filter-id] input')
           .clear()
           .type(id)
-        cy.get('td > div.d-flex > div')
-          .contains('sleepy')
+        cy.get('td [data-cy-task-name=sleepy]')
           .should('be.visible')
         cy.get('.c-table table > tbody > tr')
           .should('have.length', 1)
@@ -57,8 +55,7 @@ describe('Table view', () => {
         .get('.c-table table > tbody > tr')
         .should('have.length', initialNumRows)
       cy
-        .get('td > div.d-flex > div')
-        .contains(TaskState.FAILED.name)
+        .get('td [data-cy-task-name=failed]')
         .should('be.visible')
       cy
         .get('[data-cy="filter task state"]')
@@ -68,8 +65,7 @@ describe('Table view', () => {
         .contains(TaskState.RUNNING.name)
         .click({ force: true })
       cy
-        .get('td > div.d-flex > div')
-        .contains('checkpoint')
+        .get('td [data-cy-task-name=checkpoint]')
         .should('be.visible')
       cy
         .get('.c-table table > tbody > tr')
@@ -95,8 +91,7 @@ describe('Table view', () => {
         .get('[data-cy=filter-id] input')
         .type('eventually')
       cy
-        .get('td > div.d-flex > div')
-        .contains('eventually')
+        .get('td [data-cy-task-name=eventually_succeeded]')
         .should('be.visible')
     })
     it('displays and sorts mean run time', () => {
@@ -161,8 +156,7 @@ describe('State saving', () => {
       .get('[data-cy=filter-id] input:last')
       .type('eventually')
     cy
-      .get('td > div.d-flex > div')
-      .contains('eventually')
+      .get('td [data-cy-task-name=eventually_succeeded]')
       .should('be.visible')
     // Navigate away
     cy.visit('/#/')
@@ -174,8 +168,7 @@ describe('State saving', () => {
       .should('have.length', 1)
       .should('be.visible')
     cy
-      .get('td > div.d-flex > div')
-      .contains('eventually')
+      .get('td [data-cy-task-name=eventually_succeeded]')
       .should('be.visible')
   })
 
@@ -210,4 +203,21 @@ describe('State saving', () => {
     cy.get('@itemsPerPage').find('input')
       .should('have.value', -1)
   })
+
+  describe('Flow nums', () => {
+    it('Only shows flow nums when not 1, and flow=None is 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')
+        .should('have.css', 'opacity')
+        .then((opacity) => {
+          expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
+        })
+    })
+  })
 })
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index be10e3fb9..71838d275 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -37,8 +37,7 @@ describe('Tree view', () => {
     cy.get('.node-data-job:first')
       .should('not.exist')
     // Expand the first task
-    cy.get('.node-data-task:first')
-      .parents('.node')
+    cy.get('[data-node-type=task]:first')
       .find('.node-expand-collapse-button')
       .click()
     // Now the first job should be visible
@@ -59,9 +58,7 @@ describe('Tree view', () => {
   it('Displays job details when expanded', () => {
     // this is testing that there is a margin, not necessarily that the leaf node's triangle is exactly under the node
     cy.visit('/#/tree/one')
-    cy.get('.node-data-task')
-      .contains('eventually_succeeded')
-      .parents('.node')
+    cy.get('[data-node-name=eventually_succeeded]')
       .find('.node-expand-collapse-button')
       .click()
     // no jobs, and no leaves are visible initially
@@ -136,19 +133,12 @@ describe('Tree view', () => {
     cy.visit('/#/tree/one')
 
     // find the task proxy
-    cy
-      .get('.mx-1')
-      .contains('eventually_succeeded')
-      .parent()
-      .parent()
-
+    cy.get('[data-node-name=eventually_succeeded]').as('task')
       // expand the job nodes
       .find('.node-expand-collapse-button')
       .click({ force: true })
-      .parent()
-      .parent()
-
       // the jobs should be visible
+    cy.get('@task')
       .find('.node-data-job')
       .should('be.visible')
 
@@ -160,20 +150,16 @@ describe('Tree view', () => {
       // the remainder should be referenced in an overflow counter +2
       .parent()
       .contains('+2')
-      .parent()
-      .parent()
-      .parent()
-      .parent()
 
-      // expand the job details node
+    // expand the job details node
+    cy.get('@task')
+      .find('[data-node-type=job]:first').as('job')
       .find('.node-expand-collapse-button')
       .click({ force: true })
 
-      // all 7 outputs/messages should be listed in the job-details
-      .parent()
-      .parent()
-      .find('.job-details')
-      .find('.output')
+    // all 7 outputs/messages should be listed in the job-details
+    cy.get('@job')
+      .find('.job-details .output')
       .should('have.length', 7)
   })
 
@@ -193,8 +179,7 @@ describe('Tree view', () => {
         cy.get('.node-data-task:visible')
           .should('have.length.lessThan', initialNumTasks)
           .contains('succeeded')
-        cy.get('.node-data-task')
-          .contains('waiting')
+        cy.get('[data-node-name=waiting]')
           .should('not.be.visible')
       }
       // It should stop filtering when input is cleared
@@ -250,7 +235,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 +260,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')
     })
 
@@ -321,9 +306,7 @@ describe('Tree view', () => {
         .click()
         .get('.node-data-job:first')
         .should('not.exist')
-      cy.get('.node-data-task')
-        .contains('failed')
-        .parents('.node')
+      cy.get('[data-node-name=failed]')
         .find('.node-expand-collapse-button')
         .click()
         .get('.node-data-job:first')
@@ -386,4 +369,32 @@ describe('Tree view', () => {
       cy.get('.node-data-family').should('have.length', 0)
     })
   })
+
+  describe('Flow nums', () => {
+    it('Only shows flow nums when not 1, and flow=None is 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')
+        .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')
+        .should('not.exist')
+        // task icon should be dimmed
+        .get('[data-node-name=sleepy] .c-task')
+        .parents('.flow-none')
+        // children should not be dimmed
+        .get('[data-node-name=sleepy] .c-treeitem')
+        .parents('.flow-none')
+        .should('not.exist')
+    })
+  })
 })
diff --git a/tests/unit/components/cylc/common/flowNumsChip.vue.spec.js b/tests/unit/components/cylc/common/flowNumsChip.vue.spec.js
new file mode 100644
index 000000000..bf55131f7
--- /dev/null
+++ b/tests/unit/components/cylc/common/flowNumsChip.vue.spec.js
@@ -0,0 +1,37 @@
+/*
+ * 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/>.
+ */
+
+import { mount } from '@vue/test-utils'
+import FlowNumsChip from '@/components/cylc/common/FlowNumsChip.vue'
+
+describe('Flow Nums Chip component', () => {
+  describe('showFlowNums', () => {
+    it.each([
+      [undefined, undefined],
+      ['[]', false],
+      ['[1]', false],
+      ['[2]', true],
+      ['[1, 2]', true],
+    ])('%s -> %s', (flowNums, expected) => {
+      const wrapper = mount(FlowNumsChip, {
+        props: { flowNums },
+        shallow: true,
+      })
+      expect(wrapper.vm.showFlowNums).toEqual(expected)
+    })
+  })
+})
diff --git a/tests/unit/components/cylc/tree/tree.vue.spec.js b/tests/unit/components/cylc/tree/tree.vue.spec.js
index 94abbe904..060fff6c7 100644
--- a/tests/unit/components/cylc/tree/tree.vue.spec.js
+++ b/tests/unit/components/cylc/tree/tree.vue.spec.js
@@ -15,28 +15,21 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// we mount the tree to include the TreeItem component and other vuetify children components
 import { mount } from '@vue/test-utils'
 import { vi } from 'vitest'
-import { createVuetify } from 'vuetify'
 import { cloneDeep } from 'lodash'
 import Tree from '@/components/cylc/tree/Tree.vue'
 import { simpleWorkflowTree4Nodes } from './tree.data'
-import CommandMenuPlugin from '@/components/cylc/commandMenu/plugin'
-
-const vuetify = createVuetify()
 
 describe('Tree component', () => {
   const mountFunction = (props) => mount(Tree, {
-    global: {
-      plugins: [vuetify, CommandMenuPlugin],
-    },
     props: {
       workflows: cloneDeep(simpleWorkflowTree4Nodes),
       autoStripTypes: ['workflow'],
       filterState: null,
       ...props,
-    }
+    },
+    shallow: true,
   })
 
   it.each([
diff --git a/tests/unit/utils/tasks.spec.js b/tests/unit/utils/tasks.spec.js
index 0511e3f36..700c65095 100644
--- a/tests/unit/utils/tasks.spec.js
+++ b/tests/unit/utils/tasks.spec.js
@@ -16,7 +16,15 @@
  */
 
 import TaskState from '@/model/TaskState.model'
-import { dtMean, extractGroupState, latestJob, formatDuration, jobMessageOutputs } from '@/utils/tasks'
+import {
+  dtMean,
+  extractGroupState,
+  latestJob,
+  formatDuration,
+  jobMessageOutputs,
+  formatFlowNums,
+  isFlowNone,
+} from '@/utils/tasks'
 
 describe('tasks', () => {
   describe('extractGroupState', () => {
@@ -207,4 +215,25 @@ describe('tasks', () => {
       ])
     })
   })
+
+  describe('formatFlowNums', () => {
+    it.each([
+      ['[1]', '1'],
+      ['[1, 4, 8]', '1, 4, 8'],
+      ['[]', 'None'],
+    ])('formatFlowNums(%o) -> %o', (input, expected) => {
+      expect(formatFlowNums(input)).toEqual(expected)
+    })
+  })
+
+  describe('isFlowNone', () => {
+    it.each([
+      [undefined, false],
+      ['[]', true],
+      ['[ ]', true],
+      ['[1]', false],
+    ])('isFlowNone(%o) -> %o', (input, expected) => {
+      expect(isFlowNone(input)).toEqual(expected)
+    })
+  })
 })

From b5d310f7491a82419b8f0ecfd00c656862b9ce57 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 6 Jan 2025 18:23:23 +0000
Subject: [PATCH 3/3] Changelog

---
 changes.d/2016.feat.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changes.d/2016.feat.md

diff --git a/changes.d/2016.feat.md b/changes.d/2016.feat.md
new file mode 100644
index 000000000..ff2e9fe4e
--- /dev/null
+++ b/changes.d/2016.feat.md
@@ -0,0 +1 @@
+Show [flow numbers](https://cylc.github.io/cylc-doc/stable/html/glossary.html#term-flow) when applicable. Removed tasks (flow=None) are now dimmed.