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

package/src/stories/ValidatedExecution.stories.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { GraphRenderer } from '../components/GraphRenderer';
+import { TestEventPanel } from '../components/TestEventPanel';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import executionCanvas from '../../../../.principal-views/graph-converter-execution.otel.canvas';
+import validatedSpans from './data/graph-converter-validated-execution.json';
+
+const meta = {
+  title: 'Features/Validated Execution',
+  component: GraphRenderer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Demonstrates type-safe event emission with schema validation. The canvas defines expected events, and production code is validated against this schema. Shows how events match the schema defined in graph-converter-execution.otel.canvas.',
+      },
+    },
+  },
+  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>;
+
+/**
+ * Graph visualization of the execution flow with event schema definitions.
+ *
+ * This canvas defines:
+ * - `graph-converter` node with 5 event types
+ * - `validation` node with 2 event types
+ * - `graph-output` node with 1 event type
+ *
+ * Each event type has a schema defining:
+ * - Required/optional fields
+ * - Field types (string, number, boolean, etc.)
+ * - Field descriptions
+ *
+ * See `.principal-views/graph-converter-execution.otel.canvas` for the full schema.
+ */
+export const ExecutionFlow: Story = {
+  args: {
+    canvas: executionCanvas as ExtendedCanvas,
+    showControls: true,
+  },
+};
+
+/**
+ * Event panel showing validated execution data.
+ *
+ * These events were emitted using `createValidatedSpanEmitter()` which:
+ * - Validates events against the canvas schema
+ * - Ensures required fields are present
+ * - Checks field types match the schema
+ * - Throws errors in strict mode if validation fails
+ *
+ * All events in this panel passed schema validation.
+ */
+export const ValidatedEvents: Story = {
+  render: () => (
+    <div style={{ width: '800px', height: '100vh' }}>
+      <TestEventPanel
+        spans={validatedSpans as any}
+        currentSpanIndex={0}
+        currentEventIndex={10} // Show all events
+        highlightedPhase={undefined}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Side-by-side view of execution flow and validated events.
+ *
+ * **How it works:**
+ * 1. Canvas defines event schemas (what events should be emitted)
+ * 2. Tests use `createValidatedSpanEmitter()` to emit events
+ * 3. Events are validated against the schema in strict mode
+ * 4. If validation fails, test throws `EventValidationError`
+ * 5. If validation passes, events are emitted and collected
+ *
+ * This ensures production code emits events that match the architecture.
+ */
+export const FlowWithValidation: Story = {
+  render: () => (
+    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
+      {/* Graph Visualization - Left Side */}
+      <div style={{ flex: '0 0 60%', height: '100%', position: 'relative' }}>
+        <GraphRenderer
+          canvas={executionCanvas as ExtendedCanvas}
+          showControls={true}
+        />
+      </div>
+
+      {/* Event Panel - Right Side */}
+      <div style={{ flex: '0 0 40%', height: '100%', borderLeft: '1px solid #333' }}>
+        <div style={{ padding: '20px', color: '#fff', borderBottom: '1px solid #333' }}>
+          <h3 style={{ margin: '0 0 10px 0', fontSize: '16px' }}>
+            Type-Safe Validated Events
+          </h3>
+          <p style={{ margin: 0, fontSize: '12px', color: '#888' }}>
+            Events validated against canvas schema. See{' '}
+            <code>.principal-views/graph-converter-execution.otel.canvas</code>
+          </p>
+        </div>
+        <TestEventPanel
+          spans={validatedSpans as any}
+          currentSpanIndex={0}
+          currentEventIndex={10}
+          highlightedPhase={undefined}
+        />
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Canvas with event schema definitions (JSON view).
+ *
+ * Shows the raw canvas structure including event schemas.
+ * Notice the `pv.events` property on each node defining:
+ * - Event names (e.g., "conversion.started")
+ * - Event descriptions
+ * - Field schemas with types and requirements
+ */
+export const CanvasSchema: Story = {
+  render: () => (
+    <div
+      style={{
+        padding: '20px',
+        color: '#fff',
+        fontFamily: 'monospace',
+        fontSize: '12px',
+        overflow: 'auto',
+        height: '100vh',
+      }}
+    >
+      <h2>Event Schema Definition</h2>
+      <p>
+        This canvas defines event schemas for type-safe telemetry validation.
+      </p>
+      <pre style={{ background: '#1e1e1e', padding: '20px', borderRadius: '8px' }}>
+        {JSON.stringify(executionCanvas, null, 2)}
+      </pre>
+    </div>
+  ),
+};

package/src/stories/data/graph-converter-test-execution.json

@@ -0,0 +1,225 @@
+[
+  {
+    "id": "span-1",
+    "name": "should convert simple config to nodes and edges",
+    "startTime": 1767808091637,
+    "attributes": {
+      "span.kind": "test.case",
+      "test.name": "should convert simple config to nodes and edges",
+      "test.framework": "bun",
+      "test.file": "GraphConverter.test.ts",
+      "test.suite": "GraphConverter",
+      "test.result": "pass"
+    },
+    "events": [
+      {
+        "time": 1767808091637,
+        "name": "setup.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 28,
+          "description": "Creating test configuration with 2 nodes and 1 edge"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "setup.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 68,
+          "config.nodes": 2,
+          "config.edges": 1
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "execution.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 15,
+          "action": "GraphConverter.configToGraph()"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "execution.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 43,
+          "result.nodes.count": 2,
+          "result.edges.count": 1
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "assertion.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 91,
+          "assertions": "Verifying nodes and edges structure"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "assertion.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 114,
+          "assertions.passed": 11,
+          "assertions.failed": 0
+        }
+      }
+    ],
+    "status": "OK",
+    "endTime": 1767808091637,
+    "duration": 0
+  },
+  {
+    "id": "span-2",
+    "name": "should extract manual positions from node types",
+    "startTime": 1767808091637,
+    "attributes": {
+      "span.kind": "test.case",
+      "test.name": "should extract manual positions from node types",
+      "test.framework": "bun",
+      "test.file": "GraphConverter.test.ts",
+      "test.suite": "GraphConverter",
+      "test.result": "pass"
+    },
+    "events": [
+      {
+        "time": 1767808091637,
+        "name": "setup.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 138,
+          "description": "Creating config with manual node positions"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "setup.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 165,
+          "config.nodes": 2,
+          "positions.defined": true
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "execution.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 15,
+          "action": "GraphConverter.configToGraph()"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "execution.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 43,
+          "result.nodes.count": 2
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "assertion.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 184,
+          "assertions": "Verifying positions preserved"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "assertion.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 191,
+          "assertions.passed": 2,
+          "assertions.failed": 0
+        }
+      }
+    ],
+    "status": "OK",
+    "endTime": 1767808091637,
+    "duration": 0
+  },
+  {
+    "id": "span-3",
+    "name": "should handle nodes without positions",
+    "startTime": 1767808091637,
+    "attributes": {
+      "span.kind": "test.case",
+      "test.name": "should handle nodes without positions",
+      "test.framework": "bun",
+      "test.file": "GraphConverter.test.ts",
+      "test.suite": "GraphConverter",
+      "test.result": "pass"
+    },
+    "events": [
+      {
+        "time": 1767808091637,
+        "name": "setup.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 215,
+          "description": "Creating config without positions"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "setup.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 235,
+          "config.nodes": 1,
+          "positions.defined": false
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "execution.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 15,
+          "action": "GraphConverter.configToGraph()"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "execution.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 43,
+          "result.nodes.count": 1
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "assertion.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 254,
+          "assertions": "Verifying position is undefined"
+        }
+      },
+      {
+        "time": 1767808091637,
+        "name": "assertion.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.test.ts",
+          "code.lineno": 260,
+          "assertions.passed": 1,
+          "assertions.failed": 0
+        }
+      }
+    ],
+    "status": "OK",
+    "endTime": 1767808091637,
+    "duration": 0
+  }
+]

package/src/stories/data/graph-converter-validated-execution.json

@@ -0,0 +1,58 @@
+[
+  {
+    "id": "span-1",
+    "name": "graph conversion with validation",
+    "startTime": 1767809672129,
+    "attributes": {
+      "span.kind": "test.case",
+      "test.name": "graph conversion with validation",
+      "test.framework": "bun",
+      "test.file": "event-validation.test.ts",
+      "test.suite": "Event Schema Validation"
+    },
+    "events": [
+      {
+        "time": 1767809672129,
+        "name": "conversion.started",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 15,
+          "config.nodeTypes": 2,
+          "config.edgeTypes": 1
+        }
+      },
+      {
+        "time": 1767809672129,
+        "name": "conversion.processingNodes",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 28,
+          "nodes.count": 2
+        }
+      },
+      {
+        "time": 1767809672129,
+        "name": "conversion.processingEdges",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 45,
+          "edges.count": 1
+        }
+      },
+      {
+        "time": 1767809672129,
+        "name": "conversion.complete",
+        "attributes": {
+          "code.filepath": "GraphConverter.ts",
+          "code.lineno": 60,
+          "result.nodes.count": 2,
+          "result.edges.count": 1,
+          "duration.ms": 5
+        }
+      }
+    ],
+    "status": "OK",
+    "endTime": 1767809672129,
+    "duration": 0
+  }
+]