@principal-ai/subsystems-react 0.17.0 → 0.18.0

package/src/nodes/otel/OtelResourceNode.tsx

@@ -1,251 +0,0 @@
-/**
- * OTEL Resource Node
- *
- * Renders resource nodes as diamonds with:
- * - Resource match identifier (key: value)
- * - 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';
-
-export interface OtelResourceNodeData 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?: {
-      resourceMatch?: Record<string, string | string[]>;
-      files?: string[];
-    };
-  };
-  editable?: boolean;
-  tooltipsEnabled?: boolean;
-  shiftKeyPressed?: boolean;
-  isHighlighted?: boolean;
-  isActive?: boolean;
-  isHidden?: boolean;
-  animationType?: 'pulse' | 'flash' | 'shake' | 'entry' | null;
-  animationDuration?: number;
-}
-
-export const OtelResourceNode: React.FC<NodeProps<Node<OtelResourceNodeData>>> = ({
-  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 });
-
-  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 orange
-  const baseFillColor = nodeDataColor || scopeColor || typeDefinition.color || '#f97316';
-  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;
-
-  // Display info
-  const displayName = nodeProps.name;
-  const otelData = nodeData.otel;
-
-  // Get identifier from resourceMatch
-  let identifier: string | undefined;
-  if (otelData?.resourceMatch) {
-    const entries = Object.entries(otelData.resourceMatch);
-    if (entries.length > 0) {
-      const [key, value] = entries[0];
-      identifier = `${key}: ${Array.isArray(value) ? value[0] : value}`;
-    }
-  }
-
-  // Badge data
-  const status = nodeData.status;
-  const sourceFiles = otelData?.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 '';
-    }
-  };
-
-  // Diamond styles
-  const diamondClipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)';
-  const diamondBorderWidth = 2;
-
-  const diamondBorderStyle: React.CSSProperties = {
-    position: 'relative',
-    clipPath: diamondClipPath,
-    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 diamondInnerStyle: React.CSSProperties = {
-    position: 'absolute',
-    top: diamondBorderWidth,
-    left: diamondBorderWidth,
-    right: diamondBorderWidth,
-    bottom: diamondBorderWidth,
-    clipPath: diamondClipPath,
-    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 16px',
-  };
-
-  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 (
-    <>
-      {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%',
-          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}
-      >
-        <NodeBadges
-          shape="diamond"
-          status={status}
-          sourceFiles={sourceFiles}
-          references={references}
-          opacity={nodeOpacity}
-        />
-        <div style={diamondBorderStyle} className={getAnimationClass()}>
-          <div style={diamondInnerStyle}>
-            <NodeContent
-              displayName={displayName}
-              identifier={identifier}
-              icon={icon}
-              state={state}
-              stateDefinitions={stateDefinitions}
-              hasViolations={hasViolations}
-            />
-          </div>
-        </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/OtelScopeNode.tsx

@@ -1,221 +0,0 @@
-/**
- * OTEL Scope Node
- *
- * Renders scope nodes as rounded rectangles with:
- * - Scope name identifier
- * - 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';
-
-export interface OtelScopeNodeData 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?: { scope?: string; files?: string[] };
-  };
-  editable?: boolean;
-  tooltipsEnabled?: boolean;
-  shiftKeyPressed?: boolean;
-  isHighlighted?: boolean;
-  isActive?: boolean;
-  isHidden?: boolean;
-  animationType?: 'pulse' | 'flash' | 'shake' | 'entry' | null;
-  animationDuration?: number;
-}
-
-export const OtelScopeNode: React.FC<NodeProps<Node<OtelScopeNodeData>>> = ({
-  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 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 green
-  const baseFillColor = nodeDataColor || scopeColor || typeDefinition.color || '#22c55e';
-  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;
-
-  // Display info
-  const displayName = nodeProps.name;
-  const otelData = nodeData.otel;
-  const identifier = otelData?.scope;
-
-  // Badge data
-  const status = nodeData.status;
-  const sourceFiles = otelData?.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 circleStyle: React.CSSProperties = {
-    padding: '8px',
-    backgroundColor: 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: '12px',
-  };
-
-  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={40}
-          keepAspectRatio={false}
-          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={circleStyle} 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} />
-    </>
-  );
-};