ENG-1468: Port node and relations tree based consumers

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,11 +7,20 @@
   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";
+<<<<<<< HEAD
 import { DiscourseNodeFlagPanel } from "./components/BlockPropSettingPanels";
+=======
+import {
+  DiscourseNodeFlagPanel,
+  DiscourseNodeTextPanel,
+} from "./components/BlockPropSettingPanels";
+import {
+  getDiscourseNodeSetting,
+  setDiscourseNodeSetting,
+} from "~/components/settings/utils/accessors";
+>>>>>>> 8e64845c (ENG-1468: Port node and relations tree based consumers)
 
 export const formatHexColor = (color: string) => {
   if (!color) return "";
@@ -32,22 +41,43 @@
   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);
   });
+<<<<<<< HEAD
   const [alias, setAlias] = useState<string>(() =>
     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",
+      ]) ?? "",
+>>>>>>> 8e64845c (ENG-1468: Port node and relations tree based consumers)
   );
   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

@@ -9,6 +9,9 @@ import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpression";
 import QueryEditor from "~/components/QueryEditor";
 import internalError from "~/utils/internalError";
+import {
+  getDiscourseNodeSetting,
+} from "~/components/settings/utils/accessors";
 
 const NodeSpecification = ({
   parentUid,
@@ -20,11 +23,15 @@ const NodeSpecification = ({
   parentSetEnabled?: (enabled: boolean) => void;
 }) => {
   const [migrated, setMigrated] = React.useState(false);
-  const [enabled, setEnabled] = React.useState<string>(
+
+  const [enabled, setEnabled] = React.useState(
     () =>
-      getSubTree({ tree: getBasicTreeByParentUid(parentUid), key: "enabled" })
-        ?.uid,
+      getDiscourseNodeSetting<boolean>(node.type, [
+        "specification",
+        "enabled",
+      ]) ?? false,
   );
+
   React.useEffect(() => {
     if (enabled) {
       const scratchNode = getSubTree({ parentUid, key: "scratch" });

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";
@@ -51,6 +50,9 @@ import { formatHexColor } from "./DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
 import { getFeatureFlag } from "~/components/settings/utils/accessors";
+import {
+  getGlobalSetting
+} from "~/components/settings/utils/accessors";
 
 const DEFAULT_SELECTED_RELATION = {
   display: "none",
@@ -135,10 +137,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(
@@ -148,10 +151,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(
@@ -161,10 +165,12 @@ 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

@@ -14,7 +14,10 @@ import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByPar
 import createBlock from "roamjs-components/writes/createBlock";
 import updateBlock from "roamjs-components/writes/updateBlock";
 import DiscourseNodeSuggestiveRules from "./DiscourseNodeSuggestiveRules";
-import { getFeatureFlag } from "~/components/settings/utils/accessors";
+import {
+  getDiscourseNodeSetting,
+  getFeatureFlag,
+} from "~/components/settings/utils/accessors";
 import {
   DiscourseNodeTextPanel,
   DiscourseNodeFlagPanel,
@@ -178,10 +181,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");
@@ -219,7 +223,7 @@ const NodeConfig = ({
         setFormatError("");
       }
     },
-    [specificationUid],
+    [node.type],
   );
 
   useEffect(() => {
@@ -352,6 +356,10 @@ const NodeConfig = ({
               <SelectPanel
                 title="Overlay"
                 description="Select which attribute is used for the discourse overlay"
+                settingKeys={["overlay"]}
+                initialValue={
+                  getDiscourseNodeSetting<string>(node.type, ["overlay"]) ?? ""
+                }
                 order={0}
                 parentUid={node.type}
                 uid={overlayUid}

apps/roam/src/index.ts

@@ -31,14 +31,13 @@ import {
   setSyncActivity,
 } from "./utils/syncDgNodesToSupabase";
 import { initPluginTimer } from "./utils/pluginTimer";
-import { getUidAndBooleanSetting } from "./utils/getExportSettings";
-import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
-import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
-import { DISCOURSE_CONFIG_PAGE_TITLE } from "./utils/renderNodeConfigPage";
 import { initPostHog } from "./utils/posthog";
 import { initSchema } from "./components/settings/utils/init";
 import { setupPullWatchOnSettingsPage } from "./components/settings/utils/pullWatchers";
-import { getPersonalSetting } from "./components/settings/utils/accessors";
+import {
+  getFeatureFlag,
+  getPersonalSetting,
+} from "./components/settings/utils/accessors";
 
 export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*";
 
@@ -113,12 +112,7 @@ export default runExtension(async (onloadArgs) => {
   document.addEventListener("input", discourseNodeSearchTriggerListener);
   document.addEventListener("selectionchange", nodeCreationPopoverListener);
 
-  const isSuggestiveModeEnabled = getUidAndBooleanSetting({
-    tree: getBasicTreeByParentUid(
-      getPageUidByPageTitle(DISCOURSE_CONFIG_PAGE_TITLE),
-    ),
-    text: "(BETA) Suggestive Mode Enabled",
-  }).value;
+  const isSuggestiveModeEnabled = getFeatureFlag("Suggestive mode enabled");
 
   if (isSuggestiveModeEnabled) {
     initializeSupabaseSync();

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,12 @@ 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 scoreFormula =
+    attributes[attribute] ?? "{count:Has Any Relation To:any}";
   let postProcess = scoreFormula;
   let totalOffset = 0;
   const matches = scoreFormula.matchAll(/{([^}]+)}/g);