Skip to content

React Flow complete

This example wires ego-graph to React Flow: generate a labelled graph, pick first-layer bands (radial, dagre, bubble, or dagreSubtree), then assign next-layer bands by child count (radial, dagre, bubble, dagreSubtree, or cloud), fold branches, and render with the ego-graph/react-flow adapters. Structural nodes are blue; satellites are orange. Fold stand-ins expand and collapse via expandedRoots.

The pipeline calls customLayout. The default catch-all band is cloud (Fibonacci arcs along the outbound ray, for parents with many children). Bubble ring size is innerRingCapacity (T in the ring rule). Source files live in examples/react-flow-complete/. The page imports them with ?raw, and the preview runs that same checkout.

All source files for the demo are listed in the tabs below.