@dynatrace/strato-components 3.12.1 → 3.13.0

package/charts/sankey-chart/components/SankeyLabelOverlay.css

@@ -1,16 +1,16 @@
-._1wbek5q0-3-12-1 {
+._1wbek5q0-3-13-0 {
   position: relative;
   height: 100%;
   pointer-events: none;
 }
-._1wbek5q1-3-12-1 {
+._1wbek5q1-3-13-0 {
   position: absolute;
   left: 0;
   right: 0;
   display: flex;
   align-items: center;
 }
-._1wbek5q2-3-12-1 {
+._1wbek5q2-3-13-0 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -25,7 +25,7 @@
   width: 100%;
   text-align: right;
 }
-._1wbek5q3-3-12-1 {
+._1wbek5q3-3-13-0 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -39,19 +39,19 @@
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   width: 100%;
 }
-._1wbek5q4-3-12-1 {
+._1wbek5q4-3-13-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._1wbek5q5-3-12-1 {
+._1wbek5q5-3-13-0 {
   position: absolute;
   display: flex;
   align-items: center;
   pointer-events: none;
 }
-._1wbek5q6-3-12-1 {
+._1wbek5q6-3-13-0 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -64,11 +64,15 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   max-width: 100%;
-  -webkit-text-stroke: 2px var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
+  -webkit-text-stroke: 3px var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
   paint-order: stroke fill;
+  padding-left: 1px;
 }
-._1wbek5q7-3-12-1 {
+._1wbek5q7-3-13-0 {
   position: relative;
   pointer-events: auto;
   z-index: 1;
+}
+._1wbek5q8-3-13-0 {
+  opacity: 0.3;
 }

package/charts/sankey-chart/components/SankeyLabelOverlay.css.d.ts

@@ -6,4 +6,5 @@ export declare const insideZoneOverlay: string;
 export declare const insideLabelPositioner: string;
 export declare const insideZoneLabel: string;
 export declare const interactiveLabel: string;
+export declare const dimmedLabel: string;
 //# sourceMappingURL=SankeyLabelOverlay.css.d.ts.map

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

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SankeyLabelOverlay_exports = {};
 __export(SankeyLabelOverlay_exports, {
@@ -31,14 +21,14 @@ __export(SankeyLabelOverlay_exports, {
 });
 module.exports = __toCommonJS(SankeyLabelOverlay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_SankeyLabelOverlay_css = require("./SankeyLabelOverlay.sty.js");
-var import_Tooltip = require("../../../overlays/tooltip/Tooltip.js");
+var import_SankeyNodeLabel = require("./SankeyNodeLabel.js");
 var import_chars_font_width_map = require("../../core/components/text-ellipsis/chars-font-width-map.js");
 var import_truncate_string = require("../../core/components/text-ellipsis/truncate-string.js");
 var import_constants = require("../constants.js");
 var import_SankeyTruncationMode_context = require("../context/SankeyTruncationMode.context.js");
+var import_selectors = require("../store/selectors.js");
 function hasGeometry(node) {
   return node.x0 !== void 0 && node.x1 !== void 0 && node.y0 !== void 0 && node.y1 !== void 0;
 }
@@ -62,37 +52,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__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyLabelOverlay_css.sideLabelContainer, style: { width: effectiveWidth }, children: columnNodes.map((node) => {
-    const fullLabel = node.label ?? "";
-    const label = (0, import_truncate_string.truncateString)(
-      fullLabel,
-      effectiveWidth,
-      import_chars_font_width_map.charsFontWidth14pixelsSize500Map,
-      truncationMode
-    );
-    const isTruncated = label !== fullLabel;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: import_SankeyLabelOverlay_css.sideLabelPositioner,
-        style: { top: node.y0, height: node.y1 - node.y0 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: (0, import_clsx.default)(
-              labelClassName,
-              isTruncated && import_SankeyLabelOverlay_css.interactiveLabel
-            ),
-            children: label
-          }
-        ) })
-      },
-      node.id
-    );
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyLabelOverlay_css.sideLabelContainer, style: { width: effectiveWidth }, children: columnNodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: import_SankeyLabelOverlay_css.sideLabelPositioner,
+      style: { top: node.y0, height: node.y1 - node.y0 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_SankeyNodeLabel.SankeyNodeLabel,
+        {
+          label: node.label ?? "",
+          width: effectiveWidth,
+          className: labelClassName,
+          truncationMode,
+          dimmed: isNodeDimmed(node)
+        }
+      )
+    },
+    node.id
+  )) });
 }
 function SankeyLabelOverlay({
   zone,
@@ -100,7 +80,13 @@ function SankeyLabelOverlay({
   maxWidth
 }) {
   const truncationMode = (0, import_react.useContext)(import_SankeyTruncationMode_context.SankeyTruncationModeContext);
+  const activeSet = (0, import_selectors.useSankeyActiveHighlight)();
   const validNodes = layout.nodes.filter(hasGeometry);
+  const connectedNodes = (0, import_react.useMemo)(
+    () => activeSet ? new Set(activeSet.nodes) : void 0,
+    [activeSet]
+  );
+  const isNodeDimmed = (node) => connectedNodes !== void 0 && !connectedNodes.has(node);
   if (validNodes.length === 0) {
     return null;
   }
@@ -117,6 +103,7 @@ function SankeyLabelOverlay({
       columnNodes,
       import_SankeyLabelOverlay_css.leftZoneLabel,
       truncationMode,
+      isNodeDimmed,
       maxWidth
     );
   }
@@ -132,6 +119,7 @@ function SankeyLabelOverlay({
       lastColumnNodes,
       import_SankeyLabelOverlay_css.rightZoneLabel,
       truncationMode,
+      isNodeDimmed,
       maxWidth
     );
   }
@@ -142,36 +130,27 @@ function SankeyLabelOverlay({
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_SankeyLabelOverlay_css.insideZoneOverlay, children: middleNodes.map((node) => {
-    const nodeHeight = node.y1 - node.y0;
     const insideWidth = getInsideLabelMaxWidth(node, visualColumns);
-    const fullLabel = node.label ?? "";
-    const label = (0, import_truncate_string.truncateString)(
-      fullLabel,
-      insideWidth,
-      import_chars_font_width_map.charsFontWidth14pixelsSize500Map,
-      truncationMode
-    );
-    const isTruncated = label !== fullLabel;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         className: import_SankeyLabelOverlay_css.insideLabelPositioner,
         style: {
           top: node.y0,
-          height: nodeHeight,
+          height: node.y1 - node.y0,
           left: node.x1 + import_constants.INSIDE_LABEL_PADDING,
           maxWidth: insideWidth
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_SankeyNodeLabel.SankeyNodeLabel,
           {
-            className: (0, import_clsx.default)(
-              import_SankeyLabelOverlay_css.insideZoneLabel,
-              isTruncated && import_SankeyLabelOverlay_css.interactiveLabel
-            ),
-            children: label
+            label: node.label ?? "",
+            width: insideWidth,
+            className: import_SankeyLabelOverlay_css.insideZoneLabel,
+            truncationMode,
+            dimmed: isNodeDimmed(node)
           }
-        ) })
+        )
       },
       node.id
     );

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

@@ -17,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SankeyLabelOverlay_css_exports = {};
 __export(SankeyLabelOverlay_css_exports, {
+  dimmedLabel: () => dimmedLabel,
   insideLabelPositioner: () => insideLabelPositioner,
   insideZoneLabel: () => insideZoneLabel,
   insideZoneOverlay: () => insideZoneOverlay,
@@ -28,11 +29,12 @@ __export(SankeyLabelOverlay_css_exports, {
 });
 module.exports = __toCommonJS(SankeyLabelOverlay_css_exports);
 var import_SankeyLabelOverlay_css_ts_vanilla = require("./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";

package/charts/sankey-chart/components/SankeyNodeLabel.d.ts

@@ -0,0 +1,17 @@
+import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
+/**
+ * A single truncated node label wrapped in a tooltip. Shared by every label
+ * zone so the truncation, tooltip, and dim/interactive class logic lives in one
+ * place.
+ */
+export declare function SankeyNodeLabel({ label: fullLabel, width, className, truncationMode, dimmed, }: Readonly<{
+    label: string;
+    width: number;
+    className: string;
+    truncationMode: TruncationMode;
+    dimmed: boolean;
+}>): import("react").JSX.Element;
+export declare namespace SankeyNodeLabel {
+    var displayName: string;
+}
+//# sourceMappingURL=SankeyNodeLabel.d.ts.map

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

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyNodeLabel_exports = {};
+__export(SankeyNodeLabel_exports, {
+  SankeyNodeLabel: () => SankeyNodeLabel
+});
+module.exports = __toCommonJS(SankeyNodeLabel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_SankeyLabelOverlay_css = require("./SankeyLabelOverlay.sty.js");
+var import_Tooltip = require("../../../overlays/tooltip/Tooltip.js");
+var import_chars_font_width_map = require("../../core/components/text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../core/components/text-ellipsis/truncate-string.js");
+function SankeyNodeLabel({
+  label: fullLabel,
+  width,
+  className,
+  truncationMode,
+  dimmed
+}) {
+  const label = (0, import_truncate_string.truncateString)(
+    fullLabel,
+    width,
+    import_chars_font_width_map.charsFontWidth14pixelsSize500Map,
+    truncationMode
+  );
+  const isTruncated = label !== fullLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: fullLabel, disabled: !isTruncated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: (0, import_clsx.default)(
+        className,
+        isTruncated && import_SankeyLabelOverlay_css.interactiveLabel,
+        dimmed && import_SankeyLabelOverlay_css.dimmedLabel
+      ),
+      children: label
+    }
+  ) });
+}
+SankeyNodeLabel["displayName"] = "SankeyNodeLabel";

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

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

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

@@ -33,9 +33,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/charts/sankey-chart/components/SankeyOverlay.sty.js

@@ -21,4 +21,4 @@ __export(SankeyOverlay_css_exports, {
 });
 module.exports = __toCommonJS(SankeyOverlay_css_exports);
 var import_SankeyOverlay_css_ts_vanilla = require("./SankeyOverlay.css");
-var overlay = "_r8i5hk0-3-12-1";
+var overlay = "_r8i5hk0-3-13-0";

package/charts/sankey-chart/constants.d.ts

@@ -1,10 +1,10 @@
 import type { TruncationMode } from '../../typography/text-ellipsis/TextEllipsis.js';
-import type { SankeyHoverState } from './types/sankey-hover.js';
+import type { SankeyState } from './types/sankey-state.js';
 export declare const DISPLAY_NAME = "SankeyChart";
-export declare const INITIAL_HOVER_STATE: SankeyHoverState;
+export declare const INITIAL_SANKEY_STATE: SankeyState;
 export declare const DEFAULT_TRUNCATION_MODE: TruncationMode;
 /** d3-sankey node geometry defaults (visual tuning deferred). */
-export declare const DEFAULT_NODE_WIDTH = 24;
+export declare const DEFAULT_NODE_WIDTH = 20;
 export declare const DEFAULT_NODE_PADDING = 20;
 export declare const LAYOUT_MARGIN = 4;
 export declare const FALLBACK_NODE_COLOR = "#888888";
@@ -12,6 +12,7 @@ export declare const NODE_BORDER_RADIUS = 4;
 export declare const INSIDE_LABEL_PADDING = 8;
 export declare const INSIDE_LABEL_WIDTH_RATIO = 0.8;
 export declare const MAX_SIDE_LABEL_WIDTH_RATIO = 0.2;
-export declare const LINK_OPACITY_LIGHT = 0.4;
-export declare const LINK_OPACITY_DARK = 0.5;
+export declare const DEFAULT_LINK_OPACITY = 0.3;
+export declare const HIGHLIGHT_LINK_OPACITY = 0.6;
+export declare const DIM_CANVAS_ALPHA = 0.5;
 //# sourceMappingURL=constants.d.ts.map

package/charts/sankey-chart/constants.js

@@ -17,26 +17,30 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  DEFAULT_LINK_OPACITY: () => DEFAULT_LINK_OPACITY,
   DEFAULT_NODE_PADDING: () => DEFAULT_NODE_PADDING,
   DEFAULT_NODE_WIDTH: () => DEFAULT_NODE_WIDTH,
   DEFAULT_TRUNCATION_MODE: () => DEFAULT_TRUNCATION_MODE,
+  DIM_CANVAS_ALPHA: () => DIM_CANVAS_ALPHA,
   DISPLAY_NAME: () => DISPLAY_NAME,
   FALLBACK_NODE_COLOR: () => FALLBACK_NODE_COLOR,
-  INITIAL_HOVER_STATE: () => INITIAL_HOVER_STATE,
+  HIGHLIGHT_LINK_OPACITY: () => HIGHLIGHT_LINK_OPACITY,
+  INITIAL_SANKEY_STATE: () => INITIAL_SANKEY_STATE,
   INSIDE_LABEL_PADDING: () => INSIDE_LABEL_PADDING,
   INSIDE_LABEL_WIDTH_RATIO: () => INSIDE_LABEL_WIDTH_RATIO,
   LAYOUT_MARGIN: () => LAYOUT_MARGIN,
-  LINK_OPACITY_DARK: () => LINK_OPACITY_DARK,
-  LINK_OPACITY_LIGHT: () => LINK_OPACITY_LIGHT,
   MAX_SIDE_LABEL_WIDTH_RATIO: () => MAX_SIDE_LABEL_WIDTH_RATIO,
   NODE_BORDER_RADIUS: () => NODE_BORDER_RADIUS
 });
 module.exports = __toCommonJS(constants_exports);
 var import_constants = require("../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 = import_constants.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";
@@ -44,5 +48,6 @@ 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;

package/charts/sankey-chart/context/SankeyFormatter.context.d.ts

@@ -0,0 +1,2 @@
+export declare const SankeyFormatterContext: import("react").Context<(value: number) => string>;
+//# sourceMappingURL=SankeyFormatter.context.d.ts.map

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

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyFormatter_context_exports = {};
+__export(SankeyFormatter_context_exports, {
+  SankeyFormatterContext: () => SankeyFormatterContext
+});
+module.exports = __toCommonJS(SankeyFormatter_context_exports);
+var import_react = require("react");
+const SankeyFormatterContext = (0, import_react.createContext)(
+  String
+);

package/charts/sankey-chart/context/SankeyHighlight.context.d.ts

@@ -0,0 +1,13 @@
+import type { ActiveConnectedSet } from '../utils/get-active-connected-set.js';
+/**
+ * The active highlight set — the nodes and links to keep emphasized while every
+ * other shape dims — derived once from the store's `hovered`/`selected` identity
+ * against the current layout, then shared with every consumer (canvas draw and
+ * label overlays). `undefined` means no active highlight (nothing dims).
+ *
+ * This is derived state, not source state: it is recomputed from the current
+ * layout on every render rather than stored, so it never holds references to a
+ * stale layout graph after a resize or data change.
+ */
+export declare const SankeyHighlightContext: import("react").Context<ActiveConnectedSet | undefined>;
+//# sourceMappingURL=SankeyHighlight.context.d.ts.map

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

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SankeyHighlight_context_exports = {};
+__export(SankeyHighlight_context_exports, {
+  SankeyHighlightContext: () => SankeyHighlightContext
+});
+module.exports = __toCommonJS(SankeyHighlight_context_exports);
+var import_react = require("react");
+const SankeyHighlightContext = (0, import_react.createContext)(void 0);
+SankeyHighlightContext["displayName"] = "SankeyHighlightContext";

package/charts/sankey-chart/context/SankeyStore.context.d.ts

@@ -0,0 +1,4 @@
+import { type Store } from '../../../core/store/store.js';
+import type { SankeyState } from '../types/sankey-state.js';
+export declare const SankeyStoreContext: import("react").Context<Store<SankeyState>>;
+//# sourceMappingURL=SankeyStore.context.d.ts.map

package/charts/sankey-chart/context/{SankeyHoverStore.context.js → SankeyStore.context.js}

@@ -15,15 +15,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SankeyHoverStore_context_exports = {};
-__export(SankeyHoverStore_context_exports, {
-  SankeyHoverStoreContext: () => SankeyHoverStoreContext
+var SankeyStore_context_exports = {};
+__export(SankeyStore_context_exports, {
+  SankeyStoreContext: () => SankeyStoreContext
 });
-module.exports = __toCommonJS(SankeyHoverStore_context_exports);
+module.exports = __toCommonJS(SankeyStore_context_exports);
 var import_react = require("react");
 var import_store = require("../../../core/store/store.js");
 var import_constants = require("../constants.js");
-const SankeyHoverStoreContext = (0, import_react.createContext)(
-  (0, import_store.createStore)(import_constants.INITIAL_HOVER_STATE)
+const SankeyStoreContext = (0, import_react.createContext)(
+  (0, import_store.createStore)(import_constants.INITIAL_SANKEY_STATE)
 );
-SankeyHoverStoreContext["displayName"] = "SankeyHoverStoreContext";
+SankeyStoreContext["displayName"] = "SankeyStoreContext";

package/charts/sankey-chart/hooks/use-draw-sankey.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import type { SankeyLayoutModel } from '../types/sankey-internal.js';
-export declare function useDrawSankey(layout: SankeyLayoutModel, nodeColors: Map<string, string>): void;
+export declare function useDrawSankey(layout: SankeyLayoutModel, nodeColors: Map<string, string>, overlayCanvasRef: RefObject<HTMLCanvasElement | null>): void;
 //# sourceMappingURL=use-draw-sankey.d.ts.map

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

@@ -23,18 +23,43 @@ module.exports = __toCommonJS(use_draw_sankey_exports);
 var import_react = require("react");
 var import_draw_links = require("./draw-links.js");
 var import_draw_nodes = require("./draw-nodes.js");
-var import_useCurrentTheme = require("../../../core/hooks/useCurrentTheme.js");
 var import_useCanvas = require("../../core/components/canvas/hooks/useCanvas.js");
 var import_constants = require("../constants.js");
-function useDrawSankey(layout, nodeColors) {
-  const theme = (0, import_useCurrentTheme.useCurrentTheme)();
+var import_selectors = require("../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 = (0, import_selectors.useSankeyActiveHighlight)();
   const draw = (0, import_react.useCallback)(
     (ctx) => {
-      const linkOpacity = theme === "dark" ? import_constants.LINK_OPACITY_DARK : import_constants.LINK_OPACITY_LIGHT;
-      (0, import_draw_links.drawLinks)(ctx, layout.links, nodeColors, linkOpacity);
+      const overlayCanvas = overlayCanvasRef.current;
+      (0, import_draw_links.drawLinks)(ctx, layout.links, nodeColors, import_constants.DEFAULT_LINK_OPACITY);
       (0, import_draw_nodes.drawNodes)(ctx, layout.nodes, nodeColors);
+      if (activeSet && overlayCanvas) {
+        clearOverlayCanvas(overlayCanvas);
+        const overlayCtx = overlayCanvas.getContext("2d");
+        if (overlayCtx) {
+          (0, import_draw_links.drawLinks)(
+            overlayCtx,
+            activeSet.links,
+            nodeColors,
+            import_constants.HIGHLIGHT_LINK_OPACITY
+          );
+          (0, import_draw_nodes.drawNodes)(overlayCtx, activeSet.nodes, nodeColors);
+        }
+      } else if (overlayCanvas) {
+        clearOverlayCanvas(overlayCanvas);
+      }
     },
-    [layout, nodeColors, theme]
+    [layout, nodeColors, activeSet, overlayCanvasRef]
   );
   (0, import_useCanvas.useCanvas)("sankey", draw);
 }

package/charts/sankey-chart/hooks/use-sankey-formatter.d.ts

@@ -0,0 +1,5 @@
+import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
+import type { ChartUnit } from '../../core/types/chart-unit.js';
+import type { Formatter } from '../../core/types/formatter.js';
+export declare function useSankeyFormatter(formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>, unit?: ChartUnit): (value: number) => string;
+//# sourceMappingURL=use-sankey-formatter.d.ts.map