Skip to main content
The web container runs the React/Three.js frontend that renders the interactive 3D graph visualization.

​
Layered Architecture

React Components

App.jsx, Toolbar, Sidebars, Graph3D - UI layer that users interact with

React Hooks

useGraph3D, useAppState, useNodeSelection - Bridge between React state and service layer

Dual State

React Context (AppContext) for UI state, GraphStateManager for rendering state

Service Layer

GraphService, OverlayFilterService, CameraControlService - Business logic

Three.js

three-forcegraph library, WebGL canvas - 3D rendering

​
Key Concepts

ConceptDescription
State ManagementDual state architecture: React Context + GraphStateManager
ServicesService layer composition and responsibilities
SelectionPhotoshop-inspired selection modes and history
FilteringFilter composition pipeline and BFS algorithm
EventsCustom event system for loose coupling
ThemeCSS variables and brightness system

​
Directory Structure

web/src/
├── App.jsx                 # Root component
├── context/
│   └── AppContext.jsx      # Global React state
├── hooks/
│   ├── useGraph3D.js       # Bridge: React ↔ GraphService
│   ├── useAppState.js      # Data fetching
│   └── useNodeSelection.js # Selection state
├── services/
│   ├── GraphService.js     # Main facade
│   ├── GraphStateManager.js
│   ├── OverlayFilterService.js
│   └── ...
├── components/
│   ├── layout/             # Toolbar, Sidebars
│   ├── graph/              # Graph3D
│   └── ui/                 # Buttons, cards, etc.
└── theme/
    └── ThemeProvider.jsx

​
What’s Next?

State Management

Dual state architecture

Services

Service layer composition