added cyclepoint grouping with subgraphs

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,49 @@
+<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="60px"
+      fill="black"
+      stroke-width=5
+      paint-order="stroke"
+      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
@@ -602,6 +663,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 +709,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 +752,40 @@ 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 {
+          // 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 +818,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')
+  })
 })