reagraph (^4.30.8) is the dashboard's graph renderer. It's WebGL-backed, force-directed by default, and exposes typed React props for nodes/edges/layout.

Where it's used

Why reagraph (vs. d3, cytoscape, vis)

• React-native API. Props in, render out — no imperative init/update/destroy dance.
• WebGL. Handles the 200–500 node range without per-frame CPU pain.
• Layout-agnostic. Force, radial, hierarchical, and circular layouts ship in-box. The Galaxy Map uses a fixed-position layout (we pin sites by lat/lon); the Force/Sense stack graph uses a hierarchical layout.

Galaxy Map specifics

The Galaxy Map is a single component on purpose (Galaxy Map explains why). reagraph is the rendering surface but the Galaxy Map also overlays its own SVG/Canvas passes for status rings, selection highlights, and the slide-over panel. Reagraph owns nodes + edges; the component owns everything else.

Site positions are pinned — no force simulation runs. The layoutType="forceDirected2d" default is overridden with a fixed-position layout fed from holocron-config.yaml's lat/lon.

Force/Sense stack graph (planned)

The Force/Sense plane uses a different reagraph configuration:

• Hierarchical layout (top-down: namespace → controller → pod).
• Status colors via the Sense zustand store (Zustand).
• Click → side panel showing pod logs / events.

This is still under construction — the wireframe is in place but the live data plumbing isn't wired yet.

Performance notes

• reagraph re-renders on prop change; pass nodes/edges as stable references and let per-node state (color, label, size) be derived inside the component.
• Don't put more than ~500 nodes in one graph. For Force/Sense, this means we filter to the visible namespace.
• WebGL contexts are not free; mount one reagraph surface per page max.

See also

• Galaxy Map — the primary consumer
• The Force — the secondary consumer
• ogl — sibling WebGL primitive used for Prologue Crawl