@principal-ai/principal-view-react 0.14.28 → 0.14.29
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/dist/components/WorkflowSequenceDiagram.d.ts +3 -1
- package/dist/components/WorkflowSequenceDiagram.d.ts.map +1 -1
- package/dist/components/WorkflowSequenceDiagram.js +14 -3
- package/dist/components/WorkflowSequenceDiagram.js.map +1 -1
- package/package.json +1 -1
- package/src/components/WorkflowSequenceDiagram.tsx +21 -1
|
@@ -27,6 +27,8 @@ export interface WorkflowSequenceDiagramProps {
|
|
|
27
27
|
showBackground?: boolean;
|
|
28
28
|
/** Optional class name */
|
|
29
29
|
className?: string;
|
|
30
|
+
/** Callback when an event node is clicked - receives the event index (0-based) */
|
|
31
|
+
onEventIndexChange?: (eventIndex: number) => void;
|
|
30
32
|
}
|
|
31
33
|
/**
|
|
32
34
|
* WorkflowSequenceDiagram Component
|
|
@@ -48,5 +50,5 @@ export interface WorkflowSequenceDiagramProps {
|
|
|
48
50
|
* />
|
|
49
51
|
* ```
|
|
50
52
|
*/
|
|
51
|
-
export declare function WorkflowSequenceDiagram({ scenario, canvas, height, width, layoutOptions, showControls, showBackground, className, }: WorkflowSequenceDiagramProps): import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
export declare function WorkflowSequenceDiagram({ scenario, canvas, height, width, layoutOptions, showControls, showBackground, className, onEventIndexChange, }: WorkflowSequenceDiagramProps): import("react/jsx-runtime").JSX.Element;
|
|
52
54
|
//# sourceMappingURL=WorkflowSequenceDiagram.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WorkflowSequenceDiagram.d.ts","sourceRoot":"","sources":["../../src/components/WorkflowSequenceDiagram.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGlG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,qCAAqC;IACrC,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;IAExC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"WorkflowSequenceDiagram.d.ts","sourceRoot":"","sources":["../../src/components/WorkflowSequenceDiagram.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGlG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,qCAAqC;IACrC,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;IAExC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,sCAAsC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAgHD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,MAAM,EACN,MAAY,EACZ,KAAc,EACd,aAAa,EACb,YAAmB,EACnB,cAAsB,EACtB,SAAS,EACT,kBAAkB,GACnB,EAAE,4BAA4B,2CAuD9B"}
|
|
@@ -6,7 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
6
6
|
* workflow scenarios to sequence diagram format, following the graph-to-sequence
|
|
7
7
|
* model where participants are scopes and events are move/transform operations.
|
|
8
8
|
*/
|
|
9
|
-
import { useMemo } from 'react';
|
|
9
|
+
import { useMemo, useCallback } from 'react';
|
|
10
10
|
import { SequenceDiagramRenderer } from './SequenceDiagramRenderer';
|
|
11
11
|
/**
|
|
12
12
|
* Type guard to check if a node is an OTEL event node
|
|
@@ -107,9 +107,20 @@ function convertWorkflowToSequence(scenario, canvas) {
|
|
|
107
107
|
* />
|
|
108
108
|
* ```
|
|
109
109
|
*/
|
|
110
|
-
export function WorkflowSequenceDiagram({ scenario, canvas, height = 600, width = '100%', layoutOptions, showControls = true, showBackground = false, className, }) {
|
|
110
|
+
export function WorkflowSequenceDiagram({ scenario, canvas, height = 600, width = '100%', layoutOptions, showControls = true, showBackground = false, className, onEventIndexChange, }) {
|
|
111
111
|
// Convert workflow to sequence format
|
|
112
112
|
const { events, edges } = useMemo(() => convertWorkflowToSequence(scenario, canvas), [scenario, canvas]);
|
|
113
|
+
// Handle node clicks - map sequence node ID back to event index
|
|
114
|
+
const handleNodeClick = useCallback((nodeId) => {
|
|
115
|
+
if (!onEventIndexChange)
|
|
116
|
+
return;
|
|
117
|
+
// Node IDs are in format "event-{index}"
|
|
118
|
+
const match = nodeId.match(/^event-(\d+)$/);
|
|
119
|
+
if (match) {
|
|
120
|
+
const eventIndex = parseInt(match[1], 10);
|
|
121
|
+
onEventIndexChange(eventIndex);
|
|
122
|
+
}
|
|
123
|
+
}, [onEventIndexChange]);
|
|
113
124
|
// If no events, show empty state
|
|
114
125
|
if (events.length === 0) {
|
|
115
126
|
return (_jsx("div", { className: className, style: {
|
|
@@ -122,6 +133,6 @@ export function WorkflowSequenceDiagram({ scenario, canvas, height = 600, width
|
|
|
122
133
|
}, children: "No events in workflow" }));
|
|
123
134
|
}
|
|
124
135
|
// Render sequence diagram
|
|
125
|
-
return (_jsx(SequenceDiagramRenderer, { events: events, edges: edges, height: height, width: width, layoutOptions: layoutOptions, showControls: showControls, showBackground: showBackground, className: className }));
|
|
136
|
+
return (_jsx(SequenceDiagramRenderer, { events: events, edges: edges, height: height, width: width, layoutOptions: layoutOptions, showControls: showControls, showBackground: showBackground, className: className, onNodeClick: onEventIndexChange ? handleNodeClick : undefined }));
|
|
126
137
|
}
|
|
127
138
|
//# sourceMappingURL=WorkflowSequenceDiagram.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WorkflowSequenceDiagram.js","sourceRoot":"","sources":["../../src/components/WorkflowSequenceDiagram.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"WorkflowSequenceDiagram.js","sourceRoot":"","sources":["../../src/components/WorkflowSequenceDiagram.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAoCpE;;GAEG;AACH,SAAS,eAAe,CAAC,IAAS;IAMhC,OAAO,IAAI,EAAE,IAAI,KAAK,YAAY,IAAI,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC;AAC1D,CAAC;AAED;;GAEG;AACH,SAAS,qBAAqB,CAAC,IAAS;IAKtC,OAAO,IAAI,EAAE,IAAI,KAAK,kBAAkB,IAAI,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC;AACtE,CAAC;AAED;;GAEG;AACH,SAAS,yBAAyB,CAChC,QAA0B,EAC1B,MAAuC;IAKvC,6CAA6C;IAC7C,MAAM,cAAc,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,IAAI,EAAE,CAAC;IACtD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAE/C,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3B,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;KAClC;IAED,kCAAkC;IAClC,MAAM,eAAe,GAAG,IAAI,GAAG,EAAkB,CAAC;IAClD,MAAM,eAAe,GAAG,IAAI,GAAG,EAAkB,CAAC;IAClD,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAmB,CAAC;IAEvD,IAAI,MAAM,EAAE,KAAK,EAAE;QACjB,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;YAC/B,8FAA8F;YAC9F,MAAM,QAAQ,GAAG,IAA2B,CAAC;YAE7C,0BAA0B;YAC1B,IAAI,eAAe,CAAC,QAAQ,CAAC,EAAE;gBAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC;gBAEtC,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE;oBACxB,eAAe,CAAC,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBACrD;gBAED,IAAI,QAAQ,CAAC,KAAK,EAAE;oBAClB,eAAe,CAAC,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;iBAChD;aACF;YAED,0DAA0D;YAC1D,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EAAE;gBACnC,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,IAAI,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;gBAEtE,kDAAkD;gBAClD,IAAI,QAAQ,CAAC,eAAe,EAAE;oBAC5B,KAAK,MAAM,cAAc,IAAI,QAAQ,CAAC,eAAe,EAAE;wBACrD,eAAe,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;wBAChD,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;qBACrD;iBACF;aACF;SACF;KACF;IAED,kCAAkC;IAClC,MAAM,MAAM,GAAoB,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;QAClE,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;QAC1D,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,SAAS,CAAC;QAExF,oCAAoC;QACpC,kFAAkF;QAClF,MAAM,WAAW,GAAG,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC;QAE/D,OAAO;YACL,EAAE,EAAE,SAAS,KAAK,EAAE;YACpB,IAAI,EAAE,GAAG,KAAK,IAAI,SAAS,EAAE;YAC7B,KAAK;YACL,SAAS,EAAE,WAAW;YACtB,WAAW,EAAE,KAAK;SACnB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,0BAA0B;IAC1B,MAAM,KAAK,GAAmB,EAAE,CAAC;IACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;QAC1C,KAAK,CAAC,IAAI,CAAC;YACT,EAAE,EAAE,QAAQ,CAAC,EAAE;YACf,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;YACvB,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;SAC1B,CAAC,CAAC;KACJ;IAED,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;AAC3B,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,uBAAuB,CAAC,EACtC,QAAQ,EACR,MAAM,EACN,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,MAAM,EACd,aAAa,EACb,YAAY,GAAG,IAAI,EACnB,cAAc,GAAG,KAAK,EACtB,SAAS,EACT,kBAAkB,GACW;IAC7B,sCAAsC;IACtC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,yBAAyB,CAAC,QAAQ,EAAE,MAAM,CAAC,EACjD,CAAC,QAAQ,EAAE,MAAM,CAAC,CACnB,CAAC;IAEF,gEAAgE;IAChE,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAc,EAAE,EAAE;QACjB,IAAI,CAAC,kBAAkB;YAAE,OAAO;QAEhC,yCAAyC;QACzC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC5C,IAAI,KAAK,EAAE;YACT,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,kBAAkB,CAAC,UAAU,CAAC,CAAC;SAChC;IACH,CAAC,EACD,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,iCAAiC;IACjC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;gBACL,KAAK;gBACL,MAAM;gBACN,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,KAAK,EAAE,MAAM;aACd,sCAGG,CACP,CAAC;KACH;IAED,0BAA0B;IAC1B,OAAO,CACL,KAAC,uBAAuB,IACtB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,GAC7D,CACH,CAAC;AACJ,CAAC"}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* model where participants are scopes and events are move/transform operations.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
import { useMemo } from 'react';
|
|
9
|
+
import { useMemo, useCallback } from 'react';
|
|
10
10
|
import type { WorkflowScenario, Canvas, ExtendedCanvas } from '@principal-ai/principal-view-core';
|
|
11
11
|
import { SequenceDiagramRenderer } from './SequenceDiagramRenderer';
|
|
12
12
|
import type { SequenceEvent, SequenceEdge } from '../hooks/useSequenceLayout';
|
|
@@ -39,6 +39,9 @@ export interface WorkflowSequenceDiagramProps {
|
|
|
39
39
|
|
|
40
40
|
/** Optional class name */
|
|
41
41
|
className?: string;
|
|
42
|
+
|
|
43
|
+
/** Callback when an event node is clicked - receives the event index (0-based) */
|
|
44
|
+
onEventIndexChange?: (eventIndex: number) => void;
|
|
42
45
|
}
|
|
43
46
|
|
|
44
47
|
/**
|
|
@@ -180,6 +183,7 @@ export function WorkflowSequenceDiagram({
|
|
|
180
183
|
showControls = true,
|
|
181
184
|
showBackground = false,
|
|
182
185
|
className,
|
|
186
|
+
onEventIndexChange,
|
|
183
187
|
}: WorkflowSequenceDiagramProps) {
|
|
184
188
|
// Convert workflow to sequence format
|
|
185
189
|
const { events, edges } = useMemo(
|
|
@@ -187,6 +191,21 @@ export function WorkflowSequenceDiagram({
|
|
|
187
191
|
[scenario, canvas]
|
|
188
192
|
);
|
|
189
193
|
|
|
194
|
+
// Handle node clicks - map sequence node ID back to event index
|
|
195
|
+
const handleNodeClick = useCallback(
|
|
196
|
+
(nodeId: string) => {
|
|
197
|
+
if (!onEventIndexChange) return;
|
|
198
|
+
|
|
199
|
+
// Node IDs are in format "event-{index}"
|
|
200
|
+
const match = nodeId.match(/^event-(\d+)$/);
|
|
201
|
+
if (match) {
|
|
202
|
+
const eventIndex = parseInt(match[1], 10);
|
|
203
|
+
onEventIndexChange(eventIndex);
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
[onEventIndexChange]
|
|
207
|
+
);
|
|
208
|
+
|
|
190
209
|
// If no events, show empty state
|
|
191
210
|
if (events.length === 0) {
|
|
192
211
|
return (
|
|
@@ -217,6 +236,7 @@ export function WorkflowSequenceDiagram({
|
|
|
217
236
|
showControls={showControls}
|
|
218
237
|
showBackground={showBackground}
|
|
219
238
|
className={className}
|
|
239
|
+
onNodeClick={onEventIndexChange ? handleNodeClick : undefined}
|
|
220
240
|
/>
|
|
221
241
|
);
|
|
222
242
|
}
|