visualizador_instanciados/frontend

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):

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.