visualizador_instanciados/frontend/README.md

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

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.