ENG-1468: Port node and relations tree based consumers (#825)

* Rebase ENG-1468 onto eng-1472 (fresh redo)

* Remove unnecessary lazy initializer from complement useState

* Break circular dep: inline DISCOURSE_CONFIG_PAGE_TITLE

* Address review: case-insensitive attribute lookup, empty-string fallback, move DISCOURSE_CONFIG_PAGE_TITLE to data/constants

Author: sid597

apps/roam/src/components/DiscourseContextOverlay.tsx

@@ -12,8 +12,7 @@ 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 { getDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 import nanoid from "nanoid";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import getDiscourseContextResults from "~/utils/getDiscourseContextResults";
@@ -180,11 +179,10 @@ const useDiscourseContext = (uid: string, tag: string) => {
         .then(({ refs, results }) => {
           const discourseNode = findDiscourseNode({ uid: uid });
           if (discourseNode) {
-            const attribute = getSettingValueFromTree({
-              tree: getBasicTreeByParentUid(discourseNode.type),
-              key: "Overlay",
-              defaultValue: "Overlay",
-            });
+            const attribute =
+              getDiscourseNodeSetting<string>(discourseNode.type, [
+                "overlay",
+              ]) || "Overlay";
             return deriveDiscourseNodeAttribute({
               uid: uid,
               attribute,

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

@@ -7,15 +7,16 @@ import {
   Icon,
   ControlGroup,
 } from "@blueprintjs/core";
-import React, { useState, useMemo } from "react";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
-import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
+import React, { useState } from "react";
 import setInputSetting from "roamjs-components/util/setInputSetting";
 import {
   DiscourseNodeFlagPanel,
   DiscourseNodeTextPanel,
 } from "./components/BlockPropSettingPanels";
-import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
+import {
+  getDiscourseNodeSetting,
+  setDiscourseNodeSetting,
+} from "~/components/settings/utils/accessors";
 
 export const formatHexColor = (color: string) => {
   if (!color) return "";
@@ -36,20 +37,35 @@ const DiscourseNodeCanvasSettings = ({
   nodeType: string;
   uid: string;
 }) => {
-  const tree = useMemo(() => getBasicTreeByParentUid(uid), [uid]);
   const [color, setColor] = useState<string>(() => {
-    const color = getSettingValueFromTree({ tree, key: "color" });
+    const color =
+      getDiscourseNodeSetting<string>(nodeType, ["canvasSettings", "color"]) ??
+      "";
     return formatHexColor(color);
   });
-  const alias = getSettingValueFromTree({ tree, key: "alias" });
-  const [queryBuilderAlias, setQueryBuilderAlias] = useState<string>(() =>
-    getSettingValueFromTree({ tree, key: "query-builder-alias" }),
+  const alias =
+    getDiscourseNodeSetting<string>(nodeType, ["canvasSettings", "alias"]) ??
+    "";
+  const [queryBuilderAlias, setQueryBuilderAlias] = useState<string>(
+    () =>
+      getDiscourseNodeSetting<string>(nodeType, [
+        "canvasSettings",
+        "query-builder-alias",
+      ]) ?? "",
   );
   const [isKeyImage, setIsKeyImage] = useState(
-    () => getSettingValueFromTree({ tree, key: "key-image" }) === "true",
+    () =>
+      getDiscourseNodeSetting<boolean>(nodeType, [
+        "canvasSettings",
+        "key-image",
+      ]) ?? false,
   );
-  const [keyImageOption, setKeyImageOption] = useState(() =>
-    getSettingValueFromTree({ tree, key: "key-image-option" }),
+  const [keyImageOption, setKeyImageOption] = useState(
+    () =>
+      getDiscourseNodeSetting<string>(nodeType, [
+        "canvasSettings",
+        "key-image-option",
+      ]) ?? "",
   );
 
   return (

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

@@ -8,7 +8,10 @@ import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpression";
 import QueryEditor from "~/components/QueryEditor";
 import internalError from "~/utils/internalError";
-import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
+import {
+  getDiscourseNodeSetting,
+  setDiscourseNodeSetting,
+} from "~/components/settings/utils/accessors";
 import { DiscourseNodeFlagPanel } from "~/components/settings/components/BlockPropSettingPanels";
 
 const NodeSpecification = ({
@@ -27,7 +30,13 @@ const NodeSpecification = ({
         ?.uid,
     [parentUid],
   );
-  const [enabled, setEnabled] = React.useState(!!enabledBlockUid);
+  const [enabled, setEnabled] = React.useState(
+    () =>
+      getDiscourseNodeSetting<boolean>(node.type, [
+        "specification",
+        "enabled",
+      ]) ?? false,
+  );
 
   React.useEffect(() => {
     if (enabled) {

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

@@ -32,7 +32,6 @@ import type {
   RoamBasicNode,
   TreeNode,
 } from "roamjs-components/types";
-import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
 import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
 import setInputSetting from "roamjs-components/util/setInputSetting";
 import toFlexRegex from "roamjs-components/util/toFlexRegex";
@@ -52,6 +51,7 @@ import posthog from "posthog-js";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
 import {
   getFeatureFlag,
+  getGlobalSetting,
   setGlobalSetting,
   getGlobalSettings,
 } from "~/components/settings/utils/accessors";
@@ -139,10 +139,11 @@ export const RelationEditPanel = ({
   const [tab, setTab] = useState(0);
   const initialSourceUid = useMemo(
     () =>
-      getSettingValueFromTree({
-        tree: editingRelationInfo.children,
-        key: "source",
-      }),
+      getGlobalSetting<string>([
+        "Relations",
+        editingRelationInfo.uid,
+        "source",
+      ]) ?? "",
     [],
   );
   const initialSource = useMemo(
@@ -152,10 +153,11 @@ export const RelationEditPanel = ({
   const [source, setSource] = useState(initialSourceUid);
   const initialDestinationUid = useMemo(
     () =>
-      getSettingValueFromTree({
-        tree: editingRelationInfo.children,
-        key: "destination",
-      }),
+      getGlobalSetting<string>([
+        "Relations",
+        editingRelationInfo.uid,
+        "destination",
+      ]) ?? "",
     [],
   );
   const initialDestination = useMemo(
@@ -165,10 +167,11 @@ export const RelationEditPanel = ({
   const [destination, setDestination] = useState(initialDestinationUid);
   const [label, setLabel] = useState(editingRelationInfo.text);
   const [complement, setComplement] = useState(
-    getSettingValueFromTree({
-      tree: editingRelationInfo.children,
-      key: "complement",
-    }),
+    getGlobalSetting<string>([
+      "Relations",
+      editingRelationInfo.uid,
+      "complement",
+    ]) ?? "",
   );
 
   const edgeCallback = useCallback(

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

@@ -9,7 +9,7 @@ import DiscourseNodeAttributes from "./DiscourseNodeAttributes";
 import DiscourseNodeCanvasSettings from "./DiscourseNodeCanvasSettings";
 import DiscourseNodeIndex from "./DiscourseNodeIndex";
 import { OnloadArgs } from "roamjs-components/types";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
+import { getDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
 import { getFeatureFlag } from "~/components/settings/utils/accessors";
 import {
@@ -82,10 +82,11 @@ const NodeConfig = ({
       isSpecificationEnabled?: boolean;
     }) => {
       if (isSpecificationEnabled === undefined)
-        isSpecificationEnabled = !!getSubTree({
-          tree: getBasicTreeByParentUid(specificationUid),
-          key: "enabled",
-        })?.uid?.length;
+        isSpecificationEnabled =
+          getDiscourseNodeSetting<boolean>(node.type, [
+            "specification",
+            "enabled",
+          ]) ?? false;
       if (format.trim().length === 0 && !isSpecificationEnabled) {
         setTagError("");
         setFormatError("Error: you must set either a format or specification");
@@ -123,7 +124,7 @@ const NodeConfig = ({
         setFormatError("");
       }
     },
-    [specificationUid],
+    [node.type],
   );
 
   useEffect(() => {
@@ -261,7 +262,9 @@ const NodeConfig = ({
                 description="Select which attribute is used for the discourse overlay"
                 settingKeys={["overlay"]}
                 options={attributeNode.children.map((c) => c.text)}
-                initialValue={getBasicTreeByParentUid(overlayUid)[0]?.text}
+                initialValue={
+                  getDiscourseNodeSetting<string>(node.type, ["overlay"]) ?? ""
+                }
                 order={0}
                 parentUid={node.type}
                 uid={overlayUid}

apps/roam/src/data/constants.ts

@@ -0,0 +1 @@
+export const DISCOURSE_CONFIG_PAGE_TITLE = "roam/js/discourse-graph";

apps/roam/src/utils/deriveDiscourseNodeAttribute.ts

@@ -1,7 +1,5 @@
-import getSubTree from "roamjs-components/util/getSubTree";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
-import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
 import getAttributeValueByBlockAndName from "roamjs-components/queries/getAttributeValueByBlockAndName";
+import { getDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 import getDiscourseContextResults from "./getDiscourseContextResults";
 import findDiscourseNode from "./findDiscourseNode";
 import getDiscourseNodes from "./getDiscourseNodes";
@@ -52,15 +50,16 @@ const deriveNodeAttribute = async ({
   const discourseNode = findDiscourseNode({ uid, nodes });
   if (!discourseNode) return 0;
   const nodeType = discourseNode.type;
-  const attributeNode = getSubTree({
-    tree: getBasicTreeByParentUid(nodeType || ""),
-    key: "Attributes",
-  });
-  const scoreFormula = getSettingValueFromTree({
-    tree: attributeNode.children,
-    key: attribute,
-    defaultValue: "{count:Has Any Relation To:any}",
-  });
+  const attributes =
+    getDiscourseNodeSetting<Record<string, string>>(nodeType || "", [
+      "attributes",
+    ]) ?? {};
+  const match = Object.keys(attributes).find(
+    (k) => k.toLowerCase() === attribute.toLowerCase(),
+  );
+  const scoreFormula =
+    (match ? attributes[match] : undefined) ||
+    "{count:Has Any Relation To:any}";
   let postProcess = scoreFormula;
   let totalOffset = 0;
   const matches = scoreFormula.matchAll(/{([^}]+)}/g);

apps/roam/src/utils/discourseConfigRef.ts

@@ -7,7 +7,7 @@ import {
   getUidAndBooleanSetting,
   BooleanSetting,
 } from "./getExportSettings";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import {
   getSuggestiveModeConfigAndUids,

apps/roam/src/utils/getExportSettings.ts

@@ -2,7 +2,7 @@ import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByPar
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import { RoamBasicNode } from "roamjs-components/types";
 import { getSubTree } from "roamjs-components/util";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
+import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 
 type UidPair<T> = {
   uid?: string;