make feature flags fully reactive

Author: sid597

apps/roam/src/components/CreateRelationDialog.tsx

@@ -22,7 +22,7 @@ import type { DiscourseNode } from "~/utils/getDiscourseNodes";
 import type { Result } from "~/utils/types";
 import internalError from "~/utils/internalError";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
-import { getFeatureFlag } from "~/components/settings/utils/accessors";
+import { useFeatureFlag } from "~/components/settings/utils/hooks";
 
 export type CreateRelationDialogProps = {
   onClose: () => void;
@@ -373,7 +373,7 @@ export const renderCreateRelationDialog = (
 export const CreateRelationButton = (
   props: CreateRelationDialogProps,
 ): React.JSX.Element | null => {
-  const showAddRelation = getFeatureFlag("Reified Relation Triples");
+  const showAddRelation = useFeatureFlag("Reified Relation Triples");
   if (!showAddRelation) return null;
   let extProps: ExtendedCreateRelationDialogProps | null = null;
   try {

apps/roam/src/components/results-view/ResultsTable.tsx

@@ -23,7 +23,7 @@ import { ContextContent } from "~/components/DiscourseContext";
 import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 import { CONTEXT_OVERLAY_SUGGESTION } from "~/utils/predefinedSelections";
 import { strictQueryForReifiedBlocks } from "~/utils/createReifiedBlock";
-import { getFeatureFlag } from "~/components/settings/utils/accessors";
+import { useFeatureFlag } from "~/components/settings/utils/hooks";
 
 const EXTRA_ROW_TYPES = ["context", "discourse"] as const;
 type ExtraRowType = (typeof EXTRA_ROW_TYPES)[number] | null;
@@ -205,7 +205,7 @@ const ResultRow = ({
   onDragEnd,
   onRefresh,
 }: ResultRowProps) => {
-  const useReifiedRel = getFeatureFlag("Reified Relation Triples");
+  const useReifiedRel = useFeatureFlag("Reified Relation Triples");
   const cell = (key: string) => {
     const value = toCellValue({
       value: r[`${key}-display`] || r[key] || "",

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
   Button,
   Checkbox,
@@ -31,7 +31,7 @@ import { DGSupabaseClient } from "@repo/database/lib/client";
 import internalError from "~/utils/internalError";
 import SuggestiveModeSettings from "./SuggestiveModeSettings";
 import { BlockPropFeatureFlagPanel } from "./components/BlockPropFeatureFlagPanel";
-import { getFeatureFlag } from "./utils/accessors";
+import { useFeatureFlag } from "./utils/hooks";
 
 const NodeRow = ({ node }: { node: PConceptFull }) => {
   return (
@@ -256,7 +256,7 @@ const MigrationTab = (): React.ReactElement => {
   const [useMigrationResults, setMigrationResults] = useState<string>("");
   const [useOngoing, setOngoing] = useState<boolean>(false);
   const [useDryRun, setDryRun] = useState<boolean>(false);
-  const enabled = getFeatureFlag("Reified Relation Triples");
+  const enabled = useFeatureFlag("Reified Relation Triples");
   const doMigrateRelations = async () => {
     setOngoing(true);
     try {
@@ -375,23 +375,18 @@ const FeatureFlagsTab = (): React.ReactElement => {
 
       <Alert
         isOpen={isInstructionOpen}
-        onConfirm={() => window.location.reload()}
+        onConfirm={() => setIsInstructionOpen(false)}
         onCancel={() => setIsInstructionOpen(false)}
-        confirmButtonText="Reload Graph"
-        cancelButtonText="Later"
+        confirmButtonText="Got it"
         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{" "}
-          {"-> Sync Config -> Click on 'Generate & Upload All Node Embeddings'"}
+          Go to the new &apos;Suggestive Mode&apos; tab, then Sync Config{" "}
+          {"-> Click on 'Generate & Upload All Node Embeddings'"}
         </p>
       </Alert>
 
@@ -422,10 +417,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
 
 const AdminPanel = (): React.ReactElement => {
   const [selectedTabId, setSelectedTabId] = useState<TabId>("admin");
-  const suggestiveModeEnabled = useMemo(
-    () => getFeatureFlag("Suggestive Mode Enabled"),
-    [],
-  );
+  const suggestiveModeEnabled = useFeatureFlag("Suggestive Mode Enabled");
 
   return (
     <Tabs

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

@@ -1,9 +1,8 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel";
 import { getFormattedConfigTree } from "~/utils/discourseConfigRef";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index";
-import { Alert, Intent } from "@blueprintjs/core";
 import { BlockPropFeatureFlagPanel } from "./components/BlockPropFeatureFlagPanel";
 
 const DiscourseGraphHome = () => {
@@ -12,8 +11,6 @@ const DiscourseGraphHome = () => {
     return getFormattedConfigTree();
   }, []);
 
-  const [isAlertOpen, setIsAlertOpen] = useState(false);
-
   return (
     <div className="flex flex-col gap-4 p-1">
       <TextPanel
@@ -37,23 +34,7 @@ const DiscourseGraphHome = () => {
         title="(BETA) Enable Left Sidebar"
         description="Whether or not to enable the left sidebar."
         featureKey="Enable Left Sidebar"
-        onAfterChange={(checked) => {
-          if (checked) {
-            setIsAlertOpen(true);
-          }
-        }}
       />
-      <Alert
-        isOpen={isAlertOpen}
-        onConfirm={() => window.location.reload()}
-        onCancel={() => setIsAlertOpen(false)}
-        confirmButtonText="Reload Graph"
-        cancelButtonText="Later"
-        intent={Intent.PRIMARY}
-      >
-        <p>Enabling the Left Sidebar requires a graph reload to take effect.</p>
-        <p>Would you like to reload now?</p>
-      </Alert>
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { OnloadArgs } from "roamjs-components/types";
 import { Label, Checkbox } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
@@ -27,12 +27,12 @@ import internalError from "~/utils/internalError";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
 import { getSetting, setSetting } from "~/utils/extensionSettings";
 import streamlineStyling from "~/styles/streamlineStyling";
-import { getFeatureFlag } from "./utils/accessors";
+import { useFeatureFlag } from "./utils/hooks";
 
 const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const extensionAPI = onloadArgs.extensionAPI;
   const overlayHandler = getOverlayHandler(onloadArgs);
-  const suggestiveModeEnabled = useMemo(() => getFeatureFlag("Suggestive Mode Enabled"), []);
+  const suggestiveModeEnabled = useFeatureFlag("Suggestive Mode Enabled");
 
   return (
     <div className="flex flex-col gap-4 p-1">

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

@@ -3,7 +3,6 @@ import React, {
   useCallback,
   useRef,
   useEffect,
-  useMemo,
 } from "react";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel";
@@ -29,7 +28,7 @@ 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 "./utils/accessors";
+import { useFeatureFlag } from "./utils/hooks";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 
 export const getCleanTagText = (tag: string): string => {
@@ -172,7 +171,7 @@ const NodeConfig = ({
   node: DiscourseNode;
   onloadArgs: OnloadArgs;
 }) => {
-  const suggestiveModeEnabled = useMemo(() => getFeatureFlag("Suggestive Mode Enabled"), []);
+  const suggestiveModeEnabled = useFeatureFlag("Suggestive Mode Enabled");
   const getUid = (key: string) =>
     getSubTree({
       parentUid: node.type,

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

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+import { getFeatureFlag } from "./accessors";
+import type { FeatureFlags } from "./zodSchema";
+
+const FEATURE_FLAG_CHANGE_EVENT = "discourse-graph:feature-flag-change";
+
+type FeatureFlagChangeDetail = {
+  key: keyof FeatureFlags;
+  value: boolean;
+};
+
+export const emitFeatureFlagChange = (
+  key: keyof FeatureFlags,
+  value: boolean,
+): void => {
+  window.dispatchEvent(
+    new CustomEvent<FeatureFlagChangeDetail>(FEATURE_FLAG_CHANGE_EVENT, {
+      detail: { key, value },
+    }),
+  );
+};
+
+export const useFeatureFlag = (key: keyof FeatureFlags): boolean => {
+  const [value, setValue] = useState(() => getFeatureFlag(key));
+
+  useEffect(() => {
+    const handleChange = (event: Event) => {
+      const customEvent = event as CustomEvent<FeatureFlagChangeDetail>;
+      if (customEvent.detail.key === key) {
+        setValue(customEvent.detail.value);
+      }
+    };
+
+    window.addEventListener(FEATURE_FLAG_CHANGE_EVENT, handleChange);
+    return () => {
+      window.removeEventListener(FEATURE_FLAG_CHANGE_EVENT, handleChange);
+    };
+  }, [key]);
+
+  return value;
+};

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

@@ -14,11 +14,15 @@ import {
   type PersonalSettings,
   type DiscourseNodeSettings,
 } from "./zodSchema";
-import { render as renderToast } from "roamjs-components/components/Toast";
 import {
   unmountLeftSidebar,
   remountLeftSidebar,
 } from "~/components/LeftSidebarView";
+import {
+  initializeSupabaseSync,
+  setSyncActivity,
+} from "~/utils/syncDgNodesToSupabase";
+import { emitFeatureFlagChange } from "./hooks";
 
 type PullWatchCallback = (before: unknown, after: unknown) => void;
 
@@ -102,6 +106,7 @@ export const featureFlagHandlers: Partial<
 > = {
   "Enable Left Sidebar": (newValue, oldValue) => {
     if (newValue !== oldValue) {
+      emitFeatureFlagChange("Enable Left Sidebar", newValue);
       if (newValue) {
         void remountLeftSidebar();
       } else {
@@ -111,22 +116,17 @@ export const featureFlagHandlers: Partial<
   },
   "Suggestive Mode Enabled": (newValue, oldValue) => {
     if (newValue !== oldValue) {
-      renderToast({
-        id: "suggestive-mode-changed",
-        content: `Suggestive Mode ${newValue ? "enabled" : "disabled"}. Please reload the graph for changes to take effect.`,
-        intent: "primary",
-        timeout: 5000,
-      });
+      emitFeatureFlagChange("Suggestive Mode Enabled", newValue);
+      if (newValue) {
+        initializeSupabaseSync();
+      } else {
+        setSyncActivity(false);
+      }
     }
   },
   "Reified Relation Triples": (newValue, oldValue) => {
     if (newValue !== oldValue) {
-      renderToast({
-        id: "reified-relations-changed",
-        content: `Reified Relation Triples ${newValue ? "enabled" : "disabled"}. Please reload the graph for changes to take effect.`,
-        intent: "primary",
-        timeout: 5000,
-      });
+      emitFeatureFlagChange("Reified Relation Triples", newValue);
     }
   },
 };

apps/roam/src/index.ts

@@ -31,17 +31,15 @@ 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 { getSetting } from "./utils/extensionSettings";
 import { initPostHog } from "./utils/posthog";
 import {
   STREAMLINE_STYLING_KEY,
   DISALLOW_DIAGNOSTICS,
 } from "./data/userSettings";
 import { initSchema } from "./components/settings/utils/init";
+import { setupPullWatchSettings } from "./components/settings/utils/pullWatchers";
+import { getFeatureFlag } from "./components/settings/utils/accessors";
 
 export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*";
 
@@ -76,8 +74,8 @@ export default runExtension(async (onloadArgs) => {
 
   initPluginTimer();
 
-  // For testing purposes
-  await initSchema();
+  const { blockUids } = await initSchema();
+  const cleanupPullWatch = setupPullWatchSettings(blockUids);
   addGraphViewNodeStyling();
   registerCommandPaletteCommands(onloadArgs);
   createSettingsPanel(onloadArgs);
@@ -111,14 +109,9 @@ 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;
-
-  if (isSuggestiveModeEnabled) {
+  // Initialize sync if suggestive mode was already enabled before plugin load
+  // (pull watcher handles reactive changes after this)
+  if (getFeatureFlag("Suggestive Mode Enabled")) {
     initializeSupabaseSync();
   }
 
@@ -164,6 +157,7 @@ export default runExtension(async (onloadArgs) => {
     ],
     observers: observers,
     unload: () => {
+      cleanupPullWatch();
       setSyncActivity(false);
       window.roamjs.extension?.smartblocks?.unregisterCommand("QUERYBUILDER");
       // @ts-expect-error - tldraw throws a warning on multiple loads

apps/roam/src/utils/discourseConfigRef.ts

@@ -4,8 +4,6 @@ import {
   StringSetting,
   ExportConfigWithUids,
   getUidAndStringSetting,
-  getUidAndBooleanSetting,
-  BooleanSetting,
 } from "./getExportSettings";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
@@ -44,8 +42,6 @@ type FormattedConfigTree = {
   canvasPageFormat: StringSetting;
   suggestiveMode: SuggestiveModeConfigWithUids;
   leftSidebar: LeftSidebarConfig;
-  leftSidebarEnabled: BooleanSetting;
-  suggestiveModeEnabled: BooleanSetting;
 };
 
 export const getFormattedConfigTree = (): FormattedConfigTree => {
@@ -74,14 +70,6 @@ export const getFormattedConfigTree = (): FormattedConfigTree => {
     }),
     suggestiveMode: getSuggestiveModeConfigAndUids(configTreeRef.tree),
     leftSidebar: getLeftSidebarSettings(configTreeRef.tree),
-    leftSidebarEnabled: getUidAndBooleanSetting({
-      tree: configTreeRef.tree,
-      text: "(BETA) Left Sidebar",
-    }),
-    suggestiveModeEnabled: getUidAndBooleanSetting({
-      tree: configTreeRef.tree,
-      text: "(BETA) Suggestive Mode Enabled",
-    }),
   };
 };
 export default configTreeRef;