@principal-ai/principal-view-react 0.6.8 → 0.6.10

package/src/stories/GraphRenderer.stories.tsx

@@ -34,7 +34,7 @@ const sampleCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Input Processor',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'process',
         shape: 'rectangle',
         icon: 'Settings',
@@ -49,7 +49,7 @@ const sampleCanvas: ExtendedCanvas = {
       height: 100,
       text: 'Database',
       color: '#7B68EE',
-      vv: {
+      pv: {
         nodeType: 'data',
         shape: 'circle',
         icon: 'Database',
@@ -64,7 +64,7 @@ const sampleCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Output Handler',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'process',
         shape: 'rectangle',
         icon: 'Settings',
@@ -76,16 +76,16 @@ const sampleCanvas: ExtendedCanvas = {
       id: 'edge-1',
       fromNode: 'node-1',
       toNode: 'node-2',
-      vv: { edgeType: 'dataflow' },
+      pv: { edgeType: 'dataflow' },
     },
     {
       id: 'edge-2',
       fromNode: 'node-2',
       toNode: 'node-3',
-      vv: { edgeType: 'dataflow' },
+      pv: { edgeType: 'dataflow' },
     },
   ],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Sample Validation Graph',
     description: 'Example graph configuration',
@@ -110,7 +110,7 @@ const sampleCanvas: ExtendedCanvas = {
 const emptyCanvas: ExtendedCanvas = {
   nodes: [],
   edges: [],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Empty Graph',
     edgeTypes: {},
@@ -131,7 +131,7 @@ const singleNodeCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Input Processor',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'process',
         shape: 'rectangle',
         icon: 'Settings',
@@ -139,7 +139,7 @@ const singleNodeCanvas: ExtendedCanvas = {
     },
   ],
   edges: [],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Single Node',
     edgeTypes: {},
@@ -160,7 +160,7 @@ const largeCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Input Processor',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'process',
         shape: 'rectangle',
         icon: 'Settings',
@@ -175,7 +175,7 @@ const largeCanvas: ExtendedCanvas = {
       height: 100,
       text: 'Database',
       color: '#7B68EE',
-      vv: {
+      pv: {
         nodeType: 'data',
         shape: 'circle',
         icon: 'Database',
@@ -190,7 +190,7 @@ const largeCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Output Handler',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'process',
         shape: 'rectangle',
         icon: 'Settings',
@@ -205,7 +205,7 @@ const largeCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Validator',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'process',
         shape: 'rectangle',
         icon: 'Check',
@@ -220,7 +220,7 @@ const largeCanvas: ExtendedCanvas = {
       height: 100,
       text: 'Cache',
       color: '#7B68EE',
-      vv: {
+      pv: {
         nodeType: 'data',
         shape: 'circle',
         icon: 'Zap',
@@ -232,28 +232,28 @@ const largeCanvas: ExtendedCanvas = {
       id: 'edge-1',
       fromNode: 'node-1',
       toNode: 'node-2',
-      vv: { edgeType: 'dataflow' },
+      pv: { edgeType: 'dataflow' },
     },
     {
       id: 'edge-2',
       fromNode: 'node-2',
       toNode: 'node-3',
-      vv: { edgeType: 'dataflow' },
+      pv: { edgeType: 'dataflow' },
     },
     {
       id: 'edge-3',
       fromNode: 'node-1',
       toNode: 'node-4',
-      vv: { edgeType: 'dataflow' },
+      pv: { edgeType: 'dataflow' },
     },
     {
       id: 'edge-4',
       fromNode: 'node-4',
       toNode: 'node-5',
-      vv: { edgeType: 'dataflow' },
+      pv: { edgeType: 'dataflow' },
     },
   ],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Large Graph',
     edgeTypes: {
@@ -280,7 +280,7 @@ const serviceArchitectureCanvas: ExtendedCanvas = {
       height: 120,
       text: '# Client',
       color: 5, // cyan preset
-      vv: {
+      pv: {
         nodeType: 'client',
         shape: 'circle',
         icon: 'user',
@@ -300,7 +300,7 @@ const serviceArchitectureCanvas: ExtendedCanvas = {
       height: 140,
       text: '# API Server\n\nHandles REST endpoints',
       color: 6, // purple preset
-      vv: {
+      pv: {
         nodeType: 'api-server',
         shape: 'rectangle',
         icon: 'server',
@@ -320,7 +320,7 @@ const serviceArchitectureCanvas: ExtendedCanvas = {
       height: 100,
       text: '# Database',
       color: 4, // green preset
-      vv: {
+      pv: {
         nodeType: 'database',
         shape: 'hexagon',
         icon: 'database',
@@ -335,7 +335,7 @@ const serviceArchitectureCanvas: ExtendedCanvas = {
       height: 80,
       text: '# Cache',
       color: 2, // orange preset
-      vv: {
+      pv: {
         nodeType: 'cache',
         shape: 'diamond',
         icon: 'zap',
@@ -350,7 +350,7 @@ const serviceArchitectureCanvas: ExtendedCanvas = {
       fromSide: 'right',
       toSide: 'left',
       label: 'HTTP',
-      vv: {
+      pv: {
         edgeType: 'http-request',
       },
     },
@@ -361,7 +361,7 @@ const serviceArchitectureCanvas: ExtendedCanvas = {
       fromSide: 'right',
       toSide: 'left',
       label: 'SQL',
-      vv: {
+      pv: {
         edgeType: 'db-query',
       },
     },
@@ -372,12 +372,12 @@ const serviceArchitectureCanvas: ExtendedCanvas = {
       fromSide: 'bottom',
       toSide: 'top',
       label: 'GET/SET',
-      vv: {
+      pv: {
         edgeType: 'cache-access',
       },
     },
   ],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Simple Service Architecture',
     description: 'A basic client-server architecture with caching',

package/src/stories/MultiConfig.stories.tsx

@@ -34,7 +34,7 @@ const simpleServiceCanvas: ExtendedCanvas = {
       height: 70,
       text: 'API',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'api',
         shape: 'rectangle',
         icon: 'Globe',
@@ -49,7 +49,7 @@ const simpleServiceCanvas: ExtendedCanvas = {
       height: 100,
       text: 'Service',
       color: '#7ED321',
-      vv: {
+      pv: {
         nodeType: 'service',
         shape: 'hexagon',
         icon: 'Cog',
@@ -64,7 +64,7 @@ const simpleServiceCanvas: ExtendedCanvas = {
       height: 80,
       text: 'Database',
       color: '#BD10E0',
-      vv: {
+      pv: {
         nodeType: 'database',
         shape: 'circle',
         icon: 'Database',
@@ -76,16 +76,16 @@ const simpleServiceCanvas: ExtendedCanvas = {
       id: 'edge-1',
       fromNode: 'api-1',
       toNode: 'service-1',
-      vv: { edgeType: 'api_call' },
+      pv: { edgeType: 'api_call' },
     },
     {
       id: 'edge-2',
       fromNode: 'service-1',
       toNode: 'database-1',
-      vv: { edgeType: 'data_access' },
+      pv: { edgeType: 'data_access' },
     },
   ],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Simple Service',
     description: 'Basic 3-tier service architecture',
@@ -120,7 +120,7 @@ const microservicesCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Gateway',
       color: '#00C853',
-      vv: {
+      pv: {
         nodeType: 'gateway',
         shape: 'rectangle',
         icon: 'Network',
@@ -135,7 +135,7 @@ const microservicesCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Auth Service',
       color: '#FF6B6B',
-      vv: {
+      pv: {
         nodeType: 'auth_service',
         shape: 'rectangle',
         icon: 'Lock',
@@ -150,7 +150,7 @@ const microservicesCanvas: ExtendedCanvas = {
       height: 70,
       text: 'User Service',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'user_service',
         shape: 'rectangle',
         icon: 'Users',
@@ -165,7 +165,7 @@ const microservicesCanvas: ExtendedCanvas = {
       height: 80,
       text: 'Cache',
       color: '#3498DB',
-      vv: {
+      pv: {
         nodeType: 'cache',
         shape: 'circle',
         icon: 'Zap',
@@ -180,7 +180,7 @@ const microservicesCanvas: ExtendedCanvas = {
       height: 80,
       text: 'Database',
       color: '#27AE60',
-      vv: {
+      pv: {
         nodeType: 'database',
         shape: 'circle',
         icon: 'Database',
@@ -192,28 +192,28 @@ const microservicesCanvas: ExtendedCanvas = {
       id: 'edge-1',
       fromNode: 'gateway-1',
       toNode: 'auth-1',
-      vv: { edgeType: 'http_request' },
+      pv: { edgeType: 'http_request' },
     },
     {
       id: 'edge-2',
       fromNode: 'gateway-1',
       toNode: 'user-1',
-      vv: { edgeType: 'http_request' },
+      pv: { edgeType: 'http_request' },
     },
     {
       id: 'edge-3',
       fromNode: 'auth-1',
       toNode: 'cache-1',
-      vv: { edgeType: 'cache_access' },
+      pv: { edgeType: 'cache_access' },
     },
     {
       id: 'edge-4',
       fromNode: 'user-1',
       toNode: 'db-1',
-      vv: { edgeType: 'http_request' },
+      pv: { edgeType: 'http_request' },
     },
   ],
-  vv: {
+  pv: {
     version: '2.0.0',
     name: 'Microservices',
     description: 'Distributed microservices architecture',
@@ -252,7 +252,7 @@ const dataPipelineCanvas: ExtendedCanvas = {
       height: 70,
       text: 'Data Source',
       color: '#6C5CE7',
-      vv: {
+      pv: {
         nodeType: 'data_source',
         shape: 'rectangle',
         icon: 'FileInput',
@@ -267,7 +267,7 @@ const dataPipelineCanvas: ExtendedCanvas = {
       height: 90,
       text: 'Validator',
       color: '#00B894',
-      vv: {
+      pv: {
         nodeType: 'validator',
         shape: 'diamond',
         icon: 'CheckCircle',
@@ -282,7 +282,7 @@ const dataPipelineCanvas: ExtendedCanvas = {
       height: 100,
       text: 'Transformer',
       color: '#FD79A8',
-      vv: {
+      pv: {
         nodeType: 'transformer',
         shape: 'hexagon',
         icon: 'RefreshCw',
@@ -297,7 +297,7 @@ const dataPipelineCanvas: ExtendedCanvas = {
       height: 80,
       text: 'Warehouse',
       color: '#0984E3',
-      vv: {
+      pv: {
         nodeType: 'data_warehouse',
         shape: 'circle',
         icon: 'Database',
@@ -309,22 +309,22 @@ const dataPipelineCanvas: ExtendedCanvas = {
       id: 'edge-1',
       fromNode: 'source-1',
       toNode: 'validator-1',
-      vv: { edgeType: 'validation_flow' },
+      pv: { edgeType: 'validation_flow' },
     },
     {
       id: 'edge-2',
       fromNode: 'validator-1',
       toNode: 'transformer-1',
-      vv: { edgeType: 'data_flow' },
+      pv: { edgeType: 'data_flow' },
     },
     {
       id: 'edge-3',
       fromNode: 'transformer-1',
       toNode: 'warehouse-1',
-      vv: { edgeType: 'data_flow' },
+      pv: { edgeType: 'data_flow' },
     },
   ],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Data Pipeline',
     description: 'ETL data processing pipeline',

package/src/stories/MultiDirectionalConnections.stories.tsx

@@ -32,7 +32,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       height: 100,
       text: 'API Gateway',
       color: '#06B6D4',
-      vv: {
+      pv: {
         nodeType: 'gateway',
         shape: 'diamond',
         icon: 'Network',
@@ -47,7 +47,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       height: 80,
       text: 'Auth Service',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'service',
         shape: 'rectangle',
         icon: 'Server',
@@ -67,7 +67,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       height: 80,
       text: 'API Service',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'service',
         shape: 'rectangle',
         icon: 'Server',
@@ -87,7 +87,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       height: 100,
       text: 'Redis Cache',
       color: '#F59E0B',
-      vv: {
+      pv: {
         nodeType: 'cache',
         shape: 'hexagon',
         icon: 'Zap',
@@ -102,7 +102,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       height: 100,
       text: 'PostgreSQL',
       color: '#7B68EE',
-      vv: {
+      pv: {
         nodeType: 'database',
         shape: 'circle',
         icon: 'Database',
@@ -117,7 +117,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       height: 80,
       text: 'Notification Service',
       color: '#4A90E2',
-      vv: {
+      pv: {
         nodeType: 'service',
         shape: 'rectangle',
         icon: 'Bell',
@@ -138,7 +138,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'bottom',
       toSide: 'top',
       label: 'POST /auth/login',
-      vv: { edgeType: 'http' },
+      pv: { edgeType: 'http' },
     },
     {
       id: 'edge-2',
@@ -147,7 +147,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'bottom',
       toSide: 'top',
       label: 'GET /api/users',
-      vv: { edgeType: 'http' },
+      pv: { edgeType: 'http' },
     },
     // Horizontal connections (left <-> right)
     {
@@ -157,7 +157,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'right',
       toSide: 'left',
       label: '/internal/validate',
-      vv: { edgeType: 'http' },
+      pv: { edgeType: 'http' },
     },
     // Services to data layer
     {
@@ -167,7 +167,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'bottom',
       toSide: 'top',
       label: 'GET',
-      vv: { edgeType: 'cache_access' },
+      pv: { edgeType: 'cache_access' },
     },
     {
       id: 'edge-5',
@@ -176,7 +176,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'bottom',
       toSide: 'top',
       label: 'SELECT users',
-      vv: { edgeType: 'database_query' },
+      pv: { edgeType: 'database_query' },
     },
     {
       id: 'edge-6',
@@ -185,7 +185,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'bottom',
       toSide: 'top',
       label: 'UPDATE sessions',
-      vv: { edgeType: 'database_query' },
+      pv: { edgeType: 'database_query' },
     },
     {
       id: 'edge-7',
@@ -194,7 +194,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'right',
       toSide: 'left',
       label: 'POST /notify',
-      vv: { edgeType: 'http' },
+      pv: { edgeType: 'http' },
     },
     // Cache to database (horizontal)
     {
@@ -204,10 +204,10 @@ const multiDirectionalCanvas: ExtendedCanvas = {
       fromSide: 'right',
       toSide: 'left',
       label: 'cache miss',
-      vv: { edgeType: 'database_query' },
+      pv: { edgeType: 'database_query' },
     },
   ],
-  vv: {
+  pv: {
     version: '1.0.0',
     name: 'Multi-Directional Connection Demo',
     description: 'Showcasing edges connecting from all sides with rich metadata',
@@ -243,7 +243,7 @@ const multiDirectionalCanvas: ExtendedCanvas = {
 // Canvas with violation highlighting
 const canvasWithViolations: ExtendedCanvas = {
   ...multiDirectionalCanvas,
-  vv: {
+  pv: {
     ...multiDirectionalCanvas.vv!,
     name: 'Connection Demo with Violations',
   },
@@ -253,7 +253,7 @@ const canvasWithViolations: ExtendedCanvas = {
 const minimalCanvas: ExtendedCanvas = {
   nodes: multiDirectionalCanvas.nodes!.slice(0, 4),
   edges: multiDirectionalCanvas.edges!.slice(0, 4),
-  vv: {
+  pv: {
     ...multiDirectionalCanvas.vv!,
     name: 'Minimal View',
   },
@@ -272,7 +272,7 @@ const complexMeshCanvas: ExtendedCanvas = {
       height: 100,
       text: 'Internal Gateway',
       color: '#06B6D4',
-      vv: {
+      pv: {
         nodeType: 'gateway',
         shape: 'diamond',
         icon: 'Network',
@@ -288,10 +288,10 @@ const complexMeshCanvas: ExtendedCanvas = {
       fromSide: 'bottom',
       toSide: 'top',
       label: 'wss',
-      vv: { edgeType: 'websocket' },
+      pv: { edgeType: 'websocket' },
     },
   ],
-  vv: {
+  pv: {
     ...multiDirectionalCanvas.vv!,
     name: 'Complex Mesh',
   },