ENG-1095 Optimize Discourse Node page observer check

apps/roam/src/components/CreateNodeDialog.tsx

@@ -12,7 +12,6 @@ import getDiscourseNodes, {
 import { getNewDiscourseNodeText } from "~/utils/formatUtils";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import createBlock from "roamjs-components/writes/createBlock";
-import { VectorDuplicateMatches } from "./VectorDuplicateMatches";
 
 export type CreateNodeDialogProps = {
   onClose: () => void;
@@ -137,7 +136,6 @@ const CreateNodeDialog = ({
               onChange={(e) => setTitle(e.currentTarget.value)}
               inputRef={inputRef}
             />
-            <VectorDuplicateMatches text={title} limit={5} />
           </div>
 
           <Label>

apps/roam/src/components/VectorDuplicateMatches.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { Collapse, Spinner, Icon } from "@blueprintjs/core";
 import { findSimilarNodesVectorOnly, type VectorMatch } from "~/utils/hyde";
-import { useNodeContext, type NodeContext } from "~/utils/useNodeContext";
-import ReactDOM from "react-dom";
+import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+import { DiscourseNode } from "~/utils/getDiscourseNodes";
+import extractContentFromTitle from "~/utils/extractContentFromTitle";
+import { handleTitleAdditions } from "~/utils/handleTitleAdditions";
 
 type VectorSearchParams = {
   text: string;
@@ -17,10 +19,12 @@ export const VectorDuplicateMatches = ({
   pageTitle,
   text,
   limit = 15,
+  node,
 }: {
   pageTitle?: string;
   text?: string;
   limit?: number;
+  node: DiscourseNode;
 }) => {
   const [debouncedText, setDebouncedText] = useState(text);
   useEffect(() => {
@@ -37,13 +41,14 @@ export const VectorDuplicateMatches = ({
   const [hasSearched, setHasSearched] = useState(false);
   const [suggestions, setSuggestions] = useState<VectorMatch[]>([]);
 
-  const nodeContext: NodeContext | null = useNodeContext(pageTitle || "");
+  const searchText = extractContentFromTitle(pageTitle || "", node);
+  const pageUid = getPageUidByPageTitle(searchText);
   const activeContext = useMemo(
     () =>
       text !== undefined
         ? { searchText: debouncedText || "", pageUid: null }
-        : nodeContext,
-    [text, debouncedText, nodeContext],
+        : { searchText, pageUid },
+    [text, debouncedText, searchText, pageUid],
   );
 
   useEffect(() => {
@@ -163,40 +168,10 @@ export const VectorDuplicateMatches = ({
 export const renderPossibleDuplicates = (
   h1: HTMLHeadingElement,
   title: string,
+  node: DiscourseNode,
 ) => {
-  const titleContainer = h1.parentElement;
-  if (!titleContainer || !titleContainer.parentElement) {
-    return;
-  }
-  const headerContainer = titleContainer.parentElement;
-  const VECTOR_CONTAINER_CLASS = "discourse-graph-duplicates-vector";
-
-  let vectorContainer = headerContainer.querySelector<HTMLElement>(
-    `.${VECTOR_CONTAINER_CLASS}`,
-  );
-  if (vectorContainer && vectorContainer.dataset.pageTitle !== title) {
-    /*eslint-disable-next-line react/no-deprecated*/
-    ReactDOM.unmountComponentAtNode(vectorContainer);
-    vectorContainer.remove();
-    vectorContainer = null;
-  }
-  if (!vectorContainer) {
-    vectorContainer = document.createElement("div");
-    vectorContainer.className = `${VECTOR_CONTAINER_CLASS} w-full mt-2`;
-    vectorContainer.dataset.pageTitle = title;
-
-    headerContainer.insertBefore(vectorContainer, titleContainer.nextSibling);
-  } else if (
-    vectorContainer.parentElement !== headerContainer ||
-    vectorContainer.previousElementSibling !== titleContainer
-  ) {
-    headerContainer.insertBefore(vectorContainer, titleContainer.nextSibling);
-  }
-
-  /*eslint-disable-next-line react/no-deprecated*/
-  ReactDOM.render(
-    React.createElement(VectorDuplicateMatches, { pageTitle: title }),
-    vectorContainer,
+  handleTitleAdditions(
+    h1,
+    <VectorDuplicateMatches pageTitle={title} node={node} />,
   );
-  /*eslint-disable-next-line react/no-deprecated*/
 };

apps/roam/src/utils/extractContentFromTitle.ts

@@ -0,0 +1,28 @@
+import getDiscourseNodeFormatExpression from "./getDiscourseNodeFormatExpression";
+
+const extractContentFromTitle = (
+  title: string,
+  node: { format: string },
+): string => {
+  if (!node.format) return title;
+  const placeholderRegex = /{([\w\d-]+)}/g;
+  const placeholders: string[] = [];
+  let placeholderMatch: RegExpExecArray | null = null;
+  while ((placeholderMatch = placeholderRegex.exec(node.format))) {
+    placeholders.push(placeholderMatch[1]);
+  }
+  const expression = getDiscourseNodeFormatExpression(node.format);
+  const expressionMatch = expression.exec(title);
+  if (!expressionMatch || expressionMatch.length <= 1) {
+    return title;
+  }
+  const contentIndex = placeholders.findIndex(
+    (name) => name.toLowerCase() === "content",
+  );
+  if (contentIndex >= 0) {
+    return expressionMatch[contentIndex + 1]?.trim() || title;
+  }
+  return expressionMatch[1]?.trim() || title;
+};
+
+export default extractContentFromTitle;

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -4,7 +4,7 @@ import {
   getPageTitleValueByHtmlElement,
 } from "roamjs-components/dom";
 import { createBlock } from "roamjs-components/writes";
-import { renderLinkedReferenceAdditions } from "~/utils/renderLinkedReferenceAdditions";
+import { renderDiscourseContextAndCanvasReferences } from "~/utils/renderLinkedReferenceAdditions";
 import { createConfigObserver } from "roamjs-components/components/ConfigPage";
 import {
   renderTldrawCanvas,
@@ -56,7 +56,7 @@ import getPleasingColors from "@repo/utils/getPleasingColors";
 import { colord } from "colord";
 import { renderPossibleDuplicates } from "~/components/VectorDuplicateMatches";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
-import isDiscourseNode from "./isDiscourseNode";
+import findDiscourseNode from "./findDiscourseNode";
 
 const debounce = (fn: () => void, delay = 250) => {
   let timeout: number;
@@ -88,9 +88,31 @@ export const initObservers = async ({
       const title = getPageTitleValueByHtmlElement(h1);
       const props = { title, h1, onloadArgs };
 
+      const isSuggestiveModeEnabled = getUidAndBooleanSetting({
+        tree: getBasicTreeByParentUid(
+          getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE),
+        ),
+        text: "(BETA) Suggestive Mode Enabled",
+      }).value;
+
       const uid = getPageUidByPageTitle(title);
-      if (isDiscourseNode(uid)) {
-        renderPossibleDuplicates(h1, title);
+      const nodes = getDiscourseNodes();
+      const node = findDiscourseNode(uid, nodes);
+      const isDiscourseNode = node && node.backedBy !== "default";
+      if (isDiscourseNode) {
+        if (isSuggestiveModeEnabled) {
+          renderPossibleDuplicates(h1, title, node);
+        }
+        const linkedReferencesDiv = document.querySelector(
+          ".rm-reference-main",
+        ) as HTMLDivElement;
+        if (linkedReferencesDiv) {
+          renderDiscourseContextAndCanvasReferences(
+            linkedReferencesDiv,
+            uid,
+            onloadArgs,
+          );
+        }
       }
 
       if (isNodeConfigPage(title)) renderNodeConfigPage(props);
@@ -100,17 +122,6 @@ export const initObservers = async ({
     },
   });
 
-  // TODO: contains roam query: https://github.com/DiscourseGraphs/discourse-graph/issues/39
-  const linkedReferencesObserver = createHTMLObserver({
-    tag: "DIV",
-    useBody: true,
-    className: "rm-reference-main",
-    callback: async (el) => {
-      const div = el as HTMLDivElement;
-      await renderLinkedReferenceAdditions(div, onloadArgs);
-    },
-  });
-
   const queryBlockObserver = createButtonObserver({
     attribute: "query-block",
     render: (b) => renderQueryBlock(b, onloadArgs),
@@ -399,7 +410,6 @@ export const initObservers = async ({
       pageTitleObserver,
       queryBlockObserver,
       configPageObserver,
-      linkedReferencesObserver,
       graphOverviewExportObserver,
       nodeTagPopupButtonObserver,
       leftSidebarObserver,

apps/roam/src/utils/renderLinkedReferenceAdditions.ts

@@ -1,50 +1,40 @@
 import { createElement } from "react";
-import { getPageTitleValueByHtmlElement } from "roamjs-components/dom";
-import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import renderWithUnmount from "roamjs-components/util/renderWithUnmount";
 import { DiscourseContext } from "~/components";
 import CanvasReferences from "~/components/canvas/CanvasReferences";
-import isDiscourseNode from "./isDiscourseNode";
 import { OnloadArgs } from "roamjs-components/types";
 
-export const renderLinkedReferenceAdditions = async (
+export const renderDiscourseContextAndCanvasReferences = (
   div: HTMLDivElement,
+  uid: string,
   onloadArgs: OnloadArgs,
-) => {
-  const isMainWindow = !!div.closest(".roam-article");
-  const uid = isMainWindow
-    ? await window.roamAlphaAPI.ui.mainWindow.getOpenPageOrBlockUid()
-    : getPageUidByPageTitle(getPageTitleValueByHtmlElement(div));
-  if (
-    uid &&
-    isDiscourseNode(uid) &&
-    !div.getAttribute("data-roamjs-discourse-context")
-  ) {
-    div.setAttribute("data-roamjs-discourse-context", "true");
-    const parent = div.firstElementChild;
-    if (parent) {
-      const insertBefore = parent.firstElementChild;
+): void => {
+  if (div.getAttribute("data-roamjs-discourse-context")) return;
 
-      const p = document.createElement("div");
-      parent.insertBefore(p, insertBefore);
-      renderWithUnmount(
-        createElement(DiscourseContext, {
-          uid,
-          results: [],
-        }),
-        p,
-        onloadArgs,
-      );
+  div.setAttribute("data-roamjs-discourse-context", "true");
+  const parent = div.firstElementChild;
+  if (!parent) return;
 
-      const canvasP = document.createElement("div");
-      parent.insertBefore(canvasP, insertBefore);
-      renderWithUnmount(
-        createElement(CanvasReferences, {
-          uid,
-        }),
-        canvasP,
-        onloadArgs,
-      );
-    }
-  }
+  const insertBefore = parent.firstElementChild;
+
+  const p = document.createElement("div");
+  parent.insertBefore(p, insertBefore);
+  renderWithUnmount(
+    createElement(DiscourseContext, {
+      uid,
+      results: [],
+    }),
+    p,
+    onloadArgs,
+  );
+
+  const canvasP = document.createElement("div");
+  parent.insertBefore(canvasP, insertBefore);
+  renderWithUnmount(
+    createElement(CanvasReferences, {
+      uid,
+    }),
+    canvasP,
+    onloadArgs,
+  );
 };