How reaviz/reagraph works
Reagraph is a React library for interactive WebGL network-graph visualization. A consumer supplies graph data to GraphCanvas; graph preparation applies visibility, layout, and sizing before the scene renders nodes and edges. Users can then navigate, select, drag, and expand or collapse the graph. The README also documents path finding, clustering, edge bundling, radial menus, themes, and customizable symbols. The sampled excerpts establish parts of graph preparation and interaction; some feature wiring is inferred only at the subsystem level from the README and tree.
Main entry points: GraphScene.tsx Graph scene · useGraph.ts Graph orchestration · utils Graph utilities · GraphCanvas.tsx Graph canvas
Components 18
Graph entry
- Graph canvas
src/GraphCanvas/GraphCanvas.tsx - Graph scene
src/GraphScene.tsx
Graph preparation
- Graph orchestration
src/useGraph.ts - Layout strategies
src/layout - Node sizing
src/sizing - Visibility and collapse
src/collapse - Graph state
src/store.ts - Graph utilities
src/utils
Scene rendering
- Node and edge symbols
src/symbols - Edge geometry
src/symbols/edges/useEdgeGeometry.ts - Clustering
src/symbols/clusters
User interaction
- Selection and paths
src/selection - Lasso selection
src/selection/Lasso.tsx - Node dragging
src/utils/useDrag.ts - Camera controls
src/CameraControls - Radial menu
src/RadialMenu
Appearance
- Themes
src/themes
Other components
- React consumer
Connections 20
- React consumer → Graph canvas: provides graph data
- Graph canvas → Graph scene: renders scene
- Graph scene → Graph orchestration: prepares graph
- Graph orchestration → Visibility and collapse: derives visibility
- Graph orchestration → Layout strategies: runs layout
- Graph orchestration → Node sizing: applies sizing
- Graph orchestration → Graph utilities: transforms graph
- Graph orchestration → Graph state: writes graph state
- Graph scene → Graph state: reads graph state
- Graph scene → Node and edge symbols: renders symbols
- Node and edge symbols → Edge geometry: builds edge geometry
- Edge geometry → Graph utilities: uses geometry helpers
- Graph scene → Clustering: renders clusters
- Graph scene → Themes: uses theme
- Graph scene → Selection and paths: handles selection
- Selection and paths → Graph utilities: finds paths
- Graph scene → Lasso selection: enables lasso
- Graph scene → Node dragging: enables dragging
- Graph scene → Camera controls: controls camera
- Graph scene → Radial menu: offers context menu