Traditional Cloud Dashboard (High Cloud API Cost & Latency):
User drags slider ──► (HTTP API Call: 250ms) ──► [ Cloud Data Warehouse ($$$) ] ──► (JSON Response: 200ms)
Total Latency: 450 milliseconds per interaction! ❌

In-Browser DuckDB-Wasm (Zero Backend Cost & Sub-10ms Queries):
User drags slider ──► [ DuckDB-Wasm Web Worker in RAM ] ──(Vectorized SIMD Scan)──► 4.2ms Instant Paint!
                      (Zero cloud compute cost, 100% data privacy, runs completely offline!) ✅

┌─────────────────────────────────────────────────────────────────────────┐
│                      DUCKDB-WASM BROWSER ARCHITECTURE                   │
├─────────────────┬───────────────────────────────────────────────────────┤
│ 1. Web Worker   │ DuckDB C++ engine compiled to WebAssembly (Wasm),     │
│    Isolation    │ running in an isolated background browser worker.     │
├─────────────────┼───────────────────────────────────────────────────────┤
│ 2. Wasm SIMD    │ Executes 128-bit vector arithmetic instructions       │
│    Vectorization│ natively inside the browser's V8 / JavaScript engine. │
├─────────────────┼───────────────────────────────────────────────────────┤
│ 3. Apache Arrow │ Zero-copy memory transfer between DuckDB C++ memory   │
│    Zero-Copy    │ and JavaScript visualization libraries (D3 / Canvas). │
├─────────────────┼───────────────────────────────────────────────────────┤
│ 4. HTTP Range   │ Reads Parquet metadata footers and downloads only the │
│    Streaming    │ exact columnar byte ranges over HTTP without full file│
└─────────────────┴───────────────────────────────────────────────────────┘

// useDuckDB.ts - Production React Hook for In-Browser Analytics
import * as duckdb from "@duckdb/duckdb-wasm";
import { useEffect, useState } from "react";

export function useDuckDB() {
  const [db, setDb] = useState<duckdb.AsyncDuckDB | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function initDB() {
      // 1. Select optimal bundle (Wasm SIMD vs Standard)
      const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
      const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);

      // 2. Instantiate Web Worker
      const worker = new Worker(bundle.mainWorker!);
      const logger = new duckdb.ConsoleLogger();
      const asyncDb = new duckdb.AsyncDuckDB(logger, worker);
      await asyncDb.instantiate(bundle.mainModule, bundle.pthreadWorker);

      setDb(asyncDb);
      setLoading(false);
    }
    initDB();
  }, []);

  return { db, loading };
}

// Query remote S3 / Cloudflare R2 Parquet dataset directly from the browser!
async function runAnalytics(db: duckdb.AsyncDuckDB) {
  const conn = await db.connect();

  // HTTP Range Request: Downloads only ~2MB of column data from a 500MB remote Parquet file!
  const query = `
    SELECT 
      country, 
      count(*) as total_orders, 
      round(avg(amount_cents) / 100.0, 2) as avg_order_value
    FROM read_parquet('https://cdn.mojostudio.in/datasets/global_sales_2026.parquet')
    WHERE order_date >= '2026-01-01'
    GROUP BY country
    ORDER BY total_orders DESC
    LIMIT 10;
  `;

  const arrowResult = await conn.query(query);
  console.log("📊 Client-Side Aggregation Result (Apache Arrow):", arrowResult.toArray());
  await conn.close();
}

Client-Side Query Latency (Milliseconds):
┌─────────────────────────────────────────────────────────┐
│ Cloud Server API Roundtrip: ████████████████████ 240 ms │
│ In-Browser DuckDB-Wasm:     █ 14.2 ms (17x Faster!)     │
└─────────────────────────────────────────────────────────┘