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

package/src/components/TestEventPanel.tsx

@@ -0,0 +1,214 @@
+import React from '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 currentSpan = spans[currentSpanIndex];
+  const eventsUpToNow = currentSpan?.events.slice(0, currentEventIndex + 1) || [];
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#1a1a1a',
+        color: '#ffffff',
+        padding: '20px',
+        fontFamily: 'monospace',
+        fontSize: '12px',
+        overflow: 'auto',
+      }}
+    >
+      <div style={{ fontWeight: 'bold', marginBottom: '15px', fontSize: '14px' }}>
+        📊 Wide Event Pattern - Code Journey
+      </div>
+      <div style={{ fontSize: '10px', color: '#888', marginBottom: '15px' }}>
+        Test: {currentSpan?.name || 'Loading...'}
+        <br />
+        Events: {eventsUpToNow.length} / {currentSpan?.events.length || 0}
+      </div>
+      <div style={{ fontSize: '10px', color: '#a3a3a3', marginBottom: '20px', lineHeight: '1.5' }}>
+        Watch how execution flows through files:
+        <br />
+        <span style={{ color: '#60a5fa' }}>Blue = Test file</span>
+        {' • '}
+        <span style={{ color: '#4ade80' }}>Green → Code under test</span>
+      </div>
+
+      {currentSpan && (
+        <>
+          {/* Span Attributes (static context) */}
+          <div style={{ marginBottom: '20px' }}>
+            <div
+              style={{
+                color: '#60a5fa',
+                fontWeight: 'bold',
+                marginBottom: '8px',
+                fontSize: '11px',
+              }}
+            >
+              Span Context (Static)
+            </div>
+            <pre
+              style={{
+                background: '#0d0d0d',
+                padding: '10px',
+                borderRadius: '4px',
+                margin: 0,
+                fontSize: '10px',
+                lineHeight: '1.5',
+              }}
+            >
+              {JSON.stringify(
+                {
+                  'test.file': currentSpan.attributes['test.file'],
+                  'test.suite': currentSpan.attributes['test.suite'],
+                  'test.result': currentSpan.attributes['test.result'],
+                },
+                null,
+                2
+              )}
+            </pre>
+          </div>
+
+          {/* Event Timeline (context mutations) */}
+          <div>
+            <div
+              style={{
+                color: '#4ade80',
+                fontWeight: 'bold',
+                marginBottom: '8px',
+                fontSize: '11px',
+              }}
+            >
+              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 #333' : 'none',
+                    opacity: highlightedPhase && !isHighlighted ? 0.4 : 1,
+                    transition: 'opacity 0.2s ease',
+                    transform: isHighlighted ? 'scale(1.02)' : 'scale(1)',
+                    backgroundColor: isHighlighted ? '#1e293b' : 'transparent',
+                    padding: isHighlighted ? '8px' : '0',
+                    borderRadius: '4px',
+                  }}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      marginBottom: '4px',
+                    }}
+                  >
+                    <div style={{ color: '#f59e0b', fontSize: '10px' }}>
+                      {idx + 1}. {event.name}
+                    </div>
+                    {filepath && (
+                      <div
+                        style={{
+                          fontSize: '9px',
+                          color: isCodeUnderTest ? '#4ade80' : '#60a5fa',
+                          fontFamily: 'monospace',
+                          background: isCodeUnderTest ? '#064e3b' : '#1e3a8a',
+                          padding: '2px 6px',
+                          borderRadius: '3px',
+                        }}
+                      >
+                        {isCodeUnderTest && '→ '}
+                        {filepath}:{lineno}
+                      </div>
+                    )}
+                  </div>
+                  <pre
+                    style={{
+                      background: '#0d0d0d',
+                      padding: '8px',
+                      borderRadius: '4px',
+                      margin: 0,
+                      fontSize: '9px',
+                      lineHeight: '1.4',
+                    }}
+                  >
+                    {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 #333',
+          fontSize: '10px',
+          color: '#888',
+        }}
+      >
+        <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,24 @@ import { resolveIcon } from '../utils/iconResolver';
 import { NodeTooltip } from '../components/NodeTooltip';
 import type { OtelInfo } from '../components/NodeTooltip';
 
+/**
+ * Converts a hex color to a soft/lighter version with transparency
+ * @param hexColor - Hex color string (e.g., "#FF5733" or "#888")
+ * @param alpha - Transparency level (0-1), defaults to 0.12 for subtle backgrounds
+ * @returns rgba color string
+ */
+function hexToSoftColor(hexColor: string, alpha = 0.12): 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);
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 export interface CustomNodeData extends Record<string, unknown> {
   name: string;
   typeDefinition: NodeTypeDefinition;
@@ -19,6 +37,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 +61,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 +176,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)' : hexToSoftColor(fillColor),
       color: '#000',
       border: `2px solid ${hasViolations ? '#D0021B' : strokeColor}`,
       fontSize: '12px',
@@ -171,7 +192,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 +278,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
       }
     : {};
 
-  // Hexagon inner fill styles (white background inset from border)
+  // Hexagon inner fill styles (soft color background inset from border)
   const hexagonInnerStyle: React.CSSProperties = isHexagon
     ? {
         position: 'absolute',
@@ -262,7 +287,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
         right: hexagonBorderWidth,
         bottom: hexagonBorderWidth,
         clipPath: hexagonClipPath,
-        backgroundColor: 'white',
+        backgroundColor: hexToSoftColor(fillColor),
         color: '#000',
         display: 'flex',
         flexDirection: 'column',
@@ -295,7 +320,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
       }
     : {};
 
-  // Diamond inner fill styles (white background inset from border)
+  // Diamond inner fill styles (soft color background inset from border)
   const diamondInnerStyle: React.CSSProperties = isDiamond
     ? {
         position: 'absolute',
@@ -304,7 +329,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
         right: diamondBorderWidth,
         bottom: diamondBorderWidth,
         clipPath: diamondClipPath,
-        backgroundColor: 'white',
+        backgroundColor: hexToSoftColor(fillColor),
         color: '#000',
         display: 'flex',
         flexDirection: 'column',