Fixed styling for lines for ELK flowchart

[itsalam]

📑 Summary

• Added nodeSpacing for line length (note that config seems to be overwritten to default values due to a race condition that elk triggers)
• Inserts specified title as intended
• Applies styling from the db object
• Fixed a bug where db object returned null due to importing syntax convention.

Resolves #4813

📏 Design Decisions

Removed excessive padding, as on render the padding is for an empty graph and the intended graph is inserted below it.
As edgeNodeBetweenLayers already existed as a parameter, it seems like it is the most suitable parameter for adjusting line length. Also re-added working test suites to the elk flowchart to slowly introduce a working test suite.

📋 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	90e134c
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/65fea54b58f5740008801552
😎 Deploy Preview	https://deploy-preview-4844--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.

[sidharthv96]

Can you also check if we can add the line length property working in elk too? (Can go in a different PR if the changes are big, no need to block this one.)

flowchart
A --> B
A ---> C
A ----> D

Loading

flowchart-elk
A --> B
A ---> C
A ----> D

Loading

[sidharthv96]

When comparing the images from the issue and your final image, I see a few minor issues.

1. Title is not centered. (needs to be fixed)
2. The arrows overlap (Will be fixed if you sync with develop)

[sidharthv96]

Please center the title.

[itsalam]

Hi @sidharthv96,

Thanks for getting back to me, had to tinker around a bit, since the Elk function doesn't state its bounds right away, but I think the fixes to the title rendering function and the elk rendering order should make the title consistent.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 44.79%. Comparing base (725b618) to head (90e134c).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #4844   +/-   ##
========================================
  Coverage    44.79%   44.79%           
========================================
  Files           25       25           
  Lines         5353     5353           
  Branches        27       27           
========================================
  Hits          2398     2398           
  Misses        2954     2954           
  Partials         1        1           

Flag	Coverage Δ
unit	44.79% <ø> (ø)

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

[itsalam]

@sidharthv96, are we good to go?

[huynhicode]

Hi @itsalam, @sidharthv96 is currently on vacation.

It looks like there is a linting issue in your PR. Can you see if running pnpm -w run lint:fix fixes the issue?

Also, there is a merge conflict that needs to be resolved.

[itsalam]

Hi there @huynhicode,

Yeah, I had earlier trouble with the pre hook commit linting and @sidharthv96 suggested skipping them. Found a workaround that should pass for now, the changes are going through now. Feel free to write back if theres anything else.

[sidharthv96]

The E2E tests are failing for ELK. @itsalam can you please fix that?

[martin-schaefer]

Is anybody still working on that? Would be so glad if the elk renderer supports the styling of links.

[mermaid-bot]

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