From 3eae5f4c75886357fb39873b299e3da631fce315 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Mon, 23 Aug 2021 09:26:05 +1200
Subject: [PATCH 01/16] Fix jsdoc

---
 src/mixins/graphql.js         | 2 +-
 src/store/workflows.module.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/mixins/graphql.js b/src/mixins/graphql.js
index 6b50f567a..38e6ae601 100644
--- a/src/mixins/graphql.js
+++ b/src/mixins/graphql.js
@@ -56,7 +56,7 @@ export default {
     /**
      * GraphQL query variables.
      *
-     * @returns {{workflowId: string}}
+     * @returns {Object.<string, string>}
      */
     variables () {
       return {
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index d2799252a..05b065ee3 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -48,12 +48,12 @@ const state = {
     lookup: {}
   },
   /**
-   * This contains a list of workflows returned from GraphQL and is used by components
+   * This contains workflows returned from GraphQL indexed by their ID's. And is used by components
    * such as GScan, Dashboard, and WorkflowsTable.
    *
-   * @type {Array<WorkflowGraphQLData>}
+   * @type {Object.<string, WorkflowGraphQLData>}
    */
-  workflows: [],
+  workflows: {},
   /**
    * This holds the name of the current workflow. This is set by VueRouter
    * and is used to decide what's the current workflow. It is used in conjunction

From 6e2211b95ae9792cebe277d5d511c74ecd3e5a32 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Mon, 23 Aug 2021 10:19:21 +1200
Subject: [PATCH 02/16] Move tree workflow data into its own Vuex module to
 avoid confusion

---
 src/mixins/index.js           |   1 -
 src/store/options.js          |   4 +-
 src/store/tree.module.js      | 118 ++++++++++++++++++++++++++++++++++
 src/store/workflows.module.js |  86 -------------------------
 src/views/Tree.vue            |  10 +--
 5 files changed, 126 insertions(+), 93 deletions(-)
 create mode 100644 src/store/tree.module.js

diff --git a/src/mixins/index.js b/src/mixins/index.js
index 85add48d2..7048be7b8 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -19,7 +19,6 @@ import i18n from '@/i18n'
 
 /**
  * Here we can define the operations that are common to components/views.
- * @type {{methods: {setPageTitle(*=, *=): string}}}
  */
 export default {
   /**
diff --git a/src/store/options.js b/src/store/options.js
index b8346b556..c5ae3985f 100644
--- a/src/store/options.js
+++ b/src/store/options.js
@@ -19,6 +19,7 @@
 import { app } from './app.module'
 import { workflows } from './workflows.module'
 import { user } from './user.module'
+import { tree } from './tree.module'
 
 // State
 const state = {
@@ -80,7 +81,8 @@ export default {
   modules: {
     app,
     workflows,
-    user
+    user,
+    tree
   },
   actions,
   mutations,
diff --git a/src/store/tree.module.js b/src/store/tree.module.js
new file mode 100644
index 000000000..277160e80
--- /dev/null
+++ b/src/store/tree.module.js
@@ -0,0 +1,118 @@
+/**
+ * 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 { clear } from '@/components/cylc/tree'
+import applyDeltasLookup from '@/components/cylc/workflow/deltas'
+import Alert from '@/model/Alert.model'
+import applyDeltasTree from '@/components/cylc/tree/deltas'
+
+const state = {
+  /**
+   * This stores workflow data as a hashmap/dictionary. The keys
+   * are the ID's of the entities returned from GraphQL.
+   *
+   * The values of the dictionary hold the GraphQL data returned as-is.
+   *
+   * The intention is for workflow views to look up data in this structure
+   * and re-use, instead of duplicating it.
+   *
+   * @type {Object.<String, Object>}
+   */
+  lookup: {},
+  /**
+   * This is the CylcTree, which contains the hierarchical tree data structure.
+   * It is created from the GraphQL data, with the only difference that this one
+   * contains hierarchy, while the lookup (not workflow.lookup) is flat-ish.
+   *
+   * The nodes in the .tree property have a reference or pointer (.node) to the
+   * data in the lookup map above, to avoid data duplication.
+   *
+   * @type {Workflow}
+   */
+  workflow: {
+    tree: {},
+    lookup: {}
+  }
+}
+
+const mutations = {
+  SET_WORKFLOW (state, data) {
+    state.workflow = data
+  },
+  SET_LOOKUP (state, data) {
+    state.lookup = data
+  },
+  CLEAR_WORKFLOW (state) {
+    clear(state.workflow)
+    state.workflow = {
+      tree: {
+        id: '',
+        type: 'workflow',
+        children: []
+      },
+      lookup: {}
+    }
+  }
+}
+
+const actions = {
+  applyWorkflowDeltas ({ commit, state }, data) {
+    // modifying state directly in an action results in warnings...
+    const lookup = Object.assign({}, state.lookup)
+    const result = applyDeltasLookup(data, lookup)
+    if (result.errors.length === 0) {
+      commit('SET_LOOKUP', lookup)
+    }
+    result.errors.forEach(error => {
+      commit('SET_ALERT', new Alert(error[0], null, 'error'), { root: true })
+      // eslint-disable-next-line no-console
+      console.warn(...error)
+    })
+  },
+  clearWorkflow ({ commit }) {
+    commit('SET_LOOKUP', {})
+  },
+  applyTreeDeltas ({ commit, state }, data) {
+    // modifying state directly in an action results in warnings...
+    const workflow = state.workflow
+    const lookup = state.lookup
+    // TODO: this could be an options object stored in the Vuex store, in some module...
+    const options = {
+      cyclePointsOrderDesc: localStorage.cyclePointsOrderDesc
+        ? JSON.parse(localStorage.cyclePointsOrderDesc)
+        : true
+    }
+    const result = applyDeltasTree(data, workflow, lookup, options)
+    if (result.errors.length === 0) {
+      commit('SET_WORKFLOW', workflow)
+    }
+    result.errors.forEach(error => {
+      commit('SET_ALERT', new Alert(error[0], null, 'error'), { root: true })
+      // eslint-disable-next-line no-console
+      console.warn(...error)
+    })
+  },
+  clearTree ({ commit }) {
+    commit('CLEAR_WORKFLOW')
+  }
+}
+
+export const tree = {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index 05b065ee3..bbdb89b1d 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -15,38 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import applyDeltasWorkflows from '@/components/cylc/gscan/deltas'
-import applyDeltasLookup from '@/components/cylc/workflow/deltas'
-import applyDeltasTree from '@/components/cylc/tree/deltas'
-import Alert from '@/model/Alert.model'
-import { clear } from '@/components/cylc/tree/index'
 
 const state = {
-  /**
-   * This stores workflow data as a hashmap/dictionary. The keys
-   * are the ID's of the entities returned from GraphQL.
-   *
-   * The values of the dictionary hold the GraphQL data returned as-is.
-   *
-   * The intention is for workflow views to look up data in this structure
-   * and re-use, instead of duplicating it.
-   *
-   * @type {Object.<String, Object>}
-   */
-  lookup: {},
-  /**
-   * This is the CylcTree, which contains the hierarchical tree data structure.
-   * It is created from the GraphQL data, with the only difference that this one
-   * contains hierarchy, while the lookup (not workflow.lookup) is flat-ish.
-   *
-   * The nodes in the .tree property have a reference or pointer (.node) to the
-   * data in the lookup map above, to avoid data duplication.
-   *
-   * @type {Workflow}
-   */
-  workflow: {
-    tree: {},
-    lookup: {}
-  },
   /**
    * This contains workflows returned from GraphQL indexed by their ID's. And is used by components
    * such as GScan, Dashboard, and WorkflowsTable.
@@ -82,23 +52,6 @@ const mutations = {
   },
   SET_WORKFLOW_NAME (state, data) {
     state.workflowName = data
-  },
-  SET_WORKFLOW (state, data) {
-    state.workflow = data
-  },
-  SET_LOOKUP (state, data) {
-    state.lookup = data
-  },
-  CLEAR_WORKFLOW (state) {
-    clear(state.workflow)
-    state.workflow = {
-      tree: {
-        id: '',
-        type: 'workflow',
-        children: []
-      },
-      lookup: {}
-    }
   }
 }
 
@@ -114,45 +67,6 @@ const actions = {
   },
   clearWorkflows ({ commit }) {
     commit('SET_WORKFLOWS', [])
-  },
-  applyWorkflowDeltas ({ commit, state }, data) {
-    // modifying state directly in an action results in warnings...
-    const lookup = Object.assign({}, state.lookup)
-    const result = applyDeltasLookup(data, lookup)
-    if (result.errors.length === 0) {
-      commit('SET_LOOKUP', lookup)
-    }
-    result.errors.forEach(error => {
-      commit('SET_ALERT', new Alert(error[0], null, 'error'), { root: true })
-      // eslint-disable-next-line no-console
-      console.warn(...error)
-    })
-  },
-  clearWorkflow ({ commit }) {
-    commit('SET_LOOKUP', {})
-  },
-  applyTreeDeltas ({ commit, state }, data) {
-    // modifying state directly in an action results in warnings...
-    const workflow = state.workflow
-    const lookup = state.lookup
-    // TODO: this could be an options object stored in the Vuex store, in some module...
-    const options = {
-      cyclePointsOrderDesc: localStorage.cyclePointsOrderDesc
-        ? JSON.parse(localStorage.cyclePointsOrderDesc)
-        : true
-    }
-    const result = applyDeltasTree(data, workflow, lookup, options)
-    if (result.errors.length === 0) {
-      commit('SET_WORKFLOW', workflow)
-    }
-    result.errors.forEach(error => {
-      commit('SET_ALERT', new Alert(error[0], null, 'error'), { root: true })
-      // eslint-disable-next-line no-console
-      console.warn(...error)
-    })
-  },
-  clearTree ({ commit }) {
-    commit('CLEAR_WORKFLOW')
   }
 }
 
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index fb06f45ef..b115dab6b 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -70,7 +70,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('workflows', ['workflow']),
+    ...mapState('tree', ['workflow']),
     workflows () {
       return this.workflow &&
         this.workflow.tree &&
@@ -84,12 +84,12 @@ export default {
         this.variables,
         'workflow',
         [
-          'workflows/applyWorkflowDeltas',
-          'workflows/applyTreeDeltas'
+          'tree/applyWorkflowDeltas',
+          'tree/applyTreeDeltas'
         ],
         [
-          'workflows/clearWorkflow',
-          'workflows/clearTree'
+          'tree/clearWorkflow',
+          'tree/clearTree'
         ]
       )
     }

From 744fb9a303887c947e4248c74fb45a9a01029799 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Mon, 23 Aug 2021 13:29:36 +1200
Subject: [PATCH 03/16] Move the function that applies deltas to a lookup-like
 structure to a common module (so GScan can re-use it too)

---
 src/components/cylc/common/deltas.js   | 135 +++++++++++++++++++++++
 src/components/cylc/workflow/deltas.js | 142 -------------------------
 src/store/tree.module.js               |   2 +-
 src/store/workflows.module.js          |  35 ++++++
 4 files changed, 171 insertions(+), 143 deletions(-)
 delete mode 100644 src/components/cylc/workflow/deltas.js

diff --git a/src/components/cylc/common/deltas.js b/src/components/cylc/common/deltas.js
index ef5a2f9ef..acc3c0641 100644
--- a/src/components/cylc/common/deltas.js
+++ b/src/components/cylc/common/deltas.js
@@ -15,6 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import Vue from 'vue'
+import mergeWith from 'lodash/mergeWith'
+import isArray from 'lodash/isArray'
+import { mergeWithCustomizer } from '@/components/cylc/common/merge'
+
 /**
  * @typedef {Object} GraphQLResponseData
  * @property {Deltas} deltas
@@ -79,3 +84,133 @@
  * @property {Array<string>} familyProxies - IDs of family proxies removed
  * @property {Array<string>} jobs - IDs of jobs removed
  */
+
+/**
+ * @typedef {Object} Result
+ * @property {Array<Object>} errors
+ */
+
+/**
+ * @param {DeltasAdded} added
+ * @param {Object.<String, Object>} lookup
+ * @return {Result}
+ */
+function applyDeltasAdded (added, lookup) {
+  const result = {
+    errors: []
+  }
+  Object.values(added).forEach(addedValue => {
+    const items = isArray(addedValue) ? addedValue : [addedValue]
+    items.forEach(addedData => {
+      // An example for a data without .id, is the empty delta with __typename: "Added". It does occur, and can cause runtime errors.
+      if (addedData.id) {
+        try {
+          Vue.set(lookup, addedData.id, addedData)
+        } catch (error) {
+          result.errors.push([
+            'Error applying added-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
+            error,
+            addedData,
+            lookup
+          ])
+        }
+      }
+    })
+  })
+  return result
+}
+
+/**
+ * Deltas updated.
+ *
+ * @param updated {DeltasUpdated} updated
+ * @param {Object.<String, Object>} lookup
+ * @return {Result}
+ */
+function applyDeltasUpdated (updated, lookup) {
+  const result = {
+    errors: []
+  }
+  Object.values(updated).forEach(updatedValue => {
+    const items = isArray(updatedValue) ? updatedValue : [updatedValue]
+    items.forEach(updatedData => {
+      // An example for a data without .id, is the empty delta with __typename: "Updated". It does occur, and can cause runtime errors.
+      if (updatedData.id) {
+        try {
+          const existingNode = lookup[updatedData.id]
+          if (existingNode) {
+            mergeWith(existingNode, updatedData, mergeWithCustomizer)
+          } else {
+            // TODO: we are adding in the updated. Is that OK? Should we revisit it later perhaps?
+            Vue.set(lookup, updatedData.id, updatedData)
+          }
+        } catch (error) {
+          result.errors.push([
+            'Error applying updated-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
+            error,
+            updatedData,
+            lookup
+          ])
+        }
+      }
+    })
+  })
+  return result
+}
+
+/**
+ * Deltas pruned.
+ *
+ * @param {DeltasPruned} pruned - deltas pruned
+ * @param {Object.<String, Object>} lookup
+ * @return {Result}
+ */
+function applyDeltasPruned (pruned, lookup) {
+  Object.values(pruned).forEach(prunedData => {
+    // It can be a String, when you get a delta with only '{ __typename: "Pruned" }'
+    const items = isArray(prunedData) ? prunedData : [prunedData]
+    for (const id of items) {
+      if (lookup[id]) {
+        delete lookup[id]
+      }
+    }
+  })
+  return {
+    errors: []
+  }
+}
+
+/**
+ * A function that simply applies the deltas to a lookup object.
+ *
+ * The entries in deltas will be the value of the lookup, and their ID's
+ * will be the keys.
+ *
+ * This function can be used with any lookup-like structure. When
+ * entries are updated it will merge with a customizer maintaining
+ * the Vue reactivity.
+ *
+ * @param {GraphQLResponseData} data
+ * @param {Object.<String, Object>} lookup
+ */
+export default function (data, lookup) {
+  const added = data.deltas.added
+  const updated = data.deltas.updated
+  const pruned = data.deltas.pruned
+  const errors = []
+  if (added) {
+    const result = applyDeltasAdded(added, lookup)
+    errors.push(...result.errors)
+  }
+  if (updated) {
+    const result = applyDeltasUpdated(updated, lookup)
+    errors.push(...result.errors)
+  }
+  if (pruned) {
+    const result = applyDeltasPruned(pruned, lookup)
+    errors.push(...result.errors)
+  }
+  return {
+    errors
+  }
+}
diff --git a/src/components/cylc/workflow/deltas.js b/src/components/cylc/workflow/deltas.js
deleted file mode 100644
index be970debe..000000000
--- a/src/components/cylc/workflow/deltas.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * 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 Vue from 'vue'
-import mergeWith from 'lodash/mergeWith'
-import isArray from 'lodash/isArray'
-import { mergeWithCustomizer } from '@/components/cylc/common/merge'
-
-/**
- * @typedef {Object} Result
- * @property {Array<Object>} errors
- */
-
-/**
- * @param {DeltasAdded} added
- * @param {Object.<String, Object>} lookup
- * @return {Result}
- */
-function applyDeltasAdded (added, lookup) {
-  const result = {
-    errors: []
-  }
-  Object.values(added).forEach(addedValue => {
-    const items = isArray(addedValue) ? addedValue : [addedValue]
-    items.forEach(addedData => {
-      // An example for a data without .id, is the empty delta with __typename: "Added". It does occur, and can cause runtime errors.
-      if (addedData.id) {
-        try {
-          Vue.set(lookup, addedData.id, addedData)
-        } catch (error) {
-          result.errors.push([
-            'Error applying added-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
-            error,
-            addedData,
-            lookup
-          ])
-        }
-      }
-    })
-  })
-  return result
-}
-
-/**
- * Deltas updated.
- *
- * @param updated {DeltasUpdated} updated
- * @param {Object.<String, Object>} lookup
- * @return {Result}
- */
-function applyDeltasUpdated (updated, lookup) {
-  const result = {
-    errors: []
-  }
-  Object.values(updated).forEach(updatedValue => {
-    const items = isArray(updatedValue) ? updatedValue : [updatedValue]
-    items.forEach(updatedData => {
-      // An example for a data without .id, is the empty delta with __typename: "Updated". It does occur, and can cause runtime errors.
-      if (updatedData.id) {
-        try {
-          const existingNode = lookup[updatedData.id]
-          if (existingNode) {
-            mergeWith(existingNode, updatedData, mergeWithCustomizer)
-          } else {
-            // TODO: we are adding in the updated. Is that OK? Should we revisit it later perhaps?
-            Vue.set(lookup, updatedData.id, updatedData)
-          }
-        } catch (error) {
-          result.errors.push([
-            'Error applying updated-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
-            error,
-            updatedData,
-            lookup
-          ])
-        }
-      }
-    })
-  })
-  return result
-}
-
-/**
- * Deltas pruned.
- *
- * @param {DeltasPruned} pruned - deltas pruned
- * @param {Object.<String, Object>} lookup
- * @return {Result}
- */
-function applyDeltasPruned (pruned, lookup) {
-  Object.values(pruned).forEach(prunedData => {
-    // It can be a String, when you get a delta with only '{ __typename: "Pruned" }'
-    const items = isArray(prunedData) ? prunedData : [prunedData]
-    for (const id of items) {
-      if (lookup[id]) {
-        delete lookup[id]
-      }
-    }
-  })
-  return {
-    errors: []
-  }
-}
-
-/**
- * @param {*} data
- * @param {Object.<String, Object>} lookup
- */
-export default function (data, lookup) {
-  const added = data.deltas.added
-  const updated = data.deltas.updated
-  const pruned = data.deltas.pruned
-  const errors = []
-  if (added) {
-    const result = applyDeltasAdded(added, lookup)
-    errors.push(...result.errors)
-  }
-  if (updated) {
-    const result = applyDeltasUpdated(updated, lookup)
-    errors.push(...result.errors)
-  }
-  if (pruned) {
-    const result = applyDeltasPruned(pruned, lookup)
-    errors.push(...result.errors)
-  }
-  return {
-    errors
-  }
-}
diff --git a/src/store/tree.module.js b/src/store/tree.module.js
index 277160e80..9ae9bd8d6 100644
--- a/src/store/tree.module.js
+++ b/src/store/tree.module.js
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { clear } from '@/components/cylc/tree'
-import applyDeltasLookup from '@/components/cylc/workflow/deltas'
+import applyDeltasLookup from '@/components/cylc/common/deltas'
 import Alert from '@/model/Alert.model'
 import applyDeltasTree from '@/components/cylc/tree/deltas'
 
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index bbdb89b1d..2f192e2d3 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -14,6 +14,8 @@
  * 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 Vue from 'vue'
+import Alert from '@/model/Alert.model'
 import applyDeltasWorkflows from '@/components/cylc/gscan/deltas'
 
 const state = {
@@ -24,6 +26,9 @@ const state = {
    * @type {Object.<string, WorkflowGraphQLData>}
    */
   workflows: {},
+  gscan: {
+    tree: {}
+  },
   /**
    * This holds the name of the current workflow. This is set by VueRouter
    * and is used to decide what's the current workflow. It is used in conjunction
@@ -50,6 +55,17 @@ const mutations = {
   SET_WORKFLOWS (state, data) {
     state.workflows = data
   },
+  SET_GSCAN (state, data) {
+    state.gscan = data
+  },
+  CLEAR_GSCAN (state) {
+    Object.keys(state.gscan.tree).forEach(key => {
+      Vue.delete(state.gscan.tree, key)
+    })
+    state.gscan = {
+      tree: {}
+    }
+  },
   SET_WORKFLOW_NAME (state, data) {
     state.workflowName = data
   }
@@ -67,6 +83,25 @@ const actions = {
   },
   clearWorkflows ({ commit }) {
     commit('SET_WORKFLOWS', [])
+  },
+  applyGScanDeltas ({ commit, state }, data) {
+    // TODO
+    const gscan = state.gscan
+    const options = {
+      hierarchical: true
+    }
+    const result = applyDeltasGscan(data, gscan, options)
+    if (result.errors.length === 0) {
+      commit('SET_GSCAN', gscan)
+    }
+    result.errors.forEach(error => {
+      commit('SET_ALERT', new Alert(error[0], null, 'error'), { root: true })
+      // eslint-disable-next-line no-console
+      console.warn(...error)
+    })
+  },
+  clearGScan ({ commit }) {
+    commit('CLEAR_GSCAN')
   }
 }
 

From 5c4bf2c243e2e47dba0ec5ad016e23d4404aaf0b Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Mon, 23 Aug 2021 14:46:04 +1200
Subject: [PATCH 04/16] Begin working on the functions to apply deltas (with
 propagated states!) to GScan

---
 src/components/cylc/gscan/GScan.vue | 34 +++++-----
 src/components/cylc/gscan/deltas.js | 97 +++++++++++++++++++++++++----
 src/components/cylc/gscan/index.js  | 24 +++++++
 src/components/cylc/tree/deltas.js  |  6 +-
 src/store/workflows.module.js       |  6 +-
 5 files changed, 133 insertions(+), 34 deletions(-)
 create mode 100644 src/components/cylc/gscan/index.js

diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
index a1c2147b4..d28486555 100644
--- a/src/components/cylc/gscan/GScan.vue
+++ b/src/components/cylc/gscan/GScan.vue
@@ -206,7 +206,7 @@ import { WorkflowState } from '@/model/WorkflowState.model'
 import Job from '@/components/cylc/Job'
 import Tree from '@/components/cylc/tree/Tree'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon'
-import { addNodeToTree, createWorkflowNode } from '@/components/cylc/gscan/nodes'
+// import { addNodeToTree, createWorkflowNode } from '@/components/cylc/gscan/nodes'
 import { filterHierarchically } from '@/components/cylc/gscan/filters'
 import { GSCAN_DELTAS_SUBSCRIPTION } from '@/graphql/queries'
 
@@ -226,7 +226,9 @@ export default {
         GSCAN_DELTAS_SUBSCRIPTION,
         {},
         'root',
-        ['workflows/applyWorkflowsDeltas'],
+        [
+          'workflows/applyGScanDeltas'
+        ],
         ['workflows/clearWorkflows']
       ),
       maximumTasksDisplayed: 5,
@@ -310,16 +312,16 @@ export default {
     }
   },
   computed: {
-    ...mapState('workflows', ['workflows']),
-    workflowNodes () {
-      // NOTE: In case we decide to allow the user to switch between hierarchical and flat
-      //       gscan view, then all we need to do is just pass a boolean data-property to
-      //       the `createWorkflowNode` function below. Then reactivity will take care of
-      //       the rest.
-      const reducer = (acc, workflow) => addNodeToTree(createWorkflowNode(workflow, /* hierarchy */true), acc)
-      return Object.values(this.workflows)
-        .reduce(reducer, [])
-    },
+    ...mapState('workflows', ['workflows', 'gscan']),
+    // workflowNodes () {
+    //   // NOTE: In case we decide to allow the user to switch between hierarchical and flat
+    //   //       gscan view, then all we need to do is just pass a boolean data-property to
+    //   //       the `createWorkflowNode` function below. Then reactivity will take care of
+    //   //       the rest.
+    //   const reducer = (acc, workflow) => addNodeToTree(createWorkflowNode(workflow, /* hierarchy */true), acc)
+    //   return Object.values(this.workflows)
+    //     .reduce(reducer, [])
+    // },
     /**
      * @return {Array<String>}
      */
@@ -348,7 +350,7 @@ export default {
       deep: true,
       immediate: false,
       handler: function (newVal) {
-        this.filteredWorkflows = this.filterHierarchically(this.workflowNodes, this.searchWorkflows, this.workflowStates, this.taskStates)
+        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree.children || [], this.searchWorkflows, this.workflowStates, this.taskStates)
       }
     },
     /**
@@ -358,13 +360,13 @@ export default {
     searchWorkflows: {
       immediate: false,
       handler: function (newVal) {
-        this.filteredWorkflows = this.filterHierarchically(this.workflowNodes, newVal, this.workflowStates, this.taskStates)
+        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree.children || [], newVal, this.workflowStates, this.taskStates)
       }
     },
-    workflowNodes: {
+    gscan: {
       immediate: true,
       handler: function () {
-        this.filteredWorkflows = this.filterHierarchically(this.workflowNodes, this.searchWorkflows, this.workflowStates, this.taskStates)
+        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree.children || [], this.searchWorkflows, this.workflowStates, this.taskStates)
       }
     }
   },
diff --git a/src/components/cylc/gscan/deltas.js b/src/components/cylc/gscan/deltas.js
index 671234a0f..109e498a6 100644
--- a/src/components/cylc/gscan/deltas.js
+++ b/src/components/cylc/gscan/deltas.js
@@ -14,21 +14,92 @@
  * 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 Vue from 'vue'
-import { mergeWith } from 'lodash'
-import { mergeWithCustomizer } from '@/components/cylc/common/merge'
+import { createWorkflowNode } from '@/components/cylc/gscan/nodes'
+import { addWorkflow } from '@/components/cylc/gscan/index'
 
-export default function (data, workflows) {
-  const added = data.deltas.added
-  const updated = data.deltas.updated
-  const pruned = data.deltas.pruned
-  if (added && added.workflow && added.workflow.status) {
-    Vue.set(workflows, added.workflow.id, added.workflow)
+function applyDeltasAdded (added, gscan, options) {
+  const result = {
+    errors: []
   }
-  if (updated && updated.workflow && workflows[updated.workflow.id]) {
-    mergeWith(workflows[updated.workflow.id], updated.workflow, mergeWithCustomizer)
+  if (added.workflow) {
+    const hierarchical = options.hierarchical || true
+    const workflowNode = createWorkflowNode(added.workflow, hierarchical)
+    try {
+      addWorkflow(workflowNode, gscan, options)
+    } catch (error) {
+      result.errors.push([
+        'Error applying added-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
+        error,
+        added.workflow,
+        gscan,
+        options
+      ])
+    }
   }
-  if (pruned && pruned.workflow) {
-    Vue.delete(workflows, pruned.workflow)
+  return result
+}
+
+function applyDeltasUpdated () {
+  const result = {
+    errors: []
+  }
+  return result
+}
+
+function applyDeltasPruned () {
+  const result = {
+    errors: []
+  }
+  return result
+}
+
+const DELTAS = {
+  added: applyDeltasAdded,
+  updated: applyDeltasUpdated,
+  pruned: applyDeltasPruned
+}
+
+/**
+ * @param {Deltas} deltas
+ * @param {*} gscan
+ * @param {*} options
+ * @returns {Result}
+ */
+function handleDeltas (deltas, gscan, options) {
+  const errors = []
+  Object.keys(DELTAS).forEach(key => {
+    if (deltas[key]) {
+      const handlingFunction = DELTAS[key]
+      const result = handlingFunction(deltas[key], gscan, options)
+      errors.push(...result.errors)
+    }
+  })
+  return {
+    errors
+  }
+}
+
+/**
+ * @param {GraphQLResponseData} data
+ * @param {*} gscan
+ * @param {*}options
+ * @returns {Result}
+ */
+export default function (data, gscan, options) {
+  const deltas = data.deltas
+  try {
+    return handleDeltas(deltas, gscan, options)
+  } catch (error) {
+    return {
+      errors: [
+        [
+          'Unexpected error applying gscan deltas',
+          error,
+          deltas,
+          gscan,
+          options
+        ]
+      ]
+    }
   }
 }
diff --git a/src/components/cylc/gscan/index.js b/src/components/cylc/gscan/index.js
new file mode 100644
index 000000000..83060d8c4
--- /dev/null
+++ b/src/components/cylc/gscan/index.js
@@ -0,0 +1,24 @@
+/**
+ * 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/>.
+ */
+
+function addWorkflow (workflow, gscan, options) {
+
+}
+
+export {
+  addWorkflow
+}
diff --git a/src/components/cylc/tree/deltas.js b/src/components/cylc/tree/deltas.js
index 0724aa748..54be0a750 100644
--- a/src/components/cylc/tree/deltas.js
+++ b/src/components/cylc/tree/deltas.js
@@ -210,6 +210,7 @@ function handleDeltas (deltas, workflow, lookup, options) {
  * @param {Workflow} workflow
  * @param {Lookup} lookup
  * @param {*} options
+ * @return {Result}
  */
 export default function (data, workflow, lookup, options) {
   const deltas = data.deltas
@@ -251,11 +252,12 @@ export default function (data, workflow, lookup, options) {
     return {
       errors: [
         [
-          'Unexpected error applying deltas',
+          'Unexpected error applying tree deltas',
           error,
           deltas,
           workflow,
-          lookup
+          lookup,
+          options
         ]
       ]
     }
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index 2f192e2d3..d52b58dfb 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -16,7 +16,8 @@
  */
 import Vue from 'vue'
 import Alert from '@/model/Alert.model'
-import applyDeltasWorkflows from '@/components/cylc/gscan/deltas'
+import applyDeltasLookup from '@/components/cylc/common/deltas'
+import applyDeltasGscan from '@/components/cylc/gscan/deltas'
 
 const state = {
   /**
@@ -78,14 +79,13 @@ const actions = {
   applyWorkflowsDeltas ({ commit, state }, data) {
     // modifying state directly in an action results in warnings...
     const workflows = Object.assign({}, state.workflows)
-    applyDeltasWorkflows(data, workflows)
+    applyDeltasLookup(data, workflows)
     commit('SET_WORKFLOWS', workflows)
   },
   clearWorkflows ({ commit }) {
     commit('SET_WORKFLOWS', [])
   },
   applyGScanDeltas ({ commit, state }, data) {
-    // TODO
     const gscan = state.gscan
     const options = {
       hierarchical: true

From bb99812b23277ffeccb92590b7ca3bbb8754ecd3 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Tue, 24 Aug 2021 10:23:00 +1200
Subject: [PATCH 05/16] Fix message (was added, is actually for updated)

---
 src/components/cylc/tree/deltas.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cylc/tree/deltas.js b/src/components/cylc/tree/deltas.js
index 54be0a750..f8787bb04 100644
--- a/src/components/cylc/tree/deltas.js
+++ b/src/components/cylc/tree/deltas.js
@@ -114,7 +114,7 @@ function applyDeltasUpdated (updated, workflow, lookup, options) {
           }
         } catch (error) {
           result.errors.push([
-            'Error applying added-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
+            'Error applying updated-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
             error,
             updatedData,
             workflow,

From 1e2354a04000acf7b9ccde28634d15d6172f71a8 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Tue, 24 Aug 2021 10:23:31 +1200
Subject: [PATCH 06/16] Add a lookup to gscan structure (to access workflow
 when update/pruning it)

---
 src/store/workflows.module.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index d52b58dfb..b03a26dc8 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -27,8 +27,13 @@ const state = {
    * @type {Object.<string, WorkflowGraphQLData>}
    */
   workflows: {},
+  /**
+   * This is the data structure used by GScan component. The tree holds the hierarchical GScan,
+   * and the lookup is a helper structure for quick access to nodes in the tree.
+   */
   gscan: {
-    tree: {}
+    tree: {},
+    lookup: {}
   },
   /**
    * This holds the name of the current workflow. This is set by VueRouter
@@ -60,11 +65,14 @@ const mutations = {
     state.gscan = data
   },
   CLEAR_GSCAN (state) {
-    Object.keys(state.gscan.tree).forEach(key => {
-      Vue.delete(state.gscan.tree, key)
-    })
+    for (const property of ['tree', 'lookup']) {
+      Object.keys(state.gscan[property]).forEach(key => {
+        Vue.delete(state.gscan[property], key)
+      })
+    }
     state.gscan = {
-      tree: {}
+      tree: {},
+      lookup: {}
     }
   },
   SET_WORKFLOW_NAME (state, data) {

From 68f48f14187f7269353c1e054b03688d4d92d923 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Tue, 24 Aug 2021 10:34:01 +1200
Subject: [PATCH 07/16] Base work for handling deltas in GScan

---
 src/components/cylc/gscan/deltas.js | 80 +++++++++++++++++++++++++++--
 src/components/cylc/gscan/index.js  | 39 +++++++++++++-
 src/components/cylc/gscan/nodes.js  | 12 ++---
 3 files changed, 119 insertions(+), 12 deletions(-)

diff --git a/src/components/cylc/gscan/deltas.js b/src/components/cylc/gscan/deltas.js
index 109e498a6..0c0cd5d9f 100644
--- a/src/components/cylc/gscan/deltas.js
+++ b/src/components/cylc/gscan/deltas.js
@@ -14,9 +14,17 @@
  * 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 { addWorkflow, updateWorkflow, removeWorkflow } from '@/components/cylc/gscan/index'
 import { createWorkflowNode } from '@/components/cylc/gscan/nodes'
-import { addWorkflow } from '@/components/cylc/gscan/index'
 
+/**
+ * Deltas added.
+ *
+ * @param {DeltasAdded} added
+ * @param {GScan} gscan
+ * @param {*} options
+ * @returns {Result}
+ */
 function applyDeltasAdded (added, gscan, options) {
   const result = {
     errors: []
@@ -39,17 +47,73 @@ function applyDeltasAdded (added, gscan, options) {
   return result
 }
 
-function applyDeltasUpdated () {
+/**
+ * Deltas updated.
+ *
+ * @param {DeltasUpdated} updated
+ * @param {GScan} gscan
+ * @param {*} options
+ * @returns {Result}
+ */
+function applyDeltasUpdated (updated, gscan, options) {
   const result = {
     errors: []
   }
+  if (updated.workflow) {
+    const updatedData = updated.workflow
+    const hierarchical = options.hierarchical || true
+    try {
+      const existingData = gscan.lookup[updatedData.id]
+      if (!existingData) {
+        result.errors.push([
+          `Updated node [${updatedData.id}] not found in workflow lookup`,
+          updatedData,
+          gscan,
+          options
+        ])
+      } else {
+        const workflowNode = createWorkflowNode(updatedData, hierarchical)
+        updateWorkflow(workflowNode, gscan, options)
+      }
+    } catch (error) {
+      result.errors.push([
+        'Error applying updated-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
+        error,
+        updatedData,
+        gscan,
+        options
+      ])
+    }
+  }
   return result
 }
 
-function applyDeltasPruned () {
+/**
+ * Deltas pruned.
+ *
+ * @param {DeltasPruned} pruned
+ * @param {GScan} gscan
+ * @param {*} options
+ * @returns {Result}
+ */
+function applyDeltasPruned (pruned, gscan, options) {
   const result = {
     errors: []
   }
+  if (pruned.workflow) {
+    const workflowId = pruned.workflow
+    try {
+      removeWorkflow(workflowId, gscan, options)
+    } catch (error) {
+      result.errors.push([
+        'Error applying pruned-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
+        error,
+        workflowId,
+        gscan,
+        options
+      ])
+    }
+  }
   return result
 }
 
@@ -60,8 +124,14 @@ const DELTAS = {
 }
 
 /**
+ * Handle the deltas. This function receives the new set of deltas, and the GScan object.
+ *
+ * The GScan object contains a tree property that holds the hierarchical (or not) GScan,
+ * and a lookup helper dictionary used for ease of access to leaf or intermediary tree
+ * nodes.
+ *
  * @param {Deltas} deltas
- * @param {*} gscan
+ * @param {GScan} gscan
  * @param {*} options
  * @returns {Result}
  */
@@ -82,7 +152,7 @@ function handleDeltas (deltas, gscan, options) {
 /**
  * @param {GraphQLResponseData} data
  * @param {*} gscan
- * @param {*}options
+ * @param {*} options
  * @returns {Result}
  */
 export default function (data, gscan, options) {
diff --git a/src/components/cylc/gscan/index.js b/src/components/cylc/gscan/index.js
index 83060d8c4..8f6c56ef9 100644
--- a/src/components/cylc/gscan/index.js
+++ b/src/components/cylc/gscan/index.js
@@ -15,10 +15,47 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/**
+ * @typedef {Object} GScan
+ */
+
+/**
+ * @typedef {Object<String, TreeNode>} Lookup
+ */
+
+/**
+ * @typedef {Object<String, TreeNode>} Tree
+ */
+
+/**
+ * @param {WorkflowGraphQLData} workflow
+ * @param {GScan} gscan
+ * @param {*} options
+ */
 function addWorkflow (workflow, gscan, options) {
 
 }
 
+/**
+ * @param {WorkflowGraphQLData} workflow
+ * @param {GScan} gscan
+ * @param {*} options
+ */
+function updateWorkflow (workflow, gscan, options) {
+
+}
+
+/**
+ * @param {WorkflowGraphQLData} workflow
+ * @param {GScan} gscan
+ * @param {*} options
+ */
+function removeWorkflow (workflow, gscan, options) {
+
+}
+
 export {
-  addWorkflow
+  addWorkflow,
+  updateWorkflow,
+  removeWorkflow
 }
diff --git a/src/components/cylc/gscan/nodes.js b/src/components/cylc/gscan/nodes.js
index 524257d42..5af91990a 100644
--- a/src/components/cylc/gscan/nodes.js
+++ b/src/components/cylc/gscan/nodes.js
@@ -19,7 +19,7 @@ import { sortedIndexBy } from '@/components/cylc/common/sort'
 import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/sort'
 
 /**
- * @typedef {Object} WorkflowGScanNode
+ * @typedef {Object} TreeNode
  * @property {String} id
  * @property {String} name
  * @property {String} type
@@ -27,11 +27,11 @@ import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/
  */
 
 /**
- * @typedef {Object} WorkflowNamePartGScanNode
- * @property {String} id
- * @property {String} name
- * @property {String} type
- * @property {WorkflowGraphQLData} node
+ * @typedef {TreeNode} WorkflowGScanNode
+ */
+
+/**
+ * @typedef {TreeNode} WorkflowNamePartGScanNode
  * @property {Array<WorkflowNamePartGScanNode>} children
  */
 

From 8fef2c212e4813463bce4c99c3d1c960cd0d0d83 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Tue, 24 Aug 2021 15:40:52 +1200
Subject: [PATCH 08/16] Handle adding nodes

---
 src/components/cylc/gscan/GScan.vue   |  9 ++--
 src/components/cylc/gscan/deltas.js   | 11 ++---
 src/components/cylc/gscan/index.js    | 65 ++++++++++++++++++++++++---
 src/components/cylc/gscan/nodes.js    |  2 +-
 src/components/cylc/tree/TreeItem.vue |  4 ++
 src/components/cylc/tree/nodes.js     |  4 +-
 src/store/workflows.module.js         |  4 +-
 7 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
index d28486555..118d0abab 100644
--- a/src/components/cylc/gscan/GScan.vue
+++ b/src/components/cylc/gscan/GScan.vue
@@ -312,7 +312,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('workflows', ['workflows', 'gscan']),
+    ...mapState('workflows', ['gscan']),
     // workflowNodes () {
     //   // NOTE: In case we decide to allow the user to switch between hierarchical and flat
     //   //       gscan view, then all we need to do is just pass a boolean data-property to
@@ -350,7 +350,7 @@ export default {
       deep: true,
       immediate: false,
       handler: function (newVal) {
-        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree.children || [], this.searchWorkflows, this.workflowStates, this.taskStates)
+        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree, this.searchWorkflows, this.workflowStates, this.taskStates)
       }
     },
     /**
@@ -360,13 +360,14 @@ export default {
     searchWorkflows: {
       immediate: false,
       handler: function (newVal) {
-        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree.children || [], newVal, this.workflowStates, this.taskStates)
+        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree, newVal, this.workflowStates, this.taskStates)
       }
     },
     gscan: {
       immediate: true,
+      deep: true,
       handler: function () {
-        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree.children || [], this.searchWorkflows, this.workflowStates, this.taskStates)
+        this.filteredWorkflows = this.filterHierarchically(this.gscan.tree, this.searchWorkflows, this.workflowStates, this.taskStates)
       }
     }
   },
diff --git a/src/components/cylc/gscan/deltas.js b/src/components/cylc/gscan/deltas.js
index 0c0cd5d9f..37a15eebf 100644
--- a/src/components/cylc/gscan/deltas.js
+++ b/src/components/cylc/gscan/deltas.js
@@ -21,7 +21,7 @@ import { createWorkflowNode } from '@/components/cylc/gscan/nodes'
  * Deltas added.
  *
  * @param {DeltasAdded} added
- * @param {GScan} gscan
+ * @param {import('./index').GScan} gscan
  * @param {*} options
  * @returns {Result}
  */
@@ -51,7 +51,7 @@ function applyDeltasAdded (added, gscan, options) {
  * Deltas updated.
  *
  * @param {DeltasUpdated} updated
- * @param {GScan} gscan
+ * @param {import('./index').GScan} gscan
  * @param {*} options
  * @returns {Result}
  */
@@ -61,7 +61,6 @@ function applyDeltasUpdated (updated, gscan, options) {
   }
   if (updated.workflow) {
     const updatedData = updated.workflow
-    const hierarchical = options.hierarchical || true
     try {
       const existingData = gscan.lookup[updatedData.id]
       if (!existingData) {
@@ -72,7 +71,8 @@ function applyDeltasUpdated (updated, gscan, options) {
           options
         ])
       } else {
-        const workflowNode = createWorkflowNode(updatedData, hierarchical)
+        // TODO: hierarchy is always false here?
+        const workflowNode = createWorkflowNode(updatedData, false)
         updateWorkflow(workflowNode, gscan, options)
       }
     } catch (error) {
@@ -92,7 +92,7 @@ function applyDeltasUpdated (updated, gscan, options) {
  * Deltas pruned.
  *
  * @param {DeltasPruned} pruned
- * @param {GScan} gscan
+ * @param {import('./index').GScan} gscan
  * @param {*} options
  * @returns {Result}
  */
@@ -100,6 +100,7 @@ function applyDeltasPruned (pruned, gscan, options) {
   const result = {
     errors: []
   }
+  // TODO: why not pruned.workflows???
   if (pruned.workflow) {
     const workflowId = pruned.workflow
     try {
diff --git a/src/components/cylc/gscan/index.js b/src/components/cylc/gscan/index.js
index 8f6c56ef9..a01be6f09 100644
--- a/src/components/cylc/gscan/index.js
+++ b/src/components/cylc/gscan/index.js
@@ -17,27 +17,80 @@
 
 /**
  * @typedef {Object} GScan
+ * @property {Array<TreeNode>} tree
+ * @property {Lookup} lookup
  */
 
 /**
  * @typedef {Object<String, TreeNode>} Lookup
  */
 
-/**
- * @typedef {Object<String, TreeNode>} Tree
- */
+import { sortedIndexBy } from '@/components/cylc/common/sort'
+import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/sort'
 
 /**
- * @param {WorkflowGraphQLData} workflow
+ * @param {TreeNode} workflow
  * @param {GScan} gscan
  * @param {*} options
  */
 function addWorkflow (workflow, gscan, options) {
+  const hierarchical = options.hierarchical || true
+  if (hierarchical) {
+    addHierarchicalWorkflow(workflow, gscan.lookup, gscan.tree, options)
+  } else {
+    gscan.lookup[workflow.id] = workflow
+    gscan.tree.push(workflow)
+  }
+}
 
+/**
+ * @param workflow
+ * @param {Lookup} lookup
+ * @param {Array<TreeNode>} tree
+ * @param {*} options
+ */
+function addHierarchicalWorkflow (workflow, lookup, tree, options) {
+  if (!lookup[workflow.id]) {
+    // a new node, let's add this node and its descendants to the lookup
+    lookup[workflow.id] = workflow
+    if (workflow.children) {
+      const stack = [...workflow.children]
+      while (stack.length) {
+        const currentNode = stack.shift()
+        lookup[currentNode.id] = currentNode
+        if (currentNode.children) {
+          stack.push(...currentNode.children)
+        }
+      }
+    }
+    // and now add the top-level node to the tree
+    // Here we calculate what is the index for this element. If we decide to have ASC and DESC,
+    // then we just need to invert the location of the element, something like
+    // `sortedIndex = (array.length - sortedIndex)`.
+    const sortedIndex = sortedIndexBy(
+      tree,
+      workflow,
+      (n) => n.name,
+      sortWorkflowNamePartNodeOrWorkflowNode
+    )
+    tree.splice(sortedIndex, 0, workflow)
+  } else {
+    // we will have to merge the hierarchies
+    const existingNode = lookup[workflow.id]
+    // TODO: combine states summaries?
+    // Copy array since we will iterate it, and modify existingNode.children
+    if (existingNode.children) {
+      const children = [...workflow.children]
+      for (const child of children) {
+        // Recursion
+        addHierarchicalWorkflow(child, lookup, existingNode.children, options)
+      }
+    }
+  }
 }
 
 /**
- * @param {WorkflowGraphQLData} workflow
+ * @param {TreeNode} workflow
  * @param {GScan} gscan
  * @param {*} options
  */
@@ -46,7 +99,7 @@ function updateWorkflow (workflow, gscan, options) {
 }
 
 /**
- * @param {WorkflowGraphQLData} workflow
+ * @param {TreeNode} workflow
  * @param {GScan} gscan
  * @param {*} options
  */
diff --git a/src/components/cylc/gscan/nodes.js b/src/components/cylc/gscan/nodes.js
index 5af91990a..d0373ee9f 100644
--- a/src/components/cylc/gscan/nodes.js
+++ b/src/components/cylc/gscan/nodes.js
@@ -85,7 +85,7 @@ function newWorkflowPartNode (id, part) {
  *
  * @param {WorkflowGraphQLData} workflow
  * @param {boolean} hierarchy - whether to parse the Workflow name and create a hierarchy or not
- * @returns {WorkflowGScanNode|WorkflowNamePartGScanNode|null}
+ * @returns {TreeNode}
  */
 function createWorkflowNode (workflow, hierarchy) {
   if (!hierarchy) {
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index df49fd1c3..645fd67c3 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -284,8 +284,12 @@ export default {
     }
   },
   created () {
+    // console.log(`TreeItem ${this.node.id} created!`)
     this.$emit('tree-item-created', this)
   },
+  updated () {
+    // console.log(`TreeItem ${this.node.id} updated!`)
+  },
   beforeDestroy () {
     this.$emit('tree-item-destroyed', this)
   },
diff --git a/src/components/cylc/tree/nodes.js b/src/components/cylc/tree/nodes.js
index e52ea692e..063b30e0c 100644
--- a/src/components/cylc/tree/nodes.js
+++ b/src/components/cylc/tree/nodes.js
@@ -38,7 +38,7 @@ import Vue from 'vue'
  * Create a workflow node. Uses the same properties (by reference) as the given workflow,
  * only adding new properties such as type, children, etc.
  *
- * @param workflow {WorkflowGraphQLData} workflow
+ * @param {WorkflowGraphQLData} workflow workflow
  * @return {WorkflowNode}
  */
 function createWorkflowNode (workflow) {
@@ -70,7 +70,7 @@ function createWorkflowNode (workflow) {
  * - 'a|b'        results in a cycle point node ID 'a|b'
  * - ''           results in a cycle point node ID ''
  *
- * @param node {GraphQLData} a tree node
+ * @param {GraphQLData} node a tree node
  * @throws {Error} - if there was an error extracting the cycle point ID
  * @return {string} - the cycle point ID
  */
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index b03a26dc8..837be3af7 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -32,7 +32,7 @@ const state = {
    * and the lookup is a helper structure for quick access to nodes in the tree.
    */
   gscan: {
-    tree: {},
+    tree: [],
     lookup: {}
   },
   /**
@@ -71,7 +71,7 @@ const mutations = {
       })
     }
     state.gscan = {
-      tree: {},
+      tree: [],
       lookup: {}
     }
   },

From bcf743bb104ed3e590b38568a32ae3fd92615494 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Tue, 24 Aug 2021 21:37:46 +1200
Subject: [PATCH 09/16] A few performance improvements for TreeItem

---
 src/components/cylc/tree/TreeItem.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index 645fd67c3..60a0c423b 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -194,7 +194,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <!-- component recursion -->
       <TreeItem
         v-for="child in node.children"
-        ref="treeitem"
         :key="child.id"
         :node="child"
         :depth="depth + 1"
@@ -205,6 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         v-on:tree-item-expanded="$listeners['tree-item-expanded']"
         v-on:tree-item-collapsed="$listeners['tree-item-collapsed']"
         v-on:tree-item-clicked="$listeners['tree-item-clicked']"
+
       >
         <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope"/></template>
       </TreeItem>
@@ -249,7 +249,7 @@ export default {
       active: false,
       selected: false,
       isExpanded: this.initialExpanded,
-      leafProperties: [
+      leafProperties: Object.freeze([
         {
           title: 'platform',
           property: 'platform'
@@ -274,7 +274,7 @@ export default {
           title: 'finish time',
           property: 'finishedTime'
         }
-      ],
+      ]),
       filtered: true
     }
   },
@@ -284,12 +284,8 @@ export default {
     }
   },
   created () {
-    // console.log(`TreeItem ${this.node.id} created!`)
     this.$emit('tree-item-created', this)
   },
-  updated () {
-    // console.log(`TreeItem ${this.node.id} updated!`)
-  },
   beforeDestroy () {
     this.$emit('tree-item-destroyed', this)
   },

From 2470e7709e3c495387c16fac307f17a749a0905b Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Tue, 24 Aug 2021 22:08:53 +1200
Subject: [PATCH 10/16] Avoid undefined error in Tree component

---
 src/components/cylc/tree/Tree.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/cylc/tree/Tree.vue b/src/components/cylc/tree/Tree.vue
index dedc28157..ceb3250bc 100644
--- a/src/components/cylc/tree/Tree.vue
+++ b/src/components/cylc/tree/Tree.vue
@@ -218,6 +218,9 @@ export default {
       })
     },
     tasksFilterStates: function () {
+      if (!this.activeFilters) {
+        return []
+      }
       return this.activeFilters.states.map(selectedTaskState => {
         return selectedTaskState
       })

From 263ff2e129b742715fa72926c05c7ef133c25aa4 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Wed, 8 Sep 2021 17:02:01 +1200
Subject: [PATCH 11/16] Create WorkflowStateSummary component

---
 src/components/cylc/gscan/GScan.vue           |  80 ++-----------
 .../cylc/gscan/WorkflowStateSummary.vue       | 110 ++++++++++++++++++
 2 files changed, 117 insertions(+), 73 deletions(-)
 create mode 100644 src/components/cylc/gscan/WorkflowStateSummary.vue

diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
index 118d0abab..aa71b3c5a 100644
--- a/src/components/cylc/gscan/GScan.vue
+++ b/src/components/cylc/gscan/GScan.vue
@@ -142,42 +142,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </v-flex>
                   <!-- We check the latestStateTasks below as offline workflows won't have a latestStateTasks property -->
                   <v-flex
-                    v-if="scope.node.type === 'workflow' && scope.node.node.latestStateTasks"
+                    v-if="scope.node.node.latestStateTasks"
                     class="text-right c-gscan-workflow-states"
                   >
-                    <!-- task summary tooltips -->
-                    <span
-                      v-for="[state, tasks] in getLatestStateTasks(Object.entries(scope.node.node.latestStateTasks))"
-                      :key="`${scope.node.id}-summary-${state}`"
-                      :class="getTaskStateClasses(scope.node.node, state)"
-                    >
-                    <v-tooltip color="black" top>
-                      <template v-slot:activator="{ on }">
-                        <!-- a v-tooltip does not work directly set on Cylc job component, so we use a dummy button to wrap it -->
-                        <!-- NB: most of the classes/directives in these button are applied so that the user does not notice it is a button -->
-                        <v-btn
-                          v-on="on"
-                          class="ma-0 pa-0"
-                          min-width="0"
-                          min-height="0"
-                          style="font-size: 120%; width: auto"
-                          :ripple="false"
-                          dark
-                          icon
-                        >
-                          <job :status="state" />
-                        </v-btn>
-                      </template>
-                      <!-- tooltip text -->
-                      <span>
-                        <span class="grey--text">{{ countTasksInState(scope.node.node, state) }} {{ state }}. Recent {{ state }} tasks:</span>
-                        <br/>
-                        <span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
-                          {{ task }}<br v-if="index !== tasks.length -1" />
-                        </span>
-                      </span>
-                    </v-tooltip>
-                  </span>
+                    <WorkflowStateSummary
+                      :node="scope.node"
+                    />
                   </v-flex>
                 </v-layout>
               </v-list-item-title>
@@ -203,9 +173,9 @@ import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import TaskState from '@/model/TaskState.model'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
-import Job from '@/components/cylc/Job'
 import Tree from '@/components/cylc/tree/Tree'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon'
+import WorkflowStateSummary from '@/components/cylc/gscan/WorkflowStateSummary'
 // import { addNodeToTree, createWorkflowNode } from '@/components/cylc/gscan/nodes'
 import { filterHierarchically } from '@/components/cylc/gscan/filters'
 import { GSCAN_DELTAS_SUBSCRIPTION } from '@/graphql/queries'
@@ -213,9 +183,9 @@ import { GSCAN_DELTAS_SUBSCRIPTION } from '@/graphql/queries'
 export default {
   name: 'GScan',
   components: {
-    Job,
     Tree,
-    WorkflowIcon
+    WorkflowIcon,
+    WorkflowStateSummary
   },
   mixins: [
     subscriptionComponentMixin
@@ -415,42 +385,6 @@ export default {
         return `/workflows/${ node.node.name }`
       }
       return ''
-    },
-
-    /**
-     * Get number of tasks we have in a given state. The states are retrieved
-     * from `latestStateTasks`, and the number of tasks in each state is from
-     * the `stateTotals`. (`latestStateTasks` includes old tasks).
-     *
-     * @param {WorkflowGraphQLData} workflow - the workflow object retrieved from GraphQL
-     * @param {string} state - a workflow state
-     * @returns {number|*} - the number of tasks in the given state
-     */
-    countTasksInState (workflow, state) {
-      if (Object.hasOwnProperty.call(workflow.stateTotals, state)) {
-        return workflow.stateTotals[state]
-      }
-      return 0
-    },
-
-    getTaskStateClasses (workflow, state) {
-      const tasksInState = this.countTasksInState(workflow, state)
-      return tasksInState === 0 ? ['empty-state'] : []
-    },
-
-    // TODO: temporary filter, remove after b0 - https://github.com/cylc/cylc-ui/pull/617#issuecomment-805343847
-    getLatestStateTasks (latestStateTasks) {
-      // Values found in: https://github.com/cylc/cylc-flow/blob/9c542f9f3082d3c3d9839cf4330c41cfb2738ba1/cylc/flow/data_store_mgr.py#L143-L149
-      const validValues = [
-        TaskState.SUBMITTED.name,
-        TaskState.SUBMIT_FAILED.name,
-        TaskState.RUNNING.name,
-        TaskState.SUCCEEDED.name,
-        TaskState.FAILED.name
-      ]
-      return latestStateTasks.filter(entry => {
-        return validValues.includes(entry[0])
-      })
     }
   }
 }
diff --git a/src/components/cylc/gscan/WorkflowStateSummary.vue b/src/components/cylc/gscan/WorkflowStateSummary.vue
new file mode 100644
index 000000000..3416004c7
--- /dev/null
+++ b/src/components/cylc/gscan/WorkflowStateSummary.vue
@@ -0,0 +1,110 @@
+<!--
+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>
+  <!-- task summary tooltips -->
+  <span>
+    <span
+      v-for="[state, tasks] in getLatestStateTasks(Object.entries(node.node.latestStateTasks))"
+      :key="`${node.id}-summary-${state}`"
+      :class="getTaskStateClasses(node.node.stateTotals, state)"
+    >
+      <v-tooltip color="black" top>
+        <template v-slot:activator="{ on }">
+          <!-- a v-tooltip does not work directly set on Cylc job component, so we use a dummy button to wrap it -->
+          <!-- NB: most of the classes/directives in these button are applied so that the user does not notice it is a button -->
+          <v-btn
+            v-on="on"
+            class="ma-0 pa-0"
+            min-width="0"
+            min-height="0"
+            style="font-size: 120%; width: auto"
+            :ripple="false"
+            dark
+            icon
+          >
+            <job :status="state" />
+          </v-btn>
+        </template>
+        <!-- tooltip text -->
+        <span>
+          <span class="grey--text">{{ countTasksInState(node.node, state) }} {{ state }}. Recent {{ state }} tasks:</span>
+          <br/>
+          <span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
+            {{ task }}<br v-if="index !== tasks.length -1" />
+          </span>
+        </span>
+      </v-tooltip>
+    </span>
+  </span>
+</template>
+
+<script>
+import Job from '@/components/cylc/Job'
+import TaskState from '@/model/TaskState.model'
+export default {
+  name: 'WorkflowStateSummary',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    maximumTasksDisplayed: {
+      type: Number,
+      default: 5
+    }
+  },
+  components: {
+    Job
+  },
+  methods: {
+    /**
+     * Get number of tasks we have in a given state. The states are retrieved
+     * from `latestStateTasks`, and the number of tasks in each state is from
+     * the `stateTotals`. (`latestStateTasks` includes old tasks).
+     *
+     * @param {Object} stateTotals - the workflow object retrieved from GraphQL
+     * @param {string} state - a workflow state
+     * @returns {number|*} - the number of tasks in the given state
+     */
+    countTasksInState (stateTotals, state) {
+      if (Object.hasOwnProperty.call(stateTotals, state)) {
+        return stateTotals[state]
+      }
+      return 0
+    },
+    getTaskStateClasses (stateTotals, state) {
+      const tasksInState = this.countTasksInState(stateTotals, state)
+      return tasksInState === 0 ? ['empty-state'] : []
+    },
+    // TODO: temporary filter, remove after b0 - https://github.com/cylc/cylc-ui/pull/617#issuecomment-805343847
+    getLatestStateTasks (latestStateTasks) {
+      // Values found in: https://github.com/cylc/cylc-flow/blob/9c542f9f3082d3c3d9839cf4330c41cfb2738ba1/cylc/flow/data_store_mgr.py#L143-L149
+      const validValues = [
+        TaskState.SUBMITTED.name,
+        TaskState.SUBMIT_FAILED.name,
+        TaskState.RUNNING.name,
+        TaskState.SUCCEEDED.name,
+        TaskState.FAILED.name
+      ]
+      return latestStateTasks.filter(entry => {
+        return validValues.includes(entry[0])
+      })
+    }
+  }
+}
+</script>

From 9d931a9948a4ecd297c12b6b49010277cad76d41 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Thu, 9 Sep 2021 09:39:12 +1200
Subject: [PATCH 12/16] Simplify the WorkflowStateSummary component, replace
 methods by computed, use more props

---
 src/components/cylc/gscan/GScan.vue           |  4 +-
 .../cylc/gscan/WorkflowStateSummary.vue       | 83 ++++++++++++-------
 2 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
index aa71b3c5a..463e06b2b 100644
--- a/src/components/cylc/gscan/GScan.vue
+++ b/src/components/cylc/gscan/GScan.vue
@@ -146,7 +146,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     class="text-right c-gscan-workflow-states"
                   >
                     <WorkflowStateSummary
-                      :node="scope.node"
+                      :node-id="scope.node.id"
+                      :latest-state-tasks="scope.node.node.latestStateTasks"
+                      :state-totals="scope.node.node.stateTotals"
                     />
                   </v-flex>
                 </v-layout>
diff --git a/src/components/cylc/gscan/WorkflowStateSummary.vue b/src/components/cylc/gscan/WorkflowStateSummary.vue
index 3416004c7..4d641d674 100644
--- a/src/components/cylc/gscan/WorkflowStateSummary.vue
+++ b/src/components/cylc/gscan/WorkflowStateSummary.vue
@@ -19,9 +19,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <!-- task summary tooltips -->
   <span>
     <span
-      v-for="[state, tasks] in getLatestStateTasks(Object.entries(node.node.latestStateTasks))"
-      :key="`${node.id}-summary-${state}`"
-      :class="getTaskStateClasses(node.node.stateTotals, state)"
+      v-for="[state, tasks] in validLatestStateTasks"
+      :key="`${nodeId}-summary-${state}`"
+      :class="getTaskStateClasses(state)"
     >
       <v-tooltip color="black" top>
         <template v-slot:activator="{ on }">
@@ -42,7 +42,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </template>
         <!-- tooltip text -->
         <span>
-          <span class="grey--text">{{ countTasksInState(node.node, state) }} {{ state }}. Recent {{ state }} tasks:</span>
+          <span class="grey--text">{{ countTasksInState(state) }} {{ state }}. Recent {{ state }} tasks:</span>
           <br/>
           <span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
             {{ task }}<br v-if="index !== tasks.length -1" />
@@ -56,10 +56,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import Job from '@/components/cylc/Job'
 import TaskState from '@/model/TaskState.model'
+
+/**
+ * Valid states for a latestStateTasks. See computed variable validLatestStateTasks.
+ */
+const VALID_STATES = Object.freeze([
+  TaskState.SUBMITTED.name,
+  TaskState.SUBMIT_FAILED.name,
+  TaskState.RUNNING.name,
+  TaskState.SUCCEEDED.name,
+  TaskState.FAILED.name
+])
+
 export default {
   name: 'WorkflowStateSummary',
   props: {
-    node: {
+    nodeId: {
+      type: String,
+      required: true
+    },
+    /**
+     * @type {Object}
+     */
+    latestStateTasks: {
+      type: Object,
+      required: true
+    },
+    stateTotals: {
       type: Object,
       required: true
     },
@@ -71,39 +94,39 @@ export default {
   components: {
     Job
   },
+  computed: {
+    // TODO: temporary filter, remove after b0 - https://github.com/cylc/cylc-ui/pull/617#issuecomment-805343847
+    /**
+     * @return {Object}
+     */
+    validLatestStateTasks () {
+      // Values found in: https://github.com/cylc/cylc-flow/blob/9c542f9f3082d3c3d9839cf4330c41cfb2738ba1/cylc/flow/data_store_mgr.py#L143-L149
+      return Object.entries(this.latestStateTasks).filter(entry => {
+        return VALID_STATES.includes(entry[0])
+      })
+    }
+  },
   methods: {
     /**
      * Get number of tasks we have in a given state. The states are retrieved
      * from `latestStateTasks`, and the number of tasks in each state is from
      * the `stateTotals`. (`latestStateTasks` includes old tasks).
      *
-     * @param {Object} stateTotals - the workflow object retrieved from GraphQL
-     * @param {string} state - a workflow state
-     * @returns {number|*} - the number of tasks in the given state
+     * @param {String} state - a workflow state
+     * @returns {Number} - the number of tasks in the given state
      */
-    countTasksInState (stateTotals, state) {
-      if (Object.hasOwnProperty.call(stateTotals, state)) {
-        return stateTotals[state]
-      }
-      return 0
-    },
-    getTaskStateClasses (stateTotals, state) {
-      const tasksInState = this.countTasksInState(stateTotals, state)
-      return tasksInState === 0 ? ['empty-state'] : []
+    countTasksInState (state) {
+      return this.stateTotals[state] || 0
     },
-    // TODO: temporary filter, remove after b0 - https://github.com/cylc/cylc-ui/pull/617#issuecomment-805343847
-    getLatestStateTasks (latestStateTasks) {
-      // Values found in: https://github.com/cylc/cylc-flow/blob/9c542f9f3082d3c3d9839cf4330c41cfb2738ba1/cylc/flow/data_store_mgr.py#L143-L149
-      const validValues = [
-        TaskState.SUBMITTED.name,
-        TaskState.SUBMIT_FAILED.name,
-        TaskState.RUNNING.name,
-        TaskState.SUCCEEDED.name,
-        TaskState.FAILED.name
-      ]
-      return latestStateTasks.filter(entry => {
-        return validValues.includes(entry[0])
-      })
+    /**
+     * Defines the CSS class for a state. Useful for handling empty states, when
+     * we need to compensate for no children HTML elements.
+     *
+     * @param {String} state - a workflow state
+     * @return {Array<String>} - a list of CSS classes (can be empty).
+     */
+    getTaskStateClasses (state) {
+      return this.countTasksInState(state) === 0 ? ['empty-state'] : []
     }
   }
 }

From 524dc6b6d44463eddf561dd6e248c8aadd586f05 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Thu, 9 Sep 2021 15:08:58 +1200
Subject: [PATCH 13/16] Handle GScan updated delta

---
 src/components/cylc/gscan/deltas.js | 41 ++++++++++-------------------
 src/components/cylc/gscan/index.js  | 33 ++++++++++++++++++-----
 src/components/cylc/gscan/nodes.js  |  3 +--
 3 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/src/components/cylc/gscan/deltas.js b/src/components/cylc/gscan/deltas.js
index 37a15eebf..20fc3051a 100644
--- a/src/components/cylc/gscan/deltas.js
+++ b/src/components/cylc/gscan/deltas.js
@@ -14,8 +14,7 @@
  * 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 { addWorkflow, updateWorkflow, removeWorkflow } from '@/components/cylc/gscan/index'
-import { createWorkflowNode } from '@/components/cylc/gscan/nodes'
+import * as GScanTree from '@/components/cylc/gscan/index'
 
 /**
  * Deltas added.
@@ -30,10 +29,9 @@ function applyDeltasAdded (added, gscan, options) {
     errors: []
   }
   if (added.workflow) {
-    const hierarchical = options.hierarchical || true
-    const workflowNode = createWorkflowNode(added.workflow, hierarchical)
+    const workflow = added.workflow
     try {
-      addWorkflow(workflowNode, gscan, options)
+      GScanTree.addWorkflow(workflow, gscan, options)
     } catch (error) {
       result.errors.push([
         'Error applying added-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
@@ -60,26 +58,14 @@ function applyDeltasUpdated (updated, gscan, options) {
     errors: []
   }
   if (updated.workflow) {
-    const updatedData = updated.workflow
+    const workflow = updated.workflow
     try {
-      const existingData = gscan.lookup[updatedData.id]
-      if (!existingData) {
-        result.errors.push([
-          `Updated node [${updatedData.id}] not found in workflow lookup`,
-          updatedData,
-          gscan,
-          options
-        ])
-      } else {
-        // TODO: hierarchy is always false here?
-        const workflowNode = createWorkflowNode(updatedData, false)
-        updateWorkflow(workflowNode, gscan, options)
-      }
+      GScanTree.updateWorkflow(workflow, gscan, options)
     } catch (error) {
       result.errors.push([
         'Error applying updated-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
         error,
-        updatedData,
+        workflow,
         gscan,
         options
       ])
@@ -100,11 +86,12 @@ function applyDeltasPruned (pruned, gscan, options) {
   const result = {
     errors: []
   }
-  // TODO: why not pruned.workflows???
+  // TBD: why not workflows? We have that in the jsdoc for DeltasPruned, and I believe
+  //      that's how other queries return the data.
   if (pruned.workflow) {
     const workflowId = pruned.workflow
     try {
-      removeWorkflow(workflowId, gscan, options)
+      GScanTree.removeWorkflow(workflowId, gscan, options)
     } catch (error) {
       result.errors.push([
         'Error applying pruned-delta, see browser console logs for more. Please reload your browser tab to retrieve the full flow state',
@@ -137,17 +124,17 @@ const DELTAS = {
  * @returns {Result}
  */
 function handleDeltas (deltas, gscan, options) {
-  const errors = []
+  const results = {
+    errors: []
+  }
   Object.keys(DELTAS).forEach(key => {
     if (deltas[key]) {
       const handlingFunction = DELTAS[key]
       const result = handlingFunction(deltas[key], gscan, options)
-      errors.push(...result.errors)
+      results.errors.push(...result.errors)
     }
   })
-  return {
-    errors
-  }
+  return results
 }
 
 /**
diff --git a/src/components/cylc/gscan/index.js b/src/components/cylc/gscan/index.js
index a01be6f09..3c4202be3 100644
--- a/src/components/cylc/gscan/index.js
+++ b/src/components/cylc/gscan/index.js
@@ -14,6 +14,12 @@
  * 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 Vue from 'vue'
+import { mergeWith } from 'lodash'
+import { sortedIndexBy } from '@/components/cylc/common/sort'
+import { mergeWithCustomizer } from '@/components/cylc/common/merge'
+import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/sort'
+import { createWorkflowNode } from '@/components/cylc/gscan/nodes'
 
 /**
  * @typedef {Object} GScan
@@ -25,9 +31,6 @@
  * @typedef {Object<String, TreeNode>} Lookup
  */
 
-import { sortedIndexBy } from '@/components/cylc/common/sort'
-import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/sort'
-
 /**
  * @param {TreeNode} workflow
  * @param {GScan} gscan
@@ -36,7 +39,8 @@ import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/
 function addWorkflow (workflow, gscan, options) {
   const hierarchical = options.hierarchical || true
   if (hierarchical) {
-    addHierarchicalWorkflow(workflow, gscan.lookup, gscan.tree, options)
+    const workflowNode = createWorkflowNode(workflow, hierarchical)
+    addHierarchicalWorkflow(workflowNode, gscan.lookup, gscan.tree, options)
   } else {
     gscan.lookup[workflow.id] = workflow
     gscan.tree.push(workflow)
@@ -44,10 +48,15 @@ function addWorkflow (workflow, gscan, options) {
 }
 
 /**
+ * This function is private. It receives a lookup and tree instead of a GScan object (as in other
+ * functions of this module). This is required as we apply recursion for adding nodes into the tree,
+ * but we replace the tree and pass only a sub-tree.
+ *
  * @param workflow
  * @param {Lookup} lookup
  * @param {Array<TreeNode>} tree
  * @param {*} options
+ * @private
  */
 function addHierarchicalWorkflow (workflow, lookup, tree, options) {
   if (!lookup[workflow.id]) {
@@ -78,24 +87,34 @@ function addHierarchicalWorkflow (workflow, lookup, tree, options) {
     // we will have to merge the hierarchies
     const existingNode = lookup[workflow.id]
     // TODO: combine states summaries?
-    // Copy array since we will iterate it, and modify existingNode.children
     if (existingNode.children) {
+      // Copy array since we will iterate it, and modify existingNode.children
       const children = [...workflow.children]
       for (const child of children) {
         // Recursion
         addHierarchicalWorkflow(child, lookup, existingNode.children, options)
       }
+    } else {
+      // Here we have an existing workflow node. Let's merge it.
+      mergeWith(existingNode, workflow, mergeWithCustomizer)
     }
   }
 }
 
 /**
- * @param {TreeNode} workflow
+ * @param {WorkflowGraphQLData} workflow
  * @param {GScan} gscan
  * @param {*} options
  */
 function updateWorkflow (workflow, gscan, options) {
-
+  // We don't care whether it is hierarchical or not here, since we can quickly
+  // access the node via the GScan lookup.
+  const existingData = gscan.lookup[workflow.id]
+  if (!existingData) {
+    throw new Error(`Updated node [${workflow.id}] not found in workflow lookup`)
+  }
+  mergeWith(existingData.node, workflow, mergeWithCustomizer)
+  Vue.set(gscan.lookup, existingData.id, existingData)
 }
 
 /**
diff --git a/src/components/cylc/gscan/nodes.js b/src/components/cylc/gscan/nodes.js
index d0373ee9f..7909bbb83 100644
--- a/src/components/cylc/gscan/nodes.js
+++ b/src/components/cylc/gscan/nodes.js
@@ -25,7 +25,6 @@ import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/
  * @property {String} type
  * @property {WorkflowGraphQLData} node
  */
-
 /**
  * @typedef {TreeNode} WorkflowGScanNode
  */
@@ -85,7 +84,7 @@ function newWorkflowPartNode (id, part) {
  *
  * @param {WorkflowGraphQLData} workflow
  * @param {boolean} hierarchy - whether to parse the Workflow name and create a hierarchy or not
- * @returns {TreeNode}
+ * @returns {TreeNode|null}
  */
 function createWorkflowNode (workflow, hierarchy) {
   if (!hierarchy) {

From 18b29acf47253c015e04ec7b540e3b994ee120ad Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Fri, 10 Sep 2021 10:58:38 +1200
Subject: [PATCH 14/16] Add TODO for later

---
 src/components/cylc/tree/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/cylc/tree/index.js b/src/components/cylc/tree/index.js
index 0b726b77a..e1c934d8f 100644
--- a/src/components/cylc/tree/index.js
+++ b/src/components/cylc/tree/index.js
@@ -430,6 +430,7 @@ function removeJob (jobId, workflow, options) {
         parent.children.splice(parent.children.indexOf(job), 1)
       }
     }
+    // TODO: for later, I believe this has already been deleted above? In recursively...
     Vue.delete(workflow.lookup, jobId)
   }
 }

From a0d4f107229e2798d0def705d04476a507ea3510 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Fri, 10 Sep 2021 17:46:13 +1200
Subject: [PATCH 15/16] Update and delete GScan tree and lookup nodes

---
 src/components/cylc/gscan/index.js | 119 +++++++++++++++++-
 src/components/cylc/gscan/nodes.js | 195 +++++++++++++++++------------
 2 files changed, 230 insertions(+), 84 deletions(-)

diff --git a/src/components/cylc/gscan/index.js b/src/components/cylc/gscan/index.js
index 3c4202be3..429e97f59 100644
--- a/src/components/cylc/gscan/index.js
+++ b/src/components/cylc/gscan/index.js
@@ -19,7 +19,11 @@ import { mergeWith } from 'lodash'
 import { sortedIndexBy } from '@/components/cylc/common/sort'
 import { mergeWithCustomizer } from '@/components/cylc/common/merge'
 import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/sort'
-import { createWorkflowNode } from '@/components/cylc/gscan/nodes'
+import {
+  createWorkflowNode,
+  getWorkflowNamePartsNodesIds,
+  parseWorkflowNameParts
+} from '@/components/cylc/gscan/nodes'
 
 /**
  * @typedef {Object} GScan
@@ -31,7 +35,11 @@ import { createWorkflowNode } from '@/components/cylc/gscan/nodes'
  * @typedef {Object<String, TreeNode>} Lookup
  */
 
+// --- Added
+
 /**
+ * Add a new workflow to the GScan data structure.
+ *
  * @param {TreeNode} workflow
  * @param {GScan} gscan
  * @param {*} options
@@ -89,6 +97,7 @@ function addHierarchicalWorkflow (workflow, lookup, tree, options) {
     // TODO: combine states summaries?
     if (existingNode.children) {
       // Copy array since we will iterate it, and modify existingNode.children
+      // (see the tree.splice above.)
       const children = [...workflow.children]
       for (const child of children) {
         // Recursion
@@ -101,10 +110,14 @@ function addHierarchicalWorkflow (workflow, lookup, tree, options) {
   }
 }
 
+// --- Updated
+
 /**
+ * Update a workflow in the GScan data structure.
+ *
  * @param {WorkflowGraphQLData} workflow
  * @param {GScan} gscan
- * @param {*} options
+ * @param {Object} options
  */
 function updateWorkflow (workflow, gscan, options) {
   // We don't care whether it is hierarchical or not here, since we can quickly
@@ -114,16 +127,114 @@ function updateWorkflow (workflow, gscan, options) {
     throw new Error(`Updated node [${workflow.id}] not found in workflow lookup`)
   }
   mergeWith(existingData.node, workflow, mergeWithCustomizer)
+  const hierarchical = options.hierarchical || true
+  if (hierarchical) {
+    updateHierarchicalWorkflow(existingData, gscan.lookup, gscan.tree, options)
+  }
+  // TODO: create workflow hierarchy (from workflow object), then iterate
+  //       it and use lookup to fetch the existing node. Finally, combine
+  //       the gscan states (latestStateTasks & stateTotals).
   Vue.set(gscan.lookup, existingData.id, existingData)
 }
 
+function updateHierarchicalWorkflow (existingData, lookup, tree, options) {
+  // We need to sort its parent again.
+  const workflowNameParts = parseWorkflowNameParts(existingData.id)
+  const nodesIds = getWorkflowNamePartsNodesIds(workflowNameParts)
+  // Discard the last since it's the workflow ID that we already have
+  // in the `existingData` object. Now if not empty, we have our parent.
+  nodesIds.pop()
+  const parentId = nodesIds.length > 0 ? nodesIds.pop() : null
+  const parent = parentId ? lookup[parentId] : tree
+  if (!parent) {
+    throw new Error(`Invalid orphan hierarchical node: ${existingData.id}`)
+  }
+  const siblings = parent.children
+  // Where is this node at the moment?
+  const currentIndex = siblings.findIndex(node => node.id === existingData.id)
+  // Where should it be now?
+  const sortedIndex = sortedIndexBy(
+    parent.children,
+    existingData,
+    (n) => n.name,
+    sortWorkflowNamePartNodeOrWorkflowNode
+  )
+  // If it is not where it is, we need to add it to its correct location.
+  if (currentIndex !== sortedIndex) {
+    // siblings.splice(currentIndex, 1)
+    // siblings.splice(sortedIndex, 0, existingData)
+    Vue.delete(siblings, currentIndex)
+    Vue.set(siblings, sortedIndex, existingData)
+  }
+}
+
+// -- Pruned
+
 /**
- * @param {TreeNode} workflow
+ * Remove the workflow with ID equals to the given `workflowId` from the GScan data structure.
+ *
+ * @param {String} workflowId
  * @param {GScan} gscan
  * @param {*} options
  */
-function removeWorkflow (workflow, gscan, options) {
+function removeWorkflow (workflowId, gscan, options) {
+  const workflow = gscan.lookup[workflowId]
+  if (!workflow) {
+    throw new Error(`Pruned node [${workflow.id}] not found in workflow lookup`)
+  }
+  const hierarchical = options.hierarchical || true
+  if (hierarchical) {
+    removeHierarchicalWorkflow(workflowId, gscan.lookup, gscan.tree, options)
+  } else {
+    removeNode(workflowId, gscan.lookup, gscan.tree)
+  }
+}
+
+/**
+ * This function is private. It removes the workflow associated with the given `workflowId` from the
+ * lookup, and also proceeds to remove the leaf-node with the workflow node, and all of its parents that
+ * do not have any other descendants.
+ *
+ * @param {String} workflowId - Existing workflow ID
+ * @param {Lookup} lookup
+ * @param {Array<TreeNode>} tree
+ * @param {Object} options
+ * @private
+ */
+function removeHierarchicalWorkflow (workflowId, lookup, tree, options) {
+  const workflowNameParts = parseWorkflowNameParts(workflowId)
+  const nodesIds = getWorkflowNamePartsNodesIds(workflowNameParts)
+  // We start from the leaf-node, going upward to make sure we don't leave nodes with no children.
+  for (let i = nodesIds.length - 1; i >= 0; i--) {
+    const nodeId = nodesIds[i]
+    const node = lookup[nodeId]
+    if (node.children && node.children.length > 0) {
+      // We stop as soon as we find a node that still has children.
+      break
+    }
+    // Now we can remove the node from the lookup, and from its parents children array.
+    const previousIndex = i - 1
+    const parentId = previousIndex >= 0 ? nodesIds[previousIndex] : null
+    if (parentId && !lookup[parentId]) {
+      throw new Error(`Failed to locate parent ${parentId} in GScan lookup`)
+    }
+    const parentChildren = parentId ? lookup[parentId].children : tree
+    removeNode(nodeId, lookup, parentChildren)
+  }
+}
 
+/**
+ * @param {String} id - ID of the tree node
+ * @param {Array<TreeNode>} tree
+ * @param {Lookup} lookup
+ * @private
+ */
+function removeNode (id, lookup, tree) {
+  Vue.delete(lookup, id)
+  const treeNode = tree.find(node => node.id === id)
+  if (treeNode) {
+    Vue.delete(tree, tree.indexOf(treeNode))
+  }
 }
 
 export {
diff --git a/src/components/cylc/gscan/nodes.js b/src/components/cylc/gscan/nodes.js
index 7909bbb83..a74e47997 100644
--- a/src/components/cylc/gscan/nodes.js
+++ b/src/components/cylc/gscan/nodes.js
@@ -15,16 +15,18 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { sortedIndexBy } from '@/components/cylc/common/sort'
-import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/sort'
+// TODO: move to the `options` parameter that is passed to deltas; ideally it would be stored in DB or localstorage.
+const DEFAULT_PARTS_SEPARATOR = '|'
+const DEFAULT_NAMES_SEPARATOR = '/'
 
 /**
  * @typedef {Object} TreeNode
  * @property {String} id
- * @property {String} name
+ * @property {String|null} name
  * @property {String} type
  * @property {WorkflowGraphQLData} node
  */
+
 /**
  * @typedef {TreeNode} WorkflowGScanNode
  */
@@ -34,12 +36,60 @@ import { sortWorkflowNamePartNodeOrWorkflowNode } from '@/components/cylc/gscan/
  * @property {Array<WorkflowNamePartGScanNode>} children
  */
 
+/**
+ * Create a workflow node for GScan component.
+ *
+ * If the `hierarchy` parameter is `true`, then the workflow name will be split by
+ * `/`'s. For each part, a new `WorkflowNamePart` will be added in the hierarchy.
+ * With the final node being the last part of the name.
+ *
+ * The last part of a workflow name may be the workflow name (e.g. `five`), or its
+ * run ID (e.g. `run1`, if workflow name is `five/run1`).
+ *
+ * @param {WorkflowGraphQLData} workflow
+ * @param {boolean} hierarchy - whether to parse the Workflow name and create a hierarchy or not
+ * @param {String} partsSeparator - separator for workflow name parts (e.g. '|' as in 'part1|part2|...')
+ * @param {String} namesSeparator - separator used for workflow and run names (e.g. '/' as in 'workflow/run1')
+ * @returns {TreeNode|null}
+ */
+function createWorkflowNode (workflow, hierarchy, partsSeparator = DEFAULT_PARTS_SEPARATOR, namesSeparator = DEFAULT_NAMES_SEPARATOR) {
+  if (!hierarchy) {
+    return newWorkflowNode(workflow, null)
+  }
+  const workflowNameParts = parseWorkflowNameParts(workflow.id, partsSeparator, namesSeparator)
+  let prefix = workflowNameParts.user
+  // The root node, returned in this function.
+  let rootNode = null
+  // And a helper used when iterating the array...
+  let currentNode = null
+  for (const part of workflowNameParts.parts) {
+    prefix = prefix === null ? part : `${prefix}${partsSeparator}${part}`
+    const partNode = newWorkflowPartNode(prefix, part)
+    if (rootNode === null) {
+      rootNode = currentNode = partNode
+    } else {
+      currentNode.children.push(partNode)
+      currentNode = partNode
+    }
+  }
+  const workflowNode = newWorkflowNode(workflow, workflowNameParts.name)
+
+  if (currentNode === null) {
+    // We will return the workflow node only. It will be appended directly to the tree as a new leaf.
+    rootNode = workflowNode
+  } else {
+    // Add the workflow node to the end of the branch as a leaf. Note that the top of the branch is returned in this case.
+    currentNode.children.push(workflowNode)
+  }
+  return rootNode
+}
+
 /**
  * Create a new Workflow Node.
  *
  * @private
  * @param {WorkflowGraphQLData} workflow
- * @param {string|null} part
+ * @param {String|null} part
  * @returns {WorkflowGScanNode}
  */
 function newWorkflowNode (workflow, part) {
@@ -60,11 +110,11 @@ function newWorkflowNode (workflow, part) {
  */
 function newWorkflowPartNode (id, part) {
   return {
-    id: `workflow-name-part-${id}`,
+    id,
     name: part,
     type: 'workflow-name-part',
     node: {
-      id: id,
+      id,
       name: part,
       status: ''
     },
@@ -73,90 +123,75 @@ function newWorkflowPartNode (id, part) {
 }
 
 /**
- * Create a workflow node for GScan component.
- *
- * If the `hierarchy` parameter is `true`, then the workflow name will be split by
- * `/`'s. For each part, a new `WorkflowNamePart` will be added in the hierarchy.
- * With the final node being the last part of the name.
- *
- * The last part of a workflow name may be the workflow name (e.g. `five`), or its
- * run ID (e.g. `run1`, if workflow name is `five/run1`).
- *
- * @param {WorkflowGraphQLData} workflow
- * @param {boolean} hierarchy - whether to parse the Workflow name and create a hierarchy or not
- * @returns {TreeNode|null}
+ * @typedef {Object} ParsedWorkflowNameParts
+ * @property {String} workflowId - workflow ID
+ * @property {String} partsSeparator - parts separator parameter used to parse the name
+ * @property {String} namesSeparator - names separator parameter used to parse the name
+ * @property {String} user - parsed workflow user/owner
+ * @property {String} workflowName - original workflow name
+ * @property {Array<String>} parts - workflow name parts
+ * @property {String} name - workflow name (last part, used to display nodes in the GScan tree)
  */
-function createWorkflowNode (workflow, hierarchy) {
-  if (!hierarchy) {
-    return newWorkflowNode(workflow, null)
-  }
-  const workflowIdParts = workflow.id.split('|')
-  // The prefix contains all the ID parts, except for the workflow name.
-  let prefix = workflowIdParts.slice(0, workflowIdParts.length - 1)
-  // The name is here.
-  const workflowName = workflow.name
-  const parts = workflowName.split('/')
-  // Returned node...
-  let rootNode = null
-  // And a helper used when iterating the array...
-  let currentNode = null
-  while (parts.length > 0) {
-    const part = parts.shift()
-    // For the first part, we need to add an ID separator `|`, but for the other parts
-    // we actually want to use the name parts separator `/`.
-    prefix = prefix.includes('/') ? `${prefix}/${part}` : `${prefix}|${part}`
-    const partNode = parts.length !== 0
-      ? newWorkflowPartNode(prefix, part)
-      : newWorkflowNode(workflow, part)
 
-    if (rootNode === null) {
-      rootNode = currentNode = partNode
-    } else {
-      currentNode.children.push(partNode)
-      currentNode = partNode
-    }
-  }
-  return rootNode
+/**
+ * Return the workflow name parts as an array of node IDs. The first node in the array is the top of the
+ * branch, with the workflow node ID at its other end, as a leaf-node.
+ *
+ * @param {ParsedWorkflowNameParts} workflowNameParts
+ * @return {Array<String>}
+ */
+function getWorkflowNamePartsNodesIds (workflowNameParts) {
+  let prefix = workflowNameParts.user
+  const nodesIds = workflowNameParts.parts
+    .map(part => {
+      prefix = `${prefix}${workflowNameParts.partsSeparator}${part}`
+      return prefix
+    })
+  nodesIds.push(workflowNameParts.workflowId)
+  return nodesIds
 }
 
 /**
- * Add the new hierarchical node to the list of existing nodes.
+ * Parses the workflow name parts. A simple name such as `user|workflow-name` will return a structure
+ * with each part of the name, including the given parameters of this function (to simplify sending
+ * the data to other methods).
  *
- * New nodes are added in order.
+ * More complicated names such as `user|top/level/other/leaf` return the structure with an array of
+ * each name part too. This is useful for functions that need to manipulate the tree of GScan nodes,
+ * and necessary as we don't have this information from the server (only the name which doesn't
+ * split the name parts).
  *
- * @param {WorkflowGScanNode|WorkflowNamePartGScanNode} node
- * @param {Array<WorkflowGScanNode|WorkflowNamePartGScanNode>} nodes
- * @return {Array<WorkflowGScanNode|WorkflowNamePartGScanNode>}
+ * @param {String} workflowId - Workflow ID
+ * @param {String} partsSeparator - separator for workflow name parts (e.g. '|' as in 'user|research/workflow/run1')
+ * @param {String} namesSeparator - separator used for workflow and run names (e.g. '/' as in 'research/workflow/run1')
+ * @return {ParsedWorkflowNameParts}
  */
-function addNodeToTree (node, nodes) {
-  // N.B.: We must compare nodes by ID, not only by part-name,
-  //       since we can have research/nwp/run1 workflow, and research workflow;
-  //       in this case we do not want to confuse the research part-name with
-  //       the research workflow.
-  const existingNode = nodes.find((existingNode) => existingNode.id === node.id)
-  if (!existingNode) {
-    // Here we calculate what is the index for this element. If we decide to have ASC and DESC,
-    // then we just need to invert the location of the element, something like
-    // `sortedIndex = (array.length - sortedIndex)`.
-    const sortedIndex = sortedIndexBy(
-      nodes,
-      node,
-      (n) => n.name,
-      sortWorkflowNamePartNodeOrWorkflowNode
-    )
-    nodes.splice(sortedIndex, 0, node)
-  } else {
-    if (node.children) {
-      for (const child of node.children) {
-        // Recursion. Note that we are changing the `nodes` to the children of the existing node.
-        addNodeToTree(child, existingNode.children)
-      }
-    }
+function parseWorkflowNameParts (workflowId, partsSeparator = DEFAULT_PARTS_SEPARATOR, namesSeparator = DEFAULT_NAMES_SEPARATOR) {
+  if (!workflowId || workflowId.trim() === '') {
+    throw new Error('Missing ID for workflow name parts')
+  }
+  const idParts = workflowId.split(partsSeparator)
+  if (idParts.length !== 2) {
+    throw new Error(`Invalid parts found, expected at least 2 parts in ${workflowId}`)
+  }
+  const user = idParts[0]
+  const workflowName = idParts[1]
+  const parts = workflowName.split(namesSeparator)
+  // The name, used for display in the tree. Can be a workflow name like 'd', or a runN like 'run1'.
+  const name = parts.pop()
+  return {
+    workflowId,
+    partsSeparator,
+    namesSeparator,
+    user, // user
+    workflowName, // a/b/c/d/run1
+    parts, // [a, b, c, d]
+    name // run1
   }
-  return nodes
 }
 
 export {
-  addNodeToTree,
-  createWorkflowNode
+  createWorkflowNode,
+  getWorkflowNamePartsNodesIds,
+  parseWorkflowNameParts
 }

From 76afe2c36ae03a79de20e8757af6a8ab8b788922 Mon Sep 17 00:00:00 2001
From: "Bruno P. Kinoshita" <kinow@users.noreply.github.com>
Date: Mon, 20 Sep 2021 16:43:07 +1200
Subject: [PATCH 16/16] WIP propagate task states (latestStateTasks and
 stateTotals)

---
 src/components/cylc/gscan/index.js            | 171 +++++++++++++-----
 src/components/cylc/gscan/nodes.js            |  22 ++-
 .../mock/json/GscanSubscriptionQuery.json     |   2 +-
 3 files changed, 142 insertions(+), 53 deletions(-)

diff --git a/src/components/cylc/gscan/index.js b/src/components/cylc/gscan/index.js
index 429e97f59..39567e752 100644
--- a/src/components/cylc/gscan/index.js
+++ b/src/components/cylc/gscan/index.js
@@ -46,12 +46,21 @@ import {
  */
 function addWorkflow (workflow, gscan, options) {
   const hierarchical = options.hierarchical || true
+  const workflowNode = createWorkflowNode(workflow, hierarchical)
   if (hierarchical) {
-    const workflowNode = createWorkflowNode(workflow, hierarchical)
-    addHierarchicalWorkflow(workflowNode, gscan.lookup, gscan.tree, options)
+    // TBD: We need the leaf node to propagate states, and this is done here since the
+    //      addHierarchicalWorkflow has recursion. There might be a better way for
+    //      handling this though?
+    let leafNode = workflowNode
+    while (leafNode.children) {
+      // [0] because this is not really a sparse tree, but more like a linked-list since
+      // we created the node with createWorkflowNode.
+      leafNode = leafNode.children[0]
+    }
+    addHierarchicalWorkflow(workflowNode, leafNode, gscan.lookup, gscan.tree, options)
   } else {
-    gscan.lookup[workflow.id] = workflow
-    gscan.tree.push(workflow)
+    gscan.lookup[workflow.id] = workflowNode
+    gscan.tree.push(workflowNode)
   }
 }
 
@@ -60,18 +69,19 @@ function addWorkflow (workflow, gscan, options) {
  * functions of this module). This is required as we apply recursion for adding nodes into the tree,
  * but we replace the tree and pass only a sub-tree.
  *
+ * @param workflowOrPart
  * @param workflow
  * @param {Lookup} lookup
  * @param {Array<TreeNode>} tree
  * @param {*} options
  * @private
  */
-function addHierarchicalWorkflow (workflow, lookup, tree, options) {
-  if (!lookup[workflow.id]) {
-    // a new node, let's add this node and its descendants to the lookup
-    lookup[workflow.id] = workflow
-    if (workflow.children) {
-      const stack = [...workflow.children]
+function addHierarchicalWorkflow (workflowOrPart, workflow, lookup, tree, options) {
+  if (!lookup[workflowOrPart.id]) {
+    // A new node. Let's add this node and its descendants to the lookup.
+    lookup[workflowOrPart.id] = workflowOrPart
+    if (workflowOrPart.children) {
+      const stack = [...workflowOrPart.children]
       while (stack.length) {
         const currentNode = stack.shift()
         lookup[currentNode.id] = currentNode
@@ -80,32 +90,38 @@ function addHierarchicalWorkflow (workflow, lookup, tree, options) {
         }
       }
     }
-    // and now add the top-level node to the tree
-    // Here we calculate what is the index for this element. If we decide to have ASC and DESC,
-    // then we just need to invert the location of the element, something like
-    // `sortedIndex = (array.length - sortedIndex)`.
+    // And now add the node to the tree. Here we calculate what is the index for this element.
+    // If we decide to have ASC and DESC, then we just need to invert the location of the node,
+    // something like `sortedIndex = (array.length - sortedIndex)`.
     const sortedIndex = sortedIndexBy(
       tree,
-      workflow,
+      workflowOrPart,
       (n) => n.name,
       sortWorkflowNamePartNodeOrWorkflowNode
     )
-    tree.splice(sortedIndex, 0, workflow)
+    tree.splice(sortedIndex, 0, workflowOrPart)
   } else {
-    // we will have to merge the hierarchies
-    const existingNode = lookup[workflow.id]
-    // TODO: combine states summaries?
+    // The node exists in the lookup, so must exist in the tree too. We will have to merge the hierarchies.
+    const existingNode = lookup[workflowOrPart.id]
     if (existingNode.children) {
+      // Propagate workflow states to its ancestor.
+      if (workflow.node.latestStateTasks && workflow.node.stateTotals) {
+        existingNode.node.descendantsLatestStateTasks[workflow.id] = workflow.node.latestStateTasks
+        existingNode.node.descendantsStateTotal[workflow.id] = workflow.node.stateTotals
+        tallyPropagatedStates(existingNode.node)
+      }
       // Copy array since we will iterate it, and modify existingNode.children
       // (see the tree.splice above.)
-      const children = [...workflow.children]
+      const children = [...workflowOrPart.children]
       for (const child of children) {
-        // Recursion
-        addHierarchicalWorkflow(child, lookup, existingNode.children, options)
+        // Recursion!
+        addHierarchicalWorkflow(child, workflow, lookup, existingNode.children, options)
       }
     } else {
-      // Here we have an existing workflow node. Let's merge it.
-      mergeWith(existingNode, workflow, mergeWithCustomizer)
+      // Here we have an existing workflow node (only child-less). Let's merge it.
+      // It should not happen actually, since this is adding a workflow. Maybe throw
+      // an error instead?
+      mergeWith(existingNode, workflowOrPart, mergeWithCustomizer)
     }
   }
 }
@@ -129,24 +145,21 @@ function updateWorkflow (workflow, gscan, options) {
   mergeWith(existingData.node, workflow, mergeWithCustomizer)
   const hierarchical = options.hierarchical || true
   if (hierarchical) {
+    // But now we need to propagate the states up to its ancestors, if any.
     updateHierarchicalWorkflow(existingData, gscan.lookup, gscan.tree, options)
   }
-  // TODO: create workflow hierarchy (from workflow object), then iterate
-  //       it and use lookup to fetch the existing node. Finally, combine
-  //       the gscan states (latestStateTasks & stateTotals).
   Vue.set(gscan.lookup, existingData.id, existingData)
 }
 
 function updateHierarchicalWorkflow (existingData, lookup, tree, options) {
-  // We need to sort its parent again.
   const workflowNameParts = parseWorkflowNameParts(existingData.id)
+  // nodesIds contains the list of GScan tree nodes, with the workflow being a leaf node.
   const nodesIds = getWorkflowNamePartsNodesIds(workflowNameParts)
-  // Discard the last since it's the workflow ID that we already have
-  // in the `existingData` object. Now if not empty, we have our parent.
-  nodesIds.pop()
+  const workflowId = nodesIds.pop()
   const parentId = nodesIds.length > 0 ? nodesIds.pop() : null
   const parent = parentId ? lookup[parentId] : tree
   if (!parent) {
+    // This is only possible if the parent was missing from the lookup... Never supposed to happen.
     throw new Error(`Invalid orphan hierarchical node: ${existingData.id}`)
   }
   const siblings = parent.children
@@ -154,17 +167,70 @@ function updateHierarchicalWorkflow (existingData, lookup, tree, options) {
   const currentIndex = siblings.findIndex(node => node.id === existingData.id)
   // Where should it be now?
   const sortedIndex = sortedIndexBy(
-    parent.children,
+    siblings,
     existingData,
     (n) => n.name,
     sortWorkflowNamePartNodeOrWorkflowNode
   )
-  // If it is not where it is, we need to add it to its correct location.
+  // If it is not where it must be, we need to move it to its correct location.
   if (currentIndex !== sortedIndex) {
-    // siblings.splice(currentIndex, 1)
-    // siblings.splice(sortedIndex, 0, existingData)
-    Vue.delete(siblings, currentIndex)
-    Vue.set(siblings, sortedIndex, existingData)
+    // First we remove the element from where it was.
+    siblings.splice(currentIndex, 1)
+    if (sortedIndex < currentIndex) {
+      // Now, if we must move the element to a position that is less than where it was, we can simply move it;
+      siblings.splice(sortedIndex, 0, existingData)
+    } else {
+      // however, if we are moving it down/later, we must compensate for itself. i.e. the sortedIndex is considering
+      // the element itself. So we subtract one from its position.
+      siblings.splice(sortedIndex - 1, 0, existingData)
+    }
+  }
+  // Finally, we need to propagate the state totals and latest state tasks,
+  // but only if we have a parent (otherwise we are at the top-most level).
+  if (parentId) {
+    const workflow = lookup[workflowId]
+    const latestStateTasks = workflow.node.latestStateTasks
+    const stateTotals = workflow.node.stateTotals
+    // Installed workflows do not have any state.
+    if (latestStateTasks && stateTotals) {
+      for (const parentNodeId of [...nodesIds, parentId]) {
+        const parentNode = lookup[parentNodeId]
+        if (parentNode.latestStateTasks && parentNode.stateTotals) {
+          mergeWith(parentNode.node.descendantsLatestStateTasks[workflow.id], latestStateTasks, mergeWithCustomizer)
+          mergeWith(parentNode.node.descendantsStateTotal[workflow.id], stateTotals, mergeWithCustomizer)
+          tallyPropagatedStates(parentNode.node)
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Computes the latestStateTasks of each node. The latestStateTasks and
+ * stateTotals of a workflow-name-part are not reactive, but are calculated
+ * based on the values of descendantsLatestStateTasks and descendantsStateTotal,
+ * so we need to keep these in sync any time we add or update descendants.
+ *
+ * @param {WorkflowGraphQLData} node
+ */
+function tallyPropagatedStates (node) {
+  for (const latestStateTasks of Object.values(node.descendantsLatestStateTasks)) {
+    for (const state of Object.keys(latestStateTasks)) {
+      if (node.latestStateTasks[state]) {
+        node.latestStateTasks[state].push(...latestStateTasks[state])
+      } else {
+        Vue.set(node.latestStateTasks, state, latestStateTasks[state])
+      }
+    }
+  }
+  for (const stateTotals of Object.values(node.descendantsStateTotal)) {
+    for (const state of Object.keys(stateTotals)) {
+      if (node.stateTotals[state]) {
+        Vue.set(node.stateTotals, state, node.stateTotals[state] + stateTotals[state])
+      } else {
+        Vue.set(node.stateTotals, state, stateTotals[state])
+      }
+    }
   }
 }
 
@@ -205,21 +271,32 @@ function removeHierarchicalWorkflow (workflowId, lookup, tree, options) {
   const workflowNameParts = parseWorkflowNameParts(workflowId)
   const nodesIds = getWorkflowNamePartsNodesIds(workflowNameParts)
   // We start from the leaf-node, going upward to make sure we don't leave nodes with no children.
+  const removedNodeIds = []
   for (let i = nodesIds.length - 1; i >= 0; i--) {
     const nodeId = nodesIds[i]
     const node = lookup[nodeId]
+    // If we have children nodes, we MUST not remove the node from the GScan tree, since
+    // it contains other workflows branches. Instead, we must only remove the propagated
+    // states.
     if (node.children && node.children.length > 0) {
-      // We stop as soon as we find a node that still has children.
-      break
-    }
-    // Now we can remove the node from the lookup, and from its parents children array.
-    const previousIndex = i - 1
-    const parentId = previousIndex >= 0 ? nodesIds[previousIndex] : null
-    if (parentId && !lookup[parentId]) {
-      throw new Error(`Failed to locate parent ${parentId} in GScan lookup`)
+      // If we pruned a workflow that was installed, these states are undefined!
+      if (node.node.descendantsLatestStateTasks && node.node.descendantsStateTotal) {
+        for (const removedNodeId of removedNodeIds) {
+          Vue.delete(node.node.descendantsLatestStateTasks, removedNodeId)
+          Vue.delete(node.node.descendantsStateTotal, removedNodeId)
+        }
+      }
+    } else {
+      // Now we can remove the node from the lookup, and from its parents children array.
+      const previousIndex = i - 1
+      const parentId = previousIndex >= 0 ? nodesIds[previousIndex] : null
+      if (parentId && !lookup[parentId]) {
+        throw new Error(`Failed to locate parent ${parentId} in GScan lookup`)
+      }
+      const parentChildren = parentId ? lookup[parentId].children : tree
+      removeNode(nodeId, lookup, parentChildren)
+      removedNodeIds.push(nodeId)
     }
-    const parentChildren = parentId ? lookup[parentId].children : tree
-    removeNode(nodeId, lookup, parentChildren)
   }
 }
 
diff --git a/src/components/cylc/gscan/nodes.js b/src/components/cylc/gscan/nodes.js
index a74e47997..d388aff01 100644
--- a/src/components/cylc/gscan/nodes.js
+++ b/src/components/cylc/gscan/nodes.js
@@ -50,7 +50,7 @@ const DEFAULT_NAMES_SEPARATOR = '/'
  * @param {boolean} hierarchy - whether to parse the Workflow name and create a hierarchy or not
  * @param {String} partsSeparator - separator for workflow name parts (e.g. '|' as in 'part1|part2|...')
  * @param {String} namesSeparator - separator used for workflow and run names (e.g. '/' as in 'workflow/run1')
- * @returns {TreeNode|null}
+ * @returns {TreeNode}
  */
 function createWorkflowNode (workflow, hierarchy, partsSeparator = DEFAULT_PARTS_SEPARATOR, namesSeparator = DEFAULT_NAMES_SEPARATOR) {
   if (!hierarchy) {
@@ -64,7 +64,7 @@ function createWorkflowNode (workflow, hierarchy, partsSeparator = DEFAULT_PARTS
   let currentNode = null
   for (const part of workflowNameParts.parts) {
     prefix = prefix === null ? part : `${prefix}${partsSeparator}${part}`
-    const partNode = newWorkflowPartNode(prefix, part)
+    const partNode = newWorkflowPartNode(prefix, part, workflow.id, workflow.latestStateTasks, workflow.stateTotals)
     if (rootNode === null) {
       rootNode = currentNode = partNode
     } else {
@@ -87,10 +87,10 @@ function createWorkflowNode (workflow, hierarchy, partsSeparator = DEFAULT_PARTS
 /**
  * Create a new Workflow Node.
  *
- * @private
  * @param {WorkflowGraphQLData} workflow
  * @param {String|null} part
  * @returns {WorkflowGScanNode}
+ * @private
  */
 function newWorkflowNode (workflow, part) {
   return {
@@ -106,17 +106,29 @@ function newWorkflowNode (workflow, part) {
  *
  * @param {string} id
  * @param {string} part
+ * @param {string} workflowId
+ * @param {Object} latestStateTasks
+ * @param {Object} stateTotals
  * @return {WorkflowNamePartGScanNode}
  */
-function newWorkflowPartNode (id, part) {
+function newWorkflowPartNode (id, part, workflowId, latestStateTasks = [], stateTotals = []) {
   return {
     id,
     name: part,
     type: 'workflow-name-part',
     node: {
       id,
+      workflowId,
       name: part,
-      status: ''
+      status: '',
+      descendantsLatestStateTasks: {
+        [workflowId]: latestStateTasks
+      },
+      descendantsStateTotal: {
+        [workflowId]: stateTotals
+      },
+      latestStateTasks: {},
+      stateTotals: {}
     },
     children: []
   }
diff --git a/src/services/mock/json/GscanSubscriptionQuery.json b/src/services/mock/json/GscanSubscriptionQuery.json
index 208b78f10..b2a6e92a9 100644
--- a/src/services/mock/json/GscanSubscriptionQuery.json
+++ b/src/services/mock/json/GscanSubscriptionQuery.json
@@ -1,6 +1,6 @@
 {
   "workflow": {
-    "id": "user|one",
+    "id": "user|a/b/c/one",
     "name": "one",
     "status": "running",
     "owner": "user",