@principal-ai/principal-view-react 0.6.6

package/src/components/EdgeInfoPanel.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
+
+export interface EdgeInfoPanelProps {
+  edge: EdgeState;
+  typeDefinition: EdgeTypeDefinition;
+  sourceNodeId: string;
+  targetNodeId: string;
+  onClose: () => void;
+  /** Optional callback to delete the edge. If not provided, delete button is hidden. */
+  onDelete?: (edgeId: string) => void;
+}
+
+/**
+ * Panel that displays information about a selected edge
+ */
+export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
+  edge,
+  typeDefinition,
+  sourceNodeId,
+  targetNodeId,
+  onClose,
+  onDelete,
+}) => {
+  const color = typeDefinition.color || '#888';
+
+  // Get fields to display based on dataSchema
+  const displayFields = typeDefinition.dataSchema
+    ? Object.entries(typeDefinition.dataSchema)
+        .filter(([, schema]) => schema.displayInInfo)
+        .map(([field, schema]) => ({
+          field,
+          label: schema.label || field,
+          value: edge.data?.[field],
+        }))
+    : [];
+
+  // Always show basic edge data if no schema is defined
+  const hasSchemaFields = displayFields.length > 0;
+  const edgeDataEntries = edge.data ? Object.entries(edge.data) : [];
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '60px',
+        right: '20px',
+        backgroundColor: 'white',
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        padding: '16px',
+        minWidth: '250px',
+        maxWidth: '350px',
+        zIndex: 1000,
+      }}
+    >
+      {/* Header */}
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '12px',
+        paddingBottom: '8px',
+        borderBottom: `2px solid ${color}`,
+      }}>
+        <div style={{ fontWeight: 'bold', fontSize: '14px' }}>
+          Edge Information
+        </div>
+        <button
+          onClick={onClose}
+          style={{
+            border: 'none',
+            background: 'none',
+            cursor: 'pointer',
+            fontSize: '18px',
+            color: '#666',
+            padding: '0',
+            width: '24px',
+            height: '24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          ×
+        </button>
+      </div>
+
+      {/* Edge Type */}
+      <div style={{ marginBottom: '12px' }}>
+        <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+          Type
+        </div>
+        <div style={{
+          fontSize: '12px',
+          padding: '4px 8px',
+          backgroundColor: color,
+          color: 'white',
+          borderRadius: '4px',
+          display: 'inline-block',
+        }}>
+          {edge.type}
+        </div>
+      </div>
+
+      {/* Connection Info */}
+      <div style={{ marginBottom: '12px' }}>
+        <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+          Connection
+        </div>
+        <div style={{ fontSize: '12px', color: '#333' }}>
+          <span style={{ fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '3px' }}>
+            {sourceNodeId}
+          </span>
+          <span style={{ margin: '0 8px', color: '#888' }}>→</span>
+          <span style={{ fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '3px' }}>
+            {targetNodeId}
+          </span>
+        </div>
+      </div>
+
+      {/* Display schema-defined fields */}
+      {hasSchemaFields && (
+        <div style={{ marginBottom: '12px' }}>
+          <div style={{ fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }}>
+            Properties
+          </div>
+          {displayFields.map(({ field, label, value }) => (
+            <div key={field} style={{ marginBottom: '8px' }}>
+              <div style={{ fontSize: '10px', color: '#666', marginBottom: '2px' }}>
+                {label}
+              </div>
+              <div style={{ fontSize: '12px', color: '#333' }}>
+                {value !== undefined && value !== null
+                  ? typeof value === 'object'
+                    ? JSON.stringify(value, null, 2)
+                    : String(value)
+                  : '-'}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Show all edge data if no schema is defined */}
+      {!hasSchemaFields && edgeDataEntries.length > 0 && (
+        <div style={{ marginBottom: '12px' }}>
+          <div style={{ fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }}>
+            Data
+          </div>
+          {edgeDataEntries.map(([key, value]) => (
+            <div key={key} style={{ marginBottom: '8px' }}>
+              <div style={{ fontSize: '10px', color: '#666', marginBottom: '2px' }}>
+                {key}
+              </div>
+              <div style={{ fontSize: '12px', color: '#333', wordBreak: 'break-word' }}>
+                {value !== undefined && value !== null
+                  ? typeof value === 'object'
+                    ? JSON.stringify(value, null, 2)
+                    : String(value)
+                  : '-'}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Metadata */}
+      <div style={{ fontSize: '10px', color: '#999', marginTop: '12px', paddingTop: '8px', borderTop: '1px solid #eee' }}>
+        ID: {edge.id}
+      </div>
+
+      {/* Delete Button */}
+      {onDelete && (
+        <button
+          onClick={() => {
+            onDelete(edge.id);
+            onClose();
+          }}
+          style={{
+            marginTop: '12px',
+            width: '100%',
+            padding: '8px 12px',
+            backgroundColor: '#dc3545',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            fontSize: '12px',
+            fontWeight: 'bold',
+          }}
+        >
+          Delete Edge
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/EventLog.test.tsx

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,51 @@
+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/GraphRenderer.test.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { GraphRenderer } from './GraphRenderer';
+import type { GraphConfiguration, NodeState, EdgeState } from '@principal-ai/principal-view-core';
+
+describe('GraphRenderer', () => {
+  const testConfig: GraphConfiguration = {
+    metadata: {
+      name: 'Test Graph',
+      version: '1.0.0',
+    },
+    nodeTypes: {
+      user: {
+        shape: 'circle',
+        color: '#4CAF50',
+        dataSchema: {
+          userId: { type: 'string', required: true },
+        },
+      },
+    },
+    edgeTypes: {
+      connection: {
+        style: 'solid',
+        directed: true,
+      },
+    },
+    allowedConnections: [{ from: 'user', to: 'user', via: 'connection' }],
+  };
+
+  const testNodes: NodeState[] = [
+    {
+      id: 'user-1',
+      type: 'user',
+      data: { userId: 'alice' },
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    },
+    {
+      id: 'user-2',
+      type: 'user',
+      data: { userId: 'bob' },
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    },
+  ];
+
+  const testEdges: EdgeState[] = [
+    {
+      id: 'conn-1',
+      type: 'connection',
+      from: 'user-1',
+      to: 'user-2',
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    },
+  ];
+
+  it('should render without crashing', () => {
+    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
+
+    expect(screen.getByText(/Graph Renderer/i)).toBeDefined();
+  });
+
+  it('should display configuration name', () => {
+    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
+
+    expect(screen.getByText(/Test Graph/i)).toBeDefined();
+  });
+
+  it('should display node count', () => {
+    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
+
+    expect(screen.getByText(/Nodes: 2/i)).toBeDefined();
+  });
+
+  it('should display edge count', () => {
+    render(<GraphRenderer configuration={testConfig} nodes={testNodes} edges={testEdges} />);
+
+    expect(screen.getByText(/Edges: 1/i)).toBeDefined();
+  });
+
+  it('should render with empty nodes and edges', () => {
+    render(<GraphRenderer configuration={testConfig} nodes={[]} edges={[]} />);
+
+    expect(screen.getByText(/Nodes: 0/i)).toBeDefined();
+    expect(screen.getByText(/Edges: 0/i)).toBeDefined();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <GraphRenderer
+        configuration={testConfig}
+        nodes={testNodes}
+        edges={testEdges}
+        className="custom-class"
+      />
+    );
+
+    const element = container.querySelector('.custom-class');
+    expect(element).toBeDefined();
+  });
+
+  it('should apply custom width and height', () => {
+    const { container } = render(
+      <GraphRenderer
+        configuration={testConfig}
+        nodes={testNodes}
+        edges={testEdges}
+        width="500px"
+        height="400px"
+      />
+    );
+
+    const element = container.querySelector('div');
+    expect(element?.style.width).toBe('500px');
+    expect(element?.style.height).toBe('400px');
+  });
+});