feat(workflow): 'Show data flow' overlay#2613
Open
simlarsen wants to merge 1 commit into
Open
Conversation
… from
Edges show execution order, but the data flow (which step's output feeds which
step's input, via {{ tokens }}) was invisible. This adds a "Data flow" toggle
that draws faint dashed edges from each referenced step to the step that
consumes it.
- Pure deriveDataEdges(nodes) scans argument strings for
{{local.components.<id>.returnValues.…}} references and produces ghost edges
(source → consumer), deduped, ignoring unknown sources and self-references.
- Render-only and OFF by default: the ghost edges are concatenated onto the
edges passed to React Flow but are NEVER added to the edges state — so
onWorkflowUpdated / autosave only ever persists real edges. This sidesteps
the "ghost edges leak into the saved graph" footgun by construction. Ghost
edges are non-deletable with deterministic ids so React Flow doesn't churn.
- Added alongside the Outline toggle in a small top-left canvas toolbar.
Tests: deriveDataEdges (draws source→consumer, dedupes a pair, ignores
unknown/self refs, empty when no refs). 91 workflow tests pass; tsc + eslint
clean.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Author
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Makes the invisible data flow visible on the canvas. Stacked on #2612.
What
Edges show execution order, but the data flow — which step's output feeds which step's input via
{{ tokens }}— was invisible. This adds a "Data flow" toggle that draws faint dashed edges from each referenced step to the step that consumes it.deriveDataEdges(nodes)scans argument strings for{{local.components.<id>.returnValues.…}}references and produces ghost edges (source → consumer), deduped, ignoring unknown sources and self-references.Safe by construction (the design's flagged footgun)
The synthesis warned that ghost edges must never leak into the saved graph. Here they can't: the ghost edges are concatenated onto the
edgespassed to React Flow but are never added to theedgesstate — soonWorkflowUpdated/ autosave only ever persist real edges. The overlay is also off by default, non-deletable, with deterministic ids so React Flow doesn't churn. Worst case if the visual is imperfect is cosmetic; state and saving are untouched.Added alongside the Outline toggle in a small top-left canvas toolbar.
Verification
deriveDataEdges(4 tests): draws a source→consumer ghost edge; dedupes multiple refs between a pair; ignores unknown-source and self references; empty when there are no references.tsc✓,eslint✓.🤖 Generated with Claude Code