Consolidate tree components: Tree View Files + Tree View Code - #1134
dbacomputer wants to merge 2 commits into
Conversation
rows.push(...childRows) overflowed the engine's call-stack argument limit once a subtree flattened to tens of thousands of rows (e.g. the JsonTree stories' 20k-record demo), throwing "Maximum call stack size exceeded" from inside the component. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…tory Renames the JsonTree story group from "Components/JsonTree" to "Components/Tree View Code" and adds a small, editable Default story so the component can be evaluated on its own, without loading the full Node Property Panel. Documents where it's already used (Node Property Panel Input/Output, Templates/Flow Standalone) so it's easier to find real usage examples. Part of consolidating this design system's tree components under two names: Tree View Files (apollo-wind's file/folder tree) and Tree View Code (this component). Skips auto-generated Controls/props table (no `component:` in meta): JsonTree's recursive node type and several function-valued props crash Storybook's docgen renderer. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
🟡 Changes recommended
The bug fix lacks a regression unit test for the large-row flattening scenario, despite existing flattenJsonTree test coverage in the same component area.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR is a first step toward the “Tree View Files” vs “Tree View Code” naming convention by making JsonTree discoverable in Storybook under a new “Tree View Code” entry, and it fixes a flattenJsonTree runtime crash when flattening very large trees.
Changes:
- Fixed
flattenJsonTreecrashing on large trees by removing therows.push(...childRows)spread and pushing rows via an explicit loop. - Renamed the
JsonTreeStorybook group toComponents/Tree View Codeand enabled autodocs with a custom component description. - Added a small editable
Defaultstory to evaluateJsonTreestandalone (outside the full panel UI).
File summaries
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/components/JsonTree/JsonTree.stories.tsx | Renames Storybook entry to “Tree View Code”, adds autodocs description, and introduces a standalone editable Default story. |
| packages/apollo-react/src/canvas/components/JsonTree/buildJsonTree.ts | Fixes large-tree flattening crash by avoiding spread-into-push with very large row arrays. |
Review details
- Files reviewed: 2/2 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| // Not `rows.push(...childRows)`: spreading tens of thousands of arguments | ||
| // into `push` overflows the engine's call-stack argument limit. | ||
| for (const row of flattenJsonTree(node.children, childOptions, depth + 1)) { | ||
| rows.push(row); | ||
| } |
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Storybook visual diffBaseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs Updated (PT): Sep 08, 2026, 01:48:55 PM |
Summary
First pass toward a two-component naming convention for this design system's tree views, per design discussion:
TreeView(file/folder navigation). Not yet renamed in this PR.JsonTree(nested object/array/value tree). This PR surfaces it as its own discoverable Storybook entry.Changes
flattenJsonTreethrewRangeError: Maximum call stack size exceededon large trees (e.g. the 20k-record demo).rows.push(...childRows)overflowed the JS engine's call-stack argument limit once a subtree flattened past roughly 65k rows. Switched to an explicit loop.JsonTreestory group toComponents/Tree View Codeand added a small, editableDefaultstory so the component can be evaluated on its own, without loading the full Node Property Panel. Added a component description documenting where it's already used (Node Property Panel Input/Output, Templates/Flow Standalone).component:reference in the story meta):JsonTree's recursive node type and several function-valued props crash Storybook's docgen renderer. Confirmed this is specific toJsonTree's prop shape, not a general docgen issue (other components withtags: ['autodocs']render fine).Open question for engineering review
JsonTreecurrently lives inapollo-react/src/canvas/components/JsonTree/, a completely different package from apollo-wind'sTreeView. Storybook's top-level "Apollo Wind" vs "Apollo React/Canvas" grouping is derived from which package a story physically lives in (seeapps/storybook/.storybook/main.ts), not from the story title, so Tree View Files and Tree View Code cannot appear as siblings under Apollo Wind > Components > Data Display without physically relocatingJsonTreeinto theapollo-windpackage.That relocation is not a small mechanical move:
apollo-windcurrently has zero dependency onapollo-react(confirmed viapackage.json), and the intended architecture keeps them siblings underapollo-core. MovingJsonTreein place would need to happen without pullingapollo-reactin as a dependency.JsonTreeand its subcomponents pull in three apollo-react-internal pieces:useIsomorphicLayoutEffect— trivial, copy as-is.useSafeLingui(Lingui i18n) — apollo-wind has no i18n setup today; would need@lingui/core/@lingui/reactadded, or the hook stripped to a no-op translator.CanvasTooltip/CanvasTooltipProviderMarker(used by 5+ files, itself pulling inuseTruncationDetectionfrom apollo-react's Material tooltip) — the tooltip-dedup marker is droppable for standalone use, but the truncation-aware tooltip wrapper itself needs a real decision: port it into apollo-wind, or rewrite those call sites against apollo-wind's plainTooltip.Needs a decision before proceeding: relocate
JsonTreeintoapollo-wind(bigger refactor, but matches the requested nav structure), or keep it inapollo-reactand accept that "Tree View Files" and "Tree View Code" live under different top-level Storybook sections.Test plan
Components/Tree View Code/Defaultrenders and edits correctly in StorybookComponents/Tree View Code/Virtualized Own Scroll Box,Virtualized Inside Panel,Virtualized Editable,Not Virtualizedno longer crash🤖 Generated with Claude Code