Fix edge labels rendered behind nodes and selected edges by handreyrc · Pull Request #203 · open-workflow-specification/editor

handreyrc · 2026-06-25T23:28:05Z

Closes: #199

Summary

This PR fixed the issue where edge labels are being rendered behind parent nodes and selected edges.

Changes

Added higher z-index styling to edge labels.
Adjusted edge z-index to work in a lower range than labels.
Added logic to handle label z-index on edge selection.
Added unit tests.

netlify · 2026-06-25T23:28:10Z

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	`5d5c9e0`
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a3e8307ba0ac90007b26ad8
😎 Deploy Preview	https://deploy-preview-203--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

This PR addresses issue #199 by ensuring edge labels consistently render above parent nodes and above selected edges in the React Flow-based diagram editor.

Changes:

Elevates the React Flow edge-label renderer container via CSS so labels don’t get painted behind nodes.
Introduces a z-index hierarchy where regular edges (0) < selected edges (100) < labels (1000+), and disables React Flow’s automatic edge elevation on select.
Adds/updates unit tests to cover edge/label z-index behavior.

Reviewed changes

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

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/tests/react-flow/edges/Edges.test.tsx	Adds tests for EdgeLabel z-index behavior and edge selection integration.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx	Adds tests for `elevateEdgesOnSelect={false}` and edge z-index behavior in Diagram.
packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx	Adds `selected`-aware z-index styling to edge labels.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Applies explicit z-index management for edges and disables automatic edge elevation on selection.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Elevates `.react-flow__edgelabel-renderer` above nodes to prevent labels being hidden.

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

Copilot

Pull request overview

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

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Copilot

Pull request overview

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

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

lornakelly

LGTM

fantonangeli

LGTM, I only left a comment

fantonangeli · 2026-06-30T09:58:29Z

I think this file will be very useful in the future, and we won't lose track of the z-indexes

fantonangeli · 2026-06-30T10:19:45Z

+    expect(resultString).toContain(`"zIndex":${expectedZIndex}`);
+  });
+
+  it("applies default regular label z-index when selected prop is not provided", () => {


I think this test is already covered by the selected: undefined at line 516

handreyrc · 2026-06-30T13:00:11Z

@ricardozanini,

This PR is good enough to be merged.

Thanks

…ow-specification#203)

…ow-specification#203) Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

* rebase main Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * feat: add toast alert system Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * test: update Mermaid Actions tests Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * add changeset Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * fix copilot complaints Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * feat: add Sonner Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * fix copilot complaints Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * fix: add license header Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * fix: replace hardcoded colors with css variables in toast Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * feat: Styling tweaks (#206) Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * Fix edge labels rendered behind nodes and selected edges (#203) Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * Style start/end node components (#202) * start end node styling Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * Copilot and team review Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * updating pmpl from upstream Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * Copilot reviews Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * colour fixing Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * fixing colour Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * node unclickable Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * size made small Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * running pnpm changeset Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * naming changeset file Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * removed custom node container Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> * resolving warnings Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> --------- Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> * fix: replace hardcoded colors with css variables in toast Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> --------- Signed-off-by: Cheryl Kong <cherylkong50@gmail.com> Signed-off-by: kumaradityaraj <sedulous.0007@gmail.com> Co-authored-by: Cheryl Kong <cherylkong50@gmail.com> Co-authored-by: lornakelly <lornakelly88@gmail.com> Co-authored-by: Handreyrc <47090342+handreyrc@users.noreply.github.com> Co-authored-by: Kumar Aditya Raj <sedulous.0007@gmail.com>

Copilot AI review requested due to automatic review settings June 25, 2026 23:28

handreyrc self-assigned this Jun 25, 2026

handreyrc added the bug Something isn't working label Jun 25, 2026

handreyrc added this to Editor Project Tracker Jun 25, 2026

Copilot started reviewing on behalf of handreyrc June 25, 2026 23:28

View session

github-project-automation Bot moved this to Backlog in Editor Project Tracker Jun 25, 2026

Copilot AI reviewed Jun 25, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/tests/react-flow/edges/Edges.test.tsx Resolved

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/edges/Edges.tsx Resolved

handreyrc force-pushed the fix-edge-label-z-index branch from 5390e99 to 3f898d0 Compare June 25, 2026 23:33

Copilot AI review requested due to automatic review settings June 25, 2026 23:47

Copilot started reviewing on behalf of handreyrc June 25, 2026 23:48

View session

Copilot AI reviewed Jun 25, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/styles.css Resolved

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx Resolved

handreyrc force-pushed the fix-edge-label-z-index branch from 33ede30 to c26042c Compare June 26, 2026 00:05

handreyrc requested review from fantonangeli, kumaradityaraj and lornakelly June 26, 2026 00:15

lornakelly reviewed Jun 26, 2026

View reviewed changes

Comment thread pnpm-lock.yaml Resolved

handreyrc added 3 commits June 26, 2026 09:13

Fix edge labels rendered behind nodes and selected edges

bd35798

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

fix copilot complaints

93d2ca9

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

fix pnpm-lock.yaml

99f8a18

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

handreyrc force-pushed the fix-edge-label-z-index branch from c26042c to 99f8a18 Compare June 26, 2026 13:22

Copilot AI review requested due to automatic review settings June 26, 2026 13:22

Copilot started reviewing on behalf of handreyrc June 26, 2026 13:22

View session

Copilot AI reviewed Jun 26, 2026

View reviewed changes

fix copilot complaints

5d5c9e0

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

handreyrc requested a review from lornakelly June 26, 2026 13:56

lornakelly approved these changes Jun 26, 2026

View reviewed changes

fantonangeli approved these changes Jun 30, 2026

View reviewed changes

handreyrc requested a review from ricardozanini June 30, 2026 12:59

ricardozanini merged commit fd9e132 into open-workflow-specification:main Jun 30, 2026
12 checks passed

github-project-automation Bot moved this from Backlog to Done in Editor Project Tracker Jun 30, 2026

cheryl7114 pushed a commit to cheryl7114/editor that referenced this pull request Jul 3, 2026

Fix edge labels rendered behind nodes and selected edges (open-workfl…

f8a4aeb

…ow-specification#203)

cheryl7114 pushed a commit to cheryl7114/editor that referenced this pull request Jul 3, 2026

Fix edge labels rendered behind nodes and selected edges (open-workfl…

2c323fd

…ow-specification#203) Signed-off-by: Cheryl Kong <cherylkong50@gmail.com>

Conversation

handreyrc commented Jun 25, 2026

Summary

Changes

Uh oh!

netlify Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for swf-editor ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly left a comment

Choose a reason for hiding this comment

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

fantonangeli Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

fantonangeli Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

handreyrc commented Jun 30, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

netlify Bot commented Jun 25, 2026 •

edited

Loading