[ENG-1391] Migrate relations into vault relations.json as objects (#748)

* migration complete

* address PR comments

* light cleanup

* fix small  bug

* address PR comments

Author: trangdoan982

apps/obsidian/src/components/RelationshipSection.tsx

@@ -44,7 +44,6 @@ import {
 } from "~/components/canvas/shapes/DiscourseRelationBinding";
 import ToastListener from "./ToastListener";
 import { RelationsOverlay } from "./overlays/RelationOverlay";
-import { showToast } from "./utils/toastUtils";
 import { WHITE_LOGO_SVG } from "~/icons";
 import { CustomContextMenu } from "./CustomContextMenu";
 import {
@@ -53,7 +52,6 @@ import {
   openFileInNewLeaf,
   resolveDiscourseNodeFile,
 } from "./utils/openFileUtils";
-
 type TldrawPreviewProps = {
   store: TLStore;
   file: TFile;

apps/obsidian/src/components/canvas/TldrawViewComponent.tsx

@@ -17,6 +17,12 @@ import { getFrontmatterForFile } from "~/components/canvas/shapes/discourseNodeS
 import { getRelationTypeById } from "~/utils/typeUtils";
 import { showToast } from "~/components/canvas/utils/toastUtils";
 import { DEFAULT_TLDRAW_COLOR } from "~/utils/tldrawColors";
+import {
+  getNodeInstanceIdForFile,
+  getRelationsForNodeInstanceId,
+  getFileForNodeInstanceId,
+  addRelation,
+} from "~/utils/relationsStore";
 
 type GroupedRelation = {
   key: string;
@@ -184,7 +190,7 @@ export const RelationsPanel = ({
           setError("Linked file not found.");
           return;
         }
-        const g = computeRelations(plugin, file);
+        const g = await computeRelations(plugin, file);
         setGroups(g);
       } catch (e) {
         showToast({
@@ -346,10 +352,33 @@ export const RelationsPanel = ({
     isSource: boolean,
   ) => {
     try {
-      const targetNode = await ensureNodeShapeForFile(targetFile);
       const relationType = getRelationTypeById(plugin, relationTypeId);
       const relationLabel = relationType?.label ?? "";
 
+      const currentFile = await resolveLinkedFileFromSrc({
+        app: plugin.app,
+        canvasFile,
+        src: nodeShape.props.src ?? "",
+      });
+      if (!currentFile || !targetFile) return;
+
+      const sourceFile = isSource ? currentFile : targetFile;
+      const destFile = isSource ? targetFile : currentFile;
+      const sourceId = await getNodeInstanceIdForFile(plugin, sourceFile);
+      const destId = await getNodeInstanceIdForFile(plugin, destFile);
+      if (!sourceId || !destId) {
+        showToast({
+          severity: "error",
+          title: "Could Not Resolve Nodes",
+          description:
+            "Could not resolve node instance IDs for the selected files.",
+          targetCanvasId: canvasFile.path,
+        });
+        return;
+      }
+
+      const targetNode = await ensureNodeShapeForFile(targetFile);
+
       const id: TLShapeId = createShapeId();
 
       // Determine source and destination nodes
@@ -417,6 +446,17 @@ export const RelationsPanel = ({
         isExact: false,
         snap: "none",
       });
+
+      const { id: relationInstanceId } = await addRelation(plugin, {
+        type: relationTypeId,
+        source: sourceId,
+        destination: destId,
+      });
+      editor.updateShape({
+        id: shape.id,
+        type: shape.type,
+        meta: { ...shape.meta, relationInstanceId },
+      });
     } catch (e) {
       console.error("Failed to create relation to file", e);
       showToast({
@@ -487,35 +527,36 @@ export const RelationsPanel = ({
   );
 };
 
-const computeRelations = (
+const computeRelations = async (
   plugin: DiscourseGraphPlugin,
   file: TFile,
-): GroupedRelation[] => {
+): Promise<GroupedRelation[]> => {
   const fileCache = plugin.app.metadataCache.getFileCache(file);
   if (!fileCache?.frontmatter) return [];
 
   const activeNodeTypeId = fileCache.frontmatter.nodeTypeId as string;
   if (!activeNodeTypeId) return [];
 
+  const nodeInstanceId = await getNodeInstanceIdForFile(plugin, file);
+  if (!nodeInstanceId) return [];
+
+  const relations = await getRelationsForNodeInstanceId(
+    plugin,
+    nodeInstanceId,
+  );
   const result = new Map<string, GroupedRelation>();
 
   for (const relationType of plugin.settings.relationTypes) {
-    const frontmatterLinks = fileCache.frontmatter[relationType.id] as unknown;
-    if (!frontmatterLinks) continue;
-
-    const links = Array.isArray(frontmatterLinks)
-      ? (frontmatterLinks as unknown[])
-      : [frontmatterLinks];
-
-    const relation = plugin.settings.discourseRelations.find(
+    const typeLevelRelation = plugin.settings.discourseRelations.find(
       (rel) =>
         (rel.sourceId === activeNodeTypeId ||
           rel.destinationId === activeNodeTypeId) &&
         rel.relationshipTypeId === relationType.id,
     );
-    if (!relation) continue;
+    if (!typeLevelRelation) continue;
 
-    const isSource = relation.sourceId === activeNodeTypeId;
+    const instanceRels = relations.filter((r) => r.type === relationType.id);
+    const isSource = typeLevelRelation.sourceId === activeNodeTypeId;
     const label = isSource ? relationType.label : relationType.complement;
     const key = `${relationType.id}-${isSource}`;
 
@@ -529,23 +570,15 @@ const computeRelations = (
       });
     }
 
-    for (const link of links) {
-      const match = String(link).match(/\[\[(.*?)\]\]/);
-      if (!match) continue;
-      const linkedFileName = match[1] ?? "";
-      const linked = plugin.app.metadataCache.getFirstLinkpathDest(
-        linkedFileName,
-        file.path,
-      );
-      if (!linked) continue;
-
-      const group = result.get(key);
-      if (group && !group.linkedFiles.some((f) => f.path === linked.path)) {
+    const group = result.get(key)!;
+    for (const r of instanceRels) {
+      const otherId = r.source === nodeInstanceId ? r.destination : r.source;
+      const linked = await getFileForNodeInstanceId(plugin, otherId);
+      if (linked && !group.linkedFiles.some((f) => f.path === linked.path)) {
         group.linkedFiles.push(linked);
       }
     }
   }
 
   return Array.from(result.values());
 };
-

apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx

@@ -59,7 +59,7 @@ import {
 } from "~/components/canvas/utils/relationUtils";
 import { RelationBindings } from "./DiscourseRelationBinding";
 import { DiscourseNodeShape, DiscourseNodeUtil } from "./DiscourseNodeShape";
-import { addRelationToFrontmatter } from "~/components/canvas/utils/frontmatterUtils";
+import { addRelationToRelationsJson } from "~/components/canvas/utils/relationJsonUtils";
 import { showToast } from "~/components/canvas/utils/toastUtils";
 
 export enum ArrowHandles {
@@ -1210,16 +1210,23 @@ export class DiscourseRelationUtil extends ShapeUtil<DiscourseRelationShape> {
         return;
       }
 
-      // Add the bidirectional relation to frontmatter
-      const { alreadyExisted } = await addRelationToFrontmatter({
-        app: this.options.app,
-        plugin: this.options.plugin,
-        sourceFile,
-        targetFile,
-        relationTypeId: shape.props.relationTypeId,
-      });
+      const { alreadyExisted, relationInstanceId } =
+        await addRelationToRelationsJson({
+          app: this.options.app,
+          plugin: this.options.plugin,
+          sourceFile,
+          targetFile,
+          relationTypeId: shape.props.relationTypeId,
+        });
+
+      if (relationInstanceId) {
+        this.editor.updateShape({
+          id: shape.id,
+          type: shape.type,
+          meta: { ...shape.meta, relationInstanceId },
+        });
+      }
 
-      // Show success notice
       const relationType = this.options.plugin.settings.relationTypes.find(
         (rt) => rt.id === shape.props.relationTypeId,
       );

apps/obsidian/src/components/canvas/shapes/DiscourseRelationShape.tsx

@@ -0,0 +1,37 @@
+import type { App, TFile } from "obsidian";
+import type DiscourseGraphPlugin from "~/index";
+import { addRelation, getNodeInstanceIdForFile } from "~/utils/relationsStore";
+
+/**
+ * Persists a relation between two files to the relations store (relations.json).
+ * Uses addRelation (checks for existing relation by default).
+ *
+ * @returns Object indicating whether the relation already existed and the relation instance id.
+ */
+export const addRelationToRelationsJson = async ({
+  app,
+  plugin,
+  sourceFile,
+  targetFile,
+  relationTypeId,
+}: {
+  app: App;
+  plugin: DiscourseGraphPlugin;
+  sourceFile: TFile;
+  targetFile: TFile;
+  relationTypeId: string;
+}): Promise<{ alreadyExisted: boolean; relationInstanceId?: string }> => {
+  const sourceId = await getNodeInstanceIdForFile(plugin, sourceFile);
+  const destId = await getNodeInstanceIdForFile(plugin, targetFile);
+  if (!sourceId || !destId) {
+    console.warn("Could not resolve nodeInstanceIds for relation files");
+    return { alreadyExisted: false };
+  }
+
+  const { id, alreadyExisted } = await addRelation(plugin, {
+    type: relationTypeId,
+    source: sourceId,
+    destination: destId,
+  });
+  return { alreadyExisted, relationInstanceId: id };
+};

apps/obsidian/src/components/canvas/utils/frontmatterUtils.ts

@@ -26,7 +26,7 @@ import { NodeTagSuggestPopover } from "~/components/NodeTagSuggestModal";
 import { initializeSupabaseSync } from "~/utils/syncDgNodesToSupabase";
 import { FileChangeListener } from "~/utils/fileChangeListener";
 import generateUid from "~/utils/generateUid";
-import type { DiscourseNode, DiscourseRelation } from "~/types";
+import { migrateFrontmatterRelationsToRelationsJson } from "~/utils/relationsStore";
 
 export default class DiscourseGraphPlugin extends Plugin {
   settings: Settings = { ...DEFAULT_SETTINGS };
@@ -39,6 +39,10 @@ export default class DiscourseGraphPlugin extends Plugin {
   async onload() {
     await this.loadSettings();
 
+    await migrateFrontmatterRelationsToRelationsJson(this).catch((error) => {
+      console.error("Failed to migrate frontmatter relations:", error);
+    });
+
     if (this.settings.syncModeEnabled === true) {
       void initializeSupabaseSync(this).catch((error) => {
         console.error("Failed to initialize Supabase sync:", error);

apps/obsidian/src/components/canvas/utils/relationJsonUtils.ts

@@ -0,0 +1,25 @@
+import { uuidv7 } from "uuidv7";
+import type { TFile } from "obsidian";
+import type DiscourseGraphPlugin from "~/index";
+
+/**
+ * Ensures the file has a nodeInstanceId in frontmatter. If missing, generates one (uuidv7) and writes it.
+ * Used by sync and relations store so every discourse node has a stable instance id.
+ */
+export const ensureNodeInstanceId = async (
+  plugin: DiscourseGraphPlugin,
+  file: TFile,
+  frontmatter: Record<string, unknown>,
+): Promise<string> => {
+  const existingId = frontmatter["nodeInstanceId"] as string | undefined;
+  if (existingId && typeof existingId === "string") {
+    return existingId;
+  }
+
+  const nodeInstanceId = uuidv7() as string;
+  await plugin.app.fileManager.processFrontMatter(file, (fm) => {
+    (fm as Record<string, unknown>).nodeInstanceId = nodeInstanceId;
+  });
+
+  return nodeInstanceId;
+};