Expand and Collapse All Nodes

Demonstrates implementing functionality to expand or collapse all nodes simultaneously in a graph.

Expand and Collapse All Nodes

Functional Overview

This example demonstrates implementing functionality to expand or collapse all nodes in the graph simultaneously. It uses a toggle button to switch between expanded and collapsed states.

Implementation of Key Features

Expand/Collapse Configuration

const graphOptions: RGOptions = {
    defaultExpandHolderPosition: "right",
    reLayoutWhenExpandedOrCollapsed: true,
    defaultNodeShape: RGNodeShape.circle,
    layout: {
        layoutName: 'center'
    }
};

Toggle Functionality

The example implements a playing state toggle that expands or collapses all nodes:

const [playing, setPlaying] = useState(false);

// Toggle implementation would call:
graphInstance.expandAll(); // or collapseAll()

Creative Use Cases

Large Organization Charts: Expand all to show entire organization, collapse to show only top-level departments.

System Architecture Diagrams: Expand all to see full system detail, collapse to see high-level architecture.

File System Browsers: Expand all directories to see full contents, collapse to show only top-level folders.

Decision Trees: Expand all to see complete decision paths, collapse to show only main decisions.

Bill of Materials: Expand all to see all components, collapse to see only top-level assemblies.

Menu Structures: Expand all to visualize complete menu hierarchy, collapse to show only main sections.

Taxonomy Browsers: Expand all to see full classification tree, collapse to show only main categories.

Process Maps: Expand all to see detailed process steps, collapse to show high-level process flow.