From 5c8459a9a21c29f12fd6bd4e0716942bff3e1a32 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 30 Dec 2024 16:51:37 +0000
Subject: [PATCH 1/3] Show flow nums in tree view & command menu

---
 src/components/cylc/commandMenu/Menu.vue      | 13 ++++++---
 src/components/cylc/tree/TreeItem.vue         | 28 ++++++++++++++++---
 src/services/mock/json/workflows/one.json     |  7 +++++
 src/styles/cylc/_tree.scss                    |  1 +
 src/utils/tasks.js                            | 22 +++++++--------
 src/views/Tree.vue                            |  1 +
 .../components/cylc/tree/tree.vue.spec.js     | 11 ++------
 tests/unit/utils/tasks.spec.js                | 19 ++++++++++++-
 8 files changed, 73 insertions(+), 29 deletions(-)

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/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index 8a7ecad70..dc210d593 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -85,6 +85,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </div>
             <span class="mx-1">{{ node.name }}</span>
+            <v-chip
+              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>
           <template v-else-if="node.type === 'job'">
             <Job
@@ -175,13 +188,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mdiChevronRight } from '@mdi/js'
+import { ref } from 'vue'
+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,
-  jobMessageOutputs
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
 
@@ -240,9 +258,10 @@ export default {
     },
   },
 
-  data () {
+  setup () {
     return {
-      manuallyExpanded: null,
+      manuallyExpanded: ref(null),
+      formatFlowNums,
     }
   },
 
@@ -319,6 +338,7 @@ export default {
 
   icons: {
     mdiChevronRight,
+    flow: mdiLabelOutline
   },
 }
 </script>
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 45ea00f2b..7ba953204 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]",
           "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",
@@ -188,6 +192,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "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",
@@ -225,6 +231,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
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/utils/tasks.js b/src/utils/tasks.js
index 370edf39c..53ac914a2 100644
--- a/src/utils/tasks.js
+++ b/src/utils/tasks.js
@@ -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,16 @@ 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'
 }
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/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..7a7f66c36 100644
--- a/tests/unit/utils/tasks.spec.js
+++ b/tests/unit/utils/tasks.spec.js
@@ -16,7 +16,14 @@
  */
 
 import TaskState from '@/model/TaskState.model'
-import { dtMean, extractGroupState, latestJob, formatDuration, jobMessageOutputs } from '@/utils/tasks'
+import {
+  dtMean,
+  extractGroupState,
+  latestJob,
+  formatDuration,
+  jobMessageOutputs,
+  formatFlowNums,
+} from '@/utils/tasks'
 
 describe('tasks', () => {
   describe('extractGroupState', () => {
@@ -207,4 +214,14 @@ describe('tasks', () => {
       ])
     })
   })
+
+  describe('formatFlowNums', () => {
+    it.each([
+      ['[1]', '1'],
+      ['[1, 4, 8]', '1, 4, 8'],
+      ['[]', 'None'],
+    ])('formatFlowNums(%s) -> %s', (input, expected) => {
+      expect(formatFlowNums(input)).toEqual(expected)
+    })
+  })
 })

From 929fefc84787051c58654d0da788ef3177275c33 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 30 Dec 2024 16:51:37 +0000
Subject: [PATCH 2/3] Simplify TreeItem and fix tests

---
 cypress/component/treeItem.cy.js              | 77 +++++++++++++++++++
 src/components/cylc/tree/TreeItem.vue         | 43 ++++-------
 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, 155 insertions(+), 38 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..1faeba449
--- /dev/null
+++ b/cypress/component/treeItem.cy.js
@@ -0,0 +1,77 @@
+/*
+ * 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'
+
+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 }
+    })
+})
+
+Cypress.Commands.add('toggleNode', (nodeType) => {
+  cy.get(`[data-node-type=${nodeType}] .node-expand-collapse-button:first`).click()
+})
+
+describe('TreeItem component', () => {
+  it('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 ndoes 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 dc210d593..7de1256c7 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"
@@ -86,6 +87,7 @@ 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"
@@ -147,7 +149,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>
@@ -188,7 +190,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { ref } from 'vue'
 import {
   mdiChevronRight,
   mdiLabelOutline,
@@ -202,6 +203,8 @@ import {
   latestJob,
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
+import { once } from '@/utils'
+import { useToggle } from '@vueuse/core'
 
 export default {
   name: 'TreeItem',
@@ -258,28 +261,23 @@ export default {
     },
   },
 
-  setup () {
+  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: ref(null),
+      isExpanded,
+      latestJob,
       formatFlowNums,
+      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
@@ -329,13 +327,6 @@ export default {
     }
   },
 
-  methods: {
-    toggleExpandCollapse () {
-      this.isExpanded = !this.isExpanded
-    },
-    latestJob
-  },
-
   icons: {
     mdiChevronRight,
     flow: mdiLabelOutline
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 1a5996f55cb4ab14c0111db1cdd7f8a0b5d84c22 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Mon, 30 Dec 2024 17:10:17 +0000
Subject: [PATCH 3/3] Only show flow nums if not 1 or None; dim flow=None

Also update mock data
---
 src/components/cylc/commandMenu/Menu.vue    |  4 +-
 src/components/cylc/common/FlowNumsChip.vue | 52 +++++++++++++++++++++
 src/components/cylc/table/Table.vue         | 20 ++++++--
 src/components/cylc/tree/TreeItem.vue       | 32 +++++--------
 src/services/mock/json/workflows/multi.json |  2 +
 src/services/mock/json/workflows/one.json   | 22 +++++++--
 src/styles/index.scss                       |  6 +++
 src/utils/tasks.js                          | 28 +++++++++++
 src/views/Graph.vue                         |  5 +-
 tests/e2e/specs/aotf.cy.js                  | 26 ++++-------
 tests/e2e/specs/table.cy.js                 | 14 +++---
 tests/e2e/specs/tree.cy.js                  | 45 ++++++------------
 12 files changed, 172 insertions(+), 84 deletions(-)
 create mode 100644 src/components/cylc/common/FlowNumsChip.vue

diff --git a/src/components/cylc/commandMenu/Menu.vue b/src/components/cylc/commandMenu/Menu.vue
index 8f8a9a849..f30356b00 100644
--- a/src/components/cylc/commandMenu/Menu.vue
+++ b/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)}`
           }
         }
diff --git a/src/components/cylc/common/FlowNumsChip.vue b/src/components/cylc/common/FlowNumsChip.vue
new file mode 100644
index 000000000..94b263673
--- /dev/null
+++ b/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>
diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index c6390c10b..b834c598b 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) }"
+        data-cy="task"
+      >
         <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
+          :node="item.task.node"
+          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 7de1256c7..d4769c6a1 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) }"
+          >
             <!-- Task summary -->
             <Task
               v-command-menu="node"
@@ -86,21 +91,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 +184,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 +263,8 @@ export default {
 
     return {
       isExpanded,
+      isFlowNone,
       latestJob,
-      formatFlowNums,
       renderChildren,
       toggleExpandCollapse,
     }
@@ -329,7 +322,6 @@ export default {
 
   icons: {
     mdiChevronRight,
-    flow: mdiLabelOutline
   },
 }
 </script>
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 7ba953204..2e05e4d04 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/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": [
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 53ac914a2..5c4d6f315 100644
--- a/src/utils/tasks.js
+++ b/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)
+}
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 2c149952c..b3ab51d13 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) }"
           />
         </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,
     }
   },
 
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/table.cy.js b/tests/e2e/specs/table.cy.js
index 4d5a6c3c9..a40c897e5 100644
--- a/tests/e2e/specs/table.cy.js
+++ b/tests/e2e/specs/table.cy.js
@@ -37,14 +37,14 @@ describe('Table view', () => {
         .should('be.empty')
       cy.get('[data-cy="filter task state"] input')
         .should('have.value', '')
-      cy.get('td > div.d-flex > div')
+      cy.get('td [data-cy=task]')
         .contains('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')
+        cy.get('td [data-cy=task]')
           .contains('sleepy')
           .should('be.visible')
         cy.get('.c-table table > tbody > tr')
@@ -57,7 +57,7 @@ describe('Table view', () => {
         .get('.c-table table > tbody > tr')
         .should('have.length', initialNumRows)
       cy
-        .get('td > div.d-flex > div')
+        .get('td [data-cy=task]')
         .contains(TaskState.FAILED.name)
         .should('be.visible')
       cy
@@ -68,7 +68,7 @@ describe('Table view', () => {
         .contains(TaskState.RUNNING.name)
         .click({ force: true })
       cy
-        .get('td > div.d-flex > div')
+        .get('td [data-cy=task]')
         .contains('checkpoint')
         .should('be.visible')
       cy
@@ -95,7 +95,7 @@ describe('Table view', () => {
         .get('[data-cy=filter-id] input')
         .type('eventually')
       cy
-        .get('td > div.d-flex > div')
+        .get('td [data-cy=task]')
         .contains('eventually')
         .should('be.visible')
     })
@@ -161,7 +161,7 @@ describe('State saving', () => {
       .get('[data-cy=filter-id] input:last')
       .type('eventually')
     cy
-      .get('td > div.d-flex > div')
+      .get('td [data-cy=task]')
       .contains('eventually')
       .should('be.visible')
     // Navigate away
@@ -174,7 +174,7 @@ describe('State saving', () => {
       .should('have.length', 1)
       .should('be.visible')
     cy
-      .get('td > div.d-flex > div')
+      .get('td [data-cy=task]')
       .contains('eventually')
       .should('be.visible')
   })
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index be10e3fb9..5f3d4a865 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')