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

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 (64) hide show
  1. package/README.md +2 -5
  2. package/dist/components/ConfigurationSelector.js +4 -2
  3. package/dist/components/ConfigurationSelector.js.map +1 -1
  4. package/dist/components/EdgeInfoPanel.d.ts.map +1 -1
  5. package/dist/components/EdgeInfoPanel.js +43 -13
  6. package/dist/components/EdgeInfoPanel.js.map +1 -1
  7. package/dist/components/GraphRenderer.d.ts.map +1 -1
  8. package/dist/components/GraphRenderer.js +133 -83
  9. package/dist/components/GraphRenderer.js.map +1 -1
  10. package/dist/components/NodeInfoPanel.d.ts.map +1 -1
  11. package/dist/components/NodeInfoPanel.js +143 -45
  12. package/dist/components/NodeInfoPanel.js.map +1 -1
  13. package/dist/edges/CustomEdge.d.ts.map +1 -1
  14. package/dist/edges/CustomEdge.js +2 -2
  15. package/dist/edges/CustomEdge.js.map +1 -1
  16. package/dist/edges/GenericEdge.d.ts.map +1 -1
  17. package/dist/edges/GenericEdge.js +2 -2
  18. package/dist/edges/GenericEdge.js.map +1 -1
  19. package/dist/hooks/usePathBasedEvents.d.ts +1 -1
  20. package/dist/hooks/usePathBasedEvents.d.ts.map +1 -1
  21. package/dist/hooks/usePathBasedEvents.js +9 -9
  22. package/dist/hooks/usePathBasedEvents.js.map +1 -1
  23. package/dist/index.d.ts +2 -2
  24. package/dist/index.d.ts.map +1 -1
  25. package/dist/index.js.map +1 -1
  26. package/dist/nodes/CustomNode.d.ts.map +1 -1
  27. package/dist/nodes/CustomNode.js +61 -44
  28. package/dist/nodes/CustomNode.js.map +1 -1
  29. package/dist/nodes/GenericNode.d.ts.map +1 -1
  30. package/dist/nodes/GenericNode.js.map +1 -1
  31. package/dist/utils/animationMapping.d.ts.map +1 -1
  32. package/dist/utils/animationMapping.js +12 -12
  33. package/dist/utils/animationMapping.js.map +1 -1
  34. package/dist/utils/graphConverter.d.ts.map +1 -1
  35. package/dist/utils/graphConverter.js +23 -17
  36. package/dist/utils/graphConverter.js.map +1 -1
  37. package/dist/utils/iconResolver.d.ts.map +1 -1
  38. package/dist/utils/iconResolver.js +1 -1
  39. package/dist/utils/iconResolver.js.map +1 -1
  40. package/package.json +2 -1
  41. package/src/components/ConfigurationSelector.tsx +5 -5
  42. package/src/components/EdgeInfoPanel.tsx +79 -37
  43. package/src/components/GraphRenderer.tsx +526 -365
  44. package/src/components/NodeInfoPanel.tsx +209 -86
  45. package/src/edges/CustomEdge.tsx +6 -4
  46. package/src/edges/GenericEdge.tsx +2 -6
  47. package/src/hooks/usePathBasedEvents.ts +54 -45
  48. package/src/index.ts +11 -2
  49. package/src/nodes/CustomNode.tsx +132 -106
  50. package/src/nodes/GenericNode.tsx +4 -3
  51. package/src/stories/AnimationWorkshop.stories.tsx +131 -12
  52. package/src/stories/CanvasNodeTypes.stories.tsx +898 -0
  53. package/src/stories/ColorPriority.stories.tsx +20 -10
  54. package/src/stories/EventDrivenAnimations.stories.tsx +8 -0
  55. package/src/stories/EventLog.stories.tsx +1 -1
  56. package/src/stories/GraphRenderer.stories.tsx +23 -10
  57. package/src/stories/IndustryThemes.stories.tsx +481 -0
  58. package/src/stories/MultiConfig.stories.tsx +8 -0
  59. package/src/stories/MultiDirectionalConnections.stories.tsx +8 -0
  60. package/src/stories/NodeFieldsAudit.stories.tsx +124 -37
  61. package/src/stories/NodeShapes.stories.tsx +73 -59
  62. package/src/utils/animationMapping.ts +19 -23
  63. package/src/utils/graphConverter.ts +35 -19
  64. package/src/utils/iconResolver.tsx +5 -1
package/src/stories/AnimationWorkshop.stories.tsx CHANGED
@@ -576,24 +576,143 @@ export const AllAnimationsShowcase: Story = {
576
576
  <ReactFlow
577
577
  nodes={[
578
578
  // Row 1: Edge animations
579
- { id: 'flow-1', type: 'custom', position: { x: 50, y: 50 }, data: { label: 'Flow', typeDefinition: processNodeType, data: { name: 'Flow Start' } } as CustomNodeData },
580
- { id: 'flow-2', type: 'custom', position: { x: 200, y: 50 }, data: { label: 'Flow', typeDefinition: dataNodeType, data: { name: 'Flow End' } } as CustomNodeData },
579
+ {
580
+ id: 'flow-1',
581
+ type: 'custom',
582
+ position: { x: 50, y: 50 },
583
+ data: {
584
+ label: 'Flow',
585
+ typeDefinition: processNodeType,
586
+ data: { name: 'Flow Start' },
587
+ } as CustomNodeData,
588
+ },
589
+ {
590
+ id: 'flow-2',
591
+ type: 'custom',
592
+ position: { x: 200, y: 50 },
593
+ data: {
594
+ label: 'Flow',
595
+ typeDefinition: dataNodeType,
596
+ data: { name: 'Flow End' },
597
+ } as CustomNodeData,
598
+ },
581
599
 
582
- { id: 'particle-1', type: 'custom', position: { x: 280, y: 50 }, data: { label: 'Particle', typeDefinition: processNodeType, data: { name: 'Particle Start' } } as CustomNodeData },
583
- { id: 'particle-2', type: 'custom', position: { x: 430, y: 50 }, data: { label: 'Particle', typeDefinition: dataNodeType, data: { name: 'Particle End' } } as CustomNodeData },
600
+ {
601
+ id: 'particle-1',
602
+ type: 'custom',
603
+ position: { x: 280, y: 50 },
604
+ data: {
605
+ label: 'Particle',
606
+ typeDefinition: processNodeType,
607
+ data: { name: 'Particle Start' },
608
+ } as CustomNodeData,
609
+ },
610
+ {
611
+ id: 'particle-2',
612
+ type: 'custom',
613
+ position: { x: 430, y: 50 },
614
+ data: {
615
+ label: 'Particle',
616
+ typeDefinition: dataNodeType,
617
+ data: { name: 'Particle End' },
618
+ } as CustomNodeData,
619
+ },
584
620
 
585
- { id: 'pulse-1', type: 'custom', position: { x: 510, y: 50 }, data: { label: 'Pulse', typeDefinition: processNodeType, data: { name: 'Pulse Start' } } as CustomNodeData },
586
- { id: 'pulse-2', type: 'custom', position: { x: 660, y: 50 }, data: { label: 'Pulse', typeDefinition: dataNodeType, data: { name: 'Pulse End' } } as CustomNodeData },
621
+ {
622
+ id: 'pulse-1',
623
+ type: 'custom',
624
+ position: { x: 510, y: 50 },
625
+ data: {
626
+ label: 'Pulse',
627
+ typeDefinition: processNodeType,
628
+ data: { name: 'Pulse Start' },
629
+ } as CustomNodeData,
630
+ },
631
+ {
632
+ id: 'pulse-2',
633
+ type: 'custom',
634
+ position: { x: 660, y: 50 },
635
+ data: {
636
+ label: 'Pulse',
637
+ typeDefinition: dataNodeType,
638
+ data: { name: 'Pulse End' },
639
+ } as CustomNodeData,
640
+ },
587
641
 
588
642
  // Row 2: Node animations
589
- { id: 'node-pulse', type: 'custom', position: { x: 100, y: 180 }, data: { label: 'Processing Pulse', typeDefinition: processNodeType, data: { name: 'Processing' }, animationType: 'pulse', animationDuration: 1500 } as CustomNodeData },
590
- { id: 'node-flash', type: 'custom', position: { x: 300, y: 180 }, data: { label: 'Success Flash', typeDefinition: dataNodeType, data: { name: 'Success' }, animationType: 'flash', animationDuration: 1000 } as CustomNodeData },
591
- { id: 'node-shake', type: 'custom', position: { x: 500, y: 180 }, data: { label: 'Error Shake', typeDefinition: processNodeType, data: { name: 'Error' }, animationType: 'shake', animationDuration: 500, hasViolations: true } as CustomNodeData },
643
+ {
644
+ id: 'node-pulse',
645
+ type: 'custom',
646
+ position: { x: 100, y: 180 },
647
+ data: {
648
+ label: 'Processing Pulse',
649
+ typeDefinition: processNodeType,
650
+ data: { name: 'Processing' },
651
+ animationType: 'pulse',
652
+ animationDuration: 1500,
653
+ } as CustomNodeData,
654
+ },
655
+ {
656
+ id: 'node-flash',
657
+ type: 'custom',
658
+ position: { x: 300, y: 180 },
659
+ data: {
660
+ label: 'Success Flash',
661
+ typeDefinition: dataNodeType,
662
+ data: { name: 'Success' },
663
+ animationType: 'flash',
664
+ animationDuration: 1000,
665
+ } as CustomNodeData,
666
+ },
667
+ {
668
+ id: 'node-shake',
669
+ type: 'custom',
670
+ position: { x: 500, y: 180 },
671
+ data: {
672
+ label: 'Error Shake',
673
+ typeDefinition: processNodeType,
674
+ data: { name: 'Error' },
675
+ animationType: 'shake',
676
+ animationDuration: 500,
677
+ hasViolations: true,
678
+ } as CustomNodeData,
679
+ },
592
680
  ]}
593
681
  edges={[
594
- { id: 'e-flow', source: 'flow-1', target: 'flow-2', type: 'custom', data: { typeDefinition: edgeTypeDefinition, animationType: 'flow', animationDirection: 'forward', animationDuration: 1000 } as CustomEdgeData },
595
- { id: 'e-particle', source: 'particle-1', target: 'particle-2', type: 'custom', data: { typeDefinition: edgeTypeDefinition, animationType: 'particle', animationDuration: 1200 } as CustomEdgeData },
596
- { id: 'e-pulse', source: 'pulse-1', target: 'pulse-2', type: 'custom', data: { typeDefinition: edgeTypeDefinition, animationType: 'pulse', animationDuration: 1500 } as CustomEdgeData },
682
+ {
683
+ id: 'e-flow',
684
+ source: 'flow-1',
685
+ target: 'flow-2',
686
+ type: 'custom',
687
+ data: {
688
+ typeDefinition: edgeTypeDefinition,
689
+ animationType: 'flow',
690
+ animationDirection: 'forward',
691
+ animationDuration: 1000,
692
+ } as CustomEdgeData,
693
+ },
694
+ {
695
+ id: 'e-particle',
696
+ source: 'particle-1',
697
+ target: 'particle-2',
698
+ type: 'custom',
699
+ data: {
700
+ typeDefinition: edgeTypeDefinition,
701
+ animationType: 'particle',
702
+ animationDuration: 1200,
703
+ } as CustomEdgeData,
704
+ },
705
+ {
706
+ id: 'e-pulse',
707
+ source: 'pulse-1',
708
+ target: 'pulse-2',
709
+ type: 'custom',
710
+ data: {
711
+ typeDefinition: edgeTypeDefinition,
712
+ animationType: 'pulse',
713
+ animationDuration: 1500,
714
+ } as CustomEdgeData,
715
+ },
597
716
  ]}
598
717
  nodeTypes={nodeTypes}
599
718
  edgeTypes={edgeTypes}