@principal-ai/subsystems-react 0.17.0 → 0.19.0

package/src/stories/Audit/NodeDimensionsTesting.stories.tsx

@@ -1,724 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../../components/GraphRenderer';
-import type { ExtendedCanvas, ExtendedCanvasNode } from '@principal-ai/subsystems-core';
-import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-
-const meta = {
-  title: 'Audit/NodeDimensionsTesting',
-  component: GraphRenderer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={defaultEditorTheme}>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-} satisfies Meta<typeof GraphRenderer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Text length variations for testing
- */
-const TEXT_SAMPLES = {
-  veryShort: 'Init',
-  short: 'File Parsed',
-  medium: 'Validation Started',
-  long: 'Canvas Validated Successfully',
-  veryLong: 'Complete Analysis And Validation Process',
-  extraLong: 'Comprehensive System Validation And Analysis Workflow Process',
-};
-
-/**
- * Common dimension presets
- */
-const DIMENSIONS = {
-  tiny: { width: 100, height: 60 },
-  small: { width: 140, height: 80 },
-  medium: { width: 180, height: 100 },
-  mediumWide: { width: 220, height: 100 },
-  large: { width: 200, height: 120 },
-  wide: { width: 260, height: 100 },
-  tall: { width: 140, height: 140 },
-  extraWide: { width: 300, height: 100 },
-  square: { width: 150, height: 150 },
-};
-
-/**
- * Grid layout helper
- */
-const createGrid = (
-  rows: { label: string; textKey: keyof typeof TEXT_SAMPLES }[],
-  cols: { label: string; dimKey: keyof typeof DIMENSIONS }[],
-  startX = 50,
-  startY = 100,
-  gapX = 40,
-  gapY = 40
-) => {
-  const nodes: ExtendedCanvasNode[] = [];
-
-  rows.forEach((row, rowIdx) => {
-    cols.forEach((col, colIdx) => {
-      const dim = DIMENSIONS[col.dimKey];
-      const text = TEXT_SAMPLES[row.textKey];
-
-      nodes.push({
-        id: `${row.textKey}-${col.dimKey}`,
-        type: 'text',
-        x: startX + colIdx * (Math.max(...Object.values(DIMENSIONS).map(d => d.width)) + gapX),
-        y: startY + rowIdx * (Math.max(...Object.values(DIMENSIONS).map(d => d.height)) + gapY),
-        width: dim.width,
-        height: dim.height,
-        text: text,
-        color: '#3b82f6',
-        pv: {
-          name: text,
-          shape: 'roundedRect',
-          icon: 'Circle',
-          otel: {
-            kind: 'event',
-            category: 'operation',
-          },
-        },
-      });
-    });
-  });
-
-  return nodes;
-};
-
-/**
- * Shows all dimension variations with different text lengths in a comprehensive grid
- */
-export const DimensionsGrid: Story = {
-  render: () => {
-    const theme = defaultEditorTheme;
-
-    const rows = [
-      { label: 'Very Short', textKey: 'veryShort' as const },
-      { label: 'Short', textKey: 'short' as const },
-      { label: 'Medium', textKey: 'medium' as const },
-      { label: 'Long', textKey: 'long' as const },
-      { label: 'Very Long', textKey: 'veryLong' as const },
-      { label: 'Extra Long', textKey: 'extraLong' as const },
-    ];
-
-    const cols = [
-      { label: 'Tiny\n100×60', dimKey: 'tiny' as const },
-      { label: 'Small\n140×80', dimKey: 'small' as const },
-      { label: 'Medium\n180×100', dimKey: 'medium' as const },
-      { label: 'Wide\n260×100', dimKey: 'wide' as const },
-      { label: 'Tall\n140×140', dimKey: 'tall' as const },
-    ];
-
-    const canvas: ExtendedCanvas = {
-      nodes: createGrid(rows, cols, 220, 150, 60, 60),
-      edges: [],
-    };
-
-    return (
-      <div style={{ padding: '32px', fontFamily: theme.fonts.body }}>
-        <h1 style={{
-          marginBottom: '16px',
-          fontFamily: theme.fonts.heading,
-          fontSize: theme.fontSizes[7],
-          color: theme.colors.text,
-        }}>
-          Node Dimensions & Text Readability Grid
-        </h1>
-        <p style={{
-          marginBottom: '24px',
-          fontSize: theme.fontSizes[2],
-          color: theme.colors.textSecondary,
-          maxWidth: '1000px',
-        }}>
-          Testing various node dimensions with different text lengths. All nodes use 12px font (theme.fontSizes[0]).
-          Find the optimal width/height combinations for your use case.
-        </p>
-
-        {/* Column headers */}
-        <div style={{
-          position: 'relative',
-          marginBottom: '16px',
-          paddingLeft: '160px',
-          display: 'flex',
-          gap: '60px',
-        }}>
-          {cols.map(col => (
-            <div
-              key={col.dimKey}
-              style={{
-                width: DIMENSIONS[col.dimKey].width,
-                textAlign: 'center',
-                fontSize: theme.fontSizes[0],
-                fontWeight: theme.fontWeights.semibold,
-                color: theme.colors.textSecondary,
-                fontFamily: theme.fonts.monospace,
-                whiteSpace: 'pre-line',
-              }}
-            >
-              {col.label}
-            </div>
-          ))}
-        </div>
-
-        {/* Row labels + Canvas */}
-        <div style={{ display: 'flex' }}>
-          {/* Row labels */}
-          <div style={{
-            width: '160px',
-            paddingTop: '150px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '60px',
-          }}>
-            {rows.map(row => (
-              <div
-                key={row.textKey}
-                style={{
-                  height: DIMENSIONS.medium.height,
-                  display: 'flex',
-                  alignItems: 'center',
-                  fontSize: theme.fontSizes[1],
-                  fontWeight: theme.fontWeights.semibold,
-                  color: theme.colors.textSecondary,
-                }}
-              >
-                <div>
-                  <div style={{ marginBottom: '4px' }}>{row.label}</div>
-                  <div style={{
-                    fontSize: theme.fontSizes[0],
-                    fontFamily: theme.fonts.monospace,
-                    color: theme.colors.textMuted,
-                  }}>
-                    "{TEXT_SAMPLES[row.textKey]}"
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Canvas */}
-          <div style={{
-            backgroundColor: theme.colors.background,
-            border: `2px solid ${theme.colors.border}`,
-            borderRadius: '8px',
-            flex: 1,
-          }}>
-            <GraphRenderer
-              canvas={canvas}
-              height={1100}
-              width="100%"
-            />
-          </div>
-        </div>
-
-        {/* Legend */}
-        <div style={{
-          marginTop: '32px',
-          padding: '20px',
-          backgroundColor: theme.colors.surface,
-          border: `1px solid ${theme.colors.border}`,
-          borderRadius: '8px',
-        }}>
-          <h3 style={{
-            marginBottom: '12px',
-            fontSize: theme.fontSizes[3],
-            color: theme.colors.text,
-          }}>
-            Reading Guide
-          </h3>
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr 1fr',
-            gap: '16px',
-            fontSize: theme.fontSizes[1],
-            color: theme.colors.textSecondary,
-          }}>
-            <div>
-              <strong>✅ Good readability:</strong> Text fits comfortably, no awkward wrapping
-            </div>
-            <div>
-              <strong>⚠️ Tight fit:</strong> Text fits but feels cramped
-            </div>
-            <div>
-              <strong>❌ Too cramped:</strong> Text wraps awkwardly or gets cut off
-            </div>
-            <div>
-              <strong>📏 Too spacious:</strong> Excessive empty space, inefficient use of canvas
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * OTEL Canvas standard sizes - focused comparison
- */
-export const OtelStandardSizes: Story = {
-  render: () => {
-    const theme = defaultEditorTheme;
-
-    const testCases = [
-      {
-        title: 'validation.otel.canvas Standard (200×100)',
-        description: 'Most common size in your validation workflow',
-        nodes: [
-          { text: 'Analysis Started', width: 200, height: 100, x: 100 },
-          { text: 'File Parsed', width: 200, height: 100, x: 350 },
-          { text: 'Canvas Validated', width: 200, height: 100, x: 600 },
-          { text: 'Validation Complete', width: 200, height: 100, x: 850 },
-          { text: 'Very Long Event Name Here', width: 200, height: 100, x: 1100 },
-        ],
-      },
-      {
-        title: 'Wider (220×100) - More breathing room',
-        description: 'Extra 20px width for longer event names',
-        nodes: [
-          { text: 'Analysis Started', width: 220, height: 100, x: 100 },
-          { text: 'File Parsed', width: 220, height: 100, x: 370 },
-          { text: 'Canvas Validated', width: 220, height: 100, x: 640 },
-          { text: 'Validation Complete', width: 220, height: 100, x: 910 },
-          { text: 'Very Long Event Name Here', width: 220, height: 100, x: 1180 },
-        ],
-      },
-      {
-        title: 'Compact (180×90) - Space efficient',
-        description: 'Smaller footprint for dense workflows',
-        nodes: [
-          { text: 'Analysis Started', width: 180, height: 90, x: 100 },
-          { text: 'File Parsed', width: 180, height: 90, x: 330 },
-          { text: 'Canvas Validated', width: 180, height: 90, x: 560 },
-          { text: 'Validation Complete', width: 180, height: 90, x: 790 },
-          { text: 'Very Long Event Name Here', width: 180, height: 90, x: 1020 },
-        ],
-      },
-      {
-        title: 'Tall (200×120) - Extra vertical space',
-        description: 'Better for nodes with state labels or badges',
-        nodes: [
-          { text: 'Analysis Started', width: 200, height: 120, x: 100 },
-          { text: 'File Parsed', width: 200, height: 120, x: 350 },
-          { text: 'Canvas Validated', width: 200, height: 120, x: 600 },
-          { text: 'Validation Complete', width: 200, height: 120, x: 850 },
-          { text: 'Very Long Event Name Here', width: 200, height: 120, x: 1100 },
-        ],
-      },
-    ];
-
-    return (
-      <div style={{ padding: '32px' }}>
-        <h1 style={{
-          marginBottom: '16px',
-          fontSize: theme.fontSizes[7],
-          color: theme.colors.text,
-        }}>
-          OTEL Canvas Standard Sizes Comparison
-        </h1>
-        <p style={{
-          marginBottom: '32px',
-          fontSize: theme.fontSizes[2],
-          color: theme.colors.textSecondary,
-          maxWidth: '900px',
-        }}>
-          Comparing different standard sizes for OTEL event nodes. All use the same event names to show
-          how text fits in each dimension.
-        </p>
-
-        {testCases.map((testCase, idx) => {
-          const canvas: ExtendedCanvas = {
-            nodes: testCase.nodes.map((node, nodeIdx) => ({
-              id: `node-${idx}-${nodeIdx}`,
-              type: 'text',
-              x: node.x,
-              y: 100,
-              width: node.width,
-              height: node.height,
-              text: node.text,
-              color: '#3b82f6',
-              pv: {
-                name: node.text,
-                shape: 'roundedRect',
-                icon: 'Circle',
-                otel: {
-                  kind: 'event',
-                  category: 'operation',
-                },
-              },
-            })),
-            edges: [],
-          };
-
-          return (
-            <div
-              key={idx}
-              style={{
-                marginBottom: '40px',
-                padding: '24px',
-                backgroundColor: theme.colors.surface,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: '8px',
-              }}
-            >
-              <div style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'flex-start',
-                marginBottom: '16px',
-              }}>
-                <div>
-                  <h3 style={{
-                    fontSize: theme.fontSizes[3],
-                    fontWeight: theme.fontWeights.semibold,
-                    color: theme.colors.text,
-                    marginBottom: '4px',
-                  }}>
-                    {testCase.title}
-                  </h3>
-                  <p style={{
-                    fontSize: theme.fontSizes[1],
-                    color: theme.colors.textSecondary,
-                  }}>
-                    {testCase.description}
-                  </p>
-                </div>
-                <div style={{
-                  padding: '8px 12px',
-                  backgroundColor: theme.colors.backgroundSecondary,
-                  borderRadius: '4px',
-                  fontFamily: theme.fonts.monospace,
-                  fontSize: theme.fontSizes[0],
-                  color: theme.colors.textMuted,
-                }}>
-                  {testCase.nodes[0].width} × {testCase.nodes[0].height}
-                </div>
-              </div>
-
-              <div style={{
-                backgroundColor: theme.colors.background,
-                border: `2px solid ${theme.colors.border}`,
-                borderRadius: '6px',
-                overflow: 'hidden',
-              }}>
-                <GraphRenderer
-                  canvas={canvas}
-                  height={300}
-                  width="100%"
-                />
-              </div>
-            </div>
-          );
-        })}
-
-        <div style={{
-          marginTop: '32px',
-          padding: '24px',
-          backgroundColor: theme.colors.backgroundSecondary,
-          border: `2px solid ${theme.colors.primary}`,
-          borderRadius: '8px',
-        }}>
-          <h3 style={{
-            marginBottom: '16px',
-            fontSize: theme.fontSizes[4],
-            color: theme.colors.text,
-          }}>
-            Recommendations
-          </h3>
-          <div style={{
-            fontSize: theme.fontSizes[1],
-            color: theme.colors.text,
-            lineHeight: 1.8,
-          }}>
-            <div style={{ marginBottom: '12px' }}>
-              <strong style={{ color: theme.colors.primary }}>✨ Best for most OTEL events:</strong> 200×100 (current standard)
-              <div style={{ paddingLeft: '20px', color: theme.colors.textSecondary }}>
-                Good balance of readability and space efficiency
-              </div>
-            </div>
-            <div style={{ marginBottom: '12px' }}>
-              <strong style={{ color: theme.colors.primary }}>📏 For longer event names:</strong> 220×100
-              <div style={{ paddingLeft: '20px', color: theme.colors.textSecondary }}>
-                Prevents cramped text, better for descriptive names
-              </div>
-            </div>
-            <div style={{ marginBottom: '12px' }}>
-              <strong style={{ color: theme.colors.primary }}>🎯 For compact workflows:</strong> 180×90
-              <div style={{ paddingLeft: '20px', color: theme.colors.textSecondary }}>
-                Saves space when you have many nodes
-              </div>
-            </div>
-            <div>
-              <strong style={{ color: theme.colors.primary }}>🏷️ With badges/states:</strong> 200×120
-              <div style={{ paddingLeft: '20px', color: theme.colors.textSecondary }}>
-                Extra vertical space for OTEL badges and state labels
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * Different shapes with same dimensions
- */
-export const ShapesWithDimensions: Story = {
-  render: () => {
-    const theme = defaultEditorTheme;
-
-    const shapes: Array<{
-      shape: 'rectangle' | 'roundedRect' | 'circle' | 'hexagon' | 'diamond';
-      label: string;
-    }> = [
-      { shape: 'rectangle', label: 'Rectangle' },
-      { shape: 'roundedRect', label: 'Rounded Rect' },
-      { shape: 'circle', label: 'Circle' },
-      { shape: 'hexagon', label: 'Hexagon' },
-      { shape: 'diamond', label: 'Diamond' },
-    ];
-
-    const dimensions = [
-      { label: 'Small (140×80)', width: 140, height: 80 },
-      { label: 'Medium (180×100)', width: 180, height: 100 },
-      { label: 'Large (220×120)', width: 220, height: 120 },
-    ];
-
-    const textSamples = [
-      'Init',
-      'File Parsed',
-      'Validation Complete',
-    ];
-
-    return (
-      <div style={{ padding: '32px' }}>
-        <h1 style={{
-          marginBottom: '16px',
-          fontSize: theme.fontSizes[7],
-          color: theme.colors.text,
-        }}>
-          Shape & Dimension Combinations
-        </h1>
-        <p style={{
-          marginBottom: '32px',
-          fontSize: theme.fontSizes[2],
-          color: theme.colors.textSecondary,
-        }}>
-          How different shapes utilize the same dimensions with varying text lengths.
-        </p>
-
-        {dimensions.map((dim, dimIdx) => {
-          const canvas: ExtendedCanvas = {
-            nodes: shapes.flatMap((shape, shapeIdx) =>
-              textSamples.map((text, textIdx) => ({
-                id: `${dimIdx}-${shapeIdx}-${textIdx}`,
-                type: 'text',
-                x: 100 + shapeIdx * (dim.width + 60),
-                y: 100 + textIdx * (dim.height + 40),
-                width: dim.width,
-                height: dim.height,
-                text,
-                color: ['#22c55e', '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899'][shapeIdx],
-                pv: {
-                  name: text,
-                  shape: shape.shape,
-                  icon: 'Circle',
-                },
-              }))
-            ),
-            edges: [],
-          };
-
-          return (
-            <div
-              key={dimIdx}
-              style={{
-                marginBottom: '40px',
-                padding: '24px',
-                backgroundColor: theme.colors.surface,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: '8px',
-              }}
-            >
-              <h3 style={{
-                fontSize: theme.fontSizes[3],
-                marginBottom: '16px',
-                color: theme.colors.text,
-              }}>
-                {dim.label}
-              </h3>
-
-              <div style={{
-                display: 'flex',
-                gap: '40px',
-                marginBottom: '16px',
-                paddingLeft: '100px',
-              }}>
-                {shapes.map(shape => (
-                  <div
-                    key={shape.shape}
-                    style={{
-                      width: dim.width,
-                      textAlign: 'center',
-                      fontSize: theme.fontSizes[1],
-                      fontWeight: theme.fontWeights.semibold,
-                      color: theme.colors.textSecondary,
-                    }}
-                  >
-                    {shape.label}
-                  </div>
-                ))}
-              </div>
-
-              <div style={{
-                backgroundColor: theme.colors.background,
-                border: `2px solid ${theme.colors.border}`,
-                borderRadius: '6px',
-              }}>
-                <GraphRenderer
-                  canvas={canvas}
-                  height={500}
-                  width="100%"
-                />
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  },
-};
-
-/**
- * Real-world OTEL workflow with consistent dimensions
- */
-export const RealWorldWorkflow: Story = {
-  render: () => {
-    const theme = defaultEditorTheme;
-
-    const workflows = [
-      {
-        title: 'Current (200×100) - validation.otel.canvas style',
-        width: 200,
-        height: 100,
-      },
-      {
-        title: 'Proposed (220×100) - More readable',
-        width: 220,
-        height: 100,
-      },
-      {
-        title: 'Compact (180×90) - Space efficient',
-        width: 180,
-        height: 90,
-      },
-    ];
-
-    const events = [
-      { name: 'Analysis Started', color: '#22c55e', y: 50 },
-      { name: 'FileTree Built', color: '#3b82f6', y: 200 },
-      { name: 'Packages Discovered', color: '#f59e0b', y: 350 },
-      { name: 'Discovery Complete', color: '#f59e0b', y: 500 },
-      { name: 'Validation Started', color: '#22c55e', y: 650 },
-      { name: 'Canvas Validated', color: '#8b5cf6', y: 800 },
-      { name: 'Validation Complete', color: '#22c55e', y: 950 },
-    ];
-
-    return (
-      <div style={{ padding: '32px' }}>
-        <h1 style={{
-          marginBottom: '16px',
-          fontSize: theme.fontSizes[7],
-          color: theme.colors.text,
-        }}>
-          Real Workflow Comparison
-        </h1>
-        <p style={{
-          marginBottom: '32px',
-          fontSize: theme.fontSizes[2],
-          color: theme.colors.textSecondary,
-        }}>
-          Same workflow rendered with different node dimensions. Compare overall aesthetics and readability.
-        </p>
-
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(3, 1fr)',
-          gap: '24px',
-        }}>
-          {workflows.map((workflow, idx) => {
-            const canvas: ExtendedCanvas = {
-              nodes: events.map((event, eventIdx) => ({
-                id: `${idx}-${eventIdx}`,
-                type: 'text',
-                x: 100,
-                y: event.y,
-                width: workflow.width,
-                height: workflow.height,
-                text: event.name,
-                color: event.color,
-                pv: {
-                  name: event.name,
-                  shape: 'roundedRect',
-                  icon: 'Circle',
-                  otel: {
-                    kind: 'event',
-                    category: eventIdx === 0 || eventIdx === 4 || eventIdx === 6 ? 'lifecycle' : 'operation',
-                  },
-                  sources: eventIdx % 2 === 0 ? ['src/discovery/CanvasDiscovery.ts'] : undefined,
-                },
-              })),
-              edges: events.slice(0, -1).map((_, eventIdx) => ({
-                id: `edge-${idx}-${eventIdx}`,
-                fromNode: `${idx}-${eventIdx}`,
-                toNode: `${idx}-${eventIdx + 1}`,
-                fromSide: 'bottom' as const,
-                toSide: 'top' as const,
-              })),
-            };
-
-            return (
-              <div key={idx}>
-                <h3 style={{
-                  fontSize: theme.fontSizes[2],
-                  fontWeight: theme.fontWeights.semibold,
-                  color: theme.colors.text,
-                  marginBottom: '8px',
-                }}>
-                  {workflow.title}
-                </h3>
-                <div style={{
-                  fontSize: theme.fontSizes[0],
-                  fontFamily: theme.fonts.monospace,
-                  color: theme.colors.textMuted,
-                  marginBottom: '12px',
-                }}>
-                  {workflow.width} × {workflow.height}
-                </div>
-                <div style={{
-                  backgroundColor: theme.colors.background,
-                  border: `2px solid ${theme.colors.border}`,
-                  borderRadius: '6px',
-                }}>
-                  <GraphRenderer
-                    canvas={canvas}
-                    height={1200}
-                    width="100%"
-                  />
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  },
-};