@principal-ai/principal-view-react 0.7.9 → 0.7.11

package/src/components/TestEventPanel.tsx

@@ -0,0 +1,287 @@
+import React, { useState } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { HelpCircle } from 'lucide-react';
+
+interface SpanEvent {
+  time: number;
+  name: string;
+  attributes: Record<string, string | number | boolean>;
+}
+
+interface TestSpan {
+  id: string;
+  name: string;
+  startTime: number;
+  endTime?: number;
+  duration?: number;
+  attributes: Record<string, string | number | boolean>;
+  events: SpanEvent[];
+  status: 'OK' | 'ERROR';
+  errorMessage?: string;
+}
+
+export interface TestEventPanelProps {
+  spans: TestSpan[];
+  currentSpanIndex: number;
+  currentEventIndex: number;
+  highlightedPhase?: string; // 'setup' | 'execution' | 'assertion'
+}
+
+export const TestEventPanel: React.FC<TestEventPanelProps> = ({
+  spans,
+  currentSpanIndex,
+  currentEventIndex,
+  highlightedPhase,
+}) => {
+  const { theme } = useTheme();
+  const [showHelp, setShowHelp] = useState(false);
+  const currentSpan = spans[currentSpanIndex];
+  const eventsUpToNow = currentSpan?.events.slice(0, currentEventIndex + 1) || [];
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        padding: '20px',
+        fontFamily: theme.fonts.monospace,
+        fontSize: '14px',
+        overflow: 'auto',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }}>
+        <div style={{ fontWeight: 'bold', fontSize: '18px' }}>
+          Wide Event Pattern - Code Journey
+        </div>
+        <button
+          onClick={() => setShowHelp(true)}
+          style={{
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '4px',
+            display: 'flex',
+            alignItems: 'center',
+            color: theme.colors.textMuted,
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = theme.colors.text;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = theme.colors.textMuted;
+          }}
+        >
+          <HelpCircle size={20} />
+        </button>
+      </div>
+      <div style={{ fontSize: '13px', color: theme.colors.textMuted, marginBottom: '15px' }}>
+        Test: {currentSpan?.name || 'Loading...'}
+      </div>
+
+      {/* Help Modal */}
+      {showHelp && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 9999,
+          }}
+          onClick={() => setShowHelp(false)}
+        >
+          <div
+            style={{
+              backgroundColor: theme.colors.background,
+              color: theme.colors.text,
+              padding: '24px',
+              borderRadius: '8px',
+              maxWidth: '600px',
+              border: `1px solid ${theme.colors.border}`,
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div style={{ fontWeight: 'bold', fontSize: '18px', marginBottom: '16px' }}>
+              How to Read This Panel
+            </div>
+            <div style={{ fontSize: '14px', marginBottom: '16px', lineHeight: '1.6' }}>
+              <p style={{ marginBottom: '12px' }}>
+                <strong>Watch how execution flows through files:</strong>
+              </p>
+              <ul style={{ marginLeft: '20px', marginBottom: '16px' }}>
+                <li style={{ marginBottom: '8px' }}>
+                  <span style={{ color: '#60a5fa' }}>Blue = Test file</span>
+                </li>
+                <li>
+                  <span style={{ color: '#4ade80' }}>Green → Code under test</span>
+                </li>
+              </ul>
+              <p style={{ marginBottom: '12px' }}>
+                <strong>Span Context (Static)</strong>
+              </p>
+              <pre
+                style={{
+                  background: theme.colors.surface,
+                  padding: '12px',
+                  borderRadius: '4px',
+                  fontSize: '13px',
+                  overflow: 'auto',
+                }}
+              >
+{`{
+  "test.file": "GraphConverter.test.ts",
+  "test.suite": "GraphConverter",
+  "test.result": "pass"
+}`}
+              </pre>
+            </div>
+            <button
+              onClick={() => setShowHelp(false)}
+              style={{
+                padding: '8px 16px',
+                backgroundColor: theme.colors.primary,
+                color: theme.colors.background,
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '14px',
+                fontWeight: 500,
+              }}
+            >
+              Got it
+            </button>
+          </div>
+        </div>
+      )}
+
+      {currentSpan && (
+        <>
+          {/* Event Timeline (context mutations) */}
+          <div>
+            <div
+              style={{
+                color: '#4ade80',
+                fontWeight: 'bold',
+                marginBottom: '8px',
+                fontSize: '15px',
+              }}
+            >
+              Event Timeline (Context Mutations)
+            </div>
+            {eventsUpToNow.map((event, idx) => {
+              const filepath = event.attributes['code.filepath'] as string;
+              const lineno = event.attributes['code.lineno'] as number;
+              const isCodeUnderTest = filepath && filepath !== 'GraphConverter.test.ts';
+
+              // Determine which phase this event belongs to
+              const eventPhase = event.name.split('.')[0]; // 'setup', 'execution', 'assertion'
+              const isHighlighted = highlightedPhase === eventPhase;
+
+              return (
+                <div
+                  key={idx}
+                  style={{
+                    marginBottom: '12px',
+                    paddingBottom: '12px',
+                    borderBottom: idx < eventsUpToNow.length - 1 ? `1px solid ${theme.colors.border}` : 'none',
+                    opacity: highlightedPhase && !isHighlighted ? 0.4 : 1,
+                    transition: 'opacity 0.2s ease',
+                    transform: isHighlighted ? 'scale(1.02)' : 'scale(1)',
+                    backgroundColor: isHighlighted ? theme.colors.surface : 'transparent',
+                    padding: isHighlighted ? '8px' : '0',
+                    borderRadius: '4px',
+                  }}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      marginBottom: '4px',
+                      gap: '8px',
+                    }}
+                  >
+                    <div style={{ color: '#f59e0b', fontSize: '13px', flexShrink: 0 }}>
+                      {idx + 1}. {event.name}
+                    </div>
+                    {filepath && (
+                      <div
+                        style={{
+                          fontSize: '12px',
+                          color: isCodeUnderTest ? '#4ade80' : '#60a5fa',
+                          fontFamily: 'monospace',
+                          background: isCodeUnderTest ? '#064e3b' : '#1e3a8a',
+                          padding: '2px 6px',
+                          borderRadius: '3px',
+                          flexShrink: 1,
+                          minWidth: 0,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {isCodeUnderTest && '→ '}
+                        {filepath}:{lineno}
+                      </div>
+                    )}
+                  </div>
+                  <pre
+                    style={{
+                      background: theme.colors.surface,
+                      padding: '8px',
+                      borderRadius: '4px',
+                      margin: 0,
+                      fontSize: '12px',
+                      lineHeight: '1.4',
+                      overflow: 'auto',
+                      maxWidth: '100%',
+                    }}
+                  >
+                    {JSON.stringify(
+                      Object.fromEntries(
+                        Object.entries(event.attributes).filter(
+                          ([key]) => key !== 'code.filepath' && key !== 'code.lineno'
+                        )
+                      ),
+                      null,
+                      2
+                    )}
+                  </pre>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      <div
+        style={{
+          marginTop: '20px',
+          paddingTop: '15px',
+          borderTop: `1px solid ${theme.colors.border}`,
+          fontSize: '13px',
+          color: theme.colors.textMuted,
+        }}
+      >
+        <div style={{ marginBottom: '8px' }}>
+          <strong>Total tests:</strong> {spans.length}
+        </div>
+        <div style={{ marginBottom: '8px' }}>
+          <strong>Pattern:</strong> One span per test + event timeline
+        </div>
+        <div>
+          <strong>Status:</strong>{' '}
+          <span style={{ color: '#4ade80' }}>All Passed ✓</span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/index.ts

@@ -52,6 +52,9 @@ export type { NodeInfoPanelProps } from './components/NodeInfoPanel';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 export type { ConfigurationSelectorProps } from './components/ConfigurationSelector';
 
+export { TestEventPanel } from './components/TestEventPanel';
+export type { TestEventPanelProps } from './components/TestEventPanel';
+
 // Export node/edge renderers
 export { GenericNode } from './nodes/GenericNode';
 export type { GenericNodeProps } from './nodes/GenericNode';

package/src/nodes/CustomNode.tsx

@@ -6,6 +6,32 @@ import { resolveIcon } from '../utils/iconResolver';
 import { NodeTooltip } from '../components/NodeTooltip';
 import type { OtelInfo } from '../components/NodeTooltip';
 
+/**
+ * Converts a hex color to a lighter/tinted version (opaque, not transparent)
+ * @param hexColor - Hex color string (e.g., "#FF5733" or "#888")
+ * @param lightness - How much to lighten (0-1), defaults to 0.88 (88% white mixed in)
+ * @returns hex color string
+ */
+function hexToLightColor(hexColor: string, lightness = 0.88): string {
+  // Remove # if present
+  const hex = hexColor.replace('#', '');
+
+  // Parse hex to RGB
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+
+  // Mix with white based on lightness factor
+  // lightness of 0.88 means 88% white + 12% original color
+  const newR = Math.round(r + (255 - r) * lightness);
+  const newG = Math.round(g + (255 - g) * lightness);
+  const newB = Math.round(b + (255 - b) * lightness);
+
+  // Convert back to hex
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
+
 export interface CustomNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: NodeTypeDefinition;
@@ -19,6 +45,8 @@ export interface CustomNodeData extends Record<string, unknown> {
   editable?: boolean;
   // Whether tooltips are enabled (defaults to true)
   tooltipsEnabled?: boolean;
+  // Whether this node is highlighted (e.g., during execution playback)
+  isHighlighted?: boolean;
 }
 
 /**
@@ -41,6 +69,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
     animationDuration = 1000,
     editable = false,
     tooltipsEnabled = true,
+    isHighlighted = false,
   } = nodeProps;
 
   // Extract OTEL info and description for tooltip
@@ -155,7 +184,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
   const getShapeStyles = () => {
     const baseStyles = {
       padding: '12px 16px',
-      backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : 'white',
+      backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : hexToLightColor(fillColor),
       color: '#000',
       border: `2px solid ${hasViolations ? '#D0021B' : strokeColor}`,
       fontSize: '12px',
@@ -171,7 +200,11 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
       alignItems: 'center',
       justifyContent: isGroup ? 'flex-start' : 'center',
       gap: '4px',
-      boxShadow: selected ? `0 0 0 2px ${strokeColor}` : '0 2px 4px rgba(0,0,0,0.1)',
+      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)',
       transition: 'box-shadow 0.2s ease',
       animationDuration: animationType ? `${animationDuration}ms` : undefined,
       boxSizing: 'border-box' as const,
@@ -253,7 +286,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
       }
     : {};
 
-  // Hexagon inner fill styles (white background inset from border)
+  // Hexagon inner fill styles (light color background inset from border)
   const hexagonInnerStyle: React.CSSProperties = isHexagon
     ? {
         position: 'absolute',
@@ -262,7 +295,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
         right: hexagonBorderWidth,
         bottom: hexagonBorderWidth,
         clipPath: hexagonClipPath,
-        backgroundColor: 'white',
+        backgroundColor: hexToLightColor(fillColor),
         color: '#000',
         display: 'flex',
         flexDirection: 'column',
@@ -295,7 +328,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
       }
     : {};
 
-  // Diamond inner fill styles (white background inset from border)
+  // Diamond inner fill styles (light color background inset from border)
   const diamondInnerStyle: React.CSSProperties = isDiamond
     ? {
         position: 'absolute',
@@ -304,7 +337,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
         right: diamondBorderWidth,
         bottom: diamondBorderWidth,
         clipPath: diamondClipPath,
-        backgroundColor: 'white',
+        backgroundColor: hexToLightColor(fillColor),
         color: '#000',
         display: 'flex',
         flexDirection: 'column',

package/src/stories/MultiConfig.stories.tsx

@@ -411,7 +411,7 @@ function MultiConfigDemo() {
 
       {/* Graph visualization */}
       <div style={{ flex: 1 }}>
-        <GraphRenderer canvas={selectedConfig.canvas} showMinimap showControls showBackground />
+        <GraphRenderer canvas={selectedConfig.canvas} showControls showBackground />
       </div>
     </div>
   );

package/src/stories/MultiDirectionalConnections.stories.tsx

@@ -310,7 +310,6 @@ export const Default: Story = {
     canvas: multiDirectionalCanvas,
     width: '100%',
     height: '800px',
-    showMinimap: true,
     showControls: true,
     showBackground: true,
   },

package/src/stories/RealTestExecution.stories.tsx

@@ -0,0 +1,280 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { GraphRenderer } from '../components/GraphRenderer';
+import { TestEventPanel } from '../components/TestEventPanel';
+import type { ExtendedCanvas, GraphEvent } from '@principal-ai/principal-view-core';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import testSpans from './data/graph-converter-test-execution.json';
+
+const meta = {
+  title: 'Features/Real Test Execution',
+  component: GraphRenderer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Visualizes REAL test execution data from instrumented Bun tests using the "wide event" pattern. Shows actual spans with file/line information collected from running GraphConverter.test.ts. Hover over graph nodes to highlight related events in the panel.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ width: '100vw', height: '100vh', background: '#0a0a0a' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof GraphRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Test Execution Flow Canvas
+// ============================================================================
+
+const testExecutionCanvas: ExtendedCanvas = {
+  nodes: [
+    // Test Suite
+    {
+      id: 'test-suite',
+      type: 'text',
+      text: 'GraphConverter Test Suite',
+      x: -100,
+      y: -100,
+      width: 240,
+      height: 80,
+      pv: {
+        nodeType: 'test-suite',
+        name: 'Test Suite',
+        description: 'Collection of GraphConverter tests',
+        shape: 'rectangle',
+        fill: '#3b82f6',
+      },
+    },
+
+    // Test Phase Nodes
+    {
+      id: 'setup-phase',
+      type: 'text',
+      text: 'Setup',
+      x: -250,
+      y: 50,
+      width: 120,
+      height: 80,
+      pv: {
+        nodeType: 'test-phase',
+        name: 'Setup Phase',
+        description: 'Test data preparation',
+        shape: 'hexagon',
+        fill: '#10b981',
+      },
+    },
+    {
+      id: 'execution-phase',
+      type: 'text',
+      text: 'Execution',
+      x: -80,
+      y: 50,
+      width: 120,
+      height: 80,
+      pv: {
+        nodeType: 'test-phase',
+        name: 'Execution Phase',
+        description: 'Code under test runs',
+        shape: 'hexagon',
+        fill: '#f59e0b',
+      },
+    },
+    {
+      id: 'assertion-phase',
+      type: 'text',
+      text: 'Assertion',
+      x: 90,
+      y: 50,
+      width: 120,
+      height: 80,
+      pv: {
+        nodeType: 'test-phase',
+        name: 'Assertion Phase',
+        description: 'Verify results',
+        shape: 'hexagon',
+        fill: '#8b5cf6',
+      },
+    },
+
+    // Result Node
+    {
+      id: 'test-result',
+      type: 'text',
+      text: 'Test Result',
+      x: -100,
+      y: 200,
+      width: 240,
+      height: 80,
+      pv: {
+        nodeType: 'result',
+        name: 'Test Result',
+        description: 'Pass/Fail outcome',
+        shape: 'rectangle',
+        fill: '#10b981',
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'suite-to-setup',
+      fromNode: 'test-suite',
+      toNode: 'setup-phase',
+      fromSide: 'bottom',
+      toSide: 'top',
+      label: 'start test',
+      pv: {
+        edgeType: 'flow',
+        style: 'solid',
+      },
+    },
+    {
+      id: 'setup-to-execution',
+      fromNode: 'setup-phase',
+      toNode: 'execution-phase',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'data ready',
+      pv: {
+        edgeType: 'flow',
+        style: 'solid',
+      },
+    },
+    {
+      id: 'execution-to-assertion',
+      fromNode: 'execution-phase',
+      toNode: 'assertion-phase',
+      fromSide: 'right',
+      toSide: 'left',
+      label: 'got result',
+      pv: {
+        edgeType: 'flow',
+        style: 'solid',
+      },
+    },
+    {
+      id: 'assertion-to-result',
+      fromNode: 'assertion-phase',
+      toNode: 'test-result',
+      fromSide: 'bottom',
+      toSide: 'top',
+      label: 'complete',
+      pv: {
+        edgeType: 'flow',
+        style: 'solid',
+      },
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Test Execution Flow',
+    description: 'Visualizes the flow of test execution through phases',
+  },
+};
+
+// ============================================================================
+// Interactive Story (No Animation)
+// ============================================================================
+
+const AnimatedTestExecution = () => {
+  const [events] = useState<GraphEvent[]>([]);
+  const [currentSpanIndex] = useState(0);
+  // Show all events by default - set to a large number
+  const [currentEventIndex] = useState(999);
+  const [highlightedPhase, setHighlightedPhase] = useState<string | undefined>();
+
+  return (
+    <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>
+      {/* Graph Visualization - Left Side */}
+      <div
+        style={{ flex: '0 0 60%', height: '100%', position: 'relative' }}
+        onMouseLeave={() => setHighlightedPhase(undefined)}
+      >
+        <div
+          style={{ width: '100%', height: '100%' }}
+          onMouseOver={(e) => {
+            // Check if hovering over a phase node
+            const target = e.target as HTMLElement;
+            const textContent = target.textContent;
+            if (textContent === 'Setup') setHighlightedPhase('setup');
+            else if (textContent === 'Execution') setHighlightedPhase('execution');
+            else if (textContent === 'Assertion') setHighlightedPhase('assertion');
+          }}
+        >
+          <GraphRenderer
+            canvas={testExecutionCanvas}
+            showControls={true}
+            events={events}
+          />
+        </div>
+      </div>
+
+      {/* Event Panel - Right Side */}
+      <div style={{ flex: '0 0 40%', height: '100%', borderLeft: `1px solid #333`, overflow: 'hidden' }}>
+        <TestEventPanel
+          spans={testSpans as any}
+          currentSpanIndex={currentSpanIndex}
+          currentEventIndex={currentEventIndex}
+          highlightedPhase={highlightedPhase}
+        />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Interactive visualization of real test execution data using the "wide event" pattern.
+ *
+ * This demonstrates the key concept from loggingsucks.com:
+ * - ONE comprehensive span per test (not multiple child spans)
+ * - Events show the narrative of what happened during execution
+ * - Context accumulates through event attributes with file/line information
+ * - Easy to search by test.name to get full execution story
+ *
+ * **Interaction:**
+ * - Hover over graph nodes (Setup, Execution, Assertion) to highlight related events
+ * - Watch the code journey: blue = test file, green = code under test
+ * - All events are shown immediately for easy review
+ */
+export const Animated: Story = {
+  render: () => <AnimatedTestExecution />,
+};
+
+/**
+ * Static view of the test execution flow showing phases.
+ */
+export const StaticView: Story = {
+  args: {
+    canvas: testExecutionCanvas,
+    showControls: true,
+  },
+};
+
+/**
+ * Event panel component showing test execution narrative with file/line information.
+ *
+ * Shows how events accumulate context as tests execute, with automatic file/line
+ * capture from stack traces and manual override for code under test.
+ */
+export const EventPanelOnly: StoryObj = {
+  render: () => (
+    <div style={{ width: '600px', height: '100vh' }}>
+      <TestEventPanel
+        spans={testSpans as any}
+        currentSpanIndex={0}
+        currentEventIndex={999} // Show all events
+        highlightedPhase={undefined}
+      />
+    </div>
+  ),
+};