@principal-ai/principal-view-react 0.14.14 → 0.14.16

package/src/stories/SequenceDiagram.stories.tsx

@@ -0,0 +1,306 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SequenceDiagramRenderer } from '../components/SequenceDiagramRenderer';
+import type { SequenceEvent, SequenceEdge } from '../hooks/useSequenceLayout';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+
+const meta = {
+  title: 'Components/SequenceDiagram',
+  component: SequenceDiagramRenderer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ padding: 20, height: '100vh', boxSizing: 'border-box' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof SequenceDiagramRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Sample Data
+// ============================================================================
+
+/**
+ * Simple authentication flow across two namespaces
+ */
+const simpleAuthFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'auth.validation.started', label: 'Validation Started' },
+    { id: '2', name: 'database.query.findUser', label: 'Find User' },
+    { id: '3', name: 'auth.validation.completed', label: 'Validation Completed' },
+    { id: '4', name: 'auth.token.generated', label: 'Token Generated' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+  ],
+};
+
+/**
+ * More complex flow with multiple actors
+ */
+const complexOrderFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'api.request.received', label: 'Request Received' },
+    { id: '2', name: 'auth.session.validate', label: 'Validate Session' },
+    { id: '3', name: 'order.validation.started', label: 'Validate Order' },
+    { id: '4', name: 'inventory.check.availability', label: 'Check Stock' },
+    { id: '5', name: 'order.validation.completed', label: 'Order Valid' },
+    { id: '6', name: 'payment.charge.initiated', label: 'Initiate Charge' },
+    { id: '7', name: 'payment.charge.completed', label: 'Charge Complete' },
+    { id: '8', name: 'order.fulfillment.started', label: 'Start Fulfillment' },
+    { id: '9', name: 'inventory.reserve.items', label: 'Reserve Items' },
+    { id: '10', name: 'notification.email.sent', label: 'Confirmation Email' },
+    { id: '11', name: 'api.response.sent', label: 'Response Sent' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+    { id: 'e4', fromEvent: '4', toEvent: '5' },
+    { id: 'e5', fromEvent: '5', toEvent: '6' },
+    { id: 'e6', fromEvent: '6', toEvent: '7' },
+    { id: 'e7', fromEvent: '7', toEvent: '8' },
+    { id: 'e8', fromEvent: '8', toEvent: '9' },
+    { id: 'e9', fromEvent: '9', toEvent: '10' },
+    { id: 'e10', fromEvent: '10', toEvent: '11' },
+  ],
+};
+
+/**
+ * Flow with hierarchical namespaces (sub-namespaces)
+ */
+const hierarchicalFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'auth.login.started', label: 'Login Started' },
+    { id: '2', name: 'auth.login.validation.credentials', label: 'Check Credentials' },
+    { id: '3', name: 'auth.login.validation.mfa', label: 'Check MFA' },
+    { id: '4', name: 'auth.login.session.create', label: 'Create Session' },
+    { id: '5', name: 'auth.login.completed', label: 'Login Completed' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+    { id: 'e4', fromEvent: '4', toEvent: '5' },
+  ],
+};
+
+/**
+ * Flow with same-namespace sequential events
+ */
+const sameNamespaceFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'processor.step1', label: 'Step 1' },
+    { id: '2', name: 'processor.step2', label: 'Step 2' },
+    { id: '3', name: 'processor.step3', label: 'Step 3' },
+    { id: '4', name: 'external.callback', label: 'External Callback' },
+    { id: '5', name: 'processor.step4', label: 'Step 4' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+    { id: 'e4', fromEvent: '4', toEvent: '5' },
+  ],
+};
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/**
+ * Basic two-namespace flow showing authentication
+ */
+export const SimpleFlow: Story = {
+  args: {
+    events: simpleAuthFlow.events,
+    edges: simpleAuthFlow.edges,
+    height: 500,
+  },
+};
+
+/**
+ * Complex multi-actor e-commerce order flow
+ */
+export const ComplexFlow: Story = {
+  args: {
+    events: complexOrderFlow.events,
+    edges: complexOrderFlow.edges,
+    height: 700,
+  },
+};
+
+/**
+ * Flow with hierarchical namespaces to test sub-namespace handling
+ */
+export const HierarchicalNamespaces: Story = {
+  args: {
+    events: hierarchicalFlow.events,
+    edges: hierarchicalFlow.edges,
+    height: 500,
+    layoutOptions: {
+      namespaceStrategy: 'all-but-last',
+    },
+  },
+};
+
+/**
+ * Same story but with first-segment namespace strategy
+ */
+export const HierarchicalCollapsedToFirst: Story = {
+  args: {
+    events: hierarchicalFlow.events,
+    edges: hierarchicalFlow.edges,
+    height: 500,
+    layoutOptions: {
+      namespaceStrategy: 'first',
+    },
+  },
+};
+
+/**
+ * Flow testing same-namespace edge rendering
+ */
+export const SameNamespaceEdges: Story = {
+  args: {
+    events: sameNamespaceFlow.events,
+    edges: sameNamespaceFlow.edges,
+    height: 500,
+  },
+};
+
+/**
+ * Interactive example with collapse toggle
+ */
+export const WithCollapseToggle: Story = {
+  render: () => {
+    const [collapsed, setCollapsed] = useState<string[]>([]);
+
+    const handleToggle = (namespace: string) => {
+      setCollapsed((prev) =>
+        prev.includes(namespace)
+          ? prev.filter((n) => n !== namespace)
+          : [...prev, namespace]
+      );
+    };
+
+    return (
+      <div>
+        <div style={{ marginBottom: 16 }}>
+          <strong>Collapsed namespaces:</strong>{' '}
+          {collapsed.length ? collapsed.join(', ') : 'none'}
+          <br />
+          <small>Click on lane headers with children to toggle collapse</small>
+        </div>
+        <SequenceDiagramRenderer
+          events={hierarchicalFlow.events}
+          edges={hierarchicalFlow.edges}
+          height={500}
+          layoutOptions={{
+            collapsedNamespaces: collapsed,
+          }}
+          onToggleCollapse={handleToggle}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Custom layout options
+ */
+export const CustomLayout: Story = {
+  args: {
+    events: simpleAuthFlow.events,
+    edges: simpleAuthFlow.edges,
+    height: 500,
+    layoutOptions: {
+      laneWidth: 250,
+      laneGap: 80,
+      eventSpacing: 100,
+      nodeWidth: 220,
+      nodeHeight: 60,
+    },
+  },
+};
+
+/**
+ * Arrow-centric mode: minimal markers with labels on arrows
+ * This is the traditional UML sequence diagram style
+ */
+export const ArrowCentric: Story = {
+  args: {
+    events: simpleAuthFlow.events,
+    edges: simpleAuthFlow.edges,
+    height: 500,
+    layoutOptions: {
+      arrowCentric: true,
+    },
+  },
+};
+
+/**
+ * Arrow-centric with complex multi-actor flow
+ */
+export const ArrowCentricComplex: Story = {
+  args: {
+    events: complexOrderFlow.events,
+    edges: complexOrderFlow.edges,
+    height: 700,
+    layoutOptions: {
+      arrowCentric: true,
+      eventSpacing: 60,
+    },
+  },
+};
+
+/**
+ * Compact layout for smaller diagrams
+ */
+export const CompactLayout: Story = {
+  args: {
+    events: simpleAuthFlow.events,
+    edges: simpleAuthFlow.edges,
+    height: 400,
+    layoutOptions: {
+      laneWidth: 150,
+      laneGap: 30,
+      eventSpacing: 60,
+      nodeWidth: 130,
+      nodeHeight: 40,
+    },
+  },
+};
+
+/**
+ * Empty state
+ */
+export const EmptyDiagram: Story = {
+  args: {
+    events: [],
+    edges: [],
+    height: 300,
+  },
+};
+
+/**
+ * Single event (edge case)
+ */
+export const SingleEvent: Story = {
+  args: {
+    events: [{ id: '1', name: 'system.startup', label: 'System Startup' }],
+    edges: [],
+    height: 300,
+  },
+};

package/src/stories/dashboard/DashboardRenderer.stories.tsx

@@ -0,0 +1,263 @@
+/**
+ * DashboardRenderer Stories
+ *
+ * Storybook stories for testing and iterating on dashboard rendering.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { DashboardRenderer } from '../../components/dashboard';
+import activityFeedDashboard from './sample-dashboards/activity-feed-analytics.dashboard.json';
+import type { DashboardDefinition } from '../../components/dashboard';
+
+const meta: Meta<typeof DashboardRenderer> = {
+  title: 'Dashboard/DashboardRenderer',
+  component: DashboardRenderer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ minHeight: '100vh' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof DashboardRenderer>;
+
+/**
+ * Activity Feed Analytics Dashboard
+ *
+ * Full dashboard example based on the web-ade activity feed use case.
+ * Shows mobile vs desktop view percentages, traffic trends, and engagement metrics.
+ */
+export const ActivityFeedAnalytics: Story = {
+  args: {
+    dashboard: activityFeedDashboard as DashboardDefinition,
+  },
+};
+
+/**
+ * With Metric Click Handler
+ *
+ * Demonstrates handling metric clicks - useful for drill-down navigation.
+ */
+export const WithClickHandlers: Story = {
+  args: {
+    dashboard: activityFeedDashboard as DashboardDefinition,
+    onMetricClick: (metricId) => {
+      alert(`Clicked metric: ${metricId}`);
+    },
+    onSourceClick: (source) => {
+      alert(`Navigate to: ${source.storyboard}/${source.workflow}`);
+    },
+  },
+};
+
+/**
+ * Minimal Dashboard
+ *
+ * A simple dashboard with just a few metrics.
+ */
+export const MinimalDashboard: Story = {
+  args: {
+    dashboard: {
+      id: 'minimal',
+      name: 'Minimal Dashboard',
+      description: 'A simple dashboard with basic metrics',
+      metrics: [
+        {
+          id: 'total-requests',
+          name: 'Total Requests',
+          type: 'counter',
+          unit: 'requests',
+          sources: [{ storyboard: 'api', workflow: 'request-handler' }],
+          query: { derivation: 'count', window: '1h' },
+          _mockData: { current: 145892, previous: 132456, trend: 'up' },
+        },
+        {
+          id: 'error-rate',
+          name: 'Error Rate',
+          type: 'gauge',
+          unit: '%',
+          sources: [{ storyboard: 'api', workflow: 'request-handler' }],
+          query: { derivation: 'error_rate', window: '1h' },
+          thresholds: { warning: 1.0, critical: 5.0 },
+          _mockData: { current: 0.3, previous: 0.5, trend: 'down' },
+        },
+        {
+          id: 'p99-latency',
+          name: 'P99 Latency',
+          type: 'histogram',
+          unit: 'ms',
+          sources: [{ storyboard: 'api', workflow: 'request-handler' }],
+          query: { derivation: 'p99' },
+          _mockData: { current: 245, previous: 312, trend: 'down' },
+        },
+      ],
+      layout: {
+        rows: [
+          {
+            title: 'Key Metrics',
+            panels: [
+              { id: 'total-requests', span: 4 },
+              { id: 'error-rate', span: 4 },
+              { id: 'p99-latency', span: 4 },
+            ],
+          },
+        ],
+      },
+    } as DashboardDefinition,
+  },
+};
+
+/**
+ * Time Series Focus
+ *
+ * Dashboard focused on time series visualizations.
+ */
+export const TimeSeriesFocus: Story = {
+  args: {
+    dashboard: {
+      id: 'time-series',
+      name: 'Time Series Dashboard',
+      description: 'Focus on time-based trends',
+      metrics: [
+        {
+          id: 'hourly-requests',
+          name: 'Hourly Requests',
+          type: 'counter',
+          unit: 'requests',
+          sources: [{ storyboard: 'api', workflow: 'handler' }],
+          query: { derivation: 'count', timeGroup: 'hour' },
+          display: { component: 'LineChart', size: 'large' },
+          _mockData: {
+            series: [
+              { date: '00:00', value: 1200 },
+              { date: '04:00', value: 800 },
+              { date: '08:00', value: 2400 },
+              { date: '12:00', value: 3200 },
+              { date: '16:00', value: 2800 },
+              { date: '20:00', value: 1800 },
+            ],
+          },
+        },
+        {
+          id: 'requests-by-status',
+          name: 'Requests by Status',
+          type: 'counter',
+          unit: 'requests',
+          sources: [{ storyboard: 'api', workflow: 'handler' }],
+          query: { derivation: 'count', groupBy: ['status'], timeGroup: 'hour' },
+          display: { component: 'StackedBarChart', size: 'large' },
+          _mockData: {
+            series: [
+              { date: '00:00', success: 1150, error: 50 },
+              { date: '04:00', success: 780, error: 20 },
+              { date: '08:00', success: 2300, error: 100 },
+              { date: '12:00', success: 3050, error: 150 },
+              { date: '16:00', success: 2650, error: 150 },
+              { date: '20:00', success: 1720, error: 80 },
+            ],
+          },
+        },
+      ],
+      layout: {
+        rows: [
+          {
+            title: 'Traffic Over Time',
+            panels: [{ id: 'hourly-requests', span: 12 }],
+          },
+          {
+            title: 'Status Breakdown',
+            panels: [{ id: 'requests-by-status', span: 12 }],
+          },
+        ],
+      },
+    } as DashboardDefinition,
+  },
+};
+
+/**
+ * With Thresholds
+ *
+ * Shows metrics with warning and critical thresholds.
+ */
+export const WithThresholds: Story = {
+  args: {
+    dashboard: {
+      id: 'thresholds',
+      name: 'SLO Dashboard',
+      description: 'Service level objectives with thresholds',
+      metrics: [
+        {
+          id: 'availability',
+          name: 'Availability',
+          type: 'gauge',
+          unit: '%',
+          sources: [{ storyboard: 'infra', workflow: 'health-check' }],
+          query: { derivation: 'success_rate' },
+          thresholds: { warning: 99.9, critical: 99.0 },
+          _mockData: { current: 99.95, trend: 'flat' },
+        },
+        {
+          id: 'error-budget',
+          name: 'Error Budget Remaining',
+          type: 'gauge',
+          unit: '%',
+          sources: [{ storyboard: 'infra', workflow: 'slo-tracker' }],
+          query: { derivation: 'percentage' },
+          thresholds: { warning: 25, critical: 10 },
+          _mockData: { current: 67.3, previous: 72.1, trend: 'down' },
+        },
+        {
+          id: 'latency-slo',
+          name: 'Latency SLO',
+          type: 'gauge',
+          unit: '%',
+          description: 'Percentage of requests under 200ms',
+          sources: [{ storyboard: 'api', workflow: 'handler' }],
+          query: { derivation: 'percentage', filter: 'duration < 200' },
+          thresholds: { warning: 95, critical: 90 },
+          _mockData: { current: 97.2, previous: 96.8, trend: 'up' },
+        },
+      ],
+      layout: {
+        rows: [
+          {
+            title: 'Service Level Objectives',
+            panels: [
+              { id: 'availability', span: 4 },
+              { id: 'error-budget', span: 4 },
+              { id: 'latency-slo', span: 4 },
+            ],
+          },
+        ],
+      },
+    } as DashboardDefinition,
+  },
+};
+
+/**
+ * Empty Dashboard
+ *
+ * Edge case: dashboard with no metrics.
+ */
+export const EmptyDashboard: Story = {
+  args: {
+    dashboard: {
+      id: 'empty',
+      name: 'Empty Dashboard',
+      description: 'This dashboard has no metrics configured yet',
+      metrics: [],
+      layout: {
+        rows: [],
+      },
+    } as DashboardDefinition,
+  },
+};