Handle adding nodes

Author: kinow

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)
       }
     }
   },

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,14 +92,15 @@ function applyDeltasUpdated (updated, gscan, options) {
  * Deltas pruned.
  *
  * @param {DeltasPruned} pruned
- * @param {GScan} gscan
+ * @param {import('./index').GScan} gscan
  * @param {*} options
  * @returns {Result}
  */
 function applyDeltasPruned (pruned, gscan, options) {
   const result = {
     errors: []
   }
+  // TODO: why not pruned.workflows???
   if (pruned.workflow) {
     const workflowId = pruned.workflow
     try {

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
  */

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) {

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)
   },

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
  */

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: {}
     }
   },