[WIP] feat: add duckdb filtering on the browser

apps/web/hooks/useRunResultTableView.ts

@@ -1,5 +1,163 @@
 import { useCallback, useMemo, useState } from "react";
 import { RunResult } from "../types";
+import * as duckdb from "@duckdb/duckdb-wasm";
+//@ts-ignore
+import duckdb_wasm from "@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm";
+//@ts-ignore
+import duckdb_wasm_next from "@duckdb/duckdb-wasm/dist/duckdb-eh.wasm";
+//@ts-ignore
+
+if (typeof window !== "undefined") {
+  window.initiateDB = async function () {
+    const MANUAL_BUNDLES: duckdb.DuckDBBundles = {
+      mvp: {
+        mainModule: duckdb_wasm,
+        mainWorker: new URL(
+          "@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js",
+          import.meta.url,
+        ).toString(),
+      },
+      eh: {
+        mainModule: duckdb_wasm_next,
+        mainWorker: new URL(
+          "@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js",
+          import.meta.url,
+        ).toString(),
+      },
+    };
+    // Select a bundle based on browser checks
+    const bundle = await duckdb.selectBundle(MANUAL_BUNDLES);
+    const worker = new Worker(bundle.mainWorker!);
+    const logger = new duckdb.ConsoleLogger();
+    const db = new duckdb.AsyncDuckDB(logger, worker);
+    await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+    const conn = await db.connect();
+    conn.query("LOAD json");
+    conn.query("INSTALL json");
+    // const streamResponse = await fetch(
+    //   `https://assets-test.empirical.run/4b61.jsonl`,
+    // );
+    // const data = await streamResponse.text();
+
+    const jsonData = [
+      {
+        config: {
+          run_config: {
+            type: "model",
+            provider: "openai",
+            model: "gpt-4-turbo-preview",
+            prompt:
+              "Extract the name, age and location from the message, and respond with a JSON object. If an entity is missing, respond with null.\n\nMessage: {{user_message}}",
+            parameters: { response_format: { type: "json_object" } },
+            scorers: [{ type: "is-json" }],
+            name: "Run #4b61: gpt-4-turbo-preview",
+          },
+          id: "4b61",
+          dataset_config: { id: "d97a7e79f2eb68c5b7d2c101292d3a00" },
+          created_at: "2024-04-26T00:50:25.986Z",
+        },
+        sample: null,
+      },
+      {
+        config: {
+          run_config: {
+            type: "model",
+            provider: "openai",
+            model: "gpt-4-turbo-preview",
+            prompt:
+              "Extract the name, age and location from the message, and respond with a JSON object. If an entity is missing, respond with null.\n\nMessage: {{user_message}}",
+            parameters: { response_format: { type: "json_object" } },
+            scorers: [{ type: "is-json" }],
+            name: "Run #4b61: gpt-4-turbo-preview",
+          },
+          id: "4b61",
+          dataset_config: { id: "d97a7e79f2eb68c5b7d2c101292d3a00" },
+          created_at: "2024-04-26T00:50:25.986Z",
+        },
+        sample: {
+          inputs: {
+            user_message:
+              "This is Alice. I am a nurse from Maryland. I was born in 1990.",
+          },
+          output: {
+            value:
+              '{\n  "name": "Alice",\n  "age": 33,\n  "location": "Maryland"\n}',
+            tokens_used: 80,
+            finish_reason: "stop",
+            latency: 1943,
+          },
+          dataset_sample_id: "2",
+          created_at: "2024-04-26T00:50:27.929Z",
+          run_id: "4b61",
+          scores: [{ score: 1, name: "is-json", message: "" }],
+        },
+      },
+      {
+        config: {
+          run_config: {
+            type: "model",
+            provider: "openai",
+            model: "gpt-4-turbo-preview",
+            prompt:
+              "Extract the name, age and location from the message, and respond with a JSON object. If an entity is missing, respond with null.\n\nMessage: {{user_message}}",
+            parameters: { response_format: { type: "json_object" } },
+            scorers: [{ type: "is-json" }],
+            name: "Run #4b61: gpt-4-turbo-preview",
+          },
+          id: "4b61",
+          dataset_config: { id: "d97a7e79f2eb68c5b7d2c101292d3a00" },
+          created_at: "2024-04-26T00:50:25.986Z",
+        },
+        sample: {
+          inputs: {
+            user_message:
+              "Hi my name is John Doe. I'm 26 years old and I work in real estate.",
+          },
+          output: {
+            value:
+              '{\n  "name": "John Doe",\n  "age": 26,\n  "location": null\n}',
+            tokens_used: 80,
+            finish_reason: "stop",
+            latency: 2405,
+          },
+          dataset_sample_id: "1",
+          created_at: "2024-04-26T00:50:28.391Z",
+          run_id: "4b61",
+          scores: [{ score: 1, name: "is-json", message: "" }],
+        },
+      },
+    ];
+
+    // const lines = data.split(/\n/);
+    // const jsonData = lines
+    //   .filter((l) => !!l)
+    //   .map((line) => {
+    //     return JSON.parse(line);
+    //   });
+    const encoder = new TextEncoder();
+    // await db.registerFileBuffer(
+    //   "file.json",
+    //   new Uint8Array(await streamResponse.arrayBuffer()),
+    // );
+    // await conn.insertJSONFromPath("file.json", {
+    //   name: "file",
+    // });
+    // ... or column-major format
+    const buffer = encoder.encode(JSON.stringify(jsonData));
+    await db.registerFileBuffer("test", buffer);
+    // await db.registerFileText("test", JSON.stringify(jsonData));
+    // ... with typed insert options
+    await conn.insertJSONFromPath("test", {
+      name: "run",
+      schema: "main",
+    });
+    const results = await conn.query("SELECT * FROM main.run");
+    console.log(results);
+    //@ts-ignore
+    window.results = results;
+    return conn;
+  };
+}
 
 export type RunResultTableHeader = {
   title: string;

apps/web/next.config.js

@@ -1,7 +1,31 @@
+// const withTM = require("next-transpile-modules")([
+//   "@duckdb/react-duckdb",
+//   "xterm",
+// ]);
 /** @type {import('next').NextConfig} */
 module.exports = {
   output: "export",
   distDir: "../../packages/cli/dist/webapp",
   productionBrowserSourceMaps: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
   optimizeFonts: false,
+  webpack: function (config, { isServer, dev }) {
+    config.output.webassemblyModuleFilename =
+      isServer && !dev
+        ? "..static/wasm/[name].[moduleHash].wasm"
+        : "static/wasm/[name].[moduleHash].wasm";
+    config.experiments = { ...config.experiments, asyncWebAssembly: true };
+
+    config.module.rules.push({
+      test: /.*\.wasm$/,
+      type: "asset/resource",
+      generator: {
+        filename: "static/wasm/[name].[contenthash][ext]",
+      },
+    });
+
+    return config;
+  },
 };

apps/web/package.json

@@ -9,6 +9,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@duckdb/duckdb-wasm": "1.28.1-dev106.0",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -24,6 +25,7 @@
     "monaco-themes": "^0.4.4",
     "next": "^14.1.1",
     "next-themes": "^0.3.0",
+    "next-transpile-modules": "^10.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.8.1",

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "build": "turbo build",
     "changeset": "changeset",
+    "dev:test": "node test.js",
     "dev": "npm exec turbowatch turbowatch.ts",
     "docs:install": "cd docs && pnpm --ignore-workspace install",
     "docs:dev": "cd docs && pnpm dev",
@@ -18,6 +19,7 @@
     "@changesets/cli": "^2.27.1",
     "@empiricalrun/eslint-config": "workspace:*",
     "@empiricalrun/typescript-config": "workspace:*",
+    "@parcel/watcher": "^2.4.1",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",

packages/cli/package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "@empiricalrun/typescript-config": "workspace:*",
     "@types/cli-progress": "^3.11.5",
+    "@types/cors": "^2.8.17",
     "@types/detect-port": "^1.3.5",
     "@types/node": "^20.11.24",
     "@types/opener": "^1.4.3"
@@ -36,6 +37,7 @@
     "@types/express": "^4.17.21",
     "cli-progress": "^3.12.0",
     "commander": "^12.0.0",
+    "cors": "^2.8.5",
     "csvtojson": "^2.0.10",
     "detect-port": "^1.5.1",
     "dotenv": "^16.4.5",

packages/cli/src/bin/index.ts

@@ -37,6 +37,7 @@ import {
   buildWarningLog,
   getCliProgressLoggerInstance,
 } from "./logger/cli-logger";
+import cors from "cors";
 
 const configFileName = "empiricalrc.json";
 const cwd = process.cwd();
@@ -228,6 +229,11 @@ program
 
     // TODO: get rid of this with dataset id support
     app.use(express.json({ limit: "50mb" }));
+    app.use(cors());
+    app.use(function setCommonHeaders(req, res, next) {
+      res.set("Access-Control-Allow-Private-Network", "true");
+      next();
+    });
     app.use(express.static(path.join(__dirname, "../webapp")));
     app.get("/api/results", (req, res) => res.sendFile(outputFilePath));
     app.get("/api/runs/:id/score/distribution", async (req, res) => {