ENG-788 - Add Discourse Context Overlay to tldraw canvas (#380)

* Enhance DiscourseNodeUtil and HomePersonalSettings with overlay functionality

- Introduced DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY to manage the visibility of the Discourse Context overlay in the canvas.
- Updated HomePersonalSettings to include a checkbox for enabling/disabling the overlay feature.
- Integrated useMemo in DiscourseNodeUtil to optimize the overlay setting retrieval.
- Added conditional rendering for the DiscourseContextOverlay in the canvas based on the overlay state.

* Refactor DiscourseContextOverlay to support uid prop and improve tag handling

- Updated DiscourseContextOverlay to accept uid prop, allowing for more flexible tag resolution.
- Refactored getOverlayInfo call to utilize the new tag logic based on uid or tag.
- Adjusted DiscourseNodeUtil to pass uid instead of deriving tag from it, enhancing clarity and functionality.

* .

Author: mdroidian

apps/roam/src/components/DiscourseContextOverlay.tsx

@@ -15,6 +15,7 @@ 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 getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 
 type DiscourseData = {
   results: Awaited<ReturnType<typeof getDiscourseContextResults>>;
@@ -57,15 +58,24 @@ const getOverlayInfo = async (tag: string): Promise<DiscourseData> => {
   }
 };
 
-const DiscourseContextOverlay = ({ tag, id }: { tag: string; id: string }) => {
-  const tagUid = useMemo(() => getPageUidByPageTitle(tag), [tag]);
+type DiscourseContextOverlayProps =
+  | { id: string; tag: string; uid?: never }
+  | { id: string; uid: string; tag?: never }
+  | { id: string; tag: string; uid: string };
+const DiscourseContextOverlay = ({
+  tag,
+  id,
+  uid,
+}: DiscourseContextOverlayProps) => {
+  const newTag = tag ?? (uid ? (getPageTitleByPageUid(uid) ?? "") : "");
+  const tagUid = uid || getPageUidByPageTitle(newTag);
   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)
+      getOverlayInfo(newTag)
         .then(({ refs, results }) => {
           const discourseNode = findDiscourseNode(tagUid);
           if (discourseNode) {

apps/roam/src/components/canvas/DiscourseNodeUtil.tsx

@@ -22,7 +22,7 @@ import {
   TLDefaultFontStyle,
   DefaultFontStyle,
 } from "tldraw";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
 import { useExtensionAPI } from "roamjs-components/components/ExtensionApiContext";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import isLiveBlock from "roamjs-components/queries/isLiveBlock";
@@ -38,8 +38,12 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import { createTextJsxFromSpans } from "./DiscourseRelationShape/helpers";
 import { loadImage } from "~/utils/loadImage";
 import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
-import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
+import {
+  AUTO_CANVAS_RELATIONS_KEY,
+  DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
+} from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
+import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 
 // TODO REPLACE WITH TLDRAW DEFAULTS
 // https://github.com/tldraw/tldraw/pull/1580/files
@@ -450,13 +454,20 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
     const {
       canvasSettings: { alias = "", "key-image": isKeyImage = "" } = {},
     } = discourseContext.nodes[shape.type] || {};
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const isOverlayEnabled = useMemo(
+      () => getSetting(DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, false),
+      [],
+    );
 
     const isEditing = this.editor.getEditingShapeId() === shape.id;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const contentRef = useRef<HTMLDivElement>(null);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [loaded, setLoaded] = useState("");
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [overlayMounted, setOverlayMounted] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (
         shape.props.uid !== loaded &&
@@ -498,7 +509,11 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
       <HTMLContainer
         id={shape.id}
         className="roamjs-tldraw-node pointer-events-auto flex items-center justify-center overflow-hidden rounded-2xl"
-        style={{ background: backgroundColor, color: textColor }}
+        style={{
+          background: backgroundColor,
+          color: textColor,
+        }}
+        onPointerEnter={() => setOverlayMounted(true)}
       >
         <div style={{ pointerEvents: "all" }}>
           {shape.props.imageUrl && isKeyImage ? (
@@ -519,6 +534,17 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
               fontSize: FONT_SIZES[shape.props.size],
             }}
           >
+            {overlayMounted && isOverlayEnabled && (
+              <div
+                className="roamjs-discourse-context-overlay-container absolute right-0 top-0"
+                onPointerDown={(e) => e.stopPropagation()}
+              >
+                <DiscourseContextOverlay
+                  uid={shape.props.uid}
+                  id={`${shape.id}-overlay`}
+                />
+              </div>
+            )}
             {alias
               ? new RegExp(alias).exec(shape.props.title)?.[1] ||
                 shape.props.title

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

@@ -15,9 +15,11 @@ import {
 import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
 import {
   AUTO_CANVAS_RELATIONS_KEY,
+  DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
   DISCOURSE_TOOL_SHORTCUT_KEY,
 } from "~/data/userSettings";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
+import { getSetting, setSetting } from "~/utils/extensionSettings";
 
 const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const extensionAPI = onloadArgs.extensionAPI;
@@ -177,6 +179,26 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
           </>
         }
       />
+      <Checkbox
+        defaultChecked={getSetting(
+          DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
+          false,
+        )}
+        onChange={(e) => {
+          const target = e.target as HTMLInputElement;
+          setSetting(DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY, target.checked);
+        }}
+        labelElement={
+          <>
+            (BETA) Overlay in Canvas
+            <Description
+              description={
+                "Whether or not to overlay Discourse Context information over Canvas Nodes."
+              }
+            />
+          </>
+        }
+      />
     </div>
   );
 };

apps/roam/src/data/userSettings.ts

@@ -5,3 +5,5 @@ export const DEFAULT_FILTERS_KEY = "default-filters";
 export const QUERY_BUILDER_SETTINGS_KEY = "query-builder-settings";
 export const AUTO_CANVAS_RELATIONS_KEY = "auto-canvas-relations";
 export const DISCOURSE_TOOL_SHORTCUT_KEY = "discourse-tool-shortcut";
+export const DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY =
+  "discourse-context-overlay-in-canvas";