Expand and Collapse

This example demonstrates how to implement expandable and collapsible nodes in a hierarchical tree structure. Nodes with children can be expanded or collapsed by clicking on them, revealing or hiding their descendants. The implementation uses a custom useExpandCollapse hook that maintains the complete graph structure while only rendering the currently visible portions.

About this Pro Example

• Dependencies: @xyflow/react , @dagrejs/dagre 
• Implements a reusable useExpandCollapse hook that handles visibility logic
• Demonstrates dynamic node addition with automatic layout recalculation
• Uses node data properties to track expanded/collapsed state
• Provides interactive controls to expand/collapse nodes and add children