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,7 +41,8 @@ const sqlJsDialect = () => {
   }
 };
 
-createEffect(() => {
+const kyselyDb = createRoot(() => {
+  createEffect(() => {
     const db = rawDb();
 
     if (db) {
@@ -49,9 +50,9 @@ createEffect(() => {
         return str !== null && str !== "";
       });
     }
-});
+  });
 
-const kyselyDb = createMemo(() => {
+  return createMemo(() => {
     const currentSqlJsDialect = sqlJsDialect();
 
     if (!currentSqlJsDialect) {
@@ -61,6 +62,7 @@ const kyselyDb = createMemo(() => {
     return new Kysely<DB>({
       dialect: currentSqlJsDialect,
     });
+  });
 });
 
 const allThreadsOverviewQueryRaw = kyselyDb()

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,6 +31,7 @@ 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(() => {
+  createRoot(() => {
     void import("~/db").then(({ db }) => {
       createEffect(
         on(db, (currentDb) => {
@@ -50,6 +51,7 @@ queueMicrotask(() => {
         }),
       );
     });
+  });
 });
 
 class LocalStorageCacheAdapter {

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()}
             />