Epic: TreeGrid Big Data Demo

Goal

Create a new flagship demo showcasing the TreeGrid's performance with large, dynamically generated hierarchical datasets (e.g., 20k-50k records). This will combine the hierarchical capabilities of examples/grid/tree with the stress-testing volume and controls of examples/grid/bigData.

Architecture & Approach

1. Data Generation (examples/grid/treeBigData/MainStore.mjs)

• Extend Neo.data.TreeStore.
• Implement a custom generateData(amountNodes, amountColumns, maxDepth) method.
• Algorithm: Generate a flat array of nodes.
  • Create an initial pool of root "folder" nodes (parentId: null, isLeaf: false).
  • Iterate to generate the remaining nodes up to amountNodes.
  • For each new node, randomly select a "folder" node from the existing pool to be its parentId.
  • Randomly determine if the new node is a folder (isLeaf: false) or a file (isLeaf: true). If it's a folder and we haven't hit maxDepth, add it to the eligible parent pool.
  • This guarantees a jagged, organic tree structure with varying amounts of children per folder up to the maximum depth.
• Support Turbo Mode (lazy record initialization) by setting autoInitRecords: false inside the store config.

2. Grid Component (examples/grid/treeBigData/GridContainer.mjs)

• Extend Neo.grid.Tree.
• Column 0: The grid-column-tree component displaying the hierarchy.
• Columns 1-N: Dynamically generated data columns (similar to the flat big data demo) to test horizontal scrolling and rendering performance.

3. Controls (examples/grid/treeBigData/ControlsContainer.mjs)

• Reuse the side-panel controls from the bigData demo: Amount Rows (Nodes), Amount Columns, Buffer Rows/Columns, and Themes.
• Tree-Specific Additions:
  • Max Depth combo box (e.g., 2, 3, 5, 10).
  • Expand All and Collapse All buttons to stress-test the TreeStore's bulk mutate events.
• Filtering: Retain the text filters (e.g., firstname, lastname) to demonstrate the TreeStore's hierarchical filtering capabilities (where parents are retained if children match).

4. Model (examples/grid/treeBigData/MainModel.mjs)

• Extend Neo.data.TreeModel to get id, parentId, isLeaf, collapsed inherently.
• Include random payload fields (firstname, lastname, numberX, etc.) in addition.

Tasks

• Create base directory and initial files (MainContainer, GridContainer, ControlsContainer, MainStore, MainModel).
• Implement the organic tree data generation algorithm in MainStore.
• Wire up the ControlsContainer to trigger grid re-renders and tree-specific actions (Expand/Collapse All).
• Ensure CSS/SCSS styling aligns with the standard bigData demo.
• Create E2E tests for the new demo.