Date: February 2026 Repository: EdgeQuake Visualization Library: Sigma.js | GitHub
This document analyzes how EdgeQuake, a high-performance Graph-RAG framework written in Rust, leverages Sigma.js for interactive knowledge graph visualization. This architecture pattern demonstrates how Rust-based backend systems can seamlessly integrate with modern JavaScript visualization libraries to create compelling user experiences.
Key Insight: This pattern is highly applicable to other Rust-based graph databases like Oxigraph (SPARQL RDF database), which currently lacks a sophisticated web UI for graph visualization.
Sigma.js is a WebGL-powered JavaScript library specifically designed for rendering and interacting with large-scale network graphs (thousands of nodes and edges) directly in the browser.
Core Capabilities:
- Performance: "WebGL-accelerated rendering enables smooth 60fps animations even with 1000+ nodes"
- Scalability: Handles large graphs that would overwhelm Canvas or SVG-based solutions (like D3.js)
- Architecture: Works in symbiosis with Graphology, which handles graph data structures and algorithms
- Ecosystem: Rich plugin ecosystem including layouts, community detection, and interactive controls
Backend (Rust):
- Rust-based Graph-RAG engine with PostgreSQL AGE (graph storage) + pgvector (embeddings)
- Entity extraction, relationship mapping, and knowledge graph construction
- REST API (Axum) with SSE streaming for real-time responses
Frontend (React 19 + TypeScript):
- Next.js 16.1.0 with App Router
- Tailwind CSS 4.1.18 + shadcn/ui components
- Sigma.js 3.0.2 for graph rendering
- Graphology for graph data manipulation and layout algorithms
┌──────────────────────────────────────────────────┐
│ Rust Backend (EdgeQuake Core) │
│ ┌────────────────────────────────────────────┐ │
│ │ Knowledge Graph (PostgreSQL AGE) │ │
│ │ * Entities (nodes): people, orgs, concepts │ │
│ │ * Relationships (edges): connects entities │ │
│ └────────────────┬───────────────────────────┘ │
│ │ │
│ │ REST API /api/v1/graph │
└──────────────────┼───────────────────────────────┘
│
▼
JSON (nodes, edges, metadata)
│
▼
┌──────────────────────────────────────────────────┐
│ React Frontend (graph-renderer.tsx) │
│ ┌────────────────────────────────────────────┐ │
│ │ 1. Data Transformation │ │
│ │ EdgeQuake JSON → Graphology Graph │ │
│ └────────────────┬───────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────┐ │
│ │ 2. Layout Computation (Graphology) │ │
│ │ * ForceAtlas2 (force-directed, physics) │ │
│ │ * Force Layout (spring-based) │ │
│ │ * Circular Layout │ │
│ └────────────────┬───────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────┐ │
│ │ 3. Sigma.js WebGL Rendering │ │
│ │ * Node rendering (circles, custom) │ │
│ │ * Edge rendering (lines, curves) │ │
│ │ * Camera controls (zoom, pan) │ │
│ │ * Event handlers (click, hover, drag) │ │
│ └────────────────┬───────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────┐ │
│ │ 4. User Interaction Layer │ │
│ │ * Node selection and highlighting │ │
│ │ * Neighborhood exploration │ │
│ │ * Search and filtering │ │
│ │ * Minimap navigation │ │
│ └────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘
Step 1: Graph Renderer Entry Point (graph-renderer.tsx:85)
export function GraphRenderer({ nodes, edges, onNodeClick, onNodeHover, onNodeRightClick }: GraphRendererProps) {
// Main component orchestrating graph visualization
}Step 2: Graphology Instance Creation (graph-renderer.tsx:277)
const graph = new Graph();
// Graph data structure from Graphology libraryStep 3: Sigma.js WebGL Renderer Initialization (graph-renderer.tsx:505)
const sigma = new Sigma(graph, containerRef.current, {
// Instantiates WebGL rendering engine
});Step 4: Node Interaction Event Handler (graph-renderer.tsx:546)
sigma.on('clickNode', (event) => {
// Interactive node selection and callbacks
});EdgeQuake uses multiple layout algorithms through Graphology:
-
ForceAtlas2 (Primary)
- Physics-based force-directed layout
- Nodes repel each other, edges act as springs
- Self-organizes into clusters revealing communities
- Ideal for knowledge graphs where relationships define structure
-
Force Layout
- Spring-based alternative to ForceAtlas2
- Faster computation, good for real-time updates
-
Circular Layout
- Arranges nodes in a circle
- Useful for comparing graph structures or small graphs
From the Implementation:
- Node Click: Opens detailed entity information
- Node Hover: Highlights node and its immediate neighbors
- Node Right-Click: Context menu for additional actions
- Drag & Drop: Repositioning nodes manually
- Zoom & Pan: Camera controls for exploring large graphs
- Minimap: Overview navigation for large knowledge graphs
- Search: Find specific entities by name/type
EdgeQuake's REST API provides SSE (Server-Sent Events) for real-time graph updates:
- As new documents are ingested, new entities/relationships appear in the graph
- Live progress tracking during document processing
- Token-by-token LLM response generation displayed alongside graph exploration
| Aspect | Sigma.js (WebGL) | D3.js (SVG/Canvas) |
|---|---|---|
| Node Capacity | 10,000+ nodes | ~1,000 nodes (before lag) |
| Rendering Speed | 60 FPS animations | 15-30 FPS with large graphs |
| Layout Animation | Smooth physics | Stuttering on large datasets |
| Memory Efficiency | GPU-accelerated | CPU-bound, higher memory |
| Customization | Moderate (WebGL shaders) | Highly flexible (SVG/Canvas) |
EdgeQuake's Benchmark Results:
- Query latency (hybrid mode): < 200ms
- Concurrent users: 1000+
- Graph rendering: Real-time even with complex knowledge graphs (100+ entities, 200+ relationships)
When Sigma.js Excels:
- Large graphs (500+ nodes)
- Real-time updates and streaming
- Performance-critical applications
When D3.js is Better:
- Small graphs (< 500 nodes)
- Highly customized visualizations (e.g., hierarchical trees, specialized node shapes)
- SVG-based interactivity (easier DOM manipulation)
Rust Backend Endpoint: GET /api/v1/graph
{
"nodes": [
{
"id": "entity-123",
"label": "Knowledge Graph",
"type": "CONCEPT",
"description": "Structured representation of entities and relationships",
"x": 0.5,
"y": 0.3,
"size": 10,
"color": "#3b82f6"
}
],
"edges": [
{
"source": "entity-123",
"target": "entity-456",
"type": "ENABLES",
"keywords": ["retrieval", "reasoning"],
"weight": 0.85
}
],
"communities": [
{
"id": "community-1",
"entities": ["entity-123", "entity-456"],
"title": "Core RAG Concepts"
}
]
}React Frontend Transformation:
// Convert EdgeQuake API response to Graphology format
const graph = new Graph();
apiResponse.nodes.forEach(node => {
graph.addNode(node.id, {
label: node.label,
x: node.x,
y: node.y,
size: node.size,
color: node.color,
type: node.type
});
});
apiResponse.edges.forEach(edge => {
graph.addEdge(edge.source, edge.target, {
type: edge.type,
weight: edge.weight
});
});
// Pass to Sigma.js for rendering
const sigmaInstance = new Sigma(graph, container);Oxigraph is a SPARQL-compliant graph database written in Rust (similar architecture to EdgeQuake's backend). However, it lacks a sophisticated web UI for graph exploration.
Proposed Architecture for Oxigraph + Sigma.js:
┌─────────────────────────────────────────────────┐
│ Oxigraph (Rust SPARQL Database) │
│ ┌───────────────────────────────────────────┐ │
│ │ RDF Triples (RocksDB Storage) │ │
│ │ * Subject-Predicate-Object triples │ │
│ │ * SPARQL 1.1 Query, Update, Federated │ │
│ └────────────┬──────────────────────────────┘ │
│ │ REST API + SPARQL Protocol │
└──────────────┼──────────────────────────────────┘
│
└─► SPARQL Query Results (JSON)
│
▼
┌─────────────────────────────────────────────────┐
│ React Frontend (oxigraph-ui) │
│ ┌───────────────────────────────────────────┐ │
│ │ 1. SPARQL Query Interface │ │
│ │ * Query editor with syntax highlight │ │
│ │ * Example queries (CONSTRUCT graphs) │ │
│ └────────────┬──────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────────────┐ │
│ │ 2. RDF to Graph Transformation │ │
│ │ * SPARQL CONSTRUCT → Nodes & Edges │ │
│ │ * RDF literals → Node labels │ │
│ │ * RDF properties → Edge types │ │
│ └────────────┬──────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────────────────────────────────┐ │
│ │ 3. Sigma.js Graph Visualization │ │
│ │ * Same EdgeQuake pattern: Graphology │ │
│ │ * Layout: ForceAtlas2 for RDF graphs │ │
│ │ * Interactive query exploration │ │
│ └───────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
-
Create SPARQL CONSTRUCT Queries
- Query triples and return them as named graphs
- Example: Extract all entities of type
Personand their relationships
PREFIX ex: <http://example.org/> CONSTRUCT { ?subject ?predicate ?object . } WHERE { ?subject a ex:Person ; ?predicate ?object . }
-
Transform RDF Results to Graph Format
// Convert SPARQL JSON results to Sigma.js format const nodes = new Set(); const edges = []; results.forEach(binding => { // subject → node nodes.add({ id: binding.subject.value, label: extractLabel(binding.subject) }); // object (if URI) → node if (binding.object.type === 'uri') { nodes.add({ id: binding.object.value, label: extractLabel(binding.object) }); // predicate → edge edges.push({ source: binding.subject.value, target: binding.object.value, type: extractPredicate(binding.predicate) }); } });
-
Deploy with Sigma.js
- Reuse EdgeQuake's React component architecture
- Apply same layout algorithms (ForceAtlas2)
- Implement query builder UI for SPARQL construction
| Aspect | Benefit |
|---|---|
| Reusability | EdgeQuake's component patterns directly transfer to RDF contexts |
| Performance | Sigma.js handles complex SPARQL result sets efficiently |
| Standards Compliance | SPARQL remains the query interface; visualization is additive |
| Knowledge Discovery | Visual exploration of RDF ontologies reveals schema patterns |
| Reduced Development Time | Leverage existing Rust + React integration patterns |
-
Graph Instantiation
- Graphology creates in-memory graph structure
- All nodes and edges loaded from API response
-
Layout Computation
- ForceAtlas2 algorithm iteratively positions nodes
- Physics simulation: repulsive forces (nodes) + attractive forces (edges)
- Converges toward stable, readable configuration
-
WebGL Batch Rendering
- "Sigma.js uses WebGL for GPU-accelerated rendering"
- Nodes rendered as textured quads; edges as line segments
- All rendered to canvas in single draw call per frame
-
Camera & Viewport Management
- Camera tracks user pan/zoom interactions
- Viewport culling optimizes rendering (only visible nodes drawn)
- Level-of-detail rendering (LOD) for distant nodes
// Core event pipeline
sigma.on('clickNode', (event) => {
const { node } = event;
// Fetch node details from backend
// Update UI with entity information
// Highlight node and neighborhood
});
sigma.on('hoverNode', (event) => {
const { node } = event;
// Highlight immediate neighbors
// Show tooltip with node label
});
sigma.on('dragNode', (event) => {
// Allow manual repositioning
// Update node coordinates in local state
});"EdgeQuake demonstrates that modern visualization architectures require synergy between specialized backends and frontend libraries." Rust provides:
- High-performance graph construction and storage
- Efficient entity/relationship extraction from documents
- Scalable streaming API infrastructure
JavaScript visualization libraries like Sigma.js provide:
- Interactive exploration capabilities
- GPU-accelerated rendering for large datasets
- Responsive user experience
- Separate Concerns: Keep graph computation (backend) distinct from visualization (frontend)
- Design API Contracts: Define clear JSON schemas for graph data exchange
- Optimize Data Transfer: Return only visible/relevant subgraphs to client
- Progressive Enhancement: Load additional details on user interaction
- Leverage Layout Libraries: Use battle-tested algorithms (ForceAtlas2) rather than custom implementations
- Graph Streaming: WebSocket-based real-time graph updates
- Collaborative Editing: Multi-user graph exploration with shared state
- Advanced Filtering: Query-driven subgraph visualization
- 3D Visualization: Extended Sigma.js with Three.js for spatial graphs
- LLM Integration: AI-powered graph summarization and question-answering
- Sigma.js Official Documentation: https://www.sigmajs.org/
- Graphology Library: https://graphology.github.io/
- EdgeQuake Repository: https://github.com/raphaelmansuy/edgequake
- Oxigraph SPARQL Database: https://github.com/oxigraph/oxigraph
- WebGL Performance: Mozilla Developer Network (WebGL Specification)
- ForceAtlas2 Algorithm: Jacomy et al., "ForceAtlas, a Continuous Graph Layout Algorithm for Network Analysis"