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,72 @@
+<!--
+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/>.
+-->
+
+<!--
+  Subgraph - Used to render graphviz subgraphs as svg.
+-->
+<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 () {
+      // Graphviz puts labels inside the subgraph
+      // SVG rect text is put outside the rect
+      // Adding 90pt to the y position brings the label inside the rect
+      return (parseInt(this.subgraph.y) + 90)
+    },
+  }
+}
+</script>

src/services/mock/json/workflows/multi.json

@@ -144,6 +144,7 @@
             "isHeld": false,
             "isQueued": true,
             "isRunahead": false,
+            "name": "foo",
             "task": {
               "meanElapsedTime": 0,
               "__typename": "Task"
@@ -160,6 +161,7 @@
             "isHeld": false,
             "isQueued": false,
             "isRunahead": false,
+            "name": "foo",
             "task": {
               "meanElapsedTime": 0,
               "__typename": "Task"

src/utils/graph-utils.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,25 +15,42 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/**
+ * Convert graphviz edge bezier curve in dot format to SVG path .
+ *
+ * @param {string} pos - `pos` attribute of a graph edge in dot format.
+ * @returns {string} The SVG path.
+ */
 export function posToPath (pos) {
+  // pos starts with `e,` followed by a list of coordinates
+  const parts = pos.substring(2).split(' ')
   // the last point comes first, followed by the others in order I.E:
   // -1, 0, 1, 2, ... -3, -2
-  const parts = pos.substring(2).split(' ').map(x => x.split(','))
-  const [last] = parts.splice(0, 1)
-  let path = null
-  for (const part of parts) {
-    if (!path) {
-      path = `M${part[0]} -${part[1]} C`
-    } else {
-      path = path + ` ${part[0]} -${part[1]},`
-    }
-  }
-  path = path + ` L ${last[0]} -${last[1]}`
-  return path
+  const [last, first] = parts.splice(0, 2)
+  const path = parts.reduce(
+    (acc, part) => `${acc} ${getCoord(part)},`,
+    `M${getCoord(first)} C`
+  )
+  return `${path} L ${getCoord(last)}`
 }
 
-/* TODO: everything! */
-// eslint-disable-next-line no-extend-native
+/**
+ * Convert dotcode `pos` coordinate to SVG path coordinate.
+ *
+ * @param {string} posCoord - A coordinate in dot format.
+ * @returns {string}
+ */
+export function getCoord (posCoord) {
+  const [x, y] = posCoord.split(',').map(parseFloat)
+  return `${x} ${-y}`
+}
+
+/**
+ * Calculate a non-cryptographic hash value for a given string.
+ *
+ * @param {string} string
+ * @returns {number}
+ */
 export function nonCryptoHash (string) {
   let hash = 0
   let i

src/views/Graph.vue

@@ -86,6 +86,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </g>
         </g>
+        <g v-if="groupCycle">
+          <GraphSubgraph
+            v-for="(subgraph, key) in subgraphs"
+            :key="key"
+            :subgraph="subgraph"
+          />
+        </g>
       </g>
     </svg>
   </div>
@@ -105,6 +112,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 +126,8 @@ import {
   mdiArrowCollapse,
   mdiArrowExpand,
   mdiRefresh,
-  mdiFileRotateRight
+  mdiFileRotateRight,
+  mdiVectorSelection
 } from '@mdi/js'
 
 // NOTE: Use TaskProxies not nodesEdges{nodes} to list nodes as this is what
@@ -154,7 +163,6 @@ fragment EdgeData on Edge {
 fragment TaskProxyData on TaskProxy {
   id
   state
-  cyclePoint
   isHeld
   isRunahead
   isQueued
@@ -219,6 +227,7 @@ export default {
 
   components: {
     GraphNode,
+    GraphSubgraph,
     ViewToolbar
   },
 
@@ -251,11 +260,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 +285,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 +379,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 +508,20 @@ export default {
       }
       return ret
     },
-    getDotCode (nodeDimensions, nodes, edges) {
+    /**
+     * Get the nodes binned by cycle point
+     *
+     * @param {Object[]} nodes
+     * @returns {{ [dateTime: string]: Object[] }=} mapping of cycle points to nodes
+     */
+    getCycles (nodes) {
+      if (!this.groupCycle) return
+      return nodes.reduce((x, y) => {
+        (x[y.tokens.cycle] ||= []).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 +564,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 +661,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 +707,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 +750,43 @@ 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
+          if (obj.label !== 'margin') {
+            // ignore the margins in the dot-code which do not need DOM elements
+            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 +819,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()
     }
   }
 }