@principal-ai/subsystems-react 0.17.0 → 0.18.0

package/src/nodes/otel/OtelSpanConventionNode.tsx

@@ -1,295 +0,0 @@
-/**
- * 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

@@ -1,23 +0,0 @@
-/**
- * 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

@@ -1,295 +0,0 @@
-/**
- * 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} />
-          )}
-        </>
-      )}
-    </>
-  );
-};