Initial steps to re-enable Roam Discourse Context Overlay

apps/roam/src/components/DiscourseContext.tsx

@@ -273,7 +273,7 @@ const ContextTab = ({
       columns={columns}
       onRefresh={onRefresh}
       header={
-        <>
+        <h4 className="m-0 mb-2 flex items-center justify-between">
           <span>{r.label}</span>
           <span style={{ display: "flex", alignItems: "center" }}>
             <Switch
@@ -285,7 +285,7 @@ const ContextTab = ({
               }
             />
           </span>
-        </>
+        </h4>
       }
     />
   );
@@ -324,32 +324,35 @@ export const ContextContent = ({ uid, results }: Props) => {
   const [loading, setLoading] = useState(true);
   const debouncedLoading = useDebounce(loading, 150);
 
+  const addLabels = useCallback((result: DiscourseContextResults[number]) => {
+    setRawQueryResults((prev) => ({
+      ...prev,
+      [result.label]: {
+        label: result.label,
+        results: {
+          ...(prev[result.label]?.results || {}),
+          ...result.results,
+        },
+      },
+    }));
+  }, []);
+
   const onRefresh = useCallback(() => {
     setRawQueryResults({});
     getDiscourseContextResults({
       uid,
-      onResult: (result) => {
-        setRawQueryResults((prev) => ({
-          ...prev,
-          [result.label]: {
-            label: result.label,
-            results: {
-              ...(prev[result.label]?.results || {}),
-              ...result.results,
-            },
-          },
-        }));
-      },
+      onResult: addLabels,
     }).finally(() => setLoading(false));
-  }, [uid, setRawQueryResults, setLoading]);
+  }, [uid, setRawQueryResults, setLoading, addLabels]);
 
   useEffect(() => {
     if (!results) {
       onRefresh();
     } else {
+      results.forEach(addLabels);
       setLoading(false);
     }
-  }, [onRefresh, results, setLoading]);
+  }, [onRefresh, results, setLoading, loading, addLabels]);
   const [tabId, setTabId] = useState(0);
   const [groupByTarget, setGroupByTarget] = useState(false);
   return queryResults.length ? (
@@ -406,7 +409,7 @@ export const ContextContent = ({ uid, results }: Props) => {
       />
     </Tabs>
   ) : (
-    <div className="ml-8">No discourse relations found.</div>
+    <div className="text-center">No discourse relations found.</div>
   );
 };
 

apps/roam/src/components/DiscourseContextOverlay.tsx

@@ -1,4 +1,4 @@
-import { Button, Popover, Position, Tooltip } from "@blueprintjs/core";
+import { Button, Icon, Popover, Position, Tooltip } from "@blueprintjs/core";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import { ContextContent } from "./DiscourseContext";
@@ -38,6 +38,7 @@ const getOverlayInfo = (tag: string, id: string): Promise<DiscourseData> => {
   if (cache[tag]) return Promise.resolve(cache[tag]);
   const relations = getDiscourseRelations();
   const nodes = getDiscourseNodes(relations);
+
   return new Promise((resolve) => {
     const triggerNow = overlayQueue.length === 0;
     overlayQueue.push({
@@ -46,9 +47,16 @@ const getOverlayInfo = (tag: string, id: string): Promise<DiscourseData> => {
       end: 0,
       mid: 0,
       queued: new Date().valueOf(),
-      callback() {
+      async callback() {
         const self = this;
         const start = (self.start = new Date().valueOf());
+        // @ts-ignore
+        const queryResult = await window.roamAlphaAPI.data.async.q(
+          `[:find ?a :where [?b :node/title "${normalizePageTitle(
+            tag,
+          )}"] [?a :block/refs ?b]]`,
+        );
+        const refs = queryResult.length;
         return getDiscourseContextResults({
           uid: getPageUidByPageTitle(tag),
           nodes,
@@ -57,11 +65,8 @@ const getOverlayInfo = (tag: string, id: string): Promise<DiscourseData> => {
           self.mid = new Date().valueOf();
           const output = (cache[tag] = {
             results,
-            refs: window.roamAlphaAPI.data.fast.q(
-              `[:find ?a :where [?b :node/title "${normalizePageTitle(
-                tag,
-              )}"] [?a :block/refs ?b]]`,
-            ).length,
+
+            refs,
           });
           const runTime = (self.end = new Date().valueOf() - start);
           setTimeout(() => {
@@ -161,38 +166,33 @@ const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
       autoFocus={false}
       content={
         <div
-          className="roamjs-discourse-context-popover"
-          style={{
-            padding: 16,
-            maxWidth: 720,
-            position: "relative",
-          }}
+          className={`roamjs-discourse-context-popover relative max-w-3xl p-4 ${
+            results.length === 0 ? "flex items-center justify-center" : ""
+          }`}
         >
           <ContextContent uid={tagUid} results={results} />
-          <span style={{ position: "absolute", bottom: "8px", left: "8px" }}>
-            <Tooltip content={"Refresh Overlay"}>
-              <Button
-                icon={"refresh"}
-                minimal
-                onClick={() => {
-                  delete cache[tag];
-                  refresh();
-                }}
-              />
-            </Tooltip>
-          </span>
         </div>
       }
       target={
         <Button
+          small
           id={id}
           className={"roamjs-discourse-context-overlay"}
+          style={{
+            minHeight: "initial",
+            paddingTop: ".25rem",
+            paddingBottom: ".25rem",
+          }}
           minimal
-          text={`${score} | ${refs}`}
-          icon={"diagram-tree"}
-          rightIcon={"link"}
           disabled={loading}
-        />
+        >
+          <div className="flex items-center gap-1.5">
+            <Icon icon={"diagram-tree"} />
+            <span className="mr-1 leading-none">{score}</span>
+            <Icon icon={"link"} />
+            <span className="leading-none">{refs}</span>
+          </div>
+        </Button>
       }
       position={Position.BOTTOM}
     />
@@ -211,14 +211,19 @@ const Wrapper = ({ parent, tag }: { parent: HTMLElement; tag: string }) => {
     <DiscourseContextOverlay tag={tag} id={id} />
   ) : (
     <Button
+      small
       id={id}
       minimal
-      text={`0 | 0`}
-      icon={"diagram-tree"}
-      rightIcon={"link"}
       className={"roamjs-discourse-context-overlay"}
       disabled={true}
-    />
+    >
+      <div className="flex items-center gap-1.5">
+        <Icon icon={"diagram-tree"} />
+        <span className="mr-1">0</span>
+        <Icon icon={"link"} />
+        <span>0</span>
+      </div>
+    </Button>
   );
 };
 

apps/roam/src/components/QueryDrawer.tsx

@@ -87,15 +87,18 @@ const SavedQuery = ({
       }}
     >
       <ResultsView
+        hideMenu={minimized}
         exportIsOpen={isExportOpen}
         toggleExport={toggleExport}
         parentUid={uid}
         onRefresh={refresh}
         header={
           error ? (
-            <div className="mb-4 text-red-700">{error}</div>
+            <h4 className="m-0 flex items-center justify-between">
+              <div className="mb-4 text-red-700">{error}</div>
+            </h4>
           ) : (
-            <>
+            <h4 className="m-0 flex items-center justify-between">
               {isEditingLabel ? (
                 <InputGroup
                   value={label}
@@ -123,7 +126,7 @@ const SavedQuery = ({
                   {label}
                 </span>
               )}
-              <div className="mr-16 mt-2">
+              <div>
                 {!isSavedToPage && (
                   <>
                     <Tooltip content={"Insert Results"}>
@@ -185,7 +188,7 @@ const SavedQuery = ({
                   </>
                 )}
               </div>
-            </>
+            </h4>
           )
         }
         onDeleteQuery={onDelete}

apps/roam/src/components/results-view/ResultsView.tsx

@@ -226,6 +226,7 @@ type ResultsViewComponent = (props: {
   header?: React.ReactNode;
   results: Result[];
   hideResults?: boolean;
+  hideMenu?: boolean;
   preventSavingSettings?: boolean;
   onEdit?: () => void;
   onDeleteQuery?: () => void;
@@ -267,6 +268,7 @@ const ResultsView: ResultsViewComponent = ({
   header,
   results,
   hideResults = false,
+  hideMenu = false,
   preventSavingSettings = false,
   onEdit,
   onDeleteQuery,
@@ -315,7 +317,8 @@ const ResultsView: ResultsViewComponent = ({
   const [columnFilters, setColumnFilters] = useState(settings.columnFilters);
   const [searchFilter, setSearchFilter] = useState(settings.searchFilter);
   const [showInterface, setShowInterface] = useState(settings.showInterface);
-  const [showMenuIcons, setShowMenuIcons] = useState(false);
+  const [revealMenuIcons, setRevealMenuIcons] = useState(false);
+  const hideMenuIcons = hideMenu || (!revealMenuIcons && !showInterface);
 
   const { allProcessedResults, paginatedResults } = useMemo(() => {
     return postProcessResults(results, {
@@ -410,8 +413,8 @@ const ResultsView: ResultsViewComponent = ({
     <div
       className={`roamjs-query-results-view relative w-full mode-${layout.mode}`}
       ref={containerRef}
-      onMouseEnter={() => setShowMenuIcons(true)}
-      onMouseLeave={() => setShowMenuIcons(false)}
+      onMouseEnter={() => setRevealMenuIcons(true)}
+      onMouseLeave={() => setRevealMenuIcons(false)}
     >
       {isEditSearchFilter && (
         <div
@@ -460,9 +463,10 @@ const ResultsView: ResultsViewComponent = ({
         results={allProcessedResults}
         columns={columns}
       />
+      {header}
       <div className="relative">
         <div
-          style={!showMenuIcons && !showInterface ? { display: "none" } : {}}
+          style={hideMenuIcons ? { display: "none" } : {}}
           className="absolute right-0 z-10 p-1"
         >
           {onRefresh && (
@@ -1134,18 +1138,7 @@ const ResultsView: ResultsViewComponent = ({
             }
           />
         </div>
-        {header && (
-          <h4
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              margin: 4,
-            }}
-          >
-            {header}
-          </h4>
-        )}
+
         {!hideResults && (
           <>
             {results.length !== 0 ? (

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

@@ -2,6 +2,8 @@ import React, { useMemo } from "react";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
 import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
+import { onPageRefObserverChange } from "~/utils/pageRefObserverHandlers";
+import { previewPageRefHandler } from "~/utils/pageRefObserverHandlers";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 
 const DiscourseGraphHome = () => {
@@ -28,16 +30,9 @@ const DiscourseGraphHome = () => {
           uid={settings.preview.uid}
           parentUid={settings.settingsUid}
           value={settings.preview.value || false}
-        />
-        <FlagPanel
-          title="overlay"
-          // 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}
+          options={{
+            onChange: onPageRefObserverChange(previewPageRefHandler),
+          }}
         />
       </div>
       <TextPanel