Eng 732 left side panel for suggestive mode

apps/roam/src/components/DiscourseContextOverlay.tsx

@@ -1,99 +1,61 @@
 import { Button, Icon, Popover, Position, Tooltip } from "@blueprintjs/core";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import { ContextContent } from "./DiscourseContext";
 import useInViewport from "react-in-viewport/dist/es/lib/useInViewport";
-import normalizePageTitle from "roamjs-components/queries/normalizePageTitle";
-import deriveDiscourseNodeAttribute from "~/utils/deriveDiscourseNodeAttribute";
-import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import nanoid from "nanoid";
-import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
-import getDiscourseContextResults from "~/utils/getDiscourseContextResults";
-import findDiscourseNode from "~/utils/findDiscourseNode";
-import getDiscourseNodes from "~/utils/getDiscourseNodes";
-import getDiscourseRelations from "~/utils/getDiscourseRelations";
 import ExtensionApiContextProvider from "roamjs-components/components/ExtensionApiContext";
 import { OnloadArgs } from "roamjs-components/types/native";
+import { getBlockUidFromTarget } from "roamjs-components/dom";
+import { useDiscourseData } from "~/utils/useDiscourseData";
+import { panelManager } from "./PanelManager";
 
-type DiscourseData = {
-  results: Awaited<ReturnType<typeof getDiscourseContextResults>>;
-  refs: number;
-};
-
-const cache: {
-  [tag: string]: DiscourseData;
-} = {};
-
-const getOverlayInfo = async (tag: string): Promise<DiscourseData> => {
-  try {
-    if (cache[tag]) return cache[tag];
-
-    const relations = getDiscourseRelations();
-    const nodes = getDiscourseNodes(relations);
-
-    const [results, refs] = await Promise.all([
-      getDiscourseContextResults({
-        uid: getPageUidByPageTitle(tag),
-        nodes,
-        relations,
-      }),
-      // @ts-ignore - backend to be added to roamjs-components
-      window.roamAlphaAPI.data.backend.q(
-        `[:find ?a :where [?b :node/title "${normalizePageTitle(tag)}"] [?a :block/refs ?b]]`,
-      ),
-    ]);
+const DiscourseContextOverlay = ({
+  tag,
+  id,
+  parentEl,
+  onloadArgs,
+}: {
+  tag: string;
+  id: string;
+  parentEl: HTMLElement;
+  onloadArgs: OnloadArgs;
+}) => {
+  const blockUid = useMemo(() => getBlockUidFromTarget(parentEl), [parentEl]);
+  const { loading, score, refs, results, tagUid } = useDiscourseData(tag);
+  const [isPanelOpen, setIsPanelOpen] = useState(() =>
+    panelManager.isOpen(tag),
+  );
 
-    return (cache[tag] = {
-      results,
-      refs: refs.length,
-    });
-  } catch (error) {
-    console.error(`Error getting overlay info for ${tag}:`, error);
-    return {
-      results: [],
-      refs: 0,
-    };
-  }
-};
+  const toggleHighlight = useCallback(
+    (on: boolean) => {
+      const nodes = document.querySelectorAll(
+        `[data-dg-block-uid="${blockUid}"]`,
+      );
+      nodes.forEach((el) => {
+        const elem = el as HTMLElement;
+        if (
+          elem.classList.contains("roamjs-discourse-context-overlay") ||
+          elem.closest(".roamjs-discourse-context-overlay")
+        )
+          return;
+        elem.classList.toggle("dg-highlight", on);
+      });
+    },
+    [blockUid],
+  );
 
-const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
-  const tagUid = useMemo(() => getPageUidByPageTitle(tag), [tag]);
-  const [loading, setLoading] = useState(true);
-  const [results, setResults] = useState<DiscourseData["results"]>([]);
-  const [refs, setRefs] = useState(0);
-  const [score, setScore] = useState<number | string>(0);
-  const getInfo = useCallback(
-    () =>
-      getOverlayInfo(tag)
-        .then(({ refs, results }) => {
-          const discourseNode = findDiscourseNode(tagUid);
-          if (discourseNode) {
-            const attribute = getSettingValueFromTree({
-              tree: getBasicTreeByParentUid(discourseNode.type),
-              key: "Overlay",
-              defaultValue: "Overlay",
-            });
-            return deriveDiscourseNodeAttribute({
-              uid: tagUid,
-              attribute,
-            }).then((score) => {
-              setResults(results);
-              setRefs(refs);
-              setScore(score);
-            });
-          }
-        })
-        .finally(() => setLoading(false)),
-    [tag, setResults, setLoading, setRefs, setScore],
+  const handleTogglePanel = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      toggleHighlight(false);
+      panelManager.toggle({ tag, blockUid, onloadArgs });
+      setIsPanelOpen(panelManager.isOpen(tag));
+    },
+    [tag, blockUid, onloadArgs, toggleHighlight],
   );
-  const refresh = useCallback(() => {
-    setLoading(true);
-    getInfo();
-  }, [getInfo, setLoading]);
-  useEffect(() => {
-    getInfo();
-  }, [refresh, getInfo]);
+
   return (
     <Popover
       autoFocus={false}
@@ -113,19 +75,43 @@ const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
           className={`roamjs-discourse-context-overlay ${
             loading ? "animate-pulse" : ""
           }`}
+          {...{ "data-dg-block-uid": blockUid }}
           style={{
             minHeight: "initial",
             paddingTop: ".25rem",
             paddingBottom: ".25rem",
           }}
           minimal
           disabled={loading}
+          onMouseEnter={() => toggleHighlight(true)}
+          onMouseLeave={() => toggleHighlight(false)}
         >
           <div className="flex items-center gap-1.5">
             <Icon icon={"diagram-tree"} />
             <span className="mr-1 leading-none">{loading ? "-" : score}</span>
             <Icon icon={"link"} />
             <span className="leading-none">{loading ? "-" : refs}</span>
+            <Tooltip
+              content={
+                isPanelOpen
+                  ? "Close suggestions panel"
+                  : "Open suggestions panel"
+              }
+              hoverOpenDelay={200}
+              hoverCloseDelay={0}
+              position={Position.RIGHT}
+            >
+              <Button
+                data-dg-role="panel-toggle"
+                data-dg-tag={tag}
+                data-dg-panel-open={isPanelOpen ? "true" : "false"}
+                icon={isPanelOpen ? "panel-table" : "panel-stats"}
+                minimal
+                small
+                intent={isPanelOpen ? "primary" : "none"}
+                onClick={handleTogglePanel}
+              />
+            </Tooltip>
           </div>
         </Button>
       }
@@ -134,7 +120,15 @@ const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
   );
 };
 
-const Wrapper = ({ parent, tag }: { parent: HTMLElement; tag: string }) => {
+const Wrapper = ({
+  parent,
+  tag,
+  onloadArgs,
+}: {
+  parent: HTMLElement;
+  tag: string;
+  onloadArgs: OnloadArgs;
+}) => {
   const id = useMemo(() => nanoid(), []);
   const { inViewport } = useInViewport(
     { current: parent },
@@ -143,7 +137,12 @@ const Wrapper = ({ parent, tag }: { parent: HTMLElement; tag: string }) => {
     {},
   );
   return inViewport ? (
-    <DiscourseContextOverlay tag={tag} id={id} />
+    <DiscourseContextOverlay
+      tag={tag}
+      id={id}
+      parentEl={parent}
+      onloadArgs={onloadArgs}
+    />
   ) : (
     <Button
       small
@@ -175,7 +174,7 @@ export const render = ({
   parent.onmousedown = (e) => e.stopPropagation();
   ReactDOM.render(
     <ExtensionApiContextProvider {...onloadArgs}>
-      <Wrapper tag={tag} parent={parent} />
+      <Wrapper tag={tag} parent={parent} onloadArgs={onloadArgs} />
     </ExtensionApiContextProvider>,
     parent,
   );

apps/roam/src/components/DiscourseSuggestionsPanel.tsx

@@ -0,0 +1,115 @@
+import {
+  Alignment,
+  Card,
+  Classes,
+  Button,
+  Navbar,
+  Collapse,
+} from "@blueprintjs/core";
+import React, { useState, useCallback } from "react";
+import SuggestionsBody from "./SuggestionsBody";
+import { useDiscourseData } from "~/utils/useDiscourseData";
+
+export const DiscourseSuggestionsPanel = ({
+  tag,
+  blockUid,
+  onClose,
+}: {
+  tag: string;
+  blockUid: string;
+  onClose: () => void;
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const { results, loading } = useDiscourseData(tag);
+
+  const toggleHighlight = useCallback(
+    (on: boolean) => {
+      document
+        .querySelectorAll(`[data-dg-block-uid="${blockUid}"]`)
+        .forEach((el) => el.classList.toggle("dg-highlight", on));
+    },
+    [blockUid],
+  );
+
+  return (
+    <Card
+      {...{ "data-dg-block-uid": blockUid }}
+      style={{
+        backgroundColor: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        padding: "8px",
+      }}
+      onMouseEnter={() => toggleHighlight(true)}
+      onMouseLeave={() => toggleHighlight(false)}
+      className="roamjs-discourse-suggestions-panel"
+    >
+      <Navbar
+        style={{
+          borderBottom: "1px solid #d8e1e8",
+          boxShadow: "none",
+          paddingRight: 0,
+          display: "flex",
+          flexWrap: "nowrap",
+          alignItems: "center",
+        }}
+      >
+        <Navbar.Group align={Alignment.LEFT} style={{ flex: 1, minWidth: 0 }}>
+          <Navbar.Heading
+            className="truncate"
+            style={{
+              fontSize: "13px",
+              margin: 0,
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+            onClick={() => setIsOpen((prev) => !prev)}
+          >
+            {tag}
+          </Navbar.Heading>
+        </Navbar.Group>
+        <Navbar.Group
+          align={Alignment.RIGHT}
+          style={{
+            marginRight: "5px",
+            flexShrink: 0,
+            display: "flex",
+            gap: "4px",
+          }}
+        >
+          <Button
+            icon={isOpen ? "chevron-up" : "chevron-down"}
+            minimal
+            small
+            onClick={() => setIsOpen((prev) => !prev)}
+            title={isOpen ? "Collapse" : "Expand"}
+          />
+          <Button
+            icon="cross"
+            minimal={true}
+            title="Close Panel"
+            onClick={onClose}
+            small={true}
+          />
+        </Navbar.Group>
+      </Navbar>
+      <Collapse
+        isOpen={isOpen}
+        keepChildrenMounted={true}
+        transitionDuration={150}
+      >
+        <div
+          className={Classes.CARD}
+          style={{ flexGrow: 1, overflowY: "auto", padding: "6px" }}
+        >
+          <SuggestionsBody
+            tag={tag}
+            blockUid={blockUid}
+            existingResults={results}
+            loading={loading}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};