@uipath/apollo-react 3.43.0 → 3.44.1

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 (15) hide show
  1. package/dist/canvas/components/Edges/SequenceEdge.cjs +30 -2
  2. package/dist/canvas/components/Edges/SequenceEdge.d.ts.map +1 -1
  3. package/dist/canvas/components/Edges/SequenceEdge.js +30 -2
  4. package/dist/canvas/components/Edges/SequenceEdge.stories.cjs +181 -0
  5. package/dist/canvas/components/Edges/SequenceEdge.stories.d.ts +1 -0
  6. package/dist/canvas/components/Edges/SequenceEdge.stories.d.ts.map +1 -1
  7. package/dist/canvas/components/Edges/SequenceEdge.stories.js +179 -1
  8. package/dist/canvas/schema/node-instance/edge.cjs +4 -1
  9. package/dist/canvas/schema/node-instance/edge.d.ts +3 -0
  10. package/dist/canvas/schema/node-instance/edge.d.ts.map +1 -1
  11. package/dist/canvas/schema/node-instance/edge.js +4 -1
  12. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs +44 -21
  13. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map +1 -1
  14. package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js +44 -21
  15. package/package.json +3 -3
package/dist/canvas/components/Edges/SequenceEdge.cjs CHANGED
@@ -90,7 +90,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
90
90
  const isDiffRemoved = data?.isDiffRemoved === true;
91
91
  const angle = ANGLE_MAP[targetPosition];
92
92
  const { x: offsetX, y: offsetY } = ARROW_OFFSETS[targetPosition];
93
- const { edgePath } = (0, index_cjs_namespaceObject.useEdgePath)({
93
+ const { edgePath, labelX, labelY } = (0, index_cjs_namespaceObject.useEdgePath)({
94
94
  sourceNodeId: source,
95
95
  targetNodeId: target,
96
96
  sourceHandleId,
@@ -180,7 +180,35 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
180
180
  transform: `translate(${offsetX}px, ${offsetY}px)`
181
181
  }
182
182
  }),
183
- (0, external_EdgeUtils_cjs_namespaceObject.getStatusAnimation)(status, edgePath)
183
+ (0, external_EdgeUtils_cjs_namespaceObject.getStatusAnimation)(status, edgePath),
184
+ 'string' == typeof data?.label && data.label.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("foreignObject", {
185
+ x: labelX,
186
+ y: labelY,
187
+ width: 1,
188
+ height: 1,
189
+ overflow: "visible",
190
+ style: {
191
+ pointerEvents: 'none'
192
+ },
193
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
194
+ className: "react-flow__edge-label nodrag nopan",
195
+ style: {
196
+ position: 'absolute',
197
+ transform: 'translate(-50%, -50%)',
198
+ whiteSpace: 'nowrap',
199
+ pointerEvents: 'none',
200
+ color: 'var(--uix-canvas-foreground)',
201
+ background: 'var(--uix-canvas-background)',
202
+ padding: '4px 8px',
203
+ borderRadius: '4px',
204
+ fontSize: '12px',
205
+ fontWeight: 500,
206
+ border: `1px solid ${selected ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border)'}`,
207
+ boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
208
+ },
209
+ children: data.label
210
+ })
211
+ })
184
212
  ]
185
213
  }),
186
214
  showToolbar && toolbarPositioning && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.EdgeToolbar, {
package/dist/canvas/components/Edges/SequenceEdge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAoDpF,eAAO,MAAM,YAAY,iDAwKJ,CAAC"}
1
+ {"version":3,"file":"SequenceEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAoDpF,eAAO,MAAM,YAAY,iDAwMJ,CAAC"}
package/dist/canvas/components/Edges/SequenceEdge.js CHANGED
@@ -62,7 +62,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
62
62
  const isDiffRemoved = data?.isDiffRemoved === true;
63
63
  const angle = ANGLE_MAP[targetPosition];
64
64
  const { x: offsetX, y: offsetY } = ARROW_OFFSETS[targetPosition];
65
- const { edgePath } = useEdgePath({
65
+ const { edgePath, labelX, labelY } = useEdgePath({
66
66
  sourceNodeId: source,
67
67
  targetNodeId: target,
68
68
  sourceHandleId,
@@ -152,7 +152,35 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
152
152
  transform: `translate(${offsetX}px, ${offsetY}px)`
153
153
  }
154
154
  }),
155
- getStatusAnimation(status, edgePath)
155
+ getStatusAnimation(status, edgePath),
156
+ 'string' == typeof data?.label && data.label.length > 0 && /*#__PURE__*/ jsx("foreignObject", {
157
+ x: labelX,
158
+ y: labelY,
159
+ width: 1,
160
+ height: 1,
161
+ overflow: "visible",
162
+ style: {
163
+ pointerEvents: 'none'
164
+ },
165
+ children: /*#__PURE__*/ jsx("div", {
166
+ className: "react-flow__edge-label nodrag nopan",
167
+ style: {
168
+ position: 'absolute',
169
+ transform: 'translate(-50%, -50%)',
170
+ whiteSpace: 'nowrap',
171
+ pointerEvents: 'none',
172
+ color: 'var(--uix-canvas-foreground)',
173
+ background: 'var(--uix-canvas-background)',
174
+ padding: '4px 8px',
175
+ borderRadius: '4px',
176
+ fontSize: '12px',
177
+ fontWeight: 500,
178
+ border: `1px solid ${selected ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-border)'}`,
179
+ boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)'
180
+ },
181
+ children: data.label
182
+ })
183
+ })
156
184
  ]
157
185
  }),
158
186
  showToolbar && toolbarPositioning && /*#__PURE__*/ jsx(EdgeToolbar, {
package/dist/canvas/components/Edges/SequenceEdge.stories.cjs CHANGED
@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
28
28
  ValidationStates: ()=>ValidationStates,
29
29
  Default: ()=>Default,
30
30
  default: ()=>SequenceEdge_stories,
31
+ EdgeLabels: ()=>EdgeLabels,
31
32
  LoopEdges: ()=>LoopEdges
32
33
  });
33
34
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
@@ -347,6 +348,174 @@ function DefaultStory() {
347
348
  })
348
349
  });
349
350
  }
351
+ function EdgeLabelsStory() {
352
+ const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
353
+ createStickyNote('sticky-labels', 'green', '**Edge Labels**\nLabels rendered at edge midpoint via data.label', {
354
+ x: 100,
355
+ y: 80
356
+ }, {
357
+ width: 550,
358
+ height: 590
359
+ }),
360
+ createNode({
361
+ id: 'label-source-1',
362
+ label: 'Source',
363
+ x: 130,
364
+ y: 160,
365
+ sourcePositions: [
366
+ react_cjs_namespaceObject.Position.Right
367
+ ]
368
+ }),
369
+ createNode({
370
+ id: 'label-target-1',
371
+ label: 'Target',
372
+ x: 470,
373
+ y: 160,
374
+ targetPositions: [
375
+ react_cjs_namespaceObject.Position.Left
376
+ ]
377
+ }),
378
+ createNode({
379
+ id: 'label-source-2',
380
+ label: 'Start',
381
+ x: 300,
382
+ y: 300,
383
+ sourcePositions: [
384
+ react_cjs_namespaceObject.Position.Bottom
385
+ ]
386
+ }),
387
+ createNode({
388
+ id: 'label-target-2',
389
+ label: 'End',
390
+ x: 300,
391
+ y: 480,
392
+ targetPositions: [
393
+ react_cjs_namespaceObject.Position.Top
394
+ ]
395
+ }),
396
+ createStickyNote('sticky-labels-diff', 'white', '**Labels + Diff States**\nEdge labels work alongside diff styling', {
397
+ x: 760,
398
+ y: 80
399
+ }, {
400
+ width: 420,
401
+ height: 340
402
+ }),
403
+ createNode({
404
+ id: 'label-added-source',
405
+ label: 'Added',
406
+ x: 800,
407
+ y: 160,
408
+ sourcePositions: [
409
+ react_cjs_namespaceObject.Position.Right
410
+ ]
411
+ }),
412
+ createNode({
413
+ id: 'label-added-target',
414
+ label: 'Target',
415
+ x: 1020,
416
+ y: 160,
417
+ targetPositions: [
418
+ react_cjs_namespaceObject.Position.Left
419
+ ]
420
+ }),
421
+ createNode({
422
+ id: 'label-removed-source',
423
+ label: 'Removed',
424
+ x: 800,
425
+ y: 300,
426
+ sourcePositions: [
427
+ react_cjs_namespaceObject.Position.Right
428
+ ]
429
+ }),
430
+ createNode({
431
+ id: 'label-removed-target',
432
+ label: 'Target',
433
+ x: 1020,
434
+ y: 300,
435
+ targetPositions: [
436
+ react_cjs_namespaceObject.Position.Left
437
+ ]
438
+ }),
439
+ createStickyNote('sticky-info-labels', 'pink', '## Edge Labels\n\nSet `data.label` on an edge to display a label at the edge midpoint.\n\n**Features:**\n- Rendered via SVG foreignObject\n- Positioned at computed midpoint (labelX, labelY)\n- Styled consistently with StageEdge labels\n- Works with all edge states (diff, selected, etc.)', {
440
+ x: 100,
441
+ y: 720
442
+ }, {
443
+ width: 350,
444
+ height: 280
445
+ })
446
+ ], []);
447
+ const initialEdges = (0, external_react_namespaceObject.useMemo)(()=>[
448
+ {
449
+ id: 'e-label-horizontal',
450
+ source: 'label-source-1',
451
+ target: 'label-target-1',
452
+ sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
453
+ targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
454
+ type: 'sequence',
455
+ data: {
456
+ label: 'Success'
457
+ }
458
+ },
459
+ {
460
+ id: 'e-label-vertical',
461
+ source: 'label-source-2',
462
+ target: 'label-target-2',
463
+ sourceHandle: `out-${react_cjs_namespaceObject.Position.Bottom}`,
464
+ targetHandle: `in-${react_cjs_namespaceObject.Position.Top}`,
465
+ type: 'sequence',
466
+ data: {
467
+ label: 'Next Step'
468
+ }
469
+ },
470
+ {
471
+ id: 'e-label-added',
472
+ source: 'label-added-source',
473
+ target: 'label-added-target',
474
+ sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
475
+ targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
476
+ type: 'sequence',
477
+ data: {
478
+ isDiffAdded: true,
479
+ label: 'New connection'
480
+ },
481
+ style: {
482
+ stroke: 'var(--palette-positive-base)'
483
+ }
484
+ },
485
+ {
486
+ id: 'e-label-removed',
487
+ source: 'label-removed-source',
488
+ target: 'label-removed-target',
489
+ sourceHandle: `out-${react_cjs_namespaceObject.Position.Right}`,
490
+ targetHandle: `in-${react_cjs_namespaceObject.Position.Left}`,
491
+ type: 'sequence',
492
+ data: {
493
+ isDiffRemoved: true,
494
+ label: 'Deprecated'
495
+ },
496
+ style: {
497
+ stroke: 'var(--palette-negative-base)',
498
+ strokeDasharray: '5,5'
499
+ }
500
+ }
501
+ ], []);
502
+ const { canvasProps } = (0, index_cjs_namespaceObject.useCanvasStory)({
503
+ initialNodes,
504
+ initialEdges,
505
+ additionalNodeTypes: nodeTypes
506
+ });
507
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
508
+ ...canvasProps,
509
+ edgeTypes: edgeTypes,
510
+ mode: "design",
511
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
512
+ position: "bottom-right",
513
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
514
+ translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
515
+ })
516
+ })
517
+ });
518
+ }
350
519
  function ReadonlyStory() {
351
520
  const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>[
352
521
  createStickyNote('sticky-execution', 'green', '**Execution States**\nReadonly mode edge statuses', {
@@ -845,6 +1014,16 @@ function LoopEdgesStory() {
845
1014
  const Default = {
846
1015
  render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultStory, {})
847
1016
  };
1017
+ const EdgeLabels = {
1018
+ render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EdgeLabelsStory, {}),
1019
+ parameters: {
1020
+ docs: {
1021
+ description: {
1022
+ story: 'Demonstrates edge labels rendered at the midpoint via data.label. Labels work alongside all edge states including diff styling.'
1023
+ }
1024
+ }
1025
+ }
1026
+ };
848
1027
  const ExecutionStates = {
849
1028
  render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ReadonlyStory, {}),
850
1029
  parameters: {
@@ -876,12 +1055,14 @@ const LoopEdges = {
876
1055
  }
877
1056
  };
878
1057
  exports.Default = __webpack_exports__.Default;
1058
+ exports.EdgeLabels = __webpack_exports__.EdgeLabels;
879
1059
  exports.ExecutionStates = __webpack_exports__.ExecutionStates;
880
1060
  exports.LoopEdges = __webpack_exports__.LoopEdges;
881
1061
  exports.ValidationStates = __webpack_exports__.ValidationStates;
882
1062
  exports["default"] = __webpack_exports__["default"];
883
1063
  for(var __webpack_i__ in __webpack_exports__)if (-1 === [
884
1064
  "Default",
1065
+ "EdgeLabels",
885
1066
  "ExecutionStates",
886
1067
  "LoopEdges",
887
1068
  "ValidationStates",
package/dist/canvas/components/Edges/SequenceEdge.stories.d.ts CHANGED
@@ -3,6 +3,7 @@ declare const meta: Meta;
3
3
  export default meta;
4
4
  type Story = StoryObj<typeof meta>;
5
5
  export declare const Default: Story;
6
+ export declare const EdgeLabels: Story;
6
7
  export declare const ExecutionStates: Story;
7
8
  export declare const ValidationStates: Story;
8
9
  export declare const LoopEdges: Story;
package/dist/canvas/components/Edges/SequenceEdge.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SequenceEdge.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgBvD,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwwBnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC"}
1
+ {"version":3,"file":"SequenceEdge.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Edges/SequenceEdge.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgBvD,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAk6BnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC"}
package/dist/canvas/components/Edges/SequenceEdge.stories.js CHANGED
@@ -315,6 +315,174 @@ function DefaultStory() {
315
315
  })
316
316
  });
317
317
  }
318
+ function EdgeLabelsStory() {
319
+ const initialNodes = useMemo(()=>[
320
+ createStickyNote('sticky-labels', 'green', '**Edge Labels**\nLabels rendered at edge midpoint via data.label', {
321
+ x: 100,
322
+ y: 80
323
+ }, {
324
+ width: 550,
325
+ height: 590
326
+ }),
327
+ createNode({
328
+ id: 'label-source-1',
329
+ label: 'Source',
330
+ x: 130,
331
+ y: 160,
332
+ sourcePositions: [
333
+ Position.Right
334
+ ]
335
+ }),
336
+ createNode({
337
+ id: 'label-target-1',
338
+ label: 'Target',
339
+ x: 470,
340
+ y: 160,
341
+ targetPositions: [
342
+ Position.Left
343
+ ]
344
+ }),
345
+ createNode({
346
+ id: 'label-source-2',
347
+ label: 'Start',
348
+ x: 300,
349
+ y: 300,
350
+ sourcePositions: [
351
+ Position.Bottom
352
+ ]
353
+ }),
354
+ createNode({
355
+ id: 'label-target-2',
356
+ label: 'End',
357
+ x: 300,
358
+ y: 480,
359
+ targetPositions: [
360
+ Position.Top
361
+ ]
362
+ }),
363
+ createStickyNote('sticky-labels-diff', 'white', '**Labels + Diff States**\nEdge labels work alongside diff styling', {
364
+ x: 760,
365
+ y: 80
366
+ }, {
367
+ width: 420,
368
+ height: 340
369
+ }),
370
+ createNode({
371
+ id: 'label-added-source',
372
+ label: 'Added',
373
+ x: 800,
374
+ y: 160,
375
+ sourcePositions: [
376
+ Position.Right
377
+ ]
378
+ }),
379
+ createNode({
380
+ id: 'label-added-target',
381
+ label: 'Target',
382
+ x: 1020,
383
+ y: 160,
384
+ targetPositions: [
385
+ Position.Left
386
+ ]
387
+ }),
388
+ createNode({
389
+ id: 'label-removed-source',
390
+ label: 'Removed',
391
+ x: 800,
392
+ y: 300,
393
+ sourcePositions: [
394
+ Position.Right
395
+ ]
396
+ }),
397
+ createNode({
398
+ id: 'label-removed-target',
399
+ label: 'Target',
400
+ x: 1020,
401
+ y: 300,
402
+ targetPositions: [
403
+ Position.Left
404
+ ]
405
+ }),
406
+ createStickyNote('sticky-info-labels', 'pink', '## Edge Labels\n\nSet `data.label` on an edge to display a label at the edge midpoint.\n\n**Features:**\n- Rendered via SVG foreignObject\n- Positioned at computed midpoint (labelX, labelY)\n- Styled consistently with StageEdge labels\n- Works with all edge states (diff, selected, etc.)', {
407
+ x: 100,
408
+ y: 720
409
+ }, {
410
+ width: 350,
411
+ height: 280
412
+ })
413
+ ], []);
414
+ const initialEdges = useMemo(()=>[
415
+ {
416
+ id: 'e-label-horizontal',
417
+ source: 'label-source-1',
418
+ target: 'label-target-1',
419
+ sourceHandle: `out-${Position.Right}`,
420
+ targetHandle: `in-${Position.Left}`,
421
+ type: 'sequence',
422
+ data: {
423
+ label: 'Success'
424
+ }
425
+ },
426
+ {
427
+ id: 'e-label-vertical',
428
+ source: 'label-source-2',
429
+ target: 'label-target-2',
430
+ sourceHandle: `out-${Position.Bottom}`,
431
+ targetHandle: `in-${Position.Top}`,
432
+ type: 'sequence',
433
+ data: {
434
+ label: 'Next Step'
435
+ }
436
+ },
437
+ {
438
+ id: 'e-label-added',
439
+ source: 'label-added-source',
440
+ target: 'label-added-target',
441
+ sourceHandle: `out-${Position.Right}`,
442
+ targetHandle: `in-${Position.Left}`,
443
+ type: 'sequence',
444
+ data: {
445
+ isDiffAdded: true,
446
+ label: 'New connection'
447
+ },
448
+ style: {
449
+ stroke: 'var(--palette-positive-base)'
450
+ }
451
+ },
452
+ {
453
+ id: 'e-label-removed',
454
+ source: 'label-removed-source',
455
+ target: 'label-removed-target',
456
+ sourceHandle: `out-${Position.Right}`,
457
+ targetHandle: `in-${Position.Left}`,
458
+ type: 'sequence',
459
+ data: {
460
+ isDiffRemoved: true,
461
+ label: 'Deprecated'
462
+ },
463
+ style: {
464
+ stroke: 'var(--palette-negative-base)',
465
+ strokeDasharray: '5,5'
466
+ }
467
+ }
468
+ ], []);
469
+ const { canvasProps } = useCanvasStory({
470
+ initialNodes,
471
+ initialEdges,
472
+ additionalNodeTypes: nodeTypes
473
+ });
474
+ return /*#__PURE__*/ jsx(BaseCanvas, {
475
+ ...canvasProps,
476
+ edgeTypes: edgeTypes,
477
+ mode: "design",
478
+ children: /*#__PURE__*/ jsx(Panel, {
479
+ position: "bottom-right",
480
+ children: /*#__PURE__*/ jsx(CanvasPositionControls, {
481
+ translations: DefaultCanvasTranslations
482
+ })
483
+ })
484
+ });
485
+ }
318
486
  function ReadonlyStory() {
319
487
  const initialNodes = useMemo(()=>[
320
488
  createStickyNote('sticky-execution', 'green', '**Execution States**\nReadonly mode edge statuses', {
@@ -813,6 +981,16 @@ function LoopEdgesStory() {
813
981
  const Default = {
814
982
  render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
815
983
  };
984
+ const EdgeLabels = {
985
+ render: ()=>/*#__PURE__*/ jsx(EdgeLabelsStory, {}),
986
+ parameters: {
987
+ docs: {
988
+ description: {
989
+ story: 'Demonstrates edge labels rendered at the midpoint via data.label. Labels work alongside all edge states including diff styling.'
990
+ }
991
+ }
992
+ }
993
+ };
816
994
  const ExecutionStates = {
817
995
  render: ()=>/*#__PURE__*/ jsx(ReadonlyStory, {}),
818
996
  parameters: {
@@ -843,4 +1021,4 @@ const LoopEdges = {
843
1021
  }
844
1022
  }
845
1023
  };
846
- export { Default, ExecutionStates, LoopEdges, ValidationStates, SequenceEdge_stories as default };
1024
+ export { Default, EdgeLabels, ExecutionStates, LoopEdges, ValidationStates, SequenceEdge_stories as default };
package/dist/canvas/schema/node-instance/edge.cjs CHANGED
@@ -33,7 +33,10 @@ const edgeSchema = external_zod_namespaceObject.z.object({
33
33
  sourceNodeId: external_base_cjs_namespaceObject.idSchema,
34
34
  sourcePort: external_zod_namespaceObject.z.string().min(1),
35
35
  targetNodeId: external_base_cjs_namespaceObject.idSchema,
36
- targetPort: external_zod_namespaceObject.z.string().min(1)
36
+ targetPort: external_zod_namespaceObject.z.string().min(1),
37
+ data: external_zod_namespaceObject.z.object({
38
+ label: external_zod_namespaceObject.z.string().optional()
39
+ }).passthrough().optional()
37
40
  });
38
41
  exports.edgeSchema = __webpack_exports__.edgeSchema;
39
42
  for(var __webpack_i__ in __webpack_exports__)if (-1 === [
package/dist/canvas/schema/node-instance/edge.d.ts CHANGED
@@ -5,6 +5,9 @@ export declare const edgeSchema: z.ZodObject<{
5
5
  sourcePort: z.ZodString;
6
6
  targetNodeId: z.ZodString;
7
7
  targetPort: z.ZodString;
8
+ data: z.ZodOptional<z.ZodObject<{
9
+ label: z.ZodOptional<z.ZodString>;
10
+ }, z.core.$loose>>;
8
11
  }, z.core.$strip>;
9
12
  export type EdgeInstance = z.infer<typeof edgeSchema>;
10
13
  //# sourceMappingURL=edge.d.ts.map
package/dist/canvas/schema/node-instance/edge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/schema/node-instance/edge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAMxB,eAAO,MAAM,UAAU;;;;;;iBAQrB,CAAC;AAGH,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC"}
1
+ {"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/schema/node-instance/edge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAMxB,eAAO,MAAM,UAAU;;;;;;;;;iBAerB,CAAC;AAGH,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,UAAU,CAAC,CAAC"}
package/dist/canvas/schema/node-instance/edge.js CHANGED
@@ -5,6 +5,9 @@ const edgeSchema = z.object({
5
5
  sourceNodeId: idSchema,
6
6
  sourcePort: z.string().min(1),
7
7
  targetNodeId: idSchema,
8
- targetPort: z.string().min(1)
8
+ targetPort: z.string().min(1),
9
+ data: z.object({
10
+ label: z.string().optional()
11
+ }).passthrough().optional()
9
12
  });
10
13
  export { edgeSchema };
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs CHANGED
@@ -71,15 +71,20 @@ const StyledSankeyLink = (0, styles_namespaceObject.styled)('path')({
71
71
  opacity: 1
72
72
  }
73
73
  });
74
+ const LABEL_FONT_SIZE = apollo_core_default().FontVariantToken.fontSizeL;
75
+ const LABEL_FONT_FAMILY = apollo_core_default().FontFamily.FontNormal;
76
+ const LABEL_CSS_FONT = `${apollo_core_default().Typography.fontSizeL.fontWeight} ${apollo_core_default().Typography.fontSizeL.fontSize} ${LABEL_FONT_FAMILY}`;
74
77
  const StyledSankeyNodeLabel = (0, styles_namespaceObject.styled)('text')({
75
- fontSize: apollo_core_default().FontVariantToken.fontSizeS,
78
+ fontSize: LABEL_FONT_SIZE,
79
+ fontFamily: LABEL_FONT_FAMILY,
76
80
  fill: 'var(--color-foreground-emp)',
77
81
  pointerEvents: 'auto',
78
82
  userSelect: 'none',
79
83
  cursor: 'default'
80
84
  });
81
85
  const StyledSankeyNodeValue = (0, styles_namespaceObject.styled)('text')({
82
- fontSize: apollo_core_default().FontVariantToken.fontSizeS,
86
+ fontSize: LABEL_FONT_SIZE,
87
+ fontFamily: LABEL_FONT_FAMILY,
83
88
  fontWeight: apollo_core_default().FontFamily.FontWeightMedium,
84
89
  fill: 'var(--color-foreground-emp)',
85
90
  pointerEvents: 'auto',
@@ -116,11 +121,21 @@ const TooltipValue = (0, styles_namespaceObject.styled)('span')({
116
121
  color: 'var(--color-foreground-emp)',
117
122
  fontWeight: apollo_core_default().FontFamily.FontWeightSemibold
118
123
  });
119
- const DIAGRAM_MARGIN_HORIZONTAL = 80;
124
+ const DIAGRAM_MARGIN_LEFT = 5;
125
+ const DIAGRAM_MARGIN_RIGHT = 120;
120
126
  const DIAGRAM_MARGIN_VERTICAL = 5;
121
- const truncateText = (text, maxChars)=>{
122
- if (text.length <= maxChars) return text;
123
- return `${text.substring(0, maxChars - 1)}…`;
127
+ const truncateToFit = (text, maxWidth, ctx)=>{
128
+ if (maxWidth <= 0) return '';
129
+ if (ctx.measureText(text).width <= maxWidth) return text;
130
+ const ellipsis = '\u2026';
131
+ let lo = 0;
132
+ let hi = text.length;
133
+ while(lo < hi){
134
+ const mid = Math.ceil((lo + hi) / 2);
135
+ if (ctx.measureText(text.substring(0, mid) + ellipsis).width <= maxWidth) lo = mid;
136
+ else hi = mid - 1;
137
+ }
138
+ return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
124
139
  };
125
140
  const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
126
141
  const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = external_d3_scale_chromatic_namespaceObject.schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
@@ -164,11 +179,11 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
164
179
  const alignmentFn = 'left' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyLeft : 'right' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyRight : 'center' === nodeAlignment ? external_d3_sankey_namespaceObject.sankeyCenter : external_d3_sankey_namespaceObject.sankeyJustify;
165
180
  const sankeyGenerator = (0, external_d3_sankey_namespaceObject.sankey)().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
166
181
  [
167
- DIAGRAM_MARGIN_HORIZONTAL,
182
+ DIAGRAM_MARGIN_LEFT,
168
183
  DIAGRAM_MARGIN_VERTICAL
169
184
  ],
170
185
  [
171
- actualWidth - DIAGRAM_MARGIN_HORIZONTAL,
186
+ actualWidth - DIAGRAM_MARGIN_RIGHT,
172
187
  actualHeight - DIAGRAM_MARGIN_VERTICAL
173
188
  ]
174
189
  ]);
@@ -233,20 +248,29 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
233
248
  ]);
234
249
  const nodeData = (0, external_react_namespaceObject.useMemo)(()=>{
235
250
  if (!sankeyGraph) return [];
236
- const midpoint = actualWidth / 2;
251
+ const labelPad = parseInt(apollo_core_default().Spacing.SpacingXs, 10);
252
+ const ctx = 'undefined' != typeof document ? document.createElement('canvas').getContext('2d') : null;
253
+ if (ctx) ctx.font = LABEL_CSS_FONT;
254
+ const columnSet = new Map();
255
+ for (const n of sankeyGraph.nodes){
256
+ const ext = n;
257
+ const x0 = ext.x0 || 0;
258
+ const x1 = ext.x1 || 0;
259
+ if (!columnSet.has(x0)) columnSet.set(x0, x1);
260
+ }
261
+ const columns = Array.from(columnSet.entries()).map(([x0, x1])=>({
262
+ x0,
263
+ x1
264
+ })).sort((a, b)=>a.x0 - b.x0);
237
265
  return sankeyGraph.nodes.map((node, index)=>{
238
266
  const extNode = node;
239
267
  const x0 = extNode.x0 || 0;
240
268
  const x1 = extNode.x1 || 0;
241
269
  const y0 = extNode.y0 || 0;
242
270
  const y1 = extNode.y1 || 0;
243
- const nodeCenter = (x0 + x1) / 2;
244
- const labelOnRight = nodeCenter < midpoint;
245
- const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core_default().Spacing.SpacingXs);
246
- const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core_default().Spacing.SpacingXs);
247
- const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
248
- const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core_default().Spacing.SpacingXs));
249
- const displayLabel = truncateText(extNode.label, maxChars);
271
+ const colIndex = columns.findIndex((col)=>col.x0 === x0);
272
+ const nextCol = columns[colIndex + 1];
273
+ const displayLabel = nextCol && ctx ? truncateToFit(extNode.label, Math.max(0, nextCol.x0 - x1 - labelPad), ctx) : extNode.label;
250
274
  return {
251
275
  node: extNode,
252
276
  x: x0,
@@ -254,9 +278,9 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
254
278
  width: x1 - x0,
255
279
  height: y1 - y0,
256
280
  color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
257
- labelX: labelOnRight ? x1 + parseInt(apollo_core_default().Spacing.SpacingXs) : x0 - parseInt(apollo_core_default().Spacing.SpacingXs),
281
+ labelX: x1 + labelPad,
258
282
  labelY: (y0 + y1) / 2,
259
- labelAnchor: labelOnRight ? 'start' : 'end',
283
+ labelAnchor: 'start',
260
284
  value: extNode.value || 0,
261
285
  displayLabel,
262
286
  fullLabel: extNode.label
@@ -265,8 +289,7 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
265
289
  }, [
266
290
  sankeyGraph,
267
291
  nodeColorMap,
268
- colorScheme,
269
- actualWidth
292
+ colorScheme
270
293
  ]);
271
294
  const handleLinkMouseEnter = (0, external_react_namespaceObject.useCallback)((index, centerX, centerY)=>{
272
295
  if (selectedLinkIndex === index) return;
@@ -393,7 +416,7 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
393
416
  }),
394
417
  nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
395
418
  x: nodeItem.labelX,
396
- y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM),
419
+ y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM, 10),
397
420
  dy: "0.35em",
398
421
  textAnchor: nodeItem.labelAnchor,
399
422
  children: nodeItem.value
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ApSankeyDiagram.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.tsx"],"names":[],"mappings":"AAeA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,yBAAyB,CAAC;AAqI5F,eAAO,MAAM,eAAe,6FAqb3B,CAAC"}
1
+ {"version":3,"file":"ApSankeyDiagram.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.tsx"],"names":[],"mappings":"AAeA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,yBAAyB,CAAC;AA4J5F,eAAO,MAAM,eAAe,6FAsb3B,CAAC"}
package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js CHANGED
@@ -32,15 +32,20 @@ const StyledSankeyLink = styled('path')({
32
32
  opacity: 1
33
33
  }
34
34
  });
35
+ const LABEL_FONT_SIZE = apollo_core.FontVariantToken.fontSizeL;
36
+ const LABEL_FONT_FAMILY = apollo_core.FontFamily.FontNormal;
37
+ const LABEL_CSS_FONT = `${apollo_core.Typography.fontSizeL.fontWeight} ${apollo_core.Typography.fontSizeL.fontSize} ${LABEL_FONT_FAMILY}`;
35
38
  const StyledSankeyNodeLabel = styled('text')({
36
- fontSize: apollo_core.FontVariantToken.fontSizeS,
39
+ fontSize: LABEL_FONT_SIZE,
40
+ fontFamily: LABEL_FONT_FAMILY,
37
41
  fill: 'var(--color-foreground-emp)',
38
42
  pointerEvents: 'auto',
39
43
  userSelect: 'none',
40
44
  cursor: 'default'
41
45
  });
42
46
  const StyledSankeyNodeValue = styled('text')({
43
- fontSize: apollo_core.FontVariantToken.fontSizeS,
47
+ fontSize: LABEL_FONT_SIZE,
48
+ fontFamily: LABEL_FONT_FAMILY,
44
49
  fontWeight: apollo_core.FontFamily.FontWeightMedium,
45
50
  fill: 'var(--color-foreground-emp)',
46
51
  pointerEvents: 'auto',
@@ -77,11 +82,21 @@ const TooltipValue = styled('span')({
77
82
  color: 'var(--color-foreground-emp)',
78
83
  fontWeight: apollo_core.FontFamily.FontWeightSemibold
79
84
  });
80
- const DIAGRAM_MARGIN_HORIZONTAL = 80;
85
+ const DIAGRAM_MARGIN_LEFT = 5;
86
+ const DIAGRAM_MARGIN_RIGHT = 120;
81
87
  const DIAGRAM_MARGIN_VERTICAL = 5;
82
- const truncateText = (text, maxChars)=>{
83
- if (text.length <= maxChars) return text;
84
- return `${text.substring(0, maxChars - 1)}…`;
88
+ const truncateToFit = (text, maxWidth, ctx)=>{
89
+ if (maxWidth <= 0) return '';
90
+ if (ctx.measureText(text).width <= maxWidth) return text;
91
+ const ellipsis = '\u2026';
92
+ let lo = 0;
93
+ let hi = text.length;
94
+ while(lo < hi){
95
+ const mid = Math.ceil((lo + hi) / 2);
96
+ if (ctx.measureText(text.substring(0, mid) + ellipsis).width <= maxWidth) lo = mid;
97
+ else hi = mid - 1;
98
+ }
99
+ return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
85
100
  };
86
101
  const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
87
102
  const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
@@ -125,11 +140,11 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
125
140
  const alignmentFn = 'left' === nodeAlignment ? sankeyLeft : 'right' === nodeAlignment ? sankeyRight : 'center' === nodeAlignment ? sankeyCenter : sankeyJustify;
126
141
  const sankeyGenerator = sankey().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
127
142
  [
128
- DIAGRAM_MARGIN_HORIZONTAL,
143
+ DIAGRAM_MARGIN_LEFT,
129
144
  DIAGRAM_MARGIN_VERTICAL
130
145
  ],
131
146
  [
132
- actualWidth - DIAGRAM_MARGIN_HORIZONTAL,
147
+ actualWidth - DIAGRAM_MARGIN_RIGHT,
133
148
  actualHeight - DIAGRAM_MARGIN_VERTICAL
134
149
  ]
135
150
  ]);
@@ -194,20 +209,29 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
194
209
  ]);
195
210
  const nodeData = useMemo(()=>{
196
211
  if (!sankeyGraph) return [];
197
- const midpoint = actualWidth / 2;
212
+ const labelPad = parseInt(apollo_core.Spacing.SpacingXs, 10);
213
+ const ctx = 'undefined' != typeof document ? document.createElement('canvas').getContext('2d') : null;
214
+ if (ctx) ctx.font = LABEL_CSS_FONT;
215
+ const columnSet = new Map();
216
+ for (const n of sankeyGraph.nodes){
217
+ const ext = n;
218
+ const x0 = ext.x0 || 0;
219
+ const x1 = ext.x1 || 0;
220
+ if (!columnSet.has(x0)) columnSet.set(x0, x1);
221
+ }
222
+ const columns = Array.from(columnSet.entries()).map(([x0, x1])=>({
223
+ x0,
224
+ x1
225
+ })).sort((a, b)=>a.x0 - b.x0);
198
226
  return sankeyGraph.nodes.map((node, index)=>{
199
227
  const extNode = node;
200
228
  const x0 = extNode.x0 || 0;
201
229
  const x1 = extNode.x1 || 0;
202
230
  const y0 = extNode.y0 || 0;
203
231
  const y1 = extNode.y1 || 0;
204
- const nodeCenter = (x0 + x1) / 2;
205
- const labelOnRight = nodeCenter < midpoint;
206
- const fullSpace = labelOnRight ? actualWidth - DIAGRAM_MARGIN_HORIZONTAL - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - DIAGRAM_MARGIN_HORIZONTAL - parseInt(apollo_core.Spacing.SpacingXs);
207
- const spaceToMidpoint = labelOnRight ? midpoint - x1 - parseInt(apollo_core.Spacing.SpacingXs) : x0 - midpoint - parseInt(apollo_core.Spacing.SpacingXs);
208
- const availableSpace = spaceToMidpoint > 0 ? Math.min(fullSpace, spaceToMidpoint) : fullSpace;
209
- const maxChars = Math.floor(Math.max(0, availableSpace) / parseInt(apollo_core.Spacing.SpacingXs));
210
- const displayLabel = truncateText(extNode.label, maxChars);
232
+ const colIndex = columns.findIndex((col)=>col.x0 === x0);
233
+ const nextCol = columns[colIndex + 1];
234
+ const displayLabel = nextCol && ctx ? truncateToFit(extNode.label, Math.max(0, nextCol.x0 - x1 - labelPad), ctx) : extNode.label;
211
235
  return {
212
236
  node: extNode,
213
237
  x: x0,
@@ -215,9 +239,9 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
215
239
  width: x1 - x0,
216
240
  height: y1 - y0,
217
241
  color: nodeColorMap.get(extNode.id) || colorScheme[index % colorScheme.length],
218
- labelX: labelOnRight ? x1 + parseInt(apollo_core.Spacing.SpacingXs) : x0 - parseInt(apollo_core.Spacing.SpacingXs),
242
+ labelX: x1 + labelPad,
219
243
  labelY: (y0 + y1) / 2,
220
- labelAnchor: labelOnRight ? 'start' : 'end',
244
+ labelAnchor: 'start',
221
245
  value: extNode.value || 0,
222
246
  displayLabel,
223
247
  fullLabel: extNode.label
@@ -226,8 +250,7 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
226
250
  }, [
227
251
  sankeyGraph,
228
252
  nodeColorMap,
229
- colorScheme,
230
- actualWidth
253
+ colorScheme
231
254
  ]);
232
255
  const handleLinkMouseEnter = useCallback((index, centerX, centerY)=>{
233
256
  if (selectedLinkIndex === index) return;
@@ -354,7 +377,7 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
354
377
  }),
355
378
  nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
356
379
  x: nodeItem.labelX,
357
- y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM),
380
+ y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM, 10),
358
381
  dy: "0.35em",
359
382
  textAnchor: nodeItem.labelAnchor,
360
383
  children: nodeItem.value
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.43.0",
3
+ "version": "3.44.1",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",
@@ -198,8 +198,8 @@
198
198
  "use-sync-external-store": "^1.2.0",
199
199
  "zod": "^4.3.5",
200
200
  "zustand": "^5.0.9",
201
- "@uipath/apollo-core": "5.7.0",
202
- "@uipath/apollo-wind": "0.10.0"
201
+ "@uipath/apollo-wind": "0.10.0",
202
+ "@uipath/apollo-core": "5.7.0"
203
203
  },
204
204
  "devDependencies": {
205
205
  "@lingui/cli": "^5.6.1",