@principal-ai/principal-view-react 0.7.15 → 0.7.17

package/dist/components/LayerPanel.js

@@ -1,207 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayerPanel = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const industry_theme_1 = require("@principal-ade/industry-theme");
-const iconResolver_1 = require("../utils/iconResolver");
-/**
- * Panel that displays and controls layer visibility and organization
- */
-const LayerPanel = ({ layers, onToggleLayer, onFocusLayer, showNarrativeMode = false, narrativeMode = false, onToggleNarrativeMode, position = 'left', }) => {
-    const { theme } = (0, industry_theme_1.useTheme)();
-    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
-    const [expandedLayers, setExpandedLayers] = (0, react_1.useState)(new Set());
-    const toggleLayerExpanded = (layerId) => {
-        const newExpanded = new Set(expandedLayers);
-        if (newExpanded.has(layerId)) {
-            newExpanded.delete(layerId);
-        }
-        else {
-            newExpanded.add(layerId);
-        }
-        setExpandedLayers(newExpanded);
-    };
-    const sortedLayers = [...layers].sort((a, b) => a.order - b.order);
-    if (isCollapsed) {
-        return ((0, jsx_runtime_1.jsx)("div", { style: {
-                position: 'absolute',
-                top: '60px',
-                [position]: '20px',
-                backgroundColor: theme.colors.background,
-                borderRadius: '8px',
-                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-                border: `1px solid ${theme.colors.border}`,
-                zIndex: 900,
-            }, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsCollapsed(false), style: {
-                    padding: '12px',
-                    border: 'none',
-                    background: 'none',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    color: theme.colors.text,
-                }, title: "Expand Layers Panel", children: (0, iconResolver_1.resolveIcon)('Layers', 20) }) }));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            position: 'absolute',
-            top: '60px',
-            [position]: '20px',
-            backgroundColor: theme.colors.background,
-            color: theme.colors.text,
-            borderRadius: '8px',
-            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-            padding: '16px',
-            minWidth: '280px',
-            maxWidth: '320px',
-            maxHeight: 'calc(100vh - 120px)',
-            overflowY: 'auto',
-            zIndex: 900,
-            border: `1px solid ${theme.colors.border}`,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: '16px',
-                    paddingBottom: '12px',
-                    borderBottom: `2px solid ${theme.colors.primary}`,
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '8px',
-                            fontWeight: 'bold',
-                            fontSize: '14px',
-                        }, children: [(0, iconResolver_1.resolveIcon)('Layers', 18), (0, jsx_runtime_1.jsx)("span", { children: "Layers" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsCollapsed(true), style: {
-                            border: 'none',
-                            background: 'none',
-                            cursor: 'pointer',
-                            fontSize: '16px',
-                            color: theme.colors.textSecondary,
-                            padding: '0',
-                            width: '24px',
-                            height: '24px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }, title: "Collapse Panel", children: "\u2039" })] }), showNarrativeMode && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                    marginBottom: '16px',
-                    padding: '10px',
-                    backgroundColor: narrativeMode ? theme.colors.highlight : theme.colors.surface,
-                    borderRadius: '6px',
-                    border: narrativeMode
-                        ? `2px solid ${theme.colors.primary}`
-                        : `1px solid ${theme.colors.border}`,
-                    cursor: 'pointer',
-                    transition: 'all 0.2s',
-                }, onClick: () => onToggleNarrativeMode?.(!narrativeMode), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            marginBottom: '6px',
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px' }, children: [(0, iconResolver_1.resolveIcon)('GitBranch', 14), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: '600' }, children: "Narrative Mode" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    width: '40px',
-                                    height: '20px',
-                                    borderRadius: '10px',
-                                    backgroundColor: narrativeMode ? theme.colors.primary : theme.colors.border,
-                                    position: 'relative',
-                                    transition: 'background-color 0.2s',
-                                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                        position: 'absolute',
-                                        top: '2px',
-                                        left: narrativeMode ? '22px' : '2px',
-                                        width: '16px',
-                                        height: '16px',
-                                        borderRadius: '50%',
-                                        backgroundColor: theme.colors.background,
-                                        transition: 'left 0.2s',
-                                    } }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '10px', color: theme.colors.textSecondary }, children: narrativeMode ? 'Show request flow through layers' : 'View all layers normally' })] })), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: sortedLayers.map((layer) => {
-                    const isExpanded = expandedLayers.has(layer.id);
-                    const isVisible = layer.visible ?? true;
-                    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                            backgroundColor: theme.colors.surface,
-                            borderRadius: '6px',
-                            border: `1px solid ${theme.colors.border}`,
-                            overflow: 'hidden',
-                            transition: 'all 0.2s',
-                        }, onMouseEnter: (e) => {
-                            e.currentTarget.style.borderColor = layer.color || theme.colors.primary;
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.borderColor = theme.colors.border;
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                    padding: '10px 12px',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '8px',
-                                    cursor: 'pointer',
-                                    borderLeft: `4px solid ${layer.color || theme.colors.primary}`,
-                                }, onClick: () => onFocusLayer?.(layer.id), children: [(0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
-                                            e.stopPropagation();
-                                            onToggleLayer?.(layer.id, !isVisible);
-                                        }, style: {
-                                            border: 'none',
-                                            background: 'none',
-                                            cursor: 'pointer',
-                                            padding: '2px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            color: isVisible ? theme.colors.text : theme.colors.textMuted,
-                                            opacity: isVisible ? 1 : 0.4,
-                                        }, title: isVisible ? 'Hide layer' : 'Show layer', children: (0, iconResolver_1.resolveIcon)(isVisible ? 'Eye' : 'EyeOff', 16) }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                    fontSize: '12px',
-                                                    fontWeight: '600',
-                                                    color: theme.colors.text,
-                                                    marginBottom: '2px',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                }, children: layer.label }), layer.nodeCount !== undefined && ((0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '10px', color: theme.colors.textSecondary }, children: [layer.nodeCount, " ", layer.nodeCount === 1 ? 'node' : 'nodes'] }))] }), (layer.description || layer.narrative) && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
-                                            e.stopPropagation();
-                                            toggleLayerExpanded(layer.id);
-                                        }, style: {
-                                            border: 'none',
-                                            background: 'none',
-                                            cursor: 'pointer',
-                                            padding: '2px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            color: theme.colors.textSecondary,
-                                            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                                            transition: 'transform 0.2s',
-                                        }, children: (0, iconResolver_1.resolveIcon)('ChevronDown', 14) }))] }), isExpanded && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                    padding: '12px',
-                                    paddingTop: '8px',
-                                    backgroundColor: theme.colors.background,
-                                    borderTop: `1px solid ${theme.colors.border}`,
-                                }, children: [layer.description && ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: layer.narrative ? '10px' : '0' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                    fontSize: '9px',
-                                                    color: theme.colors.textMuted,
-                                                    textTransform: 'uppercase',
-                                                    marginBottom: '4px',
-                                                    fontWeight: '600',
-                                                }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '11px', color: theme.colors.textSecondary }, children: layer.description })] })), layer.narrative && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                                    fontSize: '9px',
-                                                    color: theme.colors.textMuted,
-                                                    textTransform: 'uppercase',
-                                                    marginBottom: '4px',
-                                                    fontWeight: '600',
-                                                }, children: "Narrative" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                                    fontSize: '11px',
-                                                    color: theme.colors.text,
-                                                    fontStyle: 'italic',
-                                                    padding: '8px',
-                                                    backgroundColor: theme.colors.surface,
-                                                    borderRadius: '4px',
-                                                    borderLeft: `2px solid ${layer.color || theme.colors.primary}`,
-                                                }, children: layer.narrative })] }))] }))] }, layer.id));
-                }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                    marginTop: '16px',
-                    paddingTop: '12px',
-                    borderTop: `1px solid ${theme.colors.border}`,
-                    fontSize: '10px',
-                    color: theme.colors.textMuted,
-                    textAlign: 'center',
-                }, children: [sortedLayers.filter((l) => l.visible !== false).length, " of ", sortedLayers.length, " visible"] })] }));
-};
-exports.LayerPanel = LayerPanel;
-//# sourceMappingURL=LayerPanel.js.map

package/dist/components/LayerPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayerPanel.js","sourceRoot":"","sources":["../../src/components/LayerPanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/MetricsDashboard.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { GraphMetrics } from '@principal-ai/principal-view-core';
-export interface MetricsDashboardProps {
-    /** Current metrics */
-    metrics: GraphMetrics;
-    /** Optional class name */
-    className?: string;
-}
-/**
- * Metrics dashboard component for displaying graph statistics
- * TODO: Implement full metrics visualization
- */
-export declare const MetricsDashboard: React.FC<MetricsDashboardProps>;
-//# sourceMappingURL=MetricsDashboard.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MetricsDashboard.d.ts","sourceRoot":"","sources":["../../src/components/MetricsDashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEtE,MAAM,WAAW,qBAAqB;IACpC,sBAAsB;IACtB,OAAO,EAAE,YAAY,CAAC;IAEtB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwB5D,CAAC"}

package/dist/components/MetricsDashboard.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MetricsDashboard = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * Metrics dashboard component for displaying graph statistics
- * TODO: Implement full metrics visualization
- */
-const MetricsDashboard = ({ metrics, className }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: { padding: '20px', border: '1px solid #ccc' }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Metrics Dashboard (TODO)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Total Nodes: ", metrics.nodes.total] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Total Edges: ", metrics.edges.total] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Total Events: ", metrics.events.total] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Violations: ", metrics.validation.violations] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Health Score: ", metrics.validation.healthScore] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "TODO:" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Add visual charts/graphs" }), (0, jsx_runtime_1.jsx)("li", { children: "Show breakdown by node type" }), (0, jsx_runtime_1.jsx)("li", { children: "Show breakdown by edge type" }), (0, jsx_runtime_1.jsx)("li", { children: "Show event rate over time" }), (0, jsx_runtime_1.jsx)("li", { children: "Add health score indicator" }), (0, jsx_runtime_1.jsx)("li", { children: "Add performance metrics" })] })] })] }));
-};
-exports.MetricsDashboard = MetricsDashboard;
-//# sourceMappingURL=MetricsDashboard.js.map

package/dist/components/MetricsDashboard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MetricsDashboard.js","sourceRoot":"","sources":["../../src/components/MetricsDashboard.tsx"],"names":[],"mappings":";;;;AAWA;;;GAGG;AACI,MAAM,gBAAgB,GAAoC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1F,OAAO,CACL,iCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,aAC7E,sEAAiC,EACjC,4CACE,2DAAiB,OAAO,CAAC,KAAK,CAAC,KAAK,IAAK,EACzC,2DAAiB,OAAO,CAAC,KAAK,CAAC,KAAK,IAAK,EACzC,4DAAkB,OAAO,CAAC,MAAM,CAAC,KAAK,IAAK,EAC3C,0DAAgB,OAAO,CAAC,UAAU,CAAC,UAAU,IAAK,EAClD,4DAAkB,OAAO,CAAC,UAAU,CAAC,WAAW,IAAK,IACjD,EACN,4CACE,uDAAsB,EACtB,2CACE,sEAAiC,EACjC,yEAAoC,EACpC,yEAAoC,EACpC,uEAAkC,EAClC,wEAAmC,EACnC,qEAAgC,IAC7B,IACD,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,gBAAgB,oBAwB3B"}

package/src/components/EventLog.test.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { EventLog } from './EventLog';
-import type { GraphEvent, Violation } from '@principal-ai/principal-view-core';
-
-describe('EventLog', () => {
-  const testEvents: GraphEvent[] = [
-    {
-      id: 'evt-1',
-      type: 'node_created',
-      timestamp: Date.now(),
-      category: 'node',
-      operation: 'create',
-      payload: {
-        operation: 'create',
-        nodeId: 'user-1',
-        nodeType: 'user',
-        data: { userId: 'alice' },
-      },
-      expected: true,
-    },
-    {
-      id: 'evt-2',
-      type: 'edge_created',
-      timestamp: Date.now(),
-      category: 'edge',
-      operation: 'create',
-      payload: {
-        operation: 'create',
-        edgeId: 'conn-1',
-        edgeType: 'connection',
-        from: 'user-1',
-        to: 'user-2',
-      },
-      expected: true,
-    },
-  ];
-
-  const testViolations: Violation[] = [
-    {
-      id: 'violation-1',
-      severity: 'error',
-      type: 'connection',
-      description: 'Invalid connection',
-    },
-  ];
-
-  it('should render without crashing', () => {
-    render(<EventLog events={testEvents} />);
-
-    expect(screen.getByText(/Event Log/i)).toBeDefined();
-  });
-
-  it('should display event count', () => {
-    render(<EventLog events={testEvents} />);
-
-    expect(screen.getByText(/Events: 2/i)).toBeDefined();
-  });
-
-  it('should display violation count', () => {
-    render(<EventLog events={testEvents} violations={testViolations} />);
-
-    expect(screen.getByText(/Violations: 1/i)).toBeDefined();
-  });
-
-  it('should render with empty events', () => {
-    render(<EventLog events={[]} />);
-
-    expect(screen.getByText(/Events: 0/i)).toBeDefined();
-  });
-
-  it('should apply custom className', () => {
-    const { container } = render(<EventLog events={testEvents} className="custom-log" />);
-
-    const element = container.querySelector('.custom-log');
-    expect(element).toBeDefined();
-  });
-
-  it('should apply custom maxHeight', () => {
-    const { container } = render(<EventLog events={testEvents} maxHeight="300px" />);
-
-    const element = container.querySelector('div');
-    expect(element?.style.maxHeight).toBe('300px');
-  });
-});

package/src/components/EventLog.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import type { GraphEvent, Violation } from '@principal-ai/principal-view-core';
-
-export interface EventLogProps {
-  /** List of events to display */
-  events: GraphEvent[];
-
-  /** Optional violations to highlight */
-  violations?: Violation[];
-
-  /** Callback when an event is clicked */
-  onEventClick?: (event: GraphEvent) => void;
-
-  /** Optional class name */
-  className?: string;
-
-  /** Optional max height */
-  maxHeight?: number | string;
-}
-
-/**
- * Event log component for displaying graph events
- * TODO: Implement filtering, search, and severity indicators
- */
-export const EventLog: React.FC<EventLogProps> = ({
-  events,
-  violations = [],
-  className,
-  maxHeight = '400px',
-}) => {
-  return (
-    <div className={className} style={{ maxHeight, overflowY: 'auto', border: '1px solid #ccc' }}>
-      <div style={{ padding: '10px' }}>
-        <h3>Event Log (TODO)</h3>
-        <p>Events: {events.length}</p>
-        <p>Violations: {violations.length}</p>
-        <div>
-          <strong>TODO:</strong>
-          <ul>
-            <li>Display events in chronological order</li>
-            <li>Show event type, category, operation</li>
-            <li>Highlight violations with color coding</li>
-            <li>Add filtering by category, type, severity</li>
-            <li>Add text search</li>
-            <li>Add timestamp formatting</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/MetricsDashboard.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import type { GraphMetrics } from '@principal-ai/principal-view-core';
-
-export interface MetricsDashboardProps {
-  /** Current metrics */
-  metrics: GraphMetrics;
-
-  /** Optional class name */
-  className?: string;
-}
-
-/**
- * Metrics dashboard component for displaying graph statistics
- * TODO: Implement full metrics visualization
- */
-export const MetricsDashboard: React.FC<MetricsDashboardProps> = ({ metrics, className }) => {
-  return (
-    <div className={className} style={{ padding: '20px', border: '1px solid #ccc' }}>
-      <h3>Metrics Dashboard (TODO)</h3>
-      <div>
-        <p>Total Nodes: {metrics.nodes.total}</p>
-        <p>Total Edges: {metrics.edges.total}</p>
-        <p>Total Events: {metrics.events.total}</p>
-        <p>Violations: {metrics.validation.violations}</p>
-        <p>Health Score: {metrics.validation.healthScore}</p>
-      </div>
-      <div>
-        <strong>TODO:</strong>
-        <ul>
-          <li>Add visual charts/graphs</li>
-          <li>Show breakdown by node type</li>
-          <li>Show breakdown by edge type</li>
-          <li>Show event rate over time</li>
-          <li>Add health score indicator</li>
-          <li>Add performance metrics</li>
-        </ul>
-      </div>
-    </div>
-  );
-};

package/src/stories/EventLog.stories.tsx

@@ -1,161 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { EventLog } from '../components/EventLog';
-import type { GraphEvent, Violation } from '@principal-ai/principal-view-core';
-
-const meta = {
-  title: 'Components/EventLog',
-  component: EventLog,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof EventLog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample events
-const sampleEvents: GraphEvent[] = [
-  {
-    id: 'evt-1',
-    timestamp: Date.now() - 5000,
-    type: 'node_added',
-    category: 'node',
-    operation: 'create',
-    data: {
-      nodeId: 'node-1',
-      nodeType: 'process',
-    },
-    metadata: {},
-  },
-  {
-    id: 'evt-2',
-    timestamp: Date.now() - 4000,
-    type: 'node_added',
-    category: 'node',
-    operation: 'create',
-    data: {
-      nodeId: 'node-2',
-      nodeType: 'data',
-    },
-    metadata: {},
-  },
-  {
-    id: 'evt-3',
-    timestamp: Date.now() - 3000,
-    type: 'edge_added',
-    category: 'edge',
-    operation: 'create',
-    data: {
-      edgeId: 'edge-1',
-      source: 'node-1',
-      target: 'node-2',
-    },
-    metadata: {},
-  },
-  {
-    id: 'evt-4',
-    timestamp: Date.now() - 2000,
-    type: 'node_updated',
-    category: 'node',
-    operation: 'update',
-    data: {
-      nodeId: 'node-1',
-      changes: { label: 'Updated Processor' },
-    },
-    metadata: {},
-  },
-  {
-    id: 'evt-5',
-    timestamp: Date.now() - 1000,
-    type: 'validation_run',
-    category: 'validation',
-    operation: 'read',
-    data: {
-      violations: 2,
-      warnings: 1,
-    },
-    metadata: {},
-  },
-];
-
-// Sample violations
-const sampleViolations: Violation[] = [
-  {
-    id: 'viol-1',
-    type: 'connection',
-    severity: 'error',
-    message: 'Invalid connection between incompatible node types',
-    context: {
-      nodeId: 'node-1',
-      edgeId: 'edge-1',
-    },
-    ruleId: 'conn-rule-1',
-    timestamp: Date.now() - 1000,
-  },
-  {
-    id: 'viol-2',
-    type: 'structure',
-    severity: 'warning',
-    message: 'Node exceeds maximum connection limit',
-    context: {
-      nodeId: 'node-2',
-    },
-    ruleId: 'struct-rule-1',
-    timestamp: Date.now() - 500,
-  },
-];
-
-export const Default: Story = {
-  args: {
-    events: sampleEvents,
-    violations: sampleViolations,
-  },
-};
-
-export const EventsOnly: Story = {
-  args: {
-    events: sampleEvents,
-    violations: [],
-  },
-};
-
-export const EmptyLog: Story = {
-  args: {
-    events: [],
-    violations: [],
-  },
-};
-
-export const ManyEvents: Story = {
-  args: {
-    events: [
-      ...sampleEvents,
-      ...Array.from({ length: 20 }, (_, i) => ({
-        id: `evt-gen-${i}`,
-        timestamp: Date.now() - i * 500,
-        type: 'node_updated',
-        category: 'node' as const,
-        operation: 'update' as const,
-        data: {
-          nodeId: `node-${i}`,
-          changes: {},
-        },
-        metadata: {},
-      })),
-    ],
-    violations: sampleViolations,
-    maxHeight: '500px',
-  },
-};
-
-export const WithClickHandler: Story = {
-  args: {
-    events: sampleEvents,
-    violations: sampleViolations,
-    onEventClick: (event) => {
-      console.log('Event clicked:', event);
-      alert(`Event clicked: ${event.type}`);
-    },
-  },
-};