Skip to main content
The service layer handles all Three.js/rendering logic. Services are composed via dependency injection.

​
Service Composition

GraphService (Facade)
├── state: GraphStateManager
├── cameraControl: CameraControlService
├── nodeRendering: NodeRenderingService
├── linkRendering: LinkRenderingService
├── overlayFilter: OverlayFilterService
├── namespaceForce: NamespaceForceService
├── lifecycle: GraphLifecycleService
└── namespaceService: NamespaceService

​
Key Services

​
GraphStateManager

Central state container for all rendering-related state. All services read from and write to this single source of truth. Prevents reference bugs during refactoring.

​
OverlayFilterService

Most complex service - handles all visibility filtering:
  • Node type visibility (hide/show by type)
  • Edge type visibility
  • Selection depth expansion (BFS algorithm)
  • Members-only mode
  • Namespace filtering
  • Position synchronization between allNodes and graphData

​
InstancedNodeRenderer

GPU-instanced rendering for performance with large graphs:
  • Instance matrices for node positions
  • Color attributes per instance
  • Visibility masking
  • Selection highlighting

​
CameraControlService

Camera manipulation:
  • Zoom in/out with configurable speed
  • Focus on node (fly-to animation)
  • Reset view to fit all nodes
  • Pan controls

​
NodeRenderingService

Node visual properties:
  • Colors based on type or overlay
  • Sizes based on type or overlay
  • Labels (visibility, size, content)
  • Opacity

​
LinkRenderingService

Edge visual properties:
  • Colors
  • Widths
  • Curvature
  • Visibility

​
Service Responsibilities

ServiceResponsibility
GraphStateManagerCentral state container for all rendering-related state
OverlayFilterServiceAll visibility filtering: type filters, BFS depth, namespace filters
InstancedNodeRendererGPU-instanced rendering for large graphs
CameraControlServiceZoom, pan, focus, reset view
NodeRenderingServiceNode colors, sizes, labels, opacity
LinkRenderingServiceLink colors, widths, curvature
GraphLifecycleServiceInit, resize, destroy, data loading
NamespaceForceServiceNamespace blob rendering and physics

​
File Quick Reference

Need to…Look in…
Add new UI stateAppContext.jsx
Modify selection behaviorApp.jsx, SelectionHistoryManager.js
Change filtering logicOverlayFilterService.js
Add camera controlsCameraControlService.js
Modify node appearanceNodeRenderingService.js, InstancedNodeRenderer.js
Add keyboard shortcutsApp.jsx (useEffect with keydown listener)
Add toolbar buttonToolbar.jsx or SelectionToolbar.jsx
Add API endpoint callApiService.js