Merge pull request #861 from DiscourseGraphs/eng-1484-reactive-settings-some-settings-require-reloading-the-graph

ENG-1484: reactive settings for triggers and suggestive mode overlay

Author: sid597

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

@@ -19,6 +19,10 @@ import {
   getFeatureFlag,
   setFeatureFlag,
 } from "~/components/settings/utils/accessors";
+import {
+  onSettingChange,
+  settingKeys,
+} from "~/components/settings/utils/settingsEmitter";
 import {
   getSupabaseContext,
   getLoggedInClient,
@@ -433,26 +437,18 @@ const FeatureFlagsTab = (): React.ReactElement => {
         <p>Are you sure you want to proceed?</p>
       </Alert>
 
-      {/* TODO(ENG-1484): Add pull watcher reactivity so toggling suggestive mode
-          starts/stops sync and shows the tab without requiring a reload. */}
       <Alert
         isOpen={isInstructionOpen}
-        onConfirm={() => window.location.reload()}
-        onCancel={() => setIsInstructionOpen(false)}
-        confirmButtonText="Reload Graph"
-        cancelButtonText="Later"
+        onConfirm={() => setIsInstructionOpen(false)}
+        confirmButtonText="OK"
         intent={Intent.PRIMARY}
       >
         <p>
           If this is the first time enabling it, you will need to generate and
           upload all node embeddings to supabase.
         </p>
         <p>
-          Please reload the graph to see the new &apos;Suggestive Mode&apos;
-          tab.
-        </p>
-        <p>
-          Then go to Suggestive Mode{" "}
+          Go to Suggestive Mode{" "}
           {"-> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"}
         </p>
       </Alert>
@@ -509,6 +505,15 @@ const FeatureFlagsTab = (): React.ReactElement => {
 
 const AdminPanel = (): React.ReactElement => {
   const [selectedTabId, setSelectedTabId] = useState<TabId>("admin");
+  const [showSuggestiveTab, setShowSuggestiveTab] = useState(
+    getFeatureFlag("Suggestive mode enabled"),
+  );
+
+  useEffect(() => {
+    return onSettingChange(settingKeys.suggestiveModeEnabled, (newValue) => {
+      setShowSuggestiveTab(Boolean(newValue));
+    });
+  }, []);
 
   return (
     <Tabs
@@ -543,7 +548,7 @@ const AdminPanel = (): React.ReactElement => {
           </div>
         }
       />
-      {getFeatureFlag("Suggestive mode enabled") && (
+      {showSuggestiveTab && (
         <Tab
           id="suggestive-mode-settings"
           title="Suggestive mode"

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

@@ -39,20 +39,12 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
     <div className="flex flex-col gap-4 p-1">
       <Label>
         Personal node menu trigger
-        <Description
-          description={
-            "Override the global trigger for the discourse node menu. Must refresh after editing."
-          }
-        />
+        <Description description="Override the global trigger for the discourse node menu." />
         <NodeMenuTriggerComponent extensionAPI={extensionAPI} />
       </Label>
       <Label>
         Node search menu trigger
-        <Description
-          description={
-            "Set the trigger character for the node search menu. Must refresh after editing."
-          }
-        />
+        <Description description="Set the trigger character for the node search menu." />
         <NodeSearchMenuTriggerSetting onloadArgs={onloadArgs} />
       </Label>
       <KeyboardShortcutInput

apps/roam/src/components/settings/utils/pullWatchers.ts

@@ -95,6 +95,9 @@ export const featureFlagHandlers: Partial<
   "Enable left sidebar": (newValue, oldValue) => {
     emitSettingChange(settingKeys.leftSidebarFlag, newValue, oldValue);
   },
+  "Suggestive mode enabled": (newValue, oldValue) => {
+    emitSettingChange(settingKeys.suggestiveModeEnabled, newValue, oldValue);
+  },
   /* eslint-enable @typescript-eslint/naming-convention */
 };
 
@@ -111,6 +114,9 @@ export const globalSettingsHandlers: GlobalSettingsHandlers = {
   "Left sidebar": (newValue, oldValue) => {
     emitSettingChange(settingKeys.globalLeftSidebar, newValue, oldValue);
   },
+  Trigger: (newValue, oldValue) => {
+    emitSettingChange(settingKeys.globalTrigger, newValue, oldValue);
+  },
   /* eslint-enable @typescript-eslint/naming-convention */
 };
 
@@ -127,6 +133,19 @@ export const personalSettingsHandlers: PersonalSettingsHandlers = {
   "Left sidebar": (newValue, oldValue) => {
     emitSettingChange(settingKeys.personalLeftSidebar, newValue, oldValue);
   },
+  "Personal node menu trigger": (newValue, oldValue) => {
+    emitSettingChange(settingKeys.personalNodeMenuTrigger, newValue, oldValue);
+  },
+  "Node search menu trigger": (newValue, oldValue) => {
+    emitSettingChange(settingKeys.nodeSearchMenuTrigger, newValue, oldValue);
+  },
+  "Suggestive mode overlay": (newValue, oldValue) => {
+    emitSettingChange(
+      settingKeys.personalSuggestiveModeOverlay,
+      newValue,
+      oldValue,
+    );
+  },
   /* eslint-enable @typescript-eslint/naming-convention */
 };
 

apps/roam/src/components/settings/utils/settingsEmitter.ts

@@ -4,6 +4,11 @@ export const settingKeys = {
   leftSidebarFlag: "Enable left sidebar",
   globalLeftSidebar: "global:Left sidebar",
   personalLeftSidebar: "personal:Left sidebar",
+  globalTrigger: "global:Trigger",
+  personalNodeMenuTrigger: "personal:Personal node menu trigger",
+  nodeSearchMenuTrigger: "personal:Node search menu trigger",
+  personalSuggestiveModeOverlay: "personal:Suggestive mode overlay",
+  suggestiveModeEnabled: "flag:Suggestive mode enabled",
 } as const;
 
 const listeners = new Map<string, Set<SettingChangeCallback>>();

apps/roam/src/index.ts

@@ -105,7 +105,7 @@ export default runExtension(async (onloadArgs) => {
     streamlineStyleElement.id = "streamline-styling";
   }
 
-  const { observers, listeners } = initObservers({ onloadArgs });
+  const { observers, listeners, cleanups } = initObservers({ onloadArgs });
   const {
     pageActionListener,
     hashChangeListener,
@@ -119,12 +119,21 @@ export default runExtension(async (onloadArgs) => {
   document.addEventListener("input", discourseNodeSearchTriggerListener);
   document.addEventListener("selectionchange", nodeCreationPopoverListener);
 
-  const isSuggestiveModeEnabled = getFeatureFlag("Suggestive mode enabled");
-
-  if (isSuggestiveModeEnabled) {
+  if (getFeatureFlag("Suggestive mode enabled")) {
     initializeSupabaseSync();
   }
 
+  const unsubSuggestiveMode = onSettingChange(
+    settingKeys.suggestiveModeEnabled,
+    (newValue) => {
+      if (newValue) {
+        initializeSupabaseSync();
+      } else {
+        setSyncActivity(false);
+      }
+    },
+  );
+
   const { extensionAPI } = onloadArgs;
   window.roamjs.extension.queryBuilder = {
     runQuery: (parentUid: string) =>
@@ -194,7 +203,9 @@ export default runExtension(async (onloadArgs) => {
     observers: observers,
     unload: () => {
       unsubLeftSidebarFlag();
+      unsubSuggestiveMode();
       cleanupPullWatchers();
+      cleanups.forEach((fn) => fn());
       setSyncActivity(false);
       window.roamjs.extension?.smartblocks?.unregisterCommand("QUERYBUILDER");
       // @ts-expect-error - tldraw throws a warning on multiple loads

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -56,6 +56,10 @@ import {
   getFeatureFlag,
   getGlobalSetting,
 } from "~/components/settings/utils/accessors";
+import {
+  onSettingChange,
+  settingKeys,
+} from "~/components/settings/utils/settingsEmitter";
 import {
   PERSONAL_KEYS,
   GLOBAL_KEYS,
@@ -95,6 +99,7 @@ export const initObservers = ({
     discourseNodeSearchTriggerListener: EventListener;
     nodeCreationPopoverListener: EventListener;
   };
+  cleanups: Array<() => void>;
 } => {
   const pageTitleObserver = createHTMLObserver({
     tag: "H1",
@@ -196,10 +201,19 @@ export const initObservers = ({
       });
   }) as EventListener;
 
+  const suggestiveHandler = getSuggestiveOverlayHandler(onloadArgs);
+  const toggleSuggestiveOverlay = onPageRefObserverChange(suggestiveHandler);
   if (getPersonalSetting<boolean>([PERSONAL_KEYS.suggestiveModeOverlay])) {
-    addPageRefObserver(getSuggestiveOverlayHandler(onloadArgs));
+    addPageRefObserver(suggestiveHandler);
   }
 
+  const unsubSuggestiveOverlay = onSettingChange(
+    settingKeys.personalSuggestiveModeOverlay,
+    (newValue) => {
+      toggleSuggestiveOverlay(Boolean(newValue));
+    },
+  );
+
   const graphOverviewExportObserver = createHTMLObserver({
     tag: "DIV",
     className: "rm-graph-view-control-panel__main-options",
@@ -241,17 +255,36 @@ export const initObservers = ({
     }
   };
 
-  const globalTrigger = (
+  let globalTrigger = (
     getGlobalSetting<string>([GLOBAL_KEYS.trigger]) ?? "\\"
   ).trim();
   const personalTriggerCombo = getPersonalSetting<IKeyCombo>([
     PERSONAL_KEYS.personalNodeMenuTrigger,
   ]);
-  const personalTrigger = personalTriggerCombo?.key;
-  const personalModifiers = personalTriggerCombo
+  let personalTrigger = personalTriggerCombo?.key;
+  let personalModifiers = personalTriggerCombo
     ? getModifiersFromCombo(personalTriggerCombo)
     : [];
 
+  const unsubGlobalTrigger = onSettingChange(
+    settingKeys.globalTrigger,
+    (newValue) => {
+      globalTrigger = (newValue as string).trim();
+    },
+  );
+
+  const unsubPersonalTrigger = onSettingChange(
+    settingKeys.personalNodeMenuTrigger,
+    (newValue) => {
+      const combo =
+        newValue && typeof newValue === "object"
+          ? (newValue as IKeyCombo)
+          : undefined;
+      personalTrigger = combo?.key;
+      personalModifiers = combo ? getModifiersFromCombo(combo) : [];
+    },
+  );
+
   const leftSidebarObserver = createHTMLObserver({
     tag: "DIV",
     useBody: true,
@@ -309,9 +342,16 @@ export const initObservers = ({
     }
   };
 
-  const customTrigger =
+  let customTrigger =
     getPersonalSetting<string>([PERSONAL_KEYS.nodeSearchMenuTrigger]) ?? "@";
 
+  const unsubSearchTrigger = onSettingChange(
+    settingKeys.nodeSearchMenuTrigger,
+    (newValue) => {
+      customTrigger = newValue as string;
+    },
+  );
+
   const discourseNodeSearchTriggerListener = (e: Event) => {
     const evt = e as KeyboardEvent;
     const target = evt.target as HTMLElement;
@@ -414,5 +454,11 @@ export const initObservers = ({
       discourseNodeSearchTriggerListener,
       nodeCreationPopoverListener,
     },
+    cleanups: [
+      unsubGlobalTrigger,
+      unsubPersonalTrigger,
+      unsubSearchTrigger,
+      unsubSuggestiveOverlay,
+    ],
   };
 };