optimise discourse node page observer, run isDiscourseNode only once

Author: sid597

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,
@@ -90,6 +90,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);
@@ -99,17 +109,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),
@@ -386,7 +385,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,
+  );
 };