fix(workflow): draw a highlighted edge over the ordinary ones - #6642
Conversation
An edge's z came from the nesting depth of the container it belongs to, and a highlighted edge kept that depth like any other. A line one level deeper therefore sat above it and painted straight through the highlight, cutting it in half wherever the two crossed. Give a highlighted edge — selected, or connected to the selected card — the top tier of the edge band instead. Depth only ever ordered edges against each other, and once the user has picked one out, being drawn whole matters more than which container it came from. The tier stays inside the band, below the cards, deliberately: highlighted edges were elevated over the cards once before and drew across the chrome of their own endpoints. A line belongs behind cards, knobs and the action-bar swell whether or not it is highlighted, so ordinary edges give up the top of the band rather than the band being widened into the cards.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryLow Risk Overview
New Adds Reviewed by Cursor Bugbot for commit 7496c23. Configure here. |
It renders highlighted — its data carries `isConnectedToSelection` — but it was the one call site left taking a depth tier, so the line being drawn could be crossed by an ordinary edge in a deeper container. Highlighted now means elevated with no exception. Also drop the export on the highlighted tier: nothing outside the module reads it, and the band's tiers are an implementation detail of `getEdgeZIndex`.
Greptile SummaryThe PR centralizes edge-highlight detection and reserves a z-index tier so highlighted workflow edges render above ordinary edges while remaining below cards.
Confidence Score: 5/5The PR appears safe to merge because no blocking failure remains in the eligible follow-up scope. No blocking failure remains.
|
| Filename | Overview |
|---|---|
| packages/workflow-renderer/src/canvas-layers.ts | Reserves z-index 19 for highlighted edges and confines ordinary depth-based edges to tiers 10–18. |
| packages/workflow-renderer/src/canvas-layers.test.ts | Covers highlighted-edge precedence and the surrounding canvas-layer invariants. |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx | Computes edge highlighting from node, edge, and editor state before assigning render z-index. |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/edge-highlight.ts | Centralizes the highlight and editor-connectivity predicates used by canvas consumers. |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx | Adopts the shared predicate for edge highlight rendering. |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx | Uses the shared predicate to keep endpoint-knob highlighting aligned with connected edges. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart BT
Containers[Container bodies: 0–9]
Ordinary[Ordinary edges: 10–18]
Highlighted[Highlighted edges: 19]
InFlight[In-flight connection: 20]
Cards[Cards: 21+]
Children[Container children: 1000]
Picker[Connection picker: 2000]
Containers --> Ordinary --> Highlighted --> InFlight --> Cards --> Children --> Picker
Reviews (3): Last reviewed commit: "fix(workflow): give the edge highlight o..." | Re-trigger Greptile
|
@cursor review |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
The z-index elevation I added checked canvas selection only, while the edge darkens for panel focus too — a block open in the editor lights its edges, and those stayed depth-tiered, so an ordinary edge could still cut through the highlight. The bug I set out to fix, on the path I had not covered. The condition already existed in two places and the second one carries a comment saying it must mirror the first exactly, because a knob checking fewer conditions than the line leaves a dark line running into a light knob. Adding the z would have made a third copy, and the finding here is what the third copy gets you. One predicate now, in `edge-highlight`, used by the line, the knobs, and the z. The canvas subscribes to the panel store rather than reading `getState()`, since the z has to be recomputed when the open block changes.
|
@cursor review |
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit 7496c23. Configure here.
1 participant
Summary
EDGE_Z_BASE; an edge one container deeper sits above it — so the deeper, unselected line paints straight through the highlight.The tier deliberately stays inside the band, below the cards. There's a comment at the call site recording that highlighted edges were elevated over cards once before and drew across the chrome of their own endpoints. So ordinary edges give up the top of the band (
EDGE_Z_DEPTH_MAX, 18) rather than the band being widened into the cards.EDGE_Z_MAX(20) is untouched, so the in-flight connection line still sits above everything.Resulting order, unchanged either side of the new tier: container bodies
0…→ ordinary edges10…18→ highlighted edges19→ in-flight line20→ cards21+→ container children1000→ connection picker2000.Type of Change
Testing
New unit tests on
canvas-layers, pinning both directions of the invariant — that a highlighted edge beats every ordinary one at any depth, and that it stays under the cards,getBlockZIndex, and container children. Two of them fail on the old code (expected 10 to be less than 10— the highlighted edge tied with an ordinary top-level one).Also pinned: ordinary edges still order by depth, every edge still clears the container body it crosses, and the in-flight line still tops the band.
One honest note on a pre-existing limit the tests now document. The band is fixed, so past its ceiling every edge saturates at the deepest tier and no longer clears a container nested that far. That was already true — the old cap was
EDGE_Z_MAX, so it broke past depth 10 — and this change moves the ceiling from depth 10 to depth 8. Nothing in the editor nests remotely near either.Full
workflow-renderersuite green (70), type-check and lint clean across all 23 packages.Not verified on a running canvas — this is layering, so it's worth a look at a selected edge crossing a nested one before merging.
Checklist