feat: Highlight edge path on selection

[handreyrc]

Closes: #186

Summary

When paths are merged by the auto-layout, edges may overlap each other making it hard to follow. By selecting an edge it should be possible to clear visualize the whole path of that edge.

Changes

• Brought selected edge to the top by setting a high z-index when an edge is selected and then restoring it when it is deselected.
• Preserved edge stroke color on selection.
• Added shade to the selected edge make its path easy to follow.
• Added unit tests.

[netlify]

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	521c552
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a3bf080f5facd00089936bf
😎 Deploy Preview	https://deploy-preview-196--swf-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Adds improved edge-selection visibility in the Serverless Workflow diagram editor to make overlapping/merged edge paths easier to follow by elevating selected edges visually and in render order.

Changes:

• Add a selected-aware edge path class so selected edges can be styled distinctly.
• Update edge change handling to set a high zIndex for selected edges.
• Add/extend unit tests and introduce a changeset for the feature release.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx	Appends a selected class to edge paths when an edge is selected.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Updates onEdgesChange to assign zIndex based on selection state.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Adds selected-edge styling to preserve stroke colors and apply a drop-shadow highlight.
packages/serverless-workflow-diagram-editor/tests/react-flow/edges/Edges.test.tsx	Adds parameterized tests verifying selected vs non-selected edge class behavior.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx	Adds tests around onEdgesChange / zIndex behavior (with a noted test-quality issue).
.changeset/edge-path-highlight.md	Declares a minor version bump for the diagram editor package.

---

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

[lornakelly]

@handreyrc Thanks for the PR, wondering if when you select an edge with a label, the label stays on top of the line if that label is for that edge

For example, here it makes sense that the edge is over sessionStarted as its the statusError edge that is selected. But would be good to have the statusError label appear on top of the edge

[handreyrc]

@handreyrc Thanks for the PR, wondering if when you select an edge with a label, the label stays on top of the line if that label is for that edge

For example, here it makes sense that the edge is over sessionStarted as its the statusError edge that is selected. But would be good to have the statusError label appear on top of the edge

@lornakelly,

There is a general z-index issue around labels. They are also being drawn behind parent nodes.
I'll open an issue for that and fix it in a separate PR.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

[fantonangeli]

Thanks @handreyrc

[lornakelly]

LGTM

[handreyrc]

@ricardozanini,

If you have no further considerations, this PR is good enough to be merged.

Thanks

[ricardozanini]

Looks rad!!!