Semfora Graph Explorer

Query-driven call graph visualization for codebases of any size.

Features

• Handles massive graphs: Query billions of edges without crashing
• SQLite-powered: File-based, no server required
• Interactive exploration: Click to expand, drill deeper
• Multiple layouts: Hierarchical (dagre), circular, grid
• Export formats: DOT, Mermaid, JSON, CSV, PNG
• Dark Forest theme: Beautiful emerald and gold design

Quick Start

Development

# Install dependencies
npm install

# Start dev server
npm run dev

Open http://localhost:5173 and load a SQLite database exported from semfora-engine.

Production Build

# Build single-file HTML
npm run build

The output is a standalone dist/index.html file (~640KB) that works offline.

Usage

1. Generate a database using semfora-engine:

   semfora-engine --export-sqlite path/to/call_graph.sqlite

2. Open the explorer in your browser

3. Load the database via the "Load Database" button

4. Explore using presets:

   • Entry Points: Functions with no callers
   • Hot Functions: Most called functions
   • Dead Code: Unused functions
   • High Risk: Functions marked as risky
   • Module View: High-level module dependencies
   • External Calls: Calls to external libraries

5. Custom SQL queries: Write your own queries in the SQL panel

6. Click nodes to view details and expand neighbors

7. Export the current view to DOT, Mermaid, JSON, CSV, or PNG

SQLite Schema

The explorer expects SQLite databases with this schema:

CREATE TABLE nodes (
    hash TEXT PRIMARY KEY,
    name TEXT NOT NULL,
    kind TEXT NOT NULL,
    module TEXT,
    file_path TEXT,
    line_start INTEGER,
    line_end INTEGER,
    risk TEXT DEFAULT 'low',
    complexity INTEGER DEFAULT 0,
    caller_count INTEGER DEFAULT 0,
    callee_count INTEGER DEFAULT 0
);

CREATE TABLE edges (
    caller_hash TEXT NOT NULL,
    callee_hash TEXT NOT NULL,
    call_count INTEGER DEFAULT 1,
    PRIMARY KEY (caller_hash, callee_hash)
);

CREATE TABLE module_edges (
    caller_module TEXT NOT NULL,
    callee_module TEXT NOT NULL,
    edge_count INTEGER NOT NULL,
    PRIMARY KEY (caller_module, callee_module)
);

Tech Stack

• sql.js: SQLite in WebAssembly
• Cytoscape.js: Graph visualization
• cytoscape-dagre: Hierarchical layout
• Vite: Build tool

Keyboard Shortcuts

• Ctrl+Enter: Execute SQL query
• Double-click node: Expand callees

Safety Limits

To prevent browser crashes, the explorer enforces limits:

• Max 500 nodes displayed
• Max 2000 edges displayed
• 50 nodes per expand operation
• 5 second query timeout

License

MIT