@principal-ai/subsystems-react 0.17.0 → 0.18.0

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

@@ -1,204 +0,0 @@
-/**
- * Node content component - renders icon, name, identifier, state, violations, and workflow chips
- */
-
-import React from 'react';
-import { useTheme } from '@principal-ade/industry-theme';
-import { resolveIcon } from '../../../utils/iconResolver';
-import type { NodeContentProps, WorkflowChip } from './types';
-
-/**
- * Helper to render text with word break opportunities after dots
- */
-function renderWithDotBreaks(text: string): React.ReactNode {
-  const parts = text.split('.');
-  return parts.map((part, i) => (
-    <span key={i}>
-      {part}
-      {i < parts.length - 1 && (
-        <>
-          .<wbr />
-        </>
-      )}
-    </span>
-  ));
-}
-
-/**
- * Workflow chips component for span convention nodes
- */
-const WorkflowChips: React.FC<{
-  chips: WorkflowChip[];
-  onChipClick?: (chipId: string) => void;
-  selectedChipId?: string;
-}> = ({ chips, onChipClick, selectedChipId }) => {
-  const { theme } = useTheme();
-
-  if (!chips || chips.length === 0) return null;
-
-  // Show max 3 chips, then "+N more"
-  const maxVisible = 3;
-  const visibleChips = chips.slice(0, maxVisible);
-  const remainingCount = chips.length - maxVisible;
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '3px',
-        marginTop: '4px',
-        justifyContent: 'center',
-        maxWidth: '100%',
-      }}
-    >
-      {visibleChips.map((chip) => {
-        const isSelected = selectedChipId === chip.id;
-        const hasColor = !!chip.color;
-
-        return (
-          <div
-            key={chip.id}
-            onClick={(e) => {
-              e.stopPropagation();
-              onChipClick?.(chip.id);
-            }}
-            style={{
-              fontSize: theme.fontSizes[0] * 0.65,
-              padding: '1px 5px',
-              borderRadius: '6px',
-              backgroundColor: isSelected
-                ? chip.color || '#3b82f6'
-                : chip.color
-                  ? `${chip.color}33` // 20% opacity version
-                  : 'rgba(0,0,0,0.08)',
-              color: isSelected
-                ? '#fff'
-                : hasColor
-                  ? chip.color
-                  : 'rgba(0,0,0,0.6)',
-              whiteSpace: 'nowrap',
-              maxWidth: '70px',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              cursor: onChipClick ? 'pointer' : 'default',
-              fontWeight: isSelected ? theme.fontWeights.bold : theme.fontWeights.medium,
-              transition: 'all 0.15s ease',
-              border: isSelected ? 'none' : `1px solid ${hasColor ? `${chip.color}66` : 'rgba(0,0,0,0.1)'}`,
-            }}
-            title={chip.label}
-          >
-            {chip.label}
-          </div>
-        );
-      })}
-      {remainingCount > 0 && (
-        <div
-          style={{
-            fontSize: theme.fontSizes[0] * 0.65,
-            padding: '1px 5px',
-            borderRadius: '6px',
-            backgroundColor: 'rgba(0,0,0,0.05)',
-            color: 'rgba(0,0,0,0.5)',
-            whiteSpace: 'nowrap',
-          }}
-          title={`${remainingCount} more workflow${remainingCount > 1 ? 's' : ''}`}
-        >
-          +{remainingCount}
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * Node content component - renders the inner content of a node
- */
-export const NodeContent: React.FC<NodeContentProps> = ({
-  displayName,
-  identifier,
-  icon,
-  state,
-  stateDefinitions,
-  hasViolations,
-  centered = true,
-  workflowChips,
-  onWorkflowChipClick,
-  selectedWorkflowId,
-}) => {
-  const { theme } = useTheme();
-
-  // Show identifier if it differs from display name
-  const showIdentifier = identifier && identifier !== displayName;
-
-  // Get state label from definitions
-  const stateLabel = state && stateDefinitions?.[state]?.label;
-
-  return (
-    <>
-      {/* Icon */}
-      {icon && (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-          {resolveIcon(icon, 20)}
-        </div>
-      )}
-
-      {/* Name with optional identifier */}
-      <div style={{ textAlign: centered ? 'center' : 'left', wordBreak: 'break-word' }}>
-        <div>{displayName}</div>
-        {showIdentifier && (
-          <div
-            style={{
-              fontSize: theme.fontSizes[0] * 0.75,
-              color: 'rgba(0, 0, 0, 0.5)',
-              marginTop: '2px',
-              fontFamily: theme.fonts.monospace,
-            }}
-          >
-            {renderWithDotBreaks(identifier)}
-          </div>
-        )}
-      </div>
-
-      {/* Workflow chips (for span convention nodes) */}
-      {workflowChips && workflowChips.length > 0 && (
-        <WorkflowChips
-          chips={workflowChips}
-          onChipClick={onWorkflowChipClick}
-          selectedChipId={selectedWorkflowId}
-        />
-      )}
-
-      {/* State badge */}
-      {state && (
-        <div
-          style={{
-            fontSize: theme.fontSizes[0],
-            fontFamily: theme.fonts.body,
-            backgroundColor: '#888', // Color will be passed from parent
-            color: 'white',
-            padding: '2px 6px',
-            borderRadius: '4px',
-            textAlign: 'center',
-          }}
-        >
-          {stateLabel || state}
-        </div>
-      )}
-
-      {/* Violations indicator */}
-      {hasViolations && (
-        <div
-          style={{
-            fontSize: theme.fontSizes[0],
-            fontFamily: theme.fonts.body,
-            color: '#D0021B',
-            fontWeight: theme.fontWeights.bold,
-          }}
-        >
-          ⚠️
-        </div>
-      )}
-    </>
-  );
-};

package/src/nodes/otel/shared/index.ts

@@ -1,8 +0,0 @@
-/**
- * Shared components for OTEL node types
- */
-
-export * from './types';
-export * from './useNodeBehavior';
-export { NodeBadges } from './NodeBadges';
-export { NodeContent } from './NodeContent';

package/src/nodes/otel/shared/types.ts

@@ -1,138 +0,0 @@
-/**
- * Shared types for OTEL node components
- */
-
-/**
- * Workflow chip displayed on span convention nodes
- */
-export interface WorkflowChip {
-  /** Workflow ID for selection/filtering */
-  id: string;
-  /** Display label (may be truncated) */
-  label: string;
-  /** Optional color for the chip */
-  color?: string;
-}
-
-/**
- * Common node data properties shared across all OTEL node types
- */
-export interface OtelNodeDataBase {
-  /** Node color (hex string or preset number) */
-  color?: string;
-  /** Scope color for border (from library.yaml owned-scopes) */
-  scopeColor?: string;
-  /** Span color for fill (from .spans.canvas) */
-  spanColor?: string;
-  /** Explicit stroke color override */
-  stroke?: string;
-  /** Icon identifier (Lucide icons) */
-  icon?: string;
-  /** Implementation status */
-  status?: 'draft' | 'approved' | 'implemented';
-  /** Description for tooltip */
-  description?: string;
-  /** Source files where event is instrumented */
-  sources?: string[];
-  /** External references/documentation */
-  references?: string[];
-  /** Node-level state definitions */
-  states?: Record<string, { color?: string; label?: string; icon?: string }>;
-  /** Canvas type (e.g., 'group') */
-  canvasType?: string;
-  /** Node type identifier */
-  nodeType?: string;
-}
-
-/**
- * OTEL extension data
- */
-export interface OtelExtensionData {
-  /** Span pattern for span convention nodes */
-  spanPattern?: string;
-  /** Scope name for scope nodes */
-  scope?: string;
-  /** Resource match for resource nodes */
-  resourceMatch?: Record<string, string | string[]>;
-  /** Files where this is instrumented */
-  files?: string[];
-}
-
-/**
- * Event data for event nodes
- */
-export interface EventData {
-  /** Event name */
-  name?: string;
-  /** Event description */
-  description?: string;
-  /** Event attributes schema */
-  attributes?: Record<string, unknown>;
-}
-
-/**
- * Boundary data for boundary nodes
- */
-export interface BoundaryData {
-  /** Direction of boundary interaction */
-  direction?: 'outbound' | 'inbound';
-  /** Node query for external system */
-  node?: Record<string, string>;
-}
-
-/**
- * Props for shared node content component
- */
-export interface NodeContentProps {
-  /** Display name for the node */
-  displayName: string;
-  /** Identifier shown below the name (e.g., span pattern, event name) */
-  identifier?: string;
-  /** Icon identifier */
-  icon?: string;
-  /** Current state */
-  state?: string;
-  /** State definitions for label lookup */
-  stateDefinitions?: Record<string, { label?: string }>;
-  /** Whether node has violations */
-  hasViolations?: boolean;
-  /** Whether to center text (default true) */
-  centered?: boolean;
-  /** Workflow chips for span convention nodes */
-  workflowChips?: WorkflowChip[];
-  /** Callback when a workflow chip is clicked */
-  onWorkflowChipClick?: (chipId: string) => void;
-  /** Currently selected workflow ID */
-  selectedWorkflowId?: string;
-}
-
-/**
- * Badge position types
- */
-export type BadgePosition =
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom';
-
-/**
- * Props for node badges component
- */
-export interface NodeBadgesProps {
-  /** Node shape for position calculations */
-  shape: 'rectangle' | 'circle' | 'hexagon' | 'diamond';
-  /** Implementation status */
-  status?: 'draft' | 'approved' | 'implemented';
-  /** Source files */
-  sourceFiles?: string[];
-  /** References */
-  references?: string[];
-  /** Boundary data (for boundary nodes) */
-  boundary?: BoundaryData;
-  /** Node opacity for badge visibility */
-  opacity?: number;
-}

package/src/nodes/otel/shared/useNodeBehavior.ts

@@ -1,114 +0,0 @@
-/**
- * Hook for shared node behavior (resize, hide, hover, tooltip)
- */
-
-import { useState, useRef, useCallback } from 'react';
-import { useNodeId } from '@xyflow/react';
-import { useGraphEdit } from '../../../contexts/GraphEditContext';
-
-export interface UseNodeBehaviorOptions {
-  /** Whether the node is in edit mode */
-  editable?: boolean;
-  /** Whether tooltips are enabled */
-  tooltipsEnabled?: boolean;
-  /** Whether shift key is pressed */
-  shiftKeyPressed?: boolean;
-  /** Whether the node is selected */
-  selected?: boolean;
-  /** Whether the node is being dragged */
-  dragging?: boolean;
-}
-
-export interface UseNodeBehaviorReturn {
-  /** Ref for the node element */
-  nodeRef: React.RefObject<HTMLDivElement>;
-  /** Node ID from xyflow */
-  nodeId: string | null;
-  /** Whether the node is currently hovered */
-  isHovered: boolean;
-  /** Whether to show the tooltip */
-  showTooltip: boolean;
-  /** Mouse down handler for Cmd/Ctrl+click behavior */
-  handleMouseDown: (event: React.MouseEvent) => void;
-  /** Mouse enter handler */
-  handleMouseEnter: () => void;
-  /** Mouse leave handler */
-  handleMouseLeave: () => void;
-  /** Resize end handler */
-  handleResizeEnd: (event: unknown, params: { width: number; height: number }) => void;
-}
-
-/**
- * Hook that provides common node behavior for resize, hide, hover, and tooltip interactions
- */
-export function useNodeBehavior(options: UseNodeBehaviorOptions): UseNodeBehaviorReturn {
-  const {
-    editable = false,
-    tooltipsEnabled = true,
-    shiftKeyPressed = false,
-    selected = false,
-    dragging = false,
-  } = options;
-
-  const nodeRef = useRef<HTMLDivElement>(null);
-  const nodeId = useNodeId();
-  const [isHovered, setIsHovered] = useState(false);
-
-  const { onNodeResizeEnd, onToggleNodeHidden, onHideUnconnectedNodes } = useGraphEdit();
-
-  // Handle resize end - notify parent to track the dimension change
-  const handleResizeEnd = useCallback(
-    (_event: unknown, params: { width: number; height: number }) => {
-      if (nodeId && onNodeResizeEnd && params.width && params.height) {
-        onNodeResizeEnd(nodeId, {
-          width: Math.round(params.width),
-          height: Math.round(params.height),
-        });
-      }
-    },
-    [nodeId, onNodeResizeEnd]
-  );
-
-  // Handle Cmd/Ctrl+mousedown to toggle hidden state
-  // We use mousedown instead of click because in edit mode with draggable nodes,
-  // ReactFlow's drag system intercepts Cmd+click before it becomes a click event
-  // - Cmd/Ctrl+Shift+click: hide all nodes not directly connected to this node
-  // - Cmd/Ctrl+click: toggle this single node's hidden state
-  const handleMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      if ((event.metaKey || event.ctrlKey) && nodeId) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (event.shiftKey && onHideUnconnectedNodes) {
-          // Cmd/Ctrl+Shift+click: hide unconnected nodes
-          onHideUnconnectedNodes(nodeId);
-        } else if (onToggleNodeHidden) {
-          // Cmd/Ctrl+click: toggle single node
-          onToggleNodeHidden(nodeId);
-        }
-      }
-    },
-    [nodeId, onToggleNodeHidden, onHideUnconnectedNodes]
-  );
-
-  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
-  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
-
-  // Show tooltip when:
-  // 1. Hovering + not dragging + shift key pressed (always works), OR
-  // 2. Node is selected AND not in edit mode (read-only selection shows tooltip)
-  const showTooltip =
-    tooltipsEnabled && ((isHovered && !dragging && shiftKeyPressed) || (!editable && !!selected));
-
-  return {
-    nodeRef,
-    nodeId,
-    isHovered,
-    showTooltip,
-    handleMouseDown,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleResizeEnd,
-  };
-}