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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/components/NodeInfoPanel.d.ts.map +1 -1
  2. package/dist/components/NodeInfoPanel.js +91 -108
  3. package/dist/components/NodeInfoPanel.js.map +1 -1
  4. package/dist/nodes/CustomNode.d.ts +1 -1
  5. package/dist/nodes/CustomNode.d.ts.map +1 -1
  6. package/dist/nodes/CustomNode.js +4 -5
  7. package/dist/nodes/CustomNode.js.map +1 -1
  8. package/dist/utils/graphConverter.js +1 -1
  9. package/dist/utils/graphConverter.js.map +1 -1
  10. package/package.json +2 -2
  11. package/src/components/NodeInfoPanel.tsx +232 -237
  12. package/src/nodes/CustomNode.tsx +5 -8
  13. package/src/stories/EventDrivenAnimations.stories.tsx +6 -6
  14. package/src/stories/GraphRenderer.stories.tsx +27 -27
  15. package/src/stories/MultiConfig.stories.tsx +24 -24
  16. package/src/stories/MultiDirectionalConnections.stories.tsx +20 -20
  17. package/src/stories/NodeFieldsAudit.stories.tsx +1095 -0
  18. package/src/stories/NodeShapes.stories.tsx +37 -37
  19. package/src/utils/graphConverter.ts +1 -1
package/src/stories/NodeShapes.stories.tsx CHANGED
@@ -30,7 +30,7 @@ const allShapesCanvas: ExtendedCanvas = {
30
30
  height: 80,
31
31
  text: '# Rectangle\nDefault shape',
32
32
  color: 6, // purple
33
- vv: {
33
+ pv: {
34
34
  nodeType: 'rectangle-demo',
35
35
  shape: 'rectangle',
36
36
  icon: 'square',
@@ -45,7 +45,7 @@ const allShapesCanvas: ExtendedCanvas = {
45
45
  height: 100,
46
46
  text: '# Circle',
47
47
  color: 5, // cyan
48
- vv: {
48
+ pv: {
49
49
  nodeType: 'circle-demo',
50
50
  shape: 'circle',
51
51
  icon: 'circle',
@@ -60,7 +60,7 @@ const allShapesCanvas: ExtendedCanvas = {
60
60
  height: 120,
61
61
  text: '# Hexagon',
62
62
  color: 4, // green
63
- vv: {
63
+ pv: {
64
64
  nodeType: 'hexagon-demo',
65
65
  shape: 'hexagon',
66
66
  icon: 'hexagon',
@@ -76,7 +76,7 @@ const allShapesCanvas: ExtendedCanvas = {
76
76
  height: 70,
77
77
  text: 'Diamond',
78
78
  color: 2, // orange
79
- vv: {
79
+ pv: {
80
80
  nodeType: 'diamond-demo',
81
81
  shape: 'diamond',
82
82
  icon: 'diamond',
@@ -92,7 +92,7 @@ const allShapesCanvas: ExtendedCanvas = {
92
92
  height: 80,
93
93
  text: '# Custom\n(Falls back to rect)',
94
94
  color: 1, // red
95
- vv: {
95
+ pv: {
96
96
  nodeType: 'custom-demo',
97
97
  shape: 'custom',
98
98
  icon: 'settings',
@@ -100,7 +100,7 @@ const allShapesCanvas: ExtendedCanvas = {
100
100
  },
101
101
  ],
102
102
  edges: [],
103
- vv: {
103
+ pv: {
104
104
  version: '1.0.0',
105
105
  name: 'Node Shapes Audit',
106
106
  description: 'All available node shapes for visual inspection',
@@ -147,7 +147,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
147
147
  height: 50,
148
148
  text: 'Small',
149
149
  color: 6,
150
- vv: {
150
+ pv: {
151
151
  nodeType: 'rect-small',
152
152
  shape: 'rectangle',
153
153
  size: { width: 80, height: 50 },
@@ -162,7 +162,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
162
162
  height: 60,
163
163
  text: 'S',
164
164
  color: 5,
165
- vv: {
165
+ pv: {
166
166
  nodeType: 'circle-small',
167
167
  shape: 'circle',
168
168
  size: { width: 60, height: 60 },
@@ -177,7 +177,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
177
177
  height: 60,
178
178
  text: 'Small',
179
179
  color: 4,
180
- vv: {
180
+ pv: {
181
181
  nodeType: 'hex-small',
182
182
  shape: 'hexagon',
183
183
  size: { width: 80, height: 60 },
@@ -192,7 +192,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
192
192
  height: 60,
193
193
  text: 'S',
194
194
  color: 2,
195
- vv: {
195
+ pv: {
196
196
  nodeType: 'diamond-small',
197
197
  shape: 'diamond',
198
198
  size: { width: 60, height: 60 },
@@ -209,7 +209,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
209
209
  height: 70,
210
210
  text: 'Medium',
211
211
  color: 6,
212
- vv: {
212
+ pv: {
213
213
  nodeType: 'rect-medium',
214
214
  shape: 'rectangle',
215
215
  },
@@ -223,7 +223,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
223
223
  height: 80,
224
224
  text: 'M',
225
225
  color: 5,
226
- vv: {
226
+ pv: {
227
227
  nodeType: 'circle-medium',
228
228
  shape: 'circle',
229
229
  },
@@ -237,7 +237,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
237
237
  height: 80,
238
238
  text: 'Medium',
239
239
  color: 4,
240
- vv: {
240
+ pv: {
241
241
  nodeType: 'hex-medium',
242
242
  shape: 'hexagon',
243
243
  },
@@ -251,7 +251,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
251
251
  height: 80,
252
252
  text: 'M',
253
253
  color: 2,
254
- vv: {
254
+ pv: {
255
255
  nodeType: 'diamond-medium',
256
256
  shape: 'diamond',
257
257
  },
@@ -267,7 +267,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
267
267
  height: 100,
268
268
  text: '# Large\nWith content',
269
269
  color: 6,
270
- vv: {
270
+ pv: {
271
271
  nodeType: 'rect-large',
272
272
  shape: 'rectangle',
273
273
  size: { width: 180, height: 100 },
@@ -282,7 +282,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
282
282
  height: 120,
283
283
  text: 'Large',
284
284
  color: 5,
285
- vv: {
285
+ pv: {
286
286
  nodeType: 'circle-large',
287
287
  shape: 'circle',
288
288
  size: { width: 120, height: 120 },
@@ -297,7 +297,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
297
297
  height: 110,
298
298
  text: 'Large',
299
299
  color: 4,
300
- vv: {
300
+ pv: {
301
301
  nodeType: 'hex-large',
302
302
  shape: 'hexagon',
303
303
  size: { width: 140, height: 110 },
@@ -312,7 +312,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
312
312
  height: 110,
313
313
  text: 'Large',
314
314
  color: 2,
315
- vv: {
315
+ pv: {
316
316
  nodeType: 'diamond-large',
317
317
  shape: 'diamond',
318
318
  size: { width: 110, height: 110 },
@@ -320,7 +320,7 @@ const shapeSizesCanvas: ExtendedCanvas = {
320
320
  },
321
321
  ],
322
322
  edges: [],
323
- vv: {
323
+ pv: {
324
324
  version: '1.0.0',
325
325
  name: 'Node Sizes Audit',
326
326
  description: 'Node shapes at different sizes',
@@ -361,7 +361,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
361
361
  height: 80,
362
362
  text: 'Server',
363
363
  color: 6,
364
- vv: {
364
+ pv: {
365
365
  nodeType: 'server',
366
366
  shape: 'rectangle',
367
367
  icon: 'server',
@@ -376,7 +376,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
376
376
  height: 100,
377
377
  text: 'User',
378
378
  color: 5,
379
- vv: {
379
+ pv: {
380
380
  nodeType: 'user',
381
381
  shape: 'circle',
382
382
  icon: 'user',
@@ -391,7 +391,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
391
391
  height: 100,
392
392
  text: 'Database',
393
393
  color: 4,
394
- vv: {
394
+ pv: {
395
395
  nodeType: 'database',
396
396
  shape: 'hexagon',
397
397
  icon: 'database',
@@ -406,7 +406,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
406
406
  height: 100,
407
407
  text: 'Cache',
408
408
  color: 2,
409
- vv: {
409
+ pv: {
410
410
  nodeType: 'cache',
411
411
  shape: 'diamond',
412
412
  icon: 'zap',
@@ -414,7 +414,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
414
414
  },
415
415
  ],
416
416
  edges: [],
417
- vv: {
417
+ pv: {
418
418
  version: '1.0.0',
419
419
  name: 'Shapes with Icons',
420
420
  description: 'Node shapes with Lucide icons',
@@ -456,7 +456,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
456
456
  height: 70,
457
457
  text: 'Idle',
458
458
  color: 6,
459
- vv: {
459
+ pv: {
460
460
  nodeType: 'process',
461
461
  shape: 'rectangle',
462
462
  icon: 'box',
@@ -476,7 +476,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
476
476
  height: 90,
477
477
  text: 'Idle',
478
478
  color: 5,
479
- vv: {
479
+ pv: {
480
480
  nodeType: 'agent',
481
481
  shape: 'circle',
482
482
  icon: 'user',
@@ -496,7 +496,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
496
496
  height: 90,
497
497
  text: 'Idle',
498
498
  color: 4,
499
- vv: {
499
+ pv: {
500
500
  nodeType: 'storage',
501
501
  shape: 'hexagon',
502
502
  icon: 'database',
@@ -516,7 +516,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
516
516
  height: 90,
517
517
  text: 'Idle',
518
518
  color: 2,
519
- vv: {
519
+ pv: {
520
520
  nodeType: 'decision',
521
521
  shape: 'diamond',
522
522
  icon: 'git-branch',
@@ -538,7 +538,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
538
538
  height: 70,
539
539
  text: 'Active',
540
540
  color: 6,
541
- vv: {
541
+ pv: {
542
542
  nodeType: 'process-active',
543
543
  shape: 'rectangle',
544
544
  icon: 'play',
@@ -554,7 +554,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
554
554
  height: 90,
555
555
  text: 'Active',
556
556
  color: 5,
557
- vv: {
557
+ pv: {
558
558
  nodeType: 'agent-active',
559
559
  shape: 'circle',
560
560
  icon: 'user-check',
@@ -570,7 +570,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
570
570
  height: 90,
571
571
  text: 'Active',
572
572
  color: 4,
573
- vv: {
573
+ pv: {
574
574
  nodeType: 'storage-active',
575
575
  shape: 'hexagon',
576
576
  icon: 'hard-drive',
@@ -586,7 +586,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
586
586
  height: 90,
587
587
  text: 'Active',
588
588
  color: 2,
589
- vv: {
589
+ pv: {
590
590
  nodeType: 'decision-active',
591
591
  shape: 'diamond',
592
592
  icon: 'git-commit',
@@ -604,7 +604,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
604
604
  height: 70,
605
605
  text: 'Error',
606
606
  color: 1,
607
- vv: {
607
+ pv: {
608
608
  nodeType: 'process-error',
609
609
  shape: 'rectangle',
610
610
  icon: 'alert-circle',
@@ -620,7 +620,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
620
620
  height: 90,
621
621
  text: 'Error',
622
622
  color: 1,
623
- vv: {
623
+ pv: {
624
624
  nodeType: 'agent-error',
625
625
  shape: 'circle',
626
626
  icon: 'user-x',
@@ -636,7 +636,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
636
636
  height: 90,
637
637
  text: 'Error',
638
638
  color: 1,
639
- vv: {
639
+ pv: {
640
640
  nodeType: 'storage-error',
641
641
  shape: 'hexagon',
642
642
  icon: 'database',
@@ -652,7 +652,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
652
652
  height: 90,
653
653
  text: 'Error',
654
654
  color: 1,
655
- vv: {
655
+ pv: {
656
656
  nodeType: 'decision-error',
657
657
  shape: 'diamond',
658
658
  icon: 'git-branch',
@@ -661,7 +661,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
661
661
  },
662
662
  ],
663
663
  edges: [],
664
- vv: {
664
+ pv: {
665
665
  version: '1.0.0',
666
666
  name: 'Shapes with States',
667
667
  description: 'Node shapes in different states (idle, active, error)',
package/src/utils/graphConverter.ts CHANGED
@@ -26,7 +26,7 @@ export function convertToXYFlowNodes(
26
26
  type: 'custom',
27
27
  position: node.position || { x: 0, y: 0 },
28
28
  data: {
29
- label: node.id,
29
+ name: (node.data.name as string) || node.id,
30
30
  typeDefinition,
31
31
  state: node.state,
32
32
  hasViolations,