Skip to content

fix(tidy-tree): keep mindmap edges connected to a non-circular root - #7639

Merged
knsv merged 4 commits into
developfrom
bug/7572_mindmap-tidy-tree-root-edges
Apr 21, 2026
Merged

knsv merged 4 commits into
developfrom
bug/7572_mindmap-tidy-tree-root-edges

Conversation

@knsv-bot

Copy link
Copy Markdown
Collaborator

Summary

Resolves #7572

In the tidy-tree layout, calculateEdgePositions only added an intermediate routing point for source/target nodes whose section was 'left' or 'right'. For root-sourced edges (section === 'root') no intermediate was pushed, so the post-loop intersection recompute used the child's center as the reference and could land the start anchor on the root's top/bottom edge — visually disconnecting the link from the root. The cloud root only appeared correct by coincidence of its rounded silhouette.

  • Added 'root' branches to both the source and target intermediate-point blocks in calculateEdgePositions. The root-side intermediate is placed on the side of the root facing the other node's section (left → -x, right → +x), at y = root.y.
  • Added a unit test that asserts root-sourced edges include the side-facing intermediate (with both generic sign-agreement and exact-coordinate checks).
  • Added an E2E imgSnapshotTest using the exact reproduction from the issue.

Classification

  • Change type: layout algorithm (@mermaid-js/layout-tidy-tree)
  • Breaking change: no — internal function; the rendered diff is the bug fix itself
  • Shared code touched: no — change is contained in the tidy-tree layout package

Verification

  • TDD: test failed before fix (expected -30 to be 20), passes after
  • Lint: passed
  • Unit tests: passed (pnpm vitest run packages/mermaid-layout-tidy-tree — 14/14)
  • E2E snapshot test: added in cypress/integration/rendering/mindmap-tidy-tree.spec.js (5-tidy-tree)
  • comp-review-changes: passed (0 blockers, 0 warnings, 1 info — expected Argos diff for non-circle-root tidy-tree mindmaps; this is the intent of the fix)
  • Visual spot-check: not run locally — geometric correctness is asserted directly by the unit test; Argos provides visual confirmation in CI
  • Full e2e: not run locally — deferred to CI
  • Changeset: generated (patch) for @mermaid-js/layout-tidy-tree and mermaid

🤖 Generated with Claude Code

The tidy-tree layout's calculateEdgePositions only added intermediate
routing points for source/target nodes in the 'left' or 'right' section.
For root-sourced edges (section === 'root'), no intermediate point was
pushed, so the post-loop intersection recompute used the child's center
as the reference and could land the start anchor on the root's top/bottom
edge instead of its left/right edge — visually disconnecting the link.
The cloud root only appeared correct by coincidence of its rounded shape.

Add 'root' branches to both the source and target intermediate-point
blocks. The root-side intermediate is placed on the side facing the
other node's section.

Resolves #7572

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Apr 20, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 81be6af

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@mermaid-js/layout-tidy-tree Patch
mermaid Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify

netlify Bot commented Apr 20, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit 81be6af
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/69e73e00ea072a000885dcac
😎 Deploy Preview https://deploy-preview-7639--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 project configuration.

@github-actions github-actions Bot added Type: Bug / Error Something isn't working or is incorrect Sponsored by MermaidChart labels Apr 20, 2026
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@pkg-pr-new

pkg-pr-new Bot commented Apr 20, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7639

mermaid

npm i https://pkg.pr.new/mermaid@7639

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7639

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7639

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7639

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7639

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7639

commit: 81be6af

@codecov

codecov Bot commented Apr 20, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 24 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.31%. Comparing base (5969033) to head (81be6af).
⚠️ Report is 5 commits behind head on develop.

Files with missing lines Patch % Lines
packages/mermaid-layout-tidy-tree/src/layout.ts 0.00% 24 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           develop   #7639      +/-   ##
==========================================
- Coverage     3.31%   3.31%   -0.01%     
==========================================
  Files          539     540       +1     
  Lines        56664   56699      +35     
  Branches       824     824              
==========================================
  Hits          1880    1880              
- Misses       54784   54819      +35     
Flag Coverage Δ
unit 3.31% <0.00%> (-0.01%) ⬇️

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

Files with missing lines Coverage Δ
packages/mermaid-layout-tidy-tree/src/types.ts 100.00% <ø> (ø)
packages/mermaid-layout-tidy-tree/src/layout.ts 0.21% <0.00%> (-0.02%) ⬇️

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@argos-ci

argos-ci Bot commented Apr 20, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 5 changed, 1 added Apr 21, 2026, 9:25 AM

@knsv
knsv marked this pull request as ready for review April 21, 2026 11:56
@knsv
knsv added this pull request to the merge queue Apr 21, 2026
Merged via the queue into develop with commit 2fe6e55 Apr 21, 2026
30 checks passed
@knsv
knsv deleted the bug/7572_mindmap-tidy-tree-root-edges branch April 21, 2026 14:41
@github-actions github-actions Bot mentioned this pull request May 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Sponsored by MermaidChart Type: Bug / Error Something isn't working or is incorrect

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mindmap's root node and it's links look disconnected when using tidy-tree

3 participants