Add README / Set current objectives

This commit is contained in:
Oxy8
2026-02-23 15:31:56 -03:00
parent 343055b7dd
commit 030e60bce2

67
README.md Normal file
View File

@@ -0,0 +1,67 @@
# Large Instanced Ontology Visualizer
An experimental visualizer designed to render and explore massive instanced ontologies (millions of nodes) with interactive performance.
## 🚀 The Core Challenge
Ontologies with millions of instances present a significant rendering challenge for traditional graph visualization tools. This project solves this by:
1. **Selective Rendering:** Only rendering up to a set limit of nodes (e.g., 2 million) at any given time.
2. **Adaptive Sampling:** When zoomed out, it provides a representative spatial sample of the nodes. When zoomed in, the number of nodes within the viewport naturally falls below the rendering limit, allowing for 100% detail with zero performance degradation.
3. **Spatial Indexing:** Using a custom Quadtree to manage millions of points in memory and efficiently determine visibility.
## 🛠 Technical Architecture
### 1. Data Pipeline & AnzoGraph Integration
The project features an automated pipeline to extract and prepare data from an **AnzoGraph** DB:
- **SPARQL Extraction:** `scripts/fetch_from_db.ts` connects to AnzoGraph via its SPARQL endpoint. It fetches a seed set of subjects and their related triples, identifying "primary" nodes (objects of `rdf:type`).
- **Graph Classification:** Instances are categorized to distinguish between classes and relationships.
- **Force-Directed Layout:** `scripts/compute_layout.ts` calculates 2D positions for the nodes using a **Barnes-Hut** optimized force-directed simulation, ensuring scalability for large graphs.
### 2. Quadtree Spatial Index
To handle millions of nodes without per-frame object allocation:
- **In-place Sorting:** The Quadtree (`src/quadtree.ts`) spatially sorts the raw `Float32Array` of positions at build-time.
- **Index-Based Access:** Leaves store only the index ranges into the sorted array, pointing directly to the data sent to the GPU.
- **Fast Lookups:** Used for both frustum culling and efficient "find node under cursor" calculations.
### 3. WebGL 2 High-Performance Renderer
The renderer (`src/renderer.ts`) is built for maximum throughput:
- **`WEBGL_multi_draw` Extension:** Batches multiple leaf nodes into single draw calls, minimizing CPU overhead.
- **Zero-Allocation Render Loop:** The frame loop uses pre-allocated typed arrays to prevent GC pauses.
- **Dynamic Level of Detail (LOD):**
- **Points:** Always visible, with adaptive density based on zoom.
- **Lines:** Automatically rendered when zoomed in deep enough to see individual relationships (< 20k visible nodes).
- **Selection:** Interactive selection of nodes highlights immediate neighbors (incoming/outgoing edges).
## 🚦 Getting Started
### Prerequisites
- Docker and Docker Compose
- Node.js (for local development)
### Deployment
The project includes a `docker-compose.yml` that spins up both the **AnzoGraph** database and the visualizer app.
```bash
# Start the services
docker-compose up -d
# Inside the app container, the following will run automatically:
# 1. Fetch data from AnzoGraph (fetch_from_db.ts)
# 2. Compute the 2D layout (compute_layout.ts)
# 3. Start the Vite development server
```
The app will be available at `http://localhost:5173`.
## 🖱 Interactions
- **Drag:** Pan the view.
- **Scroll:** Zoom in/out at the cursor position.
- **Click:** Select a node to see its URI/Label and highlight its neighbors.
- **HUD:** Real-time stats on FPS, nodes drawn, and current sampling ratio.
## TODO
- **Positioning:** Use better algorithm to position nodes, trying to avoid as much as possible any edges crossing, but at the same time trying to keep the graph compact.
- **Positioning:** Decide how to handle classes which are both instances and classes.
- **Functionality:** Find every equipment with a specific property or that participate in a specific process.
- **Functionality:** Find every equipment which is connecte to a well.
- **Functionality:** Show every connection witin a specified depth.
- **Functionality:** Show every element of a specific class.