[ENG-1547] Add relation type editing via click on existing arrows

Allow users to click an existing persisted relation arrow to change its
type via the same dropdown used during creation. Updates relations.json
in-place preserving id, created, author, etc.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: trangdoan982

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

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { TFile } from "obsidian";
 import {
   TLArrowBindingProps,
@@ -19,6 +19,7 @@ import {
 } from "~/components/canvas/utils/relationUtils";
 import { DEFAULT_TLDRAW_COLOR } from "~/utils/tldrawColors";
 import { showToast } from "~/components/canvas/utils/toastUtils";
+import { updateRelationType } from "~/utils/relationsStore";
 import { RelationTypeDropdown } from "./RelationTypeDropdown";
 
 type DragHandleOverlayProps = {
@@ -73,8 +74,11 @@ const getEdgeMidpoints = (bounds: {
 export const DragHandleOverlay = ({ plugin, file }: DragHandleOverlayProps) => {
   const editor = useEditor();
   const [pendingArrowId, setPendingArrowId] = useState<TLShapeId | null>(null);
+  const [editingArrowId, setEditingArrowId] = useState<TLShapeId | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const sourceNodeRef = useRef<DiscourseNodeShape | null>(null);
+  // Tracks the arrow id we just finished editing, so the useEffect doesn't re-open the dropdown
+  const justEditedRef = useRef<TLShapeId | null>(null);
 
   // Track the single selected discourse node — mirrors RelationsOverlay pattern
   const selectedNode = useValue<DiscourseNodeShape | null>(
@@ -89,6 +93,47 @@ export const DragHandleOverlay = ({ plugin, file }: DragHandleOverlayProps) => {
     [editor],
   );
 
+  // Track when user selects an existing persisted relation arrow
+  const selectedRelationArrow = useValue<DiscourseRelationShape | null>(
+    "selectedRelationArrow",
+    () => {
+      const shape = editor.getOnlySelectedShape();
+      if (
+        shape?.type === "discourse-relation" &&
+        (shape.meta as Record<string, unknown>)?.relationInstanceId
+      ) {
+        return shape as DiscourseRelationShape;
+      }
+      return null;
+    },
+    [editor],
+  );
+
+  // Clear justEditedRef when the user selects a different shape (not just transient null)
+  const currentSelectedId = useValue(
+    "currentSelectedId",
+    () => editor.getOnlySelectedShape()?.id ?? null,
+    [editor],
+  );
+  useEffect(() => {
+    if (
+      justEditedRef.current &&
+      currentSelectedId !== justEditedRef.current
+    ) {
+      justEditedRef.current = null;
+    }
+  }, [currentSelectedId]);
+
+  // Open edit dropdown when a persisted relation arrow is selected
+  useEffect(() => {
+    if (selectedRelationArrow && !pendingArrowId && !isDragging) {
+      if (justEditedRef.current === selectedRelationArrow.id) return;
+      setEditingArrowId(selectedRelationArrow.id);
+    } else if (!selectedRelationArrow) {
+      setEditingArrowId(null);
+    }
+  }, [selectedRelationArrow, pendingArrowId, isDragging]);
+
   const handlePositions = useValue<
     { left: number; top: number; anchor: { x: number; y: number } }[] | null
   >(
@@ -374,6 +419,9 @@ export const DragHandleOverlay = ({ plugin, file }: DragHandleOverlayProps) => {
         }
       }
 
+      // Prevent the edit-flow useEffect from re-opening the dropdown
+      // (reifyRelationInFrontmatter will set meta.relationInstanceId on this arrow)
+      justEditedRef.current = pendingArrowId;
       setPendingArrowId(null);
       sourceNodeRef.current = null;
     },
@@ -392,7 +440,72 @@ export const DragHandleOverlay = ({ plugin, file }: DragHandleOverlayProps) => {
     sourceNodeRef.current = null;
   }, [editor, pendingArrowId, cleanupArrow]);
 
-  const showHandles = !!handlePositions && !pendingArrowId;
+  const handleEditSelect = useCallback(
+    (relationTypeId: string) => {
+      if (!editingArrowId) return;
+
+      const shape = editor.getShape<DiscourseRelationShape>(editingArrowId);
+      if (!shape) {
+        setEditingArrowId(null);
+        return;
+      }
+
+      // Same type re-selected — just dismiss
+      if (shape.props.relationTypeId === relationTypeId) {
+        setEditingArrowId(null);
+        return;
+      }
+
+      const relationType = plugin.settings.relationTypes.find(
+        (rt) => rt.id === relationTypeId,
+      );
+      if (!relationType) {
+        setEditingArrowId(null);
+        return;
+      }
+
+      const relationInstanceId = (
+        shape.meta as Record<string, unknown>
+      )?.relationInstanceId;
+      if (typeof relationInstanceId === "string") {
+        void updateRelationType(plugin, relationInstanceId, relationTypeId);
+      }
+
+      // Update arrow visual props
+      editor.updateShapes([
+        {
+          id: editingArrowId,
+          type: "discourse-relation",
+          props: {
+            relationTypeId,
+            color: relationType.color,
+          },
+        },
+      ]);
+
+      // Update text label for direction
+      const updatedShape =
+        editor.getShape<DiscourseRelationShape>(editingArrowId);
+      if (updatedShape) {
+        const bindings = getArrowBindings(editor, updatedShape);
+        const util = editor.getShapeUtil(updatedShape);
+        if (util instanceof DiscourseRelationUtil) {
+          util.updateRelationTextForDirection(updatedShape, bindings);
+        }
+      }
+
+      justEditedRef.current = editingArrowId;
+      setEditingArrowId(null);
+    },
+    [editor, editingArrowId, plugin],
+  );
+
+  const handleEditDismiss = useCallback(() => {
+    justEditedRef.current = editingArrowId;
+    setEditingArrowId(null);
+  }, [editingArrowId]);
+
+  const showHandles = !!handlePositions && !pendingArrowId && !editingArrowId;
 
   return (
     <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
@@ -428,7 +541,7 @@ export const DragHandleOverlay = ({ plugin, file }: DragHandleOverlayProps) => {
           </div>
         ))}
 
-      {/* Relation type dropdown */}
+      {/* Relation type dropdown — new arrow */}
       {pendingArrowId && (
         <RelationTypeDropdown
           arrowId={pendingArrowId}
@@ -437,6 +550,16 @@ export const DragHandleOverlay = ({ plugin, file }: DragHandleOverlayProps) => {
           onDismiss={handleDropdownDismiss}
         />
       )}
+
+      {/* Relation type dropdown — edit existing arrow */}
+      {editingArrowId && !pendingArrowId && (
+        <RelationTypeDropdown
+          arrowId={editingArrowId}
+          plugin={plugin}
+          onSelect={handleEditSelect}
+          onDismiss={handleEditDismiss}
+        />
+      )}
     </div>
   );
 };

apps/obsidian/src/utils/relationsStore.ts

@@ -161,6 +161,19 @@ export const addRelation = async (
   return { id, alreadyExisted: false };
 };
 
+export const updateRelationType = async (
+  plugin: DiscourseGraphPlugin,
+  relationInstanceId: string,
+  newType: string,
+): Promise<boolean> => {
+  const data = await loadRelations(plugin);
+  const relation = data.relations[relationInstanceId];
+  if (!relation) return false;
+  relation.type = newType;
+  await saveRelations(plugin, data);
+  return true;
+};
+
 export const removeRelationById = async (
   plugin: DiscourseGraphPlugin,
   relationInstanceId: string,