fix: resolve stale selection bug in network diagram PropertiesPanel

Selection state now stores IDs and derives objects from live arrays,
so edits in PropertiesPanel inputs reflect immediately.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/network/NetworkCanvas.tsx

@@ -20,8 +20,8 @@ interface NetworkCanvasProps {
   onNodesChange: OnNodesChange
   onEdgesChange: OnEdgesChange
   onConnect: OnConnect
-  onNodeSelect: (node: Node | null) => void
+  onNodeSelect: (nodeId: string | null) => void
-  onEdgeSelect: (edge: Edge | null) => void
+  onEdgeSelect: (edgeId: string | null) => void
   onDrop: (event: React.DragEvent) => void
   onDragOver: (event: React.DragEvent) => void
 }
@@ -39,10 +39,10 @@ export function NetworkCanvas({
 }: NetworkCanvasProps) {
   const handleSelectionChange = useCallback(({ nodes: selectedNodes, edges: selectedEdges }: { nodes: Node[]; edges: Edge[] }) => {
     if (selectedNodes.length === 1) {
-      onNodeSelect(selectedNodes[0])
+      onNodeSelect(selectedNodes[0].id)
       onEdgeSelect(null)
     } else if (selectedEdges.length === 1) {
-      onEdgeSelect(selectedEdges[0])
+      onEdgeSelect(selectedEdges[0].id)
       onNodeSelect(null)
     } else {
       onNodeSelect(null)

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -36,8 +36,11 @@ function DiagramEditorInner() {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
 
-  const [selectedNode, setSelectedNode] = useState<Node | null>(null)
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
-  const [selectedEdge, setSelectedEdge] = useState<Edge | null>(null)
+  const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
+
+  const selectedNode = selectedNodeId ? nodes.find(n => n.id === selectedNodeId) ?? null : null
+  const selectedEdge = selectedEdgeId ? edges.find(e => e.id === selectedEdgeId) ?? null : null
 
   const [isDirty, setIsDirty] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
@@ -256,32 +259,19 @@ function DiagramEditorInner() {
         },
       }
     }))
-    setSelectedEdge(prev => {
-      if (!prev || prev.id !== edgeId) return prev
-      return {
-        ...prev,
-        label: updates.label !== undefined ? (updates.label || undefined) : prev.label,
-        data: {
-          ...(prev.data || {}),
-          ...(updates.connectionType !== undefined ? { connectionType: updates.connectionType } : {}),
-          ...(updates.speed !== undefined ? { speed: updates.speed } : {}),
-          ...(updates.notes !== undefined ? { notes: updates.notes } : {}),
-        },
-      }
-    })
     setIsDirty(true)
   }, [setEdges])
 
   const handleDeleteNode = useCallback((nodeId: string) => {
     setNodes(nds => nds.filter(n => n.id !== nodeId))
     setEdges(eds => eds.filter(e => e.source !== nodeId && e.target !== nodeId))
-    setSelectedNode(null)
+    setSelectedNodeId(null)
     setIsDirty(true)
   }, [setNodes, setEdges])
 
   const handleDeleteEdge = useCallback((edgeId: string) => {
     setEdges(eds => eds.filter(e => e.id !== edgeId))
-    setSelectedEdge(null)
+    setSelectedEdgeId(null)
     setIsDirty(true)
   }, [setEdges])
 
@@ -398,8 +388,8 @@ function DiagramEditorInner() {
               onNodesChange={handleNodesChange}
               onEdgesChange={handleEdgesChange}
               onConnect={onConnect}
-              onNodeSelect={setSelectedNode}
+              onNodeSelect={setSelectedNodeId}
-              onEdgeSelect={setSelectedEdge}
+              onEdgeSelect={setSelectedEdgeId}
               onDrop={onDrop}
               onDragOver={onDragOver}
             />