ENG-1711 Reciprocal stored relations not updating after being added

apps/roam/src/components/CreateRelationDialog.tsx

@@ -24,9 +24,10 @@ import type { Result } from "~/utils/types";
 import internalError from "~/utils/internalError";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import posthog from "posthog-js";
+import { refreshDiscourseContextsForMutatedUids } from "~/utils/discourseContextMutationRefresh";
 
 export type CreateRelationDialogProps = {
-  onClose: () => void;
+  onClose: (created?: boolean) => void;
   sourceNodeUid: string;
 };
 
@@ -159,12 +160,18 @@ const CreateRelationDialog = ({
     if (selectedTargetUid === "") return false;
     const relation = identifyRelationMatch(selectedTargetText);
     if (relation === null) return false;
+    const sourceUid = relation.forward ? sourceNodeUid : selectedTargetUid;
+    const destinationUid = relation.forward ? selectedTargetUid : sourceNodeUid;
     const result = await createReifiedRelation({
       relationBlockUid: relation.id,
-      sourceUid: relation.forward ? sourceNodeUid : selectedTargetUid,
-      destinationUid: relation.forward ? selectedTargetUid : sourceNodeUid,
+      sourceUid,
+      destinationUid,
     });
-    return result !== undefined;
+    if (result === undefined) return false;
+    refreshDiscourseContextsForMutatedUids({
+      uids: [sourceNodeUid, selectedTargetUid],
+    });
+    return true;
   };
 
   const onCreateSync = (): void => {
@@ -173,8 +180,8 @@ const CreateRelationDialog = ({
       hasTarget: !!selectedTargetUid,
     });
     onCreate()
-      .then((result: boolean) => {
-        if (result) {
+      .then((created) => {
+        if (created) {
           renderToast({
             id: `discourse-relation-created-${Date.now()}`,
             intent: "success",
@@ -188,15 +195,15 @@ const CreateRelationDialog = ({
             content: <span>Failed to create relation</span>,
           });
         }
-        onClose();
+        onClose(created);
       })
       .catch(() => {
         renderToast({
           id: `discourse-relation-error-${Date.now()}`,
           intent: "danger",
           content: <span>Failed to create relation</span>,
         });
-        onClose();
+        onClose(false);
       });
   };
 
@@ -227,7 +234,7 @@ const CreateRelationDialog = ({
   return (
     <Dialog
       isOpen={true}
-      onClose={onClose}
+      onClose={() => onClose(false)}
       autoFocus={false}
       className="roamjs-canvas-dialog"
     >
@@ -264,7 +271,7 @@ const CreateRelationDialog = ({
       </div>
       <div className={Classes.DIALOG_FOOTER}>
         <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button minimal onClick={onClose}>
+          <Button minimal onClick={() => onClose(false)}>
             Cancel
           </Button>
           <Button

apps/roam/src/components/DiscourseContext.tsx

@@ -5,6 +5,10 @@ import getDiscourseContextResults from "~/utils/getDiscourseContextResults";
 import ResultsView from "./results-view/ResultsView";
 import posthog from "posthog-js";
 import { CreateRelationButton } from "./CreateRelationDialog";
+import {
+  DISCOURSE_CONTEXT_MUTATION_REFRESH_EVENT,
+  type DiscourseContextMutationRefreshDetail,
+} from "~/utils/discourseContextMutationRefresh";
 
 export type DiscourseContextResults = Awaited<
   ReturnType<typeof getDiscourseContextResults>
@@ -13,7 +17,7 @@ export type DiscourseContextResults = Awaited<
 type Props = {
   uid: string;
   results?: DiscourseContextResults;
-  overlayRefresh?: () => void;
+  overlayRefresh?: (ignoreCache?: boolean) => void;
 };
 
 const removeTargetFromResult = (
@@ -85,7 +89,8 @@ const ContextTab = ({
           <span style={{ display: "flex", alignItems: "center" }}>
             <CreateRelationButton
               sourceNodeUid={parentUid}
-              onClose={() => {
+              onClose={(created) => {
+                if (!created) return;
                 window.setTimeout(onRefresh, 150, true);
               }}
             />
@@ -158,7 +163,7 @@ export const ContextContent = ({ uid, results, overlayRefresh }: Props) => {
         onResult: addLabels,
         ignoreCache,
       }).finally(() => {
-        if (overlayRefresh) overlayRefresh();
+        if (overlayRefresh) overlayRefresh(ignoreCache);
         setLoading(false);
       });
     },
@@ -177,6 +182,27 @@ export const ContextContent = ({ uid, results, overlayRefresh }: Props) => {
       setLoading(false);
     }
   }, [onRefresh, results, setLoading, loading, addLabels]);
+
+  useEffect(() => {
+    const onMutationRefresh = (event: Event) => {
+      const detail = (
+        event as CustomEvent<DiscourseContextMutationRefreshDetail>
+      ).detail;
+      if (!detail?.uids.includes(uid)) return;
+      onRefresh(true);
+    };
+
+    document.body.addEventListener(
+      DISCOURSE_CONTEXT_MUTATION_REFRESH_EVENT,
+      onMutationRefresh,
+    );
+    return () => {
+      document.body.removeEventListener(
+        DISCOURSE_CONTEXT_MUTATION_REFRESH_EVENT,
+        onMutationRefresh,
+      );
+    };
+  }, [uid, onRefresh]);
   const [tabId, setTabId] = useState(0);
   const [groupByTarget, setGroupByTarget] = useState(false);
   return queryResults.length ? (
@@ -235,7 +261,13 @@ export const ContextContent = ({ uid, results, overlayRefresh }: Props) => {
   ) : (
     <div className="text-center">
       No discourse relations found.
-      <CreateRelationButton sourceNodeUid={uid} onClose={delayedRefresh} />
+      <CreateRelationButton
+        sourceNodeUid={uid}
+        onClose={(created) => {
+          if (!created) return;
+          delayedRefresh();
+        }}
+      />
     </div>
   );
 };

apps/roam/src/components/DiscourseContextOverlay.tsx

@@ -7,7 +7,6 @@ import {
   Card,
 } from "@blueprintjs/core";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import ReactDOM from "react-dom";
 import renderWithUnmount from "roamjs-components/util/renderWithUnmount";
 import { ContextContent } from "./DiscourseContext";
 import useInViewport from "react-in-viewport/dist/es/lib/useInViewport";
@@ -22,7 +21,6 @@ import getDiscourseContextResults from "~/utils/getDiscourseContextResults";
 import findDiscourseNode from "~/utils/findDiscourseNode";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import getDiscourseRelations from "~/utils/getDiscourseRelations";
-import ExtensionApiContextProvider from "roamjs-components/components/ExtensionApiContext";
 import { OnloadArgs } from "roamjs-components/types/native";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import internalError from "~/utils/internalError";

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

@@ -23,6 +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 { refreshDiscourseContextsForMutatedUids } from "~/utils/discourseContextMutationRefresh";
 import { getStoredRelationsEnabled } from "~/utils/storedRelations";
 import {
   RenderRoamBlock,
@@ -286,7 +287,9 @@ const ResultRow = ({
               content: "Relation deleted",
               intent: "success",
             });
-            onRefresh(true);
+            refreshDiscourseContextsForMutatedUids({
+              uids: [data.sourceUid, data.destinationUid],
+            });
           })
           .catch((e) => {
             // this one should be an internalError

apps/roam/src/utils/discourseContextMutationRefresh.ts

@@ -0,0 +1,25 @@
+export const DISCOURSE_CONTEXT_MUTATION_REFRESH_EVENT =
+  "roamjs:discourse-context:mutation-refresh";
+
+export type DiscourseContextMutationRefreshDetail = {
+  uids: string[];
+};
+
+export const refreshDiscourseContextsForMutatedUids = ({
+  uids,
+}: DiscourseContextMutationRefreshDetail): void => {
+  const uniqueUids = Array.from(
+    new Set(uids.map((uid) => uid?.trim()).filter(Boolean)),
+  );
+  if (!uniqueUids.length) return;
+  document.body.dispatchEvent(
+    new CustomEvent<DiscourseContextMutationRefreshDetail>(
+      DISCOURSE_CONTEXT_MUTATION_REFRESH_EVENT,
+      {
+        detail: {
+          uids: uniqueUids,
+        },
+      },
+    ),
+  );
+};

apps/roam/src/utils/matchDiscourseNode.ts

@@ -20,9 +20,10 @@ const matchDiscourseNode = ({
   )) => {
   // Handle specification with single "has title" clause
   if (
-    specification.length === 1 &&
-    specification[0].type === "clause" &&
-    specification[0].relation === "has title"
+    specification?.length === 1 &&
+    specification[0]?.type === "clause" &&
+    specification[0]?.relation === "has title" &&
+    specification[0]?.target
   ) {
     const title =
       "title" in rest ? rest.title : getPageTitleByPageUid(rest.uid);