ruvector/examples/wasm-react/App.jsx

import React, { useState, useEffect, useCallback } from 'react';
import { WorkerPool } from '../../crates/ruvector-wasm/src/worker-pool.js';
import { IndexedDBPersistence } from '../../crates/ruvector-wasm/src/indexeddb.js';

const DIMENSIONS = 384;
const WORKER_URL = '../../crates/ruvector-wasm/src/worker.js';
const WASM_URL = '../../crates/ruvector-wasm/pkg/ruvector_wasm.js';

function App() {
  const [workerPool, setWorkerPool] = useState(null);
  const [persistence, setPersistence] = useState(null);
  const [status, setStatus] = useState({ type: 'info', message: 'Initializing...' });
  const [stats, setStats] = useState({
    vectorCount: 0,
    poolSize: 0,
    busyWorkers: 0,
    cacheSize: 0,
    simdEnabled: false
  });
  const [searchResults, setSearchResults] = useState([]);
  const [benchmarkResults, setBenchmarkResults] = useState(null);

  // Initialize worker pool and persistence
  useEffect(() => {
    async function init() {
      try {
        // Initialize worker pool
        const pool = new WorkerPool(WORKER_URL, WASM_URL, {
          poolSize: navigator.hardwareConcurrency || 4,
          dimensions: DIMENSIONS,
          metric: 'cosine',
          useHnsw: true
        });

        await pool.init();
        setWorkerPool(pool);

        // Initialize persistence
        const persist = new IndexedDBPersistence();
        await persist.open();
        setPersistence(persist);

        setStatus({
          type: 'success',
          message: `Initialized with ${pool.poolSize} workers`
        });

        updateStats(pool, persist);
      } catch (error) {
        setStatus({
          type: 'error',
          message: `Initialization failed: ${error.message}`
        });
        console.error(error);
      }
    }

    init();

    // Cleanup on unmount
    return () => {
      if (workerPool) {
        workerPool.terminate();
      }
      if (persistence) {
        persistence.close();
      }
    };
  }, []);

  // Update statistics
  const updateStats = useCallback(async (pool, persist) => {
    if (!pool || !persist) return;

    try {
      const poolStats = pool.getStats();
      const dbStats = await persist.getStats();
      const count = await pool.len();

      setStats({
        vectorCount: count,
        poolSize: poolStats.poolSize,
        busyWorkers: poolStats.busyWorkers,
        cacheSize: dbStats.cacheSize,
        simdEnabled: false // Would need to detect from worker
      });
    } catch (error) {
      console.error('Failed to update stats:', error);
    }
  }, []);

  // Generate random vector
  const randomVector = useCallback((dimensions) => {
    const vector = new Float32Array(dimensions);
    for (let i = 0; i < dimensions; i++) {
      vector[i] = Math.random() * 2 - 1;
    }
    // Normalize
    const norm = Math.sqrt(vector.reduce((sum, val) => sum + val * val, 0));
    for (let i = 0; i < dimensions; i++) {
      vector[i] /= norm;
    }
    return vector;
  }, []);

  // Insert random vectors
  const insertVectors = useCallback(async (count = 100) => {
    if (!workerPool || !persistence) return;

    const startTime = performance.now();
    setStatus({ type: 'info', message: `Inserting ${count} vectors...` });

    try {
      const entries = [];
      for (let i = 0; i < count; i++) {
        entries.push({
          vector: Array.from(randomVector(DIMENSIONS)),
          id: `vec_${Date.now()}_${i}`,
          metadata: { index: i, timestamp: Date.now() }
        });
      }

      // Insert via worker pool
      const ids = await workerPool.insertBatch(entries);

      // Save to IndexedDB
      await persistence.saveBatch(entries.map((e, i) => ({
        id: ids[i],
        vector: new Float32Array(e.vector),
        metadata: e.metadata
      })));

      const duration = performance.now() - startTime;
      const throughput = (count / (duration / 1000)).toFixed(0);

      setStatus({
        type: 'success',
        message: `Inserted ${ids.length} vectors in ${duration.toFixed(2)}ms (${throughput} ops/sec)`
      });

      updateStats(workerPool, persistence);
    } catch (error) {
      setStatus({
        type: 'error',
        message: `Insert failed: ${error.message}`
      });
      console.error(error);
    }
  }, [workerPool, persistence, randomVector, updateStats]);

  // Search for similar vectors
  const searchVectors = useCallback(async (k = 10) => {
    if (!workerPool) return;

    const startTime = performance.now();
    setStatus({ type: 'info', message: 'Searching...' });

    try {
      const query = Array.from(randomVector(DIMENSIONS));
      const results = await workerPool.search(query, k, null);

      const duration = performance.now() - startTime;

      setSearchResults(results);
      setStatus({
        type: 'success',
        message: `Found ${results.length} results in ${duration.toFixed(2)}ms`
      });
    } catch (error) {
      setStatus({
        type: 'error',
        message: `Search failed: ${error.message}`
      });
      console.error(error);
    }
  }, [workerPool, randomVector]);

  // Run benchmark
  const runBenchmark = useCallback(async () => {
    if (!workerPool) return;

    setStatus({ type: 'info', message: 'Running benchmark...' });
    setBenchmarkResults(null);

    try {
      const iterations = 1000;
      const queries = 100;

      // Benchmark insert
      const insertStart = performance.now();
      await insertVectors(iterations);
      const insertDuration = performance.now() - insertStart;
      const insertThroughput = (iterations / (insertDuration / 1000)).toFixed(0);

      // Benchmark search
      const searchStart = performance.now();
      const searchPromises = [];
      for (let i = 0; i < queries; i++) {
        const query = Array.from(randomVector(DIMENSIONS));
        searchPromises.push(workerPool.search(query, 10, null));
      }
      await Promise.all(searchPromises);
      const searchDuration = performance.now() - searchStart;
      const searchThroughput = (queries / (searchDuration / 1000)).toFixed(0);

      setBenchmarkResults({
        insertOpsPerSec: insertThroughput,
        searchOpsPerSec: searchThroughput,
        insertDuration: insertDuration.toFixed(2),
        searchDuration: searchDuration.toFixed(2)
      });

      setStatus({
        type: 'success',
        message: `Benchmark complete: Insert ${insertThroughput} ops/sec, Search ${searchThroughput} ops/sec`
      });
    } catch (error) {
      setStatus({
        type: 'error',
        message: `Benchmark failed: ${error.message}`
      });
      console.error(error);
    }
  }, [workerPool, insertVectors, randomVector]);

  // Save to IndexedDB
  const saveToIndexedDB = useCallback(async () => {
    if (!persistence) return;

    setStatus({ type: 'info', message: 'Saving to IndexedDB...' });

    try {
      const dbStats = await persistence.getStats();
      setStatus({
        type: 'success',
        message: `Saved ${dbStats.totalVectors} vectors to IndexedDB`
      });
    } catch (error) {
      setStatus({
        type: 'error',
        message: `Save failed: ${error.message}`
      });
      console.error(error);
    }
  }, [persistence]);

  // Load from IndexedDB
  const loadFromIndexedDB = useCallback(async () => {
    if (!persistence || !workerPool) return;

    setStatus({ type: 'info', message: 'Loading from IndexedDB...' });

    try {
      let totalLoaded = 0;

      await persistence.loadAll((progress) => {
        totalLoaded = progress.loaded;
        setStatus({
          type: 'info',
          message: `Loading... ${totalLoaded} vectors loaded`
        });

        // Insert batch into worker pool
        if (progress.vectors && progress.vectors.length > 0) {
          workerPool.insertBatch(progress.vectors).catch(console.error);
        }

        if (progress.complete) {
          setStatus({
            type: 'success',
            message: `Loaded ${totalLoaded} vectors from IndexedDB`
          });
          updateStats(workerPool, persistence);
        }
      });
    } catch (error) {
      setStatus({
        type: 'error',
        message: `Load failed: ${error.message}`
      });
      console.error(error);
    }
  }, [persistence, workerPool, updateStats]);

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>🚀 Ruvector WASM + React</h1>
      <p style={styles.subtitle}>
        High-performance vector database with Web Workers
      </p>

      <div style={{ ...styles.status, ...styles[status.type] }}>
        {status.message}
      </div>

      <div style={styles.stats}>
        <StatCard label="Vectors" value={stats.vectorCount} />
        <StatCard label="Workers" value={`${stats.busyWorkers}/${stats.poolSize}`} />
        <StatCard label="Cache" value={stats.cacheSize} />
        <StatCard label="SIMD" value={stats.simdEnabled ? '✅' : '❌'} />
      </div>

      <div style={styles.controls}>
        <button style={styles.button} onClick={() => insertVectors(100)}>
          Insert 100 Vectors
        </button>
        <button style={styles.button} onClick={() => searchVectors(10)}>
          Search Similar
        </button>
        <button style={styles.button} onClick={runBenchmark}>
          Run Benchmark
        </button>
        <button style={styles.button} onClick={saveToIndexedDB}>
          Save to IndexedDB
        </button>
        <button style={styles.button} onClick={loadFromIndexedDB}>
          Load from IndexedDB
        </button>
      </div>

      {benchmarkResults && (
        <div style={styles.results}>
          <h3>Benchmark Results</h3>
          <div style={styles.resultGrid}>
            <div style={styles.resultItem}>
              <strong>Insert Throughput:</strong> {benchmarkResults.insertOpsPerSec} ops/sec
            </div>
            <div style={styles.resultItem}>
              <strong>Search Throughput:</strong> {benchmarkResults.searchOpsPerSec} ops/sec
            </div>
            <div style={styles.resultItem}>
              <strong>Insert Duration:</strong> {benchmarkResults.insertDuration}ms
            </div>
            <div style={styles.resultItem}>
              <strong>Search Duration:</strong> {benchmarkResults.searchDuration}ms
            </div>
          </div>
        </div>
      )}

      {searchResults.length > 0 && (
        <div style={styles.results}>
          <h3>Search Results</h3>
          {searchResults.map((result, i) => (
            <div key={i} style={styles.resultItem}>
              <strong>#{i + 1}:</strong> {result.id} - Score: {result.score.toFixed(6)}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function StatCard({ label, value }) {
  return (
    <div style={styles.statCard}>
      <div style={styles.statValue}>{value}</div>
      <div style={styles.statLabel}>{label}</div>
    </div>
  );
}

const styles = {
  container: {
    maxWidth: '1200px',
    margin: '0 auto',
    padding: '20px',
    fontFamily: 'system-ui, -apple-system, sans-serif'
  },
  title: {
    fontSize: '2.5em',
    color: '#667eea',
    marginBottom: '10px'
  },
  subtitle: {
    fontSize: '1.1em',
    color: '#666',
    marginBottom: '30px'
  },
  status: {
    padding: '15px',
    borderRadius: '8px',
    marginBottom: '20px',
    fontWeight: '500'
  },
  info: {
    background: '#e3f2fd',
    color: '#1976d2'
  },
  success: {
    background: '#e8f5e9',
    color: '#388e3c'
  },
  error: {
    background: '#ffebee',
    color: '#c62828'
  },
  stats: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
    gap: '15px',
    marginBottom: '30px'
  },
  statCard: {
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    color: 'white',
    padding: '20px',
    borderRadius: '8px',
    textAlign: 'center'
  },
  statValue: {
    fontSize: '2em',
    fontWeight: 'bold',
    marginBottom: '5px'
  },
  statLabel: {
    fontSize: '0.9em',
    opacity: 0.9
  },
  controls: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '10px',
    marginBottom: '30px'
  },
  button: {
    padding: '12px 24px',
    border: 'none',
    borderRadius: '6px',
    fontSize: '14px',
    fontWeight: '600',
    cursor: 'pointer',
    background: '#667eea',
    color: 'white',
    transition: 'all 0.3s ease'
  },
  results: {
    background: '#f8f9fa',
    borderRadius: '8px',
    padding: '20px',
    marginTop: '20px'
  },
  resultGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
    gap: '10px',
    marginTop: '15px'
  },
  resultItem: {
    background: 'white',
    padding: '12px',
    borderRadius: '6px',
    borderLeft: '4px solid #667eea'
  }
};

export default App;