Open
Conversation
Tree diagrams need a way to keep the root visually centered while first-level branches expand to both sides. The new center orient reuses the existing orthogonal layout pass per side, maps each side into the left or right half of the layout box, and keeps the existing LR/RL/TB/BT/radial behavior on the normal path. Constraint: Keep the feature inside the existing tree series layout and rendering model without adding dependencies. Rejected: Add a separate layout type | center expansion is still an orthogonal tree orientation, and a new layout would duplicate existing traversal behavior. Confidence: high Scope-risk: moderate Reversibility: clean Directive: Root-child side assignment is only honored for orient:center; do not apply side to nested nodes without adding nested-side tests. Tested: npx jest --config test/ut/jest.config.cjs --coverage=false test/ut/spec/series/tree.test.ts --runInBand Tested: npx eslint src/chart/tree/TreeSeries.ts src/chart/tree/treeLayout.ts src/chart/tree/TreeView.ts test/ut/spec/series/tree.test.ts Tested: npx tsc --noEmit Tested: git diff --check -- src/chart/tree/TreeSeries.ts src/chart/tree/TreeView.ts src/chart/tree/treeLayout.ts test/tree-center.html test/ut/spec/series/tree.test.ts Tested: Chrome headless screenshot of test/tree-center.html saved at .codex-artifacts/tree-center.png Not-tested: Full visual regression suite
The tree center layout needs a visual case that makes the intended single-root behavior explicit. The existing case now remains as the explicit side example, and a second chart shows one root splitting first-level branches automatically to both sides. Constraint: Keep the evidence in the existing tree HTML test case rather than adding another page. Rejected: Add a second standalone HTML file | one page makes explicit-side and automatic-side behavior easier to compare in the same screenshot. Confidence: high Scope-risk: narrow Reversibility: clean Tested: git diff --check -- test/tree-center.html Tested: npx jest --config test/ut/jest.config.cjs --coverage=false test/ut/spec/series/tree.test.ts --runInBand Tested: npx eslint src/chart/tree/TreeSeries.ts src/chart/tree/treeLayout.ts src/chart/tree/TreeView.ts test/ut/spec/series/tree.test.ts Tested: Chrome headless screenshot saved at .codex-artifacts/tree-center-single-root.png Not-tested: Full visual regression suite
|
Thanks for your contribution! The pull request is marked to be To reviewers: If this PR is going to be described in the changelog in the future release, please make sure this PR has one of the following labels: This message is shown because the PR description doesn't contain the document related template. |
Contributor
|
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-21603@fd895ee |
There was a problem hiding this comment.
Pull request overview
Adds a new centered orientation mode for orthogonal tree series so a single real root stays centered while its children expand to both left and right, including rendering/label tweaks and test coverage.
Changes:
- Add
orient: 'center'support in tree layout with root-children side assignment (side: 'left' | 'right'or automatic split). - Update orthogonal edge path building (polyline) and curve control logic to handle centered trees, plus default label placement adjustments.
- Add unit tests and an HTML visual case covering explicit-side and automatic-side scenarios.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/chart/tree/TreeSeries.ts | Extends orient option typings/docs to include 'center' and adds side node option. |
| src/chart/tree/treeLayout.ts | Implements centered orthogonal layout by splitting root children into left/right subtrees and laying them out around a centered root. |
| src/chart/tree/TreeView.ts | Updates edge/path rendering and label placement behavior for orient: 'center' (polyline + curve handling). |
| test/ut/spec/series/tree.test.ts | Adds unit tests validating centered root positioning and left/right expansion behavior. |
| test/tree-center.html | Adds/updates a manual visual test page for centered trees (explicit-side + auto-split cases). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
orient: 'center'for orthogonal tree series so one real root can stay centered while root children expand to both sides.side: 'left' | 'right'; when omitted, root children are split automatically by order.test/tree-center.htmlwith explicit-side and single-root automatic-side visual cases.Validation
npx jest --config test/ut/jest.config.cjs --coverage=false test/ut/spec/series/tree.test.ts --runInBandnpx eslint src/chart/tree/TreeSeries.ts src/chart/tree/treeLayout.ts src/chart/tree/TreeView.ts test/ut/spec/series/tree.test.tsnpx tsc --noEmitgit diff --check -- test/tree-center.html.codex-artifacts/tree-center-single-root.pngNotes
.gitignoreand.codex-artifacts/were left out of this PR.