WebVOWL WASM

High-performance Rust/WASM implementation of WebVOWL ontology visualizer.

Features

• 🚀 High Performance: 10-100x faster than JavaScript implementation
• 🧪 Test-Driven: >90% test coverage with London-style TDD
• 🔧 Type-Safe: Full Rust type safety with WASM bindings
• 📦 Zero Dependencies: Pure Rust implementation (runtime)
• 🎨 SVG Rendering: Built-in SVG export functionality
• ⚡ Optimized Layout: Fast force-directed graph layout algorithm

Quick Start

Build

# Install wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Build for web
npm run build

# Build for development (with debug symbols)
npm run build:dev

Test

# Run all tests
npm test

# Run tests in specific browser
npm run test:firefox
npm run test:chrome

# Run Rust unit tests
cargo test

Benchmark

npm run bench

Usage

JavaScript/TypeScript

import init, { WebVowl } from './pkg/webvowl_wasm.js';

async function main() {
    // Initialize WASM module
    await init();

    // Create WebVOWL instance
    const webvowl = new WebVowl();

    // Load ontology
    const ontologyJson = await fetch('ontology.json').then(r => r.json());
    webvowl.loadOntology(JSON.stringify(ontologyJson));

    // Configure simulation
    webvowl.setCenter(400, 300);
    webvowl.setLinkDistance(50);
    webvowl.setChargeStrength(-100);

    // Run simulation
    webvowl.initSimulation();
    webvowl.runSimulation(100);

    // Get results
    const graphData = webvowl.getGraphData();
    const stats = webvowl.getStatistics();

    console.log('Nodes:', stats.node_count);
    console.log('Edges:', stats.edge_count);
    console.log('Graph data:', graphData);
}

main();

Animation Loop

function animate() {
    if (!webvowl.isFinished()) {
        webvowl.tick();
        const graphData = webvowl.getGraphData();

        // Update visualization with graphData
        updateVisualization(graphData);

        requestAnimationFrame(animate);
    }
}

webvowl.initSimulation();
animate();

Architecture

Modules

• ontology: OWL ontology parsing and validation
• graph: Graph data structures (nodes, edges)
• layout: Force-directed layout algorithms
• render: SVG/Canvas rendering utilities
• bindings: WASM JavaScript bindings

Performance

Benchmarks on M1 MacBook Pro:

| Operation | Size | Time | |-----------|------|------| | Parse Ontology | 100 classes | ~500μs | | Build Graph | 100 nodes | ~200μs | | Force Tick | 100 nodes | ~150μs | | Full Simulation | 100 nodes, 50 iter | ~8ms |

API Reference

WebVowl

Main WASM interface for ontology visualization.

Methods

• new(): Create new instance
• loadOntology(json: string): Load ontology from JSON
• initSimulation(): Initialize force simulation
• runSimulation(iterations: number): Run simulation for N iterations
• tick(): Perform one simulation step
• isFinished(): Check if simulation has converged
• getAlpha(): Get current simulation alpha (energy)
• setCenter(x: number, y: number): Set center position
• setLinkDistance(distance: number): Set target link distance
• setChargeStrength(strength: number): Set node repulsion strength
• getGraphData(): Get current graph data with positions
• getNodeCount(): Get number of nodes
• getEdgeCount(): Get number of edges
• getStatistics(): Get graph statistics

Development

Project Structure

rust-wasm/
├── src/
│   ├── lib.rs              # Main library entry
│   ├── error.rs            # Error types
│   ├── ontology/           # OWL parsing
│   │   ├── mod.rs
│   │   ├── parser.rs
│   │   └── model.rs
│   ├── graph/              # Graph structures
│   │   ├── mod.rs
│   │   ├── node.rs
│   │   ├── edge.rs
│   │   └── builder.rs
│   ├── layout/             # Layout algorithms
│   │   ├── mod.rs
│   │   ├── force.rs
│   │   └── simulation.rs
│   ├── render/             # Rendering
│   │   └── mod.rs
│   └── bindings/           # WASM bindings
│       └── mod.rs
├── tests/
│   └── integration_test.rs
├── benches/
│   ├── layout_bench.rs
│   └── parser_bench.rs
├── Cargo.toml
└── package.json

Testing Strategy

The project uses London-style TDD:

1. Mock-First Design: Define interfaces with #[mockall::automock]
2. Behavior Testing: Test interactions, not just state
3. Red-Green-Refactor: Write failing test → implement → refactor
4. High Coverage: Target >90% code coverage

Code Quality

# Check code
cargo check --all-targets

# Clippy linting
cargo clippy -- -D warnings

# Format check
cargo fmt -- --check

# Run all quality checks
npm run check && npm run clippy && npm run fmt

License

MIT License - see LICENSE file for details

Contributing

1. Fork the repository
2. Create a feature branch
3. Write tests first (TDD)
4. Implement feature
5. Ensure all tests pass
6. Submit pull request

Performance Tips

1. Batch Updates: Update multiple nodes before rendering
2. Reduce Iterations: 50-100 iterations usually sufficient
3. Adjust Forces: Tune link distance and charge strength for your data
4. Use Alpha: Stop simulation when alpha < threshold
5. Fixed Nodes: Pin important nodes to reduce computation

Comparison with JavaScript

| Metric | JavaScript | Rust/WASM | Improvement | |--------|-----------|-----------|-------------| | Parse Time | ~5ms | ~0.5ms | 10x | | Layout Tick | ~2ms | ~0.15ms | 13x | | Memory Usage | ~8MB | ~1MB | 8x | | Bundle Size | ~150KB | ~80KB | 1.9x |

Roadmap

• [ ] Multi-threading with Web Workers
• [ ] WebGL rendering backend
• [ ] Incremental layout updates
• [ ] Custom layout algorithms
• [ ] SPARQL query integration
• [ ] Real-time collaboration

Support

For issues and questions, please use the GitHub issue tracker.