Files
semantica/explorer
75f88b1c40 Fix/explorer backend failure states (#980)
* fix(explorer): show a retryable error when the graph fails to load

The dependency-pre-bundle overlay had no failure path: on a fetch
error it kept rendering the last progress frame forever with no
retry. Route isError/error out of the load query, surface a real
error card with the underlying message, and let retry re-fetch
without a full page reload.

* fix(explorer): reflect real backend connectivity on the landing page

The status dot and 'System Online' text were static, so a dead
backend still looked healthy. Track checking/online/offline explicitly
and drive both off the same state so they can't disagree.

* feat(explorer): let search results be dismissed, round relevance scores

The results strip had no close affordance and stayed pinned until the
next search. Add a header row with a dismiss button, and round scores
to whole numbers instead of showing three decimals of a raw relevance
value nobody can act on.

* feat(explorer): add typeahead suggestions to graph search

Typing in the search box now debounces a query against the existing
search endpoint and shows a combobox dropdown, with arrow-key
navigation, Enter/click to jump straight to a node, and Escape to
dismiss. Previously nothing happened until the full form was
submitted.

* fix(explorer): abort stale typeahead requests and clear suggestions on error

Clearing the search box while a suggestion fetch was in flight never
aborted it, so a late response could reopen the dropdown with results
for a query that was no longer typed. A non-OK response also left
whatever suggestions were already on screen untouched instead of
clearing them. Abort on every effect cleanup (not just unmount) and
clear suggestions on any non-abort failure.

* docs(changelog): add entry for Explorer backend failure states fix

Documents the (#980, closes #977) fix in the Unreleased/Fixed section.

---------

Co-authored-by: Sameer Kadam <sskadam6305@gmail.com>
Co-authored-by: KaifAhmad1 <kaifahmad087@gmail.com>
2026-08-14 17:36:42 +05:30
..
2026-08-05 17:37:33 +05:30

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

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.1 binds to localhost only, so it is not reachable from other machines on your network. If you bind to 0.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 build from the repo root, then restart the server.
  • In dev mode: use the Vite dev server at http://localhost:5173 instead 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/graph requests.
  • If the backend is on a different port, update server.proxy in vite.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-updates WebSocket 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.