Two independent render loops were causing the Temporal panel to remain stuck on 'Loading temporal...' in npm run dev: Loop 1 — diagnostics state churn (GraphWorkspace.tsx): handleDiagnosticsChange unconditionally called setGraphDiagnosticsState with a new object on every invocation. buildEffectAvailability (called inside GraphCanvas's diagnostics useEffect) always returns a new object, so setGraphDiagnosticsState was called on every effect run, creating a cycle: setGraphDiagnosticsState graphDiagnosticsState new diagnosticsSnapshot new pluginContext new handleInteractionStateChange new GraphCanvas re-renders diagnostics effect fires again. Fix: before calling setGraphDiagnosticsState, compare the incoming diagnostics field-by-field against the last accepted snapshot via a ref (lastDiagnosticsRef). All effectAvailability entries, edgeClasses.updatedAt, structureLayer.cacheKey/lastDrawAt/enabled, and distanceVisual identity must differ for a state update to proceed. The ref approach avoids scheduling a re-render at all, rather than bailing out inside a functional updater after the render has already been committed. Loop 2 — scrubberTime churn (GraphWorkspace.tsx + GraphWorkspaceShell.tsx): TimelinePanel.tsx calls onTimeChange(defaultTime) whenever its useEffect re-runs. React 18 concurrent mode re-runs effects with structurally-new Date objects for the same timestamp when speculative renders discard useMemo caches, causing setScrubberTime to be called repeatedly with a new Date that has the same millisecond value — triggering temporalState churn, the diagnostics effect, and eventually the same loop. Fix: wrap setScrubberTime in an onTimeChange useCallback that compares the incoming time's millisecond value against the last sent value (via lastScrubberMsRef). Redundant calls with the same timestamp are dropped before reaching setScrubberTime. Stable useCallback identity also prevents TimelinePanel's useEffect from re-firing solely due to prop identity churn. Both fixes applied to GraphWorkspace.tsx and identically to GraphWorkspaceShell.tsx which has the same pattern. Verified: - npm run dev: 0 'Maximum update depth exceeded' errors - Temporal panel renders with real data in dev mode - Effects and Neighbors panels unaffected - npm run build + preview: identical behavior, 0 errors - All 42 frontend tests pass (34 graph-workspace, 1 graph-store, 7 plugin-registry)
Semantica Knowledge Explorer
A browser-based graph workbench for the Semantica platform. Pan and zoom live graphs, scrub the timeline, trace every decision's causal chain, resolve duplicates, and author your ontology visually. Built on React 19 + Sigma.js.
Requirements
| Dependency | Minimum version |
|---|---|
| Python | 3.8+ |
| Node.js | 18.x or higher (20.x recommended) |
| npm | 9.x or higher |
python --version
node --version
npm --version
Two ways to run the Explorer
Option A — pip install (recommended for users)
Install the package with the explorer extras. The pre-built frontend bundle is included in the wheel so no Node.js is required.
pip install "semantica[explorer]"
Launch the dashboard by pointing it at any graph JSON file:
semantica-explorer --graph my_graph.json
The server starts at http://127.0.0.1:8000 and opens the dashboard in your default browser automatically.
CLI flags:
| Flag | Default | Description |
|---|---|---|
--graph / -g |
(required) | Path to a ContextGraph JSON file |
--port / -p |
8000 |
Port to bind the server to |
--host |
127.0.0.1 |
Host to bind (use 127.0.0.1 for local-only; see security note below) |
--no-browser |
off | Skip opening the browser automatically |
Examples:
# Default — opens at http://127.0.0.1:8000
semantica-explorer --graph my_graph.json
# Custom port
semantica-explorer --graph my_graph.json --port 8080
# Suppress auto-open
semantica-explorer --graph my_graph.json --no-browser
# Equivalent using python -m
python -m semantica.explorer --graph my_graph.json
Security note: The Explorer API has no built-in authentication. The default
--host 127.0.0.1binds to localhost only, so it is not reachable from other machines on your network. If you bind to0.0.0.0, all graph data is readable and writable by any host that can reach the port. The CLI will print a warning in that case.
Option B — run from source (for contributors / frontend development)
This mode runs the React dev server with hot module replacement, so frontend changes appear in the browser instantly without rebuilding.
Step 1 — Clone the repo
git clone https://github.com/semantica-agi/semantica.git
cd semantica
Step 2 — Install the Python package
pip install -e ".[explorer]"
Step 3 — Install frontend dependencies
cd explorer
npm ci
Step 4 — Start the Python backend
Open a terminal in the repo root:
semantica-explorer --graph path/to/my_graph.json --no-browser
This starts the API on http://127.0.0.1:8000. Keep this terminal open.
Step 5 — Start the frontend dev server
Open a second terminal in explorer/:
npm run dev
Vite starts on http://localhost:5173. Open that URL in your browser. All /api and /ws requests are automatically proxied to the Python backend at http://127.0.0.1:8000.
Building the production bundle
If you need to serve the UI from the Python server directly (without the Vite dev server):
cd explorer
npm ci
npm run build
This writes the compiled assets to ../semantica/static/. The Python server then serves the full dashboard at http://127.0.0.1:8000 — no separate Vite process needed.
Workspaces
| Workspace | What you can do |
|---|---|
| Knowledge Graph | Live Sigma.js canvas · ForceAtlas2 layout · Ego Mode · semantic distance heatmap · path highlighting |
| Timeline | Temporal event scrubber — watch the graph evolve across time |
| Decisions | Browse causal chains behind every recorded decision with outcome badges and confidence scores |
| Registry | Live audit log of every graph mutation (add-node, add-edge, delete, update) |
| Entity Resolution | Review and merge duplicate entities with blocking + semantic dedup |
| KG Overview | Aggregate stats, community breakdown, centrality heatmap |
| Ontology Hub | SHACL Studio · visual drag-and-drop editor · cross-ontology alignments · SKOS browser |
| Lineage | W3C PROV-O provenance visualization for any entity |
Environment variables
| Variable | Default | Description |
|---|---|---|
EXPLORER_CORS_ORIGINS |
http://localhost:5173,http://127.0.0.1:5173 |
Comma-separated list of allowed CORS origins |
EXPLORER_CORS_CREDENTIALS |
false |
Set to true to allow credentialed cross-origin requests (only needed behind an authenticating reverse proxy) |
Available scripts
Run these from inside the explorer/ directory:
# Start the dev server with hot module replacement
npm run dev
# Type-check and build the production bundle into ../semantica/static/
npm run build
# Preview the production build locally
npm run preview
# Run ESLint over all source files
npm run lint
# Run the graph store multi-edge unit tests
npm run test:graph-store
# Run the graph workspace display tests
npm run test:graph-workspace
API & WebSocket proxy (dev mode only)
During development, Vite forwards requests automatically — no CORS configuration needed:
| Pattern | Forwarded to |
|---|---|
/api/* |
http://127.0.0.1:8000/api/* |
/ws/* |
ws://127.0.0.1:8000/ws/* |
To run the backend on a different port, update server.proxy in vite.config.ts.
Project structure
explorer/
├── src/
│ ├── App.tsx # Root layout, tab routing, workspace wiring
│ ├── index.css # Global resets, fonts, keyframe animations
│ ├── store/
│ │ ├── graphStore.ts # In-memory graph state
│ │ └── registryStore.ts # Pub/sub audit registry
│ └── workspaces/
│ ├── GraphWorkspace/ # Sigma.js canvas + inspector + behaviors
│ ├── DecisionWorkspace/ # Causal flow diagram + decision list
│ ├── DiffMergeWorkspace/ # Graph diff and merge view
│ ├── EnrichWorkspace/ # Entity resolution + registry tabs
│ ├── ImportExportWorkspace/ # Import CSV/JSON, export graph
│ ├── LineageWorkspace/ # W3C PROV-O lineage diagram
│ ├── ManageWorkspace/ # KG Overview + Ontology Summary
│ ├── OntologyWorkspace/ # SHACL Studio, visual editor, SKOS browser
│ ├── SparqlWorkspace/ # In-browser SPARQL query editor
│ └── VocabularyWorkspace/ # SKOS vocabulary manager
├── index.html
├── vite.config.ts # Dev proxy → 127.0.0.1:8000, build → ../semantica/static
└── package.json
Troubleshooting
Dashboard shows a blank white page or "UI not available" message
The frontend bundle is missing from the server's static directory. Fix options:
- If you installed via pip:
pip install --upgrade "semantica[explorer]"— the wheel includes the pre-built bundle. - If you installed from source: run
cd explorer && npm ci && npm run buildfrom the repo root, then restart the server. - In dev mode: use the Vite dev server at
http://localhost:5173instead of the backend URL.
Blank graph / no data loads in the browser
- Confirm the Python backend is running and check the terminal for errors.
- Open browser DevTools → Network tab and look for failed
/api/graphrequests. - If the backend is on a different port, update
server.proxyinvite.config.ts.
npm ci fails or reports missing lockfile
The package-lock.json must be present. Run npm install once to generate it, commit it, then use npm ci going forward.
npm run dev fails with Node version error
Vite 6 requires Node 18 or higher. Run node --version to check. If you're on Node 16, upgrade via nvm or the official Node.js installer.
Port 5173 already in use
Vite automatically tries the next available port and prints the actual URL in the terminal. Use the URL shown in the output.
WebSocket not connecting (real-time mutations not appearing)
- Confirm the backend exposes the
/ws/graph-updatesWebSocket endpoint. - Check DevTools → Network → WS tab for the connection status and error code.
- Ensure the backend version matches the frontend — mixing major versions can cause protocol mismatches.
Tech stack
- React 19 + TypeScript (strict mode)
- Vite 6 with
babel-plugin-react-compiler - Sigma.js 3 + Graphology — graph rendering and in-memory graph model
- ForceAtlas2 — physics-based layout
- @tanstack/react-query — async data fetching for ontology and vocab tabs
- vis-timeline — temporal event visualization
- @xyflow/react — lineage diagram rendering
- Monaco Editor — in-browser SPARQL / SHACL editor
- lucide-react — icon set
Contributing
See the root CONTRIBUTING.md and open issues on the main Semantica repository.