Discourse Context Refactor (DiscourseGraphs#25)

* fireQuery logging

* initial refactor, return fireQuery promises

* initial streaming

* debounce spinner

* renderActiveTabPanelOnly

* disable overlay (bump roamjs-components)

Author: mdroidian

apps/roam/package.json

@@ -32,7 +32,7 @@
     "react-draggable": "^4.4.5",
     "react-in-viewport": "^1.0.0-alpha.20",
     "react-vertical-timeline-component": "^3.5.2",
-    "roamjs-components": "^0.83.4",
+    "roamjs-components": "^0.84.0",
     "signia-react": "^0.1.1"
   },
   "overrides": {

apps/roam/src/components/DiscourseContext.tsx

@@ -6,6 +6,7 @@ import {
   Tabs,
   Tab,
   Tooltip,
+  Spinner,
 } from "@blueprintjs/core";
 import React, {
   useCallback,
@@ -309,17 +310,38 @@ const ContextTab = ({
 };
 
 export const ContextContent = ({ uid, results }: Props) => {
-  const [rawQueryResults, setRawQueryResults] = useState(results || []);
+  const [rawQueryResults, setRawQueryResults] = useState<
+    Record<string, DiscourseContextResults[number]>
+  >({});
   const queryResults = useMemo(
-    () => rawQueryResults.filter((r) => !!Object.keys(r.results).length),
+    () =>
+      Object.values(rawQueryResults).filter(
+        (r) => !!Object.keys(r.results).length,
+      ),
     [rawQueryResults],
   );
   const [loading, setLoading] = useState(true);
+  const debouncedLoading = useDebounce(loading, 150);
+
   const onRefresh = useCallback(() => {
-    getDiscourseContextResults({ uid })
-      .then(setRawQueryResults)
-      .finally(() => setLoading(false));
-  }, [uid, results, setRawQueryResults, setLoading]);
+    setRawQueryResults({});
+    getDiscourseContextResults({
+      uid,
+      onResult: (result) => {
+        setRawQueryResults((prev) => ({
+          ...prev,
+          [result.label]: {
+            label: result.label,
+            results: {
+              ...(prev[result.label]?.results || {}),
+              ...result.results,
+            },
+          },
+        }));
+      },
+    }).finally(() => setLoading(false));
+  }, [uid, setRawQueryResults, setLoading]);
+
   useEffect(() => {
     if (!results) {
       onRefresh();
@@ -342,6 +364,7 @@ export const ContextContent = ({ uid, results }: Props) => {
         selectedTabId={tabId}
         onChange={(e) => setTabId(Number(e))}
         vertical
+        renderActiveTabPanelOnly
       >
         {queryResults.map((r, i) => (
           <Tab
@@ -361,9 +384,14 @@ export const ContextContent = ({ uid, results }: Props) => {
             }
           />
         ))}
+        {debouncedLoading && (
+          <div className="text-muted-foreground m-auto flex items-center gap-2 text-sm">
+            <Spinner />
+          </div>
+        )}
       </Tabs>
     </>
-  ) : loading ? (
+  ) : debouncedLoading && !results ? (
     <Tabs selectedTabId={0} onChange={() => {}} vertical>
       <Tab
         id={0}
@@ -412,4 +440,21 @@ const DiscourseContext = ({ uid }: Props) => {
   );
 };
 
+// used here to prevent the loading spinner from flashing briefly when queries resolve quickly
+const useDebounce = <T,>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
 export default DiscourseContext;

apps/roam/src/components/settings/GeneralSettings.tsx

@@ -50,11 +50,13 @@ const DiscourseGraphHome = ({
         />
         <FlagPanel
           title="overlay"
-          description="Whether or not to overlay discourse context information over node references"
+          // description="Whether or not to overlay discourse context information over node references"
+          description="Currently disabled. Being reworked."
           order={3}
           uid={settings.overlay.uid}
           parentUid={settings.grammarUid}
           value={settings.overlay.value || false}
+          disabled={true}
         />
       </div>
       <TextPanel

apps/roam/src/discourseGraphsMode.ts

@@ -222,8 +222,10 @@ const initializeDiscourseGraphsMode = async (args: OnloadArgs) => {
             {
               title: "overlay",
               Panel: FlagPanel,
-              description:
-                "Whether to overlay discourse context information over node references",
+              // description:
+              //   "Whether to overlay discourse context information over node references",
+              description: "Currently disabled. Being reworked.",
+              disabled: true,
               options: {
                 onChange: (val) => {
                   onPageRefObserverChange(overlayPageRefHandler)(val);
@@ -473,9 +475,9 @@ const initializeDiscourseGraphsMode = async (args: OnloadArgs) => {
   });
 
   if (isFlagEnabled("preview")) pageRefObservers.add(previewPageRefHandler);
-  if (isFlagEnabled("grammar.overlay")) {
-    pageRefObservers.add(overlayPageRefHandler);
-  }
+  // if (isFlagEnabled("grammar.overlay")) {
+  //   pageRefObservers.add(overlayPageRefHandler);
+  // }
   if (pageRefObservers.size) enablePageRefObserver();
 
   const queryPages = args.extensionAPI.settings.get("query-pages");

apps/roam/src/utils/fireQuery.ts

@@ -14,6 +14,7 @@ import predefinedSelections, {
 import { DEFAULT_RETURN_NODE } from "./parseQuery";
 import { DiscourseNode } from "./getDiscourseNodes";
 import { DiscourseRelation } from "./getDiscourseRelations";
+import nanoid from "nanoid";
 
 export type QueryArgs = {
   returnNode?: string;
@@ -323,21 +324,33 @@ const fireQuery: FireQuery = async (_args) => {
       }
     : getDatalogQuery(args);
   try {
-    if (getNodeEnv() === "development") {
-      console.log("Query to Roam:");
-      console.log(query);
+    const nodeEnv = getNodeEnv();
+    const queryId = nodeEnv === "development" ? nanoid(4) : "";
+
+    if (nodeEnv === "development") {
+      console.groupCollapsed(`🔍 Roam Query - ${queryId}`);
+      console.log("%c" + query, "color: #94a3b8; font-family: monospace;");
       if (inputs.length) console.log("Inputs:", ...inputs);
+      console.time(`Query - ${queryId}`);
+      console.groupEnd();
     }
 
     //@ts-ignore - todo add async q to roamjs-components
     const queryResults = await window.roamAlphaAPI.data.async.q(
       query,
       ...inputs,
     );
+
+    if (nodeEnv === "development") {
+      console.timeEnd(`Query - ${queryId}`);
+      console.groupEnd();
+    }
+
     return Promise.all(queryResults.map(formatResult));
   } catch (e) {
-    console.error("Error from Roam:");
+    console.group("🚨 Roam Query Error");
     console.error((e as Error).message);
+    console.groupEnd();
     return [];
   }
 };