fix: minor type and ui fixes, fix solid reactivity warning

src/components/ui/charts.tsx

@@ -191,8 +191,8 @@ function showTooltip(context: ChartContext) {
   const pos = context.chart.canvas.getBoundingClientRect();
   el.style.opacity = "1";
   el.style.position = "absolute";
-  el.style.left = `${pos.left + window.scrollX + model.caretX}px`;
+  el.style.left = `${(pos.left + window.scrollX + model.caretX).toString()}px`;
-  el.style.top = `${pos.top + window.scrollY + model.caretY}px`;
+  el.style.top = `${(pos.top + window.scrollY + model.caretY).toString()}px`;
   el.style.pointerEvents = "none";
 }
 

src/db.ts

@@ -1,4 +1,4 @@
-import { type Accessor, createEffect, createMemo, createSignal, DEV, type Setter } from "solid-js";
+import { type Accessor, createEffect, createMemo, createRoot, createSignal, DEV, type Setter } from "solid-js";
 
 import { Kysely, type NotNull, sql } from "kysely";
 import type { DB } from "kysely-codegen";
@@ -41,25 +41,27 @@ const sqlJsDialect = () => {
   }
 };
 
-createEffect(() => {
+const kyselyDb = createRoot(() => {
-  const db = rawDb();
+  createEffect(() => {
+    const db = rawDb();
 
-  if (db) {
+    if (db) {
-    db.create_function("is_not_empty", (str: string | null) => {
+      db.create_function("is_not_empty", (str: string | null) => {
-      return str !== null && str !== "";
+        return str !== null && str !== "";
+      });
+    }
+  });
+
+  return createMemo(() => {
+    const currentSqlJsDialect = sqlJsDialect();
+
+    if (!currentSqlJsDialect) {
+      throw new Error("no db selected!");
+    }
+
+    return new Kysely<DB>({
+      dialect: currentSqlJsDialect,
     });
-  }
-});
-
-const kyselyDb = createMemo(() => {
-  const currentSqlJsDialect = sqlJsDialect();
-
-  if (!currentSqlJsDialect) {
-    throw new Error("no db selected!");
-  }
-
-  return new Kysely<DB>({
-    dialect: currentSqlJsDialect,
   });
 });
 

src/lib/db-cache.ts

@@ -1,4 +1,4 @@
-import { createEffect, on } from "solid-js";
+import { createEffect, createRoot, on } from "solid-js";
 
 const DATABASE_HASH_PREFIX = "database";
 
@@ -31,24 +31,26 @@ const HASH_STORE_KEY = "database_hash";
 
 // cannot import `db` the normal way because this file is imported in ~/db.ts before the initialisation of `db` has happened
 queueMicrotask(() => {
-  void import("~/db").then(({ db }) => {
+  createRoot(() => {
-    createEffect(
+    void import("~/db").then(({ db }) => {
-      on(db, (currentDb) => {
+      createEffect(
-        if (currentDb) {
+        on(db, (currentDb) => {
-          const newHash = hashString(new TextDecoder().decode(currentDb.export())).toString();
+          if (currentDb) {
+            const newHash = hashString(new TextDecoder().decode(currentDb.export())).toString();
 
-          const oldHash = localStorage.getItem(HASH_STORE_KEY);
+            const oldHash = localStorage.getItem(HASH_STORE_KEY);
 
-          console.log(newHash, oldHash);
+            console.log(newHash, oldHash);
 
-          if (newHash !== oldHash) {
+            if (newHash !== oldHash) {
-            clearDbCache();
+              clearDbCache();
 
-            localStorage.setItem(HASH_STORE_KEY, newHash);
+              localStorage.setItem(HASH_STORE_KEY, newHash);
+            }
           }
-        }
+        }),
-      }),
+      );
-    );
+    });
   });
 });
 

src/pages/dm/dm-id.tsx

@@ -1,4 +1,4 @@
-import { type Accessor, type Component, createEffect, createResource, Show } from "solid-js";
+import { type Accessor, type Component, createResource, Show } from "solid-js";
 import type { RouteSectionProps } from "@solidjs/router";
 
 import { type ChartData } from "chart.js";
@@ -175,6 +175,14 @@ export const DmId: Component<RouteSectionProps> = (props) => {
             <WordCloudChart
               options={{
                 normalized: true,
+                plugins: {
+                  tooltip: {
+                    enabled: false,
+                  },
+                  legend: {
+                    display: false,
+                  },
+                },
               }}
               data={currentMostUsedWordChartData()}
             />