@principal-ai/principal-view-react 0.7.20 → 0.7.22

package/src/components/GraphRenderer.tsx

@@ -15,6 +15,7 @@ import {
   MiniMap,
   ReactFlowProvider,
   useReactFlow,
+  useUpdateNodeInternals,
   useViewport,
   applyNodeChanges,
   applyEdgeChanges,
@@ -368,8 +369,34 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   onSourceClick,
 }) => {
   const { fitView } = useReactFlow();
+  const updateNodeInternals = useUpdateNodeInternals();
   const { theme } = useTheme();
 
+  // Track shift key state for tooltip control
+  const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
+
+  // Setup keyboard event listeners for shift key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        setShiftKeyPressed(true);
+      }
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        setShiftKeyPressed(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
 
   // Track active animations
   const [animationState, setAnimationState] = useState<AnimationState>({
@@ -848,20 +875,21 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
       const originalEdge = localEdges.find((e) => e.id === oldEdge.id);
       if (!originalEdge) return;
 
-      // Find source and target node types for validation
+      // Find source and target nodes for validation
       const sourceNode = nodes.find((n) => n.id === newConnection.source);
       const targetNode = nodes.find((n) => n.id === newConnection.target);
       if (!sourceNode || !targetNode) return;
 
       // Check if the new connection is valid for this edge type
+      // Note: allowedConnections uses node IDs as the from/to values
       const isValidConnection = configuration.allowedConnections.some(
         (ac) =>
-          ac.from === sourceNode.type && ac.to === targetNode.type && ac.via === originalEdge.type
+          ac.from === sourceNode.id && ac.to === targetNode.id && ac.via === originalEdge.type
       );
 
       if (!isValidConnection) {
         console.warn(
-          `Cannot reconnect: ${originalEdge.type} edge not allowed from ${sourceNode.type} to ${targetNode.type}`
+          `Cannot reconnect: ${originalEdge.type} edge not allowed from ${sourceNode.id} to ${targetNode.id}`
         );
         return;
       }
@@ -1137,6 +1165,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
           ...node.data,
           editable,
           tooltipsEnabled: showTooltips,
+          shiftKeyPressed,
           isHighlighted: highlightedNodeId === node.id,
           ...(animation
             ? {
@@ -1147,7 +1176,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         } as CustomNodeData,
       };
     });
-  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, editStateRef]);
+  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, editStateRef, shiftKeyPressed]);
 
   const baseNodesKey = useMemo(() => {
     return nodes
@@ -1181,9 +1210,17 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
     if (editable && !prevEditableRef.current) {
       // Entering edit mode - sync positions
       setXyflowLocalNodes(xyflowNodesBase);
+
+      // Reset ReactFlow's internal state for all nodes to prevent NaN errors
+      // This ensures ReactFlow remeasures nodes and updates drag tracking
+      setTimeout(() => {
+        xyflowNodesBase.forEach((node) => {
+          updateNodeInternals(node.id);
+        });
+      }, 0);
     }
     prevEditableRef.current = editable;
-  }, [editable, xyflowNodesBase]);
+  }, [editable, xyflowNodesBase, updateNodeInternals]);
 
   const xyflowNodes = editable ? xyflowLocalNodes : xyflowNodesBase;
 
@@ -1292,6 +1329,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         data: {
           ...edge.data,
           tooltipsEnabled: showTooltips,
+          shiftKeyPressed,
           ...(animation
             ? {
                 animationType: animation.type,
@@ -1313,7 +1351,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
       if (!aSelected && bSelected) return -1; // b comes after a (rendered on top)
       return 0; // maintain original order
     });
-  }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds]);
+  }, [edges, configuration, violations, animationState.edgeAnimations, showTooltips, selectedEdgeIds, shiftKeyPressed]);
 
   // Local xyflow edges state for reconnection
   const [xyflowLocalEdges, setXyflowLocalEdges] = useState<Edge<CustomEdgeData>[]>(xyflowEdgesBase);
@@ -1656,15 +1694,10 @@ function useCanvasToLegacy(
         };
       }
 
-      // Find node types for from/to
-      const fromNode = canvas.nodes?.find((n) => n.id === edge.fromNode);
-      const toNode = canvas.nodes?.find((n) => n.id === edge.toNode);
-      const fromType = fromNode?.pv?.nodeType || edge.fromNode;
-      const toType = toNode?.pv?.nodeType || edge.toNode;
-
+      // Store allowed connections using node IDs
       allowedConnections.push({
-        from: fromType,
-        to: toType,
+        from: edge.fromNode,
+        to: edge.toNode,
         via: edgeType,
       });
     }

package/src/components/NodeTooltip.tsx

@@ -42,9 +42,6 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
 
   if (!visible) return null;
 
-  // Don't show tooltip if no useful info
-  if (!description && !otel) return null;
-
   // If no nodeRef, render inline (for storybook demos)
   const usePortal = Boolean(nodeRef);
 
@@ -156,9 +153,9 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
       )}
 
       {/* Description */}
-      {description && (
-        <div style={{ lineHeight: '1.4', color: 'rgba(255,255,255,0.9)' }}>{description}</div>
-      )}
+      <div style={{ lineHeight: '1.4', color: description ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.5)' }}>
+        {description || 'No description'}
+      </div>
     </div>
   );
 

package/src/edges/CustomEdge.tsx

@@ -14,6 +14,8 @@ export interface CustomEdgeData extends Record<string, unknown> {
   animationDirection?: 'forward' | 'backward' | 'bidirectional';
   // Whether tooltips are enabled (defaults to true)
   tooltipsEnabled?: boolean;
+  // Whether shift key is currently pressed (for tooltip control)
+  shiftKeyPressed?: boolean;
 }
 
 /**
@@ -42,6 +44,7 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
     animationDuration = 1000,
     animationDirection = 'forward',
     tooltipsEnabled = true,
+    shiftKeyPressed = false,
   } = edgeProps || ({} as CustomEdgeData);
 
   const [particlePosition, setParticlePosition] = useState(0);
@@ -285,8 +288,8 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
         </EdgeLabelRenderer>
       )}
 
-      {/* Hover tooltip showing edge type */}
-      {tooltipsEnabled && isHovered && (
+      {/* Hover tooltip showing edge type - only shown when shift key is pressed */}
+      {tooltipsEnabled && isHovered && shiftKeyPressed && (
         <EdgeLabelRenderer>
           <div
             style={{

package/src/nodes/CustomNode.tsx

@@ -45,6 +45,8 @@ export interface CustomNodeData extends Record<string, unknown> {
   editable?: boolean;
   // Whether tooltips are enabled (defaults to true)
   tooltipsEnabled?: boolean;
+  // Whether shift key is currently pressed (for tooltip control)
+  shiftKeyPressed?: boolean;
   // Whether this node is highlighted (e.g., during execution playback)
   isHighlighted?: boolean;
 }
@@ -55,9 +57,6 @@ export interface CustomNodeData extends Record<string, unknown> {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging }) => {
   const [isHovered, setIsHovered] = useState(false);
-
-  // Don't show tooltip while dragging
-  const showTooltip = isHovered && !dragging;
   const nodeRef = useRef<HTMLDivElement>(null);
   const nodeProps = data as CustomNodeData;
   const {
@@ -69,9 +68,13 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
     animationDuration = 1000,
     editable = false,
     tooltipsEnabled = true,
+    shiftKeyPressed = false,
     isHighlighted = false,
   } = nodeProps;
 
+  // Only show tooltip when hovering, not dragging, and shift key is pressed
+  const showTooltip = isHovered && !dragging && shiftKeyPressed;
+
   // Extract OTEL info and description for tooltip
   const otelInfo = nodeData?.otel as OtelInfo | undefined;
   const description = nodeData?.description as string | undefined;

package/src/stories/CanvasEdgeTypes.stories.tsx

@@ -981,3 +981,315 @@ export const EdgeFieldsReference: Story = {
     },
   },
 };
+
+/**
+ * Canvas showing edge reconnection scenario from admin-dashboard
+ * Tests moving an edge from left to right of the same node
+ */
+const edgeReconnectionCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'client-components',
+      type: 'text' as const,
+      x: 100,
+      y: 200,
+      width: 200,
+      height: 100,
+      text: 'Client Components\n\nReact Query\nURL state (nuqs)\nReal-time updates',
+      color: '#06B6D4',
+    },
+    {
+      id: 'api-routes',
+      type: 'text' as const,
+      x: 400,
+      y: 200,
+      width: 220,
+      height: 180,
+      text: 'API Routes Layer\n\n• /api/otel/*\n• /api/dashboards/*\n• /api/teams/*\n• /api/github/*\n• /api/sentry/*\n• /api/billing/*\n• /api/bug-fix-agent/*',
+      color: '#F59E0B',
+    },
+    {
+      id: 'pages-layer',
+      type: 'text' as const,
+      x: 700,
+      y: 100,
+      width: 220,
+      height: 180,
+      text: 'Pages Layer\n\n• Dashboard (/, /dashboards)\n• Sessions (/sessions)\n• Events (/events)\n• Teams (/teams)\n• Integrations (/integrations)\n• Billing (/billing)',
+      color: '#10B981',
+    },
+  ],
+  edges: [
+    {
+      id: 'e8',
+      fromNode: 'client-components',
+      toNode: 'api-routes',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'React Query',
+      pv: {
+        edgeType: 'httpRest',
+      },
+    },
+    {
+      id: 'e4',
+      fromNode: 'pages-layer',
+      toNode: 'api-routes',
+      fromSide: 'left',
+      toSide: 'right',
+      label: 'SSR',
+      pv: {
+        edgeType: 'httpRest',
+      },
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Edge Reconnection Test - Admin Dashboard Scenario',
+    description: 'Reproduces the httpRest edge reconnection issue when moving edge from left to right of same node',
+    edgeTypes: {
+      httpRest: {
+        style: 'solid',
+        color: '#3b82f6',
+        directed: true,
+      },
+    },
+  },
+};
+
+export const EdgeReconnectionScenario: Story = {
+  args: {
+    canvas: edgeReconnectionCanvas,
+    width: 1100,
+    height: 500,
+    editable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Edge Reconnection Test - Admin Dashboard Scenario**
+
+This story reproduces the issue from the admin-dashboard.canvas file where:
+
+1. We have text nodes connected by httpRest edges
+2. Edge e8 connects client-components → api-routes (left → right)
+3. Edge e4 connects pages-layer → api-routes (left → right)
+
+**To Test the Bug:**
+Try to reconnect edge e8 or e4 to different sides of the api-routes node.
+You may see the error: "Cannot reconnect: httpRest edge not allowed from text to text"
+
+**Root Cause:**
+The validation checks \`allowedConnections\` which is built from existing edges.
+When nodes don't have \`pv.nodeType\`, the system uses node IDs instead of node types,
+causing validation to fail when reconnecting edges between different node pairs.
+
+**Expected Behavior:**
+Edges with edgeType "httpRest" should be allowed to reconnect between any text nodes,
+regardless of which specific nodes are connected.
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Full Admin Dashboard canvas data for comprehensive testing
+ * Includes multiple httpRest edges and various node types
+ */
+const adminDashboardFullCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'user-browser',
+      type: 'text' as const,
+      text: 'User Browser\n\nNext.js 16 React App',
+      x: 92,
+      y: 374,
+      width: 180,
+      height: 80,
+      color: '#3B82F6',
+    },
+    {
+      id: 'pages-layer',
+      type: 'text' as const,
+      text: 'Pages Layer\n\n• Dashboard (/, /dashboards)\n• Sessions (/sessions)\n• Events (/events)',
+      x: 400,
+      y: 100,
+      width: 220,
+      height: 180,
+      color: '#10B981',
+    },
+    {
+      id: 'api-routes',
+      type: 'text' as const,
+      text: 'API Routes Layer\n\n• /api/otel/*\n• /api/dashboards/*\n• /api/teams/*\n• /api/github/*',
+      x: 400,
+      y: 320,
+      width: 220,
+      height: 180,
+      color: '#F59E0B',
+    },
+    {
+      id: 'server-components',
+      type: 'text' as const,
+      text: 'Server Components\n\nSSR data fetching\nDirect DB queries',
+      x: 700,
+      y: 63,
+      width: 200,
+      height: 100,
+      color: '#06B6D4',
+    },
+    {
+      id: 'client-components',
+      type: 'text' as const,
+      text: 'Client Components\n\nReact Query\nURL state (nuqs)',
+      x: 700,
+      y: 230,
+      width: 200,
+      height: 100,
+      color: '#06B6D4',
+    },
+    {
+      id: 'postgresql',
+      type: 'text' as const,
+      text: 'PostgreSQL\n\nDrizzle ORM\nUsers, orgs, teams',
+      x: 1000,
+      y: 124,
+      width: 200,
+      height: 120,
+      color: '#336791',
+    },
+  ],
+  edges: [
+    {
+      id: 'e2',
+      fromNode: 'user-browser',
+      toNode: 'pages-layer',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'Navigate',
+      pv: { edgeType: 'httpRest' },
+    },
+    {
+      id: 'e3',
+      fromNode: 'user-browser',
+      toNode: 'api-routes',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'API calls',
+      pv: { edgeType: 'httpRest' },
+    },
+    {
+      id: 'e4',
+      fromNode: 'pages-layer',
+      toNode: 'server-components',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'SSR',
+      pv: { edgeType: 'httpRest' },
+    },
+    {
+      id: 'e5',
+      fromNode: 'pages-layer',
+      toNode: 'client-components',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'Hydrate',
+      pv: { edgeType: 'httpRest' },
+    },
+    {
+      id: 'e6',
+      fromNode: 'server-components',
+      toNode: 'postgresql',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'Drizzle ORM',
+      pv: { edgeType: 'postgresQuery' },
+    },
+    {
+      id: 'e8',
+      fromNode: 'client-components',
+      toNode: 'api-routes',
+      fromSide: 'left',
+      toSide: 'right',
+      label: 'React Query',
+      pv: { edgeType: 'httpRest' },
+    },
+    {
+      id: 'e9',
+      fromNode: 'api-routes',
+      toNode: 'postgresql',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'Drizzle ORM',
+      pv: { edgeType: 'postgresQuery' },
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Admin Dashboard Architecture (Simplified)',
+    description: 'Simplified version of admin-dashboard.canvas to test edge reconnection issues',
+    edgeTypes: {
+      httpRest: {
+        style: 'solid',
+        color: '#3b82f6',
+        directed: true,
+      },
+      postgresQuery: {
+        style: 'solid',
+        color: '#336791',
+        directed: true,
+      },
+    },
+  },
+};
+
+export const AdminDashboardFull: Story = {
+  args: {
+    canvas: adminDashboardFullCanvas,
+    width: 1400,
+    height: 650,
+    editable: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Full Admin Dashboard Architecture Test**
+
+This is a simplified version of the actual admin-dashboard.canvas file from /Users/griever/Developer/observability.
+
+**Key Test Cases:**
+
+1. **Edge e8 (client-components → api-routes)**:
+   - Currently connects from LEFT side of client-components to RIGHT side of api-routes
+   - Try dragging the edge handle to connect from RIGHT side instead
+   - Expected: Should work seamlessly
+   - Actual: May fail with "Cannot reconnect: httpRest edge not allowed from text to text"
+
+2. **Multiple httpRest edges**:
+   - Notice that e2, e3, e4, e5, and e8 all use edgeType "httpRest"
+   - They connect various text nodes together
+   - Try reconnecting any of these edges to different nodes or different sides
+
+3. **Mixed edge types**:
+   - Some edges use "httpRest", others use "postgresQuery"
+   - This tests that the validation correctly distinguishes between different edge types
+
+**The Issue:**
+The \`allowedConnections\` array is built by mapping each edge to its specific source and target node IDs.
+This means edge e8's allowed connection is registered as:
+\`\`\`
+{ from: "client-components", to: "api-routes", via: "httpRest" }
+\`\`\`
+
+When you try to reconnect this edge to a different node pair (even with the same node types),
+the validation fails because it's checking node IDs, not node types.
+
+**Enable editing mode** to test the reconnection behavior.
+        `,
+      },
+    },
+  },
+};

package/src/stories/GraphRenderer.stories.tsx

@@ -1075,3 +1075,109 @@ Color coding:
     },
   },
 };
+
+const EditModeToggleTemplate = () => {
+  const [isEditMode, setIsEditMode] = React.useState(false);
+  const graphRef = React.useRef<GraphRendererHandle>(null);
+  const [hasChanges, setHasChanges] = React.useState(false);
+
+  const handleSave = () => {
+    if (graphRef.current) {
+      const changes = graphRef.current.getPendingChanges();
+      console.log('Saving changes:', changes);
+      alert('Changes saved! Check console for details.');
+      graphRef.current.resetEditState();
+    }
+  };
+
+  return (
+    <div>
+      <div
+        style={{
+          marginBottom: 16,
+          padding: 12,
+          backgroundColor: '#f0f9ff',
+          borderRadius: 4,
+          border: '1px solid #3b82f6',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <button
+            onClick={() => setIsEditMode(!isEditMode)}
+            style={{
+              padding: '8px 16px',
+              backgroundColor: isEditMode ? '#ef4444' : '#3b82f6',
+              color: 'white',
+              border: 'none',
+              borderRadius: 4,
+              cursor: 'pointer',
+              fontWeight: 'bold',
+              fontSize: 14,
+            }}
+          >
+            {isEditMode ? '🔓 Exit Edit Mode' : '🔒 Enter Edit Mode'}
+          </button>
+          {isEditMode && hasChanges && (
+            <button
+              onClick={handleSave}
+              style={{
+                padding: '8px 16px',
+                backgroundColor: '#10b981',
+                color: 'white',
+                border: 'none',
+                borderRadius: 4,
+                cursor: 'pointer',
+                fontWeight: 'bold',
+                fontSize: 14,
+              }}
+            >
+              💾 Save Changes
+            </button>
+          )}
+          <div style={{ fontSize: 13, color: '#1e40af' }}>
+            Mode: <strong>{isEditMode ? 'Editable' : 'Read-only'}</strong>
+            {isEditMode && hasChanges && (
+              <span style={{ marginLeft: 8, color: '#f97316', fontWeight: 'bold' }}>
+                (unsaved changes)
+              </span>
+            )}
+          </div>
+        </div>
+        <div style={{ marginTop: 8, fontSize: 12, color: '#475569' }}>
+          Toggle between read-only and edit mode. Try dragging nodes after switching modes to verify
+          the NaN error fix.
+        </div>
+      </div>
+      <GraphRenderer
+        ref={graphRef}
+        canvas={sampleCanvas}
+        width={800}
+        height={500}
+        editable={isEditMode}
+        onPendingChangesChange={setHasChanges}
+      />
+    </div>
+  );
+};
+
+export const EditModeToggle: Story = {
+  render: () => <EditModeToggleTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Edit Mode Toggle** - Demonstrates toggling between read-only and editable modes without remounting.
+
+This story tests the fix for the NaN coordinate error that occurred when transitioning between modes:
+- Click "Enter Edit Mode" to enable editing
+- Try dragging nodes (should work without NaN errors)
+- Click "Exit Edit Mode" to return to read-only
+- Toggle back to edit mode and drag again (should still work)
+
+Previously, this would cause \`NaN\` errors in edge coordinates due to ReactFlow's internal state corruption.
+The fix uses \`updateNodeInternals()\` to reset ReactFlow's measurement tracking when entering edit mode.
+        `,
+      },
+    },
+  },
+};