diff --git a/src/components/cylc/table/Table.vue b/src/components/cylc/table/Table.vue
index e8935275d..284a8aa1f 100644
--- a/src/components/cylc/table/Table.vue
+++ b/src/components/cylc/table/Table.vue
@@ -31,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <template #item.task.name="{ item }">
       <div
         class="d-flex align-center flex-nowrap"
-        :class="{ 'flow-none': isFlowNone(item.task.node.flowNums) }"
+        :class="{ 'dimmed': item.task.node.graphDepth }"
         :data-cy-task-name="item.task.name"
       >
         <div v-bind="jobIconParentProps">
@@ -147,7 +147,6 @@ import {
 import {
   getRunTime,
   formatDuration,
-  isFlowNone,
   isTruthyOrZero,
 } from '@/utils/tasks'
 import { useCyclePointsOrderDesc } from '@/composables/localStorage'
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index 7f2c90f7b..667435761 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -68,7 +68,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div
             v-else-if="node.type === 'task'"
             class="d-flex align-center"
-            :class="{ 'flow-none': isFlowNone(node.node.flowNums) }"
           >
             <!-- Task summary -->
             <Task
@@ -179,7 +178,6 @@ import JobLeaf from '@/components/cylc/tree/JobLeaf.vue'
 import {
   jobMessageOutputs,
   latestJob,
-  isFlowNone,
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
 import { once } from '@/utils/reactivity'
@@ -251,7 +249,6 @@ export default {
 
     return {
       isExpanded,
-      isFlowNone,
       latestJob,
       renderChildren,
       toggleExpandCollapse,
@@ -285,7 +282,12 @@ export default {
       }
     },
     nodeDataClass () {
-      return ['node-data', `node-data-${this.node.type}`]
+      return {
+        'node-data': true,
+        [`node-data-${this.node.type}`]: true,
+        // dim nodes (tasks & families) that are outside the n=0 window
+        dimmed: this.node.node?.graphDepth,
+      }
     },
     expandCollapseBtnStyle () {
       return {
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
index 2877c534f..11f883a77 100644
--- a/src/services/mock/json/workflows/one.json
+++ b/src/services/mock/json/workflows/one.json
@@ -57,6 +57,7 @@
           "id": "~user/one//20000102T0000Z/root",
           "name": "root",
           "state": "failed",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z"
         },
         {
@@ -64,6 +65,7 @@
           "id": "~user/one//20000102T0000Z/BAD",
           "name": "BAD",
           "state": "failed",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
@@ -84,6 +86,7 @@
           "id": "~user/one//20000102T0000Z/GOOD",
           "name": "GOOD",
           "state": "succeeded",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
@@ -101,6 +104,7 @@
           "id": "~user/one//20000102T0000Z/SUCCEEDED",
           "name": "SUCCEEDED",
           "state": "succeeded",
+          "graphDepth": 0,
           "cyclePoint": "20000102T0000Z",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/GOOD",
@@ -123,6 +127,7 @@
           "id": "~user/one//20000102T0000Z/checkpoint",
           "name": "checkpoint",
           "state": "running",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -147,6 +152,7 @@
           "id": "~user/one//20000102T0000Z/eventually_succeeded",
           "name": "eventually_succeeded",
           "state": "succeeded",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -171,6 +177,7 @@
           "id": "~user/one//20000102T0000Z/failed",
           "name": "failed",
           "state": "failed",
+          "graphDepth": 0,
           "isHeld": true,
           "isQueued": false,
           "isRunahead": false,
@@ -194,6 +201,7 @@
           "id": "~user/one//20000102T0000Z/retrying",
           "name": "retrying",
           "state": "waiting",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -217,6 +225,7 @@
           "id": "~user/one//20000102T0000Z/sleepy",
           "name": "sleepy",
           "state": "submitted",
+          "graphDepth": 1,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -240,6 +249,7 @@
           "id": "~user/one//20000102T0000Z/succeeded",
           "name": "succeeded",
           "state": "succeeded",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
@@ -267,6 +277,7 @@
           "id": "~user/one//20000102T0000Z/waiting",
           "name": "waiting",
           "state": "waiting",
+          "graphDepth": 0,
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7d1198f33..af7a384fc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -98,7 +98,8 @@ html {
 }
 
 .c-tree, .c-table, .c-graph {
-  .flow-none {
-    opacity: 0.6;
+  // Dim nodes that are outside the n=0 (active) window, i.e. n != 0.
+  .dimmed {
+    opacity: 0.5;
   }
 }
diff --git a/src/utils/tasks.js b/src/utils/tasks.js
index 9b0b9bc69..bd53d7ac3 100644
--- a/src/utils/tasks.js
+++ b/src/utils/tasks.js
@@ -136,16 +136,6 @@ export function formatFlowNums (flowNums) {
   return JSON.parse(flowNums).join(', ') || 'None'
 }
 
-/**
- * Return whether a task is in the None flow.
- *
- * @param {string=} flowNums
- * @returns {boolean}
- */
-export function isFlowNone (flowNums) {
-  return Boolean(flowNums && !JSON.parse(flowNums).length)
-}
-
 export function isTruthyOrZero (value) {
   return value === 0 || Boolean(value)
 }
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index 61ebaa135..3641c50d4 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -59,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :task="node"
             :jobs="node.children"
             :jobTheme="jobTheme"
-            :class="{ 'flow-none': isFlowNone(node.node.flowNums) }"
+            :class="{ 'dimmed': node.node.graphDepth }"
           />
         </g>
         <!-- the edges
@@ -129,7 +129,6 @@ import {
   mdiFileRotateRight,
   mdiVectorSelection
 } from '@mdi/js'
-import { isFlowNone } from '@/utils/tasks'
 
 // NOTE: Use TaskProxies not nodesEdges{nodes} to list nodes as this is what
 // the tree view uses which allows the requests to overlap with this and other
@@ -175,6 +174,7 @@ fragment TaskProxyData on TaskProxy {
     meanElapsedTime
   }
   flowNums
+  graphDepth
   runtime {
     runMode
   }
@@ -275,7 +275,6 @@ export default {
       autoRefresh,
       spacing,
       groupCycle,
-      isFlowNone,
     }
   },
 
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
index 1269fc298..bf2c2fab6 100644
--- a/src/views/Guide.vue
+++ b/src/views/Guide.vue
@@ -373,7 +373,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <GraphNode
                       v-bind="task"
                       :transform="`translate(0, ${ 240 * index })`"
-                      :class="{ 'flow-none': isFlowNone(task.task.node.flowNums) }"
+                      :class="{ 'dimmed': task.task.node.graphDepth }"
                       v-on:click.stop.capture
                     />
                     <text
@@ -410,8 +410,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </p>
 
             <p>
-              Note that the "future" tasks (the ones ahead of the workflow) are
-              grey. This indicates that are are not yet being managed by Cylc.
+              Note that the tasks outside of the active window (i.e. the ones
+              that are not n=0) are greyed out. This highlights the tasks that
+              Cylc is currently managing.
             </p>
           </v-card-text>
         </v-card>
@@ -429,7 +430,6 @@ import { workflowViews } from '@/views/views'
 import { TaskStateUserOrder } from '@/model/TaskState.model'
 import { Tokens } from '@/utils/uid'
 import { uniqueId } from 'lodash-es'
-import { isFlowNone } from '@/utils/tasks'
 
 export default {
   name: 'Guide',
@@ -453,7 +453,7 @@ export default {
         task: {
           name: 'a',
           tokens: new Tokens('2000/a', true),
-          node: { state: 'succeeded' },
+          node: { state: 'succeeded', graphDepth: 1 },
         },
         jobs: [{
           name: '01',
@@ -465,7 +465,7 @@ export default {
         task: {
           name: 'b',
           tokens: new Tokens('2000/b', true),
-          node: { state: 'running' },
+          node: { state: 'running', graphDepth: 0 },
         },
         jobs: [{
           name: '01',
@@ -477,7 +477,7 @@ export default {
         task: {
           name: 'c',
           tokens: new Tokens('2000/c', true),
-          node: { state: 'waiting', flowNums: '[]' },
+          node: { state: 'waiting', graphDepth: 1 },
         },
         jobs: [],
       },
@@ -485,16 +485,12 @@ export default {
         task: {
           name: 'd',
           tokens: new Tokens('2000/d', true),
-          node: { state: 'waiting', flowNums: '[]' },
+          node: { state: 'waiting', graphDepth: 2 },
         },
         jobs: [],
       },
     ]
   }),
-
-  methods: {
-    isFlowNone,
-  },
 }
 </script>
 
diff --git a/src/views/Table.vue b/src/views/Table.vue
index 7f3334362..16204cfe8 100644
--- a/src/views/Table.vue
+++ b/src/views/Table.vue
@@ -121,6 +121,7 @@ fragment TaskProxyData on TaskProxy {
     runMode
   }
   flowNums
+  graphDepth
 }
 
 fragment JobData on Job {
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index 3864a4070..74895f1d2 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -129,6 +129,7 @@ fragment FamilyProxyData on FamilyProxy {
   isRetry
   isWallclock
   isXtriggered
+  graphDepth
 }
 
 fragment TaskProxyData on TaskProxy {
@@ -150,6 +151,7 @@ fragment TaskProxyData on TaskProxy {
     runMode
   }
   flowNums
+  graphDepth
 }
 
 fragment JobData on Job {
diff --git a/tests/e2e/specs/graph.cy.js b/tests/e2e/specs/graph.cy.js
index 03ce8abaf..4a4a5e705 100644
--- a/tests/e2e/specs/graph.cy.js
+++ b/tests/e2e/specs/graph.cy.js
@@ -151,15 +151,15 @@ describe('Graph View', () => {
   })
 
   describe('Flow nums', () => {
-    it('Shows flow=None task dimmed', () => {
+    it('Shows n!=0 task dimmed', () => {
       cy.visit('/#/graph/one')
       waitForGraphLayout()
-      cy.get('.c-graph-node.flow-none').as('flowNone')
+      cy.get('.c-graph-node.dimmed').as('dimmed')
         .should('have.css', 'opacity')
         .then((opacity) => {
           expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
         })
-      cy.get('@flowNone')
+      cy.get('@dimmed')
         .contains('sleepy')
     })
   })
diff --git a/tests/e2e/specs/table.cy.js b/tests/e2e/specs/table.cy.js
index c91de2118..ff066a6e0 100644
--- a/tests/e2e/specs/table.cy.js
+++ b/tests/e2e/specs/table.cy.js
@@ -259,7 +259,7 @@ describe('State saving', () => {
   })
 
   describe('Flow nums', () => {
-    it('Only shows flow nums when not 1, and flow=None is dimmed', () => {
+    it('Only shows flow nums when not 1, and n!=0 tasks are dimmed', () => {
       cy.visit('/#/table/one')
       cy.get('[data-cy-task-name=failed]')
         .find('[data-cy=flow-num-chip]')
@@ -267,7 +267,7 @@ describe('State saving', () => {
       cy.get('[data-cy-task-name=checkpoint]')
         .find('[data-cy=flow-num-chip]')
         .should('not.exist')
-      cy.get('[data-cy-task-name=sleepy].flow-none')
+      cy.get('[data-cy-task-name=sleepy].dimmed')
         .should('have.css', 'opacity')
         .then((opacity) => {
           expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index f0b380564..b97a0aab4 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -419,7 +419,7 @@ describe('Tree view', () => {
   })
 
   describe('Flow nums', () => {
-    it('Only shows flow nums when not 1, and flow=None is dimmed', () => {
+    it('Only shows flow nums when not 1, and n!=0 tasks are dimmed', () => {
       cy.visit('/#/tree/one')
       cy.get('[data-node-name=failed]')
         .find('[data-cy=flow-num-chip]')
@@ -427,21 +427,21 @@ describe('Tree view', () => {
       cy.get('[data-node-name=checkpoint]')
         .find('[data-cy=flow-num-chip]')
         .should('not.exist')
-      cy.get('[data-node-name=sleepy] .flow-none')
+      cy.get('[data-node-name=sleepy] .dimmed')
         .should('have.css', 'opacity')
         .then((opacity) => {
           expect(parseFloat(opacity)).to.be.closeTo(0.6, 0.2)
         })
       cy.get('[data-node-name=sleepy] .node-expand-collapse-button').click()
         // node expand/collapse button should not be dimmed
-        .parents('.flow-none')
+        .parents('.dimmed')
         .should('not.exist')
         // task icon should be dimmed
         .get('[data-node-name=sleepy] .c-task')
-        .parents('.flow-none')
+        .parents('.dimmed')
         // children should not be dimmed
         .get('[data-node-name=sleepy] .c-treeitem')
-        .parents('.flow-none')
+        .parents('.dimmed')
         .should('not.exist')
     })
   })
diff --git a/tests/unit/utils/tasks.spec.js b/tests/unit/utils/tasks.spec.js
index f101d66c3..85d083cda 100644
--- a/tests/unit/utils/tasks.spec.js
+++ b/tests/unit/utils/tasks.spec.js
@@ -22,7 +22,6 @@ import {
   formatDuration,
   jobMessageOutputs,
   formatFlowNums,
-  isFlowNone,
   getRunTime,
   isTruthyOrZero,
 } from '@/utils/tasks'
@@ -177,17 +176,6 @@ describe('tasks', () => {
     })
   })
 
-  describe('isFlowNone', () => {
-    it.each([
-      [undefined, false],
-      ['[]', true],
-      ['[ ]', true],
-      ['[1]', false],
-    ])('isFlowNone(%o) -> %o', (input, expected) => {
-      expect(isFlowNone(input)).toEqual(expected)
-    })
-  })
-
   describe('isTruthyOrZero', () => {
     it.each([
       [undefined, false],