@principal-ai/principal-view-react 0.14.30 → 0.14.31

package/src/components/SequenceDiagramRenderer.tsx

@@ -36,42 +36,74 @@ import {
 
 /**
  * Minimal marker node for arrow-centric sequence diagrams
- * Invisible - just used for positioning, all rendering done by edges
- * Shows a visual indicator when selected
+ * Invisible - just used for positioning, selection is shown on edge labels
+ * Can optionally show a label for better clickability
  */
 function SequenceMarkerNode({ data, selected }: NodeProps) {
   const { theme } = useTheme();
+  const showLabel = data.showEventLabels === true; // Only show if explicitly enabled
+  const label = data.label as string | undefined;
 
+  // If labels are shown on nodes, render them
+  if (showLabel && label) {
+    return (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          cursor: 'pointer',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        title={data.fullName as string}
+      >
+        <div
+          style={{
+            padding: '6px 12px',
+            background: selected ? theme.colors.primary : theme.colors.background,
+            color: selected ? theme.colors.background : theme.colors.text,
+            border: `2px solid ${selected ? theme.colors.primary : theme.colors.border}`,
+            borderRadius: 4,
+            fontSize: theme.fontSizes[1],
+            fontWeight: selected ? theme.fontWeights.bold : theme.fontWeights.medium,
+            fontFamily: theme.fonts.body,
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            userSelect: 'none',
+            transition: 'all 0.2s ease',
+            boxShadow: selected ? `0 2px 8px ${theme.colors.primary}40` : 'none',
+          }}
+        >
+          {label}
+        </div>
+        <Handle
+          type="target"
+          position={Position.Top}
+          style={{ visibility: 'hidden' }}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={{ visibility: 'hidden' }}
+        />
+      </div>
+    );
+  }
+
+  // Default: invisible node (selection shown on edge labels)
   return (
     <div
       style={{
         width: '100%',
         height: '100%',
         opacity: 0,
-        position: 'relative',
+        cursor: 'pointer',
       }}
       title={data.fullName as string}
     >
-      {/* Show indicator when selected */}
-      {selected && (
-        <div
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: '12px',
-            height: '12px',
-            borderRadius: '50%',
-            backgroundColor: theme.colors.primary,
-            border: `2px solid ${theme.colors.background}`,
-            boxShadow: `0 0 0 2px ${theme.colors.primary}40`,
-            opacity: 1,
-            zIndex: 10,
-            pointerEvents: 'none',
-          }}
-        />
-      )}
       <Handle
         type="target"
         position={Position.Top}
@@ -104,6 +136,7 @@ function SequenceArrowEdge({
 
   // Use a straight line for same-lane, bezier for cross-lane
   const isSameLane = !data?.crossesLanes;
+  const isSourceSelected = data?.isSourceSelected === true;
 
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -132,16 +165,19 @@ function SequenceArrowEdge({
             style={{
               position: 'absolute',
               transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-              background: theme.colors.background,
-              padding: '2px 8px',
+              background: isSourceSelected ? theme.colors.primary : theme.colors.background,
+              padding: isSourceSelected ? '4px 10px' : '2px 8px',
               borderRadius: 4,
               fontSize: theme.fontSizes[0],
-              fontWeight: theme.fontWeights.medium,
+              fontWeight: isSourceSelected ? theme.fontWeights.bold : theme.fontWeights.medium,
               fontFamily: theme.fonts.body,
-              color: theme.colors.text,
-              border: `1px solid ${theme.colors.border}`,
+              color: isSourceSelected ? theme.colors.background : theme.colors.text,
+              border: `${isSourceSelected ? 2 : 1}px solid ${isSourceSelected ? theme.colors.primary : theme.colors.border}`,
               pointerEvents: 'all',
               whiteSpace: 'nowrap',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              boxShadow: isSourceSelected ? `0 2px 8px ${theme.colors.primary}60` : 'none',
             }}
             className="nodrag nopan"
           >
@@ -178,6 +214,7 @@ function SequenceArrowParticipantEdge({
 
   // Style based on whether it's a move event (IPC) or transform event (internal)
   const isMoveEvent = data?.isMoveEvent === true;
+  const isSourceSelected = data?.isSourceSelected === true;
   const strokeColor = isMoveEvent ? (theme.colors.accent || '#f48771') : theme.colors.primary;
 
   // Same lane: render as activation bar
@@ -224,16 +261,19 @@ function SequenceArrowParticipantEdge({
               style={{
                 position: 'absolute',
                 transform: `translate(0, -50%) translate(${sourceX + 15}px,${barY + barHeight / 2}px)`,
-                background: theme.colors.background,
-                padding: '2px 8px',
+                background: isSourceSelected ? strokeColor : theme.colors.background,
+                padding: isSourceSelected ? '4px 10px' : '2px 8px',
                 borderRadius: 4,
                 fontSize: theme.fontSizes[0],
-                fontWeight: theme.fontWeights.medium,
+                fontWeight: isSourceSelected ? theme.fontWeights.bold : theme.fontWeights.medium,
                 fontFamily: theme.fonts.body,
-                color: strokeColor,
-                border: `1px solid ${strokeColor}`,
+                color: isSourceSelected ? theme.colors.background : strokeColor,
+                border: `${isSourceSelected ? 2 : 1}px solid ${strokeColor}`,
                 pointerEvents: 'all',
                 whiteSpace: 'nowrap',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                boxShadow: isSourceSelected ? `0 2px 8px ${strokeColor}60` : 'none',
               }}
               className="nodrag nopan"
             >
@@ -272,16 +312,19 @@ function SequenceArrowParticipantEdge({
             style={{
               position: 'absolute',
               transform: `translate(-50%, -50%) translate(${labelX}px,${labelY - 12}px)`,
-              background: theme.colors.background,
-              padding: isMoveEvent ? '3px 10px' : '2px 8px',
+              background: isSourceSelected ? strokeColor : theme.colors.background,
+              padding: isSourceSelected ? '5px 12px' : (isMoveEvent ? '3px 10px' : '2px 8px'),
               borderRadius: 4,
               fontSize: theme.fontSizes[0],
-              fontWeight: isMoveEvent ? theme.fontWeights.bold : theme.fontWeights.medium,
+              fontWeight: isSourceSelected ? theme.fontWeights.bold : (isMoveEvent ? theme.fontWeights.bold : theme.fontWeights.medium),
               fontFamily: theme.fonts.body,
-              color: strokeColor,
-              border: isMoveEvent ? `2px solid ${strokeColor}` : `1px solid ${strokeColor}`,
+              color: isSourceSelected ? theme.colors.background : strokeColor,
+              border: `${isSourceSelected ? 3 : (isMoveEvent ? 2 : 1)}px solid ${strokeColor}`,
               pointerEvents: 'all',
               whiteSpace: 'nowrap',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              boxShadow: isSourceSelected ? `0 4px 12px ${strokeColor}60` : 'none',
             }}
             className="nodrag nopan"
           >
@@ -501,6 +544,9 @@ export interface SequenceDiagramRendererProps {
 
   /** Whether swimlane headers should stick to the top when scrolling vertically (default: true) */
   stickyHeaders?: boolean;
+
+  /** Whether to show event labels on nodes (default: false, labels already shown on edges) */
+  showEventLabels?: boolean;
 }
 
 /**
@@ -518,6 +564,7 @@ function SequenceDiagramInner({
   showBackground = false, // Default to false since swimlanes provide visual structure
   stickyHeaders = true,
   selectedNodeId,
+  showEventLabels = false, // Default to false - labels already shown on edges
 }: SequenceDiagramRendererProps) {
   const { theme } = useTheme();
 
@@ -541,15 +588,28 @@ function SequenceDiagramInner({
     layoutOptions
   );
 
-  // Mark selected node
+  // Mark selected node and add showEventLabels to node data
   const nodes = useMemo(() => {
-    if (!selectedNodeId) return layoutNodes;
-
     return layoutNodes.map(node => ({
       ...node,
       selected: node.id === selectedNodeId,
+      data: {
+        ...node.data,
+        showEventLabels,
+      },
+    }));
+  }, [layoutNodes, selectedNodeId, showEventLabels]);
+
+  // Add selectedNodeId to edge data so edges can highlight their labels
+  const edgesWithSelection = useMemo(() => {
+    return edges.map(edge => ({
+      ...edge,
+      data: {
+        ...edge.data,
+        isSourceSelected: edge.source === selectedNodeId,
+      },
     }));
-  }, [layoutNodes, selectedNodeId]);
+  }, [edges, selectedNodeId]);
 
   // Handle node click
   const handleNodeClick = useCallback(
@@ -559,6 +619,16 @@ function SequenceDiagramInner({
     [onNodeClick]
   );
 
+  // Handle edge click - extract source event from edge and trigger node selection
+  const handleEdgeClick = useCallback(
+    (_event: React.MouseEvent, edge: { id: string; source: string; target: string }) => {
+      // When clicking an edge, select the source event (the label describes the source)
+      // The edge label comes from the source event, so clicking it should select that event
+      onNodeClick?.(edge.source, _event);
+    },
+    [onNodeClick]
+  );
+
   // When sticky headers are enabled, limit upward panning to prevent headers from disconnecting
   // from swimlane backgrounds. Allow downward panning to see all content.
   const translateExtent = useMemo(() => {
@@ -600,10 +670,11 @@ function SequenceDiagramInner({
   return (
     <ReactFlow
       nodes={nodes}
-      edges={edges}
+      edges={edgesWithSelection}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       onNodeClick={handleNodeClick}
+      onEdgeClick={handleEdgeClick}
       {...viewportConfig}
       minZoom={0.1}
       maxZoom={2}

package/src/components/WorkflowSequenceDiagram.tsx

@@ -45,6 +45,9 @@ export interface WorkflowSequenceDiagramProps {
 
   /** Currently selected event index (0-based) for visual highlighting */
   selectedEventIndex?: number;
+
+  /** Whether to show event labels on nodes (default: false, labels already shown on edges) */
+  showEventLabels?: boolean;
 }
 
 /**
@@ -188,6 +191,7 @@ export function WorkflowSequenceDiagram({
   className,
   onEventIndexChange,
   selectedEventIndex,
+  showEventLabels = false, // Default to false - labels already on edges
 }: WorkflowSequenceDiagramProps) {
   // Convert workflow to sequence format
   const { events, edges } = useMemo(
@@ -248,6 +252,7 @@ export function WorkflowSequenceDiagram({
       className={className}
       onNodeClick={onEventIndexChange ? handleNodeClick : undefined}
       selectedNodeId={selectedNodeId}
+      showEventLabels={showEventLabels}
     />
   );
 }