Give markers unique id's per graph

[chadfawcett]

📑 Summary

This PR makes markers have unique IDs based on the graph they are within.

Resolves #1871
Supersedes #3546 - This PR seemed abandoned

📏 Design Decisions

While #3546 seemed to resolve #1871, it appeared to be abandoned and also had a lot of syntax changes. I decided to keep the fix simple so hopefully it's easier to review and quicker to merge.

This implementation gives markers unique IDs based on the graph they are within. By using the ID, rather than some random string, we are able to reference the markers based on graph container ID when re-positioning.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	983cf45
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/6502b816cefe510008e4a755
😎 Deploy Preview	https://deploy-preview-4825--mermaid-js.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 site configuration.

[codecov]

Codecov Report

Merging #4825 (983cf45) into develop (ce78ff1) will increase coverage by 6.59%.
The diff coverage is 90.32%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #4825      +/-   ##
===========================================
+ Coverage    73.11%   79.70%   +6.59%     
===========================================
  Files          138      148      +10     
  Lines        12544    13024     +480     
  Branches       603      612       +9     
===========================================
+ Hits          9171    10381    +1210     
+ Misses        3225     2510     -715     
+ Partials       148      133      -15     

Flag	Coverage Δ
e2e	84.75% <90.32%> (+7.94%)	⬆️
unit	43.67% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
packages/mermaid/src/dagre-wrapper/edges.js	83.97% <84.21%> (+7.66%)	⬆️
packages/mermaid/src/dagre-wrapper/index.js	98.82% <100.00%> (ø)
packages/mermaid/src/dagre-wrapper/markers.js	100.00% <100.00%> (ø)

... and 43 files with indirect coverage changes

[sidharthv96]

@chadfawcett the changes looks great!

Can you please add an integration test to verify that the issue is solved?

The content from #1871 can be in the html file.
You can refer https://github.com/mermaid-js/mermaid/blob/bf18f25c820fb9264fe70ce5113a85f676cfd306/cypress/integration/other/ghsa.spec.js on how it should be done.

[chadfawcett]

@sidharthv96 I didn't see any documentation around contributing to the tests, so I did my best guess at what you might want. It'd be nice to see some documentation about what you expect in the CONTRIBUTING.md doc with best practices around naming and file location etc.

Here's a screenshot of what I see in Cypress. Let me know if you need me to make changes to what I've done.

[sidharthv96]

The test is great.
I've added 2 more cases.

[mermaid-bot]

@chadfawcett, Thank you for the contribution!
You are now eligible for a year of Premium account on MermaidChart.
Sign up with your GitHub account to activate.

[chadfawcett]

Thanks @sidharthv96 and @knsv for getting this merged in. Any idea when I could expect this fix to be released in a new version on npm?

[sidharthv96]

Our plan was to release today, but we discovered some bugs while testing. So that has blocked the release.