@principal-ai/principal-view-react 0.6.10 → 0.6.12

package/src/utils/animationMapping.ts

@@ -13,7 +13,7 @@ import type { LogLevel } from '@principal-ai/principal-view-core';
 export interface NodeAnimation {
   type: 'pulse' | 'flash' | 'shake' | 'entry';
   duration: number;
-  intensity?: number;  // 0-1 scale
+  intensity?: number; // 0-1 scale
   color?: string;
 }
 
@@ -43,7 +43,7 @@ export function logLevelToNodeAnimation(level: LogLevel): NodeAnimation {
         type: 'pulse',
         duration: 800,
         intensity: 0.3,
-        color: '#94a3b8' // slate-400
+        color: '#94a3b8', // slate-400
       };
 
     case 'info':
@@ -51,7 +51,7 @@ export function logLevelToNodeAnimation(level: LogLevel): NodeAnimation {
         type: 'pulse',
         duration: 1000,
         intensity: 0.5,
-        color: '#3b82f6' // blue-500
+        color: '#3b82f6', // blue-500
       };
 
     case 'warn':
@@ -59,7 +59,7 @@ export function logLevelToNodeAnimation(level: LogLevel): NodeAnimation {
         type: 'pulse',
         duration: 1200,
         intensity: 1.0,
-        color: '#f59e0b' // amber-500
+        color: '#f59e0b', // amber-500
       };
 
     case 'error':
@@ -67,7 +67,7 @@ export function logLevelToNodeAnimation(level: LogLevel): NodeAnimation {
         type: 'flash', // More dramatic animation for errors
         duration: 1500,
         intensity: 1.0,
-        color: '#ef4444' // red-500
+        color: '#ef4444', // red-500
       };
   }
 }
@@ -75,10 +75,7 @@ export function logLevelToNodeAnimation(level: LogLevel): NodeAnimation {
 /**
  * Map component action to node animation (Milestone 2)
  */
-export function actionToNodeAnimation(
-  _action: string,
-  state?: string
-): NodeAnimation {
+export function actionToNodeAnimation(_action: string, state?: string): NodeAnimation {
   // Default mapping - can be overridden by configuration
   switch (state) {
     case 'acquired':
@@ -88,7 +85,7 @@ export function actionToNodeAnimation(
         type: 'pulse',
         duration: 1000,
         intensity: 0.8,
-        color: '#22c55e' // green-500
+        color: '#22c55e', // green-500
       };
 
     case 'waiting':
@@ -97,7 +94,7 @@ export function actionToNodeAnimation(
         type: 'pulse',
         duration: 1500,
         intensity: 0.5,
-        color: '#eab308' // yellow-500
+        color: '#eab308', // yellow-500
       };
 
     case 'error':
@@ -106,7 +103,7 @@ export function actionToNodeAnimation(
         type: 'shake',
         duration: 600,
         intensity: 1.0,
-        color: '#ef4444' // red-500
+        color: '#ef4444', // red-500
       };
 
     case 'completed':
@@ -115,7 +112,7 @@ export function actionToNodeAnimation(
         type: 'flash',
         duration: 800,
         intensity: 0.7,
-        color: '#22c55e' // green-500
+        color: '#22c55e', // green-500
       };
 
     default:
@@ -124,7 +121,7 @@ export function actionToNodeAnimation(
         type: 'pulse',
         duration: 1000,
         intensity: 0.6,
-        color: '#3b82f6' // blue-500
+        color: '#3b82f6', // blue-500
       };
   }
 }
@@ -132,16 +129,15 @@ export function actionToNodeAnimation(
 /**
  * Get animation config for edge based on action (Milestone 2)
  */
-export function actionToEdgeAnimation(
-  _action: string,
-  edgeConfig?: EdgeAnimation
-): EdgeAnimation {
+export function actionToEdgeAnimation(_action: string, edgeConfig?: EdgeAnimation): EdgeAnimation {
   // Use edge config if provided, otherwise default
-  return edgeConfig || {
-    type: 'flow',
-    duration: 2000,
-    direction: 'forward'
-  };
+  return (
+    edgeConfig || {
+      type: 'flow',
+      duration: 2000,
+      direction: 'forward',
+    }
+  );
 }
 
 /**

package/src/utils/graphConverter.ts

@@ -1,5 +1,10 @@
 import { MarkerType, type Node, type Edge } from '@xyflow/react';
-import type { NodeState, EdgeState, GraphConfiguration, Violation } from '@principal-ai/principal-view-core';
+import type {
+  NodeState,
+  EdgeState,
+  GraphConfiguration,
+  Violation,
+} from '@principal-ai/principal-view-core';
 import type { CustomNodeData } from '../nodes/CustomNode';
 import type { CustomEdgeData } from '../edges/CustomEdge';
 
@@ -19,14 +24,19 @@ export function convertToXYFlowNodes(
       console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
     }
 
-    const hasViolations = violations.some(v => v.context?.nodeId === node.id);
+    const hasViolations = violations.some((v) => v.context?.nodeId === node.id);
+
+    // Groups should render behind other nodes and edges
+    const isGroup = node.data?.canvasType === 'group';
 
     return {
       id: node.id,
       type: 'custom',
       position: node.position || { x: 0, y: 0 },
+      // Groups have lower zIndex to render behind edges
+      zIndex: isGroup ? -1 : undefined,
       data: {
-        name: (node.data.name as string) || node.id,
+        name: node.name || node.id,
         typeDefinition,
         state: node.state,
         hasViolations,
@@ -42,6 +52,23 @@ export interface EdgeStateWithHandles extends EdgeState {
   targetHandle?: string;
 }
 
+/**
+ * Map canvas side to source handle ID
+ * Source handles use '-out' suffix
+ */
+function sideToSourceHandle(side?: string): string | undefined {
+  if (!side) return undefined;
+  return `${side}-out`;
+}
+
+/**
+ * Map canvas side to target handle ID
+ * Target handles use the side name directly
+ */
+function sideToTargetHandle(side?: string): string | undefined {
+  return side;
+}
+
 /**
  * Convert our EdgeState to xyflow Edge format
  */
@@ -58,25 +85,34 @@ export function convertToXYFlowEdges(
       console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
     }
 
-    const hasViolations = violations.some(v => v.context?.edgeId === edge.id);
+    const hasViolations = violations.some((v) => v.context?.edgeId === edge.id);
     const edgeWithHandles = edge as EdgeStateWithHandles;
 
+    // Get handle IDs from edge data (fromSide/toSide) or explicit handles
+    const fromSide = edge.data?.fromSide as string | undefined;
+    const toSide = edge.data?.toSide as string | undefined;
+    const sourceHandle = edgeWithHandles.sourceHandle || sideToSourceHandle(fromSide);
+    const targetHandle = edgeWithHandles.targetHandle || sideToTargetHandle(toSide);
+
     // Add arrow marker if edge type is directed
     // Color priority: edge data color > type definition color > default
     const edgeColor = edge.data?.color as string | undefined;
-    const markerEnd = typeDefinition?.directed !== false ? {
-      type: MarkerType.ArrowClosed,
-      color: edgeColor || typeDefinition?.color || '#888',
-      width: 20,
-      height: 20,
-    } : undefined;
+    const markerEnd =
+      typeDefinition?.directed !== false
+        ? {
+            type: MarkerType.ArrowClosed,
+            color: edgeColor || typeDefinition?.color || '#888',
+            width: 20,
+            height: 20,
+          }
+        : undefined;
 
     return {
       id: edge.id,
       source: edge.from,
       target: edge.to,
-      sourceHandle: edgeWithHandles.sourceHandle,
-      targetHandle: edgeWithHandles.targetHandle,
+      sourceHandle,
+      targetHandle,
       type: 'custom',
       animated: typeDefinition?.style === 'animated',
       markerEnd,
@@ -84,6 +120,7 @@ export function convertToXYFlowEdges(
         typeDefinition,
         hasViolations,
         data: edge.data,
+        edgeType: edge.type,
       },
     };
   });
@@ -98,7 +135,7 @@ export function autoLayoutNodes<T extends Record<string, unknown>>(
   layoutType: 'hierarchical' | 'force-directed' | 'circular' | 'manual' = 'hierarchical'
 ): Node<T>[] {
   // Skip if all nodes have positions
-  const hasPositions = nodes.every(n => n.position.x !== 0 || n.position.y !== 0);
+  const hasPositions = nodes.every((n) => n.position.x !== 0 || n.position.y !== 0);
   if (hasPositions || layoutType === 'manual') {
     return nodes;
   }
@@ -120,17 +157,20 @@ export function autoLayoutNodes<T extends Record<string, unknown>>(
 /**
  * Simple hierarchical layout algorithm
  */
-function applyHierarchicalLayout<T extends Record<string, unknown>>(nodes: Node<T>[], edges: Edge[]): Node<T>[] {
+function applyHierarchicalLayout<T extends Record<string, unknown>>(
+  nodes: Node<T>[],
+  edges: Edge[]
+): Node<T>[] {
   // Build adjacency list
   const adjacency = new Map<string, string[]>();
   const inDegree = new Map<string, number>();
 
-  nodes.forEach(node => {
+  nodes.forEach((node) => {
     adjacency.set(node.id, []);
     inDegree.set(node.id, 0);
   });
 
-  edges.forEach(edge => {
+  edges.forEach((edge) => {
     const targets = adjacency.get(edge.source) || [];
     targets.push(edge.target);
     adjacency.set(edge.source, targets);
@@ -160,7 +200,7 @@ function applyHierarchicalLayout<T extends Record<string, unknown>>(nodes: Node<
       visited.add(nodeId);
 
       const neighbors = adjacency.get(nodeId) || [];
-      neighbors.forEach(neighbor => {
+      neighbors.forEach((neighbor) => {
         const degree = inDegree.get(neighbor)! - 1;
         inDegree.set(neighbor, degree);
         if (degree === 0 && !visited.has(neighbor)) {
@@ -175,7 +215,7 @@ function applyHierarchicalLayout<T extends Record<string, unknown>>(nodes: Node<
   }
 
   // Handle any remaining nodes (cycles or disconnected)
-  const remainingNodes = nodes.filter(n => !visited.has(n.id)).map(n => n.id);
+  const remainingNodes = nodes.filter((n) => !visited.has(n.id)).map((n) => n.id);
   if (remainingNodes.length > 0) {
     layers.push(remainingNodes);
   }
@@ -184,8 +224,8 @@ function applyHierarchicalLayout<T extends Record<string, unknown>>(nodes: Node<
   const LAYER_HEIGHT = 150;
   const NODE_WIDTH = 200;
 
-  return nodes.map(node => {
-    const layerIndex = layers.findIndex(layer => layer.includes(node.id));
+  return nodes.map((node) => {
+    const layerIndex = layers.findIndex((layer) => layer.includes(node.id));
     const layer = layers[layerIndex] || [];
     const positionInLayer = layer.indexOf(node.id);
     const layerWidth = layer.length * NODE_WIDTH;
@@ -193,7 +233,7 @@ function applyHierarchicalLayout<T extends Record<string, unknown>>(nodes: Node<
     return {
       ...node,
       position: {
-        x: (positionInLayer * NODE_WIDTH) + (NODE_WIDTH / 2) - (layerWidth / 2),
+        x: positionInLayer * NODE_WIDTH + NODE_WIDTH / 2 - layerWidth / 2,
         y: layerIndex * LAYER_HEIGHT,
       },
     };

package/src/utils/iconResolver.tsx

@@ -38,7 +38,11 @@ export function resolveIcon(icon?: string, size: number = 20, className?: string
   }
 
   // Fall back to rendering as text (emoji or unicode)
-  return <span className={className} style={{ fontSize: `${size}px` }}>{icon}</span>;
+  return (
+    <span className={className} style={{ fontSize: `${size}px` }}>
+      {icon}
+    </span>
+  );
 }
 
 /**