render the graph using db queries

Author: Erik Soehnel

app/package-lock.json

@@ -10,9 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@mantine/core": "^7.13.2",
+    "@mantine/hooks": "^7.13.2",
     "@sqlite.org/sqlite-wasm": "^3.46.1-build3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "vega": "^5.30.0",
+    "vega-lite": "^5.21.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

app/package.json

@@ -1,4 +1,6 @@
+import { AppShell, Group, MantineProvider, rem } from "@mantine/core";
 import "./App.css";
+import { Graph } from "./components/Graph";
 import { DatabaseContextProvider, useDatabase } from "./database";
 
 function ResultsTable() {
@@ -7,32 +9,47 @@ function ResultsTable() {
   });
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>benchmark</th>
-          <th>name</th>
-          <th>ops</th>
-        </tr>
-      </thead>
-      <tbody>
-        {results?.map((r, i) => (
-          <tr key={i}>
-            <td>{r.benchmark}</td>
-            <td>{r.name}</td>
-            <td>{r.ops}</td>
+    <>
+      <h1>sqlite</h1>
+
+      <table>
+        <thead>
+          <tr>
+            <th>benchmark</th>
+            <th>name</th>
+            <th>ops</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {results?.map((r, i) => (
+            <tr key={i}>
+              <td>{r.benchmark}</td>
+              <td>{r.name}</td>
+              <td>{r.ops}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
   );
 }
 
 function App() {
   return (
     <DatabaseContextProvider>
-      <h1>sqlite</h1>
-      <ResultsTable />
+      <MantineProvider>
+        <AppShell header={{ height: 60, offset: false }} padding="md">
+          <AppShell.Header>
+            <Group h="100%" px="md">
+              <h1>Benchmark</h1>
+            </Group>
+          </AppShell.Header>
+
+          <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}>
+            <Graph />
+          </AppShell.Main>
+        </AppShell>
+      </MantineProvider>
     </DatabaseContextProvider>
   );
 }

app/src/App.tsx

@@ -0,0 +1,138 @@
+import { useState } from "react";
+import * as vega from "vega";
+import * as vegaLite from "vega-lite";
+import { type Result, BENCHMARKS, COLORS, useDatabase } from "../database";
+
+async function graph({
+  results,
+  sortedNames,
+  colors,
+  runtimeCount,
+}: {
+  // the benchmark results to display
+  results: Result[];
+  // module names in the order that they should appear in the graph
+  sortedNames: string[];
+  // the number of selected runtimes to calculate the chart bar height
+  runtimeCount: number;
+  // a color map so that each benchmark has the same color in different
+  // node-versions
+  colors: string[];
+}) {
+  const values = results.map((r) => ({
+    ...r,
+    opsLabel: r.ops.toLocaleString("en-US"),
+    // artificical benchmark name to make sure its always sorted by
+    // benchmark and node-version
+    benchmark: [
+      BENCHMARKS.find((b) => b.name === r.benchmark)?.order,
+      r.runtime,
+      r.runtimeVersion,
+      r.benchmark,
+    ].join("-"),
+  }));
+
+  const vegaSpec = vegaLite.compile({
+    data: {
+      values: values,
+    },
+    height: { step: 15 / runtimeCount },
+    background: "transparent", // no white graphs for dark mode users
+    facet: {
+      row: {
+        field: "name",
+        title: null,
+        header: {
+          labelAngle: 0,
+          labelOrient: "left",
+          labelAnchor: "middle",
+          labelAlign: "left",
+          labelFontSize: 12,
+        },
+        sort: sortedNames,
+      },
+    },
+    spec: {
+      layer: [
+        {
+          mark: "bar",
+          width: 600,
+        },
+        {
+          mark: {
+            type: "text",
+            align: "left",
+            baseline: "middle",
+            dx: 3,
+          },
+          encoding: {
+            text: { field: "opsLabel" },
+          },
+        },
+      ],
+      encoding: {
+        x: {
+          field: "ops",
+          type: "quantitative",
+          title: ["operations / sec", "(better ▶)"],
+          axis: {
+            orient: "top",
+            offset: 10,
+            labelFontSize: 12,
+            titleFontSize: 14,
+            titleFontWeight: "normal",
+          },
+        },
+        y: {
+          field: "benchmark",
+          type: "nominal",
+          title: "Benchmark",
+          axis: null, // to debug the bars: axis: {labelFontSize: 3},
+        },
+        color: {
+          field: "benchmark",
+          type: "nominal",
+          legend: null,
+          scale: {
+            range: colors,
+          },
+        },
+      },
+    },
+  });
+
+  const view = new vega.View(vega.parse(vegaSpec.spec), { renderer: "none" });
+  const svg = await view.toSVG();
+
+  return svg;
+}
+
+export function Graph() {
+  const [svg, setSvg] = useState<string | null>(null);
+
+  useDatabase(async (db) => {
+    setSvg(
+      await graph({
+        colors: COLORS,
+        results: await db.findResults(),
+        runtimeCount: await db.getSelectedRuntimeCount(),
+        sortedNames: await db.findSortedModuleNames(),
+      }),
+    );
+  });
+
+  if (!svg) {
+    return (
+      <div style={{ margin: "5rem" }}>
+        <i>No Benchmark Selected</i>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{ marginBottom: "1rem" }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

app/src/components/Graph.tsx

@@ -13,7 +13,9 @@ export function DatabaseContextProvider(props: PropsWithChildren) {
 
     Database.create()
       .then(async (conn) => {
-        await conn.fetchResults();
+        // fetch results lazily
+        conn.fetchResults().catch(console.error);
+
         setDb(conn);
       })
       .catch(console.error);