fix: Prevent Legend Labels from Overlapping Diagram Elements in Journey Diagrams #6274
Conversation
Co-authored-by: Pranav Mishra <[email protected]>
Co-authored-by: Shahir Ahmed <[email protected]>
Co-authored-by: Pranav Mishra <[email protected]>
Co-authored-by: Pranav Mishra <[email protected]>
|
github-actions
bot
added
the
Type: Bug / Error
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
commit: |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #6274 +/- ##
=======================================
Coverage 4.46% 4.46%
=======================================
Files 385 384 -1
Lines 54276 54272 -4
Branches 598 623 +25
=======================================
Hits 2425 2425
+ Misses 51851 51847 -4
Flags with carried forward coverage won't be shown. Click here to find out more.
|
|
Hey @sidharthv96, @pranavm2109 and I have fixed the issue with overlapping legend labels in Journey diagrams #5955. The fix ensures proper spacing by tracking the maximum width of legend text elements during the actor legend drawing phase and using this width to adjust the left margin for the diagram elements. We’ve also added E2E tests to verify that spacing remains correct for both normal and long labels. All GitHub tests and CICD checks are passing, and this is ready to be merged. Full details are in the PR description—let us know if you have any questions or feedback! |
…ations Co-authored-by: pranavm2109 <[email protected]>
Shahir-47
changed the title
Shahir-47
changed the title
| @@ -84,31 +90,32 @@ export const draw = function (text, id, version, diagObj) { | |||
| }); | |||
|
|
|||
| drawActorLegend(diagram); | |||
| bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50); | |||
| leftMargin = conf.leftMargin + maxWidth - 22.328125; | |||
There was a problem hiding this comment.
What is 22.328125, please avoid magic numbers.
| cy.then(() => { | ||
| renderGraph( | ||
| `journey | ||
| title Web hook life cycle | ||
| section Darkoob | ||
| Make preBuilt:5: Darkoob user | ||
| register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is maintained | ||
| Map slug to a Prebuilt Job:5: Darkoob user | ||
| section External Service | ||
| set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty | ||
| listen to the events : 5 : External Service | ||
| call darkoob endpoint : 5 : External Service | ||
| section Darkoob | ||
| check for inputs : 5 : DarkoobAPI | ||
| run the prebuilt job : 5 : DarkoobAPI | ||
| `, | ||
| { journey: { useMaxWidth: true } } | ||
| ); | ||
| }); |
There was a problem hiding this comment.
Why is the cy.then required, when it's not used in other functions?
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
| const textElement = svgDraw.drawText(diagram, labelData); | ||
| const textLength = textElement.node().getBBox().width; | ||
| if (textLength > maxWidth) { | ||
| maxWidth = textLength; | ||
| } |
There was a problem hiding this comment.
Not blocker: We should keep this dynamic width part, but should we split the text into more lines, if it's longer that a longer max limit?
…ttps://github.com/Shahir-47/mermaid into bug/5955_adjust-diagram-position-with-legend-width
📑 Summary
Fixed an issue where long legend labels in Journey diagrams could overlap with the diagram elements. By tracking the maximum width of legend text elements, we now ensure proper spacing between the legend and the diagram content.
Resolves #5955
📏 Design Decisions
The implementation works by:
Before:
After:
📋 Tasks
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.