63 lines
2.4 KiB
Markdown
63 lines
2.4 KiB
Markdown
# Frontend (React + Vite) – WebGL Graph Renderer
|
||
|
||
The frontend renders the snapshot from `/api/graph` using WebGL2:
|
||
|
||
- Nodes are drawn as points
|
||
- Edges are drawn as lines only when sufficiently zoomed in
|
||
- Selection + neighbor highlighting is driven by backend “selection queries”
|
||
|
||
## Run
|
||
|
||
Via Docker Compose (recommended):
|
||
|
||
```bash
|
||
docker compose up --build frontend
|
||
```
|
||
|
||
Open: `http://localhost:5173`
|
||
|
||
## Configuration
|
||
|
||
- `VITE_BACKEND_URL` controls where `/api/*` is proxied (see `frontend/vite.config.ts`).
|
||
- The right-side cosmos graph reads these `VITE_...` settings at dev-server startup:
|
||
- `VITE_COSMOS_ENABLE_SIMULATION`
|
||
- `VITE_COSMOS_DEBUG_LAYOUT`
|
||
- `VITE_COSMOS_SIMULATION_REPULSION`
|
||
- `VITE_COSMOS_SIMULATION_LINK_SPRING`
|
||
- `VITE_COSMOS_SIMULATION_LINK_DISTANCE`
|
||
- `VITE_COSMOS_SIMULATION_GRAVITY`
|
||
- `VITE_COSMOS_SIMULATION_CENTER`
|
||
- `VITE_COSMOS_SIMULATION_DECAY`
|
||
- `VITE_COSMOS_SIMULATION_FRICTION`
|
||
- `VITE_COSMOS_SPACE_SIZE`
|
||
- `VITE_COSMOS_CURVED_LINKS`
|
||
- `VITE_COSMOS_FIT_VIEW_PADDING`
|
||
- The right pane keeps a static camera after an explicit `fitViewByPointPositions(...)` from the current seed positions.
|
||
- `VITE_COSMOS_SIMULATION_CENTER` is the main knob for keeping the graph mass near the viewport center during force layout.
|
||
- `VITE_COSMOS_DEBUG_LAYOUT=true` enables a small debug overlay and `console.debug` logs for graph-space centroid/bounds, screen-space origin/centroid placement, zoom, alpha/progress, and space-boundary pressure.
|
||
- In Docker Compose, set them in the repo-root `.env` and restart the `frontend` service.
|
||
|
||
## UI
|
||
|
||
- Drag: pan
|
||
- Scroll: zoom
|
||
- Click: select/deselect nodes
|
||
|
||
Buttons:
|
||
|
||
- **Top-right:** selection query mode (controls how the backend expands “neighbors” for the current selection)
|
||
- **Bottom-right:** graph query mode (controls which SPARQL edge set the backend uses to build the graph snapshot; switching reloads the graph)
|
||
|
||
The available modes are discovered from the backend at runtime (`/api/selection_queries` and `/api/graph_queries`).
|
||
|
||
## Rendering / limits
|
||
|
||
The renderer uses a quadtree spatial index and draws only a subset when zoomed out:
|
||
|
||
- Points:
|
||
- Per-frame cap: `MAX_DRAW = 2_000_000` (sampling over visible leaves)
|
||
- Lines:
|
||
- Drawn only when fewer than ~20k nodes are “visible” (leaf AABB overlap with the camera frustum)
|
||
|
||
Selected and “neighbor” nodes are drawn on top using index buffers.
|