@principal-ai/principal-view-react 0.13.6 → 0.13.8

package/src/components/GraphRenderer.tsx

@@ -2,6 +2,7 @@ import React, {
   useMemo,
   useState,
   useEffect,
+  useLayoutEffect,
   useCallback,
   useRef,
   useImperativeHandle,
@@ -21,8 +22,10 @@ import {
   applyEdgeChanges,
   type Edge,
   type EdgeChange,
+  type EdgeTypes,
   type NodeChange,
   type Node,
+  type NodeTypes,
   type Connection,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
@@ -37,8 +40,6 @@ import type {
   StateEvent,
   ExtendedCanvas,
   ComponentLibrary,
-  JsonValue,
-  PVEventSchema,
 } from '@principal-ai/principal-view-core';
 import { CanvasConverter } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
@@ -50,8 +51,6 @@ import {
   convertToXYFlowNodes,
   convertToXYFlowEdges,
 } from '../utils/graphConverter';
-import { EdgeInfoPanel } from './EdgeInfoPanel';
-import { NodeInfoPanel } from './NodeInfoPanel';
 
 /** Position change event for tracking node movements */
 export interface NodePositionChange {
@@ -201,22 +200,6 @@ interface GraphRendererBaseProps {
    */
   onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
 
-  /**
-   * Whether to show the node detail panel when nodes are clicked.
-   * Defaults to undefined (auto), which shows panel only when onNodeClick is not provided.
-   * Set to true to force showing panel even with custom onNodeClick handler.
-   * Set to false to hide panel completely.
-   */
-  showNodeDetailPanel?: boolean;
-
-  /**
-   * Optional callback to resolve event references to full event schemas.
-   * When a node has an eventRef (string reference like "order.completed"),
-   * this function is called to retrieve the full event definition.
-   * Return undefined if the event reference cannot be resolved.
-   */
-  resolveEventRef?: (eventRef: string) => PVEventSchema | undefined;
-
   /**
    * When set, fits the viewport to show these specific nodes.
    * Useful for focusing on a subset of the graph (e.g., scenario nodes).
@@ -246,14 +229,14 @@ export interface GraphRendererProps extends GraphRendererBaseProps {
 }
 
 // Define custom node types
-const nodeTypes = {
-  custom: CustomNode as any,
-};
+// Type assertion needed because ReactFlow's NodeTypes expects generic components
+// but CustomNode is properly typed with CustomNodeData for type safety internally
+const nodeTypes = { custom: CustomNode } as NodeTypes;
 
 // Define custom edge types
-const edgeTypes = {
-  custom: CustomEdge as any,
-};
+// Type assertion needed because ReactFlow's EdgeTypes expects generic components
+// but CustomEdge is properly typed with CustomEdgeData for type safety internally
+const edgeTypes = { custom: CustomEdge } as EdgeTypes;
 
 // Animation state for nodes and edges
 interface AnimationState {
@@ -455,8 +438,6 @@ interface GraphRendererInnerProps {
   onEditStateChange?: (editState: EditState) => void;
   editStateRef: React.MutableRefObject<EditState>;
   onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
-  showNodeDetailPanel?: boolean;
-  resolveEventRef?: (eventRef: string) => PVEventSchema | undefined;
   fitViewToNodeIds?: string[] | null;
   fitViewPadding?: number;
 }
@@ -487,8 +468,6 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   onEditStateChange,
   editStateRef,
   onNodeClick: onNodeClickProp,
-  showNodeDetailPanel,
-  resolveEventRef,
   fitViewToNodeIds,
   fitViewPadding = 0.2,
 }) => {
@@ -539,9 +518,6 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
 
   // Track selected nodes for info panel (supports multi-select)
   const [selectedNodeIds, setSelectedNodeIds] = useState<Set<string>>(new Set());
-  // Track whether panel should be shown (only on explicit clicks, not after dragging)
-  const [showNodePanel, setShowNodePanel] = useState(false);
-  const [showEdgePanel, setShowEdgePanel] = useState(false);
 
   // Track hidden nodes (shift-click to toggle)
   const [hiddenNodeIds, setHiddenNodeIds] = useState<Set<string>>(new Set());
@@ -555,14 +531,12 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     validTypes: string[];
   } | null>(null);
 
-  // Sync highlightedNodeId to selection state so info panel shows
+  // Sync highlightedNodeId to selection state
   useEffect(() => {
     if (highlightedNodeId) {
       setSelectedNodeIds(new Set([highlightedNodeId]));
-      setShowNodePanel(true);
       // Clear edge selection when highlighting a node
       setSelectedEdgeIds(new Set());
-      setShowEdgePanel(false);
     }
   }, [highlightedNodeId]);
 
@@ -750,19 +724,15 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
           }
           return next;
         });
-        setShowEdgePanel(true);
       } else {
         // Regular click: single select (replace selection)
         const shouldDeselect = selectedEdgeIds.size === 1 && selectedEdgeIds.has(edge.id);
         if (shouldDeselect) {
           setSelectedEdgeIds(new Set());
-          setShowEdgePanel(false);
         } else {
           setSelectedEdgeIds(new Set([edge.id]));
-          setShowEdgePanel(true);
         }
         setSelectedNodeIds(new Set());
-        setShowNodePanel(false);
       }
     },
     [editable, selectedEdgeIds]
@@ -810,12 +780,12 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
             next.add(node.id);
           }
 
-          // Also update local nodes selection state immediately
+          // Update local nodes selection state immediately for edit mode
           if (editable) {
             setXyflowLocalNodes((nodes) =>
               nodes.map((n) => ({
                 ...n,
-                selected: n.id === node.id ? !prev.has(node.id) : next.has(n.id),
+                selected: next.has(n.id),
               }))
             );
           }
@@ -825,25 +795,15 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         return;
       }
 
-      // Determine if we should show the panel based on showNodeDetailPanel prop
-      const shouldShowPanel = showNodeDetailPanel !== false && (showNodeDetailPanel === true || !onNodeClickProp);
-
-      // If custom node click handler is provided, call it
-      if (onNodeClickProp) {
-        onNodeClickProp(node.id, event);
-        // If showNodeDetailPanel is not explicitly true, return early (old behavior)
-        if (showNodeDetailPanel !== true) {
-          return;
-        }
-      }
-
       // Regular click: single select (replace selection)
+      event.preventDefault();
+      event.stopPropagation();
+
       const shouldDeselect = selectedNodeIds.size === 1 && selectedNodeIds.has(node.id);
       if (shouldDeselect) {
         setSelectedNodeIds(new Set());
-        setShowNodePanel(false);
 
-        // Also update local nodes selection state immediately
+        // Update local nodes selection state immediately for edit mode
         if (editable) {
           setXyflowLocalNodes((nodes) =>
             nodes.map((n) => ({
@@ -854,11 +814,8 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         }
       } else {
         setSelectedNodeIds(new Set([node.id]));
-        if (shouldShowPanel) {
-          setShowNodePanel(true);
-        }
 
-        // Also update local nodes selection state immediately
+        // Update local nodes selection state immediately for edit mode
         if (editable) {
           setXyflowLocalNodes((nodes) =>
             nodes.map((n) => ({
@@ -869,48 +826,31 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         }
       }
       setSelectedEdgeIds(new Set());
-      setShowEdgePanel(false);
+
+      // If custom node click handler is provided, call it after selection is updated
+      if (onNodeClickProp) {
+        onNodeClickProp(node.id, event);
+      }
     },
-    [selectedNodeIds, onNodeClickProp, showNodeDetailPanel, editable]
+    [selectedNodeIds, onNodeClickProp, editable]
   );
 
-  // Handle close edge info panel
-  const onCloseEdgeInfoPanel = useCallback(() => {
-    setSelectedEdgeIds(new Set());
-    setShowEdgePanel(false);
-  }, []);
-
-  // Handle edge side updates from EdgeInfoPanel
-  const handleUpdateEdgeSides = useCallback((edgeId: string, fromSide: string, toSide: string) => {
-    setLocalEdges((currentEdges) =>
-      currentEdges.map((edge) =>
-        edge.id === edgeId
-          ? {
-              ...edge,
-              data: {
-                ...edge.data,
-                fromSide,
-                toSide,
-              },
-            }
-          : edge
-      )
-    );
-  }, []);
-
-  // Handle close node info panel
-  const onCloseNodeInfoPanel = useCallback(() => {
-    setSelectedNodeIds(new Set());
-    setShowNodePanel(false);
-  }, []);
 
   // Handle pane click (clear selection when clicking empty space)
   const onPaneClick = useCallback(() => {
     setSelectedNodeIds(new Set());
     setSelectedEdgeIds(new Set());
-    setShowNodePanel(false);
-    setShowEdgePanel(false);
-  }, []);
+
+    // In edit mode, also update local nodes selection state
+    if (editable) {
+      setXyflowLocalNodes((nodes) =>
+        nodes.map((n) => ({
+          ...n,
+          selected: false,
+        }))
+      );
+    }
+  }, [editable]);
 
   // Handle selection change from ReactFlow (box selection and clicks)
   const handleSelectionChange = useCallback(
@@ -920,138 +860,51 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         return;
       }
 
-      // Always update selection state, even in read-only mode (for visual feedback)
-      setSelectedNodeIds(new Set(selectedNodes.map((n) => n.id)));
-      setSelectedEdgeIds(new Set(selectedEdges.map((e) => e.id)));
-
-      // Only show panels in edit mode or when explicitly enabled
+      // In edit mode, we manage selection ourselves via onNodeClick
+      // Skip handleSelectionChange to avoid ReactFlow overwriting our selection state
       if (editable) {
-        // Box selection is an explicit action, so show panels
-        if (selectedNodes.length > 0) {
-          setShowNodePanel(true);
-        }
-        if (selectedEdges.length > 0) {
-          setShowEdgePanel(true);
-        }
+        return;
       }
-    },
-    [editable]
-  );
-
-  // Handle node update (internal - updates local state only)
-  const handleNodeUpdate = useCallback(
-    (nodeId: string, updates: { type?: string; data?: Record<string, JsonValue> }) => {
-      if (!editable) return;
-
-      // Update local nodes
-      setLocalNodes((prev) =>
-        prev.map((node) => {
-          if (node.id === nodeId) {
-            return {
-              ...node,
-              type: updates.type ?? node.type,
-              data: updates.data ? { ...node.data, ...updates.data } : node.data,
-            };
-          }
-          return node;
-        })
-      );
 
-      // Track the change
-      updateEditState((prev) => {
-        const newUpdates = new Map(prev.nodeUpdates);
-        const existing = newUpdates.get(nodeId) || {};
-        newUpdates.set(nodeId, {
-          type: updates.type ?? existing.type,
-          data: updates.data ? { ...existing.data, ...updates.data } : existing.data,
-        });
-        return { ...prev, nodeUpdates: newUpdates };
-      });
-    },
-    [editable, updateEditState]
-  );
-
-  // Handle node delete (internal)
-  const handleNodeDelete = useCallback(
-    (nodeId: string) => {
-      if (!editable) return;
+      const newSelectedNodeIds = new Set(selectedNodes.map((n) => n.id));
 
-      // Remove from local state
-      setLocalNodes((prev) => prev.filter((n) => n.id !== nodeId));
-      setLocalEdges((prev) => prev.filter((e) => e.from !== nodeId && e.to !== nodeId));
-
-      // Track the change
-      updateEditState((prev) => {
-        const newDeletedNodes = new Set(prev.deletedNodeIds);
-        newDeletedNodes.add(nodeId);
-        // Remove any pending updates for this node
-        const newUpdates = new Map(prev.nodeUpdates);
-        newUpdates.delete(nodeId);
-        // Remove any position changes for this node
-        const newPositions = new Map(prev.positionChanges);
-        newPositions.delete(nodeId);
-        // Remove any dimension changes for this node
-        const newDimensions = new Map(prev.dimensionChanges);
-        newDimensions.delete(nodeId);
-        // Remove created edges that involve this node
-        const newCreatedEdges = prev.createdEdges.filter(
-          (e) => e.from !== nodeId && e.to !== nodeId
-        );
-        return {
-          ...prev,
-          deletedNodeIds: newDeletedNodes,
-          nodeUpdates: newUpdates,
-          positionChanges: newPositions,
-          dimensionChanges: newDimensions,
-          createdEdges: newCreatedEdges,
-        };
-      });
-
-      setSelectedNodeIds(new Set());
+      // Update selection state for read-only mode (for visual feedback)
+      setSelectedNodeIds(newSelectedNodeIds);
+      setSelectedEdgeIds(new Set(selectedEdges.map((e) => e.id)));
     },
-    [editable, updateEditState]
+    [editable]
   );
 
-  // Handle edge delete (internal)
-  const handleEdgeDelete = useCallback(
-    (edgeId: string) => {
-      if (!editable) return;
 
-      // Find the edge before removing it so we can track its full info
-      const edgeToDelete = localEdges.find((e) => e.id === edgeId);
+  // Create edge helper
+  const createEdge = useCallback(
+    (from: string, to: string, type: string, sourceHandle?: string, targetHandle?: string) => {
+      const edgeId = `${from}-${to}-${type}-${Date.now()}`;
 
-      // Remove from local state
-      setLocalEdges((prev) => prev.filter((e) => e.id !== edgeId));
+      // Add to local state with handle information
+      const newEdge: EdgeState & { sourceHandle?: string; targetHandle?: string } = {
+        id: edgeId,
+        type,
+        from,
+        to,
+        data: {},
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        sourceHandle,
+        targetHandle,
+      };
+      setLocalEdges((prev) => [...prev, newEdge]);
 
       // Track the change
-      updateEditState((prev) => {
-        // Check if this was a newly created edge
-        const createdEdgeIndex = prev.createdEdges.findIndex((e) => e.id === edgeId);
-        if (createdEdgeIndex >= 0) {
-          // Just remove it from created edges
-          const newCreatedEdges = [...prev.createdEdges];
-          newCreatedEdges.splice(createdEdgeIndex, 1);
-          return { ...prev, createdEdges: newCreatedEdges };
-        }
-        // Otherwise mark as deleted with full edge info
-        if (edgeToDelete) {
-          const newDeletedEdges = [
-            ...prev.deletedEdges,
-            {
-              id: edgeId,
-              from: edgeToDelete.from,
-              to: edgeToDelete.to,
-              type: edgeToDelete.type,
-            },
-          ];
-          return { ...prev, deletedEdges: newDeletedEdges };
-        }
-        return prev;
-      });
-
-      setSelectedEdgeIds(new Set());
+      updateEditState((prev) => ({
+        ...prev,
+        createdEdges: [
+          ...prev.createdEdges,
+          { id: edgeId, from, to, type, sourceHandle, targetHandle },
+        ],
+      }));
     },
-    [editable, updateEditState, localEdges]
+    [updateEditState]
   );
 
   // Handle new connection from drag
@@ -1098,38 +951,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         });
       }
     },
-    [editable, nodes, configuration.allowedConnections]
-  );
-
-  // Create edge helper
-  const createEdge = useCallback(
-    (from: string, to: string, type: string, sourceHandle?: string, targetHandle?: string) => {
-      const edgeId = `${from}-${to}-${type}-${Date.now()}`;
-
-      // Add to local state with handle information
-      const newEdge: EdgeState & { sourceHandle?: string; targetHandle?: string } = {
-        id: edgeId,
-        type,
-        from,
-        to,
-        data: {},
-        createdAt: Date.now(),
-        updatedAt: Date.now(),
-        sourceHandle,
-        targetHandle,
-      };
-      setLocalEdges((prev) => [...prev, newEdge]);
-
-      // Track the change
-      updateEditState((prev) => ({
-        ...prev,
-        createdEdges: [
-          ...prev.createdEdges,
-          { id: edgeId, from, to, type, sourceHandle, targetHandle },
-        ],
-      }));
-    },
-    [updateEditState]
+    [editable, nodes, configuration.allowedConnections, createEdge]
   );
 
   // Handle edge type selection from picker
@@ -1305,36 +1127,6 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   // ============================================
 
   // Get first selected edge (for single-selection info panel)
-  const selectedEdgeId = useMemo(() => {
-    if (selectedEdgeIds.size === 0) return null;
-    return selectedEdgeIds.values().next().value;
-  }, [selectedEdgeIds]);
-
-  const selectedEdge = useMemo(() => {
-    if (!selectedEdgeId) return null;
-    return edges.find((e) => e.id === selectedEdgeId);
-  }, [selectedEdgeId, edges]);
-
-  const selectedEdgeTypeDefinition = useMemo(() => {
-    if (!selectedEdge) return null;
-    return configuration.edgeTypes[selectedEdge.type];
-  }, [selectedEdge, configuration.edgeTypes]);
-
-  // Get first selected node (for single-selection info panel)
-  const selectedNodeId = useMemo(() => {
-    if (selectedNodeIds.size === 0) return null;
-    return selectedNodeIds.values().next().value;
-  }, [selectedNodeIds]);
-
-  const selectedNode = useMemo(() => {
-    if (!selectedNodeId) return null;
-    return nodes.find((n) => n.id === selectedNodeId);
-  }, [selectedNodeId, nodes]);
-
-  const selectedNodeTypeDefinition = useMemo(() => {
-    if (!selectedNode) return null;
-    return configuration.nodeTypes[selectedNode.type];
-  }, [selectedNode, configuration.nodeTypes]);
 
   // ============================================
   // ANIMATIONS
@@ -1504,7 +1296,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   // Local xyflow nodes state for dragging
   const [xyflowLocalNodes, setXyflowLocalNodes] = useState<Node<CustomNodeData>[]>(xyflowNodesBase);
 
-  // Sync when base changes
+  // Sync when base node IDs change
   const prevBaseNodesKeyRef = useRef(baseNodesKey);
   useEffect(() => {
     if (prevBaseNodesKeyRef.current !== baseNodesKey) {
@@ -1513,6 +1305,22 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     }
   }, [baseNodesKey, xyflowNodesBase]);
 
+  // Sync selection state to local nodes when selectedNodeIds changes (edit mode only)
+  // Use useLayoutEffect to ensure sync happens before paint (prevents flash)
+  const prevSelectedNodeIdsRef = useRef(selectedNodeIds);
+  useLayoutEffect(() => {
+    if (!editable) return;
+    if (prevSelectedNodeIdsRef.current === selectedNodeIds) return;
+    prevSelectedNodeIdsRef.current = selectedNodeIds;
+
+    setXyflowLocalNodes((localNodes) =>
+      localNodes.map((localNode) => ({
+        ...localNode,
+        selected: selectedNodeIds.has(localNode.id),
+      }))
+    );
+  }, [editable, selectedNodeIds]);
+
   // Also sync when entering edit mode or when base nodes change content
   const prevEditableRef = useRef(editable);
   useEffect(() => {
@@ -1554,19 +1362,20 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     (changes: NodeChange[]) => {
       if (!editable) return;
 
-      setXyflowLocalNodes((nds) => applyNodeChanges(changes, nds) as Node<CustomNodeData>[]);
-
-      // Check if dragging started - hide panel when dragging starts
-      const hasDragging = changes.some(
-        (change) =>
-          change.type === 'position' &&
-          'dragging' in change &&
-          change.dragging === true
-      );
-
-      if (hasDragging) {
-        // Hide panel when dragging starts - it won't show again until an explicit click
-        setShowNodePanel(false);
+      // Filter out selection changes - we manage selection ourselves via selectedNodeIds
+      const nonSelectionChanges = changes.filter((change) => change.type !== 'select');
+
+      // Only apply changes if there are non-selection changes to apply
+      if (nonSelectionChanges.length > 0) {
+        setXyflowLocalNodes((nds) => {
+          // Apply changes but preserve our selection state
+          const updated = applyNodeChanges(nonSelectionChanges, nds) as Node<CustomNodeData>[];
+          // Restore selection state from our managed selectedNodeIds
+          return updated.map((node) => ({
+            ...node,
+            selected: selectedNodeIds.has(node.id),
+          }));
+        });
       }
 
       // Track position changes on drag end
@@ -1601,23 +1410,6 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
           change.resizing === false
       );
 
-      // Debug logging for dimension changes
-      if (process.env.NODE_ENV === 'development') {
-        const allDimensionChanges = changes.filter(c => c.type === 'dimensions');
-        if (allDimensionChanges.length > 0) {
-          console.log('[GraphRenderer] Dimension changes detected:', allDimensionChanges.map(c => ({
-            // @ts-expect-error - accessing properties for debug
-            id: c.id,
-            // @ts-expect-error - accessing properties for debug
-            dimensions: c.dimensions,
-            // @ts-expect-error - accessing properties for debug
-            resizing: c.resizing,
-            // @ts-expect-error - accessing properties for debug
-            isGroup: nodes.find(n => n.id === c.id)?.data?.canvasType === 'group'
-          })));
-        }
-      }
-
       if (dimensionChanges.length > 0) {
         updateEditState((prev) => {
           const newDimensions = new Map(prev.dimensionChanges);
@@ -1646,7 +1438,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         });
       }
     },
-    [editable, updateEditState]
+    [editable, updateEditState, selectedNodeIds]
   );
 
   const xyflowEdgesBase = useMemo(() => {
@@ -1671,18 +1463,6 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
       return true;
     });
 
-    // Debug: Log edge counts to help diagnose disappearing edges
-    if (process.env.NODE_ENV === 'development') {
-      console.log('[GraphRenderer] xyflowEdges computed:', {
-        inputEdges: edges.length,
-        convertedEdges: converted.length,
-        filteredEdges: filtered.length,
-        editable,
-        propEdgesCount: propEdges.length,
-        localEdgesCount: localEdges.length,
-      });
-    }
-
     const mappedEdges = filtered.map((edge) => {
       const animation = animationState.edgeAnimations[edge.id];
       const isSelected = selectedEdgeIds.has(edge.id);
@@ -1808,7 +1588,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     }, 150);
 
     return () => clearTimeout(timeoutId);
-  }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView, fitViewDuration, getNodes]);
+  }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView, fitViewDuration, getNodes, fitBounds]);
 
   // ============================================
   // RENDER
@@ -1831,7 +1611,8 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         onNodeDragStop={handleNodeDragStop}
         proOptions={{ hideAttribution: true }}
         nodesDraggable={editable}
-        elementsSelectable={true}
+        elementsSelectable={editable}
+        selectNodesOnDrag={false}
         nodesConnectable={editable}
         edgesReconnectable={editable}
         reconnectRadius={25}
@@ -1844,13 +1625,13 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         onReconnectEnd={handleReconnectEnd}
         onPaneClick={onPaneClick}
         onSelectionChange={handleSelectionChange}
-        panOnDrag={false}
+        panOnDrag={!editable}
         panOnScroll={true}
         zoomOnScroll={false}
         zoomOnPinch={true}
-        selectionOnDrag={true}
+        selectionOnDrag={false}
         selectionKeyCode={null}
-        multiSelectionKeyCode={null}
+        multiSelectionKeyCode="Shift"
       >
         {showBackground && (
           <Background
@@ -1884,31 +1665,6 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         )}
       </ReactFlow>
 
-      {/* Single edge info panel - shown only on explicit click */}
-      {selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && (
-        <EdgeInfoPanel
-          edge={selectedEdge}
-          typeDefinition={selectedEdgeTypeDefinition}
-          sourceNodeId={selectedEdge.from}
-          targetNodeId={selectedEdge.to}
-          onClose={onCloseEdgeInfoPanel}
-          onDelete={editable ? handleEdgeDelete : undefined}
-          onUpdateSides={editable ? handleUpdateEdgeSides : undefined}
-        />
-      )}
-
-      {/* Single node info panel - shown only on explicit click */}
-      {selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && showNodePanel && showNodeDetailPanel !== false && (
-        <NodeInfoPanel
-          node={selectedNode}
-          typeDefinition={selectedNodeTypeDefinition}
-          availableNodeTypes={configuration.nodeTypes}
-          onClose={onCloseNodeInfoPanel}
-          onDelete={editable ? handleNodeDelete : undefined}
-          onUpdate={editable ? handleNodeUpdate : undefined}
-          resolveEventRef={resolveEventRef}
-        />
-      )}
 
 
       {pendingConnection && (
@@ -2285,8 +2041,6 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
     editable,
     onPendingChangesChange,
     onNodeClick,
-    showNodeDetailPanel,
-    resolveEventRef,
     fitViewToNodeIds,
     fitViewPadding,
   } = props;
@@ -2316,8 +2070,6 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
           onPendingChangesChange={onPendingChangesChange}
           editStateRef={editStateRef}
           onNodeClick={onNodeClick}
-          showNodeDetailPanel={showNodeDetailPanel}
-          resolveEventRef={resolveEventRef}
           fitViewToNodeIds={fitViewToNodeIds}
           fitViewPadding={fitViewPadding}
         />