Skip to main content

memory-graph-visualizer

Admin Graph Exploration UI​

PropertyValue
Repositorymemory-graph-visualizer
LanguageTypeScript/React
TypeWeb Application
FrameworkVite + React 19
Graph EngineSigma.js v3 + Graphology

Purpose​

Administrative UI for exploring and debugging the memory knowledge graph:

  • Graph Visualization: Real-time exploration of entities and memories using Sigma.js.
  • Side-by-Side Preview: Inspect the original document source and precise coordinates for any memory node.
  • Search & Retrieval: Debug hybrid search results across JanusGraph and Qdrant.

Technical Architecture​

Component Layout​

graph TD
    App[App] --> GV[GraphViewer]
    GV --> SG[SigmaGraph Component]
    GV --> SP[SourcePreview Panel]
    
    SG --> Sigma[Sigma.js v3 Engine]
    SG --> FA2[ForceAtlas2 Layout]
    
    SP --> DV[DocumentViewer]
    DV --> RPDF[react-pdf]
    SP --> HO[HighlightOverlay]

Key Libraries​

  • @react-sigma/core (v5): React bindings for Sigma.js v3.
  • @react-sigma/layout-forceatlas2: Integrated force-directed layout.
  • react-pdf: PDF rendering engine.
  • Graphology: Graph data structure and algorithms.

Side-by-Side Source Preview​

The visualizer implements a "Document Intelligence" interface that maps memory nodes back to their exact location in raw documents.

Interaction Flow​

  1. Node Selection: User clicks a "MemoryBlock" node in the graph.
  2. Component Synchronization: GraphViewer updates selectedNode state.
  3. Source Resolution: SourcePreview extracts SourceLocation metadata from the memory.
  4. PDF Navigation: DocumentViewer loads the PDF and navigates to the specific pageNumber.
  5. Coordinate Mapping: HighlightOverlay renders translucent highlight boxes using normalized coordinates (0-1), ensuring resolution independence.

Acceptance Criteria (Platform 2.0)​

  • Migrated to Sigma.js v3 (@react-sigma/core v5)
  • High-performance rendering of 5,000+ nodes
  • Side-by-side PDF preview with react-pdf
  • Precise highlighting using normalized (0-1) coordinates
  • Real-time graph layout synchronization