@splunk/visualizations 28.5.2 → 28.6.0

package/Sankey.js

@@ -12,6 +12,7 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -59,6 +60,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/Sankey/index.ts
 var Sankey_exports = {};
@@ -229,7 +231,7 @@ var DefaultVizActionHandler = class {
 var INITIAL_HEIGHT = 250;
 var SplunkVisualization = class {
 };
-SplunkVisualization.propTypes = {
+__publicField(SplunkVisualization, "propTypes", {
   /**
    * display mode
    */
@@ -305,11 +307,11 @@ SplunkVisualization.propTypes = {
    * A callback to request new data with updated request params
    */
   onRequestParamsChange: prop_types_exports.func
-};
+});
 /**
  *
  */
-SplunkVisualization.defaults = {
+__publicField(SplunkVisualization, "defaults", {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: "100%",
   height: INITIAL_HEIGHT,
@@ -324,7 +326,7 @@ SplunkVisualization.defaults = {
   onComputedProps: () => ({}),
   loading: false,
   onRequestParamsChange: lodash_exports.noop
-};
+});
 var SplunkVisualization_default = SplunkVisualization;
 
 // src/common/interfaces/DataSource.ts
@@ -378,9 +380,9 @@ var usePaginationParams = ({
   meta,
   onRequestParamsChange
 }) => {
-  const totalCount = meta && meta.totalCount || 0;
-  const offset = requestParams && requestParams.offset || 0;
-  const count = requestParams && requestParams.count;
+  const totalCount = (meta == null ? void 0 : meta.totalCount) || 0;
+  const offset = (requestParams == null ? void 0 : requestParams.offset) || 0;
+  const count = requestParams == null ? void 0 : requestParams.count;
   const totalPages = typeof count === "number" && count > 0 ? Math.ceil(totalCount / count) : 0;
   const current = typeof count === "number" && count > 0 ? Math.floor(offset / count) + 1 : 0;
   const isPaging = totalPages > 1 && typeof onRequestParamsChange === "function";
@@ -497,7 +499,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.5.2 - fd77ce608"
+  "data-splunk-visualization-version": "28.6.0 - 92427899a"
 })`
     position: relative;
     width: 100%;
@@ -587,7 +589,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.5.2 - fd77ce608",
+        "data-splunk-visualization-version": "28.6.0 - 92427899a",
         width,
         height,
         backgroundColor
@@ -1128,6 +1130,24 @@ var defaultImport26 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
 var Triangle_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
+// esm-externals:@splunk/visualizations-shared/propUtils
+var propUtils_exports = {};
+__export(propUtils_exports, {
+  default: () => propUtils_default
+});
+var defaultImport27 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+__reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
+var propUtils_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+
+// esm-externals:@splunk/visualizations-shared/simpleXMLOptions
+var simpleXMLOptions_exports = {};
+__export(simpleXMLOptions_exports, {
+  default: () => simpleXMLOptions_default
+});
+var defaultImport28 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+__reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
+var simpleXMLOptions_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
 var getAnnotationsForCanvas = ({
@@ -1165,9 +1185,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line"];
+var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
+  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -1322,46 +1342,66 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
+var getSeriesType = (isOverlay, isAreaChart, isStacked) => {
+  if (isOverlay) return "line";
+  if (!isAreaChart) return void 0;
+  return isStacked ? "stacked-area" : "area";
+};
+var getY2Scale = (field, y2fields, overlayFields) => {
+  const assignToY2 = (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || !(y2fields == null ? void 0 : y2fields.length) && (overlayFields == null ? void 0 : overlayFields.includes(field));
+  return assignToY2 ? "y2" : "y";
+};
+var getSeriesOverrides = (opts) => {
+  var _a;
+  const {
+    yfields,
+    y2fields,
+    lineWidth,
+    overlayFields,
+    y2Enabled,
+    nullValueMode,
+    markerDisplay,
+    lineDashStyle,
+    lineDashStylesByField,
+    stepPosition,
+    stepPositionsByField,
+    type,
+    stackMode,
+    showLines
+  } = opts;
   const seriesConfig = {};
   let spanGaps;
-  let replaceNullsWithZero;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode === "connect" || nullValueMode === "zero") {
+  } else if (nullValueMode != null) {
     spanGaps = true;
-    if (nullValueMode === "zero") {
-      replaceNullsWithZero = true;
-    }
+  } else {
+    spanGaps = void 0;
   }
-  yfields.forEach((field) => {
+  const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
+  const isAreaChart = type === "area";
+  const isStacked = isAreaChart && (stackMode === "stacked" || stackMode === "stacked100");
+  const areaFields = isAreaChart ? yfields.filter((f) => !(overlayFields == null ? void 0 : overlayFields.includes(f))) : yfields;
+  const overlayFieldsInOrder = (_a = overlayFields == null ? void 0 : overlayFields.filter((f) => yfields.includes(f))) != null ? _a : [];
+  const orderedFields = isAreaChart ? [...areaFields, ...overlayFieldsInOrder] : yfields;
+  orderedFields.forEach((field) => {
+    var _a2;
+    const isOverlay = (_a2 = overlayFields == null ? void 0 : overlayFields.includes(field)) != null ? _a2 : false;
+    const isPercent = isAreaChart && stackMode === "stacked100" && !isOverlay;
+    const shouldHideAreaOutline = isAreaChart && showLines === false && !isOverlay;
     seriesConfig[field] = {
-      overrides: { width: lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH }
+      overrides: __spreadValues({
+        width: shouldHideAreaOutline ? 0 : lineWidth != null ? lineWidth : DEFAULT_LINE_WIDTH
+      }, isPercent ? { stacking: { mode: "percent", group: "A" } } : {})
     };
-    if (spanGaps !== void 0) {
-      seriesConfig[field].overrides.spanGaps = spanGaps;
-    }
-    if (y2Enabled) {
-      const shouldAssignToY2 = (
-        // If y2Fields are present, assign all y2Fields to y2 scale
-        (y2fields == null ? void 0 : y2fields.length) > 0 && y2fields.includes(field) || // Else, assign all overlayFields to y2 scale
-        (!y2fields || y2fields.length === 0) && (overlayFields == null ? void 0 : overlayFields.includes(field))
-      );
-      if (shouldAssignToY2) {
-        seriesConfig[field].overrides.scale = "y2";
-      } else {
-        seriesConfig[field].overrides.scale = "y";
-      }
-    }
-    if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
-      seriesConfig[field].type = "line";
-    }
-    if (markerDisplay !== void 0) {
-      seriesConfig[field].markerDisplay = markerDisplay;
-    }
-    const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
-    if (fieldDashStyle) {
-      seriesConfig[field].lineDashStyle = fieldDashStyle;
+    const seriesType = getSeriesType(isOverlay, isAreaChart, isStacked);
+    if (seriesType !== void 0) seriesConfig[field].type = seriesType;
+    if (spanGaps !== void 0) seriesConfig[field].overrides.spanGaps = spanGaps;
+    if (y2Enabled) seriesConfig[field].overrides.scale = getY2Scale(field, y2fields, overlayFields);
+    if (markerDisplay !== void 0) seriesConfig[field].markerDisplay = markerDisplay;
+    if (!isAreaChart || isOverlay) {
+      const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
+      if (fieldDashStyle) seriesConfig[field].lineDashStyle = fieldDashStyle;
     }
     const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
     const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
@@ -1409,9 +1449,9 @@ var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport29 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var visualization_schemas_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/common/hooks/useTrellisEnabled.ts
 var useTrellisFeatureFlagOn = () => {
@@ -1441,8 +1481,27 @@ var TrellisTitleDiv = styled_components_default.div`
     background-color: ${(props) => props.backgroundColor};
     box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
 `;
+var formatTrellisKey = (value) => {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return value.toString();
+  }
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+  try {
+    return JSON.stringify(value);
+  } catch (e) {
+    return typeof value === "bigint" ? value.toString() : "";
+  }
+};
 var TrellisTitle = (props) => {
-  const titleText = String(props.trellisKey).toString();
+  const titleText = formatTrellisKey(props.trellisKey);
   return /* @__PURE__ */ react_exports.createElement(
     TrellisTitleDiv,
     {
@@ -1578,6 +1637,38 @@ var parseArrayOption = (value) => {
   }
   return void 0;
 };
+var getAreaOpacityForCanvas = (areaOpacity) => (
+  // Preserve legacy visualizations behavior where area opacity is squared to match charting output.
+  areaOpacity !== void 0 && areaOpacity !== null ? __pow(areaOpacity, 2) : areaOpacity
+);
+var parseTickIntervalOption = (simpleXMLValue, canvasValue) => {
+  if (simpleXMLValue) return Number(simpleXMLValue);
+  if (canvasValue) return Number(canvasValue);
+  return void 0;
+};
+var getYAxisTitles = ({
+  y2Enabled,
+  yFields,
+  y2Fields,
+  overlayFields,
+  yAxisTitleText,
+  yAxisTitleVisibility,
+  y2AxisTitleText,
+  y2AxisTitleVisibility,
+  containerHeight
+}) => {
+  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
+  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
+  const yAxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility),
+    containerHeight
+  );
+  const y2AxisTitle = ellipsisAxisTitle(
+    getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility),
+    containerHeight
+  );
+  return { yAxisTitle, y2AxisTitle };
+};
 var TimeSeriesChartWrapper = (props) => {
   var _b, _c, _d;
   const _a = props, {
@@ -1667,6 +1758,8 @@ var TimeSeriesChartWrapper = (props) => {
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
     "chart.showDataLabels": showDataLabels,
+    "chart.showLines": showLines,
+    "chart.stackMode": stackMode,
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
@@ -1695,7 +1788,10 @@ var TimeSeriesChartWrapper = (props) => {
     yAxisMinorTickSize,
     y2AxisMinorTickSize,
     showYAxisWithZero: showYAxisWithZeroFromOptions,
-    showY2AxisWithZero: showY2AxisWithZeroFromOptions
+    showY2AxisWithZero: showY2AxisWithZeroFromOptions,
+    // area only props
+    areaFillOpacity: areaOpacity,
+    chart: chartType
   } = options;
   const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
   const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
@@ -1712,13 +1808,11 @@ var TimeSeriesChartWrapper = (props) => {
   const yAxisMax = parseAxisValue(yAxisMaxRaw);
   const y2AxisMin = parseAxisValue(y2AxisMinRaw);
   const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
-  const parseTickInterval = (simpleXMLValue, canvasValue) => {
-    if (simpleXMLValue) return Number(simpleXMLValue);
-    if (canvasValue) return Number(canvasValue);
-    return void 0;
-  };
-  const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
-  const y2AxisMajorTickIntervalNum = parseTickInterval(
+  const yAxisMajorTickIntervalNum = parseTickIntervalOption(
+    yAxisMajorUnitFromSimpleXML,
+    yAxisMajorTickInterval
+  );
+  const y2AxisMajorTickIntervalNum = parseTickIntervalOption(
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
@@ -1727,6 +1821,7 @@ var TimeSeriesChartWrapper = (props) => {
   const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
   const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
   const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
+  const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
   const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
@@ -1757,26 +1852,40 @@ var TimeSeriesChartWrapper = (props) => {
   );
   let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
   xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
-  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
-  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
-  yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
-  const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
-  let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
-  y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
+  const { yAxisTitle, y2AxisTitle } = getYAxisTitles({
+    y2Enabled,
+    yFields,
+    y2Fields,
+    overlayFields,
+    yAxisTitleText,
+    yAxisTitleVisibility,
+    y2AxisTitleText,
+    y2AxisTitleVisibility,
+    containerHeight
+  });
   const xScaleConfig = (0, react_exports.useMemo)(
     () => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
     [xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
   );
+  const isStacked100 = stackMode === "stacked100";
   const yScaleConfig = (0, react_exports.useMemo)(
-    () => getYScaleConfig(
-      yAxisTitle,
-      yAxisAbbreviation,
-      yAxisScale,
-      yAxisLabelVisibility,
-      yAxisMin,
-      yAxisMax
-    ),
-    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
+    () => {
+      const config2 = getYScaleConfig(
+        yAxisTitle,
+        yAxisAbbreviation,
+        yAxisScale,
+        yAxisLabelVisibility,
+        yAxisMin,
+        yAxisMax
+      );
+      if (isStacked100) {
+        config2.y.tickFmt = (v) => `${Math.round(v * 100)}%`;
+        config2.y.range = () => [0, 1];
+      }
+      return config2;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax, isStacked100]
   );
   const y2ScaleConfig = (0, react_exports.useMemo)(() => {
     if (y2Enabled) {
@@ -1808,10 +1917,11 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
+  const normalizedStackMode = stackMode === "stacked" || stackMode === "stacked100" ? stackMode : "auto";
   const seriesOverrides = (0, react_exports.useMemo)(
-    () => getSeriesOverrides(
-      yFields,
-      y2Fields,
+    () => getSeriesOverrides({
+      yfields: yFields,
+      y2fields: y2Fields,
       lineWidth,
       overlayFields,
       y2Enabled,
@@ -1820,8 +1930,11 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
-    ),
+      stepPositionsByField,
+      type: chartType,
+      stackMode: normalizedStackMode,
+      showLines
+    }),
     [
       yFields,
       y2Fields,
@@ -1833,7 +1946,10 @@ var TimeSeriesChartWrapper = (props) => {
       lineDashStyle,
       lineDashStylesByField,
       stepPosition,
-      stepPositionsByField
+      stepPositionsByField,
+      chartType,
+      normalizedStackMode,
+      showLines
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -1901,50 +2017,54 @@ var TimeSeriesChartWrapper = (props) => {
   react_exports.useEffect(() => {
     additionalTooltipValuesRef.current = additionalTooltipValues;
   }, [additionalTooltipValues]);
+  const handleCrosshairMouseout = react_exports.useCallback(() => {
+    if (onPointMouseOut && lastPayloadRef.current) {
+      onPointMouseOut({
+        type: "point.mouseout",
+        originalEvent: lastOriginalEventRef.current,
+        payload: lastPayloadRef.current
+      });
+    }
+    previousMouseoverPayloadRef.current = null;
+  }, [onPointMouseOut]);
   const handleChartCrosshairChange = react_exports.useCallback(
     (event) => {
-      if (onPointMouseOver || onPointMouseOut) {
-        if (!event) {
-          if (onPointMouseOut && lastPayloadRef.current) {
-            onPointMouseOut({
-              type: "point.mouseout",
-              originalEvent: lastOriginalEventRef.current,
-              payload: lastPayloadRef.current
-            });
-          }
-          previousMouseoverPayloadRef.current = null;
-          return;
-        }
-        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
-          name: event.seriesKey
+      if (!onPointMouseOver && !onPointMouseOut) {
+        return;
+      }
+      if (!event) {
+        handleCrosshairMouseout();
+        return;
+      }
+      const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+        name: event.seriesKey
+      });
+      delete payload.seriesKey;
+      if (event.rowContext) {
+        Object.assign(
+          payload,
+          Object.keys(event.rowContext).reduce((acc, fieldName) => {
+            acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
+            return acc;
+          }, {})
+        );
+      }
+      const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+      if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
+        return;
+      }
+      lastPayloadRef.current = updatedPayload;
+      lastOriginalEventRef.current = event;
+      previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
+      if (onPointMouseOver) {
+        onPointMouseOver({
+          type: "point.mouseover",
+          originalEvent: event,
+          payload: updatedPayload
         });
-        delete payload.seriesKey;
-        if (event.rowContext) {
-          Object.assign(
-            payload,
-            Object.keys(event.rowContext).reduce((acc, fieldName) => {
-              acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
-              return acc;
-            }, {})
-          );
-        }
-        const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
-        if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
-          return;
-        }
-        lastPayloadRef.current = updatedPayload;
-        lastOriginalEventRef.current = event;
-        previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
-        if (onPointMouseOver) {
-          onPointMouseOver({
-            type: "point.mouseover",
-            originalEvent: event,
-            payload: updatedPayload
-          });
-        }
       }
     },
-    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
+    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy, handleCrosshairMouseout]
   );
   const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
   const memoizedChart = (0, react_exports.useMemo)(() => {
@@ -1999,7 +2119,8 @@ var TimeSeriesChartWrapper = (props) => {
         showXAxisLine,
         showYAxisLine,
         showY2AxisLine,
-        xAxisMaxLabelParts
+        xAxisMaxLabelParts,
+        areaOpacity: areaOpacityForCanvas
       }
     ));
   }, [
@@ -2051,7 +2172,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYAxisLine,
     showY2AxisLine,
     legendMode,
-    xAxisMaxLabelParts
+    xAxisMaxLabelParts,
+    areaOpacityForCanvas
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
@@ -2079,6 +2201,37 @@ var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
 var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
+var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTrigger) => {
+  const result = {};
+  Object.keys(supportedEvents).forEach((eventName) => {
+    const { parentKeys, payloadKeys } = supportedEvents[eventName];
+    const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
+    let payload = {};
+    if (Array.isArray(payloadKeys) && payloadKeys.length) {
+      payloadKeys.forEach((p) => {
+        payload[p] = evaluatedOptionsToUse[p];
+      });
+    }
+    result[eventCallbackPropName] = (ev) => {
+      if (ev == null ? void 0 : ev.payload) {
+        payload = __spreadValues({}, ev.payload);
+      }
+      return onEventTrigger({
+        originalEvent: ev,
+        payload,
+        type: eventName
+      });
+    };
+    if (parentKeys) {
+      for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
+        const newObject = {};
+        newObject[parentKeys[i]] = result[eventCallbackPropName];
+        result[eventCallbackPropName] = newObject;
+      }
+    }
+  });
+  return result;
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2136,9 +2289,7 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
+    const isTrellisFeatureFlagOn = Boolean(featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableTrellis);
     const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isAcceleratedRenderFeatureFlagOn = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
@@ -2303,38 +2454,12 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = {};
-    if (hasEventHandlers && mode === "view" && vizConfig.supports.indexOf("events" /* EVENTS */) > -1) {
-      const supportedEvents = vizConfig.events;
-      Object.keys(supportedEvents).forEach((eventName) => {
-        const { parentKeys, payloadKeys } = supportedEvents[eventName];
-        const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
-        let payload = {};
-        if (Array.isArray(payloadKeys) && payloadKeys.length) {
-          payloadKeys.forEach((p) => {
-            payload[p] = evaluatedOptionsToUse[p];
-          });
-        }
-        eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev == null ? void 0 : ev.payload) {
-            payload = __spreadValues({}, ev.payload);
-          }
-          return onEventTrigger({
-            originalEvent: ev,
-            payload,
-            type: eventName
-          });
-        };
-        if (parentKeys) {
-          for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
-            const newObject = {};
-            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
-            eventCallbackProps[eventCallbackPropName] = newObject;
-          }
-        }
-      });
-    }
-    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), {
+      // Align option transformation with the actual renderer selected below.
+      // This prevents canvas-only option preservation from leaking into Highcharts mode.
+      isAcceleratedRenderOn
+    }), eventCallbackProps), {
       themeFunc
     }));
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
@@ -2368,36 +2493,36 @@ var visualization_color_palettes_exports = {};
 __export(visualization_color_palettes_exports, {
   default: () => visualization_color_palettes_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualization-color-palettes"));
+var defaultImport30 = __toESM(require("@splunk/visualization-color-palettes"));
 __reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
-var visualization_color_palettes_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var visualization_color_palettes_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // esm-externals:d3-interpolate
 var d3_interpolate_exports = {};
 __export(d3_interpolate_exports, {
   default: () => d3_interpolate_default
 });
-var defaultImport29 = __toESM(require("d3-interpolate"));
+var defaultImport31 = __toESM(require("d3-interpolate"));
 __reExport(d3_interpolate_exports, require("d3-interpolate"));
-var d3_interpolate_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var d3_interpolate_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:d3-array
 var d3_array_exports = {};
 __export(d3_array_exports, {
   default: () => d3_array_default
 });
-var defaultImport30 = __toESM(require("d3-array"));
+var defaultImport32 = __toESM(require("d3-array"));
 __reExport(d3_array_exports, require("d3-array"));
-var d3_array_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var d3_array_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:d3-collection
 var d3_collection_exports = {};
 __export(d3_collection_exports, {
   default: () => d3_collection_default
 });
-var defaultImport31 = __toESM(require("d3-collection"));
+var defaultImport33 = __toESM(require("d3-collection"));
 __reExport(d3_collection_exports, require("d3-collection"));
-var d3_collection_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var d3_collection_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/Sankey/PureSankey/lib/sankey.js
 var d3_sankey = function() {
@@ -2783,18 +2908,18 @@ var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport32 = __toESM(require("d3-scale"));
+var defaultImport34 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var d3_scale_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/visualization-encoding/utils/types
 var types_exports = {};
 __export(types_exports, {
   default: () => types_default
 });
-var defaultImport33 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+var defaultImport35 = __toESM(require("@splunk/visualization-encoding/utils/types"));
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
-var types_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var types_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // src/Sankey/PureSankey/SankeyUtils.ts
 var insertNodeIfNotExist = (sankeyData, nodeName) => {
@@ -2820,7 +2945,8 @@ var insertLink = (sankeyData, sourceFieldIdx, targetFieldIdx, linkValue, index)
   });
 };
 var getNodesIndex = (sankeyData, nodeName) => {
-  if (!sankeyData || !sankeyData.nodes || !sankeyData.nodes.length) {
+  var _a;
+  if (!((_a = sankeyData == null ? void 0 : sankeyData.nodes) == null ? void 0 : _a.length)) {
     return -1;
   }
   return sankeyData.nodes.findIndex((node) => node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase());
@@ -2890,7 +3016,8 @@ var getLinkId = (link) => {
   return `link-${link.id}`;
 };
 var getAllNodeNames = (sankeyData) => {
-  if (!sankeyData || !sankeyData.nodes || !sankeyData.nodes.length) {
+  var _a;
+  if (!((_a = sankeyData == null ? void 0 : sankeyData.nodes) == null ? void 0 : _a.length)) {
     return [];
   }
   return sankeyData.nodes.map((node) => node.name);
@@ -2931,7 +3058,7 @@ var extractLinkMidPoint = (pathStr) => {
 };
 var getAllConnectedLinks = (links, nodeIdx) => {
   const result = { links: [], sourceNodes: [], targetNodes: [] };
-  if (!links || !links.length) {
+  if (!(links == null ? void 0 : links.length)) {
     return result;
   }
   links.forEach((link) => {
@@ -2966,33 +3093,92 @@ var computeAllConnectedLinksToNodes = (nodes, links) => {
 var checkDigitsOnly = (input) => {
   return /^\d+$/.test(input);
 };
-var truncateSVGTextWithEllipsis = (textElement, textString, width) => {
-  if (textElement && textElement.getSubStringLength !== void 0) {
-    textElement.textContent = textString;
-    if (textElement.getSubStringLength(0, textString.length) >= width) {
-      for (let x = textString.length - 3; x > 0; x -= 3) {
-        if (textElement.getSubStringLength(0, x) <= width) {
-          textElement.textContent = `${textString.substring(0, x)}...`;
-          return;
-        }
-      }
-      textElement.textContent = "...";
-    }
-  }
-};
 var getMaxNode = (nodes) => {
   if (!nodes || nodes.length === 0) return void 0;
   return nodes.reduce(
     (maxNode, currentNode) => currentNode.value > maxNode.value ? currentNode : maxNode
   );
 };
+var LABEL_PADDING = 8;
+var getColumnPositions = (nodes) => {
+  const xSet = /* @__PURE__ */ new Set();
+  nodes.forEach((node) => {
+    xSet.add(Math.round(node.x));
+  });
+  return Array.from(xSet).sort((a, b) => a - b);
+};
+var getMaxTextLength = (nodes) => Math.max(...nodes.map((n) => {
+  var _a;
+  return ((_a = n.name) == null ? void 0 : _a.length) || 0;
+}));
+var computeColumnGap = (colX, colIdx, columnPositions, nodeWidth, chartWidth) => {
+  const isLeftSide = colX < chartWidth / 2;
+  if (isLeftSide && colIdx < columnPositions.length - 1) {
+    const gapWidth = columnPositions[colIdx + 1] - (colX + nodeWidth);
+    const sharedGap = columnPositions[colIdx + 1] >= chartWidth / 2;
+    return { gapWidth, sharedGap };
+  }
+  if (isLeftSide) {
+    return { gapWidth: chartWidth - colX - nodeWidth, sharedGap: false };
+  }
+  if (colIdx > 0) {
+    const gapWidth = colX - (columnPositions[colIdx - 1] + nodeWidth);
+    const sharedGap = columnPositions[colIdx - 1] < chartWidth / 2;
+    return { gapWidth, sharedGap };
+  }
+  return { gapWidth: colX, sharedGap: false };
+};
+var computeShareRatio = (currentTextLen, adjacentTextLen) => {
+  const totalTextLen = currentTextLen + adjacentTextLen;
+  if (totalTextLen === 0) return 0.5;
+  const ratio = currentTextLen / totalTextLen;
+  if (ratio > 0.5 && 1 - ratio > 0.5) return 0.5;
+  return Math.max(0.3, Math.min(0.7, ratio));
+};
+var computeNodeLabelWidths = (nodes, nodeWidth, chartWidth) => {
+  const widthMap = /* @__PURE__ */ new Map();
+  if (!(nodes == null ? void 0 : nodes.length)) return widthMap;
+  const columnPositions = getColumnPositions(nodes);
+  if (columnPositions.length === 0) return widthMap;
+  const columnNodes = /* @__PURE__ */ new Map();
+  nodes.forEach((node) => {
+    const colX = Math.round(node.x);
+    if (!columnNodes.has(colX)) columnNodes.set(colX, []);
+    columnNodes.get(colX).push(node);
+  });
+  columnPositions.forEach((colX, colIdx) => {
+    const isLeftSide = colX < chartWidth / 2;
+    const { gapWidth, sharedGap } = computeColumnGap(
+      colX,
+      colIdx,
+      columnPositions,
+      nodeWidth,
+      chartWidth
+    );
+    let shareRatio = 1;
+    if (sharedGap) {
+      const currentTextLen = getMaxTextLength(columnNodes.get(colX) || []);
+      const adjacentColX = isLeftSide ? columnPositions[colIdx + 1] : columnPositions[colIdx - 1];
+      const adjacentTextLen = getMaxTextLength(columnNodes.get(adjacentColX) || []);
+      shareRatio = computeShareRatio(currentTextLen, adjacentTextLen);
+    }
+    const usableWidth = gapWidth - 2 * LABEL_PADDING;
+    const allocatedWidth = Math.max(0, sharedGap ? usableWidth * shareRatio : usableWidth);
+    const colNodes = columnNodes.get(colX) || [];
+    colNodes.forEach((node) => {
+      widthMap.set(node.index, allocatedWidth);
+    });
+  });
+  return widthMap;
+};
 
 // src/Sankey/PureSankey/SankeyNode.tsx
-var MAX_NODE_TEXT_WIDTH = 150;
 var NODE_VALUE_PRECISION = 2;
 var MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY = 24;
+var LABEL_LINE_HEIGHT = 16;
+var MAX_LABEL_LINES = 3;
 var getNodeOpacity = (nodeIndex, activeNodes) => {
-  if (!activeNodes || !activeNodes.length) {
+  if (!(activeNodes == null ? void 0 : activeNodes.length)) {
     return DEFAULT_NODE_OPACITY;
   }
   const isActiveNode = activeNodes.find((node) => node.index === nodeIndex);
@@ -3011,46 +3197,17 @@ NodeGroup.displayName = "NodeGroup";
 var NodeRect = styled_components_default.rect`
     fill: ${(props) => typeof props.colorCategoryMapping === "function" ? props.colorCategoryMapping(props.node.name) : DEFAULT_NODE_COLOR};
 `;
-var NodeText = styled_components_default.text`
-    text-anchor: ${(props) => props.node.x < props.chartWidth / 2 ? "start" : "end"};
-    font-size: 12px;
-    font-family: ${DEFAULT_FONT_FAMILY};
-    letter-spacing: 0.02em;
-    fill: ${(props) => props.isNodeValue && props.nodeValueColor ? props.nodeValueColor : props.nodeTextColor};
-    opacity: ${(props) => props.isNodeValue ? "82%" : "100%"};
-`;
 var SankeyNode = ({
   node,
-  maxNode,
   activeNodes,
   nodeWidth,
-  chartWidth,
   handleMouseOver = () => {
   },
   handleMouseLeave = () => {
   },
   handleNodeClick,
-  colorCategoryMapping,
-  nodeTextColor,
-  nodeValueColor,
-  labelDisplay: labelDisplayInput,
-  unit
+  colorCategoryMapping
 }) => {
-  const labelDisplay = labelDisplayInput != null ? labelDisplayInput : "off";
-  const nodeTextRef = (0, react_exports.useRef)();
-  const nodeValuePercentRef = (0, react_exports.useRef)();
-  let nodeValueFormatted = "";
-  let nodePercentFormatted = "";
-  if (labelDisplay !== "off" && maxNode) {
-    nodeValueFormatted = (0, numberUtils_exports.formatNumber)(node.value, NODE_VALUE_PRECISION, {
-      useTrendUnits: true
-    });
-    const nodePercent = node.value / maxNode.value * 100;
-    nodePercentFormatted = `${(0, numberUtils_exports.formatNumber)(nodePercent, NODE_VALUE_PRECISION)}%`;
-  }
-  (0, react_exports.useEffect)(() => {
-    truncateSVGTextWithEllipsis(nodeTextRef.current, node.name, MAX_NODE_TEXT_WIDTH);
-  });
   const nodeClickHandler = (0, react_exports.useCallback)(() => handleNodeClick(node), [node, handleNodeClick]);
   const nodeHeight = getNodeHeight(node);
   return /* @__PURE__ */ react_exports.createElement(
@@ -3064,7 +3221,7 @@ var SankeyNode = ({
       transform: `translate(${node.x},${node.y})`,
       onClick: nodeClickHandler
     },
-    /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, /* @__PURE__ */ react_exports.createElement(
+    /* @__PURE__ */ react_exports.createElement(
       NodeRect,
       {
         node,
@@ -3075,37 +3232,116 @@ var SankeyNode = ({
         onMouseOver: handleMouseOver,
         onMouseLeave: handleMouseLeave
       }
-    ), /* @__PURE__ */ react_exports.createElement(
-      NodeText,
+    )
+  );
+};
+var SankeyNodeLabel = ({
+  node,
+  activeNodes,
+  nodeWidth,
+  chartWidth,
+  availableLabelWidth,
+  nodeTextColor,
+  nodeValueColor,
+  maxNode,
+  labelDisplay: labelDisplayInput,
+  unit
+}) => {
+  const labelDisplay = labelDisplayInput != null ? labelDisplayInput : "off";
+  let nodeValueFormatted = "";
+  let nodePercentFormatted = "";
+  if (labelDisplay !== "off" && maxNode) {
+    nodeValueFormatted = (0, numberUtils_exports.formatNumber)(node.value, NODE_VALUE_PRECISION, {
+      useTrendUnits: true
+    });
+    const nodePercent = node.value / maxNode.value * 100;
+    nodePercentFormatted = `${(0, numberUtils_exports.formatNumber)(nodePercent, NODE_VALUE_PRECISION)}%`;
+  }
+  const nodeHeight = getNodeHeight(node);
+  const isLeftSide = node.x < chartWidth / 2;
+  const labelWidth = availableLabelWidth != null ? availableLabelWidth : 150;
+  const showValues = labelDisplay !== "off" && nodeHeight >= MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY;
+  const availableHeightForText = Math.max(0, nodeHeight - 2 * LABEL_PADDING);
+  const totalLinesFromHeight = Math.max(1, Math.floor(availableHeightForText / LABEL_LINE_HEIGHT));
+  const totalLinesAvailable = Math.min(MAX_LABEL_LINES + (showValues ? 1 : 0), totalLinesFromHeight);
+  const valueLinesNeeded = showValues ? 1 : 0;
+  const nameLinesAvailable = Math.min(MAX_LABEL_LINES, Math.max(1, totalLinesAvailable - valueLinesNeeded));
+  const contentLines = nameLinesAvailable + (showValues ? 1 : 0);
+  const minContentHeight = contentLines * LABEL_LINE_HEIGHT;
+  const foHeight = Math.max(nodeHeight, minContentHeight);
+  const foY = (nodeHeight - foHeight) / 2;
+  const foX = isLeftSide ? nodeWidth + LABEL_PADDING : -(labelWidth + LABEL_PADDING);
+  const foWidth = Math.max(0, labelWidth);
+  let valueText = "";
+  if (showValues) {
+    if (labelDisplay === "values") valueText = `${unit}${nodeValueFormatted}`;
+    else if (labelDisplay === "percentage") valueText = nodePercentFormatted;
+    else if (labelDisplay === "valuesAndPercentage")
+      valueText = `${nodePercentFormatted} ${unit}${nodeValueFormatted}`;
+  }
+  const textAlign = isLeftSide ? "left" : "right";
+  const baseTextStyle = {
+    fontSize: "12px",
+    fontFamily: DEFAULT_FONT_FAMILY,
+    letterSpacing: "0.02em",
+    lineHeight: `${LABEL_LINE_HEIGHT}px`,
+    margin: 0,
+    padding: 0
+  };
+  if (foWidth <= 0) return null;
+  return /* @__PURE__ */ react_exports.createElement(
+    "foreignObject",
+    {
+      x: node.x + foX,
+      y: node.y + foY,
+      width: foWidth,
+      height: foHeight,
+      opacity: getNodeOpacity(node.index, activeNodes),
+      style: { pointerEvents: "none", overflow: "visible" }
+    },
+    /* @__PURE__ */ react_exports.createElement(
+      "div",
       {
-        ref: nodeTextRef,
-        node,
         "data-test": `node-text-${node.index}`,
-        chartWidth,
-        x: node.x < chartWidth / 2 ? 6 + nodeWidth : -6,
-        y: labelDisplay !== "off" && nodeHeight >= MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY ? node.dy / 2 - 6.5 : node.dy / 2,
-        dy: ".35em",
-        nodeTextColor
-      },
-      node.name
-    ), labelDisplay !== "off" && nodeHeight >= MIN_NODE_HEIGHT_FOR_LABEL_DISPLAY && /* @__PURE__ */ react_exports.createElement(
-      NodeText,
-      {
-        ref: nodeValuePercentRef,
-        node,
-        "data-test": `node-label-${node.index}`,
-        chartWidth,
-        x: node.x < chartWidth / 2 ? 6 + nodeWidth : -6,
-        y: node.dy / 2 + 6.5,
-        dy: ".35em",
-        nodeTextColor,
-        isNodeValue: true,
-        nodeValueColor
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          height: "100%",
+          overflow: "hidden",
+          textAlign,
+          pointerEvents: "none"
+        }
       },
-      labelDisplay === "values" && `${unit}${nodeValueFormatted}`,
-      labelDisplay === "percentage" && nodePercentFormatted,
-      labelDisplay === "valuesAndPercentage" && `${nodePercentFormatted} ${unit}${nodeValueFormatted}`
-    ))
+      /* @__PURE__ */ react_exports.createElement(
+        "div",
+        {
+          style: __spreadProps(__spreadValues({}, baseTextStyle), {
+            color: nodeTextColor,
+            display: "-webkit-box",
+            WebkitLineClamp: nameLinesAvailable,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            wordBreak: "break-word"
+          })
+        },
+        node.name
+      ),
+      showValues && /* @__PURE__ */ react_exports.createElement(
+        "div",
+        {
+          "data-test": `node-label-${node.index}`,
+          style: __spreadProps(__spreadValues({}, baseTextStyle), {
+            color: nodeValueColor || nodeTextColor,
+            opacity: 0.82,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          })
+        },
+        valueText
+      )
+    )
   );
 };
 var SankeyNode_default = SankeyNode;
@@ -3115,10 +3351,10 @@ var getLinkFill = (link, colorCategoryMapping, colorMode) => {
   if (colorMode === "categorical") {
     return colorCategoryMapping ? colorCategoryMapping(link.source.name) : DEFAULT_LINK_COLOR;
   }
-  return colorCategoryMapping && colorCategoryMapping[link.index] ? colorCategoryMapping[link.index] : DEFAULT_LINK_COLOR;
+  return (colorCategoryMapping == null ? void 0 : colorCategoryMapping[link.index]) || DEFAULT_LINK_COLOR;
 };
 var getLinkOpacity = (link, activeLinks, linkOpacity) => {
-  if (!activeLinks || !activeLinks.length) {
+  if (!(activeLinks == null ? void 0 : activeLinks.length)) {
     return linkOpacity;
   }
   const isActiveLink = activeLinks.find((l) => l.id === link.id);
@@ -3156,19 +3392,20 @@ var SankeyLink = ({
       onClick: linkClickHandler,
       onMouseOver: handleMouseOver,
       onMouseLeave: (ev) => {
-        const relatedTarget = ev.relatedTarget;
-        let isRelatedTargetPopover = false;
-        if (relatedTarget && relatedTarget.classList) {
-          const { classList } = relatedTarget;
-          classList.forEach((name) => {
-            if (name.toLocaleLowerCase().indexOf("sankeytooltip") > -1 || name.toLocaleLowerCase().indexOf("popoverstyles") > -1) {
-              isRelatedTargetPopover = true;
+        const relatedTarget = ev.nativeEvent.relatedTarget;
+        if (relatedTarget) {
+          let el = relatedTarget;
+          while (el) {
+            if (el.classList) {
+              const classListStr = Array.from(el.classList).join(" ").toLowerCase();
+              if (classListStr.includes("sankeytooltip") || classListStr.includes("popoverstyles")) {
+                return;
+              }
             }
-          });
-        }
-        if (!isRelatedTargetPopover) {
-          handleMouseLeave(ev);
+            el = el.parentElement;
+          }
         }
+        handleMouseLeave(ev);
       }
     },
     /* @__PURE__ */ react_exports.createElement("path", { d: path(0)(link) }),
@@ -3184,9 +3421,9 @@ var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport34 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport36 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var Popover_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Sankey/PureSankey/SankeyTooltip.tsx
 var DEFAULT_PLACEMENT = "below";
@@ -3303,7 +3540,7 @@ var SankeyTooltip = ({
       },
       /* @__PURE__ */ react_exports.createElement(StyledTooltipContainer, { className: "sankeyToolTip" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipRow, { rowColor: tooltipRowColor, "data-test": "main-row" }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, { "data-test": "main-row-name" }, /* @__PURE__ */ react_exports.createElement(ColorTile, { node, colorCategoryMapping }), /* @__PURE__ */ react_exports.createElement(NodeValue, null, node == null ? void 0 : node.name)), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, { "data-test": "main-row-value" }, (0, numberUtils_exports.formatNumber)(node == null ? void 0 : node.value, 0, {
         useTrendUnits: true
-      }))), showSection(connections, node, "source") && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Source"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, connections && connections.sourceNodes.map((sNode, idx) => {
+      }))), showSection(connections, node, "source") && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Source"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, connections == null ? void 0 : connections.sourceNodes.map((sNode, idx) => {
         var _a, _b;
         if ((sNode == null ? void 0 : sNode.index) !== (node == null ? void 0 : node.index) || ((_a = connections.sourceNodes[idx]) == null ? void 0 : _a.index) === ((_b = connections.targetNodes[idx]) == null ? void 0 : _b.index)) {
           return /* @__PURE__ */ react_exports.createElement(
@@ -3326,7 +3563,7 @@ var SankeyTooltip = ({
           );
         }
         return null;
-      })), showSection(connections, node, "target") && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Target"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, connections && connections.targetNodes.map((tNode, idx) => {
+      })), showSection(connections, node, "target") && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { headerColor: tooltipHeaderColor }, /* @__PURE__ */ react_exports.createElement(StyledTooltipLeftCell, null, "Target"), /* @__PURE__ */ react_exports.createElement(StyledTooltipRightCell, null, linkValue)), /* @__PURE__ */ react_exports.createElement(StyledTooltipSection, null, connections == null ? void 0 : connections.targetNodes.map((tNode, idx) => {
         var _a, _b;
         if ((tNode == null ? void 0 : tNode.index) !== (node == null ? void 0 : node.index) || ((_a = connections.sourceNodes[idx]) == null ? void 0 : _a.index) === ((_b = connections.targetNodes[idx]) == null ? void 0 : _b.index)) {
           return /* @__PURE__ */ react_exports.createElement(
@@ -3460,8 +3697,40 @@ var PureSankey = ({
     },
     [linkValueField, fields, onLinkClick, columns]
   );
+  const resetStates = (0, react_exports.useCallback)(() => {
+    setActiveLinks([]);
+    setActiveNodes([]);
+    setHoveredLinkElement(null);
+    setHoveredNodeElement(null);
+    setNodeHovered(null);
+    setOpenLinkToolTip(false);
+    setOpenNodeToolTip(false);
+  }, []);
+  const isInsideTooltip = (0, react_exports.useCallback)((element) => {
+    let el = element;
+    while (el) {
+      if (el.classList) {
+        const classListStr = Array.from(el.classList).join(" ").toLowerCase();
+        if (classListStr.includes("sankeytooltip") || classListStr.includes("popoverstyles")) {
+          return true;
+        }
+      }
+      el = el.parentElement;
+    }
+    return false;
+  }, []);
+  const handleWrapperMouseLeave = (0, react_exports.useCallback)(
+    (ev) => {
+      const relatedTarget = ev.nativeEvent.relatedTarget;
+      if (relatedTarget && isInsideTooltip(relatedTarget)) {
+        return;
+      }
+      resetStates();
+    },
+    [resetStates, isInsideTooltip]
+  );
   (0, react_exports.useEffect)(() => {
-    if (sankeyContainerElement && sankeyContainerElement.current) {
+    if (sankeyContainerElement == null ? void 0 : sankeyContainerElement.current) {
       const w = sankeyContainerElement.current.getBoundingClientRect().width;
       const h = sankeyContainerElement.current.getBoundingClientRect().height;
       const sWidth = checkDigitsOnly(width) ? parseInt(width, 10) : w;
@@ -3501,17 +3770,8 @@ var PureSankey = ({
     seriesColors,
     linkColors
   });
-  const resetStates = () => {
-    setActiveLinks([]);
-    setActiveNodes([]);
-    setHoveredLinkElement(null);
-    setHoveredNodeElement(null);
-    setNodeHovered(null);
-    setOpenLinkToolTip(false);
-    setOpenNodeToolTip(false);
-  };
   const maxNode = getMaxNode(sankeyData.nodes);
-  const chartWidth = typeof width === "number" ? width : Number.parseInt(width, 10);
+  const nodeLabelWidths = computeNodeLabelWidths(sankeyData.nodes, nodeWidth, sankeyWidth);
   const renderLinks = (links) => {
     return links.map((link) => /* @__PURE__ */ react_exports.createElement(
       SankeyLink_default,
@@ -3541,17 +3801,11 @@ var PureSankey = ({
       SankeyNode_default,
       {
         node,
-        maxNode,
         key: getNodeId(node),
         "data-test": getNodeId(node),
         activeNodes,
         nodeWidth,
-        chartWidth,
         colorCategoryMapping,
-        labelDisplay,
-        unit,
-        nodeTextColor,
-        nodeValueColor,
         handleMouseOver: (ev) => {
           const connections = nodeConnectionsMap[node.index];
           setActiveLinks(connections.links);
@@ -3561,11 +3815,29 @@ var PureSankey = ({
           setOpenLinkToolTip(false);
           setOpenNodeToolTip(true);
         },
-        handleMouseLeave: resetStates,
+        handleMouseLeave: handleWrapperMouseLeave,
         handleNodeClick
       }
     ));
   };
+  const renderNodeLabels = (nodes) => {
+    return nodes.map((node) => /* @__PURE__ */ react_exports.createElement(
+      SankeyNodeLabel,
+      {
+        node,
+        key: `label-${getNodeId(node)}`,
+        activeNodes,
+        nodeWidth,
+        chartWidth: sankeyWidth,
+        availableLabelWidth: nodeLabelWidths.get(node.index),
+        maxNode,
+        labelDisplay,
+        unit,
+        nodeTextColor,
+        nodeValueColor
+      }
+    ));
+  };
   if (containerWidth < CHART_MIN_WIDTH || containerHeight < CHART_MIN_HEIGHT) {
     return /* @__PURE__ */ react_exports.createElement(SankeyContainer, { height, width, ref: sankeyContainerElement }, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), /* @__PURE__ */ react_exports.createElement(
       Message_default,
@@ -3582,7 +3854,7 @@ var PureSankey = ({
     {
       backgroundColor,
       dataTestKey: "SankeyWrapper",
-      onMouseLeave: resetStates
+      onMouseLeave: handleWrapperMouseLeave
     },
     /* @__PURE__ */ react_exports.createElement("svg", { height: "100%", width: "100%", "data-test": "sankey-svg" }, /* @__PURE__ */ react_exports.createElement("g", { transform: `translate(${TRANSLATE_POS.x},${TRANSLATE_POS.y})` }, /* @__PURE__ */ react_exports.createElement("g", { className: "link-group", "data-test": "link-group" }, renderLinks(sankeyData.links), openLinkToolTip && /* @__PURE__ */ react_exports.createElement(
       SankeyTooltip_default,
@@ -3618,7 +3890,7 @@ var PureSankey = ({
         tooltipLinkHeaderColor,
         tooltipHeaderColor
       }
-    ))))
+    )), /* @__PURE__ */ react_exports.createElement("g", { className: "label-group", "data-test": "label-group", pointerEvents: "none" }, renderNodeLabels(sankeyData.nodes))))
   ));
 };
 var PureSankey_default = PureSankey;
@@ -3628,45 +3900,45 @@ var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport37 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var visualization_icons_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport38 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var placeholders_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
 var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport37 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport39 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var PresetPalettes_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport38 = __toESM(require("@splunk/themes"));
+var defaultImport40 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var themes_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport39 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport41 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+var configUtils_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -3736,9 +4008,9 @@ var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport40 = __toESM(require("@splunk/themes/pick"));
+var defaultImport42 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var pick_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/ThemedDefaults.tsx
 var defaultBackgroundColor = (props) => pick_default({