Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Give markers unique id's per graph #4825

Merged

Conversation

chadfawcett
Copy link
Contributor

@chadfawcett chadfawcett commented Sep 8, 2023

📑 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

@netlify
Copy link

netlify bot commented Sep 8, 2023

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...

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
Copy link

codecov bot commented Sep 8, 2023

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

Impacted file tree graph

@@             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

Copy link
Member

@sidharthv96 sidharthv96 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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
Copy link
Contributor Author

@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.

Screenshot 2023-09-11 at 11 48 12 AM

Copy link
Member

@sidharthv96 sidharthv96 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

cypress/platform/marker_unique_id.html Show resolved Hide resolved
chadfawcett and others added 2 commits September 12, 2023 10:29
* develop:
  chore: Fix type in 'getLineFunctionsWithOffset'
  refactor: Add getLineFunctionsWithOffset function
  refactor: Move EdgeData to types
  fix: PointStart marker refX
  chore(deps): update all patch dependencies
  refactor: Fix typings in utils.ts
  chore: Add @internal to createCSSStyles
  chore: Bump version
  refactor: Remove unused variables
  fix: mermaid-js#4818 support `getClasses` in external diagrams.
@knsv knsv enabled auto-merge September 14, 2023 07:39
@knsv knsv added this pull request to the merge queue Sep 14, 2023
Merged via the queue into mermaid-js:develop with commit d539f70 Sep 14, 2023
17 checks passed
@mermaid-bot
Copy link

mermaid-bot bot commented Sep 14, 2023

@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 chadfawcett deleted the bug/1871_fix_duplicate_marker_ids branch September 14, 2023 18:20
@chadfawcett
Copy link
Contributor Author

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
Copy link
Member

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

fuxingloh referenced this pull request in fuxingloh/contented Oct 3, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [mermaid](https://togithub.com/mermaid-js/mermaid) | [`10.4.0` ->
`10.5.0`](https://renovatebot.com/diffs/npm/mermaid/10.4.0/10.5.0) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/mermaid/10.5.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/mermaid/10.5.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/mermaid/10.4.0/10.5.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/mermaid/10.4.0/10.5.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>mermaid-js/mermaid (mermaid)</summary>

###
[`v10.5.0`](https://togithub.com/mermaid-js/mermaid/releases/tag/v10.5.0):
10.5.0

[Compare
Source](https://togithub.com/mermaid-js/mermaid/compare/v10.4.0...v10.5.0)

#### What's Changed

##### Features

- feat(er): add entity name alias by
[@&#8203;tomperr](https://togithub.com/tomperr) in
[https://github.com/mermaid-js/mermaid/pull/4758](https://togithub.com/mermaid-js/mermaid/pull/4758)

##### Bugfixes

- Fix Twitter fontawesome class in flowchart.md by
[@&#8203;GingerNinjaNicko](https://togithub.com/GingerNinjaNicko) in
[https://github.com/mermaid-js/mermaid/pull/4723](https://togithub.com/mermaid-js/mermaid/pull/4723)
- fix(pie): align slices and legend orders by
[@&#8203;Yokozuna59](https://togithub.com/Yokozuna59) in
[https://github.com/mermaid-js/mermaid/pull/4774](https://togithub.com/mermaid-js/mermaid/pull/4774)
- Update class member handling by
[@&#8203;jgreywolf](https://togithub.com/jgreywolf) in
[https://github.com/mermaid-js/mermaid/pull/4534](https://togithub.com/mermaid-js/mermaid/pull/4534)
- fix(er): allow underscore as leading char by
[@&#8203;tomperr](https://togithub.com/tomperr) in
[https://github.com/mermaid-js/mermaid/pull/4776](https://togithub.com/mermaid-js/mermaid/pull/4776)
- Align arrows on sequence diagram by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4804](https://togithub.com/mermaid-js/mermaid/pull/4804)
- fix: Allow hollow markers on edges by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4788](https://togithub.com/mermaid-js/mermaid/pull/4788)
- fix: Fix for vulnerability making it possible to add javascript in
class names by [@&#8203;knsv](https://togithub.com/knsv)

##### Documentation

- Docs/2910 Remove n00b and fix some docs by
[@&#8203;nirname](https://togithub.com/nirname) in
[https://github.com/mermaid-js/mermaid/pull/4767](https://togithub.com/mermaid-js/mermaid/pull/4767)
- fix: typos by [@&#8203;omahs](https://togithub.com/omahs) in
[https://github.com/mermaid-js/mermaid/pull/4801](https://togithub.com/mermaid-js/mermaid/pull/4801)
- "CSS" instead of "css" in flowchart.md by
[@&#8203;jakeboone02](https://togithub.com/jakeboone02) in
[https://github.com/mermaid-js/mermaid/pull/4797](https://togithub.com/mermaid-js/mermaid/pull/4797)
- fix(docs): Correct repeated text in flowchart.md by
[@&#8203;andriy-koz](https://togithub.com/andriy-koz) in
[https://github.com/mermaid-js/mermaid/pull/4810](https://togithub.com/mermaid-js/mermaid/pull/4810)
- Update link to Discourse theme component by
[@&#8203;gschlager](https://togithub.com/gschlager) in
[https://github.com/mermaid-js/mermaid/pull/4811](https://togithub.com/mermaid-js/mermaid/pull/4811)
- New Mermaid Live Editor for Confluence Cloud by
[@&#8203;zhifeiyue](https://togithub.com/zhifeiyue) in
[https://github.com/mermaid-js/mermaid/pull/4814](https://togithub.com/mermaid-js/mermaid/pull/4814)
- Update classDiagram.md by
[@&#8203;jgreywolf](https://togithub.com/jgreywolf) in
[https://github.com/mermaid-js/mermaid/pull/4781](https://togithub.com/mermaid-js/mermaid/pull/4781)
- Support member definition to initialize class by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4786](https://togithub.com/mermaid-js/mermaid/pull/4786)
- fix: Add support for `~test Array~string~` back in Class by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4805](https://togithub.com/mermaid-js/mermaid/pull/4805)
- Added support for millisecond and second to gantt tickInterval by
[@&#8203;vertxxyz](https://togithub.com/vertxxyz) in
[https://github.com/mermaid-js/mermaid/pull/4778](https://togithub.com/mermaid-js/mermaid/pull/4778)
- Add directive support to all diagrams by preprocessing by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4759](https://togithub.com/mermaid-js/mermaid/pull/4759)
- Update README.md by
[@&#8203;jgreywolf](https://togithub.com/jgreywolf) in
[https://github.com/mermaid-js/mermaid/pull/4780](https://togithub.com/mermaid-js/mermaid/pull/4780)

##### Chores

- chore(deps): update all minor dependencies (minor) by
[@&#8203;renovate](https://togithub.com/renovate) in
[https://github.com/mermaid-js/mermaid/pull/4783](https://togithub.com/mermaid-js/mermaid/pull/4783)
- chore(deps): update all patch dependencies (patch) by
[@&#8203;renovate](https://togithub.com/renovate) in
[https://github.com/mermaid-js/mermaid/pull/4782](https://togithub.com/mermaid-js/mermaid/pull/4782)
- chore(deps): update all patch dependencies (patch) by
[@&#8203;renovate](https://togithub.com/renovate) in
[https://github.com/mermaid-js/mermaid/pull/4809](https://togithub.com/mermaid-js/mermaid/pull/4809)
- chore: move `commonDb` into `diagrams/common/commonDb` by
[@&#8203;Yokozuna59](https://togithub.com/Yokozuna59) in
[https://github.com/mermaid-js/mermaid/pull/4802](https://togithub.com/mermaid-js/mermaid/pull/4802)
- Use utf8 encoding in Jupyter example by
[@&#8203;jonashaag](https://togithub.com/jonashaag) in
[https://github.com/mermaid-js/mermaid/pull/4701](https://togithub.com/mermaid-js/mermaid/pull/4701)
- Update flowchart.md by [@&#8203;Ogglas](https://togithub.com/Ogglas)
in
[https://github.com/mermaid-js/mermaid/pull/4792](https://togithub.com/mermaid-js/mermaid/pull/4792)
- Update flowchart.md by [@&#8203;dsblank](https://togithub.com/dsblank)
in
[https://github.com/mermaid-js/mermaid/pull/4798](https://togithub.com/mermaid-js/mermaid/pull/4798)
- Refactor `cypress/helpers/util.ts` by
[@&#8203;RohanHandore](https://togithub.com/RohanHandore) in
[https://github.com/mermaid-js/mermaid/pull/4340](https://togithub.com/mermaid-js/mermaid/pull/4340)
- refactor: Fix typings in utils.ts by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4826](https://togithub.com/mermaid-js/mermaid/pull/4826)
- Support ClassDefs in external diagrams by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4819](https://togithub.com/mermaid-js/mermaid/pull/4819)
- Fix: flowchartElk Arrow overlap by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4830](https://togithub.com/mermaid-js/mermaid/pull/4830)
- Give markers unique id's per graph by
[@&#8203;chadfawcett](https://togithub.com/chadfawcett) in
[https://github.com/mermaid-js/mermaid/pull/4825](https://togithub.com/mermaid-js/mermaid/pull/4825)

#### New Contributors

- [@&#8203;GingerNinjaNicko](https://togithub.com/GingerNinjaNicko) made
their first contribution in
[https://github.com/mermaid-js/mermaid/pull/4723](https://togithub.com/mermaid-js/mermaid/pull/4723)
- [@&#8203;omahs](https://togithub.com/omahs) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4801](https://togithub.com/mermaid-js/mermaid/pull/4801)
- [@&#8203;jakeboone02](https://togithub.com/jakeboone02) made their
first contribution in
[https://github.com/mermaid-js/mermaid/pull/4797](https://togithub.com/mermaid-js/mermaid/pull/4797)
- [@&#8203;andriy-koz](https://togithub.com/andriy-koz) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4810](https://togithub.com/mermaid-js/mermaid/pull/4810)
- [@&#8203;gschlager](https://togithub.com/gschlager) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4811](https://togithub.com/mermaid-js/mermaid/pull/4811)
- [@&#8203;zhifeiyue](https://togithub.com/zhifeiyue) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4814](https://togithub.com/mermaid-js/mermaid/pull/4814)
- [@&#8203;vertxxyz](https://togithub.com/vertxxyz) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4778](https://togithub.com/mermaid-js/mermaid/pull/4778)
- [@&#8203;jonashaag](https://togithub.com/jonashaag) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4701](https://togithub.com/mermaid-js/mermaid/pull/4701)
- [@&#8203;Ogglas](https://togithub.com/Ogglas) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4792](https://togithub.com/mermaid-js/mermaid/pull/4792)
- [@&#8203;dsblank](https://togithub.com/dsblank) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4798](https://togithub.com/mermaid-js/mermaid/pull/4798)
- [@&#8203;RohanHandore](https://togithub.com/RohanHandore) made their
first contribution in
[https://github.com/mermaid-js/mermaid/pull/4340](https://togithub.com/mermaid-js/mermaid/pull/4340)
- [@&#8203;chadfawcett](https://togithub.com/chadfawcett) made their
first contribution in
[https://github.com/mermaid-js/mermaid/pull/4825](https://togithub.com/mermaid-js/mermaid/pull/4825)

**Full Changelog**:
mermaid-js/mermaid@v10.4.0...v10.5.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/levaintech/contented).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4wLjMiLCJ1cGRhdGVkSW5WZXIiOiIzNy4wLjMiLCJ0YXJnZXRCcmFuY2giOiJtYWluIn0=-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants