@splunk/visualizations 28.7.0 → 28.9.0

package/Timeline.js

@@ -425,7 +425,7 @@ var editorConfig = [
             ]
           },
           // disable legend if dataColors is on
-          isDisabled: ({ options }) => options.dataColors
+          isDisabled: ({ options }) => Boolean(options.dataColors)
         }
       ],
       [
@@ -442,7 +442,7 @@ var editorConfig = [
               { label: (0, i18n_exports._)("Off"), value: "ellipsisOff" }
             ]
           },
-          isDisabled: ({ options }) => options.dataColors,
+          isDisabled: ({ options }) => Boolean(options.dataColors),
           showEditor: ({ options }) => options.legendDisplay && options.legendDisplay !== "off"
         }
       ]
@@ -740,7 +740,10 @@ var useSortingParams = ({ requestParams, onRequestParamsChange }) => {
     onSort = (e, { sortKey, sortDir }) => {
       if (typeof sortKey === "string") {
         const nextSortDir = (0, lodash_exports.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : "none";
-        onRequestParamsChange(__spreadValues(__spreadValues({}, requestParams), { offset: 0, sort: { [sortKey]: nextSortDir } }));
+        onRequestParamsChange(__spreadProps(__spreadValues({}, requestParams), {
+          offset: 0,
+          sort: { [sortKey]: nextSortDir }
+        }));
       } else {
         onRequestParamsChange(requestParams);
       }
@@ -875,7 +878,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.7.0 - d7b18cab6"
+  "data-splunk-visualization-version": "28.9.0 - 96b03188d"
 })`
     position: relative;
     width: 100%;
@@ -892,14 +895,23 @@ var withEditModeCover = (Visualization, disableEditModeCover) => {
 };
 var withEditModeCover_default = withEditModeCover;
 
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport28 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+
 // esm-externals:@splunk/visualizations-shared/style
 var style_exports = {};
 __export(style_exports, {
   default: () => style_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/style"));
 __reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var style_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -956,7 +968,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.7.0 - d7b18cab6",
+        "data-splunk-visualization-version": "28.9.0 - 96b03188d",
         width,
         height,
         backgroundColor
@@ -977,6 +989,14 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
+var PlaceholderContainer = styled_components_default.div`
+    /* The inline token color wins when supported. Older browsers discard an
+       unsupported oklch value and retain this inherited fallback instead. */
+    color: ${(0, themes_exports.pick)({
+  dark: "#fafafa",
+  light: "#2c2c2c"
+})};
+`;
 var IconPlaceholder = (props) => {
   const {
     width = SplunkVisualization_default.defaults.width,
@@ -991,7 +1011,6 @@ var IconPlaceholder = (props) => {
       style: {
         left: "50%",
         top: "50%",
-        color: iconColor,
         opacity: 0.15,
         position: "absolute",
         transform: "translate(-50%, -50%)"
@@ -1001,7 +1020,14 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { width, height, background: backgroundColor } }, content);
+  return /* @__PURE__ */ react_exports.createElement(
+    PlaceholderContainer,
+    {
+      "data-test": "icon-placeholder-container",
+      style: { width, height, background: backgroundColor, color: iconColor }
+    },
+    content
+  );
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -1047,9 +1073,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport30 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var numberUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // src/common/utils/dataUtils.ts
 var getFieldName = (field) => typeof field === "string" ? field : field.name;
@@ -1075,7 +1101,7 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
     let avgY = 0;
     let avgRangeStart = Math.floor((i + 1) * every) + 1;
     let avgRangeEnd = Math.floor((i + 2) * every) + 1;
-    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    avgRangeEnd = Math.min(avgRangeEnd, dataLength);
     const avgRangeLength = avgRangeEnd - avgRangeStart;
     for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
       avgX += Number(data[avgRangeStart][0]);
@@ -1110,9 +1136,9 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
 };
 var strictlyCoerceYColumn = (column, options) => {
   const isNullCoercionEnabled = options.nullValueDisplay === "zero";
-  const canLooselyCoerceSomeValues = column.findIndex(
+  const canLooselyCoerceSomeValues = column.some(
     (value) => (0, numberUtils_exports.startsWithNumber)(`${value}`) || isNullCoercionEnabled && value === null
-  ) >= 0;
+  );
   const coercedColumn = [];
   const canDownsampleColumn = !column.some((value) => {
     const coercedValue = Number(value);
@@ -1131,7 +1157,7 @@ var strictlyCoerceYColumn = (column, options) => {
 };
 var strictlyCoerceXColumn = (column, fieldType) => {
   if (fieldType === "number") {
-    const coercedXColumn = column.map((xValue) => Number(xValue));
+    const coercedXColumn = column.map(Number);
     if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
       return coercedXColumn;
     }
@@ -1430,16 +1456,16 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport31 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var FeatureFlags_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
-  if (context && Object.keys(context).find((key) => key === flagName)) {
+  if (context && Object.keys(context).includes(flagName)) {
     return context[flagName];
   }
-  if (Object.keys(FeatureFlags_default).find((key) => key === flagName)) {
+  if (Object.keys(FeatureFlags_default).includes(flagName)) {
     return FeatureFlags_default[flagName];
   }
   return false;
@@ -1450,9 +1476,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport32 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var trellisUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -1469,9 +1495,9 @@ var visualization_canvas_exports = {};
 __export(visualization_canvas_exports, {
   default: () => visualization_canvas_default
 });
-var defaultImport32 = __toESM(require("@splunk/visualization-canvas"));
+var defaultImport33 = __toESM(require("@splunk/visualization-canvas"));
 __reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
-var visualization_canvas_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var visualization_canvas_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/common/components/VizStyleWrapper.jsx
 var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
@@ -1493,27 +1519,27 @@ var Triangle_exports = {};
 __export(Triangle_exports, {
   default: () => Triangle_default
 });
-var defaultImport33 = __toESM(require("@splunk/react-icons/Triangle"));
+var defaultImport34 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
-var Triangle_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var Triangle_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/visualizations-shared/propUtils
 var propUtils_exports = {};
 __export(propUtils_exports, {
   default: () => propUtils_default
 });
-var defaultImport34 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport35 = __toESM(require("@splunk/visualizations-shared/propUtils"));
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var propUtils_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/visualizations-shared/simpleXMLOptions
 var simpleXMLOptions_exports = {};
 __export(simpleXMLOptions_exports, {
   default: () => simpleXMLOptions_default
 });
-var defaultImport35 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
 __reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var simpleXMLOptions_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
@@ -1552,9 +1578,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
+var canvasSupportedTimeSeriesCharts = /* @__PURE__ */ new Set(["splunk.line", "splunk.area"]);
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
+  return canvasSupportedTimeSeriesCharts.has(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -1570,7 +1596,7 @@ var filterChartDataFromInternalFields = (chartData) => {
   return { fields: filteredFields, columns: filteredColumns };
 };
 var convert2DArrayToNumbers = (arr) => {
-  return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
+  return arr.map((subArray) => subArray.map((element) => Number.parseFloat(element)));
 };
 var parseAxisValue = (val) => {
   if (val === void 0 || val === null || val === "auto" || val === "") {
@@ -1608,6 +1634,7 @@ var getLegend = (props) => {
       return (0, visualization_canvas_exports.TopLegendFactory)(__spreadValues({
         wrap: true
       }, commonLegendProps));
+    // Note: By default, use right legend
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
@@ -1740,10 +1767,10 @@ var getSeriesOverrides = (opts) => {
   let spanGaps;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode != null) {
-    spanGaps = true;
-  } else {
+  } else if (nullValueMode == null) {
     spanGaps = void 0;
+  } else {
+    spanGaps = true;
   }
   const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
   const isAreaChart = type === "area";
@@ -2174,11 +2201,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
-  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 xAxisMajorTickSizeNum = xAxisMajorTickSize == null ? void 0 : Number(xAxisMajorTickSize);
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize == null ? void 0 : Number(yAxisMajorTickSize);
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize == null ? void 0 : Number(y2AxisMajorTickSize);
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize == null ? void 0 : Number(yAxisMinorTickSize);
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize == null ? void 0 : Number(y2AxisMinorTickSize);
   const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
@@ -2590,6 +2617,76 @@ var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTr
   });
   return result;
 };
+var buildAllEventCallbackProps = (events, evaluatedOptionsToUse, onEventTrigger, { supportsEvents, hasEventHandlers, mode }) => {
+  if (!supportsEvents) return {};
+  const defaultEvents = {};
+  const userEvents = {};
+  Object.entries(events || {}).forEach(([eventKey, eventConfig]) => {
+    (eventConfig.source === "default" ? defaultEvents : userEvents)[eventKey] = eventConfig;
+  });
+  const userProps = hasEventHandlers && mode === "view" ? buildEventCallbackProps(userEvents, evaluatedOptionsToUse, onEventTrigger) : {};
+  return __spreadValues(__spreadValues({}, userProps), buildEventCallbackProps(defaultEvents, evaluatedOptionsToUse, onEventTrigger));
+};
+var applyContextTimezone = (localeContext) => {
+  if (localeContext.serializedTimezone && !moment_default.getDefaultSplunkTimezone()) {
+    moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
+  }
+};
+var getAsyncOptionsEvaluationParams = ({
+  visualizationID,
+  props,
+  optionsToEvaluate,
+  downsampledDataSources,
+  vizConfig,
+  bypassCloneDeepOptionScope,
+  lazyLoadingDataFrame
+}) => {
+  return {
+    visualizationID,
+    props,
+    options: __spreadValues({}, optionsToEvaluate),
+    dataSources: downsampledDataSources,
+    theme: vizConfig.themes,
+    bypassCloneDeepOptionScope,
+    lazyLoadingDataFrame
+  };
+};
+var evaluateOptionsSync = ({
+  optionsToEvaluate,
+  downsampledDataSources,
+  dataSourcesInState,
+  dataFramesInState,
+  setDataSourcesInState,
+  setDataFramesInState,
+  computeDataFrames,
+  featureFlagContext,
+  themeFunc
+}) => {
+  let dataFrames = dataFramesInState;
+  if (downsampledDataSources !== dataSourcesInState) {
+    setDataSourcesInState(downsampledDataSources);
+    dataFrames = Options_exports.Options.dataFrameFromDataSource(
+      downsampledDataSources,
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
+    setDataFramesInState(dataFrames);
+  }
+  let mergedFrames = dataFrames;
+  if (computeDataFrames && dataFrames) {
+    const derivedFrames = computeDataFrames({
+      dataSources: downsampledDataSources,
+      options: optionsToEvaluate.options
+    });
+    mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+  }
+  return Options_exports.Options.evaluate(
+    optionsToEvaluate,
+    downsampledDataSources,
+    themeFunc,
+    mergedFrames,
+    getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+  );
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -2621,11 +2718,7 @@ var withDashboardViz = (opts) => {
       onRequestParamsChange = lodash_exports.noop
     } = props;
     const localeContext = react_exports.useContext(TimezoneContext_default);
-    if (localeContext.serializedTimezone) {
-      if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
-      }
-    }
+    applyContextTimezone(localeContext);
     const themeFunc = (themeVar) => {
       var _a2, _b;
       return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
@@ -2653,7 +2746,12 @@ var withDashboardViz = (opts) => {
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
     );
     const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
-    const isMounted = react_exports.useRef(true);
+    const bypassCloneDeepOptionScope = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+    );
+    const lazyLoadingDataFrame = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
     const optionsToEvaluate = react_exports.useMemo(() => {
       var _a2;
       const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
@@ -2692,63 +2790,74 @@ var withDashboardViz = (opts) => {
       threshold,
       isDownsamplingEnabled
     });
-    evaluatedOptions = useDeepMemo(() => {
+    const asyncOptionsEvaluationParams = useDeepMemo(
+      () => getAsyncOptionsEvaluationParams({
+        visualizationID,
+        props,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame
+      }),
+      [
+        visualizationID,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame,
+        currentThemeFamily,
+        currentThemeColorScheme,
+        currentThemeDensity,
+        localeContext.serializedTimezone
+      ]
+    );
+    react_exports.useEffect(() => {
+      if (!useAsyncEvaluatedOptions) {
+        return void 0;
+      }
+      let ownsEvaluation = true;
       try {
-        if (useAsyncEvaluatedOptions) {
-          const asyncDynamicOptionsEvaluatorParams = {
-            visualizationID,
-            props,
-            options: optionsToEvaluate,
-            dataSources: downsampledDataSources,
-            theme: vizConfig.themes,
-            bypassCloneDeepOptionScope: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-            ),
-            lazyLoadingDataFrame: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            )
-          };
-          async_dynamic_options_evaluator_default.evaluate(asyncDynamicOptionsEvaluatorParams).then((results) => {
+        async_dynamic_options_evaluator_default.evaluate(asyncOptionsEvaluationParams).then((results) => {
+          if (ownsEvaluation) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(() => {
-            if (isMounted.current) {
-              setUseAsyncEvaluatedOptions(false);
-            }
-          });
-        } else {
-          let dataFrames = dataFramesInState;
-          if (downsampledDataSources !== dataSourcesInState) {
-            setDataSourcesInState(downsampledDataSources);
-            dataFrames = Options_exports.Options.dataFrameFromDataSource(
-              downsampledDataSources,
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            );
-            setDataFramesInState(dataFrames);
           }
-          let mergedFrames = dataFrames;
-          if (computeDataFrames && dataFrames) {
-            const derivedFrames = computeDataFrames({
-              dataSources: downsampledDataSources,
-              options: optionsToEvaluate.options
-            });
-            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+        }).catch(() => {
+          if (ownsEvaluation) {
+            setUseAsyncEvaluatedOptions(false);
           }
-          const result = Options_exports.Options.evaluate(
-            optionsToEvaluate,
-            downsampledDataSources,
-            themeFunc,
-            mergedFrames,
-            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-          );
-          return result;
+        });
+      } catch (e) {
+        setUseAsyncEvaluatedOptions(false);
+      }
+      return () => {
+        ownsEvaluation = false;
+        async_dynamic_options_evaluator_default.reset(visualizationID);
+      };
+    }, [asyncOptionsEvaluationParams, useAsyncEvaluatedOptions, visualizationID]);
+    evaluatedOptions = useDeepMemo(() => {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          return {};
         }
+        return evaluateOptionsSync({
+          optionsToEvaluate,
+          downsampledDataSources,
+          dataSourcesInState,
+          dataFramesInState,
+          setDataSourcesInState,
+          setDataFramesInState,
+          computeDataFrames,
+          featureFlagContext,
+          themeFunc
+        });
       } catch (e) {
         if (e instanceof Error) {
           console.error(`unexpected error evaluating options: ${e.message}`);
         }
         return {};
       }
-      return {};
     }, [
       currentThemeFamily,
       currentThemeColorScheme,
@@ -2758,7 +2867,7 @@ var withDashboardViz = (opts) => {
       localeContext.serializedTimezone,
       useAsyncEvaluatedOptions
     ]);
-    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    const evaluatedOptionsToUse = useAsyncEvaluatedOptions ? evaluatedOptionsAsync : evaluatedOptions;
     let dataSourceMetadata = {};
     const OptionKey = "paginateDataSourceKey";
     const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
@@ -2780,7 +2889,7 @@ var withDashboardViz = (opts) => {
       sortParams,
       paginatorParams
     };
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) === -1 && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+    if (!vizConfig.supports.includes("page-and-sort" /* PAGE_AND_SORT */) && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
       dataSourceMetadata = {};
     }
     const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
@@ -2790,14 +2899,6 @@ var withDashboardViz = (opts) => {
     react_exports.useEffect(() => {
       onComputedProps(clonedEvaluatedOptions);
     });
-    react_exports.useEffect(() => {
-      return () => {
-        if (useAsyncEvaluatedOptions) {
-          isMounted.current = false;
-          async_dynamic_options_evaluator_default.reset(visualizationID);
-        }
-      };
-    }, []);
     const { requiredProps = [], supports } = vizConfig;
     const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
     if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
@@ -2812,7 +2913,16 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const eventCallbackProps = buildAllEventCallbackProps(
+      vizConfig.events,
+      evaluatedOptionsToUse,
+      onEventTrigger,
+      {
+        supportsEvents: vizConfig.supports.includes("events" /* EVENTS */),
+        hasEventHandlers,
+        mode
+      }
+    );
     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.
@@ -2840,8 +2950,9 @@ var withDashboardViz = (opts) => {
     onEventTrigger: SplunkVisualization_default.defaults.onEventTrigger
   });
   DashboardViz.config = vizConfig;
-  return (0, styled_components_exports.withTheme)(
-    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  return Object.assign(
+    (0, styled_components_exports.withTheme)(withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)),
+    { config: vizConfig }
   );
 };
 var withDashboardViz_default = withDashboardViz;
@@ -2851,55 +2962,60 @@ var config_exports = {};
 __export(config_exports, {
   default: () => config_default2
 });
-var defaultImport36 = __toESM(require("@splunk/splunk-utils/config"));
+var defaultImport37 = __toESM(require("@splunk/splunk-utils/config"));
 __reExport(config_exports, require("@splunk/splunk-utils/config"));
-var config_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
-
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-var defaultImport37 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var config_default2 = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/common/utils/textUtils.ts
 var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+var truncateEnd = (text, context, maxWidth, ellipsis) => {
+  for (let i = text.length - 1; i > 0; i -= 1) {
+    const truncatedText = text.slice(0, i) + ellipsis;
+    if (context.measureText(truncatedText).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
+var truncateStart = (text, context, maxWidth, ellipsis) => {
+  for (let i = 0; i < text.length; i += 1) {
+    const truncatedText = ellipsis + text.slice(i);
+    if (context.measureText(truncatedText).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
+var truncateMiddle = (text, context, maxWidth, ellipsis) => {
+  const ellipsisWidth = context.measureText(ellipsis).width;
+  for (let i = 0; i < text.length / 2; i += 1) {
+    const left = text.slice(0, Math.floor(text.length / 2) - i);
+    const right = text.slice(Math.ceil(text.length / 2) + i);
+    const truncatedText = left + ellipsis + right;
+    if (context.measureText(left).width + ellipsisWidth + context.measureText(right).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
 var truncateText = (text, maxWidth, truncationType, font = `10px ${VIZ_FONT_FAMILY}`) => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d");
   if (!context) return text;
   context.font = font;
   const ellipsis = "...";
-  const ellipsisWidth = context.measureText(ellipsis).width;
   const fullTextWidth = context.measureText(text).width;
   if (fullTextWidth <= maxWidth) {
     return text;
   }
   if (truncationType === "ellipsisEnd") {
-    for (let i = text.length - 1; i > 0; i -= 1) {
-      const truncatedText = text.slice(0, i) + ellipsis;
-      if (context.measureText(truncatedText).width <= maxWidth) {
-        return truncatedText;
-      }
-    }
-  } else if (truncationType === "ellipsisStart") {
-    for (let i = 0; i < text.length; i += 1) {
-      const truncatedText = ellipsis + text.slice(i);
-      if (context.measureText(truncatedText).width <= maxWidth) {
-        return truncatedText;
-      }
-    }
-  } else if (truncationType === "ellipsisMiddle") {
-    for (let i = 0; i < text.length / 2; i += 1) {
-      const left = text.slice(0, Math.floor(text.length / 2) - i);
-      const right = text.slice(Math.ceil(text.length / 2) + i);
-      const truncatedText = left + ellipsis + right;
-      if (context.measureText(left).width + ellipsisWidth + context.measureText(right).width <= maxWidth) {
-        return truncatedText;
-      }
-    }
+    return truncateEnd(text, context, maxWidth, ellipsis);
+  }
+  if (truncationType === "ellipsisStart") {
+    return truncateStart(text, context, maxWidth, ellipsis);
+  }
+  if (truncationType === "ellipsisMiddle") {
+    return truncateMiddle(text, context, maxWidth, ellipsis);
   }
   return ellipsis;
 };
@@ -2949,7 +3065,7 @@ function updateTimeDifferences(timeDifferences, lastValidStart, currentStart) {
       timeDifferences.push(timeDiff);
     }
   }
-  return !Number.isNaN(currentStart) ? currentStart : lastValidStart;
+  return Number.isNaN(currentStart) ? lastValidStart : currentStart;
 }
 var toTimestamp = (dateStr, timezone = {}) => {
   try {
@@ -3081,20 +3197,28 @@ function convertTickIntervalToMs(tickInterval) {
   switch (tickInterval) {
     case "1s":
       return 1e3;
+    // 1 second
     case "1m":
       return 6e4;
+    // 1 minute
     case "30m":
       return 18e5;
+    // 30 minutes
     case "1h":
       return 36e5;
+    // 1 hour
     case "12h":
       return 432e5;
+    // 12 hours
     case "1d":
       return 864e5;
+    // 1 day
     case "7d":
       return 6048e5;
+    // 1 week
     case "1mo":
       return 275e7;
+    // 1 month
     default:
       throw new Error("Unsupported tick interval");
   }
@@ -3116,6 +3240,19 @@ var tooltipLocaleTimeFormat = (displaySeconds) => {
     year: "numeric"
   }, seconds);
 };
+var MAX_TOOLTIP_MOVE_TRANSITION_DISTANCE = 200;
+var isNearbyTooltipAnchor = ({
+  anchorPoint,
+  previousAnchorPoint
+}) => {
+  if (!previousAnchorPoint) {
+    return false;
+  }
+  const deltaX = anchorPoint.x - previousAnchorPoint.x;
+  const deltaY = anchorPoint.y - previousAnchorPoint.y;
+  const distance = Math.hypot(deltaX, deltaY);
+  return distance > 0 && distance <= MAX_TOOLTIP_MOVE_TRANSITION_DISTANCE;
+};
 var applyCanvasScale = (u, scaleFactor) => {
   var _a;
   if (!((_a = u.ctx) == null ? void 0 : _a.canvas)) {
@@ -3163,9 +3300,22 @@ var ZoomContext_default = "default" in defaultImport39 ? defaultImport39.default
 
 // src/Timeline/PureTimeline/src/CursorPlugin.tsx
 var FIXED_LANE_HEIGHT = 32;
-var MIN_BAR_WIDTH = 20;
-var CIRCLE_X_OFFSET = 10;
+var MIN_BAR_WIDTH = 1;
+var MIN_BAR_HOVER_WIDTH = 6;
 var CIRCLE_LANE_SCALE_FACTOR = 0.85;
+var EVENT_VERTICAL_HIT_PADDING = FIXED_LANE_HEIGHT * (1 - CIRCLE_LANE_SCALE_FACTOR) / 2;
+var TIMELINE_TOOLTIP_WIDTH = 300;
+var shouldClearOnPointerExit = (event, chartContainer) => {
+  const { relatedTarget } = event;
+  if (event.currentTarget !== chartContainer && relatedTarget !== null) {
+    return false;
+  }
+  if (relatedTarget instanceof Node && chartContainer.contains(relatedTarget)) {
+    return false;
+  }
+  const { target: eventTarget } = event;
+  return eventTarget instanceof Node && chartContainer.contains(eventTarget);
+};
 var CursorPlugin = (props) => {
   const {
     laneSeries,
@@ -3177,22 +3327,24 @@ var CursorPlugin = (props) => {
     setHighlightedLane,
     handleEventClick,
     tooltipRef,
+    scrollContainerRef,
     locale,
     scaleFactor
   } = props;
   let previousTooltipContent = null;
+  const clearTooltip = (chart) => {
+    clearTooltipIfVisible({
+      chart,
+      tooltipRef,
+      setHighlightedLane,
+      setHighlightedEvent,
+      setHighlightedCategory
+    });
+  };
   const handleMouseLeave = (u) => {
     const xCursorLine = u.root.querySelector(".u-cursor-x");
     xCursorLine.classList.add("u-off");
-    tooltipRef.current = {
-      visible: false,
-      overflow: false,
-      content: "",
-      meta: ""
-    };
-    setHighlightedLane(null);
-    setHighlightedEvent(null);
-    setHighlightedCategory(null);
+    clearTooltip(u);
   };
   const handleClick2 = () => {
     if (tooltipRef.current.visible) {
@@ -3206,18 +3358,44 @@ var CursorPlugin = (props) => {
   return {
     hooks: {
       init: (u) => {
+        var _a;
         const chartContainer = u.root;
         chartContainer.addEventListener("click", handleClick2);
         const pointerExitHandler = (e) => {
-          if (!chartContainer.contains(e.relatedTarget)) {
+          if (shouldClearOnPointerExit(e, chartContainer)) {
             handleMouseLeave(u);
           }
         };
+        const pointerMoveHandler = (e) => {
+          if (!tooltipRef.current.visible || !tooltipRef.current.bounds) {
+            return;
+          }
+          const rect = chartContainer.getBoundingClientRect();
+          const dpr = globalThis.devicePixelRatio || 1;
+          const cursorPosition = getCursorPosition({
+            mouseEvent: e,
+            rect,
+            bbox: u.bbox,
+            scaleFactor,
+            dpr
+          });
+          if (!isCursorWithinBounds({ cursorPosition, bounds: tooltipRef.current.bounds })) {
+            clearTooltip(u);
+          }
+        };
+        const scrollContainer = (_a = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a : chartContainer.closest('[data-test="timeline-chart-scroll-area"]');
+        const scrollHandler = () => {
+          clearTooltip(u);
+        };
         chartContainer.addEventListener("pointerleave", pointerExitHandler);
+        document.addEventListener("pointermove", pointerMoveHandler, true);
         document.addEventListener("pointerout", pointerExitHandler, true);
+        scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", scrollHandler);
         return () => {
           chartContainer.removeEventListener("pointerleave", pointerExitHandler);
+          document.removeEventListener("pointermove", pointerMoveHandler, true);
           document.removeEventListener("pointerout", pointerExitHandler, true);
+          scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", scrollHandler);
           chartContainer.removeEventListener("click", handleClick2);
         };
       },
@@ -3225,12 +3403,11 @@ var CursorPlugin = (props) => {
         const mouseEvent = u.cursor.event;
         const xCursorLine = u.root.querySelector(".u-cursor-x");
         if (!mouseEvent) {
-          tooltipRef.current.visible = false;
           toggleCursorLine(xCursorLine, true);
           return;
         }
         const rect = u.root.getBoundingClientRect();
-        const dpr = window.devicePixelRatio || 1;
+        const dpr = globalThis.devicePixelRatio || 1;
         const cursorPosition = getCursorPosition({
           mouseEvent,
           rect,
@@ -3241,13 +3418,7 @@ var CursorPlugin = (props) => {
         u.cursor.left = cursorPosition.x;
         u.cursor.top = cursorPosition.y;
         if (updateCursorLine(xCursorLine, cursorPosition, u, dpr)) {
-          clearTooltipIfVisible({
-            chart: u,
-            tooltipRef,
-            setHighlightedLane,
-            setHighlightedEvent,
-            setHighlightedCategory
-          });
+          clearTooltip(u);
           return;
         }
         const tooltipState = getTooltipState({
@@ -3261,13 +3432,7 @@ var CursorPlugin = (props) => {
           chart: u
         });
         if (!tooltipState) {
-          clearTooltipIfVisible({
-            chart: u,
-            tooltipRef,
-            setHighlightedLane,
-            setHighlightedEvent,
-            setHighlightedCategory
-          });
+          clearTooltip(u);
           return;
         }
         applyTooltipState({
@@ -3353,12 +3518,15 @@ function getTooltipState({
   if (!lane) {
     return null;
   }
-  const tooltip = adjustForOverflow({
-    tooltipX: hit.tooltipX,
-    tooltipY: hit.tooltipY,
-    event: hit.event,
-    plotRightEdge: chart.bbox.width / dpr
-  });
+  const tooltip = {
+    x: hit.anchorX,
+    y: hit.anchorY,
+    eventWidth: hit.eventWidth,
+    eventHeight: hit.eventHeight,
+    eventAnchorOffsetX: hit.eventAnchorOffsetX,
+    bounds: hit.bounds,
+    overflow: hit.anchorX + hit.eventWidth + TIMELINE_TOOLTIP_WIDTH / 2 > chart.bbox.width / dpr
+  };
   const displaySeconds = durationPerTick < 6e4 && hit.event.duration !== 0;
   const content = buildTooltipContent({ lane, event: hit.event, locale, displaySeconds });
   const meta = buildTooltipMeta(hit.event);
@@ -3392,6 +3560,7 @@ function findEventHit({
   widthPerTick,
   xScaleMin
 }) {
+  const candidates = [];
   for (let i = events.length - 1; i >= 0; i -= 1) {
     const event = events[i];
     const metrics = getEventMetrics({
@@ -3402,56 +3571,97 @@ function findEventHit({
       xScaleMin
     });
     if (metrics && hitTestEvent({ metrics, cursorPosition })) {
-      return {
-        event,
-        tooltipX: metrics.tooltipX,
-        tooltipY: metrics.tooltipY
-      };
+      candidates.push({ event, metrics });
     }
   }
-  return null;
+  if (candidates.length === 0) {
+    return null;
+  }
+  const minWidthCandidates = candidates.filter(({ metrics }) => metrics.isMinWidthBar);
+  const hit = minWidthCandidates.length ? getClosestMinWidthHit({ candidates: minWidthCandidates, cursorPosition }) : candidates[0];
+  return {
+    event: hit.event,
+    anchorX: hit.metrics.anchorX,
+    anchorY: hit.metrics.anchorY,
+    eventWidth: hit.metrics.eventWidth,
+    eventHeight: hit.metrics.eventHeight,
+    eventAnchorOffsetX: hit.metrics.eventAnchorOffsetX,
+    bounds: {
+      xMin: hit.metrics.hitMin,
+      xMax: hit.metrics.hitMax,
+      yMin: hit.metrics.hitYMin,
+      yMax: hit.metrics.hitYMax
+    }
+  };
+}
+function getClosestMinWidthHit({ candidates, cursorPosition }) {
+  return candidates.reduce((closest, candidate) => {
+    const closestDistance = Math.abs(cursorPosition.x - closest.metrics.anchorX);
+    const candidateDistance = Math.abs(cursorPosition.x - candidate.metrics.anchorX);
+    return candidateDistance < closestDistance ? candidate : closest;
+  }, candidates[0]);
 }
 function getEventMetrics({ event, cursorSeriesIndex, durationPerTick, widthPerTick, xScaleMin }) {
   const xStartFraction = (event.start - xScaleMin) / durationPerTick;
   const xStartBase = xStartFraction * widthPerTick;
   const xStart = cursorSeriesIndex - 1 === 0 ? xStartBase + 2 : xStartBase;
-  if (event.duration === 0) {
-    const circleRadius = FIXED_LANE_HEIGHT * CIRCLE_LANE_SCALE_FACTOR / 2;
+  const laneTop = (cursorSeriesIndex - 1) * FIXED_LANE_HEIGHT;
+  const laneCenterY = laneTop + FIXED_LANE_HEIGHT / 2;
+  const eventHeight = FIXED_LANE_HEIGHT * CIRCLE_LANE_SCALE_FACTOR;
+  const eventTop = laneCenterY - eventHeight / 2;
+  const eventBottom = eventTop + eventHeight;
+  const hitYMin = eventTop - EVENT_VERTICAL_HIT_PADDING;
+  const hitYMax = eventBottom + EVENT_VERTICAL_HIT_PADDING;
+  if (event.duration === null || event.duration === 0) {
+    const circleRadius = eventHeight / 2;
+    const circleLeft = xStart - circleRadius;
     return {
-      tooltipX: xStart + CIRCLE_X_OFFSET,
-      tooltipY: cursorSeriesIndex * FIXED_LANE_HEIGHT,
-      hitMin: xStart - circleRadius,
-      hitMax: xStart + circleRadius
+      anchorX: circleLeft,
+      anchorY: eventTop,
+      eventWidth: eventHeight,
+      eventHeight,
+      eventAnchorOffsetX: circleRadius,
+      hitMin: circleLeft,
+      hitMax: xStart + circleRadius,
+      hitYMin,
+      hitYMax
     };
   }
   const durationWidth = event.duration / durationPerTick * widthPerTick;
   const barWidth = Math.max(durationWidth, MIN_BAR_WIDTH);
+  const isMinWidthBar = barWidth <= MIN_BAR_WIDTH;
+  const hitXMin = isMinWidthBar ? xStart - MIN_BAR_HOVER_WIDTH / 2 : xStart;
+  const hitXMax = isMinWidthBar ? xStart + MIN_BAR_HOVER_WIDTH / 2 : xStart + barWidth;
   return {
-    tooltipX: xStart + CIRCLE_X_OFFSET,
-    tooltipY: cursorSeriesIndex * FIXED_LANE_HEIGHT,
-    hitMin: xStart,
-    hitMax: xStart + barWidth
+    anchorX: xStart,
+    anchorY: eventTop,
+    eventWidth: barWidth,
+    eventHeight,
+    eventAnchorOffsetX: 0,
+    hitMin: hitXMin,
+    hitMax: hitXMax,
+    hitYMin,
+    hitYMax,
+    isMinWidthBar
   };
 }
 function hitTestEvent({ metrics, cursorPosition }) {
-  const { x } = cursorPosition;
-  return x >= metrics.hitMin && x <= metrics.hitMax;
+  return isCursorWithinBounds({
+    cursorPosition,
+    bounds: {
+      xMin: metrics.hitMin,
+      xMax: metrics.hitMax,
+      yMin: metrics.hitYMin,
+      yMax: metrics.hitYMax
+    }
+  });
 }
-function adjustForOverflow({ tooltipX, tooltipY, event, plotRightEdge }) {
-  const tooltipWidth = 85;
-  let overflow = false;
-  let adjustedX = tooltipX;
-  let adjustedY = tooltipY;
-  if (tooltipX + tooltipWidth > plotRightEdge) {
-    overflow = true;
-    adjustedY -= FIXED_LANE_HEIGHT / 2;
-    adjustedX -= event.duration === 0 ? FIXED_LANE_HEIGHT : MIN_BAR_WIDTH;
-  }
-  return {
-    x: adjustedX,
-    y: adjustedY,
-    overflow
-  };
+function isCursorWithinBounds({
+  cursorPosition,
+  bounds
+}) {
+  const { x, y } = cursorPosition;
+  return x >= bounds.xMin && x <= bounds.xMax && y >= bounds.yMin && y <= bounds.yMax;
 }
 function buildTooltipContent({ lane, event, locale, displaySeconds }) {
   const startTime = new Date(event.start).toLocaleTimeString(
@@ -3485,6 +3695,10 @@ function applyTooltipState({
     visible: true,
     x: tooltipState.tooltip.x,
     y: tooltipState.tooltip.y,
+    eventWidth: tooltipState.tooltip.eventWidth,
+    eventHeight: tooltipState.tooltip.eventHeight,
+    eventAnchorOffsetX: tooltipState.tooltip.eventAnchorOffsetX,
+    bounds: tooltipState.tooltip.bounds,
     overflow: tooltipState.tooltip.overflow,
     content: tooltipState.content,
     meta: tooltipState.meta
@@ -3504,12 +3718,9 @@ function clearTooltipIfVisible({
     return;
   }
   chart.root.style.cursor = "default";
-  tooltipRef.current = {
-    visible: false,
-    overflow: false,
-    content: "",
-    meta: ""
-  };
+  tooltipRef.current = __spreadProps(__spreadValues({}, tooltipRef.current), {
+    visible: false
+  });
   setHighlightedLane(null);
   setHighlightedEvent(null);
   setHighlightedCategory(null);
@@ -3620,7 +3831,7 @@ var TimelinePlugin = ({
 var TimelinePlugin_default = TimelinePlugin;
 
 // src/Timeline/PureTimeline/src/XAxisPlugin.tsx
-var X_AXIS_HEIGHT = 60;
+var X_AXIS_HEIGHT = 50;
 var XAxisPlugin = ({
   durationPerTick = 0,
   numTicks = 0,
@@ -3660,7 +3871,6 @@ var XAxisPlugin = ({
       draw: (u) => {
         const { ctx } = u;
         const scaleMin = u.scales.x.min;
-        const maxLabelWidth = 50;
         const ticks = [scaleMin];
         for (let i = 1; i <= numTicks; i += 1) {
           ticks.push(scaleMin + i * durationPerTick);
@@ -3716,7 +3926,9 @@ var XAxisPlugin = ({
           } else {
             xTickPosition = i * (u.width / numTicks);
           }
-          if (i === ticks.length - 1 && xTickPosition + maxLabelWidth > u.width) {
+          const label = labels[i];
+          const labelPixelWidth = label ? Math.max(...label.map((line) => ctx.measureText(line).width)) : 0;
+          if (xTickPosition + labelPixelWidth > u.width) {
             return;
           }
           const yLabelPosition = xAxisY + tickHeight + labelOffset;
@@ -3726,7 +3938,6 @@ var XAxisPlugin = ({
           ctx.strokeStyle = "rgba(144, 144, 144, 0.5)";
           ctx.lineWidth = i === 0 ? 1 : 0.5;
           ctx.stroke();
-          const label = labels[i];
           if (label) {
             label.forEach((line, idx) => {
               ctx.fillText(line, xTickPosition, yLabelPosition + idx * lineHeight);
@@ -3802,12 +4013,14 @@ var TimelineYAxis = ({
         laneTextColor = theme.contentColorActive;
       }
     }
+    const laneText = lane.toString();
     const truncatedText = truncateText(
-      lane.toString(),
+      laneText,
       yAxisLabelWidth - lanePadding,
       "ellipsisMiddle",
       `14px ${VIZ_FONT_FAMILY}`
     );
+    const isTruncated = truncatedText !== laneText;
     return /* @__PURE__ */ react_exports.createElement(
       YAxisLane,
       {
@@ -3818,6 +4031,7 @@ var TimelineYAxis = ({
         isEven: (lanes.length - index - 1) % 2 === 0,
         backgroundColor,
         clickable: !!handleLaneClick,
+        title: isTruncated ? laneText : void 0,
         onClick: () => {
           handleLaneClick == null ? void 0 : handleLaneClick(lane);
         }
@@ -3834,35 +4048,48 @@ TimelineYAxis.propTypes = {
 var TimelineYAxis_default = TimelineYAxis;
 
 // src/Timeline/PureTimeline/src/TimelineLegend.tsx
-var LEGEND_WIDTH = 88;
+var LEGEND_WIDTH = 79;
+var SCROLLBAR_GUTTER_WIDTH = 16;
 var LEGEND_TEXT_WIDTH = 55;
+var BOTTOM_LEGEND_MIN_HEIGHT = 34;
 var LegendContainer = styled_components_default.div`
     display: flex;
-    justify-content: center;
+    justify-content: ${({ legendDisplay, hasVerticalOverflow }) => legendDisplay === "right" && hasVerticalOverflow ? "flex-start" : "center"};
     flex-direction: ${({ legendDisplay }) => legendDisplay === "bottom" ? "row" : "column"};
     align-items: flex-start;
     background-color: ${({ backgroundColor }) => backgroundColor};
     color: #fafafa;
     font-size: 10px;
-    ${({ legendDisplay, height, width, yAxisLabelWidth }) => legendDisplay === "right" ? `
+    flex-shrink: 0;
+    box-sizing: border-box;
+    padding-right: ${({ scrollbarGutterWidth }) => scrollbarGutterWidth}px;
+    ${({ legendDisplay, height, maxHeight, yAxisLabelWidth }) => legendDisplay === "right" ? `
                 width: ${LEGEND_WIDTH}px;
-                height: ${height}px;
-                margin-top: -30px;
-                margin-left: 10px;
-                margin-right: 12px;
+                min-height: ${Math.min(height, maxHeight)}px;
+                max-height: ${maxHeight}px;
+                align-self: flex-start;
+                margin-left: 9px;
                 overflow-x: hidden;
+                overflow-y: auto;
             ` : `
                 flex-wrap: wrap;
-                height: 60px;
-                width: ${width}px;
+                align-content: flex-start;
+                min-height: ${BOTTOM_LEGEND_MIN_HEIGHT}px;
+                max-height: ${maxHeight}px;
+                overflow-y: auto;
+                width: calc(100% - ${yAxisLabelWidth}px);
                 margin-left: ${yAxisLabelWidth}px;
-                padding-bottom: 10px;
+                padding-top: 8px;
+                padding-bottom: 0;
             `}
 `;
 var LegendItem = styled_components_default.div`
     display: flex;
     align-items: ${({ legendTruncation }) => legendTruncation === "ellipsisOff" ? "flex-start" : "center"};
-    margin: ${({ legendDisplay }) => legendDisplay === "bottom" ? "10px 20px 10px 0px" : "4px"};
+    margin: ${({ legendDisplay }) => legendDisplay === "bottom" ? "4px 20px 4px 0px" : "4px"};
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     cursor: pointer;
     opacity: ${({ isHighlighted }) => isHighlighted ? 1 : 0.5};
     transition: opacity 0.2s ease;
@@ -3889,19 +4116,43 @@ var LegendText = styled_components_default.div`
         `}
     font-size: 10px;
     color: ${themes_exports.variables.contentColorActive};
+    max-width: 100%;
+    min-width: 0;
 `;
 var TimelineLegend = ({
   backgroundColor,
   categoryColors,
   highlightedCategory = null,
   setHighlightedCategory,
-  height,
-  width,
   handleLegendClick: handleLegendClick2,
   legendDisplay = "right",
   legendTruncation = "ellipsisEnd",
+  height = 0,
+  maxHeight = height,
   yAxisLabelWidth = 0
 }) => {
+  const containerRef = react_exports.useRef(null);
+  const [scrollbarGutter, setScrollbarGutter] = react_exports.useState({
+    reservedWidth: 0,
+    paddingRight: 0,
+    hasVerticalOverflow: false
+  });
+  const categoryColorEntries = Array.from(categoryColors.entries());
+  const legendTextWidth = Math.max(0, LEGEND_TEXT_WIDTH - scrollbarGutter.reservedWidth);
+  react_exports.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const hasVerticalOverflow = el.scrollHeight > el.clientHeight;
+    const measuredScrollbarWidth = hasVerticalOverflow ? Math.max(0, el.offsetWidth - el.clientWidth) : 0;
+    const nextGutter = hasVerticalOverflow ? {
+      reservedWidth: Math.max(SCROLLBAR_GUTTER_WIDTH, measuredScrollbarWidth),
+      paddingRight: Math.max(0, SCROLLBAR_GUTTER_WIDTH - measuredScrollbarWidth),
+      hasVerticalOverflow
+    } : { reservedWidth: 0, paddingRight: 0, hasVerticalOverflow };
+    setScrollbarGutter(
+      (current) => current.reservedWidth === nextGutter.reservedWidth && current.paddingRight === nextGutter.paddingRight && current.hasVerticalOverflow === nextGutter.hasVerticalOverflow ? current : nextGutter
+    );
+  }, [categoryColors, height, legendDisplay, legendTruncation, maxHeight]);
   const handleMouseEnter = (category) => {
     setHighlightedCategory == null ? void 0 : setHighlightedCategory(category);
   };
@@ -3911,31 +4162,36 @@ var TimelineLegend = ({
   return /* @__PURE__ */ react_exports.createElement(
     LegendContainer,
     {
+      ref: containerRef,
       "data-test": "legend-container",
       "data-test-position-value": legendDisplay,
       "data-test-truncation-value": legendTruncation,
       legendDisplay,
       backgroundColor,
+      yAxisLabelWidth,
       height,
-      width,
-      yAxisLabelWidth
+      maxHeight,
+      scrollbarGutterWidth: scrollbarGutter.paddingRight,
+      hasVerticalOverflow: scrollbarGutter.hasVerticalOverflow
     },
-    Array.from(categoryColors.entries()).map(([category, color]) => {
+    categoryColorEntries.map(([category, color]) => {
       const isHighlighted = !highlightedCategory || highlightedCategory === category;
-      const truncatedText = legendTruncation === "ellipsisOff" || legendDisplay === "bottom" ? category : truncateText(category, LEGEND_TEXT_WIDTH, legendTruncation);
+      const truncatedText = legendTruncation === "ellipsisOff" || legendDisplay === "bottom" ? category : truncateText(category, legendTextWidth, legendTruncation);
+      const canTruncate = legendTruncation !== "ellipsisOff";
       return /* @__PURE__ */ react_exports.createElement(
         LegendItem,
         {
           "data-test": "legend-item",
           key: category,
-          color,
           isHighlighted,
           legendDisplay,
           legendTruncation,
+          title: canTruncate ? category : void 0,
+          "aria-label": category,
           onMouseEnter: () => handleMouseEnter(category),
           onMouseLeave: handleMouseLeave,
           onClick: () => {
-            handleLegendClick2(category);
+            handleLegendClick2 == null ? void 0 : handleLegendClick2(category);
           }
         },
         /* @__PURE__ */ react_exports.createElement(
@@ -3955,104 +4211,133 @@ var TimelineLegend = ({
 };
 TimelineLegend.propTypes = {
   backgroundColor: prop_types_exports.string.isRequired,
-  height: prop_types_exports.number.isRequired,
-  legendDisplay: prop_types_exports.oneOf(["right", "bottom"]),
+  height: prop_types_exports.number,
+  legendDisplay: prop_types_exports.oneOf(["right", "bottom", "off"]),
   legendTruncation: prop_types_exports.oneOf(["ellipsisEnd", "ellipsisMiddle", "ellipsisStart", "ellipsisOff"]),
   categoryColors: prop_types_exports.any,
   highlightedCategory: prop_types_exports.string,
-  setHighlightedCategory: prop_types_exports.func
+  setHighlightedCategory: prop_types_exports.func,
+  maxHeight: prop_types_exports.number
 };
 var TimelineLegend_default = TimelineLegend;
 
-// esm-externals:@splunk/themes/useSplunkTheme
-var useSplunkTheme_exports = {};
-__export(useSplunkTheme_exports, {
-  default: () => useSplunkTheme_default
+// esm-externals:@splunk/react-ui/Popover
+var Popover_exports = {};
+__export(Popover_exports, {
+  default: () => Popover_default
 });
-var defaultImport40 = __toESM(require("@splunk/themes/useSplunkTheme"));
-__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var defaultImport40 = __toESM(require("@splunk/react-ui/Popover"));
+__reExport(Popover_exports, require("@splunk/react-ui/Popover"));
+var Popover_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/Timeline/PureTimeline/src/TimelineTooltip.tsx
-var TooltipContainer = styled_components_default.div`
+var TOOLTIP_ANCHOR_GAP = 4;
+var TOOLTIP_MOVE_TRANSITION = "transform 0.1s ease-out, left 0.1s ease-out, top 0.1s ease-out";
+var VirtualAnchor = styled_components_default.div`
     position: absolute;
-    background-color: ${({ backgroundColor }) => `${backgroundColor}`};
-    box-shadow: ${themes_exports.variables.overlayShadow};
-    padding: 12px 16px;
-    border-radius: 3px;
     pointer-events: none;
-    display: ${({ visible }) => visible ? "block" : "none"};
-    white-space: nowrap;
+    width: ${({ width }) => `${width}px`};
+    height: ${({ height }) => `${height}px`};
     left: ${({ x }) => `${x}px`};
-    top: ${({ y, chartOverflow }) => `${chartOverflow ? y : y + 7}px`};
-    transform: ${({ chartOverflow }) => chartOverflow ? "translate(-100%, -50%);" : "translate(-55%, 0);"}
-    transition: left 0.1s ease-out, top 0.1s ease-out;
-    z-index: 1000;
-
-    ::after {
-        content: '';
-        position: absolute;
-        ${({ chartOverflow, backgroundColor }) => chartOverflow ? `
-            top: 50%;
-            left: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-bottom-color: transparent;
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-left-color: ${backgroundColor};
-        ` : `
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-bottom-color: ${backgroundColor};
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-left-color: transparent;
-        `}
-    }
-`;
-var TooltipLabel = styled_components_default.div`
-    color: ${themes_exports.variables.contentColorDefault};
+    top: ${({ y }) => `${y}px`};
 `;
-var TooltipValue = styled_components_default.div`
-    color: ${themes_exports.variables.contentColorActive};
+var TooltipContainer = styled_components_default.div`
+    padding: 12px 16px;
 `;
-var TooltipContent = styled_components_default.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 16px;
+var TooltipTable = styled_components_default.table`
+    border-collapse: collapse;
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
+    max-width: 280px;
 `;
-var TimelineTooltip = ({ visible, content, x, y, overflow }) => {
-  const theme = useSplunkTheme_default();
-  let popoverBackground = "#33343b";
-  if (theme.isPrisma) {
-    popoverBackground = theme.backgroundColorPopup;
-  } else if (theme.isEnterprise && theme.isLight) {
-    popoverBackground = theme.white;
-  }
-  return /* @__PURE__ */ react_default.createElement(
-    TooltipContainer,
+var TooltipLabel = styled_components_default.td`
+    color: ${themes_exports.variables.contentColorDefault};
+    overflow-wrap: normal;
+    word-break: normal;
+    white-space: normal;
+    vertical-align: top;
+    padding-right: 16px;
+    padding-bottom: 2px;
+    min-width: 8ch;
+    max-width: 18ch;
+`;
+var TooltipValue = styled_components_default.td`
+    color: ${themes_exports.variables.contentColorActive};
+    overflow-wrap: anywhere;
+    word-break: normal;
+    white-space: normal;
+    vertical-align: top;
+    text-align: right;
+    padding-bottom: 2px;
+`;
+var POPOVER_STYLE = { pointerEvents: "none" };
+var TimelineTooltip = ({
+  visible,
+  content,
+  x,
+  y,
+  eventWidth = 0,
+  eventHeight = 0,
+  eventAnchorOffsetX = 0,
+  overflow,
+  scaleFactor = 1
+}) => {
+  const [anchorEl, setAnchorEl] = react_default.useState(null);
+  const preferredPlacement = overflow ? "left" : "below";
+  const previousAnchorRef = react_default.useRef(null);
+  const anchorX = x - TOOLTIP_ANCHOR_GAP;
+  const anchorY = y - TOOLTIP_ANCHOR_GAP;
+  const anchorWidth = eventWidth + TOOLTIP_ANCHOR_GAP * 2;
+  const anchorHeight = eventHeight + TOOLTIP_ANCHOR_GAP * 2;
+  const pointTo = overflow ? void 0 : { x: (eventAnchorOffsetX + TOOLTIP_ANCHOR_GAP) * scaleFactor };
+  const tooltipRows = Object.entries(content).filter(([, value]) => value !== void 0 && value !== null);
+  const open = visible && anchorEl !== null;
+  const previousAnchor = previousAnchorRef.current;
+  const shouldTransitionTooltipMove = open ? isNearbyTooltipAnchor({
+    anchorPoint: { x: anchorX, y: anchorY },
+    previousAnchorPoint: previousAnchor
+  }) : false;
+  react_default.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    previousAnchorRef.current = { x: anchorX, y: anchorY };
+  }, [anchorX, anchorY, open]);
+  const applyOuterPopoverStyles = react_default.useCallback(
+    (element) => {
+      if (!element) return;
+      const { style } = element;
+      style.pointerEvents = "none";
+      style.minWidth = "0";
+      style.transition = shouldTransitionTooltipMove ? TOOLTIP_MOVE_TRANSITION : "none";
+    },
+    [shouldTransitionTooltipMove]
+  );
+  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
+    VirtualAnchor,
+    {
+      ref: setAnchorEl,
+      x: anchorX,
+      y: anchorY,
+      width: anchorWidth,
+      height: anchorHeight,
+      "data-test": "timeline-tooltip-anchor"
+    }
+  ), /* @__PURE__ */ react_default.createElement(
+    Popover_default,
     {
       "data-test": "timeline-tooltip",
-      backgroundColor: popoverBackground,
-      visible,
-      x,
-      y,
-      chartOverflow: overflow
+      open,
+      anchor: anchorEl,
+      defaultPlacement: preferredPlacement,
+      outerRef: applyOuterPopoverStyles,
+      pointTo,
+      repositionMode: "flip",
+      style: POPOVER_STYLE
     },
-    Object.entries(content).map(
-      ([key, value]) => value !== void 0 && value !== null && /* @__PURE__ */ react_default.createElement(TooltipContent, { key }, /* @__PURE__ */ react_default.createElement(TooltipLabel, null, key.charAt(0).toUpperCase() + key.slice(1)), /* @__PURE__ */ react_default.createElement(TooltipValue, null, value))
-    )
-  );
+    /* @__PURE__ */ react_default.createElement(TooltipContainer, null, /* @__PURE__ */ react_default.createElement(TooltipTable, null, /* @__PURE__ */ react_default.createElement("tbody", null, tooltipRows.map(([key, value]) => /* @__PURE__ */ react_default.createElement("tr", { key }, /* @__PURE__ */ react_default.createElement(TooltipLabel, null, key.charAt(0).toUpperCase() + key.slice(1)), /* @__PURE__ */ react_default.createElement(TooltipValue, null, value))))))
+  ));
 };
 var TimelineTooltip_default = TimelineTooltip;
 
@@ -4066,18 +4351,66 @@ __reExport(uPlot_min_exports, require("uplot/dist/uPlot.min.css"));
 var uPlot_min_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/Timeline/PureTimeline/src/TimelineUplot.tsx
+var TIMELINE_CONTAINER_PADDING = 10;
+var BOTTOM_LEGEND_SCROLLBAR_GAP = 8;
+var LANE_HEIGHT = 32;
+var SCROLLBAR_GUTTER_WIDTH2 = 24;
+var RIGHT_LEGEND_FOOTPRINT = 88;
+var getTimelineLayout = ({
+  width,
+  height,
+  yAxisLabelWidth,
+  laneCount,
+  showLegend = false,
+  legendDisplay
+}) => {
+  const laneBandHeight = LANE_HEIGHT * laneCount;
+  const chartHeight = laneBandHeight + X_AXIS_HEIGHT;
+  const visibleTimelineHeight = Math.max(0, height - TIMELINE_CONTAINER_PADDING * 2);
+  const bottomLegendReservedHeight = showLegend && legendDisplay === "bottom" ? BOTTOM_LEGEND_SCROLLBAR_GAP + BOTTOM_LEGEND_MIN_HEIGHT : 0;
+  const reserveScrollbarGutter = chartHeight > Math.max(0, visibleTimelineHeight - bottomLegendReservedHeight);
+  const legendWidth = showLegend && legendDisplay === "right" ? RIGHT_LEGEND_FOOTPRINT : 0;
+  const chartWidth = Math.max(
+    1,
+    width - yAxisLabelWidth - legendWidth - TIMELINE_CONTAINER_PADDING * 2 - (reserveScrollbarGutter ? SCROLLBAR_GUTTER_WIDTH2 : 0)
+  );
+  const legendMaxHeight = legendDisplay === "bottom" ? Math.max(
+    BOTTOM_LEGEND_MIN_HEIGHT,
+    visibleTimelineHeight - BOTTOM_LEGEND_SCROLLBAR_GAP - chartHeight
+  ) : visibleTimelineHeight;
+  return {
+    laneBandHeight,
+    chartHeight,
+    chartWidth,
+    reserveScrollbarGutter,
+    legendMaxHeight
+  };
+};
 var TimelineUplotContainer = styled_components_default.div`
     display: flex;
     flex-direction: ${({ legendDisplay }) => legendDisplay === "bottom" ? "column" : "row"};
     width: 100%;
     height: 100%;
-    padding: 10px 10px;
-    overflow-y: scroll;
+    padding: ${TIMELINE_CONTAINER_PADDING}px ${TIMELINE_CONTAINER_PADDING}px;
+    overflow: visible;
+    box-sizing: border-box;
+    position: relative;
+    ${({ legendDisplay }) => legendDisplay === "bottom" ? `gap: ${BOTTOM_LEGEND_SCROLLBAR_GAP}px;` : ""}
+`;
+var TimelineChartScrollArea = styled_components_default.div`
+    flex: ${({ hasBottomLegend }) => hasBottomLegend ? "0 0 auto" : "1 1 auto"};
+    max-height: ${({ hasBottomLegend }) => hasBottomLegend ? `calc(100% - ${BOTTOM_LEGEND_SCROLLBAR_GAP + BOTTOM_LEGEND_MIN_HEIGHT}px)` : "none"};
+    min-height: 0;
+    min-width: 0;
+    overflow-y: auto;
     overflow-x: hidden;
+    box-sizing: border-box;
+    padding-right: ${({ reserveScrollbarGutter }) => reserveScrollbarGutter ? SCROLLBAR_GUTTER_WIDTH2 : 0}px;
 `;
 var TimelineUplotWrapper = styled_components_default.div`
     width: ${({ width }) => `${width}px`};
     position: relative;
+    overflow: visible;
 `;
 var TimelineChartContainer = styled_components_default.div`
     display: flex;
@@ -4087,6 +4420,7 @@ var TimelineChartContainer = styled_components_default.div`
 var TimelineUplot = ({
   backgroundColor,
   width,
+  height,
   yAxisLabelWidth,
   laneSeries,
   lanes,
@@ -4106,30 +4440,36 @@ var TimelineUplot = ({
   const [isFontLoaded, setIsFontLoaded] = react_exports.useState(false);
   const theme = (0, themes_exports.useSplunkTheme)();
   const zoom = (0, ZoomContext_exports.useZoomContext)();
-  const fullscreenEl = typeof document !== "undefined" ? document.fullscreenElement : null;
+  const fullscreenEl = typeof document === "undefined" ? null : document.fullscreenElement;
   const scaleFactor = fullscreenEl && fullscreenEl.tagName !== "BODY" ? 1 : zoom || 1;
   const { version: dprVersion } = (0, visualization_canvas_exports.useDevicePixelRatio)();
+  const scrollContainerRef = react_exports.useRef(null);
   const tooltipRef = react_exports.useRef({
     visible: false,
     x: 0,
     y: 0,
+    eventAnchorOffsetX: 0,
+    bounds: null,
     overflow: false,
     content: {},
     meta: {}
   });
-  const xMin = Math.min(...laneSeries.flatMap((lane) => lane.map((dp) => dp.start))) || 0;
-  const xMax = Math.max(...laneSeries.flatMap((lane) => lane.map((dp) => dp.end))) || 1;
-  const xAxisHeight = 60;
-  const laneHeight = 32;
-  const padding = 20;
-  const legendWidth = showLegend && legendDisplay === "right" ? 88 : 0;
-  const containerWidth = typeof width === "string" ? window.innerWidth : width;
-  const chartWidth = containerWidth - yAxisLabelWidth - legendWidth - padding;
-  const chartHeight = laneHeight * lanes.length + xAxisHeight;
+  const eventStarts = laneSeries.flatMap((lane) => lane.map((dp) => dp.start));
+  const eventEnds = laneSeries.flatMap((lane) => lane.map((dp) => dp.end));
+  const xMin = eventStarts.length ? Math.min(...eventStarts) : 0;
+  const xMax = eventEnds.length ? Math.max(...eventEnds) : 1;
+  const { laneBandHeight, chartHeight, chartWidth, reserveScrollbarGutter, legendMaxHeight } = getTimelineLayout({
+    width,
+    height,
+    yAxisLabelWidth,
+    laneCount: lanes.length,
+    showLegend,
+    legendDisplay
+  });
   const granularityMultiplier = convertTickIntervalToMs(tickInterval);
   const totalRange = xMax + granularityMultiplier - xMin;
   const totalNumberOfTicks = totalRange / granularityMultiplier;
-  const maxNumOfTicks = calculateMaxNumberOfTicks(chartWidth, 50, 10);
+  const maxNumOfTicks = Math.max(1, calculateMaxNumberOfTicks(chartWidth, 50, 10));
   const unitsPerTick = Math.ceil(totalNumberOfTicks / maxNumOfTicks);
   const numTicks = totalNumberOfTicks / unitsPerTick;
   const durationPerTick = granularityMultiplier * unitsPerTick;
@@ -4193,6 +4533,7 @@ var TimelineUplot = ({
           setHighlightedLane,
           handleEventClick,
           tooltipRef,
+          scrollContainerRef,
           locale,
           scaleFactor
         })
@@ -4221,32 +4562,42 @@ var TimelineUplot = ({
       setHighlightedLane,
       handleEventClick,
       tooltipRef,
+      scrollContainerRef,
       theme
     ]
   );
-  return /* @__PURE__ */ react_exports.createElement(TimelineUplotContainer, { legendDisplay, "data-test": "timeline-uplot-container" }, /* @__PURE__ */ react_exports.createElement(TimelineChartContainer, { "data-test": "timeline-chart-container" }, /* @__PURE__ */ react_exports.createElement(
-    TimelineYAxis_default,
+  return /* @__PURE__ */ react_exports.createElement(TimelineUplotContainer, { legendDisplay, "data-test": "timeline-uplot-container" }, /* @__PURE__ */ react_exports.createElement(
+    TimelineChartScrollArea,
     {
-      height: chartHeight,
-      laneHeight,
-      lanes,
-      yAxisLabelWidth,
-      backgroundColor,
-      highlightedLane,
-      handleLaneClick
-    }
-  ), /* @__PURE__ */ react_exports.createElement(TimelineUplotWrapper, { width: chartWidth }, /* @__PURE__ */ react_exports.createElement(
-    uplot_react_default,
-    {
-      key: `timeline-${dprVersion}-${scaleFactor}`,
-      options: opts,
-      data: [[xMin], ...lanes.map(() => [])]
-    }
-  ), /* @__PURE__ */ react_exports.createElement(TimelineTooltip_default, __spreadValues({}, tooltipRef.current)))), showLegend && /* @__PURE__ */ react_exports.createElement(
+      ref: scrollContainerRef,
+      "data-test": "timeline-chart-scroll-area",
+      hasBottomLegend: showLegend && legendDisplay === "bottom",
+      reserveScrollbarGutter
+    },
+    /* @__PURE__ */ react_exports.createElement(TimelineChartContainer, { "data-test": "timeline-chart-container" }, /* @__PURE__ */ react_exports.createElement(
+      TimelineYAxis_default,
+      {
+        height: chartHeight,
+        laneHeight: LANE_HEIGHT,
+        lanes,
+        yAxisLabelWidth,
+        backgroundColor,
+        highlightedLane,
+        handleLaneClick
+      }
+    ), /* @__PURE__ */ react_exports.createElement(TimelineUplotWrapper, { width: chartWidth }, /* @__PURE__ */ react_exports.createElement(
+      uplot_react_default,
+      {
+        key: `timeline-${dprVersion}-${scaleFactor}`,
+        options: opts,
+        data: [[xMin], ...lanes.map(() => [])]
+      }
+    ), /* @__PURE__ */ react_exports.createElement(TimelineTooltip_default, __spreadProps(__spreadValues({}, tooltipRef.current), { scaleFactor }))))
+  ), showLegend && /* @__PURE__ */ react_exports.createElement(
     TimelineLegend_default,
     {
-      height: chartHeight,
-      width: chartWidth,
+      height: laneBandHeight,
+      maxHeight: legendMaxHeight,
       yAxisLabelWidth,
       backgroundColor,
       legendDisplay,
@@ -4296,6 +4647,15 @@ var PureTimeline = (_a) => {
   const showLegend = (!dataColors || (dataColors == null ? void 0 : dataColors.length) === 0) && (category == null ? void 0 : category.length) > 0 && (legendDisplay === "right" || legendDisplay === "bottom");
   const timezone = react_exports.useContext(TimezoneContext_default);
   const theme = (0, themes_exports.useSplunkTheme)();
+  const [containerSize, setContainerSize] = react_exports.useState({
+    width: typeof width === "number" ? width : 0,
+    height: typeof height === "number" ? height : 0
+  });
+  const handleResize = react_exports.useCallback((nextWidth, nextHeight) => {
+    setContainerSize(
+      (current) => current.width === nextWidth && current.height === nextHeight ? current : { width: nextWidth, height: nextHeight }
+    );
+  }, []);
   const { laneSeries, lanes, categoricalColors, tickInterval, hasInvalidData } = mapDataToTimeline({
     resultLimit,
     x,
@@ -4370,11 +4730,13 @@ var PureTimeline = (_a) => {
       height,
       "data-test-data-colors": JSON.stringify(dataColors)
     },
+    /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: handleResize }),
     /* @__PURE__ */ react_exports.createElement(
       TimelineUplot_default,
       {
         backgroundColor: backgroundColor || theme.backgroundColorPage,
-        width,
+        width: containerSize.width,
+        height: containerSize.height,
         lanes,
         laneSeries,
         yAxisLabelWidth,
@@ -4397,8 +4759,8 @@ PureTimeline.propTypes = {
   duration: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])),
   category: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])),
   backgroundColor: prop_types_exports.string,
-  width: prop_types_exports.number,
-  height: prop_types_exports.number,
+  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
   xField: prop_types_exports.string,
   yField: prop_types_exports.string,
   durationField: prop_types_exports.string,
@@ -4536,7 +4898,7 @@ var computeVizProps = (_a) => {
 };
 function convertToNumbers(arr) {
   return arr.map((item) => {
-    return (0, types_exports.isNumber)(item) ? parseFloat(item) : 0;
+    return (0, types_exports.isNumber)(item) ? Number.parseFloat(item) : 0;
   });
 }
 function normalizeSeriesColors(seriesColors) {