Expand Nodes by Level

Demonstrates expanding nodes to specific depth levels in hierarchical structures with level-based control.

Expand Nodes by Level

Functional Overview

This example demonstrates expanding nodes to a specific depth level in the hierarchy. Users can control how many levels of the tree to display at once.

Implementation of Key Features

Level-Based Expansion

const openByDeep = (deep: number) => {
    myMixTreeLayout.current.expandAllGroupByDeep(deep);
    graphInstance.zoomToFit();
};

Mixed Tree Layout

Uses a custom mixed tree layout that supports level-based expansion with color-coded levels:

myMixTreeLayout.current.setLevelColors(['#7e22ce30', '#2564eb3a', '#71c9053d', '#ea5a0c34']);

Expand/Collapse Handlers

const onNodeExpand = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

const onNodeCollapse = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

Creative Use Cases

Organizational Charts: Show only top 2 levels for executive view, expand to 5 levels for full detail. Control information overload.

Product Categories: Display top-level categories initially, users drill down by level. Progressive disclosure of product hierarchy.

File System Trees: Show first 2 levels by default, expand as needed. Prevent overwhelming users with deep directory structures.

Decision Trees: Start with main decisions, expand branches as needed. Guide users through complex decision processes.

Bill of Materials: Show top-level assemblies, expand by level to see components. Useful for cost estimation and sourcing.

Site Maps: Display main sections initially, expand by level for detail. Help users understand site structure.

Knowledge Graphs: Show top-level domains, expand by level for topics. Progressive exploration of knowledge domains.

Process Hierarchies: Display main processes, expand by level for sub-processes. Manage complexity in process documentation.