ghost tasks: switch from flow=None to graphDepth=0

[ChrisPaulBennett]

Closes #2420.
Alters the logic so that all tasks that are not N=0 (N!=0) are dimmed to make it clearer what is currently active

Check List

• I have read CONTRIBUTING.md and added my name as a Code Contributor.
• Contains logically grouped changes (else tidy your branch by rebase).
• Does not contain off-topic changes (use other PRs for other changes).
• Applied any dependency changes to both setup.cfg (and conda-environment.yml if present).
• Tests are included (or explain why tests are not needed).
• Changelog entry included if this is a change that can affect users
• Cylc-Doc pull request opened if required at cylc/cylc-doc/pull/XXXX.
• If this is a bug fix, PR should be raised against the relevant ?.?.x branch.

[ChrisPaulBennett]

The dimming didn't seem to be that visible on my display. So I've cranked it up a notch

[Copilot]

Pull request overview

Updates the UI “ghost task” dimming logic to use graphDepth (n-window) rather than flow=None, aligning dimming with the concept of “active” (n=0) vs non-active (n≠0) nodes across views.

Changes:

• Replace flow=None-based dimming with graphDepth-based dimming via new isN0(graphDepth) utility.
• Update GraphQL fragments to request graphDepth for task/family proxies where needed.
• Update unit/e2e tests, docs copy, styling, and mock workflow data to reflect the new dimming semantics.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tests/unit/utils/tasks.spec.js	Updates unit tests from isFlowNone to isN0 behavior.
tests/e2e/specs/tree.cy.js	Updates selectors/expectations from .flow-none to .dimmed in Tree view.
tests/e2e/specs/table.cy.js	Updates selectors/expectations from .flow-none to .dimmed in Table view.
tests/e2e/specs/graph.cy.js	Updates selectors/expectations from .flow-none to .dimmed in Graph view.
src/views/Tree.vue	Adds graphDepth to family/task proxy fragments for Tree view data.
src/views/Table.vue	Adds graphDepth to task proxy fragment for Table view data.
src/views/Guide.vue	Updates Guide example + text to describe/reflect n-window dimming via graphDepth.
src/views/Graph.vue	Switches Graph node dimming to graphDepth and updates Graph task proxy fragment accordingly.
src/utils/tasks.js	Replaces isFlowNone with isN0(graphDepth) and updates related docs.
src/styles/index.scss	Renames .flow-none styling to .dimmed and adjusts opacity.
src/services/mock/json/workflows/one.json	Adds graphDepth values to mock task nodes for e2e/dev data.
src/components/cylc/tree/TreeItem.vue	Applies .dimmed class to tree node data based on graphDepth (including families).
src/components/cylc/table/Table.vue	Applies .dimmed class to table rows based on graphDepth.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[oliver-sanders]

(only assign two reviewers - ovbs copilot don't count)

[oliver-sanders]

Is flowNums used by this view any more?

Run through the modified queries and check usage. Note the field might be used by a component used by the view rather than in the view code itself.

If happy the field is not being used, remove it from the query.

[ChrisPaulBennett]

Look up at the co pilot suggestion

[samuel-denton]

LGTM

[hjoliver]

I like this. A couple of comments though. Here's it is for the graph view in my environment:

We don't want to dim ghost tasks too much, but on the other hand n=0 tasks aren't 100% obvious without staring at the screen for bit. Could we try dimming the ghosts a bit more, and/or making the dimming level a user-configurable setting?

Also, it doesn't help that the arrows are all dark black. Ideally only arrows between n=0 tasks (which is somewhat rare) should be black. If that's difficult to achieve, it might be better to dim all the arrows. It's the n=0 tasks that we want to emphasize here after all, not the arrows.

[oliver-sanders]

Could we try dimming the ghosts a bit more, and/or making the dimming level a user-configurable setting?

Oof, trying to avoid too much dimming (accessibility issue), yes, we could feasibly make this configurable (though would rather just cut the compromise right).

I think the graph view edge styling would require more data interfaces. We've currently got the family collapsing branch (slow progress) in play, so don't want to go messing with the Graph view too much until we're able to get that in.

Have linked this comment into #133 (comment)

[hjoliver]

OK, agreed ideally edge styling would reflect graph depth too, but that might be harder to implement.

In the meantime, how about these ideas:

• for the edges, it looks kinda weird to have dark black edges connecting grayed-out ghost tasks. How about we just gray out all the edges. It's the n=0 nodes that most need to be emphasized after all, not the edges.
• for the nodes, what about a toggle button in all views that heavily grays out n > 0 nodes? When toggled on, the n=0 distinction will be very clear, but you can toggle off again if you need to see the details of the other nodes.

[oliver-sanders]

How about we just gray out all the edges

We could certainly make the edges grey-er without little work and without creating difficult conflicts. Might not go quite as light as the n!=0 task grey for visibility reasons, but can fiddle to taste.

what about a toggle button in all views that heavily grays out n > 0 nodes

See this issue #470 (suggested groupings - point 4).

Do-able, and a worthwhile feature, but something to consider for the future IMO.