@principal-ai/principal-view-react 0.13.2 → 0.13.4

package/dist/components/GraphRenderer.d.ts

@@ -101,14 +101,14 @@ interface GraphRendererBaseProps {
     showBackground?: boolean;
     /**
      * Background variant style.
-     * - 'dots': Small dots pattern (default)
-     * - 'lines': Grid lines
+     * - 'dots': Small dots pattern
+     * - 'lines': Grid lines (default)
      * - 'cross': Cross pattern
      */
     backgroundVariant?: 'dots' | 'lines' | 'cross';
     /**
      * Gap between background pattern elements in pixels.
-     * Defaults to 16 for dots, 50 for lines/cross.
+     * Defaults to 50 for lines/cross, 16 for dots.
      */
     backgroundGap?: number;
     /**

package/dist/components/GraphRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/components/GraphRenderer.js

@@ -9,7 +9,6 @@ import { CustomEdge } from '../edges/CustomEdge';
 import { convertToXYFlowNodes, convertToXYFlowEdges, } from '../utils/graphConverter';
 import { EdgeInfoPanel } from './EdgeInfoPanel';
 import { NodeInfoPanel } from './NodeInfoPanel';
-import { SelectionSidebar } from './SelectionSidebar';
 // Define custom node types
 const nodeTypes = {
     custom: CustomNode,
@@ -26,6 +25,36 @@ const createEmptyEditState = () => ({
     createdEdges: [],
     deletedEdges: [],
 });
+/**
+ * Alignment guides component that renders visual lines when nodes align during drag.
+ * Shows vertical lines for horizontal alignment (left/center/right) and
+ * horizontal lines for vertical alignment (top/middle/bottom).
+ */
+const AlignmentGuidesOverlay = ({ guides, color }) => {
+    const { x: viewportX, y: viewportY, zoom } = useViewport();
+    if (guides.length === 0)
+        return null;
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            zIndex: 10,
+        }, children: guides.map((guide, index) => {
+            if (guide.type === 'vertical') {
+                // Vertical line (for horizontal alignment)
+                const screenX = guide.position * zoom + viewportX;
+                return (_jsx("line", { x1: screenX, y1: 0, x2: screenX, y2: "100%", stroke: color, strokeWidth: 1.5, strokeDasharray: "4,4", opacity: 0.8 }, `${guide.type}-${guide.position}-${index}`));
+            }
+            else {
+                // Horizontal line (for vertical alignment)
+                const screenY = guide.position * zoom + viewportY;
+                return (_jsx("line", { x1: 0, y1: screenY, x2: "100%", y2: screenY, stroke: color, strokeWidth: 1.5, strokeDasharray: "4,4", opacity: 0.8 }, `${guide.type}-${guide.position}-${index}`));
+            }
+        }) }));
+};
 /**
  * Center indicator component that shows a crosshair at the canvas origin (0,0).
  * Uses viewport transform to position correctly regardless of pan/zoom.
@@ -51,12 +80,14 @@ const CenterIndicator = ({ color }) => {
 /**
  * Inner component that uses ReactFlow hooks
  */
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'dots', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, showNodeDetailPanel, resolveEventRef, }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'lines', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, showNodeDetailPanel, resolveEventRef, }) => {
     const { fitView } = useReactFlow();
     const updateNodeInternals = useUpdateNodeInternals();
     const { theme } = useTheme();
     // Track shift key state for tooltip control
     const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
+    // Track if we're currently processing a node hide operation
+    const hidingNodeRef = useRef(false);
     // Setup keyboard event listeners for shift key
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -81,6 +112,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         nodeAnimations: {},
         edgeAnimations: {},
     });
+    // Track alignment guides during drag operations
+    const [alignmentGuides, setAlignmentGuides] = useState([]);
     // Track selected edges for info panel (supports multi-select)
     const [selectedEdgeIds, setSelectedEdgeIds] = useState(new Set());
     // Track selected nodes for info panel (supports multi-select)
@@ -88,6 +121,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // 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(new Set());
     // Track pending connection for edge type picker
     const [pendingConnection, setPendingConnection] = useState(null);
     // Sync highlightedNodeId to selection state so info panel shows
@@ -181,6 +216,63 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         onPendingChangesChange?.(hasChanges);
     }, [editStateRef, onEditStateChange, onPendingChangesChange, checkHasChanges]);
     // ============================================
+    // ALIGNMENT GUIDES
+    // ============================================
+    /**
+     * Detect alignment guides between a dragging node and other nodes
+     * @param draggingNodeId - ID of the node being dragged
+     * @param nodes - All nodes in the graph
+     * @returns Array of alignment guides to display
+     */
+    const detectAlignmentGuides = useCallback((draggingNodeId, nodes) => {
+        const threshold = 5; // pixels - how close to snap/show guide
+        const guides = [];
+        const draggingNode = nodes.find((n) => n.id === draggingNodeId);
+        if (!draggingNode)
+            return guides;
+        const dragLeft = draggingNode.position.x;
+        const dragRight = draggingNode.position.x + (draggingNode.width ?? 0);
+        const dragCenterX = draggingNode.position.x + (draggingNode.width ?? 0) / 2;
+        const dragTop = draggingNode.position.y;
+        const dragBottom = draggingNode.position.y + (draggingNode.height ?? 0);
+        const dragCenterY = draggingNode.position.y + (draggingNode.height ?? 0) / 2;
+        // Check alignment with other nodes
+        for (const node of nodes) {
+            if (node.id === draggingNodeId)
+                continue;
+            const nodeLeft = node.position.x;
+            const nodeRight = node.position.x + (node.width ?? 0);
+            const nodeCenterX = node.position.x + (node.width ?? 0) / 2;
+            const nodeTop = node.position.y;
+            const nodeBottom = node.position.y + (node.height ?? 0);
+            const nodeCenterY = node.position.y + (node.height ?? 0) / 2;
+            // Vertical guides (align horizontally - left/center/right)
+            if (Math.abs(dragLeft - nodeLeft) < threshold) {
+                guides.push({ type: 'vertical', position: nodeLeft, label: 'Left' });
+            }
+            else if (Math.abs(dragCenterX - nodeCenterX) < threshold) {
+                guides.push({ type: 'vertical', position: nodeCenterX, label: 'Center' });
+            }
+            else if (Math.abs(dragRight - nodeRight) < threshold) {
+                guides.push({ type: 'vertical', position: nodeRight, label: 'Right' });
+            }
+            // Horizontal guides (align vertically - top/middle/bottom)
+            if (Math.abs(dragTop - nodeTop) < threshold) {
+                guides.push({ type: 'horizontal', position: nodeTop, label: 'Top' });
+            }
+            else if (Math.abs(dragCenterY - nodeCenterY) < threshold) {
+                guides.push({ type: 'horizontal', position: nodeCenterY, label: 'Middle' });
+            }
+            else if (Math.abs(dragBottom - nodeBottom) < threshold) {
+                guides.push({ type: 'horizontal', position: nodeBottom, label: 'Bottom' });
+            }
+        }
+        // Remove duplicates (same position guides)
+        const uniqueGuides = guides.filter((guide, index, self) => index ===
+            self.findIndex((g) => g.type === guide.type && g.position === guide.position));
+        return uniqueGuides;
+    }, []);
+    // ============================================
     // EVENT HANDLERS
     // ============================================
     // Handle edge click (toggle selection, supports Shift for multi-select)
@@ -214,21 +306,34 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             setShowNodePanel(false);
         }
     }, [editable, selectedEdgeIds]);
-    // Handle node click (toggle selection, supports Shift for multi-select)
+    // Handle node click (toggle selection, supports Cmd/Ctrl for hide/dim)
     const onNodeClick = useCallback((event, node) => {
-        // 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;
-            }
+        // Cmd+click (Mac) or Ctrl+click (Windows/Linux): toggle node visibility (hide edges and dim node)
+        if (event.metaKey || event.ctrlKey) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Mark that we're hiding a node to prevent ReactFlow's selection change
+            hidingNodeRef.current = true;
+            setHiddenNodeIds((prev) => {
+                const next = new Set(prev);
+                if (next.has(node.id)) {
+                    next.delete(node.id);
+                }
+                else {
+                    next.add(node.id);
+                }
+                return next;
+            });
+            // Reset the flag after state update completes
+            setTimeout(() => {
+                hidingNodeRef.current = false;
+            }, 0);
+            return;
         }
-        // Always update selection state for visual feedback (even in read-only mode)
-        if (event.shiftKey && editable) {
-            // Shift+click: toggle node in selection
+        // Shift+click: toggle node in selection (add/remove from multi-select)
+        if (event.shiftKey) {
+            event.preventDefault();
+            event.stopPropagation();
             setSelectedNodeIds((prev) => {
                 const next = new Set(prev);
                 if (next.has(node.id)) {
@@ -237,29 +342,56 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 else {
                     next.add(node.id);
                 }
+                // Also update local nodes selection state immediately
+                if (editable) {
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => ({
+                        ...n,
+                        selected: n.id === node.id ? !prev.has(node.id) : next.has(n.id),
+                    })));
+                }
                 return next;
             });
-            if (shouldShowPanel) {
-                setShowNodePanel(true);
+            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)
+        const shouldDeselect = selectedNodeIds.size === 1 && selectedNodeIds.has(node.id);
+        if (shouldDeselect) {
+            setSelectedNodeIds(new Set());
+            setShowNodePanel(false);
+            // Also update local nodes selection state immediately
+            if (editable) {
+                setXyflowLocalNodes((nodes) => nodes.map((n) => ({
+                    ...n,
+                    selected: false,
+                })));
             }
         }
         else {
-            // Regular click: single select (replace selection)
-            const shouldDeselect = selectedNodeIds.size === 1 && selectedNodeIds.has(node.id);
-            if (shouldDeselect) {
-                setSelectedNodeIds(new Set());
-                setShowNodePanel(false);
+            setSelectedNodeIds(new Set([node.id]));
+            if (shouldShowPanel) {
+                setShowNodePanel(true);
             }
-            else {
-                setSelectedNodeIds(new Set([node.id]));
-                if (shouldShowPanel) {
-                    setShowNodePanel(true);
-                }
+            // Also update local nodes selection state immediately
+            if (editable) {
+                setXyflowLocalNodes((nodes) => nodes.map((n) => ({
+                    ...n,
+                    selected: n.id === node.id,
+                })));
             }
-            setSelectedEdgeIds(new Set());
-            setShowEdgePanel(false);
         }
-    }, [editable, selectedNodeIds, onNodeClickProp, showNodeDetailPanel]);
+        setSelectedEdgeIds(new Set());
+        setShowEdgePanel(false);
+    }, [selectedNodeIds, onNodeClickProp, showNodeDetailPanel, editable]);
     // Handle close edge info panel
     const onCloseEdgeInfoPanel = useCallback(() => {
         setSelectedEdgeIds(new Set());
@@ -292,6 +424,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, []);
     // Handle selection change from ReactFlow (box selection and clicks)
     const handleSelectionChange = useCallback(({ nodes: selectedNodes, edges: selectedEdges }) => {
+        // Ignore selection changes when we're hiding a node
+        if (hidingNodeRef.current) {
+            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)));
@@ -741,6 +877,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                     shiftKeyPressed,
                     isHighlighted: highlightedNodeId === node.id,
                     isActive: !activeNodeIds || activeNodeIds.length === 0 || activeNodeIds.includes(node.id),
+                    isHidden: hiddenNodeIds.has(node.id),
                     ...(animation
                         ? {
                             animationType: animation.type,
@@ -750,7 +887,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 },
             };
         });
-    }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds]);
+    }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds]);
     const baseNodesKey = useMemo(() => {
         return nodes
             .map((n) => n.id)
@@ -790,6 +927,17 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         prevEditableRef.current = editable;
     }, [editable, xyflowNodesBase, updateNodeInternals]);
     const xyflowNodes = editable ? xyflowLocalNodes : xyflowNodesBase;
+    // Handle node drag to show alignment guides
+    const handleNodeDrag = useCallback((_event, node) => {
+        if (!editable)
+            return;
+        const guides = detectAlignmentGuides(node.id, xyflowNodes);
+        setAlignmentGuides(guides);
+    }, [editable, xyflowNodes, detectAlignmentGuides]);
+    // Clear guides when drag ends
+    const handleNodeDragStop = useCallback(() => {
+        setAlignmentGuides([]);
+    }, []);
     // Handle node changes (drag and resize events)
     const handleNodesChange = useCallback((changes) => {
         if (!editable)
@@ -860,14 +1008,22 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, [editable, updateEditState]);
     const xyflowEdgesBase = useMemo(() => {
         const converted = convertToXYFlowEdges(edges, configuration, violations);
-        // Filter out edges connected to inactive nodes
-        const filtered = activeNodeIds && activeNodeIds.length > 0
-            ? converted.filter(edge => {
+        // Filter out edges connected to inactive or hidden nodes
+        const filtered = converted.filter(edge => {
+            // Filter by hidden nodes (shift-clicked)
+            const sourceHidden = hiddenNodeIds.has(edge.source);
+            const targetHidden = hiddenNodeIds.has(edge.target);
+            if (sourceHidden || targetHidden) {
+                return false;
+            }
+            // Filter by active nodes (scenario playback)
+            if (activeNodeIds && activeNodeIds.length > 0) {
                 const sourceActive = activeNodeIds.includes(edge.source);
                 const targetActive = activeNodeIds.includes(edge.target);
                 return sourceActive && targetActive;
-            })
-            : converted;
+            }
+            return true;
+        });
         // Debug: Log edge counts to help diagnose disappearing edges
         if (process.env.NODE_ENV === 'development') {
             console.log('[GraphRenderer] xyflowEdges computed:', {
@@ -910,7 +1066,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 return -1; // b comes after a (rendered on top)
             return 0; // maintain original order
         });
-    }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed, activeNodeIds]);
+    }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed, activeNodeIds, hiddenNodeIds]);
     // Local xyflow edges state for reconnection
     const [xyflowLocalEdges, setXyflowLocalEdges] = useState(xyflowEdgesBase);
     // Sync when base edges change (structure changes like add/remove)
@@ -945,14 +1101,14 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // ============================================
     // RENDER
     // ============================================
-    return (_jsxs(_Fragment, { children: [_jsxs(ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: true, selectionOnDrag: false, selectionKeyCode: editable ? 'Shift' : null, multiSelectionKeyCode: "Shift", children: [showBackground && (_jsx(Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
+    return (_jsxs(_Fragment, { children: [_jsxs(ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: false, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, selectionOnDrag: true, selectionKeyCode: null, multiSelectionKeyCode: null, children: [showBackground && (_jsx(Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
                             ? BackgroundVariant.Dots
                             : backgroundVariant === 'lines'
                                 ? BackgroundVariant.Lines
                                 : BackgroundVariant.Cross })), showControls && _jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (_jsx(MiniMap, { nodeColor: (node) => {
                             const nodeData = node.data;
                             return nodeData?.typeDefinition?.color || theme.colors.secondary;
-                        }, nodeBorderRadius: 2, pannable: true, zoomable: true })), showCenterIndicator && _jsx(CenterIndicator, { color: theme.colors.textMuted })] }, `${baseNodesKey}-${baseEdgesKey}`), selectedNodeIds.size >= 2 && showNodePanel && showNodeDetailPanel !== false && (_jsx(SelectionSidebar, { selectedNodeIds: selectedNodeIds, nodes: nodes, nodeTypeDefinitions: configuration.nodeTypes, onClose: onCloseNodeInfoPanel })), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && (_jsx(EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : undefined, onUpdateSides: editable ? handleUpdateEdgeSides : undefined })), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && showNodePanel && showNodeDetailPanel !== false && (_jsx(NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : undefined, onUpdate: editable ? handleNodeUpdate : undefined, resolveEventRef: resolveEventRef })), pendingConnection && (_jsxs("div", { style: {
+                        }, nodeBorderRadius: 2, pannable: true, zoomable: true })), showCenterIndicator && _jsx(CenterIndicator, { color: theme.colors.textMuted }), editable && alignmentGuides.length > 0 && (_jsx(AlignmentGuidesOverlay, { guides: alignmentGuides, color: theme.colors.primary }))] }, `${baseNodesKey}-${baseEdgesKey}`), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && (_jsx(EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : undefined, onUpdateSides: editable ? handleUpdateEdgeSides : undefined })), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && showNodePanel && showNodeDetailPanel !== false && (_jsx(NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : undefined, onUpdate: editable ? handleNodeUpdate : undefined, resolveEventRef: resolveEventRef })), pendingConnection && (_jsxs("div", { style: {
                     position: 'absolute',
                     top: '50%',
                     left: '50%',