added cyclepoint grouping with subgraphs

added toggle button and styling

added e2e test

use initialOptions prop to save view state

fix nodes undefined error

added towncrier entry

review amends

review amends

fix broken e2e tests

Author: markgrahamdawson

changes.d/1763.feat.md

@@ -0,0 +1 @@
+Added graph view feature to group nodes by cycle point

src/components/cylc/GraphSubgraph.vue

@@ -0,0 +1,48 @@
+<template>
+  <g class="c-graph-subgraph">
+    <rect
+      :width="subgraph.width"
+      :height="subgraph.height"
+      :x="subgraph.x"
+      :y="subgraph.y"
+      rx="50"
+      ry="50"
+      fill="none"
+      stroke-width="8px"
+      stroke="grey"
+      stroke-dasharray="50 50"
+      />
+    <text
+      :x="labelXPosition"
+      :y="labelYPosition"
+      font-family="Roboto"
+      alignment-baseline="middle" text-anchor="middle"
+      font-size="70px"
+      fill="black"
+      stroke-width=1.5
+      stroke="white"
+    >
+      {{ subgraph.label }}
+    </text>
+  </g>
+</template>
+
+<script>
+export default {
+  name: 'GraphSubgraph',
+  props: {
+    subgraph: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    labelXPosition () {
+      return (parseInt(this.subgraph.x) + (parseInt(this.subgraph.width) / 2))
+    },
+    labelYPosition () {
+      return (parseInt(this.subgraph.y) + 90)
+    },
+  }
+}
+</script>

src/views/Graph.vue

@@ -86,6 +86,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </g>
         </g>
+        <g v-if="groupCycle" class="graph-subgraph-container">
+          <g v-for="(subgraph, key) in subgraphs"
+            :key="key">
+            <GraphSubgraph
+              v-if="subgraph.label!='margin'"
+              :subgraph="subgraph" />
+          </g>
+        </g>
       </g>
     </svg>
   </div>
@@ -105,6 +113,7 @@ import {
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 // import CylcTreeCallback from '@/services/treeCallback'
 import GraphNode from '@/components/cylc/GraphNode.vue'
+import GraphSubgraph from '@/components/cylc/GraphSubgraph.vue'
 import ViewToolbar from '@/components/cylc/ViewToolbar.vue'
 import {
   posToPath,
@@ -118,7 +127,8 @@ import {
   mdiArrowCollapse,
   mdiArrowExpand,
   mdiRefresh,
-  mdiFileRotateRight
+  mdiFileRotateRight,
+  mdiVectorSelection
 } from '@mdi/js'
 
 // NOTE: Use TaskProxies not nodesEdges{nodes} to list nodes as this is what
@@ -219,6 +229,7 @@ export default {
 
   components: {
     GraphNode,
+    GraphSubgraph,
     ViewToolbar
   },
 
@@ -251,11 +262,19 @@ export default {
      */
     const spacing = useInitialOptions('spacing', { props, emit }, 1.5)
 
+    /**
+     * The group by cycle point toggle state.
+     * If true the graph nodes will be grouped by cycle point
+     * @type {import('vue').Ref<boolean>}
+     */
+    const groupCycle = useInitialOptions('groupCycle', { props, emit }, false)
+
     return {
       jobTheme: useJobTheme(),
       transpose,
       autoRefresh,
-      spacing
+      spacing,
+      groupCycle
     }
   },
 
@@ -268,6 +287,7 @@ export default {
       // the nodes end edges we render to the graph
       graphNodes: [],
       graphEdges: [],
+      subgraphs: {},
       // the svg transformations to apply to each node to apply the layout
       // generated by graphviz
       nodeTransformations: {},
@@ -361,6 +381,13 @@ export default {
               icon: mdiArrowCollapse,
               action: 'callback',
               callback: this.decreaseSpacing
+            },
+            {
+              title: 'Group by cycle point',
+              icon: mdiVectorSelection,
+              action: 'toggle',
+              value: this.groupCycle,
+              key: 'groupCycle'
             }
           ]
         }
@@ -483,7 +510,20 @@ export default {
       }
       return ret
     },
-    getDotCode (nodeDimensions, nodes, edges) {
+    /**
+     * Get the nodes binned by cycle point
+     *
+     * @param {Object[]} nodes
+     * @returns {{ [dateTime: string]: Object[] nodes }} mapping of node to their cycle point.
+     */
+    getCycles (nodes) {
+      if (!this.groupCycle) return
+      return nodes.reduce((x, y) => {
+        (x[y.node.cyclePoint] ||= []).push(y)
+        return x
+      }, {})
+    },
+    getDotCode (nodeDimensions, nodes, edges, cycles) {
       // return GraphViz dot code for the given nodes, edges and dimensions
       const ret = ['digraph {']
       let spacing = this.spacing
@@ -526,6 +566,27 @@ export default {
           ]
         `)
       }
+
+      if (this.groupCycle) {
+        // Loop over the subgraphs
+        Object.keys(cycles).forEach((key, i) => {
+          // Loop over the nodes that are included in the subraph
+          const nodeFormattedArray = cycles[key].map(a => `"${a.id}"`)
+          ret.push(`
+          subgraph cluster_margin_${i}
+          {
+            margin=100.0
+            label="margin"
+            subgraph cluster_${i} {${nodeFormattedArray};\n
+              label = "${key}";\n
+              fontsize = "70px"
+              style=dashed
+              margin=60.0
+            }
+          }`)
+        })
+      }
+
       if (this.transpose) {
         // left-right orientation
         // route edges from anywhere on the node of the source task to anywhere
@@ -542,6 +603,8 @@ export default {
         }
       }
       ret.push('}')
+      console.log("ret.join('\n')")
+      console.log(ret.join('\n'))
       return ret.join('\n')
     },
     hashGraph (nodes, edges) {
@@ -602,6 +665,8 @@ export default {
         return
       }
 
+      const cycles = this.getCycles(nodes)
+
       // compute the graph ID
       const graphID = this.hashGraph(nodes, edges)
       if (this.graphID === graphID) {
@@ -646,7 +711,7 @@ export default {
 
       // layout the graph
       try {
-        await this.layout(nodes, edges, nodeDimensions)
+        await this.layout(nodes, edges, nodeDimensions, cycles)
       } catch (e) {
         // something went wrong, allow the layout to retry later
         this.graphID = null
@@ -689,26 +754,42 @@ export default {
      * @param {Object[]} edges
      * @param {{ [id: string]: SVGRect }} nodeDimensions
      */
-    async layout (nodes, edges, nodeDimensions) {
+    async layout (nodes, edges, nodeDimensions, cycles) {
       // generate the GraphViz dot code
-      const dotCode = this.getDotCode(nodeDimensions, nodes, edges)
+      const dotCode = this.getDotCode(nodeDimensions, nodes, edges, cycles)
 
       // run the layout algorithm
       const jsonString = (await this.graphviz).layout(dotCode, 'json')
       const json = JSON.parse(jsonString)
 
+      this.subgraphs = {}
       // update graph node positions
       for (const obj of json.objects) {
-        const [x, y] = obj.pos.split(',')
-        const bbox = nodeDimensions[obj.name]
-        // translations:
-        // 1. The graphviz node coordinates
-        // 2. Centers the node on this coordinate
-        // TODO convert (2) to maths OR fix it to avoid recomputation?
-        this.nodeTransformations[obj.name] = `
+        if (obj.bb) {
+        // if the object is a subgraph
+          const [left, bottom, right, top] = obj.bb.split(',')
+          this.subgraphs[obj.name] = {
+            x: left,
+            y: -top,
+            width: right - left,
+            height: top - bottom,
+            label: obj.label
+          }
+        } else {
+          console.log("obj.name")
+          console.log(obj.name)
+          // else the object is a node
+          const [x, y] = obj.pos.split(',')
+          const bbox = nodeDimensions[obj.name]
+          // translations:
+          // 1. The graphviz node coordinates
+          // 2. Centers the node on this coordinate
+          // TODO convert (2) to maths OR fix it to avoid recomputation?
+          this.nodeTransformations[obj.name] = `
           translate(${x}, -${y})
           translate(-${bbox.width / 2}, -${bbox.height / 2})
         `
+        }
       }
       // update edge paths
       this.graphEdges = json.edges?.map(edge => posToPath(edge.pos)) ?? []
@@ -741,6 +822,11 @@ export default {
       if (!this.autoRefresh) {
         this.updateTimer()
       }
+    },
+    groupCycle () {
+      // refresh the graph when group by cycle point option is changed
+      this.graphID = null
+      this.refresh()
     }
   }
 }

tests/e2e/specs/graph.cy.js

@@ -117,6 +117,18 @@ describe('Graph View', () => {
       .should('have.length', 7)
   })
 
+  it('should group by cycle point', () => {
+    cy.visit('/#/graph/one')
+    waitForGraphLayout()
+    cy
+      .get('[data-cy="control-groupCycle"] > .v-btn')
+      .click()
+    cy
+      .get('.c-graph:first')
+      .find('.c-graph-subgraph > rect')
+      .should('be.visible')
+  })
+
   it('remembers autorefresh setting when switching between workflows', () => {
     cy.visit('/#/workspace/one')
     addView('Graph')
@@ -130,4 +142,11 @@ describe('Graph View', () => {
     waitForGraphLayout()
     checkRememberToolbarSettings('[data-cy=control-transpose]', 'not.have.class', 'have.class')
   })
+
+  it('remembers cycle point grouping setting when switching between workflows', () => {
+    cy.visit('/#/workspace/one')
+    addView('Graph')
+    waitForGraphLayout()
+    checkRememberToolbarSettings('[data-cy="control-groupCycle"]', 'not.have.class', 'have.class')
+  })
 })