[ENG-1165] Rename node titles on page load if title has changed (#835)

* first pass

* address pr comment + fix lint

* address PR comments

Author: trangdoan982

apps/roam/src/components/canvas/Tldraw.tsx

@@ -106,6 +106,7 @@ import ToastListener, { dispatchToastEvent } from "./ToastListener";
 import { CanvasDrawerPanel } from "./CanvasDrawer";
 import { ClipboardPanel, ClipboardProvider } from "./Clipboard";
 import internalError from "~/utils/internalError";
+import { syncCanvasNodeTitlesOnLoad } from "~/utils/syncCanvasNodeTitlesOnLoad";
 import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
 import { isPluginTimerReady, waitForPluginTimer } from "~/utils/pluginTimer";
@@ -932,6 +933,7 @@ const TldrawCanvasShared = ({
   return (
     <div
       className="roamjs-tldraw-canvas-container relative z-10 h-full w-full overflow-hidden rounded-md border border-gray-300 bg-white"
+      data-page-uid={pageUid ?? undefined}
       ref={containerRef}
       tabIndex={-1}
       onDragOver={handleDragOver}
@@ -1026,6 +1028,16 @@ const TldrawCanvasShared = ({
               // hack for "cannot change atoms during reaction cycle" bug
               installSafeHintingSetter({ app, title, pageUid });
               setHasMountedEditor(true);
+              void syncCanvasNodeTitlesOnLoad(
+                app,
+                allNodes.map((n) => n.type),
+                allRelationIds,
+              ).catch((error) => {
+                internalError({
+                  error,
+                  type: "Canvas: Sync node titles on load",
+                });
+              });
 
               app.on("change", (entry) => {
                 lastActionsRef.current.push(entry);

apps/roam/src/utils/syncCanvasNodeTitlesOnLoad.ts

@@ -0,0 +1,107 @@
+import type { Editor } from "tldraw";
+import type { DiscourseNodeShape } from "~/components/canvas/DiscourseNodeUtil";
+
+/**
+ * Query Roam for current :node/title or :block/string for each uid.
+ * Returns a map of uid -> title for uids that exist; uids not in the map no longer exist.
+ */
+const queryTitlesByUids = async (
+  uids: string[],
+): Promise<Map<string, string>> => {
+  if (uids.length === 0) return new Map();
+
+  const results = (await window.roamAlphaAPI.data.async.fast.q(
+    `[:find ?uid (pull ?e [:node/title :block/string])
+      :in $ [?uid ...]
+      :where [?e :block/uid ?uid]]`,
+    uids,
+    /* eslint-disable-next-line @typescript-eslint/naming-convention */
+  )) as [string, { ":node/title"?: string; ":block/string"?: string }][];
+
+  const map = new Map<string, string>();
+  for (const [uid, pull] of results) {
+    const title = pull?.[":node/title"] ?? pull?.[":block/string"] ?? "";
+    map.set(uid, title);
+  }
+  return map;
+};
+
+/** Delete relation arrows and their bindings that reference this node shape, then the node shape. */
+const deleteNodeShapeAndRelations = (
+  editor: Editor,
+  shape: DiscourseNodeShape,
+  relationIds: Set<string>,
+): void => {
+  const bindingsToThisShape = Array.from(relationIds).flatMap((typeId) =>
+    editor.getBindingsToShape(shape.id, typeId),
+  );
+  const relationShapeIdsAndType = bindingsToThisShape.map((b) => ({
+    id: b.fromId,
+    type: b.type,
+  }));
+  const bindingsToDelete = relationShapeIdsAndType.flatMap(({ id, type }) =>
+    editor.getBindingsFromShape(id, type),
+  );
+  const relationShapeIdsToDelete = relationShapeIdsAndType.map((r) => r.id);
+  const bindingIdsToDelete = bindingsToDelete.map((b) => b.id);
+  editor
+    .deleteShapes(relationShapeIdsToDelete)
+    .deleteBindings(bindingIdsToDelete);
+  editor.deleteShapes([shape.id]);
+};
+
+/**
+ * On canvas load: sync discourse node shape titles with Roam and remove shapes whose nodes no longer exist.
+ * - Queries Roam for current title per uid via async.fast.q
+ * - Updates shapes whose title changed
+ * - Removes shapes whose uid no longer exists in the graph
+ */
+export const syncCanvasNodeTitlesOnLoad = async (
+  editor: Editor,
+  nodeTypeIds: string[],
+  relationShapeTypeIds: string[],
+): Promise<void> => {
+  const nodeTypeSet = new Set(nodeTypeIds);
+  const relationIds = new Set(relationShapeTypeIds);
+  const allRecords = editor.store.allRecords();
+  const discourseNodeShapes = allRecords.filter(
+    (r) =>
+      r.typeName === "shape" &&
+      nodeTypeSet.has((r as DiscourseNodeShape).type) &&
+      typeof (r as DiscourseNodeShape).props?.uid === "string",
+  ) as DiscourseNodeShape[];
+
+  const uids = [...new Set(discourseNodeShapes.map((s) => s.props.uid))];
+  if (uids.length === 0) return;
+
+  const uidToTitle = await queryTitlesByUids(uids);
+
+  const shapesToUpdate: { shape: DiscourseNodeShape; newTitle: string }[] = [];
+  const shapesToRemove: DiscourseNodeShape[] = [];
+
+  for (const shape of discourseNodeShapes) {
+    const uid = shape.props.uid;
+    const currentInRoam = uidToTitle.get(uid);
+    if (currentInRoam === undefined) {
+      shapesToRemove.push(shape);
+    } else if ((shape.props.title ?? "") !== (currentInRoam ?? "")) {
+      shapesToUpdate.push({ shape, newTitle: currentInRoam });
+    }
+  }
+
+  if (shapesToRemove.length > 0) {
+    for (const shape of shapesToRemove) {
+      deleteNodeShapeAndRelations(editor, shape, relationIds);
+    }
+  }
+
+  if (shapesToUpdate.length > 0) {
+    editor.updateShapes(
+      shapesToUpdate.map(({ shape, newTitle }) => ({
+        id: shape.id,
+        type: shape.type,
+        props: { title: newTitle },
+      })),
+    );
+  }
+};