@principal-ai/principal-view-react 0.6.9 → 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.
- package/README.md +2 -5
- package/dist/components/ConfigurationSelector.js +4 -2
- package/dist/components/ConfigurationSelector.js.map +1 -1
- package/dist/components/EdgeInfoPanel.d.ts.map +1 -1
- package/dist/components/EdgeInfoPanel.js +43 -13
- package/dist/components/EdgeInfoPanel.js.map +1 -1
- package/dist/components/GraphRenderer.d.ts.map +1 -1
- package/dist/components/GraphRenderer.js +135 -82
- package/dist/components/GraphRenderer.js.map +1 -1
- package/dist/components/NodeInfoPanel.d.ts.map +1 -1
- package/dist/components/NodeInfoPanel.js +143 -45
- package/dist/components/NodeInfoPanel.js.map +1 -1
- package/dist/edges/CustomEdge.d.ts.map +1 -1
- package/dist/edges/CustomEdge.js +2 -2
- package/dist/edges/CustomEdge.js.map +1 -1
- package/dist/edges/GenericEdge.d.ts.map +1 -1
- package/dist/edges/GenericEdge.js +2 -2
- package/dist/edges/GenericEdge.js.map +1 -1
- package/dist/hooks/usePathBasedEvents.d.ts +1 -1
- package/dist/hooks/usePathBasedEvents.d.ts.map +1 -1
- package/dist/hooks/usePathBasedEvents.js +9 -9
- package/dist/hooks/usePathBasedEvents.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/nodes/CustomNode.d.ts.map +1 -1
- package/dist/nodes/CustomNode.js +61 -44
- package/dist/nodes/CustomNode.js.map +1 -1
- package/dist/nodes/GenericNode.d.ts.map +1 -1
- package/dist/nodes/GenericNode.js.map +1 -1
- package/dist/utils/animationMapping.d.ts.map +1 -1
- package/dist/utils/animationMapping.js +12 -12
- package/dist/utils/animationMapping.js.map +1 -1
- package/dist/utils/graphConverter.d.ts.map +1 -1
- package/dist/utils/graphConverter.js +23 -17
- package/dist/utils/graphConverter.js.map +1 -1
- package/dist/utils/iconResolver.d.ts.map +1 -1
- package/dist/utils/iconResolver.js +1 -1
- package/dist/utils/iconResolver.js.map +1 -1
- package/package.json +2 -1
- package/src/components/ConfigurationSelector.tsx +5 -5
- package/src/components/EdgeInfoPanel.tsx +79 -37
- package/src/components/GraphRenderer.tsx +528 -364
- package/src/components/NodeInfoPanel.tsx +209 -86
- package/src/edges/CustomEdge.tsx +6 -4
- package/src/edges/GenericEdge.tsx +2 -6
- package/src/hooks/usePathBasedEvents.ts +54 -45
- package/src/index.ts +11 -2
- package/src/nodes/CustomNode.tsx +132 -106
- package/src/nodes/GenericNode.tsx +4 -3
- package/src/stories/AnimationWorkshop.stories.tsx +131 -12
- package/src/stories/CanvasNodeTypes.stories.tsx +898 -0
- package/src/stories/ColorPriority.stories.tsx +20 -10
- package/src/stories/EventDrivenAnimations.stories.tsx +8 -0
- package/src/stories/EventLog.stories.tsx +1 -1
- package/src/stories/GraphRenderer.stories.tsx +23 -10
- package/src/stories/IndustryThemes.stories.tsx +481 -0
- package/src/stories/MultiConfig.stories.tsx +8 -0
- package/src/stories/MultiDirectionalConnections.stories.tsx +8 -0
- package/src/stories/NodeFieldsAudit.stories.tsx +124 -37
- package/src/stories/NodeShapes.stories.tsx +73 -59
- package/src/utils/animationMapping.ts +19 -23
- package/src/utils/graphConverter.ts +35 -19
- package/src/utils/iconResolver.tsx +5 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graphConverter.js","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"graphConverter.js","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iconResolver.d.ts","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"iconResolver.d.ts","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAkBjG;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEpC,CAAC"}
|
|
@@ -56,7 +56,7 @@ function resolveIcon(icon, size = 20, className) {
|
|
|
56
56
|
return (0, jsx_runtime_1.jsx)(LucideIcon, { size: size, className: className });
|
|
57
57
|
}
|
|
58
58
|
// Fall back to rendering as text (emoji or unicode)
|
|
59
|
-
return (0, jsx_runtime_1.jsx)("span", { className: className, style: { fontSize: `${size}px` }, children: icon });
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)("span", { className: className, style: { fontSize: `${size}px` }, children: icon }));
|
|
60
60
|
}
|
|
61
61
|
/**
|
|
62
62
|
* Icon component that resolves icon strings
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iconResolver.js","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,
|
|
1
|
+
{"version":3,"file":"iconResolver.js","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,kCAkBC;;AA5CD,0DAA4C;AAkB5C;;;;;;;GAOG;AACH,SAAgB,WAAW,CAAC,IAAa,EAAE,OAAe,EAAE,EAAE,SAAkB;IAC9E,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,sCAAsC;IACtC,8DAA8D;IAC9D,MAAM,UAAU,GAAI,WAAmB,CAAC,IAAI,CAAC,CAAC;IAE9C,2EAA2E;IAC3E,IAAI,UAAU,IAAI,CAAC,OAAO,UAAU,KAAK,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,CAAC,EAAE,CAAC;QACvF,OAAO,uBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;IAC1D,CAAC;IAED,oDAAoD;IACpD,OAAO,CACL,iCAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE,YACzD,IAAI,GACA,CACR,CAAC;AACJ,CAAC;AAED;;GAEG;AACI,MAAM,IAAI,GAAwB,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,OAAO,2DAAG,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAI,CAAC;AACnD,CAAC,CAAC;AAFW,QAAA,IAAI,QAEf"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@principal-ai/principal-view-react",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.11",
|
|
4
4
|
"description": "React components for graph-based principal view framework",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"build-storybook": "storybook build"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
+
"@principal-ade/industry-theme": "^0.1.4",
|
|
17
18
|
"@principal-ai/principal-view-core": "^0.5.7",
|
|
18
19
|
"@xyflow/react": "^12.0.0",
|
|
19
20
|
"elkjs": "^0.9.0",
|
|
@@ -56,7 +56,7 @@ export const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
|
|
|
56
56
|
onConfigChange(event.target.value);
|
|
57
57
|
};
|
|
58
58
|
|
|
59
|
-
const selectedConfigData = configurations.find(c => c.name === selectedConfig);
|
|
59
|
+
const selectedConfigData = configurations.find((c) => c.name === selectedConfig);
|
|
60
60
|
|
|
61
61
|
const defaultStyle: React.CSSProperties = {
|
|
62
62
|
backgroundColor: 'white',
|
|
@@ -97,9 +97,7 @@ export const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
|
|
|
97
97
|
if (configurations.length === 0) {
|
|
98
98
|
return (
|
|
99
99
|
<div className={className} style={defaultStyle}>
|
|
100
|
-
<div style={{ ...labelStyle, color: '#999' }}>
|
|
101
|
-
No configurations available
|
|
102
|
-
</div>
|
|
100
|
+
<div style={{ ...labelStyle, color: '#999' }}>No configurations available</div>
|
|
103
101
|
</div>
|
|
104
102
|
);
|
|
105
103
|
}
|
|
@@ -125,7 +123,9 @@ export const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
|
|
|
125
123
|
{configurations.map((config) => (
|
|
126
124
|
<option key={config.name} value={config.name}>
|
|
127
125
|
{config.config.metadata.name}
|
|
128
|
-
{showVersion &&
|
|
126
|
+
{showVersion &&
|
|
127
|
+
config.config.metadata.version &&
|
|
128
|
+
` (v${config.config.metadata.version})`}
|
|
129
129
|
</option>
|
|
130
130
|
))}
|
|
131
131
|
</select>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
|
|
3
|
+
import { useTheme } from '@principal-ade/industry-theme';
|
|
3
4
|
|
|
4
5
|
export interface EdgeInfoPanelProps {
|
|
5
6
|
edge: EdgeState;
|
|
@@ -22,7 +23,8 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
22
23
|
onClose,
|
|
23
24
|
onDelete,
|
|
24
25
|
}) => {
|
|
25
|
-
const
|
|
26
|
+
const { theme } = useTheme();
|
|
27
|
+
const edgeColor = typeDefinition.color || theme.colors.primary;
|
|
26
28
|
|
|
27
29
|
// Get fields to display based on dataSchema
|
|
28
30
|
const displayFields = typeDefinition.dataSchema
|
|
@@ -45,27 +47,29 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
45
47
|
position: 'absolute',
|
|
46
48
|
top: '60px',
|
|
47
49
|
right: '20px',
|
|
48
|
-
backgroundColor:
|
|
50
|
+
backgroundColor: theme.colors.background,
|
|
51
|
+
color: theme.colors.text,
|
|
49
52
|
borderRadius: '8px',
|
|
50
53
|
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
|
51
54
|
padding: '16px',
|
|
52
55
|
minWidth: '250px',
|
|
53
56
|
maxWidth: '350px',
|
|
54
57
|
zIndex: 1000,
|
|
58
|
+
border: `1px solid ${theme.colors.border}`,
|
|
55
59
|
}}
|
|
56
60
|
>
|
|
57
61
|
{/* Header */}
|
|
58
|
-
<div
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
</div>
|
|
62
|
+
<div
|
|
63
|
+
style={{
|
|
64
|
+
display: 'flex',
|
|
65
|
+
justifyContent: 'space-between',
|
|
66
|
+
alignItems: 'center',
|
|
67
|
+
marginBottom: '12px',
|
|
68
|
+
paddingBottom: '8px',
|
|
69
|
+
borderBottom: `2px solid ${edgeColor}`,
|
|
70
|
+
}}
|
|
71
|
+
>
|
|
72
|
+
<div style={{ fontWeight: 'bold', fontSize: '14px', color: edgeColor }}>Edge Information</div>
|
|
69
73
|
<button
|
|
70
74
|
onClick={onClose}
|
|
71
75
|
style={{
|
|
@@ -73,7 +77,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
73
77
|
background: 'none',
|
|
74
78
|
cursor: 'pointer',
|
|
75
79
|
fontSize: '18px',
|
|
76
|
-
color:
|
|
80
|
+
color: theme.colors.textSecondary,
|
|
77
81
|
padding: '0',
|
|
78
82
|
width: '24px',
|
|
79
83
|
height: '24px',
|
|
@@ -88,32 +92,48 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
88
92
|
|
|
89
93
|
{/* Edge Type */}
|
|
90
94
|
<div style={{ marginBottom: '12px' }}>
|
|
91
|
-
<div style={{ fontSize: '10px', color:
|
|
95
|
+
<div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
|
|
92
96
|
Type
|
|
93
97
|
</div>
|
|
94
|
-
<div
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
98
|
+
<div
|
|
99
|
+
style={{
|
|
100
|
+
fontSize: '12px',
|
|
101
|
+
padding: '4px 8px',
|
|
102
|
+
backgroundColor: edgeColor,
|
|
103
|
+
color: theme.colors.background,
|
|
104
|
+
borderRadius: '4px',
|
|
105
|
+
display: 'inline-block',
|
|
106
|
+
}}
|
|
107
|
+
>
|
|
102
108
|
{edge.type}
|
|
103
109
|
</div>
|
|
104
110
|
</div>
|
|
105
111
|
|
|
106
112
|
{/* Connection Info */}
|
|
107
113
|
<div style={{ marginBottom: '12px' }}>
|
|
108
|
-
<div style={{ fontSize: '10px', color:
|
|
114
|
+
<div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
|
|
109
115
|
Connection
|
|
110
116
|
</div>
|
|
111
|
-
<div style={{ fontSize: '12px'
|
|
112
|
-
<span
|
|
117
|
+
<div style={{ fontSize: '12px' }}>
|
|
118
|
+
<span
|
|
119
|
+
style={{
|
|
120
|
+
fontFamily: theme.fonts.monospace,
|
|
121
|
+
backgroundColor: theme.colors.muted,
|
|
122
|
+
padding: '2px 6px',
|
|
123
|
+
borderRadius: '3px',
|
|
124
|
+
}}
|
|
125
|
+
>
|
|
113
126
|
{sourceNodeId}
|
|
114
127
|
</span>
|
|
115
|
-
<span style={{ margin: '0 8px', color:
|
|
116
|
-
<span
|
|
128
|
+
<span style={{ margin: '0 8px', color: theme.colors.textMuted }}>→</span>
|
|
129
|
+
<span
|
|
130
|
+
style={{
|
|
131
|
+
fontFamily: theme.fonts.monospace,
|
|
132
|
+
backgroundColor: theme.colors.muted,
|
|
133
|
+
padding: '2px 6px',
|
|
134
|
+
borderRadius: '3px',
|
|
135
|
+
}}
|
|
136
|
+
>
|
|
117
137
|
{targetNodeId}
|
|
118
138
|
</span>
|
|
119
139
|
</div>
|
|
@@ -122,15 +142,22 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
122
142
|
{/* Display schema-defined fields */}
|
|
123
143
|
{hasSchemaFields && (
|
|
124
144
|
<div style={{ marginBottom: '12px' }}>
|
|
125
|
-
<div
|
|
145
|
+
<div
|
|
146
|
+
style={{
|
|
147
|
+
fontSize: '10px',
|
|
148
|
+
color: theme.colors.textSecondary,
|
|
149
|
+
marginBottom: '8px',
|
|
150
|
+
fontWeight: 'bold',
|
|
151
|
+
}}
|
|
152
|
+
>
|
|
126
153
|
Properties
|
|
127
154
|
</div>
|
|
128
155
|
{displayFields.map(({ field, label, value }) => (
|
|
129
156
|
<div key={field} style={{ marginBottom: '8px' }}>
|
|
130
|
-
<div style={{ fontSize: '10px', color:
|
|
157
|
+
<div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '2px' }}>
|
|
131
158
|
{label}
|
|
132
159
|
</div>
|
|
133
|
-
<div style={{ fontSize: '12px'
|
|
160
|
+
<div style={{ fontSize: '12px' }}>
|
|
134
161
|
{value !== undefined && value !== null
|
|
135
162
|
? typeof value === 'object'
|
|
136
163
|
? JSON.stringify(value, null, 2)
|
|
@@ -145,15 +172,22 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
145
172
|
{/* Show all edge data if no schema is defined */}
|
|
146
173
|
{!hasSchemaFields && edgeDataEntries.length > 0 && (
|
|
147
174
|
<div style={{ marginBottom: '12px' }}>
|
|
148
|
-
<div
|
|
175
|
+
<div
|
|
176
|
+
style={{
|
|
177
|
+
fontSize: '10px',
|
|
178
|
+
color: theme.colors.textSecondary,
|
|
179
|
+
marginBottom: '8px',
|
|
180
|
+
fontWeight: 'bold',
|
|
181
|
+
}}
|
|
182
|
+
>
|
|
149
183
|
Data
|
|
150
184
|
</div>
|
|
151
185
|
{edgeDataEntries.map(([key, value]) => (
|
|
152
186
|
<div key={key} style={{ marginBottom: '8px' }}>
|
|
153
|
-
<div style={{ fontSize: '10px', color:
|
|
187
|
+
<div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '2px' }}>
|
|
154
188
|
{key}
|
|
155
189
|
</div>
|
|
156
|
-
<div style={{ fontSize: '12px',
|
|
190
|
+
<div style={{ fontSize: '12px', wordBreak: 'break-word' }}>
|
|
157
191
|
{value !== undefined && value !== null
|
|
158
192
|
? typeof value === 'object'
|
|
159
193
|
? JSON.stringify(value, null, 2)
|
|
@@ -166,7 +200,15 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
166
200
|
)}
|
|
167
201
|
|
|
168
202
|
{/* Metadata */}
|
|
169
|
-
<div
|
|
203
|
+
<div
|
|
204
|
+
style={{
|
|
205
|
+
fontSize: '10px',
|
|
206
|
+
color: theme.colors.textMuted,
|
|
207
|
+
marginTop: '12px',
|
|
208
|
+
paddingTop: '8px',
|
|
209
|
+
borderTop: `1px solid ${theme.colors.border}`,
|
|
210
|
+
}}
|
|
211
|
+
>
|
|
170
212
|
ID: {edge.id}
|
|
171
213
|
</div>
|
|
172
214
|
|
|
@@ -181,8 +223,8 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
|
|
|
181
223
|
marginTop: '12px',
|
|
182
224
|
width: '100%',
|
|
183
225
|
padding: '8px 12px',
|
|
184
|
-
backgroundColor:
|
|
185
|
-
color:
|
|
226
|
+
backgroundColor: theme.colors.error,
|
|
227
|
+
color: theme.colors.background,
|
|
186
228
|
border: 'none',
|
|
187
229
|
borderRadius: '4px',
|
|
188
230
|
cursor: 'pointer',
|