@dynatrace/strato-components 3.12.1 → 3.13.0

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.js

@@ -1,27 +1,23 @@
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import {
   insideLabelPositioner,
   insideZoneLabel,
   insideZoneOverlay,
-  interactiveLabel,
   leftZoneLabel,
   rightZoneLabel,
   sideLabelContainer,
   sideLabelPositioner
 } from "./SankeyLabelOverlay.sty.js";
-import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
+import { SankeyNodeLabel } from "./SankeyNodeLabel.js";
 import { charsFontWidth14pixelsSize500Map } from "../../core/components/text-ellipsis/chars-font-width-map.js";
-import {
-  calculateWidth,
-  truncateString
-} from "../../core/components/text-ellipsis/truncate-string.js";
+import { calculateWidth } from "../../core/components/text-ellipsis/truncate-string.js";
 import {
   INSIDE_LABEL_PADDING,
   INSIDE_LABEL_WIDTH_RATIO
 } from "../constants.js";
 import { SankeyTruncationModeContext } from "../context/SankeyTruncationMode.context.js";
+import { useSankeyActiveHighlight } from "../store/selectors.js";
 function hasGeometry(node) {
   return node.x0 !== void 0 && node.x1 !== void 0 && node.y0 !== void 0 && node.y1 !== void 0;
 }
@@ -45,37 +41,27 @@ function getMaxLabelWidth(columnNodes) {
   }
   return Math.ceil(max);
 }
-function renderSideLabels(columnNodes, labelClassName, truncationMode, maxWidth) {
+function renderSideLabels(columnNodes, labelClassName, truncationMode, isNodeDimmed, maxWidth) {
   const measuredWidth = getMaxLabelWidth(columnNodes);
   const effectiveWidth = maxWidth !== void 0 && maxWidth > 0 ? Math.min(measuredWidth, maxWidth) : measuredWidth;
-  return /* @__PURE__ */ jsx("div", { className: sideLabelContainer, style: { width: effectiveWidth }, children: columnNodes.map((node) => {
-    const fullLabel = node.label ?? "";
-    const label = truncateString(
-      fullLabel,
-      effectiveWidth,
-      charsFontWidth14pixelsSize500Map,
-      truncationMode
-    );
-    const isTruncated = label !== fullLabel;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: sideLabelPositioner,
-        style: { top: node.y0, height: node.y1 - node.y0 },
-        children: /* @__PURE__ */ jsx(Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              labelClassName,
-              isTruncated && interactiveLabel
-            ),
-            children: label
-          }
-        ) })
-      },
-      node.id
-    );
-  }) });
+  return /* @__PURE__ */ jsx("div", { className: sideLabelContainer, style: { width: effectiveWidth }, children: columnNodes.map((node) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: sideLabelPositioner,
+      style: { top: node.y0, height: node.y1 - node.y0 },
+      children: /* @__PURE__ */ jsx(
+        SankeyNodeLabel,
+        {
+          label: node.label ?? "",
+          width: effectiveWidth,
+          className: labelClassName,
+          truncationMode,
+          dimmed: isNodeDimmed(node)
+        }
+      )
+    },
+    node.id
+  )) });
 }
 function SankeyLabelOverlay({
   zone,
@@ -83,7 +69,13 @@ function SankeyLabelOverlay({
   maxWidth
 }) {
   const truncationMode = useContext(SankeyTruncationModeContext);
+  const activeSet = useSankeyActiveHighlight();
   const validNodes = layout.nodes.filter(hasGeometry);
+  const connectedNodes = useMemo(
+    () => activeSet ? new Set(activeSet.nodes) : void 0,
+    [activeSet]
+  );
+  const isNodeDimmed = (node) => connectedNodes !== void 0 && !connectedNodes.has(node);
   if (validNodes.length === 0) {
     return null;
   }
@@ -100,6 +92,7 @@ function SankeyLabelOverlay({
       columnNodes,
       leftZoneLabel,
       truncationMode,
+      isNodeDimmed,
       maxWidth
     );
   }
@@ -115,6 +108,7 @@ function SankeyLabelOverlay({
       lastColumnNodes,
       rightZoneLabel,
       truncationMode,
+      isNodeDimmed,
       maxWidth
     );
   }
@@ -125,36 +119,27 @@ function SankeyLabelOverlay({
     return null;
   }
   return /* @__PURE__ */ jsx("div", { className: insideZoneOverlay, children: middleNodes.map((node) => {
-    const nodeHeight = node.y1 - node.y0;
     const insideWidth = getInsideLabelMaxWidth(node, visualColumns);
-    const fullLabel = node.label ?? "";
-    const label = truncateString(
-      fullLabel,
-      insideWidth,
-      charsFontWidth14pixelsSize500Map,
-      truncationMode
-    );
-    const isTruncated = label !== fullLabel;
     return /* @__PURE__ */ jsx(
       "div",
       {
         className: insideLabelPositioner,
         style: {
           top: node.y0,
-          height: nodeHeight,
+          height: node.y1 - node.y0,
           left: node.x1 + INSIDE_LABEL_PADDING,
           maxWidth: insideWidth
         },
-        children: /* @__PURE__ */ jsx(Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
-          "span",
+        children: /* @__PURE__ */ jsx(
+          SankeyNodeLabel,
           {
-            className: clsx(
-              insideZoneLabel,
-              isTruncated && interactiveLabel
-            ),
-            children: label
+            label: node.label ?? "",
+            width: insideWidth,
+            className: insideZoneLabel,
+            truncationMode,
+            dimmed: isNodeDimmed(node)
           }
-        ) })
+        )
       },
       node.id
     );

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/components/SankeyLabelOverlay.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useContext } from 'react';\n\nimport {\n  insideLabelPositioner,\n  insideZoneLabel,\n  insideZoneOverlay,\n  interactiveLabel,\n  leftZoneLabel,\n  rightZoneLabel,\n  sideLabelContainer,\n  sideLabelPositioner,\n} from './SankeyLabelOverlay.sty.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth14pixelsSize500Map } from '../../core/components/text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../core/components/text-ellipsis/truncate-string.js';\nimport {\n  INSIDE_LABEL_PADDING,\n  INSIDE_LABEL_WIDTH_RATIO,\n} from '../constants.js';\nimport { SankeyTruncationModeContext } from '../context/SankeyTruncationMode.context.js';\nimport type {\n  SankeyLayoutModel,\n  SankeyLayoutNode,\n} from '../types/sankey-internal.js';\n\ntype SankeyLabelZone = 'left' | 'inside' | 'right';\n\ntype NodeWithGeometry = SankeyLayoutNode & {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n};\n\nfunction hasGeometry(node: SankeyLayoutNode): node is NodeWithGeometry {\n  return (\n    node.x0 !== undefined &&\n    node.x1 !== undefined &&\n    node.y0 !== undefined &&\n    node.y1 !== undefined\n  );\n}\n\ninterface SankeyLabelOverlayProps {\n  zone: SankeyLabelZone;\n  layout: SankeyLayoutModel;\n  maxWidth?: number;\n}\n\nfunction getVisualColumns(nodes: NodeWithGeometry[]): number[] {\n  return [...new Set(nodes.map((n) => n.x0))].sort((a, b) => a - b);\n}\n\nfunction getInsideLabelMaxWidth(\n  node: NodeWithGeometry,\n  visualColumns: number[],\n): number {\n  const nextColX0 = visualColumns.find((x) => x > node.x0) ?? node.x1;\n  return Math.max(0, (nextColX0 - node.x1) * INSIDE_LABEL_WIDTH_RATIO);\n}\n\nfunction getMaxLabelWidth(columnNodes: SankeyLayoutNode[]): number {\n  let max = 0;\n  for (const node of columnNodes) {\n    const w = calculateWidth(\n      node.label ?? '',\n      charsFontWidth14pixelsSize500Map,\n    );\n    if (w > max) {\n      max = w;\n    }\n  }\n  return Math.ceil(max);\n}\n\nfunction renderSideLabels(\n  columnNodes: NodeWithGeometry[],\n  labelClassName: string,\n  truncationMode: TruncationMode,\n  maxWidth?: number,\n) {\n  const measuredWidth = getMaxLabelWidth(columnNodes);\n  const effectiveWidth =\n    maxWidth !== undefined && maxWidth > 0\n      ? Math.min(measuredWidth, maxWidth)\n      : measuredWidth;\n\n  return (\n    <div className={sideLabelContainer} style={{ width: effectiveWidth }}>\n      {columnNodes.map((node) => {\n        const fullLabel = node.label ?? '';\n        const label = truncateString(\n          fullLabel,\n          effectiveWidth,\n          charsFontWidth14pixelsSize500Map,\n          truncationMode,\n        );\n        const isTruncated = label !== fullLabel;\n        return (\n          <div\n            key={node.id}\n            className={sideLabelPositioner}\n            style={{ top: node.y0, height: node.y1 - node.y0 }}\n          >\n            <Tooltip text={fullLabel} disabled={!isTruncated}>\n              <span\n                className={clsx(\n                  labelClassName,\n                  isTruncated && interactiveLabel,\n                )}\n              >\n                {label}\n              </span>\n            </Tooltip>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function SankeyLabelOverlay({\n  zone,\n  layout,\n  maxWidth,\n}: Readonly<SankeyLabelOverlayProps>) {\n  const truncationMode = useContext(SankeyTruncationModeContext);\n  const validNodes = layout.nodes.filter(hasGeometry);\n\n  if (validNodes.length === 0) {\n    return null;\n  }\n\n  const visualColumns = getVisualColumns(validNodes);\n  const leftX0 = visualColumns[0];\n  const rightX0 = visualColumns[visualColumns.length - 1];\n  const hasMultipleColumns = visualColumns.length > 1;\n\n  if (zone === 'left') {\n    const columnNodes = validNodes.filter((n) => n.x0 === leftX0);\n    if (columnNodes.length === 0) {\n      return null;\n    }\n    return renderSideLabels(\n      columnNodes,\n      leftZoneLabel,\n      truncationMode,\n      maxWidth,\n    );\n  }\n\n  if (zone === 'right') {\n    if (!hasMultipleColumns) {\n      return null;\n    }\n    const lastColumnNodes = validNodes.filter((n) => n.x0 === rightX0);\n    if (lastColumnNodes.length === 0) {\n      return null;\n    }\n    return renderSideLabels(\n      lastColumnNodes,\n      rightZoneLabel,\n      truncationMode,\n      maxWidth,\n    );\n  }\n\n  const middleNodes = validNodes.filter(\n    (n) => n.x0 !== leftX0 && (!hasMultipleColumns || n.x0 !== rightX0),\n  );\n\n  if (middleNodes.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={insideZoneOverlay}>\n      {middleNodes.map((node) => {\n        const nodeHeight = node.y1 - node.y0;\n        const insideWidth = getInsideLabelMaxWidth(node, visualColumns);\n        const fullLabel = node.label ?? '';\n        const label = truncateString(\n          fullLabel,\n          insideWidth,\n          charsFontWidth14pixelsSize500Map,\n          truncationMode,\n        );\n        const isTruncated = label !== fullLabel;\n\n        return (\n          <div\n            key={node.id}\n            className={insideLabelPositioner}\n            style={{\n              top: node.y0,\n              height: nodeHeight,\n              left: node.x1 + INSIDE_LABEL_PADDING,\n              maxWidth: insideWidth,\n            }}\n          >\n            <Tooltip text={fullLabel} disabled={!isTruncated}>\n              <span\n                className={clsx(\n                  insideZoneLabel,\n                  isTruncated && interactiveLabel,\n                )}\n              >\n                {label}\n              </span>\n            </Tooltip>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSankeyLabelOverlay['displayName'] = 'SankeyLabelOverlay';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\n\nimport {\n  insideLabelPositioner,\n  insideZoneLabel,\n  insideZoneOverlay,\n  leftZoneLabel,\n  rightZoneLabel,\n  sideLabelContainer,\n  sideLabelPositioner,\n} from './SankeyLabelOverlay.sty.js';\nimport { SankeyNodeLabel } from './SankeyNodeLabel.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth14pixelsSize500Map } from '../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../core/components/text-ellipsis/truncate-string.js';\nimport {\n  INSIDE_LABEL_PADDING,\n  INSIDE_LABEL_WIDTH_RATIO,\n} from '../constants.js';\nimport { SankeyTruncationModeContext } from '../context/SankeyTruncationMode.context.js';\nimport { useSankeyActiveHighlight } from '../store/selectors.js';\nimport type {\n  SankeyLayoutModel,\n  SankeyLayoutNode,\n} from '../types/sankey-internal.js';\n\ntype SankeyLabelZone = 'left' | 'inside' | 'right';\n\ntype NodeWithGeometry = SankeyLayoutNode & {\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n};\n\nfunction hasGeometry(node: SankeyLayoutNode): node is NodeWithGeometry {\n  return (\n    node.x0 !== undefined &&\n    node.x1 !== undefined &&\n    node.y0 !== undefined &&\n    node.y1 !== undefined\n  );\n}\n\ninterface SankeyLabelOverlayProps {\n  zone: SankeyLabelZone;\n  layout: SankeyLayoutModel;\n  maxWidth?: number;\n}\n\nfunction getVisualColumns(nodes: NodeWithGeometry[]): number[] {\n  return [...new Set(nodes.map((n) => n.x0))].sort((a, b) => a - b);\n}\n\nfunction getInsideLabelMaxWidth(\n  node: NodeWithGeometry,\n  visualColumns: number[],\n): number {\n  const nextColX0 = visualColumns.find((x) => x > node.x0) ?? node.x1;\n  return Math.max(0, (nextColX0 - node.x1) * INSIDE_LABEL_WIDTH_RATIO);\n}\n\nfunction getMaxLabelWidth(columnNodes: SankeyLayoutNode[]): number {\n  let max = 0;\n  for (const node of columnNodes) {\n    const w = calculateWidth(\n      node.label ?? '',\n      charsFontWidth14pixelsSize500Map,\n    );\n    if (w > max) {\n      max = w;\n    }\n  }\n  return Math.ceil(max);\n}\n\nfunction renderSideLabels(\n  columnNodes: NodeWithGeometry[],\n  labelClassName: string,\n  truncationMode: TruncationMode,\n  isNodeDimmed: (node: SankeyLayoutNode) => boolean,\n  maxWidth?: number,\n) {\n  const measuredWidth = getMaxLabelWidth(columnNodes);\n  const effectiveWidth =\n    maxWidth !== undefined && maxWidth > 0\n      ? Math.min(measuredWidth, maxWidth)\n      : measuredWidth;\n\n  return (\n    <div className={sideLabelContainer} style={{ width: effectiveWidth }}>\n      {columnNodes.map((node) => (\n        <div\n          key={node.id}\n          className={sideLabelPositioner}\n          style={{ top: node.y0, height: node.y1 - node.y0 }}\n        >\n          <SankeyNodeLabel\n            label={node.label ?? ''}\n            width={effectiveWidth}\n            className={labelClassName}\n            truncationMode={truncationMode}\n            dimmed={isNodeDimmed(node)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function SankeyLabelOverlay({\n  zone,\n  layout,\n  maxWidth,\n}: Readonly<SankeyLabelOverlayProps>) {\n  const truncationMode = useContext(SankeyTruncationModeContext);\n  const activeSet = useSankeyActiveHighlight();\n  const validNodes = layout.nodes.filter(hasGeometry);\n\n  const connectedNodes = useMemo(\n    () => (activeSet ? new Set(activeSet.nodes) : undefined),\n    [activeSet],\n  );\n\n  const isNodeDimmed = (node: SankeyLayoutNode): boolean =>\n    connectedNodes !== undefined && !connectedNodes.has(node);\n\n  if (validNodes.length === 0) {\n    return null;\n  }\n\n  const visualColumns = getVisualColumns(validNodes);\n  const leftX0 = visualColumns[0];\n  const rightX0 = visualColumns[visualColumns.length - 1];\n  const hasMultipleColumns = visualColumns.length > 1;\n\n  if (zone === 'left') {\n    const columnNodes = validNodes.filter((n) => n.x0 === leftX0);\n    if (columnNodes.length === 0) {\n      return null;\n    }\n    return renderSideLabels(\n      columnNodes,\n      leftZoneLabel,\n      truncationMode,\n      isNodeDimmed,\n      maxWidth,\n    );\n  }\n\n  if (zone === 'right') {\n    if (!hasMultipleColumns) {\n      return null;\n    }\n    const lastColumnNodes = validNodes.filter((n) => n.x0 === rightX0);\n    if (lastColumnNodes.length === 0) {\n      return null;\n    }\n    return renderSideLabels(\n      lastColumnNodes,\n      rightZoneLabel,\n      truncationMode,\n      isNodeDimmed,\n      maxWidth,\n    );\n  }\n\n  const middleNodes = validNodes.filter(\n    (n) => n.x0 !== leftX0 && (!hasMultipleColumns || n.x0 !== rightX0),\n  );\n\n  if (middleNodes.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={insideZoneOverlay}>\n      {middleNodes.map((node) => {\n        const insideWidth = getInsideLabelMaxWidth(node, visualColumns);\n        return (\n          <div\n            key={node.id}\n            className={insideLabelPositioner}\n            style={{\n              top: node.y0,\n              height: node.y1 - node.y0,\n              left: node.x1 + INSIDE_LABEL_PADDING,\n              maxWidth: insideWidth,\n            }}\n          >\n            <SankeyNodeLabel\n              label={node.label ?? ''}\n              width={insideWidth}\n              className={insideZoneLabel}\n              truncationMode={truncationMode}\n              dimmed={isNodeDimmed(node)}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSankeyLabelOverlay['displayName'] = 'SankeyLabelOverlay';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.sty.js

@@ -1,13 +1,15 @@
 import "./SankeyLabelOverlay.css";
-var insideLabelPositioner = "_1wbek5q5-3-12-1";
-var insideZoneLabel = "_1wbek5q6-3-12-1";
-var insideZoneOverlay = "_1wbek5q4-3-12-1";
-var interactiveLabel = "_1wbek5q7-3-12-1";
-var leftZoneLabel = "_1wbek5q2-3-12-1";
-var rightZoneLabel = "_1wbek5q3-3-12-1";
-var sideLabelContainer = "_1wbek5q0-3-12-1";
-var sideLabelPositioner = "_1wbek5q1-3-12-1";
+var dimmedLabel = "_1wbek5q8-3-13-0";
+var insideLabelPositioner = "_1wbek5q5-3-13-0";
+var insideZoneLabel = "_1wbek5q6-3-13-0";
+var insideZoneOverlay = "_1wbek5q4-3-13-0";
+var interactiveLabel = "_1wbek5q7-3-13-0";
+var leftZoneLabel = "_1wbek5q2-3-13-0";
+var rightZoneLabel = "_1wbek5q3-3-13-0";
+var sideLabelContainer = "_1wbek5q0-3-13-0";
+var sideLabelPositioner = "_1wbek5q1-3-13-0";
 export {
+  dimmedLabel,
   insideLabelPositioner,
   insideZoneLabel,
   insideZoneOverlay,

package/esm/charts/sankey-chart/components/SankeyLabelOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/components/SankeyLabelOverlay.css.ts"],
-  "sourcesContent": ["import './SankeyLabelOverlay.css';\nexport var insideLabelPositioner = '_1wbek5q5-3-12-1';\nexport var insideZoneLabel = '_1wbek5q6-3-12-1';\nexport var insideZoneOverlay = '_1wbek5q4-3-12-1';\nexport var interactiveLabel = '_1wbek5q7-3-12-1';\nexport var leftZoneLabel = '_1wbek5q2-3-12-1';\nexport var rightZoneLabel = '_1wbek5q3-3-12-1';\nexport var sideLabelContainer = '_1wbek5q0-3-12-1';\nexport var sideLabelPositioner = '_1wbek5q1-3-12-1';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;AACzB,IAAI,sBAAsB;",
+  "sourcesContent": ["import './SankeyLabelOverlay.css';\nexport var dimmedLabel = '_1wbek5q8-3-13-0';\nexport var insideLabelPositioner = '_1wbek5q5-3-13-0';\nexport var insideZoneLabel = '_1wbek5q6-3-13-0';\nexport var insideZoneOverlay = '_1wbek5q4-3-13-0';\nexport var interactiveLabel = '_1wbek5q7-3-13-0';\nexport var leftZoneLabel = '_1wbek5q2-3-13-0';\nexport var rightZoneLabel = '_1wbek5q3-3-13-0';\nexport var sideLabelContainer = '_1wbek5q0-3-13-0';\nexport var sideLabelPositioner = '_1wbek5q1-3-13-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;AAClB,IAAI,wBAAwB;AAC5B,IAAI,kBAAkB;AACtB,IAAI,oBAAoB;AACxB,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;AACzB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/sankey-chart/components/SankeyNodeLabel.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { dimmedLabel, interactiveLabel } from "./SankeyLabelOverlay.sty.js";
+import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
+import { charsFontWidth14pixelsSize500Map } from "../../core/components/text-ellipsis/chars-font-width-map.js";
+import { truncateString } from "../../core/components/text-ellipsis/truncate-string.js";
+function SankeyNodeLabel({
+  label: fullLabel,
+  width,
+  className,
+  truncationMode,
+  dimmed
+}) {
+  const label = truncateString(
+    fullLabel,
+    width,
+    charsFontWidth14pixelsSize500Map,
+    truncationMode
+  );
+  const isTruncated = label !== fullLabel;
+  return /* @__PURE__ */ jsx(Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(
+        className,
+        isTruncated && interactiveLabel,
+        dimmed && dimmedLabel
+      ),
+      children: label
+    }
+  ) });
+}
+SankeyNodeLabel["displayName"] = "SankeyNodeLabel";
+export {
+  SankeyNodeLabel
+};
+//# sourceMappingURL=SankeyNodeLabel.js.map

package/esm/charts/sankey-chart/components/SankeyNodeLabel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/components/SankeyNodeLabel.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport { dimmedLabel, interactiveLabel } from './SankeyLabelOverlay.sty.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { charsFontWidth14pixelsSize500Map } from '../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../../core/components/text-ellipsis/truncate-string.js';\n\n/**\n * A single truncated node label wrapped in a tooltip. Shared by every label\n * zone so the truncation, tooltip, and dim/interactive class logic lives in one\n * place.\n */\nexport function SankeyNodeLabel({\n  label: fullLabel,\n  width,\n  className,\n  truncationMode,\n  dimmed,\n}: Readonly<{\n  label: string;\n  width: number;\n  className: string;\n  truncationMode: TruncationMode;\n  dimmed: boolean;\n}>) {\n  const label = truncateString(\n    fullLabel,\n    width,\n    charsFontWidth14pixelsSize500Map,\n    truncationMode,\n  );\n  const isTruncated = label !== fullLabel;\n\n  return (\n    <Tooltip text={fullLabel} disabled={!isTruncated}>\n      <span\n        className={clsx(\n          className,\n          isTruncated && interactiveLabel,\n          dimmed && dimmedLabel,\n        )}\n      >\n        {label}\n      </span>\n    </Tooltip>\n  );\n}\n\nSankeyNodeLabel['displayName'] = 'SankeyNodeLabel';\n"],
+  "mappings": "AAoCM;AApCN,OAAO,UAAU;AAEjB,SAAS,aAAa,wBAAwB;AAC9C,SAAS,eAAe;AAExB,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAOxB,SAAS,gBAAgB;AAAA,EAC9B,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMI;AACF,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,cAAc,UAAU;AAE9B,SACE,oBAAC,WAAQ,MAAM,WAAW,UAAU,CAAC,aACnC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe;AAAA,QACf,UAAU;AAAA,MACZ;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/components/SankeyOverlay.css

@@ -1,4 +1,4 @@
-._r8i5hk0-3-12-1 {
+._r8i5hk0-3-13-0 {
   position: absolute;
   inset: 0;
 }

package/esm/charts/sankey-chart/components/SankeyOverlay.js

@@ -10,9 +10,7 @@ function getHoverDebugAttributes(hovered) {
   }
   return {
     "data-hovered-type": hovered?.type,
-    "data-hovered-id": hovered && (hovered.type === "node" ? hovered.node.id : `${hovered.source.id}->${hovered.target.id}`),
-    "data-hovered-related-links": hovered?.type === "node" ? String(hovered.relatedLinks.length) : void 0,
-    "data-hovered-related": hovered?.type === "node" ? String(hovered.relatedNodes.length) : void 0
+    "data-hovered-id": hovered && (hovered.type === "node" ? hovered.nodeId : `${hovered.sourceId}->${hovered.targetId}:${hovered.linkIndex}`)
   };
 }
 function SankeyOverlay() {

package/esm/charts/sankey-chart/components/SankeyOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/components/SankeyOverlay.tsx"],
-  "sourcesContent": ["import { overlay as overlayClassName } from './SankeyOverlay.sty.js';\nimport { useOverlay } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSankeyOverlayEvents } from '../hooks/use-sankey-overlay-events.js';\nimport { useSankeyHoveredShape } from '../store/selectors.js';\n\nexport const SANKEY_OVERLAY_ARIA_LABEL = 'Sankey chart interaction overlay';\n\n/**\n * Exposes the hovered shape as `data-hovered-*` attributes so the dev-app\n * demo can read it via a `MutationObserver` without importing the\n * package-internal hover store. Stripped in production builds (dead-code\n * eliminated once bundlers inline `NODE_ENV`) so real consumers never see an\n * implicit, undocumented DOM contract on the shipped component.\n */\nfunction getHoverDebugAttributes(\n  hovered: ReturnType<typeof useSankeyHoveredShape>,\n) {\n  if (process.env.NODE_ENV === 'production') {\n    return undefined;\n  }\n\n  return {\n    'data-hovered-type': hovered?.type,\n    'data-hovered-id':\n      hovered &&\n      (hovered.type === 'node'\n        ? hovered.node.id\n        : `${hovered.source.id}->${hovered.target.id}`),\n    'data-hovered-related-links':\n      hovered?.type === 'node'\n        ? String(hovered.relatedLinks.length)\n        : undefined,\n    'data-hovered-related':\n      hovered?.type === 'node'\n        ? String(hovered.relatedNodes.length)\n        : undefined,\n  };\n}\n\nexport function SankeyOverlay() {\n  const overlay = useOverlay();\n  const eventHandlers = useSankeyOverlayEvents(overlay);\n  const hovered = useSankeyHoveredShape();\n  const hoverDebugAttributes = getHoverDebugAttributes(hovered);\n\n  return (\n    <div\n      className={overlayClassName}\n      ref={overlay.overlayRef}\n      role=\"graphics-symbol\"\n      aria-label={SANKEY_OVERLAY_ARIA_LABEL}\n      // TODO: Remove in APPDEV-19252\n      {...hoverDebugAttributes}\n      {...eventHandlers}\n    />\n  );\n}\n\nSankeyOverlay['displayName'] = 'SankeyOverlay';\n"],
-  "mappings": "AA8CI;AA9CJ,SAAS,WAAW,wBAAwB;AAC5C,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AAE/B,MAAM,4BAA4B;AASzC,SAAS,wBACP,SACA;AACA,MAAI,OAAuC;AACzC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,qBAAqB,SAAS;AAAA,IAC9B,mBACE,YACC,QAAQ,SAAS,SACd,QAAQ,KAAK,KACb,GAAG,QAAQ,OAAO,EAAE,KAAK,QAAQ,OAAO,EAAE;AAAA,IAChD,8BACE,SAAS,SAAS,SACd,OAAO,QAAQ,aAAa,MAAM,IAClC;AAAA,IACN,wBACE,SAAS,SAAS,SACd,OAAO,QAAQ,aAAa,MAAM,IAClC;AAAA,EACR;AACF;AAEO,SAAS,gBAAgB;AAC9B,QAAM,UAAU,WAAW;AAC3B,QAAM,gBAAgB,uBAAuB,OAAO;AACpD,QAAM,UAAU,sBAAsB;AACtC,QAAM,uBAAuB,wBAAwB,OAAO;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,KAAK,QAAQ;AAAA,MACb,MAAK;AAAA,MACL,cAAY;AAAA,MAEX,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,aAAa,IAAI;",
+  "sourcesContent": ["import { overlay as overlayClassName } from './SankeyOverlay.sty.js';\nimport { useOverlay } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSankeyOverlayEvents } from '../hooks/use-sankey-overlay-events.js';\nimport { useSankeyHoveredShape } from '../store/selectors.js';\n\nexport const SANKEY_OVERLAY_ARIA_LABEL = 'Sankey chart interaction overlay';\n\n/**\n * Exposes the hovered shape as `data-hovered-*` attributes so the dev-app\n * demo can read it via a `MutationObserver` without importing the\n * package-internal hover store. Stripped in production builds (dead-code\n * eliminated once bundlers inline `NODE_ENV`) so real consumers never see an\n * implicit, undocumented DOM contract on the shipped component.\n */\nfunction getHoverDebugAttributes(\n  hovered: ReturnType<typeof useSankeyHoveredShape>,\n) {\n  if (process.env.NODE_ENV === 'production') {\n    return undefined;\n  }\n\n  return {\n    'data-hovered-type': hovered?.type,\n    'data-hovered-id':\n      hovered &&\n      (hovered.type === 'node'\n        ? hovered.nodeId\n        : `${hovered.sourceId}->${hovered.targetId}:${hovered.linkIndex}`),\n  };\n}\n\nexport function SankeyOverlay() {\n  const overlay = useOverlay();\n  const eventHandlers = useSankeyOverlayEvents(overlay);\n  const hovered = useSankeyHoveredShape();\n  const hoverDebugAttributes = getHoverDebugAttributes(hovered);\n\n  return (\n    <div\n      className={overlayClassName}\n      ref={overlay.overlayRef}\n      role=\"graphics-symbol\"\n      aria-label={SANKEY_OVERLAY_ARIA_LABEL}\n      // TODO: Remove in APPDEV-19252\n      {...hoverDebugAttributes}\n      {...eventHandlers}\n    />\n  );\n}\n\nSankeyOverlay['displayName'] = 'SankeyOverlay';\n"],
+  "mappings": "AAsCI;AAtCJ,SAAS,WAAW,wBAAwB;AAC5C,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AAE/B,MAAM,4BAA4B;AASzC,SAAS,wBACP,SACA;AACA,MAAI,OAAuC;AACzC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,qBAAqB,SAAS;AAAA,IAC9B,mBACE,YACC,QAAQ,SAAS,SACd,QAAQ,SACR,GAAG,QAAQ,QAAQ,KAAK,QAAQ,QAAQ,IAAI,QAAQ,SAAS;AAAA,EACrE;AACF;AAEO,SAAS,gBAAgB;AAC9B,QAAM,UAAU,WAAW;AAC3B,QAAM,gBAAgB,uBAAuB,OAAO;AACpD,QAAM,UAAU,sBAAsB;AACtC,QAAM,uBAAuB,wBAAwB,OAAO;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,KAAK,QAAQ;AAAA,MACb,MAAK;AAAA,MACL,cAAY;AAAA,MAEX,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,cAAc,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/sankey-chart/components/SankeyOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./SankeyOverlay.css";
-var overlay = "_r8i5hk0-3-12-1";
+var overlay = "_r8i5hk0-3-13-0";
 export {
   overlay
 };

package/esm/charts/sankey-chart/components/SankeyOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/components/SankeyOverlay.css.ts"],
-  "sourcesContent": ["import './SankeyOverlay.css';\nexport var overlay = '_r8i5hk0-3-12-1';"],
+  "sourcesContent": ["import './SankeyOverlay.css';\nexport var overlay = '_r8i5hk0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/sankey-chart/constants.js

@@ -1,8 +1,11 @@
 import { TRUNCATION_MODE } from "../core/constants.js";
 const DISPLAY_NAME = "SankeyChart";
-const INITIAL_HOVER_STATE = { hovered: void 0 };
+const INITIAL_SANKEY_STATE = {
+  hovered: void 0,
+  selected: void 0
+};
 const DEFAULT_TRUNCATION_MODE = TRUNCATION_MODE.Middle;
-const DEFAULT_NODE_WIDTH = 24;
+const DEFAULT_NODE_WIDTH = 20;
 const DEFAULT_NODE_PADDING = 20;
 const LAYOUT_MARGIN = 4;
 const FALLBACK_NODE_COLOR = "#888888";
@@ -10,20 +13,22 @@ const NODE_BORDER_RADIUS = 4;
 const INSIDE_LABEL_PADDING = 8;
 const INSIDE_LABEL_WIDTH_RATIO = 0.8;
 const MAX_SIDE_LABEL_WIDTH_RATIO = 0.2;
-const LINK_OPACITY_LIGHT = 0.4;
-const LINK_OPACITY_DARK = 0.5;
+const DEFAULT_LINK_OPACITY = 0.3;
+const HIGHLIGHT_LINK_OPACITY = 0.6;
+const DIM_CANVAS_ALPHA = 0.5;
 export {
+  DEFAULT_LINK_OPACITY,
   DEFAULT_NODE_PADDING,
   DEFAULT_NODE_WIDTH,
   DEFAULT_TRUNCATION_MODE,
+  DIM_CANVAS_ALPHA,
   DISPLAY_NAME,
   FALLBACK_NODE_COLOR,
-  INITIAL_HOVER_STATE,
+  HIGHLIGHT_LINK_OPACITY,
+  INITIAL_SANKEY_STATE,
   INSIDE_LABEL_PADDING,
   INSIDE_LABEL_WIDTH_RATIO,
   LAYOUT_MARGIN,
-  LINK_OPACITY_DARK,
-  LINK_OPACITY_LIGHT,
   MAX_SIDE_LABEL_WIDTH_RATIO,
   NODE_BORDER_RADIUS
 };

package/esm/charts/sankey-chart/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/sankey-chart/constants.ts"],
-  "sourcesContent": ["import type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';\nimport { TRUNCATION_MODE } from '../core/constants.js';\nimport type { SankeyHoverState } from './types/sankey-hover.js';\n\nexport const DISPLAY_NAME = 'SankeyChart';\n\nexport const INITIAL_HOVER_STATE: SankeyHoverState = { hovered: undefined };\n\nexport const DEFAULT_TRUNCATION_MODE: TruncationMode = TRUNCATION_MODE.Middle;\n\n/** d3-sankey node geometry defaults (visual tuning deferred). */\nexport const DEFAULT_NODE_WIDTH = 24;\nexport const DEFAULT_NODE_PADDING = 20;\nexport const LAYOUT_MARGIN = 4;\n\nexport const FALLBACK_NODE_COLOR = '#888888';\nexport const NODE_BORDER_RADIUS = 4;\n\nexport const INSIDE_LABEL_PADDING = 8;\nexport const INSIDE_LABEL_WIDTH_RATIO = 0.8;\nexport const MAX_SIDE_LABEL_WIDTH_RATIO = 0.2;\n\nexport const LINK_OPACITY_LIGHT = 0.4;\nexport const LINK_OPACITY_DARK = 0.5;\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAGzB,MAAM,eAAe;AAErB,MAAM,sBAAwC,EAAE,SAAS,OAAU;AAEnE,MAAM,0BAA0C,gBAAgB;AAGhE,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AAEtB,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,uBAAuB;AAC7B,MAAM,2BAA2B;AACjC,MAAM,6BAA6B;AAEnC,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;",
+  "sourcesContent": ["import type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';\nimport { TRUNCATION_MODE } from '../core/constants.js';\nimport type { SankeyState } from './types/sankey-state.js';\n\nexport const DISPLAY_NAME = 'SankeyChart';\n\nexport const INITIAL_SANKEY_STATE: SankeyState = {\n  hovered: undefined,\n  selected: undefined,\n};\n\nexport const DEFAULT_TRUNCATION_MODE: TruncationMode = TRUNCATION_MODE.Middle;\n\n/** d3-sankey node geometry defaults (visual tuning deferred). */\nexport const DEFAULT_NODE_WIDTH = 20;\nexport const DEFAULT_NODE_PADDING = 20;\nexport const LAYOUT_MARGIN = 4;\n\nexport const FALLBACK_NODE_COLOR = '#888888';\nexport const NODE_BORDER_RADIUS = 4;\n\nexport const INSIDE_LABEL_PADDING = 8;\nexport const INSIDE_LABEL_WIDTH_RATIO = 0.8;\nexport const MAX_SIDE_LABEL_WIDTH_RATIO = 0.2;\n\nexport const DEFAULT_LINK_OPACITY = 0.3;\nexport const HIGHLIGHT_LINK_OPACITY = 0.6;\nexport const DIM_CANVAS_ALPHA = 0.5;\n"],
+  "mappings": "AACA,SAAS,uBAAuB;AAGzB,MAAM,eAAe;AAErB,MAAM,uBAAoC;AAAA,EAC/C,SAAS;AAAA,EACT,UAAU;AACZ;AAEO,MAAM,0BAA0C,gBAAgB;AAGhE,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AAEtB,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,uBAAuB;AAC7B,MAAM,2BAA2B;AACjC,MAAM,6BAA6B;AAEnC,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAC/B,MAAM,mBAAmB;",
   "names": []
 }

package/esm/charts/sankey-chart/context/SankeyFormatter.context.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+const SankeyFormatterContext = createContext(
+  String
+);
+export {
+  SankeyFormatterContext
+};
+//# sourceMappingURL=SankeyFormatter.context.js.map

package/esm/charts/sankey-chart/context/SankeyFormatter.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/context/SankeyFormatter.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nexport const SankeyFormatterContext = createContext<(value: number) => string>(\n  String,\n);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAEvB,MAAM,yBAAyB;AAAA,EACpC;AACF;",
+  "names": []
+}

package/esm/charts/sankey-chart/context/SankeyHighlight.context.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const SankeyHighlightContext = createContext(void 0);
+SankeyHighlightContext["displayName"] = "SankeyHighlightContext";
+export {
+  SankeyHighlightContext
+};
+//# sourceMappingURL=SankeyHighlight.context.js.map

package/esm/charts/sankey-chart/context/SankeyHighlight.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/context/SankeyHighlight.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { ActiveConnectedSet } from '../utils/get-active-connected-set.js';\n\n/**\n * The active highlight set \u2014 the nodes and links to keep emphasized while every\n * other shape dims \u2014 derived once from the store's `hovered`/`selected` identity\n * against the current layout, then shared with every consumer (canvas draw and\n * label overlays). `undefined` means no active highlight (nothing dims).\n *\n * This is derived state, not source state: it is recomputed from the current\n * layout on every render rather than stored, so it never holds references to a\n * stale layout graph after a resize or data change.\n */\nexport const SankeyHighlightContext = createContext<\n  ActiveConnectedSet | undefined\n>(undefined);\n\nSankeyHighlightContext['displayName'] = 'SankeyHighlightContext';\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAcvB,MAAM,yBAAyB,cAEpC,MAAS;AAEX,uBAAuB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/context/SankeyStore.context.js

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { createStore } from "../../../core/store/store.js";
+import { INITIAL_SANKEY_STATE } from "../constants.js";
+const SankeyStoreContext = createContext(
+  createStore(INITIAL_SANKEY_STATE)
+);
+SankeyStoreContext["displayName"] = "SankeyStoreContext";
+export {
+  SankeyStoreContext
+};
+//# sourceMappingURL=SankeyStore.context.js.map

package/esm/charts/sankey-chart/context/SankeyStore.context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/context/SankeyStore.context.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport { createStore, type Store } from '../../../core/store/store.js';\nimport { INITIAL_SANKEY_STATE } from '../constants.js';\nimport type { SankeyState } from '../types/sankey-state.js';\n\nexport const SankeyStoreContext = createContext<Store<SankeyState>>(\n  createStore<SankeyState>(INITIAL_SANKEY_STATE),\n);\n\nSankeyStoreContext['displayName'] = 'SankeyStoreContext';\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAE9B,SAAS,mBAA+B;AACxC,SAAS,4BAA4B;AAG9B,MAAM,qBAAqB;AAAA,EAChC,YAAyB,oBAAoB;AAC/C;AAEA,mBAAmB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/sankey-chart/hooks/use-draw-sankey.js

@@ -1,18 +1,43 @@
 import { useCallback } from "react";
 import { drawLinks } from "./draw-links.js";
 import { drawNodes } from "./draw-nodes.js";
-import { useCurrentTheme } from "../../../core/hooks/useCurrentTheme.js";
 import { useCanvas } from "../../core/components/canvas/hooks/useCanvas.js";
-import { LINK_OPACITY_DARK, LINK_OPACITY_LIGHT } from "../constants.js";
-function useDrawSankey(layout, nodeColors) {
-  const theme = useCurrentTheme();
+import { DEFAULT_LINK_OPACITY, HIGHLIGHT_LINK_OPACITY } from "../constants.js";
+import { useSankeyActiveHighlight } from "../store/selectors.js";
+function clearOverlayCanvas(overlayCanvas) {
+  const ctx = overlayCanvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  ctx.save();
+  ctx.resetTransform();
+  ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
+  ctx.restore();
+}
+function useDrawSankey(layout, nodeColors, overlayCanvasRef) {
+  const activeSet = useSankeyActiveHighlight();
   const draw = useCallback(
     (ctx) => {
-      const linkOpacity = theme === "dark" ? LINK_OPACITY_DARK : LINK_OPACITY_LIGHT;
-      drawLinks(ctx, layout.links, nodeColors, linkOpacity);
+      const overlayCanvas = overlayCanvasRef.current;
+      drawLinks(ctx, layout.links, nodeColors, DEFAULT_LINK_OPACITY);
       drawNodes(ctx, layout.nodes, nodeColors);
+      if (activeSet && overlayCanvas) {
+        clearOverlayCanvas(overlayCanvas);
+        const overlayCtx = overlayCanvas.getContext("2d");
+        if (overlayCtx) {
+          drawLinks(
+            overlayCtx,
+            activeSet.links,
+            nodeColors,
+            HIGHLIGHT_LINK_OPACITY
+          );
+          drawNodes(overlayCtx, activeSet.nodes, nodeColors);
+        }
+      } else if (overlayCanvas) {
+        clearOverlayCanvas(overlayCanvas);
+      }
     },
-    [layout, nodeColors, theme]
+    [layout, nodeColors, activeSet, overlayCanvasRef]
   );
   useCanvas("sankey", draw);
 }

package/esm/charts/sankey-chart/hooks/use-draw-sankey.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/sankey-chart/hooks/use-draw-sankey.ts"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { drawLinks } from './draw-links.js';\nimport { drawNodes } from './draw-nodes.js';\nimport { useCurrentTheme } from '../../../core/hooks/useCurrentTheme.js';\nimport { useCanvas } from '../../core/components/canvas/hooks/useCanvas.js';\nimport { LINK_OPACITY_DARK, LINK_OPACITY_LIGHT } from '../constants.js';\nimport type { SankeyLayoutModel } from '../types/sankey-internal.js';\n\nexport function useDrawSankey(\n  layout: SankeyLayoutModel,\n  nodeColors: Map<string, string>,\n): void {\n  const theme = useCurrentTheme();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      const linkOpacity =\n        theme === 'dark' ? LINK_OPACITY_DARK : LINK_OPACITY_LIGHT;\n      drawLinks(ctx, layout.links, nodeColors, linkOpacity);\n      drawNodes(ctx, layout.nodes, nodeColors);\n    },\n    [layout, nodeColors, theme],\n  );\n\n  useCanvas('sankey', draw);\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,0BAA0B;AAG/C,SAAS,cACd,QACA,YACM;AACN,QAAM,QAAQ,gBAAgB;AAE9B,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,YAAM,cACJ,UAAU,SAAS,oBAAoB;AACzC,gBAAU,KAAK,OAAO,OAAO,YAAY,WAAW;AACpD,gBAAU,KAAK,OAAO,OAAO,UAAU;AAAA,IACzC;AAAA,IACA,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,YAAU,UAAU,IAAI;AAC1B;",
+  "sourcesContent": ["import { useCallback, type RefObject } from 'react';\n\nimport { drawLinks } from './draw-links.js';\nimport { drawNodes } from './draw-nodes.js';\nimport { useCanvas } from '../../core/components/canvas/hooks/useCanvas.js';\nimport { DEFAULT_LINK_OPACITY, HIGHLIGHT_LINK_OPACITY } from '../constants.js';\nimport { useSankeyActiveHighlight } from '../store/selectors.js';\nimport type { SankeyLayoutModel } from '../types/sankey-internal.js';\n\nfunction clearOverlayCanvas(overlayCanvas: HTMLCanvasElement): void {\n  const ctx = overlayCanvas.getContext('2d');\n  if (!ctx) {\n    return;\n  }\n  ctx.save();\n  ctx.resetTransform();\n  ctx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);\n  ctx.restore();\n}\n\nexport function useDrawSankey(\n  layout: SankeyLayoutModel,\n  nodeColors: Map<string, string>,\n  overlayCanvasRef: RefObject<HTMLCanvasElement | null>,\n): void {\n  const activeSet = useSankeyActiveHighlight();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      const overlayCanvas = overlayCanvasRef.current;\n\n      drawLinks(ctx, layout.links, nodeColors, DEFAULT_LINK_OPACITY);\n      drawNodes(ctx, layout.nodes, nodeColors);\n\n      if (activeSet && overlayCanvas) {\n        clearOverlayCanvas(overlayCanvas);\n        const overlayCtx = overlayCanvas.getContext('2d');\n        if (overlayCtx) {\n          drawLinks(\n            overlayCtx,\n            activeSet.links,\n            nodeColors,\n            HIGHLIGHT_LINK_OPACITY,\n          );\n          drawNodes(overlayCtx, activeSet.nodes, nodeColors);\n        }\n      } else if (overlayCanvas) {\n        clearOverlayCanvas(overlayCanvas);\n      }\n    },\n    [layout, nodeColors, activeSet, overlayCanvasRef],\n  );\n\n  useCanvas('sankey', draw);\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmC;AAE5C,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB,8BAA8B;AAC7D,SAAS,gCAAgC;AAGzC,SAAS,mBAAmB,eAAwC;AAClE,QAAM,MAAM,cAAc,WAAW,IAAI;AACzC,MAAI,CAAC,KAAK;AACR;AAAA,EACF;AACA,MAAI,KAAK;AACT,MAAI,eAAe;AACnB,MAAI,UAAU,GAAG,GAAG,cAAc,OAAO,cAAc,MAAM;AAC7D,MAAI,QAAQ;AACd;AAEO,SAAS,cACd,QACA,YACA,kBACM;AACN,QAAM,YAAY,yBAAyB;AAE3C,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,YAAM,gBAAgB,iBAAiB;AAEvC,gBAAU,KAAK,OAAO,OAAO,YAAY,oBAAoB;AAC7D,gBAAU,KAAK,OAAO,OAAO,UAAU;AAEvC,UAAI,aAAa,eAAe;AAC9B,2BAAmB,aAAa;AAChC,cAAM,aAAa,cAAc,WAAW,IAAI;AAChD,YAAI,YAAY;AACd;AAAA,YACE;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,UACF;AACA,oBAAU,YAAY,UAAU,OAAO,UAAU;AAAA,QACnD;AAAA,MACF,WAAW,eAAe;AACxB,2BAAmB,aAAa;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,YAAY,WAAW,gBAAgB;AAAA,EAClD;AAEA,YAAU,UAAU,IAAI;AAC1B;",
   "names": []
 }

package/esm/charts/sankey-chart/hooks/use-sankey-formatter.js

@@ -0,0 +1,9 @@
+import { getFormatter } from "../../core/utils/get-formatter.js";
+function useSankeyFormatter(formatter, unit) {
+  const resolved = getFormatter(formatter);
+  return (value) => resolved(value, unit);
+}
+export {
+  useSankeyFormatter
+};
+//# sourceMappingURL=use-sankey-formatter.js.map

package/esm/charts/sankey-chart/hooks/use-sankey-formatter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/sankey-chart/hooks/use-sankey-formatter.ts"],
+  "sourcesContent": ["import type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { ChartUnit } from '../../core/types/chart-unit.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { getFormatter } from '../../core/utils/get-formatter.js';\n\nexport function useSankeyFormatter(\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>,\n  unit?: ChartUnit,\n): (value: number) => string {\n  const resolved = getFormatter(formatter);\n  return (value: number) => resolved(value, unit);\n}\n"],
+  "mappings": "AAQA,SAAS,oBAAoB;AAEtB,SAAS,mBACd,WACA,MAC2B;AAC3B,QAAM,WAAW,aAAa,SAAS;AACvC,SAAO,CAAC,UAAkB,SAAS,OAAO,IAAI;AAChD;",
+  "names": []
+}