From 81ad95b34b971dc30b0bebd65e64780afa03abcb Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Sun, 7 Dec 2025 13:04:58 +0530
Subject: [PATCH 1/3] optimise discourse node page observer, run
 isDiscourseNode only once

---
 .../utils/initializeObserversAndListeners.ts  | 24 +++----
 .../utils/renderLinkedReferenceAdditions.ts   | 68 ++++++++-----------
 2 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts
index 8295b45be..11120a577 100644
--- a/apps/roam/src/utils/initializeObserversAndListeners.ts
+++ b/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,
@@ -91,6 +91,16 @@ export const initObservers = async ({
       const uid = getPageUidByPageTitle(title);
       if (isDiscourseNode(uid)) {
         renderPossibleDuplicates(h1, title);
+        const linkedReferencesDiv = document.querySelector(
+          ".rm-reference-main",
+        ) as HTMLDivElement;
+        if (linkedReferencesDiv) {
+          renderDiscourseContextAndCanvasReferences(
+            linkedReferencesDiv,
+            uid,
+            onloadArgs,
+          );
+        }
       }
 
       if (isNodeConfigPage(title)) renderNodeConfigPage(props);
@@ -100,17 +110,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 +398,6 @@ export const initObservers = async ({
       pageTitleObserver,
       queryBlockObserver,
       configPageObserver,
-      linkedReferencesObserver,
       graphOverviewExportObserver,
       nodeTagPopupButtonObserver,
       leftSidebarObserver,
diff --git a/apps/roam/src/utils/renderLinkedReferenceAdditions.ts b/apps/roam/src/utils/renderLinkedReferenceAdditions.ts
index d7caa1629..2cac6f08f 100644
--- a/apps/roam/src/utils/renderLinkedReferenceAdditions.ts
+++ b/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,
+  );
 };

From bcff59d193cdc70ed668656c507470e0028979e3 Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Thu, 18 Dec 2025 19:33:57 +0530
Subject: [PATCH 2/3] remove overlay from node dialog, remove usenoecontext,
 pass node from top of initialise discourse graph, create util

---
 apps/roam/src/components/CreateNodeDialog.tsx |  2 -
 .../src/components/VectorDuplicateMatches.tsx | 16 +++--
 .../roam/src/utils/extractContentFromTitle.ts | 28 ++++++++
 .../utils/initializeObserversAndListeners.ts  |  9 ++-
 apps/roam/src/utils/useNodeContext.ts         | 69 -------------------
 5 files changed, 45 insertions(+), 79 deletions(-)
 create mode 100644 apps/roam/src/utils/extractContentFromTitle.ts
 delete mode 100644 apps/roam/src/utils/useNodeContext.ts

diff --git a/apps/roam/src/components/CreateNodeDialog.tsx b/apps/roam/src/components/CreateNodeDialog.tsx
index d1666b259..4211f7c56 100644
--- a/apps/roam/src/components/CreateNodeDialog.tsx
+++ b/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>
diff --git a/apps/roam/src/components/VectorDuplicateMatches.tsx b/apps/roam/src/components/VectorDuplicateMatches.tsx
index 999d07735..cb27ce2be 100644
--- a/apps/roam/src/components/VectorDuplicateMatches.tsx
+++ b/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";
 
 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,6 +168,7 @@ export const VectorDuplicateMatches = ({
 export const renderPossibleDuplicates = (
   h1: HTMLHeadingElement,
   title: string,
+  node: DiscourseNode,
 ) => {
   const titleContainer = h1.parentElement;
   if (!titleContainer || !titleContainer.parentElement) {
@@ -195,7 +201,7 @@ export const renderPossibleDuplicates = (
 
   /*eslint-disable-next-line react/no-deprecated*/
   ReactDOM.render(
-    React.createElement(VectorDuplicateMatches, { pageTitle: title }),
+    React.createElement(VectorDuplicateMatches, { pageTitle: title, node }),
     vectorContainer,
   );
   /*eslint-disable-next-line react/no-deprecated*/
diff --git a/apps/roam/src/utils/extractContentFromTitle.ts b/apps/roam/src/utils/extractContentFromTitle.ts
new file mode 100644
index 000000000..d88002776
--- /dev/null
+++ b/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;
diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts
index 11120a577..5086f12ad 100644
--- a/apps/roam/src/utils/initializeObserversAndListeners.ts
+++ b/apps/roam/src/utils/initializeObserversAndListeners.ts
@@ -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;
@@ -89,8 +89,11 @@ export const initObservers = async ({
       const props = { title, h1, onloadArgs };
 
       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) {
+        renderPossibleDuplicates(h1, title, node);
         const linkedReferencesDiv = document.querySelector(
           ".rm-reference-main",
         ) as HTMLDivElement;
diff --git a/apps/roam/src/utils/useNodeContext.ts b/apps/roam/src/utils/useNodeContext.ts
deleted file mode 100644
index 98e8fe2e1..000000000
--- a/apps/roam/src/utils/useNodeContext.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useEffect, useState } from "react";
-import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes";
-import findDiscourseNode from "~/utils/findDiscourseNode";
-import matchDiscourseNode from "~/utils/matchDiscourseNode";
-import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpression";
-import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
-
-export type NodeContext = {
-  pageUid: string | null;
-  searchText: string;
-};
-
-const extractContentFromTitle = (
-  title: string,
-  node: DiscourseNode,
-): 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 const useNodeContext = (pageTitle: string): NodeContext | null => {
-  const [nodeContext, setNodeContext] = useState<NodeContext | null>(null);
-
-  useEffect(() => {
-    const discourseNodes = getDiscourseNodes();
-    const pageUid = getPageUidByPageTitle(pageTitle) || null;
-    let matchedNode: DiscourseNode | null = null;
-
-    if (pageUid) {
-      const found = findDiscourseNode(pageUid, discourseNodes);
-      if (found) {
-        matchedNode = found;
-      }
-    }
-
-    if (!matchedNode) {
-      matchedNode =
-        discourseNodes.find((node) =>
-          matchDiscourseNode({ ...node, title: pageTitle }),
-        ) || null;
-    }
-
-    if (matchedNode) {
-      const searchText = extractContentFromTitle(pageTitle, matchedNode);
-      setNodeContext({ searchText, pageUid });
-    } else {
-      setNodeContext(null);
-    }
-  }, [pageTitle]);
-
-  return nodeContext;
-};

From 612a9fac7f9833f72028afdd3fdc999d268a1df1 Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Thu, 18 Dec 2025 20:02:01 +0530
Subject: [PATCH 3/3] use handleTitleAddition .. only show when suggestive mode
 is enabled in a graph

---
 .../src/components/VectorDuplicateMatches.tsx | 39 ++-----------------
 .../utils/initializeObserversAndListeners.ts  | 11 +++++-
 2 files changed, 14 insertions(+), 36 deletions(-)

diff --git a/apps/roam/src/components/VectorDuplicateMatches.tsx b/apps/roam/src/components/VectorDuplicateMatches.tsx
index cb27ce2be..8cd398b37 100644
--- a/apps/roam/src/components/VectorDuplicateMatches.tsx
+++ b/apps/roam/src/components/VectorDuplicateMatches.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState, useMemo } from "react";
 import { Collapse, Spinner, Icon } from "@blueprintjs/core";
 import { findSimilarNodesVectorOnly, type VectorMatch } from "~/utils/hyde";
-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;
@@ -170,39 +170,8 @@ export const renderPossibleDuplicates = (
   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, node }),
-    vectorContainer,
+  handleTitleAdditions(
+    h1,
+    <VectorDuplicateMatches pageTitle={title} node={node} />,
   );
-  /*eslint-disable-next-line react/no-deprecated*/
 };
diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts
index 5086f12ad..4fc7fc9f1 100644
--- a/apps/roam/src/utils/initializeObserversAndListeners.ts
+++ b/apps/roam/src/utils/initializeObserversAndListeners.ts
@@ -88,12 +88,21 @@ 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);
       const nodes = getDiscourseNodes();
       const node = findDiscourseNode(uid, nodes);
       const isDiscourseNode = node && node.backedBy !== "default";
       if (isDiscourseNode) {
-        renderPossibleDuplicates(h1, title, node);
+        if (isSuggestiveModeEnabled) {
+          renderPossibleDuplicates(h1, title, node);
+        }
         const linkedReferencesDiv = document.querySelector(
           ".rm-reference-main",
         ) as HTMLDivElement;