dispatch hook to update the database

Author: Erik Soehnel

app/postcss.config.cjs

@@ -11,4 +11,4 @@ module.exports = {
       },
     },
   },
-};
+};

app/src/App.tsx

@@ -1,5 +1,7 @@
 import { AppShell, Group, MantineProvider, rem } from "@mantine/core";
+import "@mantine/core/styles.css";
 import "./App.css";
+import { Filter } from "./components/Filter";
 import { Graph } from "./components/Graph";
 import { DatabaseContextProvider, useDatabase } from "./database";
 
@@ -42,6 +44,7 @@ function App() {
           </AppShell.Header>
 
           <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}>
+            <Filter />
             <Graph />
             <h1>Results</h1>
             <ResultsTable />

app/src/components/Filter.tsx

@@ -0,0 +1,32 @@
+import { Checkbox, Stack } from "@mantine/core";
+import { useDatabase, useDatabaseDispatch } from "../database";
+
+function BenchmarksFilter() {
+  const benchmarks = useDatabase((db) => {
+    return db.findBenchmarks();
+  });
+  const setFilter = useDatabaseDispatch("setBenchmarkSelected");
+
+  return (
+    <Stack gap="xs">
+      {benchmarks?.map((b) => (
+        <Checkbox
+          key={b.id}
+          label={b.name}
+          checked={!!b.selected}
+          onChange={(ev) => {
+            setFilter(b.id, !ev.currentTarget.checked);
+          }}
+        />
+      ))}
+    </Stack>
+  );
+}
+
+export function Filter() {
+  return (
+    <div>
+      <BenchmarksFilter />
+    </div>
+  );
+}

app/src/components/Graph.tsx

@@ -111,6 +111,10 @@ export function Graph() {
   const [svg, setSvg] = useState<string | null>(null);
 
   useDatabase(async (db) => {
+    // delay the (expensive) graph rendering for 1 frame in order to not block
+    // updating other parts of the ui
+    await new Promise((resolve) => setTimeout(resolve, 16));
+
     setSvg(
       await graph({
         colors: COLORS,

app/src/database/DatabaseContext.tsx

@@ -8,22 +8,27 @@ export function DatabaseContextProvider(props: PropsWithChildren) {
 
   useEffect(() => {
     if (db) {
-      return;
+      return () => {
+        void db.close();
+      };
     }
 
     Database.create()
-      .then(async (conn) => {
+      .then((conn) => {
         // fetch results lazily
-        conn.fetchResults().catch(console.error);
+        // TODO: move this init code outside of the db contextprovider
+        conn.fetchResults().catch((e: unknown) => {
+          console.error(e);
+        });
 
         setDb(conn);
       })
-      .catch(console.error);
+      .catch((e: unknown) => {
+        console.error(e);
+      });
 
-    return () => {
-      db!?.close();
-    };
-  });
+    return;
+  }, [db]);
 
   return (
     <DatabaseContext.Provider value={db}>

app/src/database/database.ts

@@ -1,3 +1,9 @@
+// Without using runtypes, an orm or query-generator, we need to use any on
+// the db results and trust our SQL-skills.
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { Database as SqliteDatabase } from "./sqlite";
 import { schema } from "./schema";
 
@@ -158,11 +164,13 @@ export class Database {
     await this._insertResults(data.results);
   }
 
-  async findBenchmarks(): Promise<{
-    id: number;
-    name: string;
-    selected: 0 | 1;
-  }> {
+  async findBenchmarks(): Promise<
+    {
+      id: number;
+      name: string;
+      selected: 0 | 1;
+    }[]
+  > {
     return (await this._db.query(
       "SELECT id, name, selected FROM benchmarks",
     )) as any;
@@ -198,25 +206,27 @@ export class Database {
     selected: boolean,
   ): Promise<void> {
     await this._db.query(
-      "UPDATE benchmarks SET selected = :selected WHERE id = :benchmarkId ORDER BY name ASC",
+      "UPDATE benchmarks SET selected = :selected WHERE id = :benchmarkId",
       {
         ":benchmarkId": benchmarkId,
         ":selected": selected ? 0 : 1,
       },
     );
+    this._notifyUpdateCallbacks();
   }
 
   async setRuntimeSelected(
     runtimeId: number,
     selected: boolean,
   ): Promise<void> {
     await this._db.query(
-      "UPDATE runtimes SET selected = :selected WHERE id = :runtimeId ORDER BY name ASC, version ASC",
+      "UPDATE runtimes SET selected = :selected WHERE id = :runtimeId",
       {
         ":runtimeId": runtimeId,
         ":selected": selected ? 0 : 1,
       },
     );
+    this._notifyUpdateCallbacks();
   }
 
   async findResults(): Promise<Result[]> {

app/src/database/index.ts

@@ -1,3 +1,4 @@
 export { BENCHMARKS, COLORS, Database, type Result } from "./database";
 export { DatabaseContextProvider } from "./DatabaseContext";
 export { useDatabase } from "./useDatabase";
+export { useDatabaseDispatch } from "./useDatabaseDispatch";

app/src/database/sqlite.ts

@@ -1,5 +1,8 @@
 import { sqlite3Worker1Promiser, Promiser } from "@sqlite.org/sqlite-wasm";
 
+// sqlite wrapper is only barely typed so I need to use lots of anys
+/* eslint-disable */
+
 export class Database {
   static async create(): Promise<Database> {
     const promiser = await new Promise<Promiser>((resolve) => {
@@ -29,7 +32,7 @@ export class Database {
   async query(sqlString: string, params?: any) {
     let rows: Record<string, any>[] = [];
 
-    return new Promise<typeof rows>((resolve) => {
+    return new Promise<typeof rows>((resolve, reject) => {
       this._promiser("exec", {
         sql: sqlString,
         bind: params,
@@ -51,6 +54,43 @@ export class Database {
             );
           }
         },
+      }).catch((err: any) => {
+        if (
+          !err ||
+          typeof err !== "object" ||
+          err.type !== "error" ||
+          typeof err.dbId !== "string" ||
+          typeof err.result?.message !== "string" ||
+          err.result?.errorClass !== "SQLite3Error"
+        ) {
+          // not an sqlite error
+          const wrappedError: any = new Error(
+            "Error while executing query " +
+              JSON.stringify(sqlString) +
+              ":" +
+              err?.message,
+          );
+
+          wrappedError.query = sqlString;
+          wrappedError.queryParams = params;
+          wrappedError.sqliteError = err;
+
+          reject(wrappedError);
+        }
+
+        // sqlite error
+        const wrappedError: any = new Error(
+          "Sqlite Error while executing query " +
+            JSON.stringify(sqlString) +
+            ":" +
+            err.result.message,
+        );
+
+        wrappedError.query = sqlString;
+        wrappedError.queryParams = params;
+        wrappedError.sqliteError = err;
+
+        reject(wrappedError);
       });
     });
   }

app/src/database/useDatabase.ts

@@ -2,6 +2,8 @@ import { useContext, useEffect, useState } from "react";
 import { DatabaseContext } from "./DatabaseContext";
 import { Database } from "./database";
 
+// TODO: check https://react.dev/reference/react/useSyncExternalStore
+// const stuff = useDatabase("fetchStuff")
 export function useDatabase<T>(
   callback: (db: Database) => Promise<T>,
   dependencies?: readonly unknown[],
@@ -22,18 +24,24 @@ export function useDatabase<T>(
     };
   }, [db]);
 
-  useEffect(() => {
-    if (!db) {
-      return;
-    }
+  useEffect(
+    () => {
+      if (!db) {
+        return;
+      }
 
-    callback(db)
-      .then((r) => setResult(r))
-      .catch((err) => {
-        setResult(null);
-        console.error(err);
-      });
-  }, [db, timestamp, ...(dependencies || [])]);
+      callback(db)
+        .then((r) => {
+          setResult(r);
+        })
+        .catch((err: unknown) => {
+          setResult(null);
+          console.error(err);
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [db, timestamp, ...(dependencies ?? [])],
+  );
 
   return result;
 }

app/src/database/useDatabaseDispatch.ts

@@ -0,0 +1,37 @@
+import { useContext, useEffect, useState } from "react";
+import { DatabaseContext } from "./DatabaseContext";
+import { Database } from "./database";
+
+type MethodNames<T> = {
+  [M in keyof T]: T[M] extends (...args: unknown[]) => unknown ? M : never;
+}[keyof T];
+
+export function useDatabaseDispatch<T extends MethodNames<Database>>(
+  methodName: T,
+): (...params: Parameters<Database[T]>) => void {
+  const [cb, setCb] = useState<{
+    value: ((...params: Parameters<Database[T]>) => void) | null;
+  }>({ value: null });
+  const db = useContext(DatabaseContext);
+
+  useEffect(() => {
+    if (!db) {
+      return;
+    }
+
+    setCb({
+      value: (...params) => {
+        // need to cast to any as typescript cannot infer ...params
+        // eslint-disable-next-line
+        return (db[methodName] as any)(...params);
+      },
+    });
+  }, [methodName, db, setCb]);
+
+  return (
+    cb.value ??
+    (() => {
+      return;
+    })
+  );
+}