@principal-ai/principal-view-react 0.14.3 → 0.14.4

package/src/nodes/CustomNode.tsx

@@ -8,6 +8,15 @@ import { NodeTooltip } from '../components/NodeTooltip';
 import type { OtelInfo } from '../components/NodeTooltip';
 import { useGraphEdit } from '../contexts/GraphEditContext';
 
+// OTEL node components
+import {
+  OtelSpanConventionNode,
+  OtelEventNode,
+  OtelScopeNode,
+  OtelResourceNode,
+  OtelBoundaryNode,
+} from './otel';
+
 /**
  * Converts a hex color to a lighter/tinted version (opaque, not transparent)
  * @param hexColor - Hex color string (e.g., "#FF5733" or "#888")
@@ -61,8 +70,38 @@ export interface CustomNodeData extends Record<string, unknown> {
 
 /**
  * Custom node component for xyflow that renders based on NodeTypeDefinition
+ *
+ * This component now delegates to specialized OTEL node components when the
+ * node type matches an OTEL concept. This allows each OTEL node type to have
+ * its own specialized rendering and features (e.g., workflow chips on span nodes).
  */
-export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, selected, dragging }) => {
+export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) => {
+  const { data, selected, dragging } = props;
+
+  // Determine the OTEL node type from nodeData.nodeType (pv.nodeType in canvas)
+  // The typeDefinition.shape can also hint at OTEL types but nodeType is authoritative
+  const nodeType = data.data?.nodeType as string | undefined;
+
+  // Delegate to specialized OTEL node components
+  switch (nodeType) {
+    case 'otel-span-convention':
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return <OtelSpanConventionNode {...(props as any)} />;
+    case 'otel-event':
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return <OtelEventNode {...(props as any)} />;
+    case 'otel-scope':
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return <OtelScopeNode {...(props as any)} />;
+    case 'otel-resource':
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return <OtelResourceNode {...(props as any)} />;
+    case 'otel-boundary':
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return <OtelBoundaryNode {...(props as any)} />;
+  }
+
+  // Fall through to legacy rendering for non-OTEL nodes
   const { theme } = useTheme();
   const { onNodeResizeEnd, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
   const nodeId = useNodeId();

package/src/nodes/otel/OtelBoundaryNode.tsx

@@ -0,0 +1,234 @@
+/**
+ * OTEL Boundary Node
+ *
+ * Renders boundary nodes as rounded rectangles with:
+ * - Direction identifier (inbound/outbound)
+ * - Direction badge (arrow indicating flow)
+ * - Status and references badges
+ */
+
+import React from 'react';
+import { Handle, Position, NodeResizer } from '@xyflow/react';
+import type { NodeProps, Node } from '@xyflow/react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { NodeTooltip } from '../../components/NodeTooltip';
+import type { OtelInfo } from '../../components/NodeTooltip';
+import { NodeBadges } from './shared/NodeBadges';
+import { NodeContent } from './shared/NodeContent';
+import { useNodeBehavior } from './shared/useNodeBehavior';
+import type { BoundaryData } from './shared/types';
+
+function hexToLightColor(hexColor: string, lightness = 0.88): string {
+  const hex = hexColor.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const newR = Math.round(r + (255 - r) * lightness);
+  const newG = Math.round(g + (255 - g) * lightness);
+  const newB = Math.round(b + (255 - b) * lightness);
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
+
+export interface OtelBoundaryNodeData extends Record<string, unknown> {
+  name: string;
+  typeDefinition: {
+    color?: string;
+    icon?: string;
+    states?: Record<string, { color?: string; label?: string; icon?: string }>;
+  };
+  state?: string;
+  hasViolations?: boolean;
+  data: {
+    color?: string;
+    scopeColor?: string;
+    spanColor?: string;
+    stroke?: string;
+    icon?: string;
+    status?: 'draft' | 'approved' | 'implemented';
+    description?: string;
+    sources?: string[];
+    references?: string[];
+    states?: Record<string, { color?: string; label?: string; icon?: string }>;
+    boundary?: BoundaryData;
+    otel?: { files?: string[] };
+  };
+  editable?: boolean;
+  tooltipsEnabled?: boolean;
+  shiftKeyPressed?: boolean;
+  isHighlighted?: boolean;
+  isActive?: boolean;
+  isHidden?: boolean;
+  animationType?: 'pulse' | 'flash' | 'shake' | 'entry' | null;
+  animationDuration?: number;
+}
+
+export const OtelBoundaryNode: React.FC<NodeProps<Node<OtelBoundaryNodeData>>> = ({
+  data,
+  selected,
+  dragging,
+}) => {
+  const { theme } = useTheme();
+  const nodeProps = data;
+  const {
+    typeDefinition,
+    state,
+    hasViolations,
+    data: nodeData,
+    editable = false,
+    tooltipsEnabled = true,
+    shiftKeyPressed = false,
+    isHighlighted = false,
+    isActive = true,
+    isHidden = false,
+    animationType,
+    animationDuration = 1000,
+  } = nodeProps;
+
+  const {
+    nodeRef,
+    showTooltip,
+    handleMouseDown,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleResizeEnd,
+  } = useNodeBehavior({ editable, tooltipsEnabled, shiftKeyPressed, selected, dragging });
+
+  const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
+
+  // Color resolution
+  const spanColor = nodeData.spanColor as string | undefined;
+  const nodeDataColor = nodeData.color as string | undefined;
+  const baseFillColor = spanColor || nodeDataColor || typeDefinition.color || '#06b6d4';
+  const fillColor = baseFillColor;
+  const scopeColor = nodeData.scopeColor as string | undefined;
+  const nodeDataStroke = nodeData.stroke as string | undefined;
+  const strokeColor = nodeDataStroke || scopeColor || fillColor;
+
+  // Display info
+  const displayName = nodeProps.name;
+  const boundaryData = nodeData.boundary;
+  const identifier = boundaryData?.direction;
+
+  // Badge data
+  const status = nodeData.status;
+  const sourceFiles = nodeData.otel?.files || nodeData.sources;
+  const references = nodeData.references;
+  const description = nodeData.description;
+
+  // Icon
+  const icon =
+    (nodeData.icon as string) ||
+    (state && nodeData.states?.[state]?.icon) ||
+    typeDefinition.icon;
+
+  const stateDefinitions = nodeData.states || typeDefinition.states;
+
+  const getAnimationClass = () => {
+    switch (animationType) {
+      case 'pulse': return 'node-pulse';
+      case 'flash': return 'node-flash';
+      case 'shake': return 'node-shake';
+      case 'entry': return 'node-entry';
+      default: return '';
+    }
+  };
+
+  const borderStyle = status === 'draft' ? 'dotted' : status === 'approved' ? 'dashed' : 'solid';
+
+  const boundaryStyle: React.CSSProperties = {
+    padding: '12px 16px',
+    backgroundColor: hexToLightColor(fillColor),
+    color: '#000',
+    border: `2px ${borderStyle} ${hasViolations ? '#D0021B' : strokeColor}`,
+    fontSize: theme.fontSizes[0],
+    fontWeight: theme.fontWeights.medium,
+    fontFamily: theme.fonts.body,
+    width: '100%',
+    height: '100%',
+    minWidth: 20,
+    minHeight: 20,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '4px',
+    boxShadow: isHighlighted
+      ? '0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)'
+      : selected
+        ? `0 0 0 2px ${strokeColor}`
+        : '0 2px 4px rgba(0,0,0,0.1)',
+    opacity: nodeOpacity,
+    transition: 'box-shadow 0.2s ease, opacity 0.3s ease',
+    animationDuration: animationType ? `${animationDuration}ms` : undefined,
+    boxSizing: 'border-box',
+    borderRadius: '8px', // Rounded corners for boundary nodes
+  };
+
+  const handleStyle = editable
+    ? { background: fillColor, width: 12, height: 12, border: '2px solid white', boxShadow: '0 0 0 1px ' + fillColor }
+    : { background: fillColor, width: 8, height: 8, opacity: 0, pointerEvents: 'none' as const };
+
+  return (
+    <>
+      {editable && (
+        <NodeResizer
+          color={strokeColor}
+          isVisible={selected}
+          minWidth={40}
+          minHeight={30}
+          onResizeEnd={handleResizeEnd}
+          handleStyle={{ width: 8, height: 8, borderRadius: 2, zIndex: 20 }}
+          lineStyle={{ borderWidth: 1, zIndex: 20 }}
+        />
+      )}
+
+      <Handle type="target" position={Position.Top} id="top" style={handleStyle} />
+      <Handle type="target" position={Position.Bottom} id="bottom" style={handleStyle} />
+      <Handle type="target" position={Position.Left} id="left" style={handleStyle} />
+      <Handle type="target" position={Position.Right} id="right" style={handleStyle} />
+
+      <div
+        ref={nodeRef}
+        style={{ position: 'relative', width: '100%', height: '100%' }}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <NodeBadges
+          shape="rectangle"
+          status={status}
+          sourceFiles={sourceFiles}
+          references={references}
+          boundary={boundaryData}
+          opacity={nodeOpacity}
+        />
+        <div style={boundaryStyle} className={getAnimationClass()}>
+          <NodeContent
+            displayName={displayName}
+            identifier={identifier}
+            icon={icon}
+            state={state}
+            stateDefinitions={stateDefinitions}
+            hasViolations={hasViolations}
+          />
+        </div>
+        {tooltipsEnabled && (
+          <NodeTooltip
+            description={description}
+            otel={nodeData.otel as OtelInfo}
+            sources={nodeData.sources}
+            references={references}
+            visible={showTooltip}
+            nodeRef={nodeRef}
+          />
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Top} id="top-out" style={handleStyle} />
+      <Handle type="source" position={Position.Bottom} id="bottom-out" style={handleStyle} />
+      <Handle type="source" position={Position.Left} id="left-out" style={handleStyle} />
+      <Handle type="source" position={Position.Right} id="right-out" style={handleStyle} />
+    </>
+  );
+};

package/src/nodes/otel/OtelEventNode.tsx

@@ -0,0 +1,233 @@
+/**
+ * OTEL Event Node
+ *
+ * Renders event nodes as rectangles with:
+ * - Event name identifier
+ * - Event attributes schema
+ * - Status, sources, and references badges
+ */
+
+import React from 'react';
+import { Handle, Position, NodeResizer } from '@xyflow/react';
+import type { NodeProps, Node } from '@xyflow/react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { NodeTooltip } from '../../components/NodeTooltip';
+import type { OtelInfo } from '../../components/NodeTooltip';
+import { NodeBadges } from './shared/NodeBadges';
+import { NodeContent } from './shared/NodeContent';
+import { useNodeBehavior } from './shared/useNodeBehavior';
+
+function hexToLightColor(hexColor: string, lightness = 0.88): string {
+  const hex = hexColor.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  const newR = Math.round(r + (255 - r) * lightness);
+  const newG = Math.round(g + (255 - g) * lightness);
+  const newB = Math.round(b + (255 - b) * lightness);
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
+
+export interface OtelEventNodeData extends Record<string, unknown> {
+  name: string;
+  typeDefinition: {
+    color?: string;
+    icon?: string;
+    states?: Record<string, { color?: string; label?: string; icon?: string }>;
+  };
+  state?: string;
+  hasViolations?: boolean;
+  data: {
+    color?: string;
+    scopeColor?: string;
+    spanColor?: string;
+    stroke?: string;
+    icon?: string;
+    status?: 'draft' | 'approved' | 'implemented';
+    description?: string;
+    sources?: string[];
+    references?: string[];
+    states?: Record<string, { color?: string; label?: string; icon?: string }>;
+    event?: { name?: string; description?: string; attributes?: Record<string, unknown> };
+    eventRef?: string;
+    otel?: { files?: string[] };
+  };
+  editable?: boolean;
+  tooltipsEnabled?: boolean;
+  shiftKeyPressed?: boolean;
+  isHighlighted?: boolean;
+  isActive?: boolean;
+  isHidden?: boolean;
+  animationType?: 'pulse' | 'flash' | 'shake' | 'entry' | null;
+  animationDuration?: number;
+}
+
+export const OtelEventNode: React.FC<NodeProps<Node<OtelEventNodeData>>> = ({
+  data,
+  selected,
+  dragging,
+}) => {
+  const { theme } = useTheme();
+  const nodeProps = data;
+  const {
+    typeDefinition,
+    state,
+    hasViolations,
+    data: nodeData,
+    editable = false,
+    tooltipsEnabled = true,
+    shiftKeyPressed = false,
+    isHighlighted = false,
+    isActive = true,
+    isHidden = false,
+    animationType,
+    animationDuration = 1000,
+  } = nodeProps;
+
+  const {
+    nodeRef,
+    showTooltip,
+    handleMouseDown,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleResizeEnd,
+  } = useNodeBehavior({ editable, tooltipsEnabled, shiftKeyPressed, selected, dragging });
+
+  const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
+
+  // Color resolution
+  const spanColor = nodeData.spanColor as string | undefined;
+  const nodeDataColor = nodeData.color as string | undefined;
+  const baseFillColor = spanColor || nodeDataColor || typeDefinition.color || '#3b82f6';
+  const fillColor = baseFillColor;
+  const scopeColor = nodeData.scopeColor as string | undefined;
+  const nodeDataStroke = nodeData.stroke as string | undefined;
+  const strokeColor = nodeDataStroke || scopeColor || fillColor;
+
+  // Display info
+  const displayName = nodeProps.name;
+  const eventData = nodeData.event;
+  const identifier = eventData?.name || (nodeData.eventRef as string);
+
+  // Badge data
+  const status = nodeData.status;
+  const sourceFiles = nodeData.otel?.files || nodeData.sources;
+  const references = nodeData.references;
+  const description = nodeData.description;
+
+  // Icon
+  const icon =
+    (nodeData.icon as string) ||
+    (state && nodeData.states?.[state]?.icon) ||
+    typeDefinition.icon;
+
+  const stateDefinitions = nodeData.states || typeDefinition.states;
+
+  const getAnimationClass = () => {
+    switch (animationType) {
+      case 'pulse': return 'node-pulse';
+      case 'flash': return 'node-flash';
+      case 'shake': return 'node-shake';
+      case 'entry': return 'node-entry';
+      default: return '';
+    }
+  };
+
+  const borderStyle = status === 'draft' ? 'dotted' : status === 'approved' ? 'dashed' : 'solid';
+
+  const rectangleStyle: React.CSSProperties = {
+    padding: '12px 16px',
+    backgroundColor: hexToLightColor(fillColor),
+    color: '#000',
+    border: `2px ${borderStyle} ${hasViolations ? '#D0021B' : strokeColor}`,
+    fontSize: theme.fontSizes[0],
+    fontWeight: theme.fontWeights.medium,
+    fontFamily: theme.fonts.body,
+    width: '100%',
+    height: '100%',
+    minWidth: 20,
+    minHeight: 20,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '4px',
+    boxShadow: isHighlighted
+      ? '0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)'
+      : selected
+        ? `0 0 0 2px ${strokeColor}`
+        : '0 2px 4px rgba(0,0,0,0.1)',
+    opacity: nodeOpacity,
+    transition: 'box-shadow 0.2s ease, opacity 0.3s ease',
+    animationDuration: animationType ? `${animationDuration}ms` : undefined,
+    boxSizing: 'border-box',
+    borderRadius: 0,
+  };
+
+  const handleStyle = editable
+    ? { background: fillColor, width: 12, height: 12, border: '2px solid white', boxShadow: '0 0 0 1px ' + fillColor }
+    : { background: fillColor, width: 8, height: 8, opacity: 0, pointerEvents: 'none' as const };
+
+  return (
+    <>
+      {editable && (
+        <NodeResizer
+          color={strokeColor}
+          isVisible={selected}
+          minWidth={40}
+          minHeight={30}
+          onResizeEnd={handleResizeEnd}
+          handleStyle={{ width: 8, height: 8, borderRadius: 2, zIndex: 20 }}
+          lineStyle={{ borderWidth: 1, zIndex: 20 }}
+        />
+      )}
+
+      <Handle type="target" position={Position.Top} id="top" style={handleStyle} />
+      <Handle type="target" position={Position.Bottom} id="bottom" style={handleStyle} />
+      <Handle type="target" position={Position.Left} id="left" style={handleStyle} />
+      <Handle type="target" position={Position.Right} id="right" style={handleStyle} />
+
+      <div
+        ref={nodeRef}
+        style={{ position: 'relative', width: '100%', height: '100%' }}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <NodeBadges
+          shape="rectangle"
+          status={status}
+          sourceFiles={sourceFiles}
+          references={references}
+          opacity={nodeOpacity}
+        />
+        <div style={rectangleStyle} className={getAnimationClass()}>
+          <NodeContent
+            displayName={displayName}
+            identifier={identifier}
+            icon={icon}
+            state={state}
+            stateDefinitions={stateDefinitions}
+            hasViolations={hasViolations}
+          />
+        </div>
+        {tooltipsEnabled && (
+          <NodeTooltip
+            description={description}
+            otel={nodeData.otel as OtelInfo}
+            sources={nodeData.sources}
+            references={references}
+            visible={showTooltip}
+            nodeRef={nodeRef}
+          />
+        )}
+      </div>
+
+      <Handle type="source" position={Position.Top} id="top-out" style={handleStyle} />
+      <Handle type="source" position={Position.Bottom} id="bottom-out" style={handleStyle} />
+      <Handle type="source" position={Position.Left} id="left-out" style={handleStyle} />
+      <Handle type="source" position={Position.Right} id="right-out" style={handleStyle} />
+    </>
+  );
+};