diff --git a/changes.d/1810.feat.md b/changes.d/1810.feat.md
new file mode 100644
index 000000000..4a4ade58c
--- /dev/null
+++ b/changes.d/1810.feat.md
@@ -0,0 +1 @@
+Added graph view feature to group by family, and collapse by family and cycle point
diff --git a/src/components/cylc/ViewToolbar.vue b/src/components/cylc/ViewToolbar.vue
index 399ed54e7..342c825c3 100644
--- a/src/components/cylc/ViewToolbar.vue
+++ b/src/components/cylc/ViewToolbar.vue
@@ -30,7 +30,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="control"
         :data-cy="`control-${iControl.key}`"
       >
-        <v-btn
+        <v-menu
+        v-if="iControl.action==='select-tree'"
+        :close-on-content-click="false">
+          <template v-slot:activator="{ props }" >
+            <v-btn
+            v-bind="{...$attrs, ...props, ...btnProps}"
+            :disabled="iControl.disabled"
+            :color="iControl.color">
+              <v-icon>{{ iControl.icon }}</v-icon>
+              <v-tooltip>{{ iControl.title }}</v-tooltip>
+            </v-btn>
+          </template >
+          <v-treeview
+            v-model:selected="iControl.value"
+            v-on:update:selected="iControl.callback"
+            :items="iControl.items"
+            select-strategy='independent'
+            item-title="name"
+            item-value="name"
+            selectable
+            open-all
+          ></v-treeview>
+        </v-menu>
+        <v-btn v-else
           v-bind="btnProps"
           :disabled="iControl.disabled"
           :color="iControl.color"
@@ -46,10 +69,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { btnProps } from '@/utils/viewToolbar'
+import { VTreeview } from 'vuetify/labs/VTreeview'
 
 export default {
   name: 'ViewToolbar',
 
+  components: {
+    VTreeview,
+  },
+
   emits: [
     'setOption'
   ],
@@ -100,6 +128,12 @@ export default {
     }
   },
 
+  data () {
+    return {
+      selectedItems: {}
+    }
+  },
+
   computed: {
     iGroups () {
       // wrap the provided props into something we can mutate with derived
@@ -132,6 +166,12 @@ export default {
             case 'callback':
               callback = (e) => this.call(control, e)
               break
+            case 'select-tree':
+              callback = (e) => this.select(control, e)
+              if (control.value.length) {
+                color = 'blue'
+              }
+              break
           }
 
           // set disabled
@@ -178,6 +218,10 @@ export default {
       control.callback()
       e.currentTarget.blur()
     },
+    select (control, value) {
+      // call a control's callback
+      this.$emit('setOption', control.key, value)
+    },
     getValues () {
       // an object with all defined values
       const vars = {}
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 2e05e4d04..09c9dbcb6 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -46,6 +46,100 @@
           "ancestors": []
         }
       ],
+      "families": [
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|root",
+          "name": "root",
+          "parents": [],
+          "childTasks": [
+            {
+              "name": "checkpoint",
+              "_typename": "Task"
+            },
+            {
+              "name": "sleepy",
+              "_typename": "Task"
+            },
+            {
+              "name": "waiting",
+              "_typename": "Task"
+            }
+          ],
+          "childFamilies": [
+            {
+              "name": "BAD",
+              "_typename": "Family"
+            },
+            {
+              "name": "GOOD",
+              "_typename": "Family"
+            }
+          ]
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|BAD",
+          "name": "BAD",
+          "parents": [
+            {
+              "name": "root",
+              "_typename": "Family"
+            }
+          ],
+          "childTasks": [
+            {
+              "name": "failed",
+              "_typename": "Task"
+            },
+            {
+              "name": "retrying",
+              "_typename": "Task"
+            }
+          ],
+          "childFamilies": []
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|GOOD",
+          "name": "GOOD",
+          "parents": [
+            {
+              "name": "root",
+              "_typename": "family"
+            }
+          ],
+          "childTasks": [],
+          "childFamilies": [
+            {
+              "name": "SUCCEEDED",
+              "_typename": "Family"
+            }
+          ]
+        },
+        {
+          "__typename": "Family",
+          "id": "~user/one//$namespace|SUCCEEDED",
+          "name": "SUCCEEDED",
+          "parents": [
+            {
+              "name": "GOOD",
+              "_typename": "Family"
+            }
+          ],
+          "childTasks": [
+            {
+              "name": "eventually_succeeded",
+              "_typename": "Task"
+            },
+            {
+              "name": "succeeded",
+              "_typename": "Task"
+            }
+          ],
+          "childFamilies": []
+        }
+      ],
       "familyProxies": [
         {
           "__typename": "FamilyProxy",
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index 7fcd95797..18a4720fd 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -514,10 +514,10 @@ const mutations = {
 // NOTE: deltas are applied in the order listed here
 // NOTE: we must create tasks before families (note cycles ARE families
 // because of the way we request them)
-const KEYS = ['workflow', 'taskProxies', 'cyclePoints', 'familyProxies', 'jobs', 'edges']
+const KEYS = ['workflow', 'taskProxies', 'cyclePoints', 'familyProxies', 'jobs', 'edges', 'families']
 
 // Pruned keys which return arrays of pruned IDs
-const PRUNED_KEYS_MULT = ['taskProxies', 'familyProxies', 'jobs', 'edges']
+const PRUNED_KEYS_MULT = ['taskProxies', 'familyProxies', 'jobs', 'edges', 'families']
 // Pruned keys which contain single pruned IDs
 const PRUNED_KEYS_SING = ['workflow']
 
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 6b19689c5..6fdd52561 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -87,7 +87,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
           </g>
         </g>
-        <g v-if="groupCycle">
+        <g v-if="groupCycle || groupFamily">
           <GraphSubgraph
             v-for="(subgraph, key) in subgraphs"
             :key="key"
@@ -101,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import gql from 'graphql-tag'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { useJobTheme } from '@/composables/localStorage'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
@@ -127,7 +127,10 @@ import {
   mdiArrowExpand,
   mdiRefresh,
   mdiFileRotateRight,
-  mdiVectorSelection
+  mdiVectorSelection,
+  mdiVectorCombine,
+  mdiAlphaCCircle,
+  mdiAlphaFCircle
 } from '@mdi/js'
 import { isFlowNone } from '@/utils/tasks'
 
@@ -168,12 +171,31 @@ fragment TaskProxyData on TaskProxy {
   isRunahead
   isQueued
   name
+  firstParent {
+    id
+    name
+  }
   task {
     meanElapsedTime
   }
   flowNums
 }
 
+fragment FamilyProxyData on FamilyProxy {
+  __typename
+  id
+  state
+  isHeld
+  isRunahead
+  isQueued
+  name
+  id
+  firstParent {
+    id
+    name
+  }
+}
+
 fragment JobData on Job {
   id
   state
@@ -181,6 +203,17 @@ fragment JobData on Job {
   startedTime
 }
 
+fragment FamilyData on Family {
+  id
+  name
+  parents {
+    name
+  }
+  childFamilies {
+    name
+  }
+}
+
 fragment AddedDelta on Added {
   workflow {
     ...WorkflowData
@@ -191,9 +224,15 @@ fragment AddedDelta on Added {
   taskProxies {
     ...TaskProxyData
   }
+  familyProxies {
+    ...FamilyProxyData
+  }
   jobs {
     ...JobData
   }
+  families {
+    ...FamilyData
+  }
 }
 
 fragment UpdatedDelta on Updated {
@@ -206,16 +245,24 @@ fragment UpdatedDelta on Updated {
   taskProxies {
     ...TaskProxyData
   }
+  familyProxies {
+    ...FamilyProxyData
+  }
   jobs {
     ...JobData
   }
+  families {
+    ...FamilyData
+  }
 }
 
 fragment PrunedDelta on Pruned {
   workflow
   edges
   taskProxies
+  familyProxies
   jobs
+  families
 }
 `
 
@@ -263,12 +310,36 @@ export default {
      */
     const groupCycle = useInitialOptions('groupCycle', { props, emit }, false)
 
+    /**
+     * The group by family toggle state.
+     * Array containing names of grouped families
+     * @type {import('vue').Ref<array>}
+     */
+    const groupFamily = useInitialOptions('groupFamily', { props, emit }, [])
+
+    /**
+     * The collapse by cycle toggle state.
+     * Array containing names of collapsed cycles
+     * @type {import('vue').Ref<array>}
+     */
+    const collapseCycle = useInitialOptions('collapseCycle', { props, emit }, [])
+
+    /**
+     * The collapse by family toggle state.
+     * Array containing names of collapsed families
+     * @type {import('vue').Ref<array>}
+     */
+    const collapseFamily = useInitialOptions('collapseFamily', { props, emit }, [])
+
     return {
       jobTheme: useJobTheme(),
       transpose,
       autoRefresh,
       spacing,
       groupCycle,
+      groupFamily,
+      collapseCycle,
+      collapseFamily,
       isFlowNone,
     }
   },
@@ -296,6 +367,10 @@ export default {
       // supports loading graph when component is mounted and autoRefresh is off.
       // true if page is loading for the first time and nodeDimensions are yet to be calculated
       initialLoad: true,
+      cycleArrayStore: [],
+      edgeTemplate: {},
+      nodeTemplate: {},
+      latestCycle: ''
     }
   },
 
@@ -314,8 +389,8 @@ export default {
   beforeUnmount () {
     clearInterval(this.refreshTimer)
   },
-
   computed: {
+    ...mapState('workflows', ['cylcTree']),
     ...mapGetters('workflows', ['getNodes']),
     query () {
       return new SubscriptionQuery(
@@ -333,6 +408,162 @@ export default {
     workflows () {
       return this.getNodes('workflow', this.workflowIDs)
     },
+    namespaces () {
+      return this.workflows[0]?.$namespaces || []
+    },
+    /**
+     * Gets the Family tree as a nested object for use in vuetify toolbar drop down
+     * @returns {Family[]} array containing nested structure of families
+     */
+    treeDropDownFamily () {
+      if (this.familyArrayStore.length) {
+        return this.getTree()
+      } else {
+        return [
+          {
+            name: 'No families',
+            disabled: true
+          }
+        ]
+      }
+    },
+    /**
+     * Gets the array of cycles for use in vuetify toolbar drop down
+     * @returns {String[]} array containing nested structure of families
+     */
+    treeDropDownCycle () {
+      const store = []
+      this.cycleArrayStore.forEach((name, id) => {
+        store.push({
+          id,
+          name
+        })
+      })
+      return store
+    },
+    /**
+     * Object for looking up family ancestors
+     *
+     * example return object
+     * {
+     *  FAMILY: ['PARENT_FAMILY', 'GRANDPARENT_FAMILY', 'GREAT_GRANDPARENT_FAMILY', 'root' ],
+     *  PARENT_FAMILY: [ 'GRANDPARENT_FAMILY', 'GREAT_GRANDPARENT_FAMILY', 'root' ],
+     *  GRANDPARENT_FAMILY: [ 'GREAT_GRANDPARENT_FAMILY', 'root' ],
+     *  GREAT_GRANDPARENT_FAMILY : ['root'],
+     *  root: []
+     * }
+     *
+     * note: object value arrays do not contain family names as strings only - not nodes
+     *
+     * @returns {Object} keys are family names, values are arrays containing all ancestors names
+     */
+    allParentLookUp () {
+      const lookup = {}
+      this.namespaces.forEach((namespace) => {
+        const array = []
+        let parents = namespace.node.parents
+        while (parents.length) {
+          parents.forEach((parent) => {
+            const childTokens = this.workflows[0].tokens.clone({ cycle: `$namespace|${parent.name}` })
+            const childNode = this.cylcTree.$index[childTokens.id]
+            array.push(childNode.name)
+            parents = childNode.node.parents
+          })
+        }
+        lookup[namespace.name] = array
+      })
+      return lookup
+    },
+    /**
+     * Object for looking up children
+     *
+     * example return object
+     *
+     * {
+     *  workflow-name/run1/cycle/PARENT_FAMILY:
+     *   [
+     *     {
+     *       id: 'workflow-name/run1/cycle/PARENT_FAMILY'
+     *       name: 'PARENT_FAMILY'
+     *       children: Proxy
+     *     },
+     *     {
+     *       id: 'workflow-name/run1/cycle/FAMILY'
+     *       name: 'FAMILY'
+     *       children: Proxy
+     *     },
+     *     {
+     *       id: 'workflow-name/run1/cycle/task1'
+     *       name: 'task1'
+     *       children: Proxy
+     *     }
+     *   ]
+     *  workflow-name/run1/cycle/FAMILY:
+     *   [
+     *     {
+     *       id: 'workflow-name/run1/cycle/FAMILY'
+     *       name: 'FAMILY'
+     *       children: Proxy
+     *     },
+     *     {
+     *       id: 'workflow-name/run1/cycle/task1'
+     *       name: 'task1'
+     *       children: Proxy
+     *     }
+     *   ]
+     *  workflow-name/run1/cycle/task1:
+     *   [
+     *     {
+     *       id: 'workflow-name/run1/cycle/task1'
+     *       name: 'task1'
+     *       children: Proxy
+     *     }
+     *   ]
+     * }
+     * @returns {Object} keys are node ids, values are arrays of objects containing all children
+     */
+    allChildrenLookUp () {
+      const lookup = {}
+      // Function for getting a flattened array of the nested children
+      function childArray (a) {
+        return a.reduce(function (flattened, { id, name, children, type }) {
+          // We dont want to include jobs so dont include children if type is "task"
+          if (type === 'task') {
+            return flattened
+              .concat([{ id, name, type }])
+          } else {
+            return flattened
+              .concat([{ id, name, children, type }])
+              .concat(children ? childArray(children, id) : [])
+          }
+        }, [])
+      }
+      for (const workflow of this.workflows) {
+        lookup[workflow.id] = childArray([workflow])
+        for (const cycle of workflow.children) {
+          lookup[cycle.id] = childArray([cycle])
+          // for tasks
+          for (const task of cycle.children) {
+            lookup[task.id] = childArray([task])
+          }
+          // for families
+          for (const family of this.familyArrayStore) {
+            const familyId = `${cycle.id}/${family}`
+            if (this.cylcTree.$index[familyId]) {
+              lookup[familyId] = childArray([this.cylcTree.$index[familyId]])
+            }
+          }
+        }
+      }
+      return lookup
+    },
+    /**
+     * Get an array of family names
+     * @returns {String[]} array of family names
+     */
+    familyArrayStore () {
+      return this.namespaces.filter((family) => { return family.name !== 'root' }).map((family) => family.name)
+    },
     controlGroups () {
       return [
         {
@@ -383,6 +614,30 @@ export default {
               action: 'toggle',
               value: this.groupCycle,
               key: 'groupCycle'
+            },
+            {
+              title: 'Group by family',
+              icon: mdiVectorCombine,
+              action: 'select-tree',
+              value: this.groupFamily,
+              key: 'groupFamily',
+              items: this.treeDropDownFamily,
+            },
+            {
+              title: 'Collapse by cycle point',
+              icon: mdiAlphaCCircle,
+              action: 'select-tree',
+              value: this.collapseCycle,
+              key: 'collapseCycle',
+              items: this.treeDropDownCycle,
+            },
+            {
+              title: 'Collapse by family',
+              icon: mdiAlphaFCircle,
+              action: 'select-tree',
+              value: this.collapseFamily,
+              key: 'collapseFamily',
+              items: this.treeDropDownFamily,
             }
           ]
         }
@@ -391,6 +646,268 @@ export default {
   },
 
   methods: {
+    /**
+     * A nested Family object
+     * @typedef {Object} Family
+     * @property {Family[]} children - Array of the familys child families
+     * @property {number} id - An integer id (required for vuetify toolbar)
+     * @property {string} name - The family name
+     * @property {boolean} disabled - used in vuetify toolbar
+     */
+    /**
+     * A node object
+     * @typedef {Object} Node
+     * @param {Array} children - The nodes immediate children
+     * @param {Undefined} familyTree - The nodes familyTree
+     * @param {String} id - The node id
+     * @param {String} name - The node name
+     * @param {Object} node - The node object (note not of type Node)
+     * @param {String} parent - The nodes immediate parent id
+     * @param {Object} tokens - The nodes token object
+     * @param {String} type - The nodes type "task" | "$namespace" | "$edge"
+     */
+    /**
+     * Get a nested object of families
+     *
+     * @returns {Family[]} array containing nested structure of families
+     */
+    getTree () {
+      const counter = {
+        value: 0,
+        next () {
+          this.value = this.value + 1
+          return this.value
+        }
+      }
+
+      const root = {
+        id: counter.next(),
+        name: 'root',
+        children: []
+      }
+      const tokens = this.workflows[0].tokens.clone({ cycle: '$namespace|root' })
+      const node = this.cylcTree.$index[tokens.id]
+      return this.getTreeHelper(root, node, counter).children
+    },
+    /**
+     * Get a nested object of families
+     * @property {Family} store - nested object of families
+     * @property {Node} node - node object
+     * @property {number} counter - counter used for index
+     * @returns {Family} nested structure of families
+     */
+    getTreeHelper (store, node, counter) {
+      let tempItem
+      const isParent = this.collapseFamily.includes(node.name)
+      const isAncestor = this.allParentLookUp[node.name].some(element => {
+        return this.collapseFamily.includes(element)
+      })
+      const disabled = isParent || isAncestor
+      for (const childFamily of node.node.childFamilies) {
+        const childTokens = this.workflows[0].tokens.clone({ cycle: `$namespace|${childFamily.name}` })
+        const childNode = this.cylcTree.$index[childTokens.id]
+        tempItem = {
+          id: counter.next(),
+          name: childFamily.name,
+          children: [],
+          disabled
+        }
+        this.getTreeHelper(tempItem, childNode, counter)
+        store.children.push(tempItem)
+      }
+      return store
+    },
+    /**
+     * Removes a node from an array of nodes
+     * @property {String} nodeName - name of node to be removed
+     * @property {String} cyclePoint - isodatTime of node to be removed
+     * @property {Node[]} nodes - array of nodes included in the graph
+     * @returns {Node[]} updated array of nodes included in the graph (with node removed)
+     */
+    removeNode (nodeName, cyclePoint, nodes) {
+      const nodeId = this.workflows[0].tokens.clone({ cycle: cyclePoint, task: nodeName }).id
+      const nodesFiltered = nodes.filter((node) => {
+        return node.id !== nodeId
+      })
+      return nodesFiltered
+    },
+    /**
+     * Creates an edge from the name and cycle of source and target nodes
+     * @property {String} edgeType - config option 'noCollapsed'|'collapsedTarget'|'collapsedSource'|'collapsedSourceAndTarget'
+     * @property {String} sourceName - name of source node
+     * @property {String} targetName - name of target node
+     * @property {String} sourceCyclePoint - isodatTime of source node
+     * @property {String} targetCyclePoint - isodatTime of target node
+     * @returns {Node} the created edge
+     */
+    createEdge (edgeType, sourceName, targetName, sourceCyclePoint, targetCyclePoint) {
+      // adds a new edge object to 'edges' array
+      let src, tgt
+      if (edgeType === 'noCollapsed') {
+        src = `${sourceCyclePoint}/${sourceName}`
+        tgt = `${targetCyclePoint}/${targetName}`
+      }
+      if (edgeType === 'collapsedTarget') {
+        src = `${sourceCyclePoint}/${sourceName}|${targetName}`
+        tgt = `${sourceCyclePoint}/${sourceName}|${targetName}`
+      }
+      if (edgeType === 'collapsedSource') {
+        src = `${sourceCyclePoint}|${targetCyclePoint}/${targetName}`
+        tgt = `${sourceCyclePoint}|${targetCyclePoint}/${targetName}`
+      }
+      if (edgeType === 'collapsedSourceAndTarget') {
+        src = `${sourceName}|${targetName}`
+        tgt = `${sourceName}|${targetName}`
+      }
+      const tokens = this.workflows[0].tokens.clone({
+        cycle: `$edge|${src}|${tgt}`
+      })
+      return {
+        id: tokens.id,
+        name: tokens.id,
+        tokens,
+        type: 'family',
+        children: [],
+        familyTree: undefined,
+        node: {
+          id: tokens.id,
+          source: this.workflows[0].tokens.clone({
+            cycle: tokens.edge[0].cycle,
+            task: tokens.edge[0].task,
+          }).id,
+          target: this.workflows[0].tokens.clone({
+            cycle: tokens.edge[1].cycle,
+            task: tokens.edge[1].task,
+          }).id,
+        },
+      }
+    },
+    /**
+     * Removes an edge from an array of edges
+     * @property {String} sourceName - name of source node of edge to be removed
+     * @property {String} targetName - name of target node of edge to be removed
+     * @property {String} sourceCyclePoint - isodatTime of source node of edge to be removed
+     * @property {String} targetCyclePoint - isodatTime of target node of edge to be removed
+     * @property {Node[]} edges - array of edges included in the graph
+     * @returns {Node[]} updated array of edges included in the graph (with edge removed)
+     */
+    removeEdge (sourceName, sourceCyclePoint, targetName, targetCyclePoint, edges) {
+      // removes a edge object from the 'edges' array
+      const edgePath = this.workflowIDs[0]
+      const edgeSearchTerm = `${edgePath}//$edge|${sourceCyclePoint}/${sourceName}|${targetCyclePoint}/${targetName}`
+      const edgesFiltered = edges.filter((edge) => {
+        if (edge.id.indexOf(edgeSearchTerm) === -1) {
+          return true
+        } else {
+          return false
+        }
+      })
+      return edgesFiltered
+    },
+    /**
+     * Removes an edges from an array of edges based on source node
+     * @property {Node[]} edgeCheckSource - array of edges that have been identified as needing removal from the graph
+     * @property {String} cycle - isodatTime of edge to be removed
+     * @property {Node[]} removedEdges - array store of nodes that have been removed from the graph
+     * @property {Node[]} edges - array of edges included in the graph
+     * @returns {[Node[], Node[]]} the updated edges and removed edge store arrays
+     */
+    removeEdgeBySource (edgeCheckSource, edges, removedEdges, config, cycle) {
+      edgeCheckSource.forEach((edge) => {
+        removedEdges.push(edge)
+        edges = this.removeEdge(
+          config.name,
+          cycle,
+          edge.tokens.edge[1].task,
+          edge.tokens.edge[1].cycle,
+          edges
+        )
+      })
+      return [edges, removedEdges]
+    },
+    /**
+     * Removes an edges from an array of edges based on target node
+     * @property {Node[]} edgeCheckTarget - array of edges that have been identified as needing removal from the graph
+     * @property {String} cycle - isodatTime of edge to be removed
+     * @property {Node[]} removedEdges - array store of nodes that have been removed from the graph
+     * @property {Node[]} edges - array of edges included in the graph
+     * @returns {[Node[], Node[]]} the updated edges and removed edge store arrays
+     */
+    removeEdgeByTarget (edgeCheckTarget, edges, removedEdges) {
+      edgeCheckTarget.forEach((edge) => {
+        removedEdges.push(edge)
+        edges = this.removeEdge(
+          edge.tokens.edge[0].task,
+          edge.tokens.edge[0].cycle,
+          edge.tokens.edge[1].task,
+          edge.tokens.edge[1].cycle,
+          edges
+        )
+      })
+      return [edges, removedEdges]
+    },
+    /**
+     * Filters edges array based on source node
+     * @property {String} sourceName - name of source node of edge to be removed
+     * @property {String} sourceCyclePoint - isodatTime of source node of edge to be removed
+     * @property {Node[]} edges - array of edges included in the graph
+     * @returns {Node[]} the edges that match source names and cycle point
+     */
+    checkForEdgeBySource (sourceName, cyclePoint, edges) {
+      const edgePath = this.workflowIDs[0]
+      const edgeSearchTerm = `${edgePath}//${cyclePoint}/${sourceName}`
+
+      const edgeSearch = edges.filter((edge) => {
+        return edge.node.source === edgeSearchTerm
+      })
+      return edgeSearch
+    },
+    /**
+     * Filters edges array based on target node
+     * @property {String} targetName - name of target node of edge to be removed
+     * @property {String} sourceCyclePoint - isodatTime of target node of edge to be removed
+     * @property {Node[]} edges - array of edges included in the graph
+     * @returns {Node[]} the edges that match source names and cycle point
+     */
+    checkForEdgeByTarget (targetName, cyclePoint, edges) {
+      const edgePath = this.workflowIDs[0]
+      const edgeSearchTerm = `${edgePath}//${cyclePoint}/${targetName}`
+
+      const edgeSearch = edges.filter((edge) => {
+        return edge.node.target === edgeSearchTerm
+      })
+      return edgeSearch
+    },
+    /**
+     * Check if node is collapsed by family or ancestor
+     * If not collapsed return null
+     * If the node is collapsed by first parent return the parent name
+     * If the node is collapsed by an ancestor further up the tree return the name of the ancestor
+     * @property {String} nodeFirstParent - name of the first parent
+     * @returns {String | null} name of the collapsed parent/ancestor or null
+     */
+    isNodeCollapsedByFamily (nodeFirstParent) {
+      // the nodes first parent is collapsed
+      const firstParent = this.collapseFamily.includes(nodeFirstParent)
+      // a family member up the tree is collapsed
+      const ancestor = this.allParentLookUp[nodeFirstParent].some(element => {
+        return this.collapseFamily.includes(element)
+      })
+      if (firstParent && !ancestor) {
+        // the node is collapsed by its first parent
+        return nodeFirstParent
+      } else if (ancestor) {
+        // the node is collapsed by an ancestor
+        for (let i = this.allParentLookUp[nodeFirstParent].length - 1; i >= 0; i--) {
+          if (this.collapseFamily.includes(this.allParentLookUp[nodeFirstParent][i])) {
+            return this.allParentLookUp[nodeFirstParent][i]
+          }
+        }
+      } else {
+        // the node is not collapsed
+        return null
+      }
+    },
     mountSVGPanZoom () {
       // Check the SVG is ready:
       // * The SVG document must be rendered with something in it before we can
@@ -488,7 +1005,7 @@ export default {
      * Get the dimensions of currently rendered graph nodes
      * (we feed these dimensions into the GraphViz dot code to improve layout).
      *
-     * @param {Object[]} nodes
+     * @param {Node[]} nodes - The graph nodes
      * @returns {{ [id: string]: SVGRect }} mapping of node IDs to their
      * bounding boxes.
      */
@@ -508,16 +1025,108 @@ export default {
     /**
      * Get the nodes binned by cycle point
      *
-     * @param {Object[]} nodes
+     * @param {Node[]} nodes - The graph 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
       }, {})
     },
+    /**
+     * Recursive function that adds a subgraph to the dot code
+     *
+     * Terminology:
+     * The pointer is a node object passed to the method
+     * The pointer child is the family that will be grouped
+     * The pointer grandchildren are the nodes that will be included in the grouping
+     *
+     * @param {String[]} dotcode - The array of strings that make up the dot code
+     * @param {Node} pointer - Node object pointer used for recursion to navigate graph tree
+     */
+    addSubgraph (dotcode, pointer) {
+      // If there are no families grouped we dont need to run this code
+      if (!this.groupFamily.length) {
+        return
+      }
+      // We can only group by nodes of type family
+      if (pointer.type !== 'family') {
+        return
+      }
+
+      // The pointer has children
+      // We want to see if we can group each child
+      pointer.children.forEach((child, i) => {
+        // The pointer child has children (grandChildren)
+        // These grandChildren are the nodes that will be included in the grouping
+        const grandChildren = this.allChildrenLookUp[child.id]
+        if (!grandChildren) { return }
+        // Some of the nodes may have been collapsed
+        // Work out if any have and store for reference later
+        const removedNodes = new Set()
+        grandChildren.forEach((a) => {
+          if (this.collapseFamily.includes(a.name)) {
+            a.children.forEach((child) => {
+              removedNodes.add(child.name)
+            })
+          }
+        })
+        let openedBrackets = false
+        if (
+          // If this pointer has grandchildren
+          grandChildren.length &&
+          // Is the child of the pointer a family that is grouped?
+          // If yes - we want to include in the grouping
+          this.groupFamily.includes(child.node.name) &&
+          // But if its collapsed then we dont want to group it
+          // We dont put boxes around collapsed nodes - design choice
+          !this.collapseFamily.includes(child.node.name)
+        ) {
+          // Take our array of grandchildren and remove nodes that we dont want to include
+          // nodeFormattedArray will be an array of string node ids to be included in the grouping
+          const nodeFormattedArray = grandChildren.filter((grandChild) => {
+            let isAncestor = true
+            const nodeFirstParent = this.cylcTree.$index[grandChild.id].node.firstParent.name
+            isAncestor = !this.isNodeCollapsedByFamily(nodeFirstParent)
+            return (
+              // if its not in the list of families (unless its been collapsed)
+              (!this.familyArrayStore.includes(grandChild.name) || this.collapseFamily.includes(grandChild.name)) &&
+              // the node has been removed/collapsed
+              !removedNodes.has(grandChild.name) &&
+              // the node doesnt have a collapsed ancestor
+              isAncestor
+            )
+          }).map(a => `"${a.id}"`)
+          // if there are any nodes left after the filtering step
+          // make a dotcode subgraph string
+          if (nodeFormattedArray.length) {
+            openedBrackets = true
+            dotcode.push(`
+            subgraph cluster_margin_family_${child.name}${child.tokens.cycle}
+              {
+              margin=100.0
+              label="margin"
+              subgraph cluster_${child.name}${child.tokens.cycle}
+                {${nodeFormattedArray}${nodeFormattedArray.length ? ';' : ''}
+                  label = "${child.name}"
+                  fontsize = "70px"
+                  style=dashed
+                  margin=60.0
+            `)
+          }
+        }
+
+        // If there the pointer has a child
+        // repeat the process for that child
+        if (child) {
+          this.addSubgraph(dotcode, child)
+        }
+        if (openedBrackets) {
+          dotcode.push('}}')
+        }
+      })
+    },
     getDotCode (nodeDimensions, nodes, edges, cycles) {
       // return GraphViz dot code for the given nodes, edges and dimensions
       const ret = ['digraph {']
@@ -562,25 +1171,64 @@ 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
-            }
-          }`)
-        })
-      }
+      const graphSections = {}
+      Object.keys(cycles).forEach((cycle, iCycle) => {
+        const indexSearch = cycles[cycle]
+        if (indexSearch.length && !this.collapseCycle.includes(cycle)) {
+          indexSearch.forEach((task) => {
+            if (!task.node.firstParent) { return }
+            const section = graphSections[task.node.firstParent.id] ??= []
+            section.push(`${task.name} [title=${task.name}]`)
+            graphSections[task.node.firstParent.id] = section
+          })
+          if (this.groupCycle) {
+            const removedNodes = new Set()
+            indexSearch.forEach((a) => {
+              if (this.collapseFamily.includes(a.name)) {
+                this.allChildrenLookUp[a.id].forEach((child) => {
+                  removedNodes.add(child.name)
+                })
+              }
+            })
+            const nodeFormattedArray = indexSearch.filter((a) => {
+              const isRoot = a.name !== 'root'
+              let isAncestor = true
+              if (isRoot) {
+                const nodeFirstParent = this.cylcTree.$index[a.id].node.firstParent.name
+                isAncestor = !this.isNodeCollapsedByFamily(nodeFirstParent)
+              }
+              return (
+                // if its not in the list of families (unless its been collapsed)
+                (!this.familyArrayStore.includes(a.name) || this.collapseFamily.includes(a.name)) &&
+                // the node has been removed/collapsed
+                (!removedNodes.has(a.name) || this.collapseFamily.includes(a.name)) &&
+                // its not a node representing this cycle
+                a.name !== cycle &&
+                // its not a root node
+                isRoot &&
+                // the node doesnt have a collapsed ancestor
+                isAncestor
+              )
+            }).map(a => `"${a.id}"`)
+            ret.push(`
+              subgraph cluster_margin_family_${cycle}
+                {
+                margin=100.0
+                label="margin"
+                subgraph cluster_${cycle} {
+                    ${nodeFormattedArray}${nodeFormattedArray.length ? ';' : ''}
+                    label = "${cycle}"
+                    fontsize = "70px"
+                    style=dashed
+                    margin=60.0
+              `)
+          }
+          this.addSubgraph(ret, this.cylcTree.$index[`${this.workflowIDs[0]}//${cycle}/root`])
+          if (this.groupCycle) {
+            ret.push('}}')
+          }
+        }
+      })
 
       if (this.transpose) {
         // left-right orientation
@@ -645,11 +1293,237 @@ export default {
       this.updating = true
 
       // extract the graph (non reactive lists of nodes & edges)
-      const nodes = await this.waitFor(() => {
+      let nodes = await this.waitFor(() => {
         const nodes = this.getGraphNodes()
         return nodes.length ? nodes : false
       })
-      const edges = this.getGraphEdges()
+      let edges = this.getGraphEdges()
+
+      // ----------------------------------------
+      let removedEdges = []
+
+      // For all cycles...
+      this.cycleArrayStore.forEach((cycle) => {
+        // ...loop through collapsed families...
+        this.collapseFamily.forEach((family) => {
+          // ...get the node from the index...
+          const indexSearch = Object.values(this.cylcTree.$index).find((node) => {
+            return node.name === family && node.tokens.cycle === cycle
+          })
+          // ...now we have a node - we have to understand all its relations in the graph...
+          if (indexSearch) {
+            // ---------------REMOVE NODES BASED ON FAMILY------------
+            // ṃust do this before removing nodes and edges based on cycle as
+            // cycle collapsing takes priority of families
+            // ...this node is collapsed so need to remove any of its children (nodes and edges) from the graph if it has any...
+            this.allChildrenLookUp[indexSearch.id].forEach((config) => {
+              if (config.name !== indexSearch.name) {
+                // REMOVE NODES
+                nodes = this.removeNode(config.name, cycle, nodes)
+                // REMOVE EDGES
+                // if there is an edge with a source or target it needs removing
+                const edgeCheckSource = this.checkForEdgeBySource(config.name, cycle, edges)
+                const edgeCheckTarget = this.checkForEdgeByTarget(config.name, cycle, edges)
+
+                if (edgeCheckSource.length) {
+                  [edges, removedEdges] = this.removeEdgeBySource(edgeCheckSource, edges, removedEdges, config, cycle)
+                }
+                if (edgeCheckTarget.length) {
+                  [edges, removedEdges] = this.removeEdgeByTarget(edgeCheckTarget, edges, removedEdges)
+                }
+              }
+            })
+            // ...now we have removed any parts of child nodes that shouldnt be there we can add nodes and edges that should be...
+            // ---------------ADD NODES BASED ON FAMILY------------
+            if (!this.collapseCycle.includes(cycle)) { // cycle collapsing takes priority over family collapsing
+              nodes.push(indexSearch)
+            }
+
+            const edgeHasCollapsedTargetFamilyOnly = (targetFirstFamily, sourceFirstFamily) => {
+              if (this.isNodeCollapsedByFamily(targetFirstFamily) && !this.isNodeCollapsedByFamily(sourceFirstFamily)) {
+                return {
+                  target: this.isNodeCollapsedByFamily(targetFirstFamily),
+                  source: undefined
+                }
+              } else {
+                return false
+              }
+            }
+
+            const edgeHasCollapsedSourceFamilyOnly = (targetFirstFamily, sourceFirstFamily) => {
+              if (!this.isNodeCollapsedByFamily(targetFirstFamily) && this.isNodeCollapsedByFamily(sourceFirstFamily)) {
+                return {
+                  target: undefined,
+                  source: this.isNodeCollapsedByFamily(sourceFirstFamily)
+                }
+              } else {
+                return false
+              }
+            }
+
+            const edgeHasCollapsedTargetandSourceFamily = (targetFirstFamily, sourceFirstFamily) => {
+              if (this.isNodeCollapsedByFamily(targetFirstFamily) && this.isNodeCollapsedByFamily(sourceFirstFamily)) {
+                return {
+                  target: this.isNodeCollapsedByFamily(targetFirstFamily),
+                  source: this.isNodeCollapsedByFamily(sourceFirstFamily)
+                }
+              } else {
+                return false
+              }
+            }
+
+            // ...this node is collapsed so need to remove any of its children (nodes and edges) from the graph if it has any...
+            this.allChildrenLookUp[indexSearch.id].forEach((config) => {
+              const edgeCheckSource = this.checkForEdgeBySource(config.name, cycle, removedEdges)
+              if (edgeCheckSource) {
+                edgeCheckSource.forEach((edge) => {
+                  const sourceCycle = this.cylcTree.$index[edge.node.source].tokens.cycle
+                  const targetName = this.cylcTree.$index[edge.node.target].name
+                  const targetCycle = this.cylcTree.$index[edge.node.target].tokens.cycle
+                  const sourceFamilyName = this.cylcTree.$index[edge.node.source].node.firstParent.name
+                  const targetFamilyName = this.cylcTree.$index[edge.node.target].node.firstParent.name
+
+                  if (edgeHasCollapsedSourceFamilyOnly(targetFamilyName, sourceFamilyName)) {
+                    if (!this.collapseCycle.includes(sourceCycle)) {
+                      const familyData = edgeHasCollapsedSourceFamilyOnly(targetFamilyName, sourceFamilyName)
+                      this.edgeTemplate = this.createEdge('noCollapsed', familyData.source, targetName, sourceCycle, targetCycle)
+                      edges.push(this.edgeTemplate)
+                    }
+                  }
+
+                  if (edgeHasCollapsedTargetandSourceFamily(targetFamilyName, sourceFamilyName)) {
+                    if (!this.collapseCycle.includes(sourceCycle) && !this.collapseCycle.includes(targetCycle)) {
+                      const familyData = edgeHasCollapsedTargetandSourceFamily(targetFamilyName, sourceFamilyName)
+                      this.edgeTemplate = this.createEdge('noCollapsed', familyData.source, familyData.target, sourceCycle, targetCycle)
+                      if (familyData.source !== familyData.target) {
+                        edges.push(this.edgeTemplate)
+                      }
+                    }
+                  }
+                })
+              }
+              const edgeCheckTarget = this.checkForEdgeByTarget(config.name, cycle, removedEdges)
+              if (edgeCheckTarget) {
+                edgeCheckTarget.forEach((edge) => {
+                  const sourceName = this.cylcTree.$index[edge.node.source].name
+                  const sourceCycle = this.cylcTree.$index[edge.node.source].tokens.cycle
+                  const targetCycle = this.cylcTree.$index[edge.node.target].tokens.cycle
+                  const sourceFamilyName = this.cylcTree.$index[edge.node.source].node.firstParent.name
+                  const targetFamilyName = this.cylcTree.$index[edge.node.target].node.firstParent.name
+
+                  if (edgeHasCollapsedTargetFamilyOnly(targetFamilyName, sourceFamilyName)) {
+                    if (!this.collapseCycle.includes(targetCycle)) {
+                      const familyData = edgeHasCollapsedTargetFamilyOnly(targetFamilyName, sourceFamilyName)
+                      this.edgeTemplate = this.createEdge('noCollapsed', sourceName, familyData.target, sourceCycle, targetCycle)
+                      edges.push(this.edgeTemplate)
+                    }
+                  }
+
+                  if (edgeHasCollapsedTargetandSourceFamily(targetFamilyName, sourceFamilyName)) {
+                    if (!this.collapseCycle.includes(sourceCycle) && !this.collapseCycle.includes(targetCycle)) {
+                      const familyData = edgeHasCollapsedTargetandSourceFamily(targetFamilyName, sourceFamilyName)
+                      this.edgeTemplate = this.createEdge('noCollapsed', familyData.source, familyData.target, sourceCycle, targetCycle)
+                      if (familyData.source !== familyData.target) {
+                        edges.push(this.edgeTemplate)
+                      }
+                    }
+                  }
+                })
+              }
+            })
+          }
+        })
+      })
+      this.collapseCycle.forEach((cycle) => {
+        const indexSearch = Object.values(this.cylcTree.$index).find((node) => {
+          return node.name === cycle
+        })
+        if (indexSearch) {
+          // ---------------REMOVE NODES BASED ON CYCLE POINT------------
+          if (!this.allChildrenLookUp[indexSearch.id]) { return }
+          this.allChildrenLookUp[indexSearch.id].forEach((config) => {
+            if (config.name !== indexSearch.name) {
+              // REMOVE NODES
+              nodes = this.removeNode(config.name, cycle, nodes)
+              // REMOVE EDGES
+              // if there is an edge with a source or target it needs removing
+              const edgeCheckSource = this.checkForEdgeBySource(config.name, cycle, edges)
+              const edgeCheckTarget = this.checkForEdgeByTarget(config.name, cycle, edges)
+              if (edgeCheckSource.length) {
+                [edges, removedEdges] = this.removeEdgeBySource(edgeCheckSource, edges, removedEdges, config, cycle)
+              }
+              if (edgeCheckTarget.length) {
+                [edges, removedEdges] = this.removeEdgeByTarget(edgeCheckTarget, edges, removedEdges)
+              }
+            }
+          })
+          // ---------------ADD NODES BASED ON CYCLE POINT------------
+          nodes.push(indexSearch)
+          // next bit starts here
+          // ---------------ADD EDGES BASED ON CYCLE POINT------------
+          this.allChildrenLookUp[indexSearch.id].forEach((config) => {
+            const edgeCheckSource = this.checkForEdgeBySource(config.name, cycle, removedEdges)
+            if (edgeCheckSource) {
+              edgeCheckSource.forEach((edge) => {
+                const targetName = this.cylcTree.$index[edge.node.target].name
+                const targetCycle = this.cylcTree.$index[edge.node.target].tokens.cycle
+                // only want one edge that goes to a different cycle point
+                if (targetCycle !== cycle) {
+                  if (this.collapseCycle.includes(targetCycle)) {
+                    // this collapsed cycle => next collapsed cycle
+                    this.edgeTemplate = this.createEdge('collapsedSourceAndTarget', cycle, targetCycle, cycle, targetCycle)
+                    edges.push(this.edgeTemplate)
+                  } else {
+                    const firstParent = this.cylcTree.$index[edge.node.target].node.firstParent
+                    const isFirstParentCollapsed = this.collapseFamily.includes(firstParent.name)
+                    const isAncestorCollapsed = this.allParentLookUp[firstParent.name].some(element => {
+                      return this.collapseFamily.includes(element)
+                    })
+                    if (!isAncestorCollapsed && !isFirstParentCollapsed) {
+                      // this collapsed cycle => next cycle
+                      this.edgeTemplate = this.createEdge('collapsedSource', cycle, targetName, cycle, targetCycle)
+                      edges.push(this.edgeTemplate)
+                    }
+                  }
+                }
+              })
+            }
+            const edgeCheckTarget = this.checkForEdgeByTarget(config.name, cycle, removedEdges)
+            if (edgeCheckTarget) {
+              edgeCheckTarget.forEach((edge) => {
+                const sourceName = this.cylcTree.$index[edge.node.source].name
+                const sourceCycle = this.cylcTree.$index[edge.node.source].tokens.cycle
+                // only want one edge that goes to a different cycle point
+                if (sourceCycle !== cycle) {
+                  if (this.collapseCycle.includes(sourceCycle)) {
+                    // previous collapsed cycle => this collapsed cycle
+                    this.edgeTemplate = this.createEdge('collapsedSourceAndTarget', sourceCycle, cycle, sourceCycle, cycle)
+                    edges.push(this.edgeTemplate)
+                  } else {
+                    const firstParent = this.cylcTree.$index[edge.node.source].node.firstParent
+                    const isFirstParentCollapsed = this.collapseFamily.includes(firstParent.name)
+                    const isAncestorCollapsed = this.allParentLookUp[firstParent.name].some(element => {
+                      return this.collapseFamily.includes(element)
+                    })
+                    if (!isAncestorCollapsed && !isFirstParentCollapsed) {
+                      // previous cycle => this collapsed cycle
+                      this.edgeTemplate = this.createEdge('collapsedTarget', sourceName, cycle, sourceCycle, cycle)
+                      edges.push(this.edgeTemplate)
+                    }
+                  }
+                }
+              })
+            }
+          })
+        }
+      })
+      // remove any duplicate edges that might have got into edges
+      edges = Array.from(new Set(edges.map(a => a.id)))
+        .map(id => {
+          return edges.find(a => a.id === id)
+        })
+
+      // ----------------------------------------
 
       if (!nodes || !nodes.length) {
         // we can't graph this, reset and wait for something to draw
@@ -659,7 +1533,8 @@ export default {
       }
 
       const cycles = this.getCycles(nodes)
-
+      this.latestCycle = Object.keys(cycles)[0]
+      this.cycleArrayStore = this.workflows[0].children.map(child => child.tokens.cycle)
       // compute the graph ID
       const graphID = this.hashGraph(nodes, edges)
       if (this.graphID === graphID) {
@@ -816,10 +1691,29 @@ export default {
         this.updateTimer()
       }
     },
-    groupCycle () {
+    groupCycle (newValue, oldValue) {
       // refresh the graph when group by cycle point option is changed
       this.graphID = null
       this.refresh()
+      // if (newValue === true) { this.groupFamily = false }
+    },
+    groupFamily (newValue, oldValue) {
+      // refresh the graph when group by family option is changed
+      this.graphID = null
+      this.refresh()
+      // if (newValue === true) { this.groupCycle = false }
+    },
+    collapseFamily (newValue, oldValue) {
+      // refresh the graph when group by family option is changed
+      this.graphID = null
+      this.refresh()
+      // if (newValue === true) { this.groupCycle = false }
+    },
+    collapseCycle (newValue, oldValue) {
+      // refresh the graph when group by family option is changed
+      this.graphID = null
+      this.refresh()
+      // if (newValue === true) { this.groupCycle = false }
     }
   }
 }
diff --git a/tests/e2e/specs/graph.cy.js b/tests/e2e/specs/graph.cy.js
index 7589b3e5d..002cb4d87 100644
--- a/tests/e2e/specs/graph.cy.js
+++ b/tests/e2e/specs/graph.cy.js
@@ -129,6 +129,24 @@ describe('Graph View', () => {
       .should('be.visible')
   })
 
+  it('should group by family point', () => {
+    cy.visit('/#/graph/one')
+    waitForGraphLayout()
+    cy
+      .get('[data-cy="control-groupFamily"] > .v-btn')
+      .click()
+      .get('.v-list-item').should(items => {
+        expect(items[0]).to.contain.text('BAD')
+        expect(items[1]).to.contain.text('GOOD')
+        expect(items[2]).to.contain.text('SUCCEEDED')
+      })
+      .contains('.v-list-item', 'GOOD').find('input').check()
+    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')
@@ -150,17 +168,148 @@ describe('Graph View', () => {
     checkRememberToolbarSettings('[data-cy="control-groupCycle"]', 'not.have.class', 'have.class')
   })
 
-  describe('Flow nums', () => {
-    it('Shows flow=None task dimmed', () => {
-      cy.visit('/#/graph/one')
-      waitForGraphLayout()
-      cy.get('.c-graph-node.flow-none').as('flowNone')
-        .should('have.css', 'opacity')
-        .then((opacity) => {
-          expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
-        })
-      cy.get('@flowNone')
-        .contains('sleepy')
-    })
+  it('should collapse by cycle point', () => {
+    cy.visit('/#/graph/one')
+    waitForGraphLayout()
+
+    cy
+      // there should be 7 graph nodes (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph-node-container')
+      .should('be.visible')
+      .should('have.length', 7)
+
+      // they shouldn't be stacked up in a pile
+      // (we use SVG transforms to push the nodes around)
+      .each(($el, index, $list) => {
+        const el1 = $el[0]
+        const matrix1 = el1.transform.baseVal[0].matrix
+        for (const el2 of $list) {
+          if (el1 !== el2) {
+            const matrix2 = el2.transform.baseVal[0].matrix
+            expect(matrix1).to.not.equal(matrix2)
+          }
+        }
+      })
+
+      // there should be 10 graph edges (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph:first .edges:first')
+      .children()
+      .should('have.length', 10)
+      .should('be.visible')
+
+    cy
+      // list items should contain one item
+      .get('[data-cy="control-collapseCycle"] > .v-btn')
+      .click()
+      .get('.v-list-item').should(items => {
+        expect(items[0]).to.contain.text('20000102T0000Z')
+      })
+      .contains('.v-list-item', '20000102T0000Z').find('input').check()
+
+    cy
+      // there should be 1 graph node (on-screen)
+      .get('.c-graph:first')
+      .find('.graph-node-container')
+      .should('be.visible')
+      .should('have.length', 1)
+
+      // they shouldn't be stacked up in a pile
+      // (we use SVG transforms to push the nodes around)
+      .each(($el, index, $list) => {
+        const el1 = $el[0]
+        const matrix1 = el1.transform.baseVal[0].matrix
+        for (const el2 of $list) {
+          if (el1 !== el2) {
+            const matrix2 = el2.transform.baseVal[0].matrix
+            expect(matrix1).to.not.equal(matrix2)
+          }
+        }
+      })
+  })
+
+  it('should collapse by family', () => {
+    cy.visit('/#/graph/one')
+    waitForGraphLayout()
+
+    cy
+      // there should be 7 graph nodes (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph-node-container')
+      .should('be.visible')
+      .should('have.length', 7)
+
+      // they shouldn't be stacked up in a pile
+      // (we use SVG transforms to push the nodes around)
+      .each(($el, index, $list) => {
+        const el1 = $el[0]
+        const matrix1 = el1.transform.baseVal[0].matrix
+        for (const el2 of $list) {
+          if (el1 !== el2) {
+            const matrix2 = el2.transform.baseVal[0].matrix
+            expect(matrix1).to.not.equal(matrix2)
+          }
+        }
+      })
+
+      // there should be 10 graph edges (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph:first .edges:first')
+      .children()
+      .should('have.length', 10)
+      .should('be.visible')
+
+    cy
+      // list items should contain one item
+      .get('[data-cy="control-collapseFamily"] > .v-btn')
+      .click()
+      .get('.v-list-item').should(items => {
+        expect(items[0]).to.contain.text('BAD')
+        expect(items[1]).to.contain.text('GOOD')
+        expect(items[2]).to.contain.text('SUCCEEDED')
+      })
+      .contains('.v-list-item', 'GOOD').find('input').check()
+
+    cy
+      // there should be 6 graph nodes (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph-node-container')
+      .should('be.visible')
+      .should('have.length', 6)
+
+      // they shouldn't be stacked up in a pile
+      // (we use SVG transforms to push the nodes around)
+      .each(($el, index, $list) => {
+        const el1 = $el[0]
+        const matrix1 = el1.transform.baseVal[0].matrix
+        for (const el2 of $list) {
+          if (el1 !== el2) {
+            const matrix2 = el2.transform.baseVal[0].matrix
+            expect(matrix1).to.not.equal(matrix2)
+          }
+        }
+      })
+
+      // there should be 7 graph edges (all on-screen)
+      .get('.c-graph:first')
+      .find('.graph:first .edges:first')
+      .children()
+      .should('have.length', 7)
+      .should('be.visible')
+  })
+})
+
+describe('Flow nums', () => {
+  it('Shows flow=None task dimmed', () => {
+    cy.visit('/#/graph/one')
+    waitForGraphLayout()
+    cy.get('.c-graph-node.flow-none').as('flowNone')
+      .should('have.css', 'opacity')
+      .then((opacity) => {
+        expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
+      })
+    cy.get('@flowNone')
+      .contains('sleepy')
   })
 })
diff --git a/tests/unit/views/graph-utils.js b/tests/unit/views/graph-utils.js
new file mode 100644
index 000000000..80425c060
--- /dev/null
+++ b/tests/unit/views/graph-utils.js
@@ -0,0 +1,322 @@
+import { Tokens } from '@/utils/uid'
+
+const nodeSucceeded =
+  {
+    id: 'user/one/run1//2/succeeded',
+    name: 'succeeded',
+    node: {
+      name: 'succeeded',
+      firstParent: {
+        id: 'user/one/run1//2/SUCCEEDED'
+      }
+    },
+    tokens: {
+      cycle: '2'
+    },
+    children: []
+  }
+
+const nodeRetrying =
+  {
+    id: 'user/one/run1//1/retrying',
+    name: 'retrying',
+    node: {
+      name: 'retrying',
+      firstParent: {
+        id: 'user/one/run1//1/BAD'
+      }
+    },
+    tokens: {
+      cycle: '1'
+    },
+    children: [
+      {
+        id: 'user/one/run1//1/retrying/01',
+        name: 'retrying',
+      },
+      {
+        id: 'user/one/run1//1/retrying/02',
+        name: 'retrying',
+      }
+    ]
+  }
+
+const nodeSleepy =
+  {
+    id: 'user/one/run1//2/sleepy',
+    name: 'sleepy',
+    node: {
+      name: 'sleepy',
+      firstParent: {
+        id: 'user/one/run1//1/root'
+      }
+    },
+    tokens: {
+      cycle: '2'
+    },
+    children: []
+  }
+
+const nodeFailed =
+  {
+    id: 'user/one/run1//1/failed',
+    name: 'failed',
+    node: {
+      name: 'failed',
+      firstParent: {
+        id: 'user/one/run1//1/BAD'
+      }
+    },
+    tokens: {
+      cycle: '1'
+    },
+  }
+
+const nodeNamespaceRoot =
+  {
+    id: 'user/one/run1//$namespace|root',
+    name: 'root',
+    node: {
+      name: 'root',
+      parents: [],
+      childFamilies: [{ name: 'GOOD' }, { name: 'BAD' }],
+      childTasks: [{ name: 'checkpoint' }, { name: 'sleepy' }, { name: 'waiting' }]
+    },
+    tokens: { cycle: undefined }
+  }
+
+const nodeNamespaceBad =
+  {
+    id: 'user/one/run1//$namespace|BAD',
+    name: 'BAD',
+    node: {
+      name: 'root',
+      parents: [{ name: 'root' }],
+      childFamilies: [],
+      childTasks: [{ name: 'retrying' }, { name: 'failed' }]
+    },
+    tokens: { cycle: undefined }
+  }
+
+const nodeNamespaceGood =
+  {
+    id: 'user/one/run1//$namespace|GOOD',
+    name: 'GOOD',
+    node: {
+      name: 'GOOD',
+      parents: [{ name: 'root' }],
+      childFamilies: [{ name: 'SUCCEEDED' }],
+      childTasks: [{ name: 'retrying' }, { name: 'failed' }]
+    },
+    tokens: { cycle: undefined }
+  }
+
+const nodeNamespaceSucceeded =
+  {
+    id: 'user/one/run1//$namespace|SUCCEEDED',
+    name: 'SUCCEEDED',
+    node: {
+      name: 'GOOD',
+      parents: [{ name: 'GOOD' }],
+      childFamilies: [],
+      childTasks: [{ name: 'succeeded' }, { name: 'eventually_succeeded' }]
+    },
+    tokens: { cycle: undefined }
+  }
+
+const workflows = [
+  {
+    id: '~user/one',
+    node: {
+      firstParent: {
+        id: ''
+      }
+    },
+    children: [
+      {
+        id: '~user/one//1',
+        tokens: { cycle: 1 },
+        node: {
+          firstParent: {
+            id: ''
+          }
+        },
+        children: [
+          {
+            id: '~user/one//1/eventually_succeeded',
+            tokens: { cycle: 1 },
+            node: {
+              firstParent: {
+                id: 'user/one/run1//1/SUCCEEDED'
+              }
+            },
+            children: [
+              {
+                id: '~user/one//1/eventually_succeeded/3',
+                tokens: { cycle: 1 },
+                node: {
+                  firstParent: {
+                    id: 'user/one/run1//1/SUCCEEDED'
+                  }
+                },
+                children: [],
+              },
+              {
+                id: '~user/one//1/eventually_succeeded/2',
+                tokens: { cycle: 1 },
+                node: {
+                  firstParent: {
+                    id: 'user/one/run1//1/SUCCEEDED'
+                  }
+                },
+                children: [],
+              },
+              {
+                id: '~user/one//1/eventually_succeeded/1',
+                tokens: { cycle: 1 },
+                node: {
+                  firstParent: {
+                    id: 'user/one/run1//1/SUCCEEDED'
+                  }
+                },
+                children: [],
+              },
+            ],
+          },
+          {
+            id: '~user/one//1/failed',
+            tokens: { cycle: 1 },
+            node: {
+              firstParent: {
+                id: 'user/one/run1//1/BAD'
+              }
+            },
+            children: [
+              {
+                id: '~user/one//1/failed/1',
+                tokens: { cycle: 1 },
+                node: {
+                  firstParent: {
+                    id: 'user/one/run1//1/BAD'
+                  }
+                },
+                children: [],
+              },
+            ],
+          },
+        ]
+      }
+    ],
+    tokens: new Tokens('user/one/run1'),
+    $namespaces: [
+      nodeNamespaceBad,
+      nodeNamespaceGood,
+      nodeNamespaceRoot,
+      nodeNamespaceSucceeded
+    ]
+  }
+]
+
+const nodes = [
+  nodeFailed,
+  nodeRetrying,
+  nodeSleepy,
+  nodeSucceeded
+]
+
+const edges = [
+  {
+    id: 'user/one/run1//$edge|1/succeeded|1/failed',
+    name: 'user/one/run1//$edge|1/succeeded|1/failed',
+    parent: 'user/one/run1',
+    node: {
+      id: 'user/one/run1//$edge|1/succeeded|1/failed',
+      source: 'user/one/run1//1/succeeded',
+      target: 'user/one/run1//1/failed',
+      __typename: 'Edge'
+    },
+    tokens: {
+      edge: [
+        {
+          task: 'succeeded',
+          cycle: '1'
+        },
+        {
+          task: 'failed',
+          cycle: '1'
+        },
+      ]
+    }
+  },
+  {
+    id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+    name: 'user/one/run1//$edge|1/failed|1/checkpoint',
+    parent: 'user/one/run1',
+    node: {
+      id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+      source: 'user/one/run1//1/failed',
+      target: 'user/one/run1//1/checkpoint',
+      __typename: 'Edge'
+    },
+    tokens: {
+      edge: [
+        {
+          task: 'failed',
+          cycle: '1'
+        },
+        {
+          task: 'checkpoint',
+          cycle: '1'
+        },
+      ]
+    }
+  },
+  {
+    id: 'user/one/run1//$edge|2/sleepy|1/failed',
+    name: 'user/one/run1//$edge|2/sleepy|1/failed',
+    parent: 'user/one/run1',
+    node: {
+      id: 'user/one/run1//$edge|2/sleepy|1/failed',
+      source: 'user/one/run1//2/sleepy',
+      target: 'user/one/run1//1/failed',
+      __typename: 'Edge'
+    },
+    tokens: {
+      edge: [
+        {
+          task: 'sleepy',
+          cycle: '2'
+        },
+        {
+          task: 'failed',
+          cycle: '1'
+        },
+      ]
+    }
+  }
+]
+
+const cylcTree = {
+  $index: {
+    'user/one/run1//1/succeeded': nodeSucceeded,
+    'user/one/run1//2/sleepy': nodeSleepy,
+    'user/one/run1//1/retrying': nodeRetrying,
+    'user/one/run1//1/failed': nodeFailed,
+    'user/one/run1//$namespace|root': nodeNamespaceRoot,
+    'user/one/run1//$namespace|BAD': nodeNamespaceBad,
+    'user/one/run1//$namespace|GOOD': nodeNamespaceGood,
+    'user/one/run1//$namespace|SUCCEEDED': nodeNamespaceSucceeded
+  }
+}
+
+const namespaces = () => {
+  return workflows[0]?.$namespaces || []
+}
+
+export {
+  workflows,
+  nodes,
+  edges,
+  cylcTree,
+  namespaces
+}
diff --git a/tests/unit/views/graph.vue.spec.js b/tests/unit/views/graph.vue.spec.js
new file mode 100644
index 000000000..c02235d73
--- /dev/null
+++ b/tests/unit/views/graph.vue.spec.js
@@ -0,0 +1,596 @@
+/* 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/>. */
+
+import { mount } from '@vue/test-utils'
+import { createStore } from 'vuex'
+import sinon from 'sinon'
+import storeOptions from '@/store/options'
+import Graph from '@/views/Graph.vue'
+import User from '@/model/User.model'
+import WorkflowService from '@/services/workflow.service'
+import { workflows, cylcTree, nodes, edges, namespaces } from './graph-utils.js'
+
+chai.config.truncateThreshold = 0
+
+describe('Graph view', () => {
+  let store, $workflowService
+  beforeEach(() => {
+    store = createStore(storeOptions)
+    const user = new User({ username: 'cylc', permissions: [], owner: 'owner' })
+    store.commit('user/SET_USER', user)
+    $workflowService = sinon.createStubInstance(WorkflowService)
+    sinon.stub(Graph.methods, 'mountSVGPanZoom')
+  })
+  afterEach(() => { sinon.restore() })
+
+  it('gets cycles', async () => {
+    const wrapper = mount(Graph, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        mocks: { $workflowService }
+      },
+      props: {
+        workflowName: 'one',
+      },
+      computed: {
+        workflows () {
+          return workflows
+        },
+        namespaces () {
+          return namespaces()
+        },
+        cylcTree () {
+          return cylcTree
+        }
+      }
+    })
+
+    expect(wrapper.vm.getCycles(nodes)).toMatchObject(
+      {
+        1: [
+          {
+            id: 'user/one/run1//1/failed',
+            name: 'failed',
+            node: {
+              firstParent: {
+                id: 'user/one/run1//1/BAD'
+              }
+            },
+            tokens: {
+              cycle: '1'
+            }
+          },
+          {
+            id: 'user/one/run1//1/retrying',
+            name: 'retrying',
+            node: {
+              firstParent: {
+                id: 'user/one/run1//1/BAD'
+              }
+            },
+            tokens: {
+              cycle: '1'
+            }
+          }
+        ],
+        2: [
+          {
+            id: 'user/one/run1//2/sleepy',
+            name: 'sleepy',
+            node: {
+              firstParent: {
+                id: 'user/one/run1//1/root'
+              }
+            },
+            tokens: {
+              cycle: '2'
+            }
+          },
+          {
+            id: 'user/one/run1//2/succeeded',
+            name: 'succeeded',
+            node: {
+              firstParent: {
+                id: 'user/one/run1//2/SUCCEEDED'
+              }
+            },
+            tokens: {
+              cycle: '2'
+            }
+          }
+        ]
+      }
+    )
+  })
+
+  it('it gets tree', async () => {
+    const wrapper = mount(Graph, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        mocks: { $workflowService }
+      },
+      props: {
+        workflowName: 'one',
+      },
+      computed: {
+        workflows () {
+          return workflows
+        },
+        namespaces () {
+          return namespaces()
+        },
+        cylcTree () {
+          return cylcTree
+        },
+        allParentLookUp () {
+          return {
+            BAD: [
+              'root'
+            ],
+            GOOD: [
+              'root'
+            ],
+            root: [],
+            SUCCEEDED: [
+              'GOOD',
+              'root'
+            ]
+          }
+        }
+      }
+    })
+
+    // wrapper.vm.nextTick()
+    expect(wrapper.vm.getTree()).toMatchObject(
+      [
+        {
+          children: [
+            {
+              children: [],
+              disabled: false,
+              id: 3,
+              name: 'SUCCEEDED',
+            },
+          ],
+          disabled: false,
+          id: 2,
+          name: 'GOOD',
+        },
+        {
+          children: [],
+          disabled: false,
+          id: 4,
+          name: 'BAD',
+        },
+      ]
+    )
+  })
+
+  it('it checks for edge by source', async () => {
+    const wrapper = mount(Graph, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        mocks: { $workflowService }
+      },
+      props: {
+        workflowName: 'one',
+      },
+      computed: {
+        workflows () {
+          return workflows
+        },
+        namespaces () {
+          return namespaces()
+        },
+        cylcTree () {
+          return cylcTree
+        },
+        workflowIDs () {
+          return ['user/one/run1']
+        }
+      }
+    })
+    expect(wrapper.vm.checkForEdgeBySource('failed', '1', edges)).toMatchObject(
+      [
+        {
+          id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+          name: 'user/one/run1//$edge|1/failed|1/checkpoint',
+          parent: 'user/one/run1',
+          node: {
+            id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+            source: 'user/one/run1//1/failed',
+            target: 'user/one/run1//1/checkpoint',
+            __typename: 'Edge'
+          }
+        }
+      ]
+    )
+  })
+
+  it('it checks for edge by target', async () => {
+    const wrapper = mount(Graph, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        mocks: { $workflowService }
+      },
+      props: {
+        workflowName: 'one',
+      },
+      computed: {
+        workflows () {
+          return workflows
+        },
+        namespaces () {
+          return namespaces()
+        },
+        cylcTree () {
+          return cylcTree
+        },
+        workflowIDs () {
+          return ['user/one/run1']
+        }
+      }
+    })
+    expect(wrapper.vm.checkForEdgeByTarget('checkpoint', '1', edges)).toMatchObject(
+      [
+        {
+          id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+          name: 'user/one/run1//$edge|1/failed|1/checkpoint',
+          parent: 'user/one/run1',
+          node: {
+            id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+            source: 'user/one/run1//1/failed',
+            target: 'user/one/run1//1/checkpoint',
+            __typename: 'Edge'
+          }
+        }
+      ]
+    )
+  })
+
+  it('it removes edge node by source', async () => {
+    const wrapper = mount(Graph, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        mocks: { $workflowService }
+      },
+      props: {
+        workflowName: 'one',
+      },
+      computed: {
+        workflows () {
+          return workflows
+        },
+        namespaces () {
+          return namespaces()
+        },
+        cylcTree () {
+          return cylcTree
+        },
+        workflowIDs () {
+          return ['user/one/run1']
+        },
+        allChildrenLookUp () {
+          return {
+            'user/one/run1//1/succeeded': [
+              {
+                id: 'user/one/run1//2/succeeded',
+                name: 'succeeded',
+                children: []
+              }
+            ],
+            'user/one/run1//2/sleepy': [{ id: 'user/one/run1//2/sleepy', name: 'sleepy', children: [] }],
+            'user/one/run1//1/retrying': [
+              {
+                id: 'user/one/run1//1/retrying',
+                name: 'retrying',
+                children: [Array]
+              },
+              {
+                id: 'user/one/run1//1/retrying/01',
+                name: 'retrying',
+                children: undefined
+              },
+              {
+                id: 'user/one/run1//1/retrying/02',
+                name: 'retrying',
+                children: undefined
+              }
+            ],
+            'user/one/run1//1/failed': [
+              {
+                id: 'user/one/run1//1/failed',
+                name: 'failed',
+                children: undefined
+              }
+            ],
+            'user/one/run1//$namespace|root': [
+              {
+                id: 'user/one/run1//$namespace|root',
+                name: 'root',
+                children: undefined
+              }
+            ],
+            'user/one/run1//$namespace|BAD': [
+              {
+                id: 'user/one/run1//$namespace|BAD',
+                name: 'BAD',
+                children: undefined
+              }
+            ],
+            'user/one/run1//$namespace|GOOD': [
+              {
+                id: 'user/one/run1//$namespace|GOOD',
+                name: 'GOOD',
+                children: undefined
+              }
+            ],
+            'user/one/run1//$namespace|SUCCEEDED': [
+              {
+                id: 'user/one/run1//$namespace|SUCCEEDED',
+                name: 'SUCCEEDED',
+                children: undefined
+              }
+            ]
+          }
+        }
+      }
+    })
+    // in this test we remove the first edge with a source of 'user/one/run1//1/sleepy'
+    const config = wrapper.vm.allChildrenLookUp['user/one/run1//2/sleepy'][0]
+    const edgeCheckSource = wrapper.vm.checkForEdgeBySource(config.name, '2', edges)
+    const removedEdges = []
+
+    expect(wrapper.vm.removeEdgeBySource(edgeCheckSource, edges, removedEdges, config, '2')).toMatchObject(
+      [
+        // the returned edges array with the edge removed
+        [
+          {
+            id: 'user/one/run1//$edge|1/succeeded|1/failed',
+            name: 'user/one/run1//$edge|1/succeeded|1/failed',
+            parent: 'user/one/run1',
+            node: {
+              id: 'user/one/run1//$edge|1/succeeded|1/failed',
+              source: 'user/one/run1//1/succeeded',
+              target: 'user/one/run1//1/failed',
+              __typename: 'Edge'
+            }
+          },
+          {
+            id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+            name: 'user/one/run1//$edge|1/failed|1/checkpoint',
+            parent: 'user/one/run1',
+            node: {
+              id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+              source: 'user/one/run1//1/failed',
+              target: 'user/one/run1//1/checkpoint',
+              __typename: 'Edge'
+            }
+          }
+        ],
+        // the returned removed edges array
+        [
+          {
+            id: 'user/one/run1//$edge|2/sleepy|1/failed',
+            name: 'user/one/run1//$edge|2/sleepy|1/failed',
+            parent: 'user/one/run1',
+            node: {
+              id: 'user/one/run1//$edge|2/sleepy|1/failed',
+              source: 'user/one/run1//2/sleepy',
+              target: 'user/one/run1//1/failed',
+              __typename: 'Edge'
+            }
+          }
+        ]
+      ]
+    )
+  })
+
+  it('it removes edge node by target', async () => {
+    const wrapper = mount(Graph, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        mocks: { $workflowService }
+      },
+      props: {
+        workflowName: 'one',
+      },
+      computed: {
+        workflows () {
+          return workflows
+        },
+        namespaces () {
+          return namespaces()
+        },
+        cylcTree () {
+          return cylcTree
+        },
+        workflowIDs () {
+          return ['user/one/run1']
+        },
+        allChildrenLookUp () {
+          return {
+            'user/one/run1//1/succeeded': [
+              {
+                id: 'user/one/run1//2/succeeded',
+                name: 'succeeded',
+                children: [],
+              }
+            ],
+            'user/one/run1//2/sleepy': [
+              {
+                id: 'user/one/run1//2/sleepy',
+                name: 'sleepy',
+                children: [],
+              }
+            ],
+            'user/one/run1//1/retrying': [
+              {
+                id: 'user/one/run1//1/retrying',
+                name: 'retrying',
+                children: [
+                  {
+                    id: 'user/one/run1//1/retrying/01',
+                    name: 'retrying',
+                  },
+                  {
+                    id: 'user/one/run1//1/retrying/02',
+                    name: 'retrying',
+                  }
+                ],
+              },
+              {
+                id: 'user/one/run1//1/retrying/01',
+                name: 'retrying',
+                children: undefined,
+              },
+              {
+                id: 'user/one/run1//1/retrying/02',
+                name: 'retrying',
+                children: undefined,
+              }
+            ],
+            'user/one/run1//1/failed': [
+              {
+                id: 'user/one/run1//1/failed',
+                name: 'failed',
+                children: undefined,
+              }
+            ],
+            'user/one/run1//$namespace|root': [
+              {
+                id: 'user/one/run1//$namespace|root',
+                name: 'root',
+                children: undefined,
+              }
+            ],
+            'user/one/run1//$namespace|BAD': [
+              {
+                id: 'user/one/run1//$namespace|BAD',
+                name: 'BAD',
+                children: undefined,
+              }
+            ],
+            'user/one/run1//$namespace|GOOD': [
+              {
+                id: 'user/one/run1//$namespace|GOOD',
+                name: 'GOOD',
+                children: undefined,
+              }
+            ],
+            'user/one/run1//$namespace|SUCCEEDED': [
+              {
+                id: 'user/one/run1//$namespace|SUCCEEDED',
+                name: 'SUCCEEDED',
+                children: undefined,
+              }
+            ]
+          }
+        }
+      }
+    })
+    await wrapper.vm.$nextTick()
+    // in this test we remove the first edge with a target of 'user/one/run1//1/failed'
+    const config = wrapper.vm.allChildrenLookUp['user/one/run1//1/failed'][0]
+    const edgeCheckTarget = wrapper.vm.checkForEdgeByTarget(config.name, '1', edges)
+    const removedEdges = []
+
+    expect(wrapper.vm.removeEdgeByTarget(edgeCheckTarget, edges, removedEdges)).toMatchObject(
+      [
+        // the returned edges array with the edge removed
+        [
+          {
+            id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+            name: 'user/one/run1//$edge|1/failed|1/checkpoint',
+            parent: 'user/one/run1',
+            node: {
+              id: 'user/one/run1//$edge|1/failed|1/checkpoint',
+              source: 'user/one/run1//1/failed',
+              target: 'user/one/run1//1/checkpoint',
+              __typename: 'Edge'
+            },
+            tokens: {
+              edge: [
+                {
+                  task: 'failed',
+                  cycle: '1'
+                },
+                {
+                  task: 'checkpoint',
+                  cycle: '1'
+                },
+              ]
+            }
+          }
+        ],
+        // the returned removed edges array
+        [
+          {
+            id: 'user/one/run1//$edge|1/succeeded|1/failed',
+            name: 'user/one/run1//$edge|1/succeeded|1/failed',
+            parent: 'user/one/run1',
+            node: {
+              id: 'user/one/run1//$edge|1/succeeded|1/failed',
+              source: 'user/one/run1//1/succeeded',
+              target: 'user/one/run1//1/failed',
+              __typename: 'Edge'
+            },
+            tokens: {
+              edge: [
+                {
+                  task: 'succeeded',
+                  cycle: '1'
+                },
+                {
+                  task: 'failed',
+                  cycle: '1'
+                },
+              ]
+            }
+          },
+          {
+            id: 'user/one/run1//$edge|2/sleepy|1/failed',
+            name: 'user/one/run1//$edge|2/sleepy|1/failed',
+            parent: 'user/one/run1',
+            node: {
+              id: 'user/one/run1//$edge|2/sleepy|1/failed',
+              source: 'user/one/run1//2/sleepy',
+              target: 'user/one/run1//1/failed',
+              __typename: 'Edge'
+            },
+            tokens: {
+              edge: [
+                {
+                  task: 'sleepy',
+                  cycle: '2'
+                },
+                {
+                  task: 'failed',
+                  cycle: '1'
+                },
+              ]
+            }
+          }
+        ]
+      ]
+    )
+  })
+})