@principal-ai/subsystems-react 0.17.0

package/src/nodes/otel/OtelSpanConventionNode.tsx

@@ -0,0 +1,295 @@
+/**
+ * OTEL Span Convention Node
+ *
+ * Renders span convention nodes as hexagons with:
+ * - Span pattern identifier
+ * - Workflow chips showing which workflows use this span
+ * - 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';
+import type { WorkflowChip } from './shared/types';
+
+export interface OtelSpanConventionNodeData 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 }>;
+    otel?: {
+      spanPattern?: string;
+      files?: string[];
+    };
+    /** Workflow chips to display */
+    workflowChips?: WorkflowChip[];
+    /** Callback when workflow chip is clicked */
+    onWorkflowChipClick?: (chipId: string) => void;
+    /** Currently selected workflow ID */
+    selectedWorkflowId?: string;
+  };
+  editable?: boolean;
+  tooltipsEnabled?: boolean;
+  shiftKeyPressed?: boolean;
+  isHighlighted?: boolean;
+  isActive?: boolean;
+  isHidden?: boolean;
+  animationType?: 'pulse' | 'flash' | 'shake' | 'entry' | null;
+  animationDuration?: number;
+}
+
+export const OtelSpanConventionNode: React.FC<
+  NodeProps<Node<OtelSpanConventionNodeData>>
+> = ({ 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: _animationDuration = 1000,
+  } = nodeProps;
+
+  const {
+    nodeRef,
+    showTooltip,
+    handleMouseDown,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleResizeEnd,
+  } = useNodeBehavior({
+    editable,
+    tooltipsEnabled,
+    shiftKeyPressed,
+    selected,
+    dragging,
+  });
+
+  // Calculate opacity based on node state
+  const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
+
+  // Color resolution
+  const scopeColor = nodeData.scopeColor as string | undefined;
+  const spanColor = nodeData.spanColor as string | undefined;
+  const nodeDataColor = nodeData.color as string | undefined;
+  // Fill color priority: explicit color > scope color > type definition color > default purple
+  const baseFillColor = nodeDataColor || scopeColor || typeDefinition.color || '#8b5cf6';
+  const fillColor = baseFillColor;
+  // Stroke color priority: explicit stroke > span color (workflow context) > fill color
+  const nodeDataStroke = nodeData.stroke as string | undefined;
+  const strokeColor = nodeDataStroke || spanColor || fillColor;
+
+  // Get display info
+  const displayName = nodeProps.name;
+  const otelData = nodeData.otel;
+  const identifier = otelData?.spanPattern;
+
+  // Extract badge data
+  const status = nodeData.status;
+  const sourceFiles = otelData?.files || nodeData.sources;
+  const references = nodeData.references;
+  const description = nodeData.description;
+
+  // Icon priority
+  const icon =
+    (nodeData.icon as string) ||
+    (state && nodeData.states?.[state]?.icon) ||
+    (state && typeDefinition.states?.[state]?.icon) ||
+    typeDefinition.icon;
+
+  // State definitions for label lookup
+  const stateDefinitions = nodeData.states || typeDefinition.states;
+
+  // Workflow chips
+  const workflowChips = nodeData?.workflowChips;
+  const onWorkflowChipClick = nodeData?.onWorkflowChipClick;
+  const selectedWorkflowId = nodeData?.selectedWorkflowId;
+
+  // Animation class
+  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 '';
+    }
+  };
+
+  // Hexagon styles
+  const hexagonClipPath = 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)';
+  const hexagonBorderWidth = 2;
+
+  const hexagonBorderStyle: React.CSSProperties = {
+    position: 'relative',
+    clipPath: hexagonClipPath,
+    backgroundColor: hasViolations ? '#D0021B' : strokeColor,
+    width: '100%',
+    height: '100%',
+    minWidth: 20,
+    minHeight: 20,
+    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+    opacity: nodeOpacity,
+    transition: 'opacity 0.3s ease',
+    boxSizing: 'border-box',
+  };
+
+  const hexagonInnerStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: hexagonBorderWidth,
+    left: hexagonBorderWidth,
+    right: hexagonBorderWidth,
+    bottom: hexagonBorderWidth,
+    clipPath: hexagonClipPath,
+    backgroundColor: fillColor,
+    color: '#000',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: theme.fontSizes[0],
+    fontWeight: theme.fontWeights.medium,
+    fontFamily: theme.fonts.body,
+    gap: '4px',
+    padding: '8px 20px',
+  };
+
+  // Handle styles
+  const handleStyle = editable
+    ? {
+        background: fillColor,
+        width: 12,
+        height: 12,
+        border: '2px solid white',
+        boxShadow: '0 0 0 1px ' + fillColor,
+        zIndex: 10,
+      }
+    : {
+        background: fillColor,
+        width: 8,
+        height: 8,
+        opacity: 0,
+        pointerEvents: 'none' as const,
+        zIndex: 10,
+      };
+
+  return (
+    <>
+      {/* Node Resizer */}
+      {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 }}
+        />
+      )}
+
+      {/* Input handles */}
+      <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} />
+
+      {/* Hexagon node */}
+      <div
+        ref={nodeRef}
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          boxShadow: isHighlighted
+            ? '0 0 0 3px #3b82f6, 0 0 20px rgba(59, 130, 246, 0.5)'
+            : selected
+              ? `0 0 0 2px ${strokeColor}`
+              : 'none',
+          transition: 'box-shadow 0.2s ease',
+        }}
+        onMouseDown={handleMouseDown}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {/* Badges */}
+        <NodeBadges
+          shape="hexagon"
+          status={status}
+          sourceFiles={sourceFiles}
+          references={references}
+          opacity={nodeOpacity}
+        />
+
+        {/* Hexagon shape */}
+        <div style={hexagonBorderStyle} className={getAnimationClass()}>
+          <div style={hexagonInnerStyle}>
+            <NodeContent
+              displayName={displayName}
+              identifier={identifier}
+              icon={icon}
+              state={state}
+              stateDefinitions={stateDefinitions}
+              hasViolations={hasViolations}
+              workflowChips={workflowChips}
+              onWorkflowChipClick={onWorkflowChipClick}
+              selectedWorkflowId={selectedWorkflowId}
+            />
+          </div>
+        </div>
+
+        {/* Tooltip */}
+        {tooltipsEnabled && (
+          <NodeTooltip
+            description={description}
+            otel={nodeData.otel as OtelInfo}
+            sources={nodeData.sources}
+            references={references}
+            visible={showTooltip}
+            nodeRef={nodeRef}
+          />
+        )}
+      </div>
+
+      {/* Output handles */}
+      <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/index.ts

@@ -0,0 +1,23 @@
+/**
+ * OTEL Node Components
+ *
+ * Specialized node components for different OpenTelemetry concepts.
+ */
+
+export { OtelSpanConventionNode } from './OtelSpanConventionNode';
+export type { OtelSpanConventionNodeData } from './OtelSpanConventionNode';
+
+export { OtelEventNode } from './OtelEventNode';
+export type { OtelEventNodeData } from './OtelEventNode';
+
+export { OtelScopeNode } from './OtelScopeNode';
+export type { OtelScopeNodeData } from './OtelScopeNode';
+
+export { OtelResourceNode } from './OtelResourceNode';
+export type { OtelResourceNodeData } from './OtelResourceNode';
+
+export { OtelBoundaryNode } from './OtelBoundaryNode';
+export type { OtelBoundaryNodeData } from './OtelBoundaryNode';
+
+// Re-export shared types
+export * from './shared/types';

package/src/nodes/otel/shared/NodeBadges.tsx

@@ -0,0 +1,295 @@
+/**
+ * Node badges component for status, sources, references, and boundary indicators
+ */
+
+import React from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import type { NodeBadgesProps, BadgePosition, BoundaryData } from './types';
+
+/**
+ * Get badge shape styles based on node shape
+ */
+function getBadgeShapeStyles(shape: string): React.CSSProperties {
+  const baseSize = 18;
+
+  switch (shape) {
+    case 'circle':
+      return {
+        width: baseSize,
+        height: baseSize,
+        borderRadius: '50%',
+      };
+    case 'diamond':
+      return {
+        width: baseSize - 4,
+        height: baseSize - 4,
+        borderRadius: 0,
+        transform: 'rotate(45deg)',
+      };
+    case 'hexagon':
+      return {
+        width: baseSize,
+        height: baseSize,
+        borderRadius: 0,
+        clipPath: 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)',
+      };
+    case 'rectangle':
+    default:
+      return {
+        width: baseSize,
+        height: baseSize,
+        borderRadius: 0,
+      };
+  }
+}
+
+/**
+ * Get badge position based on shape - diamonds need badges at their points, not bounding box corners
+ */
+function getBadgePosition(shape: string, position: BadgePosition): React.CSSProperties {
+  const isDiamondShape = shape === 'diamond';
+
+  if (isDiamondShape) {
+    // Diamond points are at the middle of each edge of the bounding box
+    switch (position) {
+      case 'top-left':
+      case 'left':
+        return { top: '50%', left: 0, transform: 'translate(-50%, -50%)' };
+      case 'top-right':
+      case 'right':
+        return { top: '50%', right: 0, transform: 'translate(50%, -50%)' };
+      case 'top':
+        return { top: 0, left: '50%', transform: 'translate(-50%, -50%)' };
+      case 'bottom':
+      case 'bottom-left':
+      case 'bottom-right':
+        return { bottom: 0, left: '50%', transform: 'translate(-50%, 50%)' };
+    }
+  }
+
+  // Default positioning for rectangles, circles, hexagons (bounding box corners)
+  switch (position) {
+    case 'top-left':
+      return { top: -6, left: -6 };
+    case 'top-right':
+      return { top: -6, right: -6 };
+    case 'bottom-left':
+      return { bottom: -6, left: -6 };
+    case 'bottom-right':
+      return { bottom: -6, right: -6 };
+    case 'left':
+      return { top: -6, left: -6 };
+    case 'right':
+      return { top: -6, right: -6 };
+    case 'top':
+      return { top: -6, left: '50%', transform: 'translateX(-50%)' };
+    case 'bottom':
+      return { bottom: -6, left: '50%', transform: 'translateX(-50%)' };
+  }
+}
+
+interface BadgeProps {
+  shape: string;
+  position: BadgePosition;
+  backgroundColor: string;
+  label: string;
+  title: string;
+  opacity: number;
+}
+
+const Badge: React.FC<BadgeProps> = ({
+  shape,
+  position,
+  backgroundColor,
+  label,
+  title,
+  opacity,
+}) => {
+  const { theme } = useTheme();
+  const shapeStyles = getBadgeShapeStyles(shape);
+  const positionStyles = getBadgePosition(shape, position);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        ...positionStyles,
+        ...shapeStyles,
+        // Override transform if shape has rotation but we already have a position transform
+        ...(shape === 'diamond'
+          ? { transform: `${positionStyles.transform} rotate(45deg)` }
+          : {}),
+        backgroundColor,
+        color: 'white',
+        fontSize: theme.fontSizes[0],
+        fontWeight: theme.fontWeights.bold,
+        fontFamily: theme.fonts.body,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+        zIndex: 10,
+        opacity,
+      }}
+      title={title}
+    >
+      <span style={{ transform: shapeStyles.transform ? 'rotate(-45deg)' : undefined }}>
+        {label}
+      </span>
+    </div>
+  );
+};
+
+/**
+ * Status badge component (top-left)
+ */
+const StatusBadge: React.FC<{
+  shape: string;
+  status: 'draft' | 'approved' | 'implemented';
+  opacity: number;
+}> = ({ shape, status, opacity }) => {
+  const statusColors = {
+    draft: '#6b7280', // Gray
+    approved: '#3b82f6', // Blue
+    implemented: '#10b981', // Green
+  };
+
+  const statusLabels = {
+    draft: 'D',
+    approved: 'A',
+    implemented: 'I',
+  };
+
+  const statusTitles = {
+    draft: 'Draft - Design phase',
+    approved: 'Approved - Ready for implementation',
+    implemented: 'Implemented - Code exists',
+  };
+
+  return (
+    <Badge
+      shape={shape}
+      position="top-left"
+      backgroundColor={statusColors[status]}
+      label={statusLabels[status]}
+      title={statusTitles[status]}
+      opacity={opacity}
+    />
+  );
+};
+
+/**
+ * Sources badge component (top-right)
+ */
+const SourcesBadge: React.FC<{
+  shape: string;
+  sourceFiles: string[];
+  opacity: number;
+}> = ({ shape, sourceFiles, opacity }) => {
+  return (
+    <Badge
+      shape={shape}
+      position="top-right"
+      backgroundColor="#10b981" // Green
+      label="S"
+      title={`Source files: ${sourceFiles.join(', ')}`}
+      opacity={opacity}
+    />
+  );
+};
+
+/**
+ * References badge component (bottom-left)
+ */
+const ReferencesBadge: React.FC<{
+  shape: string;
+  references: string[];
+  opacity: number;
+}> = ({ shape, references, opacity }) => {
+  return (
+    <Badge
+      shape={shape}
+      position="bottom-left"
+      backgroundColor="#8b5cf6" // Purple
+      label="R"
+      title={`References: ${references.join(', ')}`}
+      opacity={opacity}
+    />
+  );
+};
+
+/**
+ * Boundary badge component (right or left based on direction)
+ */
+const BoundaryBadge: React.FC<{
+  boundary: BoundaryData;
+  opacity: number;
+}> = ({ boundary, opacity }) => {
+  const { theme } = useTheme();
+  const direction = boundary.direction || 'outbound';
+  const isOutbound = direction === 'outbound';
+  const directionIcon = isOutbound ? '↗' : '↙';
+  const directionTitle = isOutbound
+    ? 'Outbound boundary (calls external system)'
+    : 'Inbound boundary (called by external system)';
+
+  const positionStyles = getBadgePosition('rectangle', isOutbound ? 'right' : 'left');
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        ...positionStyles,
+        width: 18,
+        height: 18,
+        borderRadius: '50%', // Always circular for boundary badge
+        backgroundColor: '#06b6d4', // Cyan
+        color: 'white',
+        fontSize: 12,
+        fontWeight: theme.fontWeights.bold,
+        fontFamily: theme.fonts.body,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+        zIndex: 10,
+        opacity,
+      }}
+      title={directionTitle}
+    >
+      {directionIcon}
+    </div>
+  );
+};
+
+/**
+ * Node badges component - renders status, sources, references, and boundary badges
+ */
+export const NodeBadges: React.FC<NodeBadgesProps> = ({
+  shape,
+  status,
+  sourceFiles,
+  references,
+  boundary,
+  opacity = 1,
+}) => {
+  const isBoundaryNode = !!boundary;
+
+  return (
+    <>
+      {status && <StatusBadge shape={shape} status={status} opacity={opacity} />}
+      {isBoundaryNode ? (
+        <BoundaryBadge boundary={boundary} opacity={opacity} />
+      ) : (
+        <>
+          {sourceFiles && sourceFiles.length > 0 && (
+            <SourcesBadge shape={shape} sourceFiles={sourceFiles} opacity={opacity} />
+          )}
+          {references && references.length > 0 && (
+            <ReferencesBadge shape={shape} references={references} opacity={opacity} />
+          )}
+        </>
+      )}
+    </>
+  );
+};