From 647c6abf2545e90c8a537daff68cccad29478156 Mon Sep 17 00:00:00 2001
From: Martin Ryan <martynmryan@gmail.com>
Date: Wed, 16 Oct 2019 15:54:09 +1100
Subject: [PATCH] wip: node job info

---
 package.json                              |   14 +
 src/components/core/CyElement.vue         |   47 +
 src/components/core/Cytoscape.vue         |  211 +++
 src/components/cylc/Graph.vue             | 1462 +++++++++++++++++++++
 src/router/paths.js                       |    9 +
 src/services/cytoscape.service.js         |   27 +
 src/styles/cytoscape/cytoscape-custom.css |  223 ++++
 src/styles/cytoscape/html-label.scss      |   57 +
 src/styles/cytoscape/panzoom.css          |  221 ++++
 src/views/GScan.vue                       |   13 +-
 src/views/Graph.vue                       |   20 +
 11 files changed, 2297 insertions(+), 7 deletions(-)
 create mode 100644 src/components/core/CyElement.vue
 create mode 100644 src/components/core/Cytoscape.vue
 create mode 100644 src/components/cylc/Graph.vue
 create mode 100644 src/services/cytoscape.service.js
 create mode 100644 src/styles/cytoscape/cytoscape-custom.css
 create mode 100644 src/styles/cytoscape/html-label.scss
 create mode 100644 src/styles/cytoscape/panzoom.css
 create mode 100644 src/views/Graph.vue

diff --git a/package.json b/package.json
index 98e24e1b7b..aa8fed468f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,17 @@
   "dependencies": {
     "apollo-boost": "^0.4.4",
     "axios-fetch": "^1.1.0",
+    "cytoscape": "^3.9.0",
+    "cytoscape-cola": "^2.3.0",
+    "cytoscape-cose-bilkent": "^4.0.0",
+    "cytoscape-dagre": "^2.2.2",
+    "cytoscape-expand-collapse": "^3.1.2",
+    "cytoscape-klay": "^3.1.2",
+    "cytoscape-navigator": "^1.3.3",
+    "cytoscape-node-html-label": "^1.1.5",
+    "cytoscape-panzoom": "^2.5.3",
+    "cytoscape-popper": "^1.0.4",
+    "cytoscape-undo-redo": "^1.3.1",
     "dotparser": "^0.4.0",
     "enumify": "^1.0.4",
     "graphql": "^14.5.3",
@@ -25,13 +36,16 @@
     "jshint": "^2.10.2",
     "nprogress": "^0.2.0",
     "tippy.js": "^4.3.5",
+    "uuid-by-string": "^2.1.5",
     "vee-validate": "^3.0.2",
     "vue": "^2.6.10",
     "vue-apollo": "^3.0.0-beta.30",
+    "vue-cytoscape": "^0.2.10",
     "vue-i18n": "^8.14.0",
     "vue-meta": "^2.2.1",
     "vue-router": "^3.1.2",
     "vue-spinner": "^1.0.3",
+    "vue-tippy": "^4.0.3",
     "vuetify": "^2.0.10",
     "vuex": "^3.1.1",
     "vuex-router-sync": "^5.0.0"
diff --git a/src/components/core/CyElement.vue b/src/components/core/CyElement.vue
new file mode 100644
index 0000000000..46d5f24bc1
--- /dev/null
+++ b/src/components/core/CyElement.vue
@@ -0,0 +1,47 @@
+<template>
+  <div></div>
+</template>
+<script>
+import VueCyObj from '@/components/core/Cytoscape'
+
+export default {
+  props: {
+    definition: {
+      type: String,
+      default: ''
+    },
+    debug: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created () {
+    if (this.debug) console.log('[CyElement] [+] created ', this.definition)
+    this.add(this.definition)
+  },
+  watch: {
+    // eslint-disable-next-line no-unused-vars
+    definition (newVal, oldVal) {
+      // this.remove(oldVal)
+      // this.add(newVal)
+      return newVal
+    }
+  },
+  destroyed () {
+    if (this.debug) console.log('[CyElement] [x] deleted ', this.definition)
+    this.remove(this.definition)
+  },
+  methods: {
+    async add (element) {
+      const cy = await VueCyObj.instance
+      // add it only if it doesn't exist
+      if (cy.$id(element.data.id).length === 0) cy.add({ ...element })
+    },
+    async remove (element) {
+      const cy = await VueCyObj.instance
+      // remove it only if it exist
+      if (cy.$id(element.data.id).length > 0) cy.remove(`#${element.data.id}`)
+    }
+  }
+}
+</script>
diff --git a/src/components/core/Cytoscape.vue b/src/components/core/Cytoscape.vue
new file mode 100644
index 0000000000..a9f3d7c5b9
--- /dev/null
+++ b/src/components/core/Cytoscape.vue
@@ -0,0 +1,211 @@
+<template>
+  <div id="cytoscape" ref="cytoscape">
+    <cy-element
+      v-for="def in elements"
+      :key="`${def.data.id}`"
+      :definition="def"
+      :debug="debug"
+    ></cy-element>
+    <slot></slot>
+  </div>
+</template>
+<script>
+import cytoscape from 'cytoscape'
+import Vue from 'vue'
+
+export const sync = state => {
+  console.log('sync state: ', state)
+  let elements = [...state.elements]
+  // replace the `elements` field with a custom one
+  Object.defineProperty(state, 'elements', {
+    get () {
+      return elements
+    },
+    set (newElements) {
+      // update cytoscape view
+      VueCyObj.instance.then(c => {
+        // remove all the elements in cytoscape that are not in the newElements
+        const selector = newElements.map(el => `#${el.data.id}`).join(', ')
+        c.remove(cy.$(selector).absoluteComplement())
+        // add new elements if needed
+        newElements.forEach(el => {
+          if (c.$(`#${el.data.id}`).length === 0) c.add(el)
+        })
+      })
+      elements = newElements
+    },
+    enumerable: true,
+    configurable: true
+  })
+  // trigger the initialization, will add the elements if needed
+  state.elements = elements
+  return state
+}
+
+let resolver = null
+let cy = null
+
+// eslint-disable-next-line no-unused-vars
+const promise = new Promise((resolve, reject) => {
+  resolver = resolve
+})
+
+const VueCyObj = {
+  reset () {
+    cy = null
+  },
+  get instance () {
+    return promise
+  },
+  setConfig (config, preConfig, afterCreated) {
+    // if a pre-configuration function is passed
+    // then call it with the cytoscape constructor
+    // this is useful to install/use extensions
+    if (preConfig) {
+      preConfig(cytoscape)
+    }
+
+    cy = cytoscape(config)
+    // if a afterCreated function is passed
+    // then call it with the cytoscape *instance*
+    if (afterCreated) {
+      afterCreated(cy)
+    }
+
+    // let the cytoscape instance available for the awaiters
+    if (resolver) {
+      resolver(cy)
+    }
+  }
+}
+
+Vue.prototype.$cytoscape = VueCyObj
+
+export { VueCyObj }
+
+export default {
+  props: {
+    config: {
+      type: Object,
+      default: null
+    },
+    preConfig: {
+      type: Function,
+      default: null
+    },
+    afterCreated: {
+      type: Function,
+      default: null
+    },
+    elementAdded: {
+      type: Function,
+      default: null
+    },
+    elementRemoved: {
+      type: Function,
+      default: null
+    },
+    debug: Boolean,
+    reflection: Boolean
+  },
+  data () {
+    return {
+      elements: []
+    }
+  },
+  created () {
+    if (this.debug) console.log('[Cytoscape] created ')
+    let els = []
+    if (this.config && this.config.elements) {
+      if (
+        this.config.elements.nodes &&
+        Array.isArray(this.config.elements.nodes)
+      ) {
+        els = [
+          ...els,
+          ...this.config.elements.nodes.map(n => ({ group: 'nodes', ...n }))
+        ]
+      }
+      if (
+        this.config.elements.edges &&
+        Array.isArray(this.config.elements.edges)
+      ) {
+        els = [
+          ...els,
+          ...this.config.elements.edges.map(n => ({
+            ...n,
+            group: 'edges',
+            data: {
+              id: n.data.id ? n.data.id : `${n.data.source}_${n.data.target}`,
+              ...n.data
+            }
+          }))
+        ]
+      }
+
+      if (Array.isArray(this.config.elements)) {
+        els = [...this.config.elements]
+      }
+    }
+
+    if (this.debug) console.log('[Cytoscape] elements set to', els)
+    this.elements = els
+  },
+  async mounted () {
+    // create a cytoscape instance using the referenced div
+    const container = this.$refs.cytoscape
+    const config = {
+      container, // container to render in
+      ...this.config // the data passed
+    }
+    VueCyObj.setConfig(config, this.preConfig, this.afterCreated)
+    const cy = await VueCyObj.instance
+    if (this.debug) console.log('[Cytoscape] cy', cy)
+    // register all the component events as cytoscape ones
+    for (const [eventType, callback] of Object.entries(this.$listeners)) {
+      cy.on(eventType, event => callback(event))
+    }
+    if (this.reflection) {
+      if (this.debug) console.log('[Cytoscape] dom reflection is on')
+      // listen on elements creation/removal, and perform the reflection here
+      cy.on('add', event => {
+        const element = {
+          group: event.target.group(),
+          data: event.target.data()
+        }
+        if (this.debug) console.log('[Cytoscape] adding element', element)
+        const { elements } = this
+        const addReflection = () => {
+          if (this.debug) console.log('[Cytoscape] [+] added element', element)
+          elements.push(element)
+        }
+        // if there is a hook, then pass the data to it
+        if (this.elementAdded) this.elementAdded(element, addReflection)
+        // otherwise, just reflect the changes here
+        else addReflection()
+      })
+      cy.on('remove', event => {
+        const id = event.target.id()
+        if (this.debug) console.log('[Cytoscape] removing element', id)
+        const { elements } = this
+        const removeReflection = () => {
+          // console.log('event removing: ', id)
+          if (this.debug) console.log('[Cytoscape] [x] removed element', id)
+          // remove the element, in place
+          elements.splice(elements.findIndex(n => n.data.id === id), 1)
+        }
+        // if there is a hook, then pass the data to it
+        if (this.elementRemoved) this.elementRemoved(id, removeReflection)
+        // otherwise, just reflect the changes here
+        else removeReflection()
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+#cytoscape {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/cylc/Graph.vue b/src/components/cylc/Graph.vue
new file mode 100644
index 0000000000..657c3384b7
--- /dev/null
+++ b/src/components/cylc/Graph.vue
@@ -0,0 +1,1462 @@
+<template>
+  <div id='holder'>
+    <SyncLoader :loading='loading' :color='color' :size='size' class='spinner'></SyncLoader>
+    <div class='switchlayout'>
+      <div>
+      <v-btn id='dagre-button' small align-center justify-center :outlined='true' name='dagre' class='dagre-button' @click='switchLayout("dagre", $event)'>DAGRE</v-btn>
+      <v-btn id='cosebilkent-button' small name='cose-bilkent' align-center justify-center :outlined='true' class='cosebilkent-button' @click='switchLayout("cose-bilkent", $event)'>COSE-BILKENT</v-btn>
+      <v-btn id='hierarchical-button' small align-center justify-center :outlined='true' class='hierarchical-button' @click='switchLayout("hierarchical", $event)'>HIERARCHICAL</v-btn>
+      <v-btn id='cola-button' small name='cola' align-center justify-center :outlined='true' class='cola-button' @click='switchLayout("cola", $event)'>COLA</v-btn>
+      <!-- <v-btn id='collapse-button' small name='collapse-all' class='collapse-all-button' align-center justify-center :outlined='true' style='cursor: pointer;' @click='collapseAll()'>collapse</v-btn> -->
+      <div id='layout' class='layout-title'>layout: {{layoutName}}</div>
+      <div id='suite' class='suite-title'>suite: {{suiteName}}</div>
+    </div>
+    </div>
+    <div class='cytoscape-navigator-overlay'>
+      <canvas></canvas>
+      <div class='cytoscape-navigatorView'></div>
+      <div class='cytoscape-navigatorOverlay'></div>
+    </div>
+    <div>
+    </div>
+    <cytoscape id='cytoscape' :pre-config='preConfig' :after-created='afterCreated' :debug='true'>
+    </cytoscape>
+  </div>
+</template>
+
+<script>
+import cytoscape from 'cytoscape'
+import cola from 'cytoscape-cola'
+import dagre from 'cytoscape-dagre'
+import coseBilkent from 'cytoscape-cose-bilkent'
+import navigator from 'cytoscape-navigator'
+import panzoom from 'cytoscape-panzoom'
+import expandCollapse from 'cytoscape-expand-collapse'
+import undoRedo from 'cytoscape-undo-redo'
+import popper from 'cytoscape-popper'
+import jquery from 'jquery'
+import SyncLoader from 'vue-spinner/src/SyncLoader.vue'
+import Tippy from 'tippy.js'
+import 'tippy.js/themes/light-border.css'
+import nodeHtmlLabel from 'cytoscape-node-html-label'
+import getUuid from 'uuid-by-string'
+import VueCytoscape from '@/components/core/Cytoscape.vue'
+import { mixin } from '@/mixins/index'
+import { debounce, each, has, isEmpty, isUndefined } from 'lodash'
+// eslint-disable-next-line no-unused-vars
+import cytoscapeService from '@/services/cytoscape.service'
+
+const QUERIES = {
+  root: `
+        {
+          workflows(ids: ["WORKFLOW_ID"]) {
+            id
+            name
+            status
+            owner
+            host
+            port
+            nodesEdges {
+              nodes {
+                id
+                label: id
+                parent: firstParent {
+                  id
+                  state
+                }
+                state
+                cyclePoint
+                task {
+                  meanElapsedTime
+                  name
+                }
+                jobs(sort: {keys: ["submit_num"], reverse: true}) {
+                  id
+                  batchSysName
+                  batchSysJobId
+                  host
+                  startedTime
+                  submittedTime
+                  finishedTime
+                  state
+                  submitNum
+                }
+              }
+              edges {
+                id
+                source
+                target
+                label: id
+                cond
+                suicide
+              }
+            }
+          }
+        }
+    `
+}
+
+let ur = {}
+let layoutOptions = {}
+let tippy
+const elements = []
+const nodeOptions = {
+  normal: {
+    bgColor: '#444'
+  },
+  selected: {
+    bgColor: 'yellow'
+  },
+  active: {
+    bgColor: 'yellow'
+  }
+}
+
+const edgeOptions = {
+  normal: {
+    lineColor: '#777'
+  },
+  selected: {
+    lineColor: 'blue'
+  }
+}
+const config = {}
+
+const states = Object.freeze({
+  EXPIRED: { state: 'expired', icon: 'baseline-donut_large-24px.svg', colour: '#fefaff' },
+  FAILED: { state: 'failed', icon: 'outline-cancel-24px.svg', colour: '#ff3a2b' },
+  QUEUED: { state: 'queued', icon: 'baseline-donut_large-24px.svg', colour: '#fff138' },
+  READY: { state: 'ready', icon: 'outline-radio_button_unchecked-24px.svg', colour: '#7093FF' },
+  RETRYING: { state: 'retrying', icon: 'outline-refresh-24px.svg', colour: '#ff3a2b' },
+  RUNNING: { state: 'running', icon: 'outline-adjust-24px.svg', colour: '#4ab7ff' },
+  SUBFAILED: { state: 'subfailed', icon: 'outline-filter_tilt_shift-24px.svg', colour: '#d453ff' },
+  SUBMITTED: { state: 'submitted', icon: 'outline-adjust-24px.svg', colour: '#9ef9ff' },
+  SUCCEEDED: { state: 'succeeded', icon: 'outline-radio_button_unchecked-24px.svg', colour: '#31ff53' },
+  WAITING: { state: 'waiting', icon: 'outline-radio_button_unchecked-24px.svg', colour: '#666' },
+  DEFAULT: { state: 'default', icon: 'baseline-donut_large-24px.svg', colour: '#555' },
+  UNDEFINED: { state: 'UNDEFINED', icon: '', colour: '#444' }
+})
+
+const dagreOptions = {
+  name: 'dagre',
+  // dagre algo options, uses default value on undefined
+  nodeSep: 140, // the separation between adjacent nodes in the same rank
+  edgeSep: 30, // the separation between adjacent edges in the same rank
+  rankSep: 140, // the separation between adjacent nodes in the same rank
+  rankDir: 'TB', // 'TB' for top to bottom flow, 'LR' for left to right
+  // eslint-disable-next-line no-unused-vars
+  minLen: function (edge) {
+    return 1
+  }, // number of ranks to keep between the source and target of the edge
+  // eslint-disable-next-line no-unused-vars
+  edgeWeight: function (edge) {
+    return 1
+  }, // higher weight edges are generally made shorter and straighter than lower weight edges
+  // general layout options
+  fit: false, // whether to fit to viewport
+  padding: 150, // fit padding
+  spacingFactor: 1.2, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
+  animate: false, // whether to transition the node positions
+  animationDuration: 500, // duration of animation in ms if enabled
+  animationEasing: undefined, // easing of animation if enabled
+  boundingBox: undefined, // constrain layout bounds { x1, y1, x2, y2 } or { x1, y1, w, h }
+  ready: function () {
+    this.layoutReady = true
+    this.layoutStopped = false
+  },
+  stop: function () {
+    this.layoutStopped = true
+    this.layoutReady = false
+  }
+}
+
+const coseBilkentOptions = {
+  name: 'cose-bilkent',
+  ready: function () {
+    this.layoutReady = true
+    this.layoutStopped = false
+  },
+  stop: function () {
+    this.layoutStopped = true
+    this.layoutReady = false
+  },
+  nodeDimensionsIncludeLabels: false, // Whether to include labels in node dimensions. Useful for avoiding label overlap
+  refresh: 30, // number of ticks per frame higher is faster but more jerky
+  fit: false, // Whether to fit the network view after when done
+  padding: 10, // Padding on fit
+  randomize: true, // Whether to enable incremental mode
+  nodeRepulsion: 4500, // Node repulsion (non overlapping) multiplier
+  idealEdgeLength: 150, // Ideal (intra-graph) edge length
+  edgeElasticity: 0.45, // Divisor to compute edge forces
+  nestingFactor: 0.1, // Nesting factor (multiplier) to compute ideal edge length for inter-graph edges
+  gravity: 0.25, // Gravity force (constant)
+  numIter: 2500, // Maximum number of iterations to perform
+  tile: true, // Whether to tile disconnected nodes
+  animate: 'end', // Type of layout animation. The option set is {'during', 'end', false}
+  tilingPaddingVertical: 10, // Amount of vertical space to put between degree zero nodes during tiling (can also be a function)
+  tilingPaddingHorizontal: 10, // Amount of horizontal space to put between degree zero nodes during tiling (can also be a function)
+  gravityRangeCompound: 1.5, // Gravity range (constant) for compounds
+  gravityCompound: 1.0, // Gravity force (constant) for compounds
+  gravityRange: 3.8, // Gravity range (constant)
+  initialEnergyOnIncremental: 0.5 // Initial cooling factor for incremental layout
+}
+
+const hierarchicalOptions = {
+  name: 'breadthfirst',
+  fit: false, // whether to fit the viewport to the graph
+  directed: true, // whether the tree is directed downwards (or edges can point in any direction if false)
+  padding: 30, // padding on fit
+  circle: false, // put depths in concentric circles if true, put depths top down if false
+  grid: false, // whether to create an even grid into which the DAG is placed (circle:false only)
+  spacingFactor: 1.75, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
+  boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+  avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
+  nodeDimensionsIncludeLabels: true, // Excludes the label when calculating node bounding boxes for the layout algorithm
+  roots: undefined, // the roots of the trees
+  maximal: false, // whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)
+  animate: false, // whether to transition the node positions
+  animationDuration: 500, // duration of animation in ms if enabled
+  animationEasing: undefined, // easing of animation if enabled,
+  animateFilter: function (node, i) { return true },
+  ready: function () {
+    this.layoutReady = true
+    this.layoutStopped = false
+  },
+  stop: function () {
+    this.layoutStopped = true
+    this.layoutReady = false
+  },
+  transform: function (node, position) { return position } // transform a given node position. Useful for changing flow direction in discrete layouts
+}
+
+const colaLayoutOptions = {
+  name: 'cola',
+  animate: true, // whether to show the layout as it's running
+  refresh: 1, // number of ticks per frame; higher is faster but more jerky
+  maxSimulationTime: 2000, // max length in ms to run the layout
+  ungrabifyWhileSimulating: true, // so you can't drag nodes during layout
+  fit: false, // on every layout reposition of nodes, fit the viewport
+  padding: 30, // padding around the simulation
+  boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+  nodeDimensionsIncludeLabels: true, // whether labels should be included in determining the space used by a node
+  // layout event callbacks
+  ready: function () {
+    this.layoutReady = true
+    this.layoutStopped = false
+  },
+  stop: function () {
+    this.layoutReady = false
+    this.layoutStopped = true
+  },
+  // positioning options
+  randomize: false, // use random node positions at beginning of layout
+  avoidOverlap: true, // if true, prevents overlap of node bounding boxes
+  handleDisconnected: true, // if true, avoids disconnected components from overlapping
+  convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
+  // eslint-disable-next-line no-unused-vars
+  nodeSpacing: function (node) {
+    return 100
+  }, // extra spacing around nodes
+  flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
+  alignment: undefined, // relative alignment constraints on nodes, e.g. function( node ){ return { x: 0, y: 1 } }
+  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes, e.g. [{'axis':'y', 'left':node1, 'right':node2, 'gap':25}]
+
+  // different methods of specifying edge length
+  // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
+  edgeLength: undefined, // sets edge length directly in simulation
+  edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
+  edgeJaccardLength: undefined, // jaccard edge length in simulation
+
+  // iterations of cola algorithm; uses default values on undefined
+  unconstrIter: undefined, // unconstrained initial layout iterations
+  userConstIter: undefined, // initial layout iterations with user-specified constraints
+  allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
+
+  // infinite layout options
+  infinite: false // overrides all other options for a forces-all-the-time mode
+}
+
+// eslint-disable-next-line no-unused-vars
+const popperOptions = {
+  content: 'test data',
+  renderedPosition: 'bottom',
+  renderedDimensions: undefined,
+  popper: undefined,
+  closeOnClickOutside: true
+}
+
+let expandCollapseOptions = {
+  layoutBy: undefined, // to rearrange after expand/collapse. It's just layout options or whole layout function. Choose your side!
+  // recommended usage: use cose-bilkent layout with randomize: false to preserve mental map upon expand/collapse
+  fisheye: true, // whether to perform fisheye view after expand/collapse you can specify a function too
+  animate: true, // whether to animate on drawing changes you can specify a function too
+  ready: function () {}, // callback when expand/collapse initialized
+  undoable: true, // and if undoRedoExtension exists,
+  cueEnabled: true, // Whether cues are enabled
+  expandCollapseCuePosition: 'top-left', // default cue position is top left you can specify a function per node too
+  expandCollapseCueSize: 20, // size of expand-collapse cue
+  expandCollapseCueLineSize: 16, // size of lines used for drawing plus-minus icons
+  expandCueImage: undefined, // image of expand icon if undefined draw regular expand cue
+  collapseCueImage: undefined, // image of collapse icon if undefined draw regular collapse cue
+  expandCollapseCueSensitivity: 1 // sensitivity of expand-collapse cues,
+}
+
+const expandCollapseOptionsUndefined = {
+  layoutBy: undefined, // to rearrange after expand/collapse. It's just layout options or whole layout function. Choose your side!
+  // recommended usage: use cose-bilkent layout with randomize: false to preserve mental map upon expand/collapse
+  fisheye: true, // whether to perform fisheye view after expand/collapse you can specify a function too
+  animate: false, // whether to animate on drawing changes you can specify a function too
+  ready: function () {}, // callback when expand/collapse initialized
+  undoable: true, // and if undoRedoExtension exists,
+  cueEnabled: true, // Whether cues are enabled
+  expandCollapseCuePosition: 'top-left', // default cue position is top left you can specify a function per node too
+  expandCollapseCueSize: 20, // size of expand-collapse cue
+  expandCollapseCueLineSize: 16, // size of lines used for drawing plus-minus icons
+  expandCueImage: undefined, // image of expand icon if undefined draw regular expand cue
+  collapseCueImage: undefined, // image of collapse icon if undefined draw regular collapse cue
+  expandCollapseCueSensitivity: 1 // sensitivity of expand-collapse cues
+}
+
+const expandCollapseOptionsCoseBilkent = {
+  layoutBy: {
+    name: 'cose-bilkent',
+    animate: 'end',
+    randomize: false,
+    fit: false
+  },
+  // recommended usage: use cose-bilkent layout with randomize: false to preserve mental map upon expand/collapse
+  fisheye: true, // whether to perform fisheye view after expand/collapse you can specify a function too
+  animate: true, // whether to animate on drawing changes you can specify a function too
+  ready: function () {}, // callback when expand/collapse initialized
+  undoable: true, // and if undoRedoExtension exists,
+  cueEnabled: true, // Whether cues are enabled
+  expandCollapseCuePosition: 'top-left', // default cue position is top left you can specify a function per node too
+  expandCollapseCueSize: 20, // size of expand-collapse cue
+  expandCollapseCueLineSize: 16, // size of lines used for drawing plus-minus icons
+  expandCueImage: undefined, // image of expand icon if undefined draw regular expand cue
+  collapseCueImage: undefined, // image of collapse icon if undefined draw regular collapse cue
+  expandCollapseCueSensitivity: 1 // sensitivity of expand-collapse cues
+}
+
+const expandCollapseOptionsCola = {
+  layoutBy: {
+    name: 'cose-bilkent',
+    animate: 'end',
+    randomize: false,
+    fit: false
+  },
+  // recommended usage: use cose-bilkent layout with randomize: false to preserve mental map upon expand/collapse
+  fisheye: false, // whether to perform fisheye view after expand/collapse you can specify a function too
+  animate: false, // whether to animate on drawing changes you can specify a function too
+  ready: function () {}, // callback when expand/collapse initialized
+  undoable: true, // and if undoRedoExtension exists,
+  cueEnabled: true, // Whether cues are enabled
+  expandCollapseCuePosition: 'top-left', // default cue position is top left you can specify a function per node too
+  expandCollapseCueSize: 20, // size of expand-collapse cue
+  expandCollapseCueLineSize: 16, // size of lines used for drawing plus-minus icons
+  expandCueImage: undefined, // image of expand icon if undefined draw regular expand cue
+  collapseCueImage: undefined, // image of collapse icon if undefined draw regular collapse cue
+  expandCollapseCueSensitivity: 1 // sensitivity of expand-collapse cues
+}
+
+export default {
+  name: 'Graph',
+  props: ['workflowid'],
+  data: function () {
+    return {
+      isConnected: false,
+      config,
+      elements,
+      graphData: {
+        nodes: [],
+        edges: []
+      },
+      i: 1,
+      // vue-spinner
+      color: '#5e9aff',
+      height: '35px',
+      width: '4px',
+      margin: '2px',
+      radius: '2px',
+      size: '1em',
+      loading: true,
+      // layout variables
+      status: 'pending',
+      layoutName: 'dagre',
+      layoutStopped: true,
+      layoutReady: false,
+      // elements
+      nodesEdges: [],
+      workflows: [],
+      edges: [],
+      subscriptions: {},
+      workflowId: '',
+      workflowOwner: '',
+      workflowName: '',
+      suiteName: ''
+    }
+  },
+  watch: {
+    graphData: debounce(function (newVal) {
+      this.debouncer.call()
+    }, 100),
+
+    layoutName: {
+      handler (value) {
+        this.updateLayout(value)
+      }
+    },
+
+    workflows: {
+      handler: function (newval, oldval) {
+        this.workflowUpdated(newval)
+      },
+      deep: true
+    }
+  },
+
+  mixins: [mixin],
+
+  metaInfo () {
+    return {
+      title: this.getPageTitle('App.graph', { name: this.workflowId })
+    }
+  },
+
+  beforeRouteLeave (to, from, next) {
+    if (tippy) {
+      tippy.hide()
+    }
+    next()
+  },
+
+  beforeDestroy () {
+    cytoscapeService.unregister(this)
+  },
+
+  mounted () {
+    console.debug(`MOUNTED called, status: ${this.status}`)
+    this.handleMounted()
+    this.$store.watch((store) => {
+      this.workflows = store.workflows
+    })
+  },
+
+  created (cy) {
+    console.debug('CREATED')
+    this.suiteName = this.$route.params.workflowid
+    this.workflowId = this.$route.params.workflowid
+    cytoscapeService.register(
+      this,
+      {
+        activeCallback: this.setActive
+      }
+    )
+    this.subscribe('root')
+  },
+
+  components: {
+    SyncLoader,
+    cytoscape: VueCytoscape
+  },
+
+  methods: {
+    subscribe (queryName) {
+      const id = cytoscapeService.subscribe(
+        this,
+        QUERIES[queryName].replace('WORKFLOW_ID', this.workflowId)
+      )
+      if (!(queryName in this.subscriptions)) {
+        this.subscriptions[queryName] = {
+          id
+        }
+      }
+    },
+
+    unsubscribe (queryName) {
+      if (queryName in this.subscriptions) {
+        cytoscapeService.unsubscribe(
+          this.subscriptions[queryName].id
+        )
+      }
+    },
+
+    async workflowUpdated (workflows) {
+      try {
+        const elements = {
+          nodes: [],
+          edges: []
+        }
+
+        if (!isUndefined(workflows)) {
+          each(workflows, (value, key) => {
+            each(value, (workflow, key) => {
+              if (!isEmpty(workflow.owner)) {
+                this.workflowOwner = workflow.owner
+              }
+              if (!isEmpty(workflow.name)) {
+                this.workflowName = workflow.name
+              }
+              if (has(workflow.nodesEdges, 'edges') && !isUndefined(workflow.nodesEdges.edges)) {
+                elements.edges = this.getEdges(workflow.nodesEdges.edges)
+              }
+              if (has(workflow.nodesEdges, 'nodes') && !isUndefined(workflow.nodesEdges.nodes)) {
+                elements.nodes = this.getNodes(workflow.nodesEdges.nodes)
+              }
+            })
+          })
+        }
+        // console.debug('elements ==>>>> ', elements)
+        isEmpty(elements) ? console.warn('gdata is empty or undefined') : this.graphData = elements
+      } catch (error) {
+        console.error('workflowUpdated error: ', error)
+      }
+    },
+
+    getNodes (nodes) {
+      try {
+        const nodesArray = []
+        let nodeObj = {}
+        let parentId = ''
+        let todo = 0
+        let jobsArray = []
+        each(nodes, (node, key) => {
+          nodeObj = {
+            data: {
+              id: '',
+              name: '',
+              state: 'undefined',
+              parent: '',
+              label: '',
+              shape: 'ellipse',
+              runpercent: 0,
+              todo: 0,
+              running: 0,
+              cyclepoint: '',
+              submittedtime: '',
+              starttime: '',
+              finishtime: '',
+              jobs: '',
+              jobsarray: [],
+              status: ''
+            },
+            position: {
+
+            },
+            group: 'nodes',
+            removed: false,
+            selected: false,
+            selectable: true,
+            locked: false,
+            grabbable: true,
+            classes: ''
+          }
+          if (has(node, 'task') && !isEmpty(node.task) && has(node.task, 'name') && !isEmpty(node.task.name)) {
+            nodeObj.data.label = node.task.name
+          }
+          has(node, 'id') && !isEmpty(node.id) ? nodeObj.data.id = getUuid(node.id) : console.warn('workflowUpdated - node id is empty')
+          has(node, 'state') && !isEmpty(node.state) ? nodeObj.data.state = node.state : nodeObj.state = 'undefined'
+          has(node, 'status') && !isEmpty(node.status) ? nodeObj.data.status = node.status : nodeObj.status = 'undefined'
+          if (has(node, 'runpercent') && !isEmpty(node.runpercent) && (parseInt(node.runpercent) > 0)) {
+            nodeObj.data.runpercent = parseInt(node.runpercent)
+            nodeObj.running = nodeObj.data.runpercent
+            todo = 100 - parseInt(nodeObj.data.runpercent)
+            nodeObj.data.todo = todo
+          }
+          if (has(node, 'runpercent') && !isEmpty(node.runpercent) && (parseInt(node.runpercent) > 0)) {
+            nodeObj.data.runpercent = parseInt(node.runpercent)
+            nodeObj.running = nodeObj.data.runpercent
+            todo = (100 - parseInt(node.runpercent))
+            nodeObj.data.todo = todo
+          }
+          if (has(node.parent, 'id') && !isEmpty(node.parent.id)) {
+            parentId = getUuid(node.parent.id)
+            nodeObj.data.parent = parentId
+          }
+          if (has(node, 'cyclePoint') && !isEmpty(node.cyclePoint)) {
+            nodeObj.data.cyclepoint = node.cyclePoint
+          }
+          if (has(node, 'jobs') && !isEmpty(node.jobs)) {
+            jobsArray = this.getJobs(node.jobs)
+            nodeObj.data.jobsarray = jobsArray
+            const joblength = node.jobs.length
+            nodeObj.data.jobs = String(node.jobs.length)
+            nodeObj.data.submittedtime = jobsArray[0].submittedTime
+            nodeObj.data.starttime = jobsArray[0].startedTime
+            nodeObj.data.finishtime = jobsArray[joblength - 1].finishedTime
+          }
+          nodesArray.push(nodeObj)
+        })
+        // console.debug('NODES ::: ', nodesArray)
+        return nodesArray
+      } catch (error) {
+        console.error('getNodes error: ', error)
+      }
+    },
+
+    getEdges (edges) {
+      try {
+        const edgesArray = []
+        let edgeObj = {}
+        each(edges, (edge, key) => {
+          edgeObj = {
+            data: {
+              id: '',
+              source: '',
+              target: '',
+              label: '',
+              owner: '',
+              name: ''
+            },
+            position: {
+
+            },
+            group: 'edges',
+            removed: false,
+            selected: false,
+            selectable: true,
+            locked: false,
+            grabbable: true,
+            classes: ''
+          }
+          has(edge, 'id') && !isEmpty(edge.id) ? edgeObj.data.id = getUuid(edge.id) : console.debug('workflowUpdated - edge id is empty')
+          has(edge, 'source') && !isEmpty(edge.source) ? edgeObj.data.source = getUuid(edge.source) : edgeObj.source = undefined
+          has(edge, 'target') && !isEmpty(edge.target) ? edgeObj.data.target = getUuid(edge.target) : edge.target = undefined
+          if (!isEmpty(this.workflowOwner)) {
+            edgeObj.data.owner = this.workflowOwner
+          }
+          if (!isEmpty(this.workflowName)) {
+            edgeObj.data.name = this.workflowName
+          }
+          has(edge, 'label') && !isEmpty(edge.label) ? edgeObj.data.label = edge.label : edgeObj.label = ''
+          edgeObj.data.source !== undefined || edgeObj.data.target !== undefined ? edgesArray.push(edgeObj)
+            : console.debug('skipping adding edge with empty source or target')
+        })
+        // console.debug('EDGES ::: ', edgesArray)
+        return edgesArray
+      } catch (error) {
+        console.error('getEdges error: ', error)
+      }
+    },
+
+    getJobs (jobs) {
+      const jobsArray = []
+      // const jobObj = {
+      //     batchSysName: '',
+      //     batchSysJobId: '',
+      //     host: '',
+      //     startedTime: '',
+      //     submittedTime: '',
+      //     finishedTime: '',
+      //     state: '',
+      //     submitNum: '',
+      // }
+      each(jobs, (job, key) => {
+        // if (has(job, 'submittedTime') && !isEmpty(job.submittedTime)) {
+        // jobObj.submittedtime = job.submittedTime
+        // console.debug('SUBMITTED TIME > ' + job.submittedTime)
+        // console.debug('SUBMIT NUMBER > ' + job.submitNum)
+        // console.debug('STARTED TIME > ' + job.startedTime)
+        // console.debug('FINISHED TIME > ' + job.finishedTime)
+        // console.debug('batchSysJobId > ' + job.batchSysJobId)
+        // console.debug('batchSysName > ' + job.batchSysName)
+        jobsArray.push(job)
+        // }
+      })
+      return jobsArray
+    },
+
+    changeLayout (value) {
+      this.layoutName = value
+    },
+
+    async handleMounted () {
+      try {
+        this.status = 'success'
+      } catch (error) {
+        console.error('handleMounted error: ', error)
+        this.status = 'error'
+      }
+    },
+
+    async preConfig (cytoscape) {
+      // cytoscape: this is the cytoscape constructor
+      try {
+        console.debug('PRE-CONFIG')
+        cytoscape.use(cola)
+        cytoscape.use(dagre)
+        cytoscape.use(coseBilkent)
+        this.cy = cytoscape({
+          container: document.getElementById('cytoscape'),
+          elements: this.graphData
+        })
+        this.debouncer = debounce(this.updateGraph, 100)
+      } catch (error) {
+        console.error('preConfig error: ', error)
+      }
+    },
+
+    async afterCreated (cy) {
+      try {
+      // load graph data and run layout
+        layoutOptions = dagreOptions
+        expandCollapseOptions = expandCollapseOptionsUndefined
+        const loaded = await this.initialise(cy)
+        loaded ? this.loading = false : console.error('there was an error loading the graph view')
+      } catch (error) {
+        console.error('afterCreated error', error)
+      }
+    },
+
+    async registerExtensions (instance) {
+      try {
+        // register extensions
+        if (typeof cytoscape('core', 'navigator') !== 'function') {
+          console.debug('registering navigator')
+          navigator(cytoscape)
+        }
+
+        if (typeof cytoscape('core', 'panzoom') !== 'function') {
+          console.debug('registering panzoom')
+          panzoom(cytoscape)
+        }
+
+        if (typeof cytoscape('core', 'undoRedo') !== 'function') {
+          console.debug('registering undoRedo')
+          undoRedo(cytoscape)
+        }
+
+        if (typeof cytoscape('core', 'expandCollapse') !== 'function') {
+          console.debug('registering expandCollapse with jquery')
+          expandCollapse(cytoscape, jquery)
+        }
+
+        if (typeof cytoscape('core', 'popper') !== 'function') {
+          console.debug('registering popper')
+          popper(cytoscape)
+        }
+
+        if (typeof cytoscape('core', 'nodeHtmlLabel') !== 'function') {
+          console.debug('registering nodeHtmlLabel')
+          nodeHtmlLabel(cytoscape)
+        }
+      } catch (error) {
+        console.error('registerExtensions error', error)
+      }
+    },
+
+    async updateStyle (data) {
+      try {
+        return this.updateConfig(data)
+      } catch (error) {
+        console.error('updateStyle error: ', error)
+      }
+    },
+
+    async updateConfig (data) {
+      try {
+        const config = {
+          autounselectify: true,
+          boxSelectionEnabled: true,
+          layout: {
+            name: 'dagre',
+            textureOnViewport: false,
+            hideEdgesOnViewport: true
+          },
+          style: [
+            {
+              selector: 'node',
+              css: {
+                'background-image': (node) => {
+                  let icon = states.DEFAULT.icon
+                  const nodeState = String(node.data('state'))
+                  const STATE = nodeState.toUpperCase()
+                  !isEmpty(STATE) && !isUndefined(STATE) && STATE !== 'UNDEFINED' ? icon = states[STATE].icon : icon = states.DEFAULT.icon
+                  const path = require('@/../public/img/' + String(icon))
+                  return path
+                },
+                'background-fit': 'contain contain',
+                'background-image-opacity': (node) => {
+                  return has(data, 'runpercent') && !isEmpty(data('runpercent')) && data('runpercent') > 0 ? 1.0 : 0.6
+                },
+                'background-color': (node) => {
+                  let colour = states.DEFAULT.colour
+                  const nodeState = String(node.data('state'))
+                  const STATE = nodeState.toUpperCase()
+                  !isEmpty(STATE) && !isUndefined(STATE) && STATE !== 'UNDEFINED' ? colour = states[STATE].colour : colour = states.DEFAULT.colour
+                  return colour
+                },
+                // content: 'data(label)',
+                'font-family': 'Avenir, Helvetica, Arial, sans-serif',
+                color: '#333',
+                'text-max-width': '.5em',
+                'text-wrap': 'wrap',
+                'text-valign': 'top',
+                'text-halign': 'right',
+                'line-height': 1.1,
+                'text-margin-x': 5,
+                'font-size': '.8em',
+                'min-zoomed-font-size': '.8em',
+                'border-color': '#333',
+                'border-width': '.1em',
+                shape: 'data(shape)',
+                width: '6em',
+                height: '6em',
+                // The diameter of the pie, measured as a percent of node size (e.g. 100%) or an absolute length (e.g. 25px).
+                'pie-size': '5.6em',
+                'pie-1-background-color': states.RUNNING.colour,
+                'pie-1-background-size': 'mapData(running, 0, 100, 0, 100)',
+                'pie-1-background-opacity': 0.5,
+                'pie-2-background-color': '#333',
+                'pie-2-background-size': 'mapData(todo, 0, 100, 0, 100)',
+                'pie-2-background-opacity': 0.5
+              }
+            },
+            {
+              selector: 'edge',
+              css: {
+                width: 2,
+                // content: 'data(label)',
+                'curve-style': 'unbundled-bezier',
+                'target-arrow-shape': 'triangle',
+                'line-color': edgeOptions.normal.lineColor,
+                'target-arrow-color': '#222',
+                opacity: 0.8,
+                'target-distance-from-node': 10
+              }
+            },
+            {
+              selector: 'edge.selected',
+              style: {
+                'curve-style': 'bezier',
+                width: 4,
+                lineColor: edgeOptions.selected.lineColor,
+                'target-arrow-color': edgeOptions.selected.lineColor
+              }
+            },
+            {
+              selector: 'node.highlight',
+              style: {
+                'border-color': '#fff',
+                'border-width': '2px'
+              }
+            },
+            {
+              selector: 'node.semitransp',
+              style: { opacity: '0.5' }
+            },
+            {
+              selector: 'node.selected',
+              style: { 'background-color': nodeOptions.selected.bgColor }
+            },
+            {
+              selector: 'edge.highlight',
+              style: { 'mid-target-arrow-color': 'yellow' }
+            },
+            {
+              selector: 'edge.semitransp',
+              style: { opacity: '0.2' }
+            },
+            {
+              selector: 'node.cy-expand-collapse-collapsed-node',
+              style: {
+                'background-color': '#333',
+                shape: 'rectangle'
+              }
+            },
+            {
+              selector: 'edge.cy-expand-collapse-meta-edge',
+              style: {
+                'background-color': 'green',
+                shape: 'rectangle'
+              }
+            },
+            {
+              selector: ':parent',
+              style: {
+                'background-opacity': 0.2,
+                'background-fit': 'contain contain',
+                'background-color': '#b7c0e8',
+                'border-color': '#444',
+                'border-width': '2px',
+                'pie-size': '5.6em'
+              }
+            },
+            {
+              selector: ':child',
+              style: {
+                // 'background-opacity': .15,
+                // 'background-image-opacity': .15,
+                // 'background-color': '#b7c0e8',
+                'border-color': '#444',
+                'border-width': '2px'
+              }
+            }
+          ],
+          elements: []
+        }
+
+        return config
+      } catch (error) {
+        console.error('config error: ', error)
+      }
+    },
+
+    // eslint-disable-next-line no-unused-vars
+    async runlayout (instance) {
+      try {
+        await instance
+          .elements()
+          .layout(layoutOptions)
+          .run()
+        return instance
+      } catch (error) {
+        console.error('runlayout error: ', error)
+      }
+    },
+
+    async setupUndo (instance) {
+      try {
+        ur = instance.undoRedo()
+        return ur
+      } catch (error) {
+        console.error('setupUndo error', error)
+      }
+    },
+
+    async setupExpandCollapse (instance) {
+      try {
+        expandCollapseOptions = expandCollapseOptionsCoseBilkent
+        instance.expandCollapse(expandCollapseOptions)
+        layoutOptions = dagreOptions
+        return instance
+      } catch (error) {
+        console.error('setupExpandCollapse error', error)
+      }
+    },
+
+    async initialise (instance) {
+      try {
+        console.debug('INITIALISING')
+        const stylesheet = await this.updateStyle(this.graphData)
+        instance = cytoscape({
+          container: document.getElementById('cytoscape'),
+          elements: undefined,
+          style: stylesheet.style
+        })
+        this.cy = await this.getGraph(instance)
+        this.getInteractivity(instance)
+        this.activateKeys(instance)
+        this.setHtmlLabel(instance, states)
+        return true
+      } catch (error) {
+        console.error('initialise error', error)
+      }
+    },
+
+    async getGraph (instance) {
+      try {
+        console.debug('GETGRAPH')
+        await this.registerExtensions()
+        layoutOptions = dagreOptions
+        await this.runlayout(instance)
+        await this.setupExpandCollapse(instance)
+        instance.expandCollapse(expandCollapseOptions)
+        ur = await this.setupUndo(instance)
+        this.getPanzoom(instance)
+        this.getNavigator(instance)
+        this.getUndoRedo(instance)
+        return instance
+      } catch (error) {
+        console.error('getGraph error', error)
+      }
+    },
+
+    async updateGraph () {
+      try {
+        if (tippy) {
+          tippy.hide()
+        }
+        const cy = this.cy
+        cy.elements().remove()
+        const stylesheet = await this.updateStyle(this.graphData)
+        cy.style().fromJson(stylesheet.style).update()
+        cy.add(this.graphData)
+        this.getUndoRedo(cy)
+        cy.elements()
+          .layout(layoutOptions)
+          .run()
+      } catch (error) {
+        console.error('updateGraph error: ', error)
+      }
+    },
+
+    getPanzoom (instance) {
+      try {
+        const panzoomdefaults = {
+          zoomFactor: 0.1, // zoom factor per zoom tick
+          zoomDelay: 45, // how many ms between zoom ticks
+          minZoom: 0.1, // min zoom level
+          maxZoom: 10, // max zoom level
+          fitPadding: 50, // padding when fitting
+          panSpeed: 10, // how many ms in between pan ticks
+          panDistance: 100, // max pan distance per tick
+          panDragAreaSize: 75, // the length of the pan drag box in which the vector for panning is calculated (bigger = finer control of pan speed and direction)
+          panMinPercentSpeed: 0.25, // the slowest speed we can pan by (as a percent of panSpeed)
+          panInactiveArea: 8, // radius of inactive area in pan drag box
+          panIndicatorMinOpacity: 0.5, // min opacity of pan indicator (the draggable nib) scales from this to 1.0
+          zoomOnly: false, // a minimal version of the ui only with zooming (useful on systems with bad mousewheel resolution)
+          fitSelector: undefined, // selector of elements to fit
+          animateOnFit: function () {
+            // whether to animate on fit
+            return false
+          },
+          fitAnimationDuration: 1000 // duration of animation on fit
+        }
+        instance.panzoom(panzoomdefaults)
+        return instance.panzoom
+      } catch (error) {
+        console.error('getPanzoom error', error)
+      }
+    },
+
+    getNavigator (instance) {
+      try {
+        instance.navigator({
+          container: '.cytoscape-navigator-overlay',
+          viewLiveFramerate: 0, // set false to update graph pan only on drag end set 0 to do it instantly set a number (frames per second) to update not more than N times per second
+          thumbnailEventFramerate: 30, // max thumbnail's updates per second triggered by graph updates
+          thumbnailLiveFramerate: false, // max thumbnail's updates per second. Set false to disable
+          dblClickDelay: 200, // milliseconds
+          removeCustomContainer: true, // destroy the container specified by user on plugin destroy
+          rerenderDelay: 100 // ms to throttle rerender updates to the panzoom for performance
+        })
+        return instance.navigator
+      } catch (error) {
+        console.error('getPanzoom error', error)
+      }
+    },
+
+    getUndoRedo (instance) {
+      try {
+        const undoRedoOptions = {
+          isDebug: true, // Debug mode for console messages
+          actions: {}, // actions to be added
+          undoableDrag: true, // Whether dragging nodes are undoable can be a function as well
+          stackSizeLimit: undefined, // Size limit of undo stack, note that the size of redo stack cannot exceed size of undo stack
+          ready: function () {
+            // callback when undo-redo is ready
+            this.loading = false
+          }
+        }
+        instance.undoRedo(undoRedoOptions)
+        return instance.undoRedo
+      } catch (error) {
+        console.error('getUndoRedo error', error)
+      }
+    },
+
+    getConstants (instance) {
+      // hierarchical clustering internal needs cy instance
+      // eslint-disable-next-line no-unused-vars
+      const hca = instance.elements().hca({
+        mode: 'threshold',
+        threshold: 25,
+        distance: 'euclidian', // euclidian, squaredEuclidian, manhattan, max
+        preference: 'mean', // median, mean, min, max,
+        damping: 0.8, // [0.5 - 1]
+        minIterations: 100, // [optional] The minimum number of iteraions the algorithm will run before stopping (default 100).
+        maxIterations: 1000, // [optional] The maximum number of iteraions the algorithm will run before stopping (default 1000).
+        attributes: [
+          function (node) {
+            return node.data('weight')
+          }
+        ]
+      })
+    },
+
+    setHtmlLabel (instance, states) {
+      try {
+        instance.nodeHtmlLabel([{
+          query: 'node',
+          cssClass: 'cy-title',
+          valign: 'bottom',
+          halign: 'right',
+          valignBox: 'bottom',
+          halignBox: 'right'
+        },
+        {
+          query: 'node',
+          tpl: (data) => {
+            const jobs = data.jobsarray
+            let JOBSTATE
+            // eslint-disable-next-line no-unused-vars
+            let jobsGrid = ''
+            let index = 0
+            const offset = 22
+            let jobSquare
+            let xoffset = offset * -1
+            let yoffset = 0
+
+            each(jobs, (job, key) => {
+              JOBSTATE = String(job.state).toUpperCase()
+              index++
+              xoffset += offset
+              if (index % 3 === 0) {
+                xoffset = 0
+                yoffset += offset
+              }
+              jobSquare =
+              '<svg width="200" height="130" viewBox="0 0 200 130" xmlns="http://www.w3.org/2000/svg">' +
+              '<rect x="' + xoffset + '" y="' + yoffset + '" width="20" height="20" rx="4" ry="4"  stroke="" fill="' + states[JOBSTATE].colour + '" fill-opacity="1" stroke-opacity="0.8"/>'
+              jobsGrid = jobsGrid.concat('', jobSquare)
+            })
+            return '<div style="display:relative margin-top: 3em; class="cy-title"><span class="cy-title__label">' + data.label +
+            '</span><br>' +
+            '<span  class="cy-title__cyclepoint">' +
+            data.cyclepoint +
+            '</span><br>' +
+            jobsGrid +
+            '</div>'
+          }
+        }
+        ])
+      } catch (error) {
+        console.error('setHtmlLabel error ', error)
+      }
+    },
+
+    getInteractivity (instance) {
+      try {
+        instance.nodeHtmlLabel().on('tap', (event) => {
+          console.debug('html label tapped ' + event.target)
+        })
+      } catch (error) {
+        console.error('interactivity expandcollapse.beforecollapse error ', error)
+      }
+
+      try {
+        instance.nodes().on('expandcollapse.beforecollapse', (event) => {
+          if (tippy) {
+            tippy.hide()
+          }
+        })
+      } catch (error) {
+        console.error('interactivity expandcollapse.beforecollapse error ', error)
+      }
+
+      try {
+        instance.nodes().on('expandcollapse.beforeexpand', (event) => {
+          if (tippy) {
+            tippy.hide()
+          }
+        })
+      } catch (error) {
+        console.error('interactivity expandcollapse.beforeexpand error ', error)
+      }
+
+      try {
+        instance.on('tap', 'node', (event) => {
+          const node = event.target
+          console.debug('tapped ' + node.id(), node.data())
+          const ref = node.popperRef()
+          tippy = new Tippy(ref, {
+            content: () => {
+              const content = document.createElement('div')
+              content.classList.add('node-tooltip')
+              const children = node.data('collapsedChildren')
+              let runpercent = 0
+              if (has(node.data, 'runpercent')) {
+                runpercent = node.data('runpercent')
+              }
+              const parent = node.data('parent')
+              const parentid = node.data('parentid')
+              console.debug('TIPPY PARENT ' + parent)
+              console.debug('TIPPY PARENTID ' + parentid)
+              let state = node.data('state')
+              let jobInfoBlock = ''
+              let jobSquare
+              const jobs = node.data('jobsarray')
+              const parentstring =
+                '<br><strong>parent <span style="color: #555;">' +
+                parent +
+                '</span></strong>'
+              const progress =
+                '<br><strong>progress <span style="color: #555;"><br>' +
+                runpercent +
+                '%</span></strong>'
+
+              each(jobs, (job, key) => {
+                let batchSysName = ''
+                let batchSysJobId = ''
+                let host = ''
+                let startedTime = ''
+                let submittedTime = ''
+                let finishedTime = ''
+                let submitNum = ''
+
+                jobSquare = '<div><div class="box ' + job.state + '"></div>   ' + job.state + '</div>'
+                jobInfoBlock += jobSquare
+
+                submitNum =
+                '<br><strong>submit number:  <span style="color: #555;">' +
+                job.submitNum +
+                '</span></strong>'
+                jobInfoBlock += submitNum
+
+                batchSysName =
+                '<br><strong>batch sytem name: <span style="color: #555;">' +
+                job.batchSysName +
+                '</span></strong>'
+                jobInfoBlock += batchSysName
+
+                batchSysJobId =
+                '<br><strong>batch sytem job id: <span style="color: #555;">' +
+                job.batchSysJobId +
+                '</span></strong>'
+                jobInfoBlock += batchSysJobId
+
+                host =
+                '<br><strong>host:  <span style="color: #555;">' +
+                job.host +
+                '</span></strong>'
+                jobInfoBlock += host
+
+                startedTime =
+                '<br><strong>started time:  <span style="color: #555;">' +
+                job.startedTime +
+                '</span></strong>'
+                jobInfoBlock += startedTime
+
+                submittedTime =
+                '<br><strong>submitted time:  <span style="color: #555;">' +
+                job.submittedTime +
+                '</span></strong>'
+                jobInfoBlock += submittedTime
+
+                finishedTime =
+                '<br><strong>finished time:  <span style="color: #555;">' +
+                job.finishedTime +
+                '</span></strong><br>'
+                jobInfoBlock += finishedTime
+                jobInfoBlock += '<hr>'
+              })
+
+              const jobblock =
+              '</div>' +
+              jobInfoBlock +
+              '</div>'
+              if (children !== undefined) {
+                state = 'compound node'
+              }
+              content.innerHTML =
+                '<div class="header"><strong>task</div></strong><br>' +
+                // '<strong>id <span style="color: #555;">' +
+                // node.data('id') +
+                // '</span></strong><br>' +
+                '<strong>name <span style="color: #555;">' +
+                node.data('label') +
+                '</span></strong><br>' +
+                '<strong>state <span style="color: #555;">' +
+                state +
+                '</span></strong>'
+              if (state === 'running') {
+                content.innerHTML += progress
+              }
+              if (parent !== undefined) {
+                content.innerHTML += parentstring
+              }
+              content.innerHTML += '<hr>'
+              content.innerHTML += '<div class="header"><strong>jobs</div></strong><br>'
+              content.innerHTML += jobblock
+              content.align = 'left'
+              return content
+            },
+            theme: 'light-border',
+            trigger: 'manual',
+            arrow: true,
+            placement: 'left',
+            hideOnClick: 'false',
+            delay: [0, 2000],
+            animation: 'fade',
+            multiple: false,
+            sticky: true,
+            flip: true,
+            flipOnUpdate: true,
+            duration: [250, 275],
+            allowHTML: true,
+            interactive: true,
+            touch: true
+          })
+          tippy.show()
+        })
+      } catch (error) {
+        console.error('interactivity tippy edge error ', error)
+      }
+
+      try {
+        instance.on('tap', 'edge', (event) => {
+          const edge = event.target
+          console.debug('tapped ' + edge.id(), edge.data())
+          edge.addClass('selected')
+          const ref = edge.popperRef()
+          tippy = new Tippy(ref, {
+            content: () => {
+              const content = document.createElement('div')
+              content.classList.add('edge-tooltip')
+              content.innerHTML =
+              '<div class="header"><strong>edge</div></strong><br>' +
+               '<strong>owner <span style="color: #555; width: 100%;">' +
+                edge.data('owner') +
+                '</span></strong><br>' +
+                '<strong>name <span style="color: #555;">' +
+                edge.data('name') +
+                '</span></strong><br>' +
+                '<strong>source <span style="color: #555;">' +
+                edge.data('source') +
+                '</span></strong><br>' +
+                '<strong>target <span style="color:  #555;">' +
+                edge.data('target') +
+                '</span></strong><br>'
+                // '<strong>id <span style="color:  #555;">' +
+                // edge.data('id') +
+                // '</span></strong><br>' +
+                // '<strong>label <span style="color:  #555;">' +
+                // edge.data('label') +
+                // '</span></strong><br>'
+              content.align = 'left'
+              return content
+            },
+            theme: 'light-border',
+            trigger: 'manual',
+            arrow: true,
+            placement: 'left',
+            hideOnClick: 'false',
+            delay: [0, 2000],
+            animation: 'fade',
+            multiple: false,
+            sticky: true,
+            flip: true,
+            flipOnUpdate: true,
+            duration: [250, 275],
+            allowHTML: true,
+            interactive: true
+          })
+          tippy.show()
+        })
+      } catch (error) {
+        console.error('interactivity tippy edge error ', error)
+      }
+
+      try {
+        // eslint-disable-next-line no-unused-vars
+        instance.on('click', (event) => {
+          instance.elements().removeClass('semitransp')
+          instance.elements().removeClass('highlight')
+          instance.elements().removeClass('selected')
+          if (tippy) {
+            tippy.hide()
+          }
+        })
+      } catch (error) {
+        console.error('interactivity tippy remove edge selection error ', error)
+      }
+    },
+
+    switchLayout (message, event) {
+      event.preventDefault()
+      this.layoutName = message
+      this.layoutReady = true
+      this.layoutStopped = false
+    },
+
+    updateLayout (key) {
+      try {
+        const cy = this.cy
+        switch (key) {
+          case 'dagre':
+            expandCollapseOptions = expandCollapseOptionsUndefined
+            layoutOptions = dagreOptions
+            this.doLayout(layoutOptions, expandCollapseOptions)
+            break
+          case 'cose-bilkent':
+            expandCollapseOptions = expandCollapseOptionsCoseBilkent
+            layoutOptions = coseBilkentOptions
+            this.doLayout(layoutOptions, expandCollapseOptions, true)
+            break
+          case 'cola':
+            expandCollapseOptions = expandCollapseOptionsCola
+            layoutOptions = colaLayoutOptions
+            this.doLayout(layoutOptions, expandCollapseOptions)
+            break
+          case 'hierarchical':
+            cy.elements().hca({
+              mode: 'threshold',
+              threshold: 25,
+              distance: 'euclidian', // euclidian, squaredEuclidian, manhattan, max
+              preference: 'mean', // median, mean, min, max,
+              damping: 0.8, // [0.5 - 1]
+              minIterations: 100, // [optional] The minimum number of iteraions the algorithm will run before stopping (default 100).
+              maxIterations: 1000, // [optional] The maximum number of iteraions the algorithm will run before stopping (default 1000).
+              attributes: [
+                (node) => {
+                  return node.data('weight')
+                }
+              ]
+            })
+            expandCollapseOptions = expandCollapseOptionsUndefined
+            layoutOptions = hierarchicalOptions
+            this.doLayout(layoutOptions, expandCollapseOptions)
+            break
+          default:
+            expandCollapseOptions = expandCollapseOptionsUndefined
+            layoutOptions = dagreOptions
+            this.doLayout(layoutOptions, expandCollapseOptions)
+            break
+        }
+      } catch (error) {
+        console.error('updateLayout error', error)
+      }
+    },
+
+    doLayout (layoutOptions, expandCollapseOptions, collapse = false) {
+      try {
+        collapse ? ur.do('collapseAll') : console.warn('not collapsing this layout')
+        this.cy.elements()
+          .layout(layoutOptions)
+          .run()
+      } catch (error) {
+        console.error('doLayout error', error)
+      }
+    },
+
+    collapseAll () {
+      if (tippy) {
+        tippy.hide()
+      }
+      ur.do('collapseAll')
+    },
+
+    activateKeys (instance) {
+      document.addEventListener(
+        'keydown',
+        (event) => {
+          if ((event.metaKey && event.which === 90) || (event.ctrlKey && event.which === 90)) {
+            instance.undoRedo().undo()
+          } else if ((event.metaKey && event.which === 89) || (event.ctrlKey && event.which === 89)) {
+            instance.undoRedo().redo()
+          }
+        },
+        true
+      )
+    }
+  }
+}
+</script>
+<style lang="css">
+@import '~@/styles/cytoscape/panzoom.css';
+@import '~@/styles/cytoscape/cytoscape-custom.css';
+</style>
+<style lang="scss">
+@import '~@/styles/cytoscape/html-label.scss';
+</style>
diff --git a/src/router/paths.js b/src/router/paths.js
index c8c5dc9f84..e8cb6eb5a3 100644
--- a/src/router/paths.js
+++ b/src/router/paths.js
@@ -37,6 +37,15 @@ export default [
       layout: 'default'
     }
   },
+  {
+    path: '/graph/:workflowid',
+    view: 'Graph',
+    name: i18n.t('App.graph'),
+    meta: {
+      layout: 'default'
+    },
+    props: true
+  },
   {
     path: '/guide',
     name: 'Guide',
diff --git a/src/services/cytoscape.service.js b/src/services/cytoscape.service.js
new file mode 100644
index 0000000000..f3f7b399a4
--- /dev/null
+++ b/src/services/cytoscape.service.js
@@ -0,0 +1,27 @@
+/* jshint esversion: 6, asi: true */
+import { GQuery } from '@/services/gquery'
+
+class CytoscapeGQueryService extends GQuery {
+  constructor () {
+    super()
+    this.polling = null
+  }
+
+  destructor () {
+    clearInterval(this.polling)
+  }
+
+  subscribe (view, query) {
+    const ret = super.subscribe(view, query)
+    if (!this.polling) {
+      this.polling = setInterval(() => {
+        this.request()
+      }, 10000)
+      this.request()
+    }
+    return ret
+  }
+}
+
+const cytoscapeService = new CytoscapeGQueryService()
+export default cytoscapeService
diff --git a/src/styles/cytoscape/cytoscape-custom.css b/src/styles/cytoscape/cytoscape-custom.css
new file mode 100644
index 0000000000..9dba1ff10e
--- /dev/null
+++ b/src/styles/cytoscape/cytoscape-custom.css
@@ -0,0 +1,223 @@
+#holder {
+  width: 100%;
+  height: 800px;
+  background-color: #fff;
+  z-index: 1;
+}
+
+#cytoscape { 
+  width: 100%;
+  height: 800px;
+  background-color: #fff;
+  z-index: 2;
+}
+
+#app {
+  text-align: left;
+  color: #2c3e50;
+  margin-top: 0;
+  width: 100%;
+}
+
+.cytoscape-navigator-overlay {
+  position: absolute;
+  border: 1px solid #222;
+  background: #fff;
+  z-index: 5;
+  width: 200px;
+  height: 150px;
+  bottom: 83px;
+  right: -1px;
+  overflow: hidden;
+}
+
+.cytoscape-navigatorView {
+  border: 2px solid yellow;
+  border-radius: 1px;
+  background-color: #0c78ff;
+  opacity: 0.4;
+  /* cursor: move; */
+}
+
+.spinner {
+  position: fixed;
+  top: 50%;
+  left: 54%;
+  z-index: 99;
+}
+
+.collapsed-child {
+  opacity: 0;
+  display: none
+  }
+
+.switchlayout {
+  position: absolute;
+  bottom: 83px;
+  left: 1px;
+}
+
+.dagre-button {
+  text-align: centre;
+  color: #f2f2f2;
+  z-index: 4;
+  height: 40px;
+}
+
+.cosebilkent-button {
+  text-align: centre;
+  color: #f2f2f2;
+  z-index: 4;
+  height: 40px;
+  margin-left: 4px;
+}
+
+.klay-button {
+  text-align: centre;
+  color: #f2f2f2;
+  z-index: 4;
+  height: 40px;
+  width: 40px;
+  margin-left: 4px;
+}
+
+.hierarchical-button {
+  text-align: centre;
+  color: #f2f2f2;
+  z-index: 4;
+  height: 40px;
+  margin-left: 4px;
+}
+
+.cola-button {
+  text-align: centre;
+  color: #f2f2f2;
+  z-index: 4;
+  height: 40px;
+  width: 40px;
+  margin-left: 4px;
+}
+
+.collapse-all-button {
+  text-align: centre;
+  color: #f2f2f2;
+  font-size: .6em;
+  /* color: #666; */
+  z-index: 4;
+  height: 10px;
+  margin: 1em;
+}
+
+.layout-title {
+  text-align: left;
+  font-size: .8em;
+  color: #2b2b2b;
+  /* background: #f2f2f2; */
+  text-transform: lowercase;
+  position: absolute;
+  bottom: 44px;
+  left: 1px;
+  z-index: 4;
+}
+
+.suite-title {
+  text-align: left;
+  font-size: .8em;
+  color: #2b2b2b;
+  /* background: #f2f2f2; */
+  text-transform: lowercase;
+  position: absolute;
+  bottom: 60px;
+  left: 1px;
+  z-index: 4;
+}
+
+.node-tooltip {
+  font-family: arial, helvetica, sans-serif;
+}
+
+.edge-tooltip {
+  font-family: arial, helvetica, sans-serif;
+  width: 100%;
+}
+
+.box {
+  float: left;
+  height: 20px;
+  width: 20px;
+  /* margin-top: 1em; */
+  margin-right: 1em;
+  margin-bottom: 1px;
+  /* margin-bottom: 15px; */
+  border: none;
+  clear: both;
+  border-radius: 4px;
+}
+
+.expired {
+  background-color: #fefaff;
+}
+
+.failed {
+  background-color: #ff3a2b;
+}
+
+.queued {
+  background-color: #fff138;
+}
+
+.ready {
+  background-color: #7093FF;
+}
+
+.retrying {
+  background-color: #ff3a2b;
+}
+
+.running {
+  background-color: #4ab7ff;
+}
+
+.subfailed {
+  background-color: #d453ff;
+}
+
+.submitted {
+  background-color: #9ef9ff;
+}
+
+.succeeded {
+  background-color: #31ff53;
+}
+
+.waiting {
+  background-color: #666;
+}
+
+.default {
+  background-color: #555;
+}
+
+.UNDEFINED {
+  background-color: #444;
+}
+
+hr {
+  width: 100%;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+  height: 2px;
+  background-color:#666;
+  opacity: 0.5;
+  }
+
+.header {
+  width: 100%;
+  height: 1em;
+  overflow: hidden;
+  background-color: #e1e1e1;
+  padding: 20px 10px;
+}
+  
\ No newline at end of file
diff --git a/src/styles/cytoscape/html-label.scss b/src/styles/cytoscape/html-label.scss
new file mode 100644
index 0000000000..4250956de2
--- /dev/null
+++ b/src/styles/cytoscape/html-label.scss
@@ -0,0 +1,57 @@
+  .cy-title {
+    text-align: left;
+    font-size: 1em;
+    width: 130px;
+    color: #2b2b2b;
+    text-transform: capitalize;
+    background: rgba(255, 255, 255, 1)
+  }
+
+  .cy-title__cyclepoint {
+    text-align: left;
+    font-size: 1em;
+    width: 130px;
+    color: #2b2b2b;
+    text-transform: capitalize;
+    background: rgba(255, 255, 255, 1)
+  }
+  
+  .cy-title__label {
+    font-size: 1em;
+    overflow-wrap: break-word;
+    color: '#333';
+    background: rgba(255, 255, 255, 1)
+  }
+  
+  .cy-title__state {
+    font-size: 0.9em;
+    background: rgba(255, 255, 255, 1)
+  }
+
+  .cy-title__submittedtime {
+    font-size: 1em;
+    color: '#333';
+    background: rgba(255, 255, 255, 1)
+  }
+
+  .cy-title__status {
+    font-size: .8em;
+    color: '#333';
+    background: rgba(255, 255, 255, 1)
+  }
+
+  .cy-title__jobs {
+    font-size: .8em;
+    color: '#333';
+    background: rgba(255, 255, 255, 1)
+  }
+
+  .cy-title__name {
+    font-size: 1.5em;
+    background: rgba(255, 255, 255, 1)
+  }
+  
+  .cy-title__info {
+    font-size: 0.9em;
+    background: rgba(255, 255, 255, 1)
+  }
diff --git a/src/styles/cytoscape/panzoom.css b/src/styles/cytoscape/panzoom.css
new file mode 100644
index 0000000000..e3cdb98eba
--- /dev/null
+++ b/src/styles/cytoscape/panzoom.css
@@ -0,0 +1,221 @@
+.cy-panzoom {
+	position: absolute;
+	font-size: 12px;
+	color: #fff;
+	font-family: arial, helvetica, sans-serif;
+	line-height: 1;
+	color: #666;
+	font-size: 11px;
+	z-index: 99999;
+	box-sizing: content-box;
+	margin: 1em;
+}
+
+.cy-panzoom-zoom-button {
+	cursor: pointer;
+	padding: 3px;
+	text-align: center;
+	position: absolute;
+	border-radius: 3px;
+	width: 10px;
+	height: 10px;
+	left: 16px;
+	background: #fff;
+	border: 1px solid #999;
+	margin-left: -1px;
+	margin-top: -1px;
+	z-index: 1;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-zoom-button:active,
+.cy-panzoom-slider-handle:active,
+.cy-panzoom-slider-handle.active {
+	background: #ddd;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-pan-button {
+	position: absolute;
+	z-index: 1;
+	height: 16px;
+	width: 16px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-reset {
+	top: 55px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-zoom-in {
+	top: 80px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-zoom-out {
+	top: 197px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-pan-up {
+	top: 0;
+	left: 50%;
+	margin-left: -5px;
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-bottom: 5px solid #666;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-pan-down {
+	bottom: 0;
+	left: 50%;
+	margin-left: -5px;
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid #666;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-pan-left {
+	top: 50%;
+	left: 0;
+	margin-top: -5px;
+	width: 0;
+	height: 0;
+	border-top: 5px solid transparent;
+	border-bottom: 5px solid transparent;
+	border-right: 5px solid #666;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-pan-right {
+	top: 50%;
+	right: 0;
+	margin-top: -5px;
+	width: 0;
+	height: 0;
+	border-top: 5px solid transparent;
+	border-bottom: 5px solid transparent;
+	border-left: 5px solid #666;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-pan-indicator {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 8px;
+	height: 8px;
+	border-radius: 8px;
+	background: #000;
+	border-radius: 8px;
+	margin-left: -5px;
+	margin-top: -5px;
+	display: none;
+	z-index: 999;
+	opacity: 0.6;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-slider {
+	position: absolute;
+	top: 97px;
+	left: 17px;
+	height: 100px;
+	width: 15px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-slider-background {
+	position: absolute;
+	top: 0;
+	width: 2px;
+	height: 100px;
+	left: 5px;
+	background: #fff;
+	border-left: 1px solid #999;
+	border-right: 1px solid #999;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-slider-handle {
+	position: absolute;
+	width: 16px;
+	height: 8px;
+	background: #fff;
+	border: 1px solid #999;
+	border-radius: 2px;
+	margin-left: -2px;
+	z-index: 999;
+	line-height: 8px;
+	cursor: default;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-slider-handle .icon {
+	margin: 0 4px;
+	line-height: 10px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-no-zoom-tick {
+	position: absolute;
+	background: #666;
+	border: 1px solid #fff;
+	border-radius: 2px;
+	margin-left: -1px;
+	width: 8px;
+	height: 2px;
+	left: 3px;
+	z-index: 1;
+	margin-top: 3px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-panner {
+	position: absolute;
+	left: 5px;
+	top: 5px;
+	height: 40px;
+	width: 40px;
+	background: #fff;
+	border: 1px solid #999;
+	border-radius: 40px;
+	margin-left: -1px;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-panner-handle {
+	position: absolute;
+	left: 0;
+	top: 0;
+	outline: none;
+	height: 40px;
+	width: 40px;
+	position: absolute;
+	z-index: 999;
+	box-sizing: content-box;
+}
+
+.cy-panzoom-zoom-only .cy-panzoom-slider,
+.cy-panzoom-zoom-only .cy-panzoom-panner {
+	display: none;
+}
+
+.cy-panzoom-zoom-only .cy-panzoom-reset {
+	top: 20px;
+}
+
+.cy-panzoom-zoom-only .cy-panzoom-zoom-in {
+	top: 45px;
+}
+
+.cy-panzoom-zoom-only .cy-panzoom-zoom-out {
+	top: 70px;
+}
\ No newline at end of file
diff --git a/src/views/GScan.vue b/src/views/GScan.vue
index a85d9bf238..4b7e6df671 100644
--- a/src/views/GScan.vue
+++ b/src/views/GScan.vue
@@ -50,13 +50,8 @@
                 <td>{{ item.host }}</td>
                 <td>{{ item.port }}</td>
                 <td class="justify-center">
-                  <v-icon
-                      small
-                      class="mr-2"
-                      @click="viewWorkflow(item)"
-                  >
-                    mdi-table-edit
-                  </v-icon>
+                  <v-icon small class="mr-2" @click="viewWorkflow(item)">mdi-table-edit</v-icon>
+                  <v-icon small class="mr-2" @click="viewGraph(item)">mdi-vector-polyline</v-icon>
                 </td>
               </tr>
             </template>
@@ -152,6 +147,10 @@ export default {
       this.$router.push({ path: `/workflows/${workflow.name}` })
     },
 
+    viewGraph (workflow) {
+      this.$router.push({ path: `/graph/${workflow.id}` })
+    },
+
     subscribe (queryName) {
       const id = workflowService.subscribe(
         this,
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
new file mode 100644
index 0000000000..ae0b7b9770
--- /dev/null
+++ b/src/views/Graph.vue
@@ -0,0 +1,20 @@
+<template>
+    <graph></graph>
+</template>
+
+<script>
+import Graph from '@/components/cylc/Graph'
+
+export default {
+  name: 'Default',
+  components: {
+    Graph
+  }
+}
+</script>
+
+<style scoped>
+#core-footer {
+  position: relative;
+}
+</style>