make db a resource

ES-COCO · Nov 1, 2023 · 3f9d715 · 3f9d715
1 parent fb706aa
commit 3f9d715
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 10 deletions.
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -8,7 +8,6 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
 dist-ssr
 *.local
 

diff --git a/ui/dist/assets/index-3a7b2709.css b/ui/dist/assets/index-3a7b2709.css
diff --git a/ui/dist/assets/index-d751f465.js b/ui/dist/assets/index-d751f465.js
diff --git a/ui/dist/assets/sql-wasm-18fc45ef.wasm b/ui/dist/assets/sql-wasm-18fc45ef.wasm
diff --git a/ui/dist/assets/test-c120ab13.db b/ui/dist/assets/test-c120ab13.db
diff --git a/ui/dist/es-coco-logo.svg b/ui/dist/es-coco-logo.svg
diff --git a/ui/dist/index.html b/ui/dist/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/es-coco-logo.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ES COCO</title>
+  <script type="module" crossorigin src="/assets/index-d751f465.js"></script>
+  <link rel="stylesheet" href="/assets/index-3a7b2709.css">
+</head>
+
+<body>
+  <div id="root"></div>
+
+</body>
+
+</html>
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,14 +1,10 @@
-import { For, createSignal, Component, Show } from "solid-js";
+import { For, Component, Show, createResource, Resource } from "solid-js";
 
 import initSqlJs, { Database } from "sql.js";
 import dbUrl from "../../data/test.db?url";
 import sqlJsWasm from "../node_modules/sql.js/dist/sql-wasm.wasm?url";
 import "./App.css";
 
-const sqlPromise = initSqlJs({ locateFile: () => sqlJsWasm });
-const dataPromise = fetch(dbUrl).then((res) => res.arrayBuffer());
-const [SQL, buf] = await Promise.all([sqlPromise, dataPromise]);
-const db = new SQL.Database(new Uint8Array(buf));
 
 interface Segment {
   id: number;
@@ -28,11 +24,15 @@ interface Annotation {
 }
 
 function queryToMaps(
-  db: Database,
+  db: Resource<Database>,
   query: string,
   ...params: any[]
 ): Map<string, string | number>[] {
-  const result = db.exec(query, params)[0];
+  const connection = db();
+  if (!connection) {
+    return [];
+  }
+  const result = connection.exec(query, params)[0];
   return result.values.map((values) => {
     const m = new Map();
     for (let i = 0; i < result.columns.length; i++) {
@@ -77,9 +77,13 @@ const Token: Component<{ data: Token }> = (props) => {
 };
 
 const App: Component = () => {
-  const [query, setQuery] = createSignal("");
+  const [db] = createResource(async () => {
+    const sqlPromise = initSqlJs({ locateFile: () => sqlJsWasm });
+    const dataPromise = fetch(dbUrl).then((res) => res.arrayBuffer());
+    const [SQL, buf] = await Promise.all([sqlPromise, dataPromise]);
+    return new SQL.Database(new Uint8Array(buf));
+  })
   const segments = () => {
-    query();
     const segments = queryToMaps(
       db,
       `
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ pnpm-debug.log* @@
     lerna-debug.log*
     node_modules
-    dist
     dist-ssr
     *.local
@@ Expand Down @@