fix: support DB graphs without blocking Logseq UI

package.json

@@ -8,11 +8,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@logseq/libs": "0.0.6",
+    "@logseq/libs": "0.0.17",
     "@types/uuid": "^8.3.4",
     "date-fns": "^2.28.0",
     "react": "^18.1.0",
-    "react-calendar-heatmap": "^1.8.1",
+    "react-calendar-heatmap": "^1.10.0",
     "react-dom": "^18.1.0",
     "react-suspense-fetch": "^0.6.0",
     "react-tooltip": "^4.2.21",

src/Heatmap.tsx

@@ -10,13 +10,12 @@ import { ErrorBoundary, FallbackProps } from "react-error-boundary";
 import * as React from "react";
 import CalendarHeatmap from "react-calendar-heatmap";
 import ReactTooltip from "react-tooltip";
-import { useMountedState, useWindowSize } from "react-use";
+import { useMountedState } from "react-use";
 import "./Heatmap.css";
 import {
   formatAsDashed,
   formatAsLocale,
   formatAsParam,
-  triggerIconName,
   parseJournalDate,
   useCurrentJournalDate,
 } from "./utils";
@@ -36,41 +35,61 @@ const useActivities = (startDate: string, endDate: string) => {
   const currentJournalDate = useCurrentJournalDate();
 
   const [rawValue, setRawValue] = React.useState<any[]>([]);
+  const [queryError, setQueryError] = React.useState<Error | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
 
-  React.useLayoutEffect(() => {
     (async () => {
-      const date0 = new Date(startDate);
-      const date1 = new Date(endDate);
+      try {
+        const date0 = new Date(startDate);
+        const date1 = new Date(endDate);
 
-      const res: any[] = await logseq.DB.datascriptQuery(`
-        [:find (pull ?p [*]) (count ?b)
-         :where
-         [?b :block/page ?p]
-         [?p :block/journal? true]
-         [?p :block/journal-day ?d]
-         [?b :block/content ?c]
-         [(clojure.string/blank? ?c) ?empty]
-         [(not ?empty)]
-         [(>= ?d ${formatAsParam(date0)})]
-         [(<= ?d ${formatAsParam(date1)})]]
-     `);
+        // Return only scalar values. DB graphs expose pulled entity keys with
+        // namespaces (for example `block/journal-day`), so reading `name` and
+        // `journal-day` from a pulled object is both version-sensitive and much
+        // more expensive than asking Datascript for the values directly.
+        const res: any[] = await logseq.DB.datascriptQuery(`
+          [:find ?d ?name (count ?b)
+           :where
+           [?p :block/journal-day ?d]
+           [(>= ?d ${formatAsParam(date0)})]
+           [(<= ?d ${formatAsParam(date1)})]
+           [?p :block/name ?name]
+           [?b :block/page ?p]
+           [?b :block/title ?c]
+           [(clojure.string/blank? ?c) ?empty]
+           [(not ?empty)]]
+       `);
 
-      if (isMounted()) {
-        setRawValue(res);
+        if (!cancelled && isMounted()) {
+          setQueryError(null);
+          setRawValue(res);
+        }
+      } catch (error) {
+        if (!cancelled && isMounted()) {
+          setQueryError(
+            error instanceof Error ? error : new Error(String(error))
+          );
+        }
       }
     })();
+
+    return () => {
+      cancelled = true;
+    };
   }, [startDate, endDate]);
 
-  return React.useMemo(() => {
+  const activities = React.useMemo(() => {
     const date0 = new Date(startDate);
     const date1 = new Date(endDate);
     const mapping = Object.fromEntries(
-      rawValue.map(([page, count]: any[]) => {
-        const date = parseJournalDate(page["journal-day"]);
+      rawValue.map(([journalDay, pageName, count]: any[]) => {
+        const date = parseJournalDate(journalDay);
         const datum = {
           count: count ?? 0,
           date: formatAsDashed(date),
-          originalName: page["original-name"] as string,
+          originalName: pageName as string,
         };
         return [datum.date, datum];
       })
@@ -101,6 +120,12 @@ const useActivities = (startDate: string, endDate: string) => {
     }
     return newValues;
   }, [rawValue, currentJournalDate]);
+
+  if (queryError) {
+    throw queryError;
+  }
+
+  return activities;
 };
 
 type Datum = {
@@ -246,33 +271,14 @@ const DateRange = ({
   return null;
 };
 
-function useIconPosition() {
-  const windowSize = useWindowSize();
-  return React.useMemo(() => {
-    let right = windowSize.width - 10;
-    let bottom = 20;
-    if (top?.document) {
-      const iconRect = top?.document
-        .querySelector(`.${triggerIconName}`)
-        ?.getBoundingClientRect();
-      if (iconRect) {
-        right = iconRect.right;
-        bottom = iconRect.bottom;
-      }
-    }
-    return { right, bottom };
-  }, [windowSize]);
-}
-
 export const Heatmap = React.forwardRef<HTMLDivElement>(({}, ref) => {
   const today = formatAsDashed(new Date());
   const [range, setRange] = React.useState<[string, string] | null>(null);
-  const { bottom, right } = useIconPosition();
   return (
     <div
       ref={ref}
       className="heatmap-root"
-      style={{ left: right - 300, top: bottom + 20 }}
+      style={{ right: 16, top: 48, maxWidth: "calc(100vw - 32px)" }}
     >
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         <DateRange range={range} onRangeChange={setRange} today={today} />

src/utils.ts

@@ -63,17 +63,29 @@ export const useThemeMode = () => {
   const isMounted = useMountedState();
   const [mode, setMode] = React.useState<"dark" | "light">("light");
   React.useEffect(() => {
-    setMode(
-      (top?.document
-        .querySelector("html")
-        ?.getAttribute("data-theme") as typeof mode) ??
-        (matchMedia("prefers-color-scheme: dark").matches ? "dark" : "light")
-    );
-    logseq.App.onThemeModeChanged((s) => {
+    let cancelled = false;
+
+    logseq.App.getUserConfigs().then((config) => {
+      const configuredMode = config?.preferredThemeMode;
+      if (
+        !cancelled &&
+        isMounted() &&
+        (configuredMode === "dark" || configuredMode === "light")
+      ) {
+        setMode(configuredMode);
+      }
+    });
+
+    const unsubscribe = logseq.App.onThemeModeChanged((s) => {
       if (isMounted()) {
         setMode(s.mode);
       }
     });
+
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
   }, [isMounted]);
 
   return mode;