@principal-ai/principal-view-react 0.14.23 → 0.14.25

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/GraphRenderer.d.ts.map +1 -1
  2. package/dist/components/GraphRenderer.js +7 -2
  3. package/dist/components/GraphRenderer.js.map +1 -1
  4. package/dist/components/SequenceDiagramRenderer.d.ts.map +1 -1
  5. package/dist/components/SequenceDiagramRenderer.js +62 -39
  6. package/dist/components/SequenceDiagramRenderer.js.map +1 -1
  7. package/dist/hooks/useSequenceLayout.d.ts +1 -1
  8. package/dist/hooks/useSequenceLayout.d.ts.map +1 -1
  9. package/dist/hooks/useSequenceLayout.js +28 -4
  10. package/dist/hooks/useSequenceLayout.js.map +1 -1
  11. package/dist/utils/graphConverter.d.ts.map +1 -1
  12. package/dist/utils/graphConverter.js +15 -1
  13. package/dist/utils/graphConverter.js.map +1 -1
  14. package/package.json +3 -3
  15. package/src/components/GraphRenderer.tsx +8 -1
  16. package/src/components/SequenceDiagramRenderer.tsx +84 -45
  17. package/src/hooks/useSequenceLayout.ts +34 -5
  18. package/src/stories/RealCanvasFiles.stories.tsx +336 -0
  19. package/src/utils/graphConverter.ts +14 -1
package/dist/hooks/useSequenceLayout.d.ts CHANGED
@@ -73,7 +73,7 @@ export interface UseSequenceLayoutOptions {
73
73
  laneWidth?: number;
74
74
  /**
75
75
  * Gap between swimlanes
76
- * @default 50
76
+ * @default 10
77
77
  */
78
78
  laneGap?: number;
79
79
  /**
package/dist/hooks/useSequenceLayout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSequenceLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useSequenceLayout.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,WAAW,EAAE,OAAO,CAAC;IACrB,uBAAuB;IACvB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,cAAc,GACd,MAAM,GACN,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,sCAAsC;IACtC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,2BAA2B;IAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,oCAAoC;IACpC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;CACrB;AA0CD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,aAAa,EAAE,EACvB,aAAa,EAAE,YAAY,EAAE,EAC7B,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,CA6LzB"}
1
+ {"version":3,"file":"useSequenceLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useSequenceLayout.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,WAAW,EAAE,OAAO,CAAC;IACrB,uBAAuB;IACvB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,cAAc,GACd,MAAM,GACN,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,sCAAsC;IACtC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,2BAA2B;IAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,oCAAoC;IACpC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;CACrB;AA0CD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,aAAa,EAAE,EACvB,aAAa,EAAE,YAAY,EAAE,EAC7B,OAAO,GAAE,wBAA6B,GACrC,uBAAuB,CA0NzB"}
package/dist/hooks/useSequenceLayout.js CHANGED
@@ -60,7 +60,7 @@ function getParentNamespace(namespace) {
60
60
  * ```
61
61
  */
62
62
  export function useSequenceLayout(events, sequenceEdges, options = {}) {
63
- const { namespaceStrategy = 'all-but-last', laneWidth = 200, laneGap = 50, eventSpacing = 80, headerHeight = 60, collapsedNamespaces = [], nodeWidth = 14, nodeHeight = 14, } = options;
63
+ const { namespaceStrategy = 'all-but-last', laneWidth = 200, laneGap = 10, eventSpacing = 80, headerHeight = 60, collapsedNamespaces = [], nodeWidth = 14, nodeHeight = 14, } = options;
64
64
  return useMemo(() => {
65
65
  if (events.length === 0) {
66
66
  return {
@@ -142,7 +142,8 @@ export function useSequenceLayout(events, sequenceEdges, options = {}) {
142
142
  const visibleNamespace = namespaceToVisible.get(originalNamespace);
143
143
  const lane = swimlaneByNamespace.get(visibleNamespace);
144
144
  // Global Y position based on event order (time layer)
145
- const y = headerHeight + i * eventSpacing;
145
+ // Start first event closer to header with small offset
146
+ const y = headerHeight + 40 + i * eventSpacing;
146
147
  nodes.push({
147
148
  id: event.id,
148
149
  type: 'sequenceMarker',
@@ -188,9 +189,32 @@ export function useSequenceLayout(events, sequenceEdges, options = {}) {
188
189
  };
189
190
  });
190
191
  // Step 6: Compute total dimensions
191
- const totalWidth = swimlanes.length * (laneWidth + laneGap) - laneGap + laneWidth;
192
+ const totalWidth = swimlanes.length * laneWidth + (swimlanes.length - 1) * laneGap;
192
193
  // Total height based on number of events (time layers)
193
- const totalHeight = headerHeight + events.length * eventSpacing + eventSpacing;
194
+ const totalHeight = headerHeight + 40 + events.length * eventSpacing;
195
+ // Step 7: Add invisible boundary nodes to ensure fitView includes full diagram width
196
+ if (swimlanes.length > 0) {
197
+ const leftmostLane = swimlanes[0];
198
+ const rightmostLane = swimlanes[swimlanes.length - 1];
199
+ // Add boundary nodes at the corners
200
+ nodes.push({
201
+ id: '__boundary_left__',
202
+ type: 'default',
203
+ position: { x: leftmostLane.x - laneWidth / 2, y: 0 },
204
+ data: {},
205
+ style: { width: 1, height: 1, opacity: 0 },
206
+ draggable: false,
207
+ selectable: false,
208
+ }, {
209
+ id: '__boundary_right__',
210
+ type: 'default',
211
+ position: { x: rightmostLane.x + laneWidth / 2, y: totalHeight },
212
+ data: {},
213
+ style: { width: 1, height: 1, opacity: 0 },
214
+ draggable: false,
215
+ selectable: false,
216
+ });
217
+ }
194
218
  return {
195
219
  nodes,
196
220
  edges,
package/dist/hooks/useSequenceLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSequenceLayout.js","sourceRoot":"","sources":["../../src/hooks/useSequenceLayout.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAoIhC;;GAEG;AACH,SAAS,gBAAgB,CAAC,IAAY,EAAE,QAA2B;IACjE,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;QAClC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;KACvB;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjC,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;QACxB,OAAO,IAAI,CAAC;KACb;IAED,IAAI,QAAQ,KAAK,OAAO,EAAE;QACxB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC;KACpB;IAED,IAAI,QAAQ,KAAK,cAAc,EAAE;QAC/B,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACxC;IAED,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;QAChC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC9C;IAED,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,SAAS,kBAAkB,CAAC,SAAiB;IAC3C,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE;QACxB,OAAO,SAAS,CAAC;KAClB;IACD,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,iBAAiB,CAC/B,MAAuB,EACvB,aAA6B,EAC7B,UAAoC,EAAE;IAEtC,MAAM,EACJ,iBAAiB,GAAG,cAAc,EAClC,SAAS,GAAG,GAAG,EACf,OAAO,GAAG,EAAE,EACZ,YAAY,GAAG,EAAE,EACjB,YAAY,GAAG,EAAE,EACjB,mBAAmB,GAAG,EAAE,EACxB,SAAS,GAAG,EAAE,EACd,UAAU,GAAG,EAAE,GAChB,GAAG,OAAO,CAAC;IAEZ,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACvB,OAAO;gBACL,KAAK,EAAE,EAAE;gBACT,KAAK,EAAE,EAAE;gBACT,SAAS,EAAE,EAAE;gBACb,UAAU,EAAE,CAAC;gBACb,WAAW,EAAE,CAAC;aACf,CAAC;SACH;QAED,8CAA8C;QAC9C,MAAM,eAAe,GAAG,IAAI,GAAG,EAAkB,CAAC;QAClD,MAAM,eAAe,GAAG,IAAI,GAAG,EAAoB,CAAC;QAEpD,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;YAC1B,MAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;YAClE,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YAEzC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;gBACnC,eAAe,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;aACpC;YACD,eAAe,CAAC,GAAG,CAAC,SAAS,CAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;SAChD;QAED,gEAAgE;QAChE,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QAChE,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAElD,uDAAuD;QACvD,MAAM,iBAAiB,GAAa,EAAE,CAAC;QACvC,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAAkB,CAAC;QAErD,KAAK,MAAM,EAAE,IAAI,aAAa,EAAE;YAC9B,qCAAqC;YACrC,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,IAAI,OAAO,GAAuB,EAAE,CAAC;YAErC,OAAO,OAAO,EAAE;gBACd,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;oBAC7B,SAAS,GAAG,OAAO,CAAC;iBACrB;gBACD,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;aACvC;YAED,kBAAkB,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YAEtC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;gBAC1C,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aACnC;SACF;QAED,0CAA0C;QAC1C,MAAM,SAAS,GAAe,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YACvE,MAAM,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC;YAExD,qDAAqD;YACrD,MAAM,QAAQ,GAAa,EAAE,CAAC;YAC9B,KAAK,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,eAAe,EAAE;gBAChD,IAAI,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,SAAS,EAAE;oBACjD,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;iBACxB;aACF;YAED,sDAAsD;YACtD,MAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CACnC,CAAC,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,EAAE,CAAC,KAAK,SAAS,CAC7C,CAAC;YAEF,OAAO;gBACL,SAAS;gBACT,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,SAAS;gBAC9C,CAAC;gBACD,eAAe,EAAE,kBAAkB,CAAC,SAAS,CAAC;gBAC9C,WAAW,EAAE,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC;gBACxC,QAAQ;gBACR,QAAQ;aACT,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,0CAA0C;QAC1C,MAAM,mBAAmB,GAAG,IAAI,GAAG,EAAoB,CAAC;QACxD,KAAK,MAAM,IAAI,IAAI,SAAS,EAAE;YAC5B,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;SAC/C;QAED,mDAAmD;QACnD,0EAA0E;QAC1E,6DAA6D;QAC7D,MAAM,KAAK,GAAW,EAAE,CAAC;QAEzB,+CAA+C;QAC/C,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAExD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACxB,MAAM,iBAAiB,GAAG,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,CAAC;YACzD,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,GAAG,CAAC,iBAAiB,CAAE,CAAC;YACpE,MAAM,IAAI,GAAG,mBAAmB,CAAC,GAAG,CAAC,gBAAgB,CAAE,CAAC;YAExD,sDAAsD;YACtD,MAAM,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,CAAC;YAE1C,KAAK,CAAC,IAAI,CAAC;gBACT,EAAE,EAAE,KAAK,CAAC,EAAE;gBACZ,IAAI,EAAE,gBAAgB;gBACtB,QAAQ,EAAE;oBACR,CAAC,EAAE,IAAI,CAAC,CAAC,GAAG,SAAS,GAAG,CAAC;oBACzB,CAAC,EAAE,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,sCAAsC;iBAC9D;gBACD,IAAI,EAAE;oBACJ,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,CAAC,IAAI;oBAC/D,QAAQ,EAAE,KAAK,CAAC,IAAI;oBACpB,SAAS,EAAE,iBAAiB;oBAC5B,gBAAgB;oBAChB,SAAS,EAAE,CAAC;oBACZ,GAAG,KAAK,CAAC,IAAI;iBACd;gBACD,KAAK,EAAE;oBACL,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,UAAU;iBACnB;aACF,CAAC,CAAC;SACJ;QAED,6DAA6D;QAC7D,MAAM,KAAK,GAAW,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAC/C,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC5D,MAAM,eAAe,GAAG,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC1D,MAAM,YAAY,GAChB,kBAAkB,CAAC,GAAG,CAAC,eAAgB,CAAC;gBACxC,kBAAkB,CAAC,GAAG,CAAC,eAAgB,CAAC,CAAC;YAE3C,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAChD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,WAAW,EAAE,KAAK,IAAI,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC;YAE/F,OAAO;gBACL,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,MAAM,EAAE,IAAI,CAAC,SAAS;gBACtB,MAAM,EAAE,IAAI,CAAC,OAAO;gBACpB,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,SAAS;gBAChB,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE;gBAC7C,YAAY,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,EAAE;gBACjD,IAAI,EAAE;oBACJ,YAAY;oBACZ,eAAe;oBACf,eAAe;iBAChB;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,mCAAmC;QACnC,MAAM,UAAU,GACd,SAAS,CAAC,MAAM,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,GAAG,OAAO,GAAG,SAAS,CAAC;QACjE,uDAAuD;QACvD,MAAM,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;QAE/E,OAAO;YACL,KAAK;YACL,KAAK;YACL,SAAS;YACT,UAAU;YACV,WAAW;SACZ,CAAC;IACJ,CAAC,EAAE;QACD,MAAM;QACN,aAAa;QACb,iBAAiB;QACjB,SAAS;QACT,OAAO;QACP,YAAY;QACZ,YAAY;QACZ,SAAS;QACT,UAAU;QACV,mBAAmB;KACpB,CAAC,CAAC;AACL,CAAC"}
1
+ {"version":3,"file":"useSequenceLayout.js","sourceRoot":"","sources":["../../src/hooks/useSequenceLayout.ts"],"names":[],"mappings":"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"}
package/dist/utils/graphConverter.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graphConverter.d.ts","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,SAAS,EACV,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CAiCxB;AAED,yEAAyE;AACzE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmBD;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,CAAC,SAAS,GAAG,oBAAoB,CAAC,EAAE,EAC3C,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CAmDxB"}
1
+ {"version":3,"file":"graphConverter.d.ts","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,SAAS,EACV,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CA8CxB;AAED,yEAAyE;AACzE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmBD;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,CAAC,SAAS,GAAG,oBAAoB,CAAC,EAAE,EAC3C,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CAmDxB"}
package/dist/utils/graphConverter.js CHANGED
@@ -4,10 +4,24 @@ import { MarkerType } from '@xyflow/react';
4
4
  */
5
5
  export function convertToXYFlowNodes(nodes, configuration, violations = []) {
6
6
  return nodes.map((node) => {
7
- const typeDefinition = configuration.nodeTypes[node.type];
7
+ let typeDefinition = configuration.nodeTypes[node.type];
8
8
  // Warn if node type is not defined in configuration
9
9
  if (!typeDefinition) {
10
10
  console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
11
+ // Provide minimal typeDefinition with global states fallback to prevent undefined errors
12
+ typeDefinition = {
13
+ description: '',
14
+ shape: 'rectangle',
15
+ dataSchema: {},
16
+ states: configuration.states,
17
+ };
18
+ }
19
+ else if (!typeDefinition.states && configuration.states) {
20
+ // If typeDefinition exists but has no states, use global states as fallback
21
+ typeDefinition = {
22
+ ...typeDefinition,
23
+ states: configuration.states,
24
+ };
11
25
  }
12
26
  const hasViolations = violations.some((v) => v.context?.nodeId === node.id);
13
27
  // Groups should render behind other nodes and edges
package/dist/utils/graphConverter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graphConverter.js","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"graphConverter.js","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@principal-ai/principal-view-react",
3
- "version": "0.14.23",
3
+ "version": "0.14.25",
4
4
  "description": "React components for graph-based principal view framework",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -32,12 +32,12 @@
32
32
  },
33
33
  "peerDependencies": {
34
34
  "@principal-ade/industry-theme": "^0.1.7",
35
- "@principal-ai/principal-view-core": "^0.26.10",
35
+ "@principal-ai/principal-view-core": "^0.26.25",
36
36
  "react": "^18.0.0 || ^19.0.0",
37
37
  "react-dom": "^18.0.0 || ^19.0.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@principal-ai/principal-view-core": "0.26.24",
40
+ "@principal-ai/principal-view-core": "0.26.25",
41
41
  "@principal-ade/industry-theme": "0.1.7",
42
42
  "@storybook/addon-docs": "10.1.2",
43
43
  "@storybook/addon-links": "10.1.2",
package/src/components/GraphRenderer.tsx CHANGED
@@ -48,6 +48,7 @@ import {
48
48
  resolveEventSpanColor,
49
49
  DRAFT_NODE_COLOR,
50
50
  DEFAULT_SPAN_COLOR,
51
+ isStandardCanvasNode,
51
52
  } from '@principal-ai/principal-view-core';
52
53
  import { useTheme } from '@principal-ade/industry-theme';
53
54
  import { CustomNode } from '../nodes/CustomNode';
@@ -2627,7 +2628,7 @@ function useCanvasToLegacy(
2627
2628
  color: component.color,
2628
2629
  size: component.size,
2629
2630
  dataSchema: component.dataSchema || {},
2630
- states: component.states,
2631
+ states: component.states || library.states, // Fallback to global library states
2631
2632
  layout: component.layout,
2632
2633
  };
2633
2634
  }
@@ -2660,7 +2661,12 @@ function useCanvasToLegacy(
2660
2661
  }
2661
2662
 
2662
2663
  // Then extract node types from canvas nodes (for nodes that define their own types)
2664
+ // Only process standard canvas nodes (OTEL nodes have their types defined separately)
2663
2665
  for (const node of canvas.nodes || []) {
2666
+ if (!isStandardCanvasNode(node)) {
2667
+ continue;
2668
+ }
2669
+
2664
2670
  const vv = node.pv;
2665
2671
  const nodeType = vv?.nodeType || node.type;
2666
2672
 
@@ -2751,6 +2757,7 @@ function useCanvasToLegacy(
2751
2757
  edgeTypes,
2752
2758
  allowedConnections,
2753
2759
  display,
2760
+ states: library?.states, // Add global states from library as fallback
2754
2761
  };
2755
2762
 
2756
2763
  return { configuration, nodes, edges };
package/src/components/SequenceDiagramRenderer.tsx CHANGED
@@ -24,6 +24,7 @@ import {
24
24
  type NodeProps,
25
25
  type EdgeProps,
26
26
  } from '@xyflow/react';
27
+ import { useTheme } from '@principal-ade/industry-theme';
27
28
  // CSS import removed - consumers should import '@xyflow/react/dist/style.css' in their app
28
29
  import {
29
30
  useSequenceLayout,
@@ -77,6 +78,8 @@ function SequenceArrowEdge({
77
78
  label,
78
79
  data,
79
80
  }: EdgeProps) {
81
+ const { theme } = useTheme();
82
+
80
83
  // Use a straight line for same-lane, bezier for cross-lane
81
84
  const isSameLane = !data?.crossesLanes;
82
85
 
@@ -96,7 +99,7 @@ function SequenceArrowEdge({
96
99
  id={id}
97
100
  path={edgePath}
98
101
  style={{
99
- stroke: 'var(--sequence-arrow-color, #4169E1)',
102
+ stroke: theme.colors.primary,
100
103
  strokeWidth: 2,
101
104
  }}
102
105
  markerEnd="url(#sequence-arrow)"
@@ -107,13 +110,14 @@ function SequenceArrowEdge({
107
110
  style={{
108
111
  position: 'absolute',
109
112
  transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
110
- background: 'var(--sequence-label-bg, rgba(255, 255, 255, 0.95))',
113
+ background: theme.colors.background,
111
114
  padding: '2px 8px',
112
115
  borderRadius: 4,
113
- fontSize: 12,
114
- fontWeight: 500,
115
- color: 'var(--sequence-label-text, #333)',
116
- border: '1px solid var(--sequence-label-border, #ddd)',
116
+ fontSize: theme.fontSizes[0],
117
+ fontWeight: theme.fontWeights.medium,
118
+ fontFamily: theme.fonts.body,
119
+ color: theme.colors.text,
120
+ border: `1px solid ${theme.colors.border}`,
117
121
  pointerEvents: 'all',
118
122
  whiteSpace: 'nowrap',
119
123
  }}
@@ -160,12 +164,12 @@ function SwimlaneLayer({
160
164
  laneWidth,
161
165
  headerHeight,
162
166
  totalHeight,
163
- onToggleCollapse,
164
167
  }: SwimlaneLayerProps) {
165
168
  const { x, y, zoom } = useViewport();
169
+ const { theme } = useTheme();
166
170
 
167
- // Calculate the visible area height (use a large value to ensure lanes extend)
168
- const extendedHeight = Math.max(totalHeight, 2000);
171
+ // Add a small buffer to ensure lanes extend slightly beyond the last event
172
+ const extendedHeight = totalHeight + 20;
169
173
 
170
174
  return (
171
175
  <div
@@ -192,14 +196,57 @@ function SwimlaneLayer({
192
196
  width: laneWidth,
193
197
  height: extendedHeight,
194
198
  backgroundColor: isEven
195
- ? 'var(--sequence-lane-even, rgba(100, 149, 237, 0.08))'
196
- : 'var(--sequence-lane-odd, rgba(100, 149, 237, 0.03))',
197
- borderRight: '1px solid var(--sequence-lane-border, rgba(100, 149, 237, 0.2))',
199
+ ? theme.colors.muted
200
+ : theme.colors.background,
201
+ borderRight: `1px solid ${theme.colors.border}`,
198
202
  }}
199
203
  />
200
204
  );
201
205
  })}
202
206
 
207
+ {/* Vertical lifelines */}
208
+ {swimlanes.map((lane) => (
209
+ <div
210
+ key={`lifeline-${lane.namespace}`}
211
+ style={{
212
+ position: 'absolute',
213
+ left: lane.x,
214
+ top: headerHeight,
215
+ width: 2,
216
+ height: extendedHeight - headerHeight,
217
+ backgroundColor: theme.colors.border,
218
+ transform: 'translateX(-1px)',
219
+ }}
220
+ />
221
+ ))}
222
+ </div>
223
+ );
224
+ }
225
+
226
+ /**
227
+ * Swimlane headers layer that renders on top of nodes for clickability
228
+ */
229
+ function SwimlaneHeadersLayer({
230
+ swimlanes,
231
+ laneWidth,
232
+ headerHeight,
233
+ onToggleCollapse,
234
+ }: SwimlaneLayerProps) {
235
+ const { x, y, zoom } = useViewport();
236
+ const { theme } = useTheme();
237
+
238
+ return (
239
+ <div
240
+ style={{
241
+ position: 'absolute',
242
+ top: 0,
243
+ left: 0,
244
+ transformOrigin: '0 0',
245
+ transform: `translate(${x}px, ${y}px) scale(${zoom})`,
246
+ pointerEvents: 'none',
247
+ zIndex: 10,
248
+ }}
249
+ >
203
250
  {/* Lane headers */}
204
251
  {swimlanes.map((lane) => {
205
252
  const hasChildren = lane.children.length > 0;
@@ -215,11 +262,12 @@ function SwimlaneLayer({
215
262
  display: 'flex',
216
263
  alignItems: 'center',
217
264
  justifyContent: 'center',
218
- backgroundColor: 'var(--sequence-header-bg, rgba(100, 149, 237, 0.15))',
219
- borderBottom: '2px solid var(--sequence-header-border, rgba(100, 149, 237, 0.4))',
220
- fontWeight: 600,
221
- fontSize: 13,
222
- color: 'var(--sequence-header-text, #333)',
265
+ backgroundColor: theme.colors.muted,
266
+ borderBottom: `2px solid ${theme.colors.border}`,
267
+ fontWeight: theme.fontWeights.semibold,
268
+ fontSize: theme.fontSizes[2],
269
+ fontFamily: theme.fonts.heading,
270
+ color: theme.colors.text,
223
271
  pointerEvents: 'auto',
224
272
  cursor: hasChildren ? 'pointer' : 'default',
225
273
  userSelect: 'none',
@@ -228,34 +276,13 @@ function SwimlaneLayer({
228
276
  >
229
277
  {hasChildren && (
230
278
  <span style={{ marginRight: 6, fontSize: 10 }}>
231
- {lane.isCollapsed ? '▶' : '▼'}
279
+ {lane.isCollapsed ? '▼' : '▶'}
232
280
  </span>
233
281
  )}
234
282
  <span>{lane.label}</span>
235
- {lane.eventIds.length > 1 && (
236
- <span style={{ marginLeft: 6, fontSize: 11, opacity: 0.6 }}>
237
- ({lane.eventIds.length})
238
- </span>
239
- )}
240
283
  </div>
241
284
  );
242
285
  })}
243
-
244
- {/* Vertical lifelines */}
245
- {swimlanes.map((lane) => (
246
- <div
247
- key={`lifeline-${lane.namespace}`}
248
- style={{
249
- position: 'absolute',
250
- left: lane.x,
251
- top: headerHeight,
252
- width: 2,
253
- height: extendedHeight - headerHeight,
254
- backgroundColor: 'var(--sequence-lifeline, rgba(100, 149, 237, 0.3))',
255
- transform: 'translateX(-1px)',
256
- }}
257
- />
258
- ))}
259
286
  </div>
260
287
  );
261
288
  }
@@ -315,6 +342,8 @@ function SequenceDiagramInner({
315
342
  showControls = true,
316
343
  showBackground = false, // Default to false since swimlanes provide visual structure
317
344
  }: SequenceDiagramRendererProps) {
345
+ const { theme } = useTheme();
346
+
318
347
  // Extract layout params
319
348
  const { laneWidth = 200, headerHeight = 60 } = layoutOptions;
320
349
 
@@ -352,7 +381,7 @@ function SequenceDiagramInner({
352
381
  onNodeClick={handleNodeClick}
353
382
  fitView
354
383
  fitViewOptions={{
355
- padding: 0.2,
384
+ padding: 0.1,
356
385
  minZoom: 0.5,
357
386
  maxZoom: 1.5,
358
387
  }}
@@ -363,6 +392,7 @@ function SequenceDiagramInner({
363
392
  elementsSelectable={true}
364
393
  panOnScroll
365
394
  zoomOnScroll
395
+ style={{ background: theme.colors.background }}
366
396
  >
367
397
  {/* SVG defs for arrow marker */}
368
398
  <svg style={{ position: 'absolute', width: 0, height: 0 }}>
@@ -378,7 +408,7 @@ function SequenceDiagramInner({
378
408
  >
379
409
  <path
380
410
  d="M 0 0 L 10 5 L 0 10 z"
381
- fill="var(--sequence-arrow-color, #4169E1)"
411
+ fill={theme.colors.primary}
382
412
  />
383
413
  </marker>
384
414
  </defs>
@@ -395,6 +425,14 @@ function SequenceDiagramInner({
395
425
  laneWidth={laneWidth}
396
426
  headerHeight={headerHeight}
397
427
  totalHeight={totalHeight}
428
+ />
429
+
430
+ {/* Swimlane headers layer - renders on top for clickability */}
431
+ <SwimlaneHeadersLayer
432
+ swimlanes={swimlanes}
433
+ laneWidth={laneWidth}
434
+ headerHeight={headerHeight}
435
+ totalHeight={totalHeight}
398
436
  onToggleCollapse={onToggleCollapse}
399
437
  />
400
438
 
@@ -403,12 +441,13 @@ function SequenceDiagramInner({
403
441
  <Panel position="top-right">
404
442
  <div
405
443
  style={{
406
- background: 'var(--sequence-panel-bg, rgba(255, 255, 255, 0.95))',
407
- border: '1px solid var(--sequence-panel-border, #ddd)',
444
+ background: theme.colors.background,
445
+ border: `1px solid ${theme.colors.border}`,
408
446
  borderRadius: 4,
409
447
  padding: '6px 10px',
410
- fontSize: 11,
411
- color: '#666',
448
+ fontSize: theme.fontSizes[0],
449
+ fontFamily: theme.fonts.body,
450
+ color: theme.colors.textSecondary,
412
451
  }}
413
452
  >
414
453
  Click lane headers to expand/collapse
package/src/hooks/useSequenceLayout.ts CHANGED
@@ -86,7 +86,7 @@ export interface UseSequenceLayoutOptions {
86
86
 
87
87
  /**
88
88
  * Gap between swimlanes
89
- * @default 50
89
+ * @default 10
90
90
  */
91
91
  laneGap?: number;
92
92
 
@@ -207,7 +207,7 @@ export function useSequenceLayout(
207
207
  const {
208
208
  namespaceStrategy = 'all-but-last',
209
209
  laneWidth = 200,
210
- laneGap = 50,
210
+ laneGap = 10,
211
211
  eventSpacing = 80,
212
212
  headerHeight = 60,
213
213
  collapsedNamespaces = [],
@@ -316,7 +316,8 @@ export function useSequenceLayout(
316
316
  const lane = swimlaneByNamespace.get(visibleNamespace)!;
317
317
 
318
318
  // Global Y position based on event order (time layer)
319
- const y = headerHeight + i * eventSpacing;
319
+ // Start first event closer to header with small offset
320
+ const y = headerHeight + 40 + i * eventSpacing;
320
321
 
321
322
  nodes.push({
322
323
  id: event.id,
@@ -369,9 +370,37 @@ export function useSequenceLayout(
369
370
 
370
371
  // Step 6: Compute total dimensions
371
372
  const totalWidth =
372
- swimlanes.length * (laneWidth + laneGap) - laneGap + laneWidth;
373
+ swimlanes.length * laneWidth + (swimlanes.length - 1) * laneGap;
373
374
  // Total height based on number of events (time layers)
374
- const totalHeight = headerHeight + events.length * eventSpacing + eventSpacing;
375
+ const totalHeight = headerHeight + 40 + events.length * eventSpacing;
376
+
377
+ // Step 7: Add invisible boundary nodes to ensure fitView includes full diagram width
378
+ if (swimlanes.length > 0) {
379
+ const leftmostLane = swimlanes[0];
380
+ const rightmostLane = swimlanes[swimlanes.length - 1];
381
+
382
+ // Add boundary nodes at the corners
383
+ nodes.push(
384
+ {
385
+ id: '__boundary_left__',
386
+ type: 'default',
387
+ position: { x: leftmostLane.x - laneWidth / 2, y: 0 },
388
+ data: {},
389
+ style: { width: 1, height: 1, opacity: 0 },
390
+ draggable: false,
391
+ selectable: false,
392
+ },
393
+ {
394
+ id: '__boundary_right__',
395
+ type: 'default',
396
+ position: { x: rightmostLane.x + laneWidth / 2, y: totalHeight },
397
+ data: {},
398
+ style: { width: 1, height: 1, opacity: 0 },
399
+ draggable: false,
400
+ selectable: false,
401
+ }
402
+ );
403
+ }
375
404
 
376
405
  return {
377
406
  nodes,