@uipath/apollo-react 3.45.3 → 3.45.5

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.cjs

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../../icons/index.cjs");
+const external_utils_index_cjs_namespaceObject = require("../../../utils/index.cjs");
 const external_layouts_index_cjs_namespaceObject = require("../../../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const components_index_cjs_namespaceObject = require("../../../../material/components/index.cjs");
@@ -177,19 +178,25 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
         data
     ]);
     const toolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>{
-        if ('view' === mode) return null;
+        if ('view' === mode || data.isPlaceholder && (!isSuggestion || !suggestionId)) return null;
         if (isSuggestion && suggestionId) {
             if ('0.0.1' === suggestionGroupVersion) return null;
             const rejectAction = {
                 id: 'reject-suggestion',
-                icon: 'close',
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
+                    icon: "X",
+                    size: 14
+                }),
                 label: suggestTranslations.reject,
                 disabled: false,
                 onAction: ()=>handleActOnSuggestion(suggestionId, 'reject')
             };
             const acceptAction = {
                 id: 'accept-suggestion',
-                icon: 'check',
+                icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
+                    icon: "check",
+                    size: 14
+                }),
                 label: suggestTranslations.accept,
                 disabled: false,
                 onAction: ()=>handleActOnSuggestion(suggestionId, 'accept')
@@ -228,7 +235,10 @@ const ResourceNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ d
         };
         const removeAction = {
             id: 'remove',
-            icon: 'delete',
+            icon: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.NodeIcon, {
+                icon: "trash",
+                size: 14
+            }),
             label: translations?.remove ?? '',
             disabled: false,
             onAction: handleClickRemove

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/ResourceNode.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAE9B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,gBAAgB,CAAC;AAexB,UAAU,iBAAkB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAClE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC9E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACnF,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAClF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,0RAoBpB,iBAAiB,6CAqcrB,CAAC"}
+{"version":3,"file":"ResourceNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/ResourceNode.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,yBAAyB,EAE9B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC5B,MAAM,gBAAgB,CAAC;AAexB,UAAU,iBAAkB,SAAQ,SAAS,CAAC,qBAAqB,CAAC;IAClE,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC9E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACnF,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAClF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACvF,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,0RAoBpB,iBAAiB,6CAocrB,CAAC"}

package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { McpIcon, MemoryIcon } from "../../../icons/index.js";
+import { NodeIcon } from "../../../utils/index.js";
 import { Row } from "../../../layouts/index.js";
 import { Position } from "../../../xyflow/react.js";
 import { ApIcon } from "../../../../material/components/index.js";
@@ -149,19 +150,25 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
         data
     ]);
     const toolbarConfig = useMemo(()=>{
-        if ('view' === mode) return null;
+        if ('view' === mode || data.isPlaceholder && (!isSuggestion || !suggestionId)) return null;
         if (isSuggestion && suggestionId) {
             if ('0.0.1' === suggestionGroupVersion) return null;
             const rejectAction = {
                 id: 'reject-suggestion',
-                icon: 'close',
+                icon: /*#__PURE__*/ jsx(NodeIcon, {
+                    icon: "X",
+                    size: 14
+                }),
                 label: suggestTranslations.reject,
                 disabled: false,
                 onAction: ()=>handleActOnSuggestion(suggestionId, 'reject')
             };
             const acceptAction = {
                 id: 'accept-suggestion',
-                icon: 'check',
+                icon: /*#__PURE__*/ jsx(NodeIcon, {
+                    icon: "check",
+                    size: 14
+                }),
                 label: suggestTranslations.accept,
                 disabled: false,
                 onAction: ()=>handleActOnSuggestion(suggestionId, 'accept')
@@ -200,7 +207,10 @@ const ResourceNode = /*#__PURE__*/ memo(({ data, selected, id, mode, hasError =
         };
         const removeAction = {
             id: 'remove',
-            icon: 'delete',
+            icon: /*#__PURE__*/ jsx(NodeIcon, {
+                icon: "trash",
+                size: 14
+            }),
             label: translations?.remove ?? '',
             disabled: false,
             onAction: handleClickRemove

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.cjs

@@ -33,15 +33,24 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    computeSankeyDimensions: ()=>computeSankeyDimensions,
     ApSankeyDiagram: ()=>ApSankeyDiagram
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const Add_namespaceObject = require("@mui/icons-material/Add");
+var Add_default = /*#__PURE__*/ __webpack_require__.n(Add_namespaceObject);
+const FitScreen_namespaceObject = require("@mui/icons-material/FitScreen");
+var FitScreen_default = /*#__PURE__*/ __webpack_require__.n(FitScreen_namespaceObject);
+const Remove_namespaceObject = require("@mui/icons-material/Remove");
+var Remove_default = /*#__PURE__*/ __webpack_require__.n(Remove_namespaceObject);
 const material_namespaceObject = require("@mui/material");
 const styles_namespaceObject = require("@mui/material/styles");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
 var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namespaceObject);
 const external_d3_sankey_namespaceObject = require("d3-sankey");
 const external_d3_scale_chromatic_namespaceObject = require("d3-scale-chromatic");
+const external_d3_selection_namespaceObject = require("d3-selection");
+const external_d3_zoom_namespaceObject = require("d3-zoom");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const SankeyContainer = (0, styles_namespaceObject.styled)('div')({
@@ -51,9 +60,7 @@ const SankeyContainer = (0, styles_namespaceObject.styled)('div')({
     width: '100%',
     height: '600px',
     '& svg': {
-        display: 'block',
-        width: '100%',
-        height: '100%'
+        display: 'block'
     }
 });
 const StyledSankeyNode = (0, styles_namespaceObject.styled)('rect')({
@@ -121,9 +128,66 @@ const TooltipValue = (0, styles_namespaceObject.styled)('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core_default().FontFamily.FontWeightSemibold
 });
+const ZoomControls = (0, styles_namespaceObject.styled)('div')({
+    position: 'absolute',
+    bottom: apollo_core_default().Spacing.SpacingM,
+    right: apollo_core_default().Spacing.SpacingM,
+    display: 'flex',
+    gap: '1px',
+    backgroundColor: apollo_core_default().Colors.ColorGray100,
+    borderRadius: apollo_core_default().Border.BorderRadiusM,
+    overflow: 'hidden',
+    boxShadow: apollo_core_default().Shadow.ShadowDp2
+});
 const DIAGRAM_MARGIN_LEFT = 5;
 const DIAGRAM_MARGIN_RIGHT = 120;
-const DIAGRAM_MARGIN_VERTICAL = 5;
+const DIAGRAM_MARGIN_TOP = 5;
+const DIAGRAM_MARGIN_BOTTOM = 40;
+const ZOOM_SCALE_EXTENT_MIN = 0.5;
+const ZOOM_SCALE_EXTENT_MAX = 2;
+function computeSankeyDimensions(data, nodePadding, minNodeHeight, minColumnWidth, marginLeft, marginRight, marginTop, marginBottom) {
+    if (!data || 0 === data.nodes.length) return {
+        minWidth: 0,
+        minHeight: 0
+    };
+    const outgoing = new Map();
+    const incoming = new Map();
+    for (const node of data.nodes){
+        outgoing.set(node.id, []);
+        incoming.set(node.id, []);
+    }
+    for (const link of data.links){
+        outgoing.get(link.source)?.push(link.target);
+        incoming.get(link.target)?.push(link.source);
+    }
+    const depth = new Map();
+    const sources = data.nodes.filter((n)=>(incoming.get(n.id)?.length ?? 0) === 0);
+    const queue = [];
+    for (const s of sources){
+        depth.set(s.id, 0);
+        queue.push(s.id);
+    }
+    const maxIterations = data.nodes.length * data.links.length + data.nodes.length;
+    let iterations = 0;
+    while(queue.length > 0 && iterations++ < maxIterations){
+        const id = queue.shift();
+        const d = depth.get(id);
+        for (const target of outgoing.get(id) ?? [])if (!depth.has(target) || depth.get(target) < d + 1) {
+            depth.set(target, d + 1);
+            queue.push(target);
+        }
+    }
+    const columnCounts = new Map();
+    for (const d of depth.values())columnCounts.set(d, (columnCounts.get(d) ?? 0) + 1);
+    const columnCount = columnCounts.size;
+    const maxNodesPerColumn = Math.max(0, ...columnCounts.values());
+    const minWidth = columnCount * minColumnWidth + marginLeft + marginRight;
+    const minHeight = maxNodesPerColumn * (minNodeHeight + nodePadding) - nodePadding + marginTop + marginBottom;
+    return {
+        minWidth,
+        minHeight
+    };
+}
 const truncateToFit = (text, maxWidth, ctx)=>{
     if (maxWidth <= 0) return '';
     if (ctx.measureText(text).width <= maxWidth) return text;
@@ -138,9 +202,13 @@ const truncateToFit = (text, maxWidth, ctx)=>{
     return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
 };
 const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
-    const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = external_d3_scale_chromatic_namespaceObject.schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
+    const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = external_d3_scale_chromatic_namespaceObject.schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick, minNodeHeight = 36, minColumnWidth = 140 } = props;
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const svgRef = (0, external_react_namespaceObject.useRef)(null);
+    const zoomGroupRef = (0, external_react_namespaceObject.useRef)(null);
+    const zoomBehaviorRef = (0, external_react_namespaceObject.useRef)(null);
+    const zoomTransformRef = (0, external_react_namespaceObject.useRef)(external_d3_zoom_namespaceObject.zoomIdentity);
+    const hasUserZoomedRef = (0, external_react_namespaceObject.useRef)(false);
     const [containerWidth, setContainerWidth] = (0, external_react_namespaceObject.useState)(0);
     const [containerHeight, setContainerHeight] = (0, external_react_namespaceObject.useState)(0);
     const [selectedLinkIndex, setSelectedLinkIndex] = (0, external_react_namespaceObject.useState)(null);
@@ -162,6 +230,20 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
     }, []);
     const actualWidth = containerWidth || 1200;
     const actualHeight = containerHeight || 600;
+    const { minWidth, minHeight } = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!data || 0 === data.nodes.length) return {
+            minWidth: 0,
+            minHeight: 0
+        };
+        return computeSankeyDimensions(data, nodePadding, minNodeHeight, minColumnWidth, DIAGRAM_MARGIN_LEFT, DIAGRAM_MARGIN_RIGHT, DIAGRAM_MARGIN_TOP, DIAGRAM_MARGIN_BOTTOM);
+    }, [
+        data,
+        nodePadding,
+        minNodeHeight,
+        minColumnWidth
+    ]);
+    const svgWidth = Math.max(actualWidth, minWidth);
+    const svgHeight = Math.max(actualHeight, minHeight);
     const nodeColorMap = (0, external_react_namespaceObject.useMemo)(()=>{
         const map = new Map();
         if (!data) return map;
@@ -180,11 +262,11 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
         const sankeyGenerator = (0, external_d3_sankey_namespaceObject.sankey)().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
             [
                 DIAGRAM_MARGIN_LEFT,
-                DIAGRAM_MARGIN_VERTICAL
+                DIAGRAM_MARGIN_TOP
             ],
             [
-                actualWidth - DIAGRAM_MARGIN_RIGHT,
-                actualHeight - DIAGRAM_MARGIN_VERTICAL
+                svgWidth - DIAGRAM_MARGIN_RIGHT,
+                svgHeight - DIAGRAM_MARGIN_BOTTOM
             ]
         ]);
         const graph = {
@@ -201,8 +283,8 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
         nodeAlignment,
         nodeWidth,
         nodePadding,
-        actualWidth,
-        actualHeight
+        svgWidth,
+        svgHeight
     ]);
     const linkPaths = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!sankeyGraph) return [];
@@ -237,6 +319,8 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
                 targetId: targetNode.id,
                 sourceLabel: sourceNode.label,
                 targetLabel: targetNode.label,
+                sourceX,
+                targetX,
                 centerX,
                 centerY
             };
@@ -291,18 +375,84 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
         nodeColorMap,
         colorScheme
     ]);
+    const fitToView = (0, external_react_namespaceObject.useCallback)(()=>{
+        const svg = svgRef.current;
+        const zoomBehavior = zoomBehaviorRef.current;
+        if (!svg || !zoomBehavior || 0 === svgWidth || 0 === svgHeight) return;
+        hasUserZoomedRef.current = false;
+        const cw = containerWidth || 1;
+        const ch = containerHeight || 1;
+        const scale = 0.95 * Math.min(cw / svgWidth, ch / svgHeight);
+        const tx = (cw - svgWidth * scale) / 2;
+        const ty = (ch - svgHeight * scale) / 2;
+        const t = external_d3_zoom_namespaceObject.zoomIdentity.translate(tx, ty).scale(scale);
+        (0, external_d3_selection_namespaceObject.select)(svg).transition().duration(300).call(zoomBehavior.transform, t);
+    }, [
+        containerWidth,
+        containerHeight,
+        svgWidth,
+        svgHeight
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const svg = svgRef.current;
+        const zoomGroup = zoomGroupRef.current;
+        if (!svg || !zoomGroup) return;
+        const zoomBehavior = (0, external_d3_zoom_namespaceObject.zoom)().scaleExtent([
+            ZOOM_SCALE_EXTENT_MIN,
+            ZOOM_SCALE_EXTENT_MAX
+        ]).filter((event)=>{
+            if ('wheel' === event.type) return event.ctrlKey || event.metaKey;
+            return !event.button;
+        }).on('zoom', (event)=>{
+            const t = event.transform;
+            zoomTransformRef.current = t;
+            zoomGroup.setAttribute('transform', `translate(${t.x},${t.y}) scale(${t.k})`);
+            if (event.sourceEvent) hasUserZoomedRef.current = true;
+        });
+        zoomBehaviorRef.current = zoomBehavior;
+        (0, external_d3_selection_namespaceObject.select)(svg).call(zoomBehavior);
+        return ()=>{
+            (0, external_d3_selection_namespaceObject.select)(svg).on('.zoom', null);
+            zoomBehaviorRef.current = null;
+        };
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!sankeyGraph || 0 === containerWidth || 0 === containerHeight) return;
+        if (hasUserZoomedRef.current) return;
+        fitToView();
+    }, [
+        sankeyGraph,
+        containerWidth,
+        containerHeight,
+        fitToView
+    ]);
+    const handleZoomIn = (0, external_react_namespaceObject.useCallback)(()=>{
+        const svg = svgRef.current;
+        const zoomBehavior = zoomBehaviorRef.current;
+        if (!svg || !zoomBehavior) return;
+        (0, external_d3_selection_namespaceObject.select)(svg).transition().duration(200).call(zoomBehavior.scaleBy, 1.3);
+    }, []);
+    const handleZoomOut = (0, external_react_namespaceObject.useCallback)(()=>{
+        const svg = svgRef.current;
+        const zoomBehavior = zoomBehaviorRef.current;
+        if (!svg || !zoomBehavior) return;
+        (0, external_d3_selection_namespaceObject.select)(svg).transition().duration(200).call(zoomBehavior.scaleBy, 1 / 1.3);
+    }, []);
     const handleLinkMouseEnter = (0, external_react_namespaceObject.useCallback)((index, centerX, centerY)=>{
         if (selectedLinkIndex === index) return;
         const svgRect = svgRef.current?.getBoundingClientRect();
         if (svgRect) {
+            const t = zoomTransformRef.current;
+            const screenX = svgRect.left + centerX * t.k + t.x;
+            const screenY = svgRect.top + centerY * t.k + t.y;
             const virtualAnchor = {
                 getBoundingClientRect: ()=>({
-                        x: svgRect.left + centerX,
-                        y: svgRect.top + centerY,
-                        left: svgRect.left + centerX,
-                        top: svgRect.top + centerY,
-                        right: svgRect.left + centerX,
-                        bottom: svgRect.top + centerY,
+                        x: screenX,
+                        y: screenY,
+                        left: screenX,
+                        top: screenY,
+                        right: screenX,
+                        bottom: screenY,
                         width: 0,
                         height: 0,
                         toJSON: ()=>{}
@@ -339,90 +489,121 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
         ref: containerRef,
         style: style,
         className: className,
-        role: "img",
+        role: "figure",
         "aria-label": ariaLabel,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
                 ref: svgRef,
-                width: actualWidth,
-                height: actualHeight,
+                width: svgWidth,
+                height: svgHeight,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", {
+                    ref: zoomGroupRef,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("defs", {
+                            children: linkPaths.map((linkData)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("linearGradient", {
+                                    id: linkData.gradientId,
+                                    gradientUnits: "userSpaceOnUse",
+                                    x1: linkData.sourceX,
+                                    y1: 0,
+                                    x2: linkData.targetX,
+                                    y2: 0,
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("stop", {
+                                            offset: "0%",
+                                            stopColor: linkData.sourceColor
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("stop", {
+                                            offset: "100%",
+                                            stopColor: linkData.targetColor
+                                        })
+                                    ]
+                                }, linkData.gradientId))
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("g", {
+                            children: linkPaths.map((linkData, index)=>{
+                                const isConnectedToHoveredNode = connectedLinkIndices.has(index);
+                                let opacity = 0.6;
+                                if (selectedLinkIndex === index) opacity = 1;
+                                else if (hoveredNodeId) opacity = isConnectedToHoveredNode ? 1 : 0.3;
+                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyLink, {
+                                    d: linkData.path,
+                                    stroke: linkData.color ? linkData.color : `url(#${linkData.gradientId})`,
+                                    strokeWidth: linkData.strokeWidth,
+                                    fill: "none",
+                                    opacity: opacity,
+                                    onMouseEnter: ()=>handleLinkMouseEnter(index, linkData.centerX, linkData.centerY),
+                                    onMouseLeave: handleLinkMouseLeave,
+                                    onClick: (e)=>onLinkClick?.(linkData.originalLink, e),
+                                    "aria-label": `Link from ${linkData.sourceLabel} to ${linkData.targetLabel}`
+                                }, `link-${index}`);
+                            })
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("g", {
+                            children: nodeData.map((nodeItem)=>{
+                                const nodeOpacity = hoveredNodeId ? hoveredNodeId === nodeItem.node.id ? 1 : 0.4 : 1;
+                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", {
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNode, {
+                                            x: nodeItem.x,
+                                            y: nodeItem.y,
+                                            width: nodeItem.width,
+                                            height: nodeItem.height,
+                                            fill: nodeItem.color,
+                                            opacity: nodeOpacity,
+                                            onMouseEnter: ()=>handleNodeMouseEnter(nodeItem.node.id),
+                                            onMouseLeave: handleNodeMouseLeave,
+                                            onClick: (e)=>onNodeClick?.(nodeItem.node, e)
+                                        }),
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(StyledSankeyNodeLabel, {
+                                            x: nodeItem.labelX,
+                                            y: nodeItem.labelY,
+                                            dy: "0.35em",
+                                            textAnchor: nodeItem.labelAnchor,
+                                            children: [
+                                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
+                                                    children: nodeItem.fullLabel
+                                                }),
+                                                nodeItem.displayLabel
+                                            ]
+                                        }),
+                                        nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
+                                            x: nodeItem.labelX,
+                                            y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM, 10),
+                                            dy: "0.35em",
+                                            textAnchor: nodeItem.labelAnchor,
+                                            children: nodeItem.value
+                                        })
+                                    ]
+                                }, `node-${nodeItem.node.id}`);
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ZoomControls, {
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("defs", {
-                        children: linkPaths.map((linkData)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("linearGradient", {
-                                id: linkData.gradientId,
-                                gradientUnits: "userSpaceOnUse",
-                                x1: "0%",
-                                y1: "0%",
-                                x2: "100%",
-                                y2: "0%",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("stop", {
-                                        offset: "0%",
-                                        stopColor: linkData.sourceColor
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("stop", {
-                                        offset: "100%",
-                                        stopColor: linkData.targetColor
-                                    })
-                                ]
-                            }, linkData.gradientId))
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.IconButton, {
+                        size: "small",
+                        onClick: handleZoomIn,
+                        "aria-label": "Zoom in",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Add_default(), {
+                            fontSize: "small"
+                        })
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("g", {
-                        children: linkPaths.map((linkData, index)=>{
-                            const isConnectedToHoveredNode = connectedLinkIndices.has(index);
-                            let opacity = 0.6;
-                            if (selectedLinkIndex === index) opacity = 1;
-                            else if (hoveredNodeId) opacity = isConnectedToHoveredNode ? 1 : 0.3;
-                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyLink, {
-                                d: linkData.path,
-                                stroke: linkData.color ? linkData.color : `url(#${linkData.gradientId})`,
-                                strokeWidth: linkData.strokeWidth,
-                                fill: "none",
-                                opacity: opacity,
-                                onMouseEnter: ()=>handleLinkMouseEnter(index, linkData.centerX, linkData.centerY),
-                                onMouseLeave: handleLinkMouseLeave,
-                                onClick: (e)=>onLinkClick?.(linkData.originalLink, e),
-                                "aria-label": `Link from ${linkData.sourceLabel} to ${linkData.targetLabel}`
-                            }, `link-${index}`);
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.IconButton, {
+                        size: "small",
+                        onClick: handleZoomOut,
+                        "aria-label": "Zoom out",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Remove_default(), {
+                            fontSize: "small"
                         })
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("g", {
-                        children: nodeData.map((nodeItem)=>{
-                            const nodeOpacity = hoveredNodeId ? hoveredNodeId === nodeItem.node.id ? 1 : 0.4 : 1;
-                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("g", {
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNode, {
-                                        x: nodeItem.x,
-                                        y: nodeItem.y,
-                                        width: nodeItem.width,
-                                        height: nodeItem.height,
-                                        fill: nodeItem.color,
-                                        opacity: nodeOpacity,
-                                        onMouseEnter: ()=>handleNodeMouseEnter(nodeItem.node.id),
-                                        onMouseLeave: handleNodeMouseLeave,
-                                        onClick: (e)=>onNodeClick?.(nodeItem.node, e)
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(StyledSankeyNodeLabel, {
-                                        x: nodeItem.labelX,
-                                        y: nodeItem.labelY,
-                                        dy: "0.35em",
-                                        textAnchor: nodeItem.labelAnchor,
-                                        children: [
-                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("title", {
-                                                children: nodeItem.fullLabel
-                                            }),
-                                            nodeItem.displayLabel
-                                        ]
-                                    }),
-                                    nodeItem.value > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StyledSankeyNodeValue, {
-                                        x: nodeItem.labelX,
-                                        y: nodeItem.labelY + parseInt(apollo_core_default().Spacing.SpacingM, 10),
-                                        dy: "0.35em",
-                                        textAnchor: nodeItem.labelAnchor,
-                                        children: nodeItem.value
-                                    })
-                                ]
-                            }, `node-${nodeItem.node.id}`);
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(material_namespaceObject.IconButton, {
+                        size: "small",
+                        onClick: fitToView,
+                        "aria-label": "Fit to view",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FitScreen_default(), {
+                            fontSize: "small"
                         })
                     })
                 ]
@@ -512,8 +693,10 @@ const ApSankeyDiagram = /*#__PURE__*/ external_react_default().forwardRef((props
 });
 ApSankeyDiagram.displayName = 'ApSankeyDiagram';
 exports.ApSankeyDiagram = __webpack_exports__.ApSankeyDiagram;
+exports.computeSankeyDimensions = __webpack_exports__.computeSankeyDimensions;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "ApSankeyDiagram"
+    "ApSankeyDiagram",
+    "computeSankeyDimensions"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
-import type { ApSankeyDiagramProps } from './ApSankeyDiagram.types';
+import type { ApSankeyDiagramProps, SankeyData } from './ApSankeyDiagram.types';
+export declare function computeSankeyDimensions(data: SankeyData, nodePadding: number, minNodeHeight: number, minColumnWidth: number, marginLeft: number, marginRight: number, marginTop: number, marginBottom: number): {
+    minWidth: number;
+    minHeight: number;
+};
 export declare const ApSankeyDiagram: React.ForwardRefExoticComponent<ApSankeyDiagramProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ApSankeyDiagram.d.ts.map

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.d.ts.map

@@ -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;AA4J5F,eAAO,MAAM,eAAe,6FAsb3B,CAAC"}
+{"version":3,"file":"ApSankeyDiagram.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACV,oBAAoB,EACpB,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAyJjC,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,UAAU,EAChB,WAAW,EAAE,MAAM,EACnB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,EACtB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAmDzC;AAuBD,eAAO,MAAM,eAAe,6FAqjB3B,CAAC"}

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.js

@@ -1,9 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Paper, Popper } from "@mui/material";
+import Add from "@mui/icons-material/Add";
+import FitScreen from "@mui/icons-material/FitScreen";
+import Remove from "@mui/icons-material/Remove";
+import { IconButton, Paper, Popper } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import apollo_core from "@uipath/apollo-core";
 import { sankey, sankeyCenter, sankeyJustify, sankeyLeft, sankeyLinkHorizontal, sankeyRight } from "d3-sankey";
 import { schemeTableau10 } from "d3-scale-chromatic";
+import { select as external_d3_selection_select } from "d3-selection";
+import { zoom, zoomIdentity } from "d3-zoom";
 import react, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 const SankeyContainer = styled('div')({
     position: 'relative',
@@ -12,9 +17,7 @@ const SankeyContainer = styled('div')({
     width: '100%',
     height: '600px',
     '& svg': {
-        display: 'block',
-        width: '100%',
-        height: '100%'
+        display: 'block'
     }
 });
 const StyledSankeyNode = styled('rect')({
@@ -82,9 +85,66 @@ const TooltipValue = styled('span')({
     color: 'var(--color-foreground-emp)',
     fontWeight: apollo_core.FontFamily.FontWeightSemibold
 });
+const ZoomControls = styled('div')({
+    position: 'absolute',
+    bottom: apollo_core.Spacing.SpacingM,
+    right: apollo_core.Spacing.SpacingM,
+    display: 'flex',
+    gap: '1px',
+    backgroundColor: apollo_core.Colors.ColorGray100,
+    borderRadius: apollo_core.Border.BorderRadiusM,
+    overflow: 'hidden',
+    boxShadow: apollo_core.Shadow.ShadowDp2
+});
 const DIAGRAM_MARGIN_LEFT = 5;
 const DIAGRAM_MARGIN_RIGHT = 120;
-const DIAGRAM_MARGIN_VERTICAL = 5;
+const DIAGRAM_MARGIN_TOP = 5;
+const DIAGRAM_MARGIN_BOTTOM = 40;
+const ZOOM_SCALE_EXTENT_MIN = 0.5;
+const ZOOM_SCALE_EXTENT_MAX = 2;
+function computeSankeyDimensions(data, nodePadding, minNodeHeight, minColumnWidth, marginLeft, marginRight, marginTop, marginBottom) {
+    if (!data || 0 === data.nodes.length) return {
+        minWidth: 0,
+        minHeight: 0
+    };
+    const outgoing = new Map();
+    const incoming = new Map();
+    for (const node of data.nodes){
+        outgoing.set(node.id, []);
+        incoming.set(node.id, []);
+    }
+    for (const link of data.links){
+        outgoing.get(link.source)?.push(link.target);
+        incoming.get(link.target)?.push(link.source);
+    }
+    const depth = new Map();
+    const sources = data.nodes.filter((n)=>(incoming.get(n.id)?.length ?? 0) === 0);
+    const queue = [];
+    for (const s of sources){
+        depth.set(s.id, 0);
+        queue.push(s.id);
+    }
+    const maxIterations = data.nodes.length * data.links.length + data.nodes.length;
+    let iterations = 0;
+    while(queue.length > 0 && iterations++ < maxIterations){
+        const id = queue.shift();
+        const d = depth.get(id);
+        for (const target of outgoing.get(id) ?? [])if (!depth.has(target) || depth.get(target) < d + 1) {
+            depth.set(target, d + 1);
+            queue.push(target);
+        }
+    }
+    const columnCounts = new Map();
+    for (const d of depth.values())columnCounts.set(d, (columnCounts.get(d) ?? 0) + 1);
+    const columnCount = columnCounts.size;
+    const maxNodesPerColumn = Math.max(0, ...columnCounts.values());
+    const minWidth = columnCount * minColumnWidth + marginLeft + marginRight;
+    const minHeight = maxNodesPerColumn * (minNodeHeight + nodePadding) - nodePadding + marginTop + marginBottom;
+    return {
+        minWidth,
+        minHeight
+    };
+}
 const truncateToFit = (text, maxWidth, ctx)=>{
     if (maxWidth <= 0) return '';
     if (ctx.measureText(text).width <= maxWidth) return text;
@@ -99,9 +159,13 @@ const truncateToFit = (text, maxWidth, ctx)=>{
     return 0 === lo ? ellipsis : text.substring(0, lo) + ellipsis;
 };
 const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
-    const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick } = props;
+    const { data, nodeAlignment = 'justify', nodePadding = 16, nodeWidth = 24, style, className, colorScheme = schemeTableau10, ariaLabel = 'Sankey diagram', onLinkClick, onNodeClick, minNodeHeight = 36, minColumnWidth = 140 } = props;
     const containerRef = useRef(null);
     const svgRef = useRef(null);
+    const zoomGroupRef = useRef(null);
+    const zoomBehaviorRef = useRef(null);
+    const zoomTransformRef = useRef(zoomIdentity);
+    const hasUserZoomedRef = useRef(false);
     const [containerWidth, setContainerWidth] = useState(0);
     const [containerHeight, setContainerHeight] = useState(0);
     const [selectedLinkIndex, setSelectedLinkIndex] = useState(null);
@@ -123,6 +187,20 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     }, []);
     const actualWidth = containerWidth || 1200;
     const actualHeight = containerHeight || 600;
+    const { minWidth, minHeight } = useMemo(()=>{
+        if (!data || 0 === data.nodes.length) return {
+            minWidth: 0,
+            minHeight: 0
+        };
+        return computeSankeyDimensions(data, nodePadding, minNodeHeight, minColumnWidth, DIAGRAM_MARGIN_LEFT, DIAGRAM_MARGIN_RIGHT, DIAGRAM_MARGIN_TOP, DIAGRAM_MARGIN_BOTTOM);
+    }, [
+        data,
+        nodePadding,
+        minNodeHeight,
+        minColumnWidth
+    ]);
+    const svgWidth = Math.max(actualWidth, minWidth);
+    const svgHeight = Math.max(actualHeight, minHeight);
     const nodeColorMap = useMemo(()=>{
         const map = new Map();
         if (!data) return map;
@@ -141,11 +219,11 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
         const sankeyGenerator = sankey().nodeId((d)=>d.id).nodeAlign(alignmentFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
             [
                 DIAGRAM_MARGIN_LEFT,
-                DIAGRAM_MARGIN_VERTICAL
+                DIAGRAM_MARGIN_TOP
             ],
             [
-                actualWidth - DIAGRAM_MARGIN_RIGHT,
-                actualHeight - DIAGRAM_MARGIN_VERTICAL
+                svgWidth - DIAGRAM_MARGIN_RIGHT,
+                svgHeight - DIAGRAM_MARGIN_BOTTOM
             ]
         ]);
         const graph = {
@@ -162,8 +240,8 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
         nodeAlignment,
         nodeWidth,
         nodePadding,
-        actualWidth,
-        actualHeight
+        svgWidth,
+        svgHeight
     ]);
     const linkPaths = useMemo(()=>{
         if (!sankeyGraph) return [];
@@ -198,6 +276,8 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                 targetId: targetNode.id,
                 sourceLabel: sourceNode.label,
                 targetLabel: targetNode.label,
+                sourceX,
+                targetX,
                 centerX,
                 centerY
             };
@@ -252,18 +332,84 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
         nodeColorMap,
         colorScheme
     ]);
+    const fitToView = useCallback(()=>{
+        const svg = svgRef.current;
+        const zoomBehavior = zoomBehaviorRef.current;
+        if (!svg || !zoomBehavior || 0 === svgWidth || 0 === svgHeight) return;
+        hasUserZoomedRef.current = false;
+        const cw = containerWidth || 1;
+        const ch = containerHeight || 1;
+        const scale = 0.95 * Math.min(cw / svgWidth, ch / svgHeight);
+        const tx = (cw - svgWidth * scale) / 2;
+        const ty = (ch - svgHeight * scale) / 2;
+        const t = zoomIdentity.translate(tx, ty).scale(scale);
+        external_d3_selection_select(svg).transition().duration(300).call(zoomBehavior.transform, t);
+    }, [
+        containerWidth,
+        containerHeight,
+        svgWidth,
+        svgHeight
+    ]);
+    useEffect(()=>{
+        const svg = svgRef.current;
+        const zoomGroup = zoomGroupRef.current;
+        if (!svg || !zoomGroup) return;
+        const zoomBehavior = zoom().scaleExtent([
+            ZOOM_SCALE_EXTENT_MIN,
+            ZOOM_SCALE_EXTENT_MAX
+        ]).filter((event)=>{
+            if ('wheel' === event.type) return event.ctrlKey || event.metaKey;
+            return !event.button;
+        }).on('zoom', (event)=>{
+            const t = event.transform;
+            zoomTransformRef.current = t;
+            zoomGroup.setAttribute('transform', `translate(${t.x},${t.y}) scale(${t.k})`);
+            if (event.sourceEvent) hasUserZoomedRef.current = true;
+        });
+        zoomBehaviorRef.current = zoomBehavior;
+        external_d3_selection_select(svg).call(zoomBehavior);
+        return ()=>{
+            external_d3_selection_select(svg).on('.zoom', null);
+            zoomBehaviorRef.current = null;
+        };
+    }, []);
+    useEffect(()=>{
+        if (!sankeyGraph || 0 === containerWidth || 0 === containerHeight) return;
+        if (hasUserZoomedRef.current) return;
+        fitToView();
+    }, [
+        sankeyGraph,
+        containerWidth,
+        containerHeight,
+        fitToView
+    ]);
+    const handleZoomIn = useCallback(()=>{
+        const svg = svgRef.current;
+        const zoomBehavior = zoomBehaviorRef.current;
+        if (!svg || !zoomBehavior) return;
+        external_d3_selection_select(svg).transition().duration(200).call(zoomBehavior.scaleBy, 1.3);
+    }, []);
+    const handleZoomOut = useCallback(()=>{
+        const svg = svgRef.current;
+        const zoomBehavior = zoomBehaviorRef.current;
+        if (!svg || !zoomBehavior) return;
+        external_d3_selection_select(svg).transition().duration(200).call(zoomBehavior.scaleBy, 1 / 1.3);
+    }, []);
     const handleLinkMouseEnter = useCallback((index, centerX, centerY)=>{
         if (selectedLinkIndex === index) return;
         const svgRect = svgRef.current?.getBoundingClientRect();
         if (svgRect) {
+            const t = zoomTransformRef.current;
+            const screenX = svgRect.left + centerX * t.k + t.x;
+            const screenY = svgRect.top + centerY * t.k + t.y;
             const virtualAnchor = {
                 getBoundingClientRect: ()=>({
-                        x: svgRect.left + centerX,
-                        y: svgRect.top + centerY,
-                        left: svgRect.left + centerX,
-                        top: svgRect.top + centerY,
-                        right: svgRect.left + centerX,
-                        bottom: svgRect.top + centerY,
+                        x: screenX,
+                        y: screenY,
+                        left: screenX,
+                        top: screenY,
+                        right: screenX,
+                        bottom: screenY,
                         width: 0,
                         height: 0,
                         toJSON: ()=>{}
@@ -300,90 +446,121 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
         ref: containerRef,
         style: style,
         className: className,
-        role: "img",
+        role: "figure",
         "aria-label": ariaLabel,
         children: [
-            /*#__PURE__*/ jsxs("svg", {
+            /*#__PURE__*/ jsx("svg", {
                 ref: svgRef,
-                width: actualWidth,
-                height: actualHeight,
+                width: svgWidth,
+                height: svgHeight,
+                children: /*#__PURE__*/ jsxs("g", {
+                    ref: zoomGroupRef,
+                    children: [
+                        /*#__PURE__*/ jsx("defs", {
+                            children: linkPaths.map((linkData)=>/*#__PURE__*/ jsxs("linearGradient", {
+                                    id: linkData.gradientId,
+                                    gradientUnits: "userSpaceOnUse",
+                                    x1: linkData.sourceX,
+                                    y1: 0,
+                                    x2: linkData.targetX,
+                                    y2: 0,
+                                    children: [
+                                        /*#__PURE__*/ jsx("stop", {
+                                            offset: "0%",
+                                            stopColor: linkData.sourceColor
+                                        }),
+                                        /*#__PURE__*/ jsx("stop", {
+                                            offset: "100%",
+                                            stopColor: linkData.targetColor
+                                        })
+                                    ]
+                                }, linkData.gradientId))
+                        }),
+                        /*#__PURE__*/ jsx("g", {
+                            children: linkPaths.map((linkData, index)=>{
+                                const isConnectedToHoveredNode = connectedLinkIndices.has(index);
+                                let opacity = 0.6;
+                                if (selectedLinkIndex === index) opacity = 1;
+                                else if (hoveredNodeId) opacity = isConnectedToHoveredNode ? 1 : 0.3;
+                                return /*#__PURE__*/ jsx(StyledSankeyLink, {
+                                    d: linkData.path,
+                                    stroke: linkData.color ? linkData.color : `url(#${linkData.gradientId})`,
+                                    strokeWidth: linkData.strokeWidth,
+                                    fill: "none",
+                                    opacity: opacity,
+                                    onMouseEnter: ()=>handleLinkMouseEnter(index, linkData.centerX, linkData.centerY),
+                                    onMouseLeave: handleLinkMouseLeave,
+                                    onClick: (e)=>onLinkClick?.(linkData.originalLink, e),
+                                    "aria-label": `Link from ${linkData.sourceLabel} to ${linkData.targetLabel}`
+                                }, `link-${index}`);
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("g", {
+                            children: nodeData.map((nodeItem)=>{
+                                const nodeOpacity = hoveredNodeId ? hoveredNodeId === nodeItem.node.id ? 1 : 0.4 : 1;
+                                return /*#__PURE__*/ jsxs("g", {
+                                    children: [
+                                        /*#__PURE__*/ jsx(StyledSankeyNode, {
+                                            x: nodeItem.x,
+                                            y: nodeItem.y,
+                                            width: nodeItem.width,
+                                            height: nodeItem.height,
+                                            fill: nodeItem.color,
+                                            opacity: nodeOpacity,
+                                            onMouseEnter: ()=>handleNodeMouseEnter(nodeItem.node.id),
+                                            onMouseLeave: handleNodeMouseLeave,
+                                            onClick: (e)=>onNodeClick?.(nodeItem.node, e)
+                                        }),
+                                        /*#__PURE__*/ jsxs(StyledSankeyNodeLabel, {
+                                            x: nodeItem.labelX,
+                                            y: nodeItem.labelY,
+                                            dy: "0.35em",
+                                            textAnchor: nodeItem.labelAnchor,
+                                            children: [
+                                                /*#__PURE__*/ jsx("title", {
+                                                    children: nodeItem.fullLabel
+                                                }),
+                                                nodeItem.displayLabel
+                                            ]
+                                        }),
+                                        nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
+                                            x: nodeItem.labelX,
+                                            y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM, 10),
+                                            dy: "0.35em",
+                                            textAnchor: nodeItem.labelAnchor,
+                                            children: nodeItem.value
+                                        })
+                                    ]
+                                }, `node-${nodeItem.node.id}`);
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(ZoomControls, {
                 children: [
-                    /*#__PURE__*/ jsx("defs", {
-                        children: linkPaths.map((linkData)=>/*#__PURE__*/ jsxs("linearGradient", {
-                                id: linkData.gradientId,
-                                gradientUnits: "userSpaceOnUse",
-                                x1: "0%",
-                                y1: "0%",
-                                x2: "100%",
-                                y2: "0%",
-                                children: [
-                                    /*#__PURE__*/ jsx("stop", {
-                                        offset: "0%",
-                                        stopColor: linkData.sourceColor
-                                    }),
-                                    /*#__PURE__*/ jsx("stop", {
-                                        offset: "100%",
-                                        stopColor: linkData.targetColor
-                                    })
-                                ]
-                            }, linkData.gradientId))
+                    /*#__PURE__*/ jsx(IconButton, {
+                        size: "small",
+                        onClick: handleZoomIn,
+                        "aria-label": "Zoom in",
+                        children: /*#__PURE__*/ jsx(Add, {
+                            fontSize: "small"
+                        })
                     }),
-                    /*#__PURE__*/ jsx("g", {
-                        children: linkPaths.map((linkData, index)=>{
-                            const isConnectedToHoveredNode = connectedLinkIndices.has(index);
-                            let opacity = 0.6;
-                            if (selectedLinkIndex === index) opacity = 1;
-                            else if (hoveredNodeId) opacity = isConnectedToHoveredNode ? 1 : 0.3;
-                            return /*#__PURE__*/ jsx(StyledSankeyLink, {
-                                d: linkData.path,
-                                stroke: linkData.color ? linkData.color : `url(#${linkData.gradientId})`,
-                                strokeWidth: linkData.strokeWidth,
-                                fill: "none",
-                                opacity: opacity,
-                                onMouseEnter: ()=>handleLinkMouseEnter(index, linkData.centerX, linkData.centerY),
-                                onMouseLeave: handleLinkMouseLeave,
-                                onClick: (e)=>onLinkClick?.(linkData.originalLink, e),
-                                "aria-label": `Link from ${linkData.sourceLabel} to ${linkData.targetLabel}`
-                            }, `link-${index}`);
+                    /*#__PURE__*/ jsx(IconButton, {
+                        size: "small",
+                        onClick: handleZoomOut,
+                        "aria-label": "Zoom out",
+                        children: /*#__PURE__*/ jsx(Remove, {
+                            fontSize: "small"
                         })
                     }),
-                    /*#__PURE__*/ jsx("g", {
-                        children: nodeData.map((nodeItem)=>{
-                            const nodeOpacity = hoveredNodeId ? hoveredNodeId === nodeItem.node.id ? 1 : 0.4 : 1;
-                            return /*#__PURE__*/ jsxs("g", {
-                                children: [
-                                    /*#__PURE__*/ jsx(StyledSankeyNode, {
-                                        x: nodeItem.x,
-                                        y: nodeItem.y,
-                                        width: nodeItem.width,
-                                        height: nodeItem.height,
-                                        fill: nodeItem.color,
-                                        opacity: nodeOpacity,
-                                        onMouseEnter: ()=>handleNodeMouseEnter(nodeItem.node.id),
-                                        onMouseLeave: handleNodeMouseLeave,
-                                        onClick: (e)=>onNodeClick?.(nodeItem.node, e)
-                                    }),
-                                    /*#__PURE__*/ jsxs(StyledSankeyNodeLabel, {
-                                        x: nodeItem.labelX,
-                                        y: nodeItem.labelY,
-                                        dy: "0.35em",
-                                        textAnchor: nodeItem.labelAnchor,
-                                        children: [
-                                            /*#__PURE__*/ jsx("title", {
-                                                children: nodeItem.fullLabel
-                                            }),
-                                            nodeItem.displayLabel
-                                        ]
-                                    }),
-                                    nodeItem.value > 0 && /*#__PURE__*/ jsx(StyledSankeyNodeValue, {
-                                        x: nodeItem.labelX,
-                                        y: nodeItem.labelY + parseInt(apollo_core.Spacing.SpacingM, 10),
-                                        dy: "0.35em",
-                                        textAnchor: nodeItem.labelAnchor,
-                                        children: nodeItem.value
-                                    })
-                                ]
-                            }, `node-${nodeItem.node.id}`);
+                    /*#__PURE__*/ jsx(IconButton, {
+                        size: "small",
+                        onClick: fitToView,
+                        "aria-label": "Fit to view",
+                        children: /*#__PURE__*/ jsx(FitScreen, {
+                            fontSize: "small"
                         })
                     })
                 ]
@@ -472,4 +649,4 @@ const ApSankeyDiagram = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     });
 });
 ApSankeyDiagram.displayName = 'ApSankeyDiagram';
-export { ApSankeyDiagram };
+export { ApSankeyDiagram, computeSankeyDimensions };

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.types.d.ts

@@ -28,5 +28,7 @@ export interface ApSankeyDiagramProps {
     onLinkClick?: (link: SankeyLink, event: React.MouseEvent) => void;
     colorScheme?: string[];
     ariaLabel?: string;
+    minNodeHeight?: number;
+    minColumnWidth?: number;
 }
 //# sourceMappingURL=ApSankeyDiagram.types.d.ts.map

package/dist/material/components/ap-sankey-diagram/ApSankeyDiagram.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApSankeyDiagram.types.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,MAAM,WAAW,UAAU;IAEzB,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAKD,MAAM,WAAW,UAAU;IAEzB,MAAM,EAAE,MAAM,CAAC;IAEf,MAAM,EAAE,MAAM,CAAC;IAEf,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAKD,MAAM,WAAW,UAAU;IAEzB,KAAK,EAAE,UAAU,EAAE,CAAC;IAEpB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAKD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAKpE,MAAM,WAAW,oBAAoB;IAEnC,IAAI,EAAE,UAAU,CAAC;IAEjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAElE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAElE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"ApSankeyDiagram.types.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-sankey-diagram/ApSankeyDiagram.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,MAAM,WAAW,UAAU;IAEzB,EAAE,EAAE,MAAM,CAAC;IAEX,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAKD,MAAM,WAAW,UAAU;IAEzB,MAAM,EAAE,MAAM,CAAC;IAEf,MAAM,EAAE,MAAM,CAAC;IAEf,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAKD,MAAM,WAAW,UAAU;IAEzB,KAAK,EAAE,UAAU,EAAE,CAAC;IAEpB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAKD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAKpE,MAAM,WAAW,oBAAoB;IAEnC,IAAI,EAAE,UAAU,CAAC;IAEjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAElE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAElE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAEvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "3.45.3",
+  "version": "3.45.5",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",
@@ -175,6 +175,8 @@
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
     "d3-scale-chromatic": "^3.1.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
     "date-fns": "^4.1.0",
     "debounce": "^3.0.0",
     "html-to-image": "^1.11.11",
@@ -198,8 +200,8 @@
     "use-sync-external-store": "^1.2.0",
     "zod": "^4.3.5",
     "zustand": "^5.0.9",
-    "@uipath/apollo-core": "5.7.0",
-    "@uipath/apollo-wind": "0.10.0"
+    "@uipath/apollo-wind": "0.10.0",
+    "@uipath/apollo-core": "5.7.0"
   },
   "devDependencies": {
     "@lingui/cli": "^5.6.1",
@@ -221,6 +223,8 @@
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.8",
     "@types/d3-scale-chromatic": "^3.0.3",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-zoom": "^3.0.8",
     "@types/lodash": "^4.17.21",
     "@types/luxon": "^3.7.1",
     "@types/mdast": "^4.0.4",