Collapse

Expand and collapse node hierarchies. Collapsed nodes hide their descendants while maintaining the graph structure.

Import

import { useCollapse, GraphCanvas } from 'reagraph';

useCollapse Hook

Parameters

Return Value

Basic Usage

import { GraphCanvas, useCollapse } from 'reagraph';

const [collapsedIds, setCollapsedIds] = useState<string[]>([]);

<GraphCanvas
  nodes={nodes}
  edges={edges}
  collapsedNodeIds={collapsedIds}
  onNodeClick={(node, { canCollapse, isCollapsed }) => {
    if (canCollapse) {
      setCollapsedIds((prev) =>
        isCollapsed
          ? prev.filter((id) => id !== node.id)
          : [...prev, node.id]
      );
    }
  }}
/>

With Context Menu

<GraphCanvas
  nodes={nodes}
  edges={edges}
  collapsedNodeIds={collapsedIds}
  contextMenu={({ data, onClose, canCollapse, isCollapsed, onCollapse }) => (
    <RadialMenu
      onClose={onClose}
      items={[
        ...(canCollapse
          ? [{
              label: isCollapsed ? 'Expand' : 'Collapse',
              onClick: () => { onCollapse(); onClose(); },
            }]
          : []),
      ]}
    />
  )}
/>

Checking Collapse State

const { getIsCollapsed, getExpandPathIds } = useCollapse({
  collapsedNodeIds,
  nodes,
  edges,
});

// Check if a specific node is collapsed
const isHidden = getIsCollapsed('node-5');

// Get path to expand to reveal a hidden node
const pathToExpand = getExpandPathIds('node-5');

Notes

• Nodes need parents property or outbound edges to establish hierarchy
• canCollapse in the click/context-menu callback indicates whether a node has children
• Collapsing a node hides all its descendants
• collapsedNodeIds is a controlled prop — manage it in your state
• onCollapse in context menu events toggles the collapse state for you