@principal-ai/principal-view-react 0.14.25 → 0.14.27

package/src/components/SequenceDiagramRenderer.tsx

@@ -36,6 +36,7 @@ import {
 
 /**
  * Minimal marker node for arrow-centric sequence diagrams
+ * Invisible - just used for positioning, all rendering done by edges
  */
 function SequenceMarkerNode({ data }: NodeProps) {
   return (
@@ -43,10 +44,7 @@ function SequenceMarkerNode({ data }: NodeProps) {
       style={{
         width: '100%',
         height: '100%',
-        backgroundColor: 'var(--sequence-marker-bg, #6495ED)',
-        borderRadius: '50%',
-        border: '2px solid var(--sequence-marker-border, #4169E1)',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+        opacity: 0,
       }}
       title={data.fullName as string}
     >
@@ -65,7 +63,7 @@ function SequenceMarkerNode({ data }: NodeProps) {
 }
 
 /**
- * Sequence arrow edge with label
+ * Sequence arrow edge with label (dot to dot)
  */
 function SequenceArrowEdge({
   id,
@@ -131,6 +129,146 @@ function SequenceArrowEdge({
   );
 }
 
+/**
+ * Participant-to-participant arrow edge (or activation bar for same-lane)
+ * Draws from source participant lifeline to target participant lifeline
+ */
+function SequenceArrowParticipantEdge({
+  id,
+  sourceY,
+  targetY,
+  label,
+  data,
+}: EdgeProps) {
+  const { theme } = useTheme();
+
+  // Use participant X positions from data (swimlane centers)
+  const sourceX = (data?.sourceParticipantX ?? 0) as number;
+  const targetX = (data?.targetParticipantX ?? 0) as number;
+  const safeSourceY = (sourceY ?? 0) as number;
+  const safeTargetY = (targetY ?? 0) as number;
+
+  // Check if this is same-lane (activation bar) or cross-lane (arrow)
+  const isSameLane = sourceX === targetX;
+  const isLastEvent = data?.isLastEvent === true;
+
+  // Style based on whether it's a move event (IPC) or transform event (internal)
+  const isMoveEvent = data?.isMoveEvent === true;
+  const strokeColor = isMoveEvent ? (theme.colors.accent || '#f48771') : theme.colors.primary;
+
+  // Same lane: render as activation bar
+  if (isSameLane) {
+    const barWidth = 12;
+    const eventSpacing = (data?.eventSpacing ?? 80) as number;
+
+    // For last event, use half the event spacing for bar height
+    let barHeight: number;
+    let barY: number;
+
+    if (isLastEvent) {
+      barHeight = eventSpacing / 2;
+      barY = safeSourceY; // Start at the event position
+    } else {
+      // Normal case: bar from source to target
+      const calculatedHeight = Math.abs(safeTargetY - safeSourceY);
+      // Ensure minimum height if events are at same position
+      barHeight = calculatedHeight > 0 ? calculatedHeight : eventSpacing / 2;
+      barY = Math.min(safeSourceY, safeTargetY);
+    }
+
+    const barX = sourceX - barWidth / 2;
+
+    return (
+      <>
+        {/* Activation bar */}
+        <svg>
+          <rect
+            x={barX}
+            y={barY}
+            width={barWidth}
+            height={barHeight}
+            fill={strokeColor}
+            fillOpacity={0.15}
+            stroke={strokeColor}
+            strokeWidth={2}
+            rx={2}
+          />
+        </svg>
+        {label && (
+          <EdgeLabelRenderer>
+            <div
+              style={{
+                position: 'absolute',
+                transform: `translate(0, -50%) translate(${sourceX + 15}px,${barY + barHeight / 2}px)`,
+                background: theme.colors.background,
+                padding: '2px 8px',
+                borderRadius: 4,
+                fontSize: theme.fontSizes[0],
+                fontWeight: theme.fontWeights.medium,
+                fontFamily: theme.fonts.body,
+                color: strokeColor,
+                border: `1px solid ${strokeColor}`,
+                pointerEvents: 'all',
+                whiteSpace: 'nowrap',
+              }}
+              className="nodrag nopan"
+            >
+              {label}
+            </div>
+          </EdgeLabelRenderer>
+        )}
+      </>
+    );
+  }
+
+  // Cross-lane: render as horizontal arrow at midpoint
+  const strokeWidth = isMoveEvent ? 2.5 : 2;
+  const markerEnd = isMoveEvent ? 'url(#sequence-arrow-move)' : 'url(#sequence-arrow)';
+
+  // Draw horizontal arrow at the midpoint between source and target Y positions
+  const arrowY = (safeSourceY + safeTargetY) / 2;
+  const path = `M ${sourceX} ${arrowY} L ${targetX} ${arrowY}`;
+  const labelX = (sourceX + targetX) / 2;
+  const labelY = arrowY;
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={path}
+        style={{
+          stroke: strokeColor,
+          strokeWidth: strokeWidth,
+        }}
+        markerEnd={markerEnd}
+      />
+      {label && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY - 12}px)`,
+              background: theme.colors.background,
+              padding: isMoveEvent ? '3px 10px' : '2px 8px',
+              borderRadius: 4,
+              fontSize: theme.fontSizes[0],
+              fontWeight: isMoveEvent ? theme.fontWeights.bold : theme.fontWeights.medium,
+              fontFamily: theme.fonts.body,
+              color: strokeColor,
+              border: isMoveEvent ? `2px solid ${strokeColor}` : `1px solid ${strokeColor}`,
+              pointerEvents: 'all',
+              whiteSpace: 'nowrap',
+            }}
+            className="nodrag nopan"
+          >
+            {label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}
+
 /**
  * Default node types including sequence marker
  */
@@ -139,10 +277,11 @@ const defaultSequenceNodeTypes: NodeTypes = {
 };
 
 /**
- * Default edge types including sequence arrow
+ * Default edge types including sequence arrow and participant arrow
  */
 const defaultSequenceEdgeTypes: EdgeTypes = {
   sequenceArrow: SequenceArrowEdge,
+  sequenceArrowParticipant: SequenceArrowParticipantEdge,
 };
 
 /**
@@ -394,9 +533,10 @@ function SequenceDiagramInner({
       zoomOnScroll
       style={{ background: theme.colors.background }}
     >
-      {/* SVG defs for arrow marker */}
+      {/* SVG defs for arrow markers */}
       <svg style={{ position: 'absolute', width: 0, height: 0 }}>
         <defs>
+          {/* Standard arrow for transform events */}
           <marker
             id="sequence-arrow"
             viewBox="0 0 10 10"
@@ -411,6 +551,21 @@ function SequenceDiagramInner({
               fill={theme.colors.primary}
             />
           </marker>
+          {/* Accent arrow for move events (IPC calls) */}
+          <marker
+            id="sequence-arrow-move"
+            viewBox="0 0 10 10"
+            refX="8"
+            refY="5"
+            markerWidth="7"
+            markerHeight="7"
+            orient="auto-start-reverse"
+          >
+            <path
+              d="M 0 0 L 10 5 L 0 10 z"
+              fill={theme.colors.accent || '#f48771'}
+            />
+          </marker>
         </defs>
       </svg>
 

package/src/components/WorkflowSequenceDiagram.tsx

@@ -0,0 +1,222 @@
+/**
+ * Workflow Sequence Diagram
+ *
+ * A wrapper around SequenceDiagramRenderer that handles conversion from
+ * workflow scenarios to sequence diagram format, following the graph-to-sequence
+ * model where participants are scopes and events are move/transform operations.
+ */
+
+import { useMemo } from 'react';
+import type { WorkflowScenario, Canvas, ExtendedCanvas } from '@principal-ai/principal-view-core';
+import { SequenceDiagramRenderer } from './SequenceDiagramRenderer';
+import type { SequenceEvent, SequenceEdge } from '../hooks/useSequenceLayout';
+import type { UseSequenceLayoutOptions } from '../hooks/useSequenceLayout';
+
+/**
+ * Props for WorkflowSequenceDiagram
+ */
+export interface WorkflowSequenceDiagramProps {
+  /** Workflow scenario to visualize */
+  scenario: WorkflowScenario;
+
+  /** Optional canvas for extracting scope metadata from OTEL nodes */
+  canvas?: Canvas | ExtendedCanvas | null;
+
+  /** Optional height for the diagram */
+  height?: number | string;
+
+  /** Optional width for the diagram */
+  width?: number | string;
+
+  /** Layout options for the sequence diagram */
+  layoutOptions?: UseSequenceLayoutOptions;
+
+  /** Whether to show controls */
+  showControls?: boolean;
+
+  /** Whether to show background grid */
+  showBackground?: boolean;
+
+  /** Optional class name */
+  className?: string;
+}
+
+/**
+ * Type guard to check if a node is an OTEL event node
+ */
+function isOtelEventNode(node: any): node is {
+  type: 'otel-event';
+  event: { name: string };
+  otel?: { scope?: string };
+  label?: string;
+} {
+  return node?.type === 'otel-event' && node?.event?.name;
+}
+
+/**
+ * Type guard to check if a node is an OTEL participant node
+ */
+function isOtelParticipantNode(node: any): node is {
+  type: 'otel-participant';
+  participant: { name: string; scope?: string };
+  transformEvents?: Array<{ name: string }>;
+} {
+  return node?.type === 'otel-participant' && node?.participant?.name;
+}
+
+/**
+ * Convert workflow scenario to sequence diagram format
+ */
+function convertWorkflowToSequence(
+  scenario: WorkflowScenario,
+  canvas?: Canvas | ExtendedCanvas | null
+): {
+  events: SequenceEvent[];
+  edges: SequenceEdge[];
+} {
+  // Extract event names from scenario template
+  const templateEvents = scenario.template.events || {};
+  const eventNames = Object.keys(templateEvents);
+
+  if (eventNames.length === 0) {
+    return { events: [], edges: [] };
+  }
+
+  // Build maps from canvas metadata
+  const eventToScopeMap = new Map<string, string>();
+  const eventToLabelMap = new Map<string, string>();
+  const eventToMoveEventMap = new Map<string, boolean>();
+
+  if (canvas?.nodes) {
+    for (const node of canvas.nodes) {
+      // Type guard narrowing - we know the structure but Canvas type doesn't include OTEL specifics
+      const nodeData = node as Record<string, any>;
+
+      // Handle OTEL event nodes
+      if (isOtelEventNode(nodeData)) {
+        const eventName = nodeData.event.name;
+
+        if (nodeData.otel?.scope) {
+          eventToScopeMap.set(eventName, nodeData.otel.scope);
+        }
+
+        if (nodeData.label) {
+          eventToLabelMap.set(eventName, nodeData.label);
+        }
+      }
+
+      // Handle OTEL participant nodes (participant-based model)
+      if (isOtelParticipantNode(nodeData)) {
+        const scope = nodeData.participant.scope || nodeData.participant.name;
+
+        // Mark transform events (internal to participant)
+        if (nodeData.transformEvents) {
+          for (const transformEvent of nodeData.transformEvents) {
+            eventToScopeMap.set(transformEvent.name, scope);
+            eventToMoveEventMap.set(transformEvent.name, false);
+          }
+        }
+      }
+    }
+  }
+
+  // Convert to SequenceEvent format
+  const events: SequenceEvent[] = eventNames.map((eventName, index) => {
+    const scope = eventToScopeMap.get(eventName) || 'unknown';
+    const label = eventToLabelMap.get(eventName) || eventName.split('.').pop() || eventName;
+
+    // Determine if this is a move event
+    // Default to true unless explicitly marked as transform event in participant node
+    const isMoveEvent = eventToMoveEventMap.get(eventName) ?? true;
+
+    return {
+      id: `event-${index}`,
+      name: `${scope}.${eventName}`,
+      label,
+      moveEvent: isMoveEvent,
+      participant: scope,
+    };
+  });
+
+  // Create sequential edges
+  const edges: SequenceEdge[] = [];
+  for (let i = 0; i < events.length - 1; i++) {
+    edges.push({
+      id: `edge-${i}`,
+      fromEvent: events[i].id,
+      toEvent: events[i + 1].id,
+    });
+  }
+
+  return { events, edges };
+}
+
+/**
+ * WorkflowSequenceDiagram Component
+ *
+ * Renders a workflow scenario as a sequence diagram, automatically extracting
+ * participant scopes from the canvas and distinguishing between move events
+ * (cross-participant communication) and transform events (internal processing).
+ *
+ * @example
+ * ```tsx
+ * <WorkflowSequenceDiagram
+ *   scenario={workflowScenario}
+ *   canvas={otelCanvas}
+ *   height={600}
+ *   layoutOptions={{
+ *     namespaceStrategy: 'first',
+ *     eventSpacing: 80,
+ *   }}
+ * />
+ * ```
+ */
+export function WorkflowSequenceDiagram({
+  scenario,
+  canvas,
+  height = 600,
+  width = '100%',
+  layoutOptions,
+  showControls = true,
+  showBackground = false,
+  className,
+}: WorkflowSequenceDiagramProps) {
+  // Convert workflow to sequence format
+  const { events, edges } = useMemo(
+    () => convertWorkflowToSequence(scenario, canvas),
+    [scenario, canvas]
+  );
+
+  // If no events, show empty state
+  if (events.length === 0) {
+    return (
+      <div
+        className={className}
+        style={{
+          width,
+          height,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: '#888',
+        }}
+      >
+        No events in workflow
+      </div>
+    );
+  }
+
+  // Render sequence diagram
+  return (
+    <SequenceDiagramRenderer
+      events={events}
+      edges={edges}
+      height={height}
+      width={width}
+      layoutOptions={layoutOptions}
+      showControls={showControls}
+      showBackground={showBackground}
+      className={className}
+    />
+  );
+}

package/src/hooks/useSequenceLayout.ts

@@ -19,6 +19,10 @@ export interface SequenceEvent {
   label?: string;
   /** Optional event type for styling */
   type?: string;
+  /** Whether this is a move event (crosses participant boundaries) */
+  moveEvent?: boolean;
+  /** Participant this event belongs to (for move events, this is the target) */
+  participant?: string;
   /** Additional data to pass through to the node */
   data?: Record<string, unknown>;
 }
@@ -306,9 +310,6 @@ export function useSequenceLayout(
     // This creates horizontal "time layers" across all swimlanes
     const nodes: Node[] = [];
 
-    // Build event lookup for edge label resolution
-    const eventById = new Map(events.map((e) => [e.id, e]));
-
     for (let i = 0; i < events.length; i++) {
       const event = events[i];
       const originalNamespace = eventNamespaces.get(event.id)!;
@@ -332,6 +333,7 @@ export function useSequenceLayout(
           namespace: originalNamespace,
           visibleNamespace,
           timeLayer: i,
+          isMoveEvent: event.moveEvent === true,
           ...event.data,
         },
         style: {
@@ -341,32 +343,75 @@ export function useSequenceLayout(
       });
     }
 
-    // Step 5: Create edges with labels derived from target event
-    const edges: Edge[] = sequenceEdges.map((edge) => {
-      const sourceNamespace = eventNamespaces.get(edge.fromEvent);
-      const targetNamespace = eventNamespaces.get(edge.toEvent);
-      const crossesLanes =
-        namespaceToVisible.get(sourceNamespace!) !==
-        namespaceToVisible.get(targetNamespace!);
-
-      const targetEvent = eventById.get(edge.toEvent);
-      const edgeLabel = edge.label || targetEvent?.label || targetEvent?.name.split('.').pop() || '';
+    // Step 5: Create edges - one per event, showing how to get to the NEXT event
+    // Each edge looks forward to determine what to render
+    const edges: Edge[] = [];
 
-      return {
-        id: edge.id,
-        source: edge.fromEvent,
-        target: edge.toEvent,
-        type: 'sequenceArrow',
-        label: edgeLabel,
-        labelStyle: { fontSize: 12, fontWeight: 500 },
-        labelBgStyle: { fill: 'white', fillOpacity: 0.8 },
-        data: {
-          crossesLanes,
-          sourceNamespace,
-          targetNamespace,
-        },
-      };
-    });
+    for (let i = 0; i < events.length; i++) {
+      const currentEvent = events[i];
+      const currentNamespace = eventNamespaces.get(currentEvent.id)!;
+      const currentVisibleNs = namespaceToVisible.get(currentNamespace)!;
+      const currentLane = swimlaneByNamespace.get(currentVisibleNs)!;
+
+      // Look at the next event (if any)
+      if (i < events.length - 1) {
+        const nextEvent = events[i + 1];
+        const nextNamespace = eventNamespaces.get(nextEvent.id)!;
+        const nextVisibleNs = namespaceToVisible.get(nextNamespace)!;
+        const nextLane = swimlaneByNamespace.get(nextVisibleNs)!;
+        const nextIsMoveEvent = nextEvent.moveEvent === true;
+        const crossesLanes = currentVisibleNs !== nextVisibleNs;
+
+        // Label is from the CURRENT event (the one creating this edge)
+        const edgeLabel = currentEvent.label || currentEvent.name.split('.').pop() || currentEvent.name;
+
+        edges.push({
+          id: `edge-${currentEvent.id}-to-${nextEvent.id}`,
+          source: currentEvent.id,
+          target: nextEvent.id,
+          type: 'sequenceArrowParticipant',
+          label: edgeLabel,
+          labelStyle: { fontSize: 12, fontWeight: 500 },
+          labelBgStyle: { fill: 'white', fillOpacity: 0.8 },
+          data: {
+            crossesLanes,
+            sourceNamespace: currentNamespace,
+            targetNamespace: nextNamespace,
+            isMoveEvent: nextIsMoveEvent,
+            sourceEvent: currentEvent,
+            targetEvent: nextEvent,
+            sourceParticipantX: currentLane.x,
+            targetParticipantX: nextLane.x,
+          },
+        });
+      } else {
+        // Last event - render small activation bar to show it exists
+        const currentIsMoveEvent = currentEvent.moveEvent === true;
+        const edgeLabel = currentEvent.label || currentEvent.name.split('.').pop() || currentEvent.name;
+
+        edges.push({
+          id: `edge-${currentEvent.id}-end`,
+          source: currentEvent.id,
+          target: currentEvent.id,
+          type: 'sequenceArrowParticipant',
+          label: edgeLabel,
+          labelStyle: { fontSize: 12, fontWeight: 500 },
+          labelBgStyle: { fill: 'white', fillOpacity: 0.8 },
+          data: {
+            crossesLanes: false,
+            sourceNamespace: currentNamespace,
+            targetNamespace: currentNamespace,
+            isMoveEvent: currentIsMoveEvent,
+            sourceEvent: currentEvent,
+            targetEvent: currentEvent,
+            sourceParticipantX: currentLane.x,
+            targetParticipantX: currentLane.x,
+            isLastEvent: true,
+            eventSpacing,
+          },
+        });
+      }
+    }
 
     // Step 6: Compute total dimensions
     const totalWidth =

package/src/index.ts

@@ -40,6 +40,9 @@ export type {
 export { SequenceDiagramRenderer } from './components/SequenceDiagramRenderer';
 export type { SequenceDiagramRendererProps } from './components/SequenceDiagramRenderer';
 
+export { WorkflowSequenceDiagram } from './components/WorkflowSequenceDiagram';
+export type { WorkflowSequenceDiagramProps } from './components/WorkflowSequenceDiagram';
+
 export { useSequenceLayout } from './hooks/useSequenceLayout';
 export type {
   SequenceEvent,