@principal-ai/principal-view-react 0.7.39 → 0.7.41

package/src/stories/GraphOrientation.stories.tsx

@@ -0,0 +1,500 @@
+import React, { useState, useMemo } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { GraphRenderer } from '../components/GraphRenderer';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core/browser';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { swapGraphOrientation } from '../utils/orientationUtils';
+import { CanvasConverter } from '@principal-ai/principal-view-core/browser';
+
+const meta = {
+  title: 'Features/Graph Orientation',
+  component: GraphRenderer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof GraphRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Canvas with horizontal flow (left to right)
+ */
+const horizontalCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'start',
+      type: 'text',
+      x: 100,
+      y: 200,
+      width: 120,
+      height: 80,
+      text: 'Start',
+      color: 4,
+      pv: {
+        nodeType: 'process',
+        shape: 'circle',
+        icon: 'Play',
+      },
+    },
+    {
+      id: 'process-1',
+      type: 'text',
+      x: 300,
+      y: 200,
+      width: 140,
+      height: 80,
+      text: 'Process 1',
+      color: 6,
+      pv: {
+        nodeType: 'process',
+        shape: 'rectangle',
+        icon: 'Box',
+      },
+    },
+    {
+      id: 'decision',
+      type: 'text',
+      x: 520,
+      y: 200,
+      width: 100,
+      height: 100,
+      text: 'Decision',
+      color: 2,
+      pv: {
+        nodeType: 'decision',
+        shape: 'diamond',
+        icon: 'GitBranch',
+      },
+    },
+    {
+      id: 'process-2a',
+      type: 'text',
+      x: 700,
+      y: 120,
+      width: 140,
+      height: 80,
+      text: 'Process 2A',
+      color: 6,
+      pv: {
+        nodeType: 'process',
+        shape: 'rectangle',
+        icon: 'Box',
+      },
+    },
+    {
+      id: 'process-2b',
+      type: 'text',
+      x: 700,
+      y: 280,
+      width: 140,
+      height: 80,
+      text: 'Process 2B',
+      color: 6,
+      pv: {
+        nodeType: 'process',
+        shape: 'rectangle',
+        icon: 'Box',
+      },
+    },
+    {
+      id: 'end',
+      type: 'text',
+      x: 920,
+      y: 200,
+      width: 120,
+      height: 80,
+      text: 'End',
+      color: 5,
+      pv: {
+        nodeType: 'process',
+        shape: 'circle',
+        icon: 'CheckCircle',
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'e1',
+      fromNode: 'start',
+      toNode: 'process-1',
+      fromSide: 'right',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e2',
+      fromNode: 'process-1',
+      toNode: 'decision',
+      fromSide: 'right',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e3',
+      fromNode: 'decision',
+      toNode: 'process-2a',
+      fromSide: 'top',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e4',
+      fromNode: 'decision',
+      toNode: 'process-2b',
+      fromSide: 'bottom',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e5',
+      fromNode: 'process-2a',
+      toNode: 'end',
+      fromSide: 'right',
+      toSide: 'top',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e6',
+      fromNode: 'process-2b',
+      toNode: 'end',
+      fromSide: 'right',
+      toSide: 'bottom',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Horizontal Flow',
+    description: 'Graph with horizontal (left-to-right) orientation',
+    edgeTypes: {
+      flow: {
+        description: 'Flow connection',
+        style: 'solid',
+        color: '#888',
+      },
+    },
+  },
+};
+
+/**
+ * Interactive story demonstrating orientation swap
+ */
+const OrientationSwapTemplate = () => {
+  const [isVertical, setIsVertical] = useState(false);
+
+  const canvas = useMemo(() => {
+    if (!isVertical) {
+      return horizontalCanvas;
+    }
+
+    // Convert canvas to internal format
+    const { nodes: nodeStates, edges: edgeStates } =
+      CanvasConverter.canvasToGraph(horizontalCanvas);
+
+    // Swap orientation
+    const { nodes: swappedNodes, edges: swappedEdges } = swapGraphOrientation(
+      nodeStates,
+      edgeStates
+    );
+
+    // Convert back to canvas format for rendering
+    return {
+      ...horizontalCanvas,
+      nodes: swappedNodes.map((node, idx) => ({
+        ...horizontalCanvas.nodes[idx],
+        x: node.position?.x ?? 0,
+        y: node.position?.y ?? 0,
+      })),
+      edges: swappedEdges.map((edge, idx) => {
+        const data = edge.data as Record<string, unknown> | undefined;
+        return {
+          ...horizontalCanvas.edges[idx],
+          fromSide: (data?.fromSide as 'top' | 'right' | 'bottom' | 'left') ?? 'bottom',
+          toSide: (data?.toSide as 'top' | 'right' | 'bottom' | 'left') ?? 'top',
+        };
+      }),
+    };
+  }, [isVertical]);
+
+  return (
+    <div style={{ padding: 20 }}>
+      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', gap: 20 }}>
+        <h2 style={{ margin: 0, fontFamily: 'system-ui' }}>Graph Orientation</h2>
+        <button
+          onClick={() => setIsVertical(!isVertical)}
+          style={{
+            padding: '8px 16px',
+            fontSize: 14,
+            fontFamily: 'system-ui',
+            backgroundColor: '#3b82f6',
+            color: 'white',
+            border: 'none',
+            borderRadius: 6,
+            cursor: 'pointer',
+          }}
+        >
+          Switch to {isVertical ? 'Horizontal' : 'Vertical'}
+        </button>
+        <div style={{ fontSize: 14, color: '#666', fontFamily: 'system-ui' }}>
+          Current: <strong>{isVertical ? 'Vertical (Top-to-Bottom)' : 'Horizontal (Left-to-Right)'}</strong>
+        </div>
+      </div>
+
+      <GraphRenderer
+        key={isVertical ? 'vertical' : 'horizontal'}
+        canvas={canvas}
+        width={isVertical ? 500 : 1100}
+        height={isVertical ? 1100 : 500}
+      />
+
+      <div style={{ marginTop: 30, padding: 16, backgroundColor: '#f5f5f5', borderRadius: 8 }}>
+        <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>How It Works</h4>
+        <ul style={{ fontSize: 13, lineHeight: 1.8, margin: 0, paddingLeft: 20 }}>
+          <li>
+            <strong>Position Swap</strong>: Swaps x and y coordinates of all nodes
+          </li>
+          <li>
+            <strong>Edge Side Rotation</strong>: Both sides rotate <strong>clockwise</strong>
+            <ul style={{ marginTop: 5 }}>
+              <li><code>top → right → bottom → left → top</code></li>
+              <li>Example: <code>right → left</code> becomes <code>bottom → top</code></li>
+            </ul>
+          </li>
+          <li>
+            <strong>Usage</strong>: <code>swapGraphOrientation(nodes, edges)</code>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export const InteractiveOrientationSwap: Story = {
+  render: () => <OrientationSwapTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Interactive Orientation Swap**
+
+Click the button to toggle between horizontal (left-to-right) and vertical (top-to-bottom) orientations.
+
+The \`swapGraphOrientation\` utility:
+1. Swaps x/y coordinates for all node positions
+2. Rotates edge connection sides clockwise (both fromSide and toSide)
+   - Rotation: top → right → bottom → left → top
+   - Example: \`right → left\` becomes \`bottom → top\`
+3. Preserves the graph structure while rotating it 90 degrees
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Horizontal flow example
+ */
+export const HorizontalFlow: Story = {
+  args: {
+    canvas: horizontalCanvas,
+    width: 1100,
+    height: 450,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Horizontal Flow (Left-to-Right)**
+
+Traditional left-to-right flowchart layout:
+- Primary flow uses \`right → left\` connections
+- Branches use \`top\` and \`bottom\` connections for splitting
+- Typical for flowcharts and process diagrams
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Vertical flow example (using swapped canvas)
+ */
+const VerticalFlowTemplate = () => {
+  const verticalCanvas = useMemo(() => {
+    const { nodes: nodeStates, edges: edgeStates } =
+      CanvasConverter.canvasToGraph(horizontalCanvas);
+
+    const { nodes: swappedNodes, edges: swappedEdges } = swapGraphOrientation(
+      nodeStates,
+      edgeStates
+    );
+
+    return {
+      ...horizontalCanvas,
+      pv: {
+        ...horizontalCanvas.pv,
+        name: 'Vertical Flow',
+        description: 'Graph with vertical (top-to-bottom) orientation',
+      },
+      nodes: swappedNodes.map((node, idx) => ({
+        ...horizontalCanvas.nodes[idx],
+        x: node.position?.x ?? 0,
+        y: node.position?.y ?? 0,
+      })),
+      edges: swappedEdges.map((edge, idx) => {
+        const data = edge.data as Record<string, unknown> | undefined;
+        return {
+          ...horizontalCanvas.edges[idx],
+          fromSide: (data?.fromSide as 'top' | 'right' | 'bottom' | 'left') ?? 'bottom',
+          toSide: (data?.toSide as 'top' | 'right' | 'bottom' | 'left') ?? 'top',
+        };
+      }),
+    };
+  }, []);
+
+  return <GraphRenderer canvas={verticalCanvas} width={500} height={1100} />;
+};
+
+export const VerticalFlow: Story = {
+  render: () => <VerticalFlowTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Vertical Flow (Top-to-Bottom)**
+
+Top-to-bottom layout using \`swapGraphOrientation\`:
+- Primary flow uses \`bottom → top\` connections
+- Branches use \`left\` and \`right\` connections for splitting
+- Common for hierarchical diagrams and org charts
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Side-by-side comparison
+ */
+const SideBySideTemplate = () => {
+  const verticalCanvas = useMemo(() => {
+    const { nodes: nodeStates, edges: edgeStates } =
+      CanvasConverter.canvasToGraph(horizontalCanvas);
+
+    const { nodes: swappedNodes, edges: swappedEdges } = swapGraphOrientation(
+      nodeStates,
+      edgeStates
+    );
+
+    return {
+      ...horizontalCanvas,
+      nodes: swappedNodes.map((node, idx) => ({
+        ...horizontalCanvas.nodes[idx],
+        x: node.position?.x ?? 0,
+        y: node.position?.y ?? 0,
+      })),
+      edges: swappedEdges.map((edge, idx) => {
+        const data = edge.data as Record<string, unknown> | undefined;
+        return {
+          ...horizontalCanvas.edges[idx],
+          fromSide: (data?.fromSide as 'top' | 'right' | 'bottom' | 'left') ?? 'bottom',
+          toSide: (data?.toSide as 'top' | 'right' | 'bottom' | 'left') ?? 'top',
+        };
+      }),
+    };
+  }, []);
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2 style={{ marginBottom: 20, fontFamily: 'system-ui' }}>Orientation Comparison</h2>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
+        <div>
+          <h3 style={{ fontFamily: 'system-ui', marginBottom: 10 }}>
+            Horizontal (Left-to-Right)
+          </h3>
+          <div style={{ border: '1px solid #ddd', borderRadius: 8, overflow: 'hidden' }}>
+            <GraphRenderer canvas={horizontalCanvas} width={550} height={400} />
+          </div>
+          <div style={{ marginTop: 10, fontSize: 13, color: '#666' }}>
+            Original orientation with right→left primary flow
+          </div>
+        </div>
+
+        <div>
+          <h3 style={{ fontFamily: 'system-ui', marginBottom: 10 }}>
+            Vertical (Top-to-Bottom)
+          </h3>
+          <div style={{ border: '1px solid #ddd', borderRadius: 8, overflow: 'hidden' }}>
+            <GraphRenderer canvas={verticalCanvas} width={550} height={400} />
+          </div>
+          <div style={{ marginTop: 10, fontSize: 13, color: '#666' }}>
+            Swapped orientation with bottom→top primary flow
+          </div>
+        </div>
+      </div>
+
+      <div style={{ marginTop: 30, padding: 16, backgroundColor: '#f5f5f5', borderRadius: 8 }}>
+        <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>
+          Edge Side Rotation (Both Clockwise)
+        </h4>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
+          <div>
+            <strong>Clockwise Rotation:</strong>
+            <ul style={{ fontSize: 13, lineHeight: 1.8, marginTop: 8, paddingLeft: 20 }}>
+              <li><code>top</code> → <code>right</code></li>
+              <li><code>right</code> → <code>bottom</code></li>
+              <li><code>bottom</code> → <code>left</code></li>
+              <li><code>left</code> → <code>top</code></li>
+            </ul>
+          </div>
+          <div>
+            <strong>Examples:</strong>
+            <ul style={{ fontSize: 13, lineHeight: 1.8, marginTop: 8, paddingLeft: 20 }}>
+              <li><code>right → left</code> becomes <code>bottom → top</code></li>
+              <li><code>top → left</code> becomes <code>right → top</code></li>
+              <li><code>bottom → left</code> becomes <code>left → top</code></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SideBySideComparison: Story = {
+  render: () => <SideBySideTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Side-by-Side Comparison**
+
+Visual comparison of the same graph in both orientations, showing how \`swapGraphOrientation\`
+transforms the layout while preserving the graph structure and flow logic.
+        `,
+      },
+    },
+  },
+};

package/src/utils/orientationUtils.ts

@@ -0,0 +1,73 @@
+import type { NodeState, EdgeState, CanvasSide } from '@principal-ai/principal-view-core';
+
+/**
+ * Swaps the orientation of a graph from horizontal to vertical or vice versa.
+ * This swaps x/y coordinates and adjusts edge connection sides accordingly.
+ */
+export function swapGraphOrientation(
+  nodes: NodeState[],
+  edges: EdgeState[]
+): { nodes: NodeState[]; edges: EdgeState[] } {
+  return {
+    nodes: swapNodePositions(nodes),
+    edges: swapEdgeSides(edges),
+  };
+}
+
+/**
+ * Swaps x and y positions for all nodes
+ */
+export function swapNodePositions(nodes: NodeState[]): NodeState[] {
+  return nodes.map(node => ({
+    ...node,
+    position: node.position ? {
+      x: node.position.y,
+      y: node.position.x,
+    } : undefined,
+  }));
+}
+
+/**
+ * Swaps edge connection sides to match the new orientation
+ * Both sides rotate clockwise: top → right → bottom → left → top
+ */
+export function swapEdgeSides(edges: EdgeState[]): EdgeState[] {
+  return edges.map(edge => {
+    const data = edge.data as Record<string, unknown> | undefined;
+    const fromSide = data?.fromSide as CanvasSide | undefined;
+    const toSide = data?.toSide as CanvasSide | undefined;
+
+    const rotatedFromSide = rotateClockwise(fromSide);
+    const rotatedToSide = rotateClockwise(toSide);
+
+    // Only include fromSide/toSide if they have defined values (not undefined)
+    const newData = { ...edge.data } as Record<string, unknown>;
+    if (rotatedFromSide !== undefined) {
+      newData.fromSide = rotatedFromSide;
+    }
+    if (rotatedToSide !== undefined) {
+      newData.toSide = rotatedToSide;
+    }
+
+    return {
+      ...edge,
+      data: newData as EdgeState['data'],
+    };
+  });
+}
+
+/**
+ * Rotates a side clockwise: top → right → bottom → left → top
+ */
+function rotateClockwise(side?: CanvasSide): CanvasSide | undefined {
+  if (!side) return undefined;
+
+  const clockwiseMap: Record<CanvasSide, CanvasSide> = {
+    top: 'right',
+    right: 'bottom',
+    bottom: 'left',
+    left: 'top',
+  };
+
+  return clockwiseMap[side];
+}

package/dist/components/NarrativeRenderer.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { NarrativeTemplate, OtelEvent } from '@principal-ai/principal-view-core/browser';
-export interface NarrativeRendererProps {
-    /** Narrative template to use for rendering */
-    template: NarrativeTemplate;
-    /** OTEL events to render */
-    events: OtelEvent[];
-    /** Optional CSS class name */
-    className?: string;
-    /** Optional custom style */
-    style?: React.CSSProperties;
-    /** Show metadata panel */
-    showMetadata?: boolean;
-}
-/**
- * Renders OTEL events as a human-readable narrative using a template
- */
-export declare const NarrativeRenderer: React.FC<NarrativeRendererProps>;
-//# sourceMappingURL=NarrativeRenderer.d.ts.map

package/dist/components/NarrativeRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NarrativeRenderer.d.ts","sourceRoot":"","sources":["../../src/components/NarrativeRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAG9F,MAAM,WAAW,sBAAsB;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,iBAAiB,CAAC;IAE5B,4BAA4B;IAC5B,MAAM,EAAE,SAAS,EAAE,CAAC;IAEpB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiJ9D,CAAC"}

package/dist/components/NarrativeRenderer.js

@@ -1,103 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { renderNarrative } from '@principal-ai/principal-view-core/browser';
-import { useTheme } from '@principal-ade/industry-theme';
-/**
- * Renders OTEL events as a human-readable narrative using a template
- */
-export const NarrativeRenderer = ({ template, events, className, style, showMetadata = false, }) => {
-    const { theme } = useTheme();
-    // Render the narrative
-    const result = useMemo(() => {
-        try {
-            return renderNarrative(template, events);
-        }
-        catch (error) {
-            return {
-                text: `Error rendering narrative: ${error instanceof Error ? error.message : 'Unknown error'}`,
-                scenarioId: 'error',
-                metadata: {
-                    eventCount: events.length,
-                    spanCount: 0,
-                    logCount: 0,
-                },
-            };
-        }
-    }, [template, events]);
-    // Parse narrative text to add syntax highlighting
-    const renderHighlightedText = (text) => {
-        const lines = text.split('\n');
-        return lines.map((line, idx) => {
-            // Determine line style based on content
-            let lineStyle = {};
-            let content = line;
-            // Status indicators (✅ ❌ ⚠️ 📋)
-            if (/^[✅❌⚠️📋]/.test(line)) {
-                lineStyle = {
-                    fontWeight: 'bold',
-                    fontSize: '16px',
-                    marginTop: idx > 0 ? '8px' : '0',
-                    marginBottom: '4px',
-                };
-            }
-            // Separators (━━━━)
-            else if (/^━+/.test(line)) {
-                lineStyle = {
-                    color: theme.colors.border,
-                    opacity: 0.6,
-                };
-            }
-            // Arrow items (→)
-            else if (/^(\s*)→/.test(line)) {
-                const indent = line.match(/^(\s*)/)?.[1] || '';
-                lineStyle = {
-                    color: theme.colors.text,
-                    fontWeight: indent.length === 0 ? 'bold' : 'normal',
-                    marginTop: indent.length === 0 ? '12px' : '4px',
-                };
-            }
-            // Bullet items (•)
-            else if (/^\s+•/.test(line)) {
-                lineStyle = {
-                    color: theme.colors.textMuted,
-                    paddingLeft: '8px',
-                };
-            }
-            // Section headers (UPPERCASE at start)
-            else if (/^[A-Z\s]+:/.test(line)) {
-                lineStyle = {
-                    fontWeight: 'bold',
-                    marginTop: '8px',
-                    color: theme.colors.text,
-                };
-            }
-            return (_jsx("div", { style: lineStyle, children: content }, idx));
-        });
-    };
-    return (_jsxs("div", { className: className, style: {
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            ...style,
-        }, children: [_jsx("div", { style: {
-                    flex: 1,
-                    overflow: 'auto',
-                    padding: '20px',
-                    fontFamily: theme.fonts.monospace,
-                    fontSize: '14px',
-                    lineHeight: '1.6',
-                    color: theme.colors.text,
-                    backgroundColor: theme.colors.background,
-                    whiteSpace: 'pre-wrap',
-                    wordWrap: 'break-word',
-                }, children: renderHighlightedText(result.text) }), showMetadata && (_jsxs("div", { style: {
-                    borderTop: `1px solid ${theme.colors.border}`,
-                    padding: '12px 20px',
-                    backgroundColor: theme.colors.surface,
-                    fontSize: '12px',
-                    color: theme.colors.textMuted,
-                    fontFamily: theme.fonts.monospace,
-                }, children: [_jsxs("div", { style: { marginBottom: '4px' }, children: [_jsx("strong", { style: { color: theme.colors.text }, children: "Template:" }), " ", template.name] }), _jsxs("div", { style: { marginBottom: '4px' }, children: [_jsx("strong", { style: { color: theme.colors.text }, children: "Scenario:" }), " ", result.scenarioId] }), _jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.text }, children: "Events:" }), " ", result.metadata.eventCount, " total (", result.metadata.spanCount, " spans, ", result.metadata.logCount, " logs)"] }), result.metadata.timeRange && (_jsxs("div", { style: { marginTop: '4px' }, children: [_jsx("strong", { style: { color: theme.colors.text }, children: "Duration:" }), ' ', Number(result.metadata.timeRange.end) - Number(result.metadata.timeRange.start), "ms"] }))] }))] }));
-};
-//# sourceMappingURL=NarrativeRenderer.js.map