@splunk/visualizations 28.2.1 → 28.3.0

package/Timeline.js

@@ -115,41 +115,32 @@ var defaultImport5 = __toESM(require("@splunk/visualization-encoding/utils/types
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
 var types_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
 
-// esm-externals:@splunk/visualization-icons
-var visualization_icons_exports = {};
-__export(visualization_icons_exports, {
-  default: () => visualization_icons_default
-});
-var defaultImport6 = __toESM(require("@splunk/visualization-icons"));
-__reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
-
 // esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
 var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport7 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport6 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+var PresetPalettes_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
 
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport8 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport7 = __toESM(require("@splunk/ui-utils/i18n"));
 __reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var i18n_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport9 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport8 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var configUtils_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -183,18 +174,18 @@ var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport10 = __toESM(require("@splunk/themes/pick"));
+var defaultImport9 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var pick_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport11 = __toESM(require("@splunk/themes/variables"));
+var defaultImport10 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var variables_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // src/common/ThemedDefaults.tsx
 var defaultBackgroundColor = (props) => pick_default({
@@ -437,8 +428,7 @@ var config = {
   /**
    * viz icon
    */
-  icon: visualization_icons_exports.Timeline,
-  // placeholderIcon: TimelinePlaceholderIcon, TBD
+  icon: null,
   dataContract,
   size,
   defaultContext,
@@ -465,117 +455,117 @@ var react_exports = {};
 __export(react_exports, {
   default: () => react_default
 });
-var defaultImport12 = __toESM(require("react"));
+var defaultImport11 = __toESM(require("react"));
 __reExport(react_exports, require("react"));
-var react_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var react_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
 var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport13 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport12 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var getSettingsFromThemedProps_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport14 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport13 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+var Options_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport15 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport14 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var SanitizeProps_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport15 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var TimezoneContext_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport17 = __toESM(require("@splunk/moment"));
+var defaultImport16 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var moment_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // esm-externals:@splunk/visualization-context/FeatureFlagContext
 var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
   default: () => FeatureFlagContext_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+var defaultImport17 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
 __reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var FeatureFlagContext_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:styled-components
 var styled_components_exports = {};
 __export(styled_components_exports, {
   default: () => styled_components_default
 });
-var defaultImport19 = __toESM(require("styled-components"));
+var defaultImport18 = __toESM(require("styled-components"));
 __reExport(styled_components_exports, require("styled-components"));
-var styled_components_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var styled_components_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
 __export(hocUtils_exports, {
   default: () => hocUtils_default
 });
-var defaultImport20 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
+var defaultImport19 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
 __reExport(hocUtils_exports, require("@splunk/visualizations-shared/hocUtils"));
-var hocUtils_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var hocUtils_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:@splunk/visualizations-shared/JSONSchemaUtils
 var JSONSchemaUtils_exports = {};
 __export(JSONSchemaUtils_exports, {
   default: () => JSONSchemaUtils_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
+var defaultImport20 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
 __reExport(JSONSchemaUtils_exports, require("@splunk/visualizations-shared/JSONSchemaUtils"));
-var JSONSchemaUtils_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var JSONSchemaUtils_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/async-dynamic-options-evaluator
 var async_dynamic_options_evaluator_exports = {};
 __export(async_dynamic_options_evaluator_exports, {
   default: () => async_dynamic_options_evaluator_default
 });
-var defaultImport22 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport21 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
 __reExport(async_dynamic_options_evaluator_exports, require("@splunk/async-dynamic-options-evaluator"));
-var async_dynamic_options_evaluator_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var async_dynamic_options_evaluator_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/ui-utils/id
 var id_exports = {};
 __export(id_exports, {
   default: () => id_default
 });
-var defaultImport23 = __toESM(require("@splunk/ui-utils/id"));
+var defaultImport22 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var id_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // esm-externals:prop-types
 var prop_types_exports = {};
 __export(prop_types_exports, {
   default: () => prop_types_default
 });
-var defaultImport24 = __toESM(require("prop-types"));
+var defaultImport23 = __toESM(require("prop-types"));
 __reExport(prop_types_exports, require("prop-types"));
-var prop_types_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var prop_types_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -783,18 +773,18 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport24 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var Message_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
 var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
-var SizeAwareWrapper_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var SizeAwareWrapper_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // src/common/components/MissingPropsMessage.tsx
 var isMissing = (v) => {
@@ -849,7 +839,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.2.1 - b6faf8893"
+  "data-splunk-visualization-version": "28.3.0 - 843e0f60b"
 })`
     position: relative;
     width: 100%;
@@ -871,9 +861,9 @@ var style_exports = {};
 __export(style_exports, {
   default: () => style_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport26 = __toESM(require("@splunk/visualizations-shared/style"));
 __reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var style_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -888,14 +878,18 @@ var FixSizeItem = styled_components_default.div.attrs(
   ({
     width,
     height
-  }) => ({
-    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-  })
+  }) => {
+    const validHeight = typeof height === "number" ? Math.max(height, 1) : height;
+    return {
+      style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), validHeight && { height: (0, style_exports.toPx)(validHeight) })
+    };
+  }
 )`
     position: relative;
     flex-direction: column;
     flex: 1;
     display: flex;
+    overflow: hidden !important;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
 var ItemContent = styled_components_default.div`
@@ -908,6 +902,7 @@ var FixSizeItemContent = styled_components_default.div`
     flex: 1;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden !important;
 `;
 var withFixedSizeContainer = (Viz) => {
   const FixedSizeContainer = (props) => {
@@ -925,7 +920,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.2.1 - b6faf8893",
+        "data-splunk-visualization-version": "28.3.0 - 843e0f60b",
         width,
         height,
         backgroundColor
@@ -1016,9 +1011,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport27 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var numberUtils_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // src/common/utils/dataUtils.ts
 var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
@@ -1398,9 +1393,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport28 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var FeatureFlags_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -1418,9 +1413,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var trellisUtils_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -1437,9 +1432,9 @@ var visualization_canvas_exports = {};
 __export(visualization_canvas_exports, {
   default: () => visualization_canvas_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualization-canvas"));
+var defaultImport30 = __toESM(require("@splunk/visualization-canvas"));
 __reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
-var visualization_canvas_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var visualization_canvas_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // src/common/components/VizStyleWrapper.jsx
 var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
@@ -1461,9 +1456,9 @@ var Triangle_exports = {};
 __export(Triangle_exports, {
   default: () => Triangle_default
 });
-var defaultImport32 = __toESM(require("@splunk/react-icons/Triangle"));
+var defaultImport31 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
-var Triangle_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var Triangle_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
@@ -1479,9 +1474,14 @@ var getAnnotationsForCanvas = ({
 var StyledTriangle = styled_components_default(Triangle_default)`
     color: ${(props) => props.eventColor || variables_default.severityColorNotice(props)};
 `;
-var triangleEventAnnotationRenderer = ({ event }) => {
+var triangleEventAnnotationRenderer = ({
+  event,
+  dimensions
+}) => {
   const eventWithColor = event;
   return react_default.createElement(StyledTriangle, {
+    width: `${dimensions.width}px`,
+    height: `${dimensions.height}px`,
     viewBox: "0 0 24 24",
     variant: "filled",
     eventColor: eventWithColor.color
@@ -1571,12 +1571,15 @@ var getFieldName = (field) => {
 var getFieldNames = (fields) => {
   return fields.map((field) => getFieldName(field));
 };
-var getXScaleConfig = (label) => {
+var getXScaleConfig = (label, xAxisLabelVisibility) => {
   const xConfig = { x: {} };
   xConfig.x.label = label;
+  if (xAxisLabelVisibility === "hide") {
+    xConfig.x.hideLabels = true;
+  }
   return xConfig;
 };
-var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility) => {
   const scaleType = yAxisScale != null ? yAxisScale : "linear";
   const yConfig = { y: {} };
   yConfig.y.label = label;
@@ -1589,9 +1592,12 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
   } else {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
+  if (yAxisLabelVisibility === "hide") {
+    yConfig.y.hideLabels = true;
+  }
   return yConfig;
 };
-var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility) => {
   const y2Config = { y2: {} };
   const scaleType = axisScale != null ? axisScale : "linear";
   y2Config.y2.label = label;
@@ -1603,9 +1609,12 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
+  if (y2AxisLabelVisibility === "hide") {
+    y2Config.y2.hideLabels = true;
+  }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -1637,6 +1646,9 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
       seriesConfig[field].type = "line";
     }
+    if (markerDisplay !== void 0) {
+      seriesConfig[field].markerDisplay = markerDisplay;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
@@ -1653,27 +1665,30 @@ var TimeSeriesChartContainer = styled_components_default.div`
         position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
     }
 `;
-var handleClick = (chartEvent, props) => {
+var handleClick = (chartEvent, onClick) => {
   const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(chartEvent, "value", "seriesKey")), {
     name: chartEvent.seriesKey
   });
   delete payload.seriesKey;
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (chartEvent.rowContext) {
+    Object.keys(chartEvent.rowContext).forEach((fieldName) => {
+      payload[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
+    });
+  }
+  if (onClick) {
+    onClick({
       type: "point.click",
       originalEvent: chartEvent,
       payload
     });
   }
 };
-var handleLegendClick = (chartEvent, props) => {
+var handleLegendClick = (chartEvent, onClick) => {
   const payload = {
     name: chartEvent
   };
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (onClick) {
+    onClick({
       type: "legend.click",
       originalEvent: chartEvent,
       payload
@@ -1681,7 +1696,21 @@ var handleLegendClick = (chartEvent, props) => {
   }
 };
 var TimeSeriesChartWrapper = (props) => {
-  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
+  const {
+    width,
+    height,
+    chartData,
+    options,
+    userLocale,
+    annotationX,
+    annotationLabel,
+    annotationColor,
+    legendDisplay,
+    markerDisplay,
+    onClick,
+    onPointMouseOver,
+    onPointMouseOut
+  } = props;
   const {
     backgroundColor,
     seriesColors: seriesColorsStr,
@@ -1692,6 +1721,9 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleX.visibility": xAxisTitleVisibility,
     "axisTitleY.visibility": yAxisTitleVisibility,
     "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
+    "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
+    "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
     "axisY.abbreviation": yAxisAbbreviation,
     "axisY.scale": yAxisScale,
     "axisY2.abbreviation": y2AxisAbbreviation,
@@ -1728,11 +1760,17 @@ var TimeSeriesChartWrapper = (props) => {
   const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
   let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
   y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
-  const xScaleConfig = getXScaleConfig(xAxisTitle);
-  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale);
+  const xScaleConfig = getXScaleConfig(xAxisTitle, xAxisLabelVisibility);
+  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility);
   let y2ScaleConfig = {};
   if (y2Enabled) {
-    y2ScaleConfig = getY2ScaleConfig(y2AxisTitle, y2AxisAbbreviation, y2AxisScale, y2IntegerUnits);
+    y2ScaleConfig = getY2ScaleConfig(
+      y2AxisTitle,
+      y2AxisAbbreviation,
+      y2AxisScale,
+      y2IntegerUnits,
+      y2AxisLabelVisibility
+    );
   }
   const uplotContainerElement = (0, react_exports.useRef)(null);
   const seriesDataFormatted = [
@@ -1741,24 +1779,87 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
-  const seriesOverrides = getSeriesOverrides(
-    yFields,
-    y2Fields,
-    lineWidth,
-    overlayFields,
-    y2Enabled,
-    nullValueMode
+  const seriesOverrides = (0, react_exports.useMemo)(
+    () => getSeriesOverrides(
+      yFields,
+      y2Fields,
+      lineWidth,
+      overlayFields,
+      y2Enabled,
+      nullValueMode,
+      markerDisplay
+    ),
+    [yFields, y2Fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay]
+  );
+  const chartingEventAnnotations = (0, react_exports.useMemo)(
+    () => getAnnotationsForCanvas({
+      annotationX,
+      annotationColor,
+      annotationLabel
+    }),
+    [annotationX, annotationColor, annotationLabel]
+  );
+  const scaleConfig = (0, react_exports.useMemo)(
+    () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
+    [xScaleConfig, yScaleConfig, y2ScaleConfig]
+  );
+  const legend = (0, react_exports.useMemo)(() => getLegend({ legendDisplay }), [legendDisplay]);
+  const handleChartClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const handleChartLegendClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleLegendClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const lastPayloadRef = react_exports.useRef(null);
+  const lastOriginalEventRef = react_exports.useRef(null);
+  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
+            });
+          }
+          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.keys(event.rowContext).forEach((fieldName) => {
+            payload[`row.${fieldName}.value`] = event.rowContext[fieldName];
+          });
+        }
+        lastPayloadRef.current = payload;
+        lastOriginalEventRef.current = event;
+        if (onPointMouseOver) {
+          onPointMouseOver({
+            type: "point.mouseover",
+            originalEvent: event,
+            payload
+          });
+        }
+      }
+    },
+    [onPointMouseOver, onPointMouseOut]
   );
-  const chartingEventAnnotations = getAnnotationsForCanvas({
-    annotationX,
-    annotationColor,
-    annotationLabel
-  });
-  const MemoizedChart = react_exports.memo(visualization_canvas_exports.TimeSeriesChart);
-  const scaleConfig = __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig);
   const memoizedChart = (0, react_exports.useMemo)(
     () => /* @__PURE__ */ react_exports.createElement(
-      MemoizedChart,
+      visualization_canvas_exports.TimeSeriesChart,
       {
         data: chartData,
         width: containerWidth,
@@ -1766,34 +1867,39 @@ var TimeSeriesChartWrapper = (props) => {
         seriesColors,
         seriesColorsByField,
         seriesConfig: seriesOverrides,
-        legend: getLegend(props),
+        legend,
         scaleConfig,
         timestampFormat: "expanded",
-        onCrosshairClick: (event) => handleClick(event, props),
-        onSeriesClick: (event) => handleLegendClick(event, props),
+        onCrosshairClick: onClick ? handleChartClick : void 0,
+        onCrosshairChange: onPointMouseOver || onPointMouseOut ? handleChartCrosshairChange : void 0,
+        onSeriesClick: onClick ? handleChartLegendClick : void 0,
         userLocale,
         events: chartingEventAnnotations,
         eventsConfig: { renderer: triangleEventAnnotationRenderer }
       }
     ),
     [
-      MemoizedChart,
       chartData,
       containerWidth,
       containerHeight,
       seriesColors,
       seriesColorsByField,
       seriesOverrides,
-      lineWidth,
-      props,
+      legend,
       scaleConfig,
       userLocale,
-      chartingEventAnnotations
+      chartingEventAnnotations,
+      onClick,
+      handleChartClick,
+      onPointMouseOver,
+      onPointMouseOut,
+      handleChartCrosshairChange,
+      handleChartLegendClick
     ]
   );
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
-  }, [backgroundColor]);
+  }, [backgroundColor, memoizedChart]);
   return /* @__PURE__ */ react_exports.createElement(
     TimeSeriesChartContainer,
     {
@@ -1809,6 +1915,7 @@ var TimeSeriesChartWrapper = (props) => {
 var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
+var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -1817,6 +1924,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -1945,11 +2053,19 @@ var withDashboardViz = (opts) => {
             );
             setDataFramesInState(dataFrames);
           }
+          let mergedFrames = dataFrames;
+          if (computeDataFrames && dataFrames) {
+            const derivedFrames = computeDataFrames({
+              dataSources: downsampledDataSources,
+              options: optionsToEvaluate.options
+            });
+            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+          }
           const result = Options_exports.Options.evaluate(
             optionsToEvaluate,
             downsampledDataSources,
             themeFunc,
-            dataFrames,
+            mergedFrames,
             getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
           );
           return result;
@@ -2037,7 +2153,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -2061,10 +2177,7 @@ var withDashboardViz = (opts) => {
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
-    let SanitizedViz = SanitizedReactViz;
-    if (isAcceleratedRenderOn) {
-      SanitizedViz = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
-    }
+    const SanitizedViz = isAcceleratedRenderOn ? SanitizedTimeSeriesChartWrapper : SanitizedReactViz;
     return /* @__PURE__ */ react_exports.createElement(
       SanitizedViz,
       __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, SplunkVisualization_default.defaults), {
@@ -2092,18 +2205,18 @@ var config_exports = {};
 __export(config_exports, {
   default: () => config_default2
 });
-var defaultImport33 = __toESM(require("@splunk/splunk-utils/config"));
+var defaultImport32 = __toESM(require("@splunk/splunk-utils/config"));
 __reExport(config_exports, require("@splunk/splunk-utils/config"));
-var config_default2 = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var config_default2 = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport34 = __toESM(require("@splunk/themes"));
+var defaultImport33 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var themes_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/common/utils/styleUtils.ts
 var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
@@ -2111,15 +2224,15 @@ var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid
 // src/Timeline/PureTimeline/src/utils/timelineUtils.ts
 function hexToRgba(hex, opacity = 1) {
   const hexString = typeof hex === "string" ? hex.replace("#", "") : "#009CEB";
-  const r = parseInt(hexString.substring(0, 2), 16);
-  const g = parseInt(hexString.substring(2, 4), 16);
-  const b = parseInt(hexString.substring(4, 6), 16);
+  const r = Number.parseInt(hexString.substring(0, 2), 16);
+  const g = Number.parseInt(hexString.substring(2, 4), 16);
+  const b = Number.parseInt(hexString.substring(4, 6), 16);
   const alpha = Math.max(0, Math.min(opacity, 1));
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 function getAlternateColor(hex, percent) {
   const cleanedHex = typeof hex === "string" ? hex.replace("#", "") : "#009CEB";
-  const bigint = parseInt(cleanedHex, 16);
+  const bigint = Number.parseInt(cleanedHex, 16);
   const r = bigint >> 16 & 255;
   const g = bigint >> 8 & 255;
   const b = bigint & 255;
@@ -2155,16 +2268,28 @@ var toTimestamp = (dateStr, timezone = {}) => {
     }
     if (!dateTime.isValid()) {
       console.error("Invalid date:", dateStr);
-      return NaN;
+      return Number.NaN;
     }
     return dateTime.toDate().getTime();
   } catch (error) {
     console.error("Invalid date or timezone:", dateStr, timezone, error);
-    return NaN;
+    return Number.NaN;
   }
 };
-function mapDataToTimeline(resultLimit, x, y, duration, category = [], dataColors = [], seriesColors = [], additionalTooltipValues = [], _timezone = {}, defaultColor = "#009CEB") {
+function mapDataToTimeline(mapDataToTimelineType) {
   var _a, _b;
+  const {
+    resultLimit,
+    x,
+    y,
+    duration,
+    category = [],
+    dataColors = [],
+    seriesColors = [],
+    additionalTooltipValues = [],
+    timezone = {},
+    defaultColor = "#009CEB"
+  } = mapDataToTimelineType;
   const categoricalColors = /* @__PURE__ */ new Map();
   const lanesSet = /* @__PURE__ */ new Set();
   const laneSeriesMap = /* @__PURE__ */ new Map();
@@ -2185,7 +2310,7 @@ function mapDataToTimeline(resultLimit, x, y, duration, category = [], dataColor
     } else if (categoryValue) {
       color = categoricalColors.get(categoryValue);
     }
-    const start = toTimestamp(x[i].toString(), _timezone);
+    const start = toTimestamp(x[i].toString(), timezone);
     const durationValue = duration[i] || 0;
     const end = start + durationValue;
     const additionalTooltipValue = additionalTooltipValues ? additionalTooltipValues[i] : null;
@@ -2202,7 +2327,7 @@ function mapDataToTimeline(resultLimit, x, y, duration, category = [], dataColor
       additionalTooltipValue
     });
     if (i > 0) {
-      const prevStart = toTimestamp(x[i - 1].toString(), _timezone);
+      const prevStart = toTimestamp(x[i - 1].toString(), timezone);
       const timeDiff = start - prevStart;
       timeDifferences.push(timeDiff);
     }
@@ -2236,42 +2361,57 @@ var drawRoundedRect = (ctx, x, y, width, height, radius) => {
   ctx.fill();
   ctx.stroke();
 };
-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") {
+var truncators = {
+  ellipsisEnd: ({ context, ellipsis, maxWidth, text }) => {
     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") {
+    return null;
+  },
+  ellipsisStart: ({ context, ellipsis, maxWidth, text }) => {
     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;
+    return null;
+  },
+  ellipsisMiddle: ({ context, ellipsis, ellipsisWidth, maxWidth, text }) => {
+    const halfLength = text.length / 2;
+    for (let i = 0; i < halfLength; i += 1) {
+      const left = text.slice(0, Math.floor(halfLength) - i);
+      const right = text.slice(Math.ceil(halfLength) + i);
       if (context.measureText(left).width + ellipsisWidth + context.measureText(right).width <= maxWidth) {
-        return truncatedText;
+        return `${left}${ellipsis}${right}`;
       }
     }
+    return null;
+  }
+};
+var truncateText = (text, maxWidth, truncationType, font = `10px ${VIZ_FONT_FAMILY}`) => {
+  var _a;
+  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;
+  if (context.measureText(text).width <= maxWidth) {
+    return text;
   }
-  return ellipsis;
+  const params = {
+    ellipsis,
+    ellipsisWidth,
+    maxWidth,
+    text,
+    context
+  };
+  const truncated = (_a = truncators[truncationType]) == null ? void 0 : _a.call(truncators, params);
+  return truncated != null ? truncated : ellipsis;
 };
 var getTickInterval = (averageDiff) => {
   if (averageDiff < 6e4) {
@@ -2336,26 +2476,56 @@ var tooltipLocaleTimeFormat = (displaySeconds) => {
     year: "numeric"
   }, seconds);
 };
+var applyCanvasScale = (u, scaleFactor) => {
+  var _a;
+  if (!((_a = u.ctx) == null ? void 0 : _a.canvas)) {
+    return;
+  }
+  const { canvas } = u.ctx;
+  const dpr = window.devicePixelRatio || 1;
+  const scale = dpr * scaleFactor;
+  canvas.width = Math.round(u.width * scale);
+  canvas.height = Math.round(u.height * scale);
+  canvas.style.width = `${u.width}px`;
+  canvas.style.height = `${u.height}px`;
+  u.ctx.setTransform(1, 0, 0, 1, 0, 0);
+  u.ctx.scale(scale, scale);
+};
+var createTimelineCanvasScaleHooks = (scaleFactor, onReady) => ({
+  init: (u) => {
+    applyCanvasScale(u, scaleFactor);
+  },
+  setSize: (u) => {
+    applyCanvasScale(u, scaleFactor);
+    if (onReady) {
+      onReady(u);
+    }
+  }
+});
 
 // esm-externals:uplot-react
 var uplot_react_exports = {};
 __export(uplot_react_exports, {
   default: () => uplot_react_default
 });
-var defaultImport35 = __toESM(require("uplot-react"));
+var defaultImport34 = __toESM(require("uplot-react"));
 __reExport(uplot_react_exports, require("uplot-react"));
-var uplot_react_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var uplot_react_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/visualization-context/ZoomContext
 var ZoomContext_exports = {};
 __export(ZoomContext_exports, {
   default: () => ZoomContext_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualization-context/ZoomContext"));
+var defaultImport35 = __toESM(require("@splunk/visualization-context/ZoomContext"));
 __reExport(ZoomContext_exports, require("@splunk/visualization-context/ZoomContext"));
-var ZoomContext_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var ZoomContext_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // src/Timeline/PureTimeline/src/CursorPlugin.tsx
+var FIXED_LANE_HEIGHT = 32;
+var MIN_BAR_WIDTH = 20;
+var CIRCLE_X_OFFSET = 10;
+var CIRCLE_LANE_SCALE_FACTOR = 0.85;
 var CursorPlugin = (props) => {
   const {
     laneSeries,
@@ -2367,25 +2537,9 @@ var CursorPlugin = (props) => {
     setHighlightedLane,
     handleEventClick,
     tooltipRef,
-    locale
+    locale,
+    scaleFactor
   } = props;
-  const FIXED_LANE_HEIGHT = 32;
-  const MIN_BAR_WIDTH = 20;
-  const CIRCLE_X_OFFSET = 10;
-  const CIRCLE_LANE_SCALE_FACTOR = 0.85;
-  const zoom = (0, ZoomContext_exports.useZoomContext)();
-  const initFullscreenEl = typeof document !== "undefined" ? document.fullscreenElement : null;
-  const initScale = initFullscreenEl && initFullscreenEl.tagName !== "BODY" ? 1 : zoom || 1;
-  const scaleFactorRef = (0, react_exports.useRef)(initScale);
-  (0, react_exports.useEffect)(() => {
-    const fullscreenEl = document.fullscreenElement;
-    if (fullscreenEl && fullscreenEl.tagName !== "BODY") {
-      scaleFactorRef.current = 1;
-    } else {
-      scaleFactorRef.current = zoom;
-    }
-  }, [zoom]);
-  const dpr = window.devicePixelRatio || 1;
   let previousTooltipContent = null;
   const handleMouseLeave = (u) => {
     const xCursorLine = u.root.querySelector(".u-cursor-x");
@@ -2437,128 +2591,294 @@ var CursorPlugin = (props) => {
         const xCursorLine = u.root.querySelector(".u-cursor-x");
         if (!mouseEvent) {
           tooltipRef.current.visible = false;
-          if (xCursorLine) {
-            xCursorLine.classList.add("u-off");
-          }
+          toggleCursorLine(xCursorLine, true);
           return;
         }
         const rect = u.root.getBoundingClientRect();
-        const scaleFactor = scaleFactorRef.current || 1;
-        const plotLeftCss = u.bbox.left / dpr;
-        const plotTopCss = u.bbox.top / dpr;
-        const xPos = (mouseEvent.clientX - rect.left - plotLeftCss) / scaleFactor;
-        const yPos = (mouseEvent.clientY - rect.top - plotTopCss) / scaleFactor;
-        u.cursor.left = xPos;
-        u.cursor.top = yPos;
-        if (xCursorLine) {
-          if (xPos < 0 || xPos > u.bbox.width / dpr || yPos < 0 || yPos > u.bbox.height / dpr) {
-            xCursorLine.classList.add("u-off");
-          } else {
-            xCursorLine.classList.remove("u-off");
-            xCursorLine.style.transform = `translateX(${xPos}px)`;
-          }
-        }
-        const cursorSeriesIndex = Math.min(
-          lanes.length,
-          Math.max(1, Math.floor(yPos / FIXED_LANE_HEIGHT) + 1)
-        );
-        const events = laneSeries[cursorSeriesIndex - 1];
-        let showTooltip = false;
-        let tooltipContent = {};
-        let tooltipMeta = {};
-        let tooltipX = 0;
-        let tooltipY = 0;
-        let overflow = false;
-        if (events) {
-          const sortedEvents = [...events].sort((a, b) => {
-            if (a.duration === 0 && b.duration !== 0) return 1;
-            if (a.duration !== 0 && b.duration === 0) return -1;
-            return 0;
+        const dpr = window.devicePixelRatio || 1;
+        const cursorPosition = getCursorPosition({
+          mouseEvent,
+          rect,
+          bbox: u.bbox,
+          scaleFactor,
+          dpr
+        });
+        u.cursor.left = cursorPosition.x;
+        u.cursor.top = cursorPosition.y;
+        if (updateCursorLine(xCursorLine, cursorPosition, u, dpr)) {
+          clearTooltipIfVisible({
+            chart: u,
+            tooltipRef,
+            setHighlightedLane,
+            setHighlightedEvent,
+            setHighlightedCategory
           });
-          const widthPerTick = u.bbox.width / dpr / numTicks;
-          for (let i = sortedEvents.length - 1; i >= 0; i -= 1) {
-            const event = sortedEvents[i];
-            const xStartFraction = (event.start - u.scales.x.min) / 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;
-              if (xPos >= xStart - circleRadius && xPos <= xStart + circleRadius) {
-                tooltipX = xStart + CIRCLE_X_OFFSET;
-                tooltipY = cursorSeriesIndex * FIXED_LANE_HEIGHT;
-                showTooltip = true;
-              }
-            } else {
-              const durationWidth = event.duration / durationPerTick * widthPerTick;
-              const barWidth = Math.max(durationWidth, MIN_BAR_WIDTH);
-              if (xPos >= xStart && xPos <= xStart + barWidth) {
-                tooltipX = xStart + CIRCLE_X_OFFSET;
-                tooltipY = cursorSeriesIndex * FIXED_LANE_HEIGHT;
-                showTooltip = true;
-              }
-            }
-            if (showTooltip) {
-              const displaySeconds = durationPerTick < 6e4 && event.duration !== 0;
-              const startTime = new Date(event.start).toLocaleTimeString(
-                locale,
-                tooltipLocaleTimeFormat(displaySeconds)
-              );
-              const endTime = new Date(event.end).toLocaleTimeString(
-                locale,
-                tooltipLocaleTimeFormat(displaySeconds)
-              );
-              const lane = lanes[cursorSeriesIndex - 1];
-              tooltipContent = __spreadValues({
-                from: startTime,
-                to: endTime,
-                lane,
-                category: (event == null ? void 0 : event.category) || void 0
-              }, event.additionalTooltipValue);
-              tooltipMeta = __spreadValues({
-                duration: event.duration
-              }, event.additionalTooltipValue);
-              const tooltipWidth = 85;
-              const plotRightEdge = u.bbox.width / dpr;
-              if (tooltipX + tooltipWidth > plotRightEdge) {
-                overflow = true;
-                tooltipY -= FIXED_LANE_HEIGHT / 2;
-                tooltipX -= event.duration === 0 ? FIXED_LANE_HEIGHT : MIN_BAR_WIDTH;
-              }
-              if (!tooltipRef.current.visible || tooltipRef.current.content !== tooltipContent) {
-                u.root.style.cursor = "pointer";
-                tooltipRef.current = {
-                  visible: true,
-                  x: tooltipX,
-                  y: tooltipY,
-                  overflow,
-                  content: tooltipContent,
-                  meta: tooltipMeta
-                };
-                setHighlightedLane(lane);
-                setHighlightedEvent(event);
-                setHighlightedCategory(event.category);
-              }
-              break;
-            }
-          }
+          return;
         }
-        if (!showTooltip && tooltipRef.current.visible) {
-          u.root.style.cursor = "default";
-          tooltipRef.current = {
-            visible: false,
-            overflow: false,
-            content: "",
-            meta: ""
-          };
-          setHighlightedLane(null);
-          setHighlightedEvent(null);
-          setHighlightedCategory(null);
+        const tooltipState = getTooltipState({
+          cursorPosition,
+          laneSeries,
+          lanes,
+          numTicks,
+          durationPerTick,
+          locale,
+          dpr,
+          chart: u
+        });
+        if (!tooltipState) {
+          clearTooltipIfVisible({
+            chart: u,
+            tooltipRef,
+            setHighlightedLane,
+            setHighlightedEvent,
+            setHighlightedCategory
+          });
+          return;
         }
+        applyTooltipState({
+          chart: u,
+          tooltipState,
+          tooltipRef,
+          setHighlightedLane,
+          setHighlightedEvent,
+          setHighlightedCategory
+        });
       }
     }
   };
 };
 var CursorPlugin_default = CursorPlugin;
+function toggleCursorLine(xCursorLine, shouldHide) {
+  if (!xCursorLine) {
+    return;
+  }
+  if (shouldHide) {
+    xCursorLine.classList.add("u-off");
+    return;
+  }
+  xCursorLine.classList.remove("u-off");
+}
+function getCursorPosition({ mouseEvent, rect, bbox, scaleFactor, dpr }) {
+  const plotLeftCss = bbox.left / dpr;
+  const plotTopCss = bbox.top / dpr;
+  return {
+    x: (mouseEvent.clientX - rect.left - plotLeftCss) / scaleFactor,
+    y: (mouseEvent.clientY - rect.top - plotTopCss) / scaleFactor
+  };
+}
+function updateCursorLine(xCursorLine, cursorPosition, chart, dpr) {
+  const { x, y } = cursorPosition;
+  const outOfBounds = x < 0 || x > chart.bbox.width / dpr || y < 0 || y > chart.bbox.height / dpr;
+  if (outOfBounds) {
+    toggleCursorLine(xCursorLine, true);
+    return true;
+  }
+  toggleCursorLine(xCursorLine, false);
+  if (xCursorLine) {
+    xCursorLine.style.transform = `translateX(${x}px)`;
+  }
+  return false;
+}
+function getTooltipState({
+  cursorPosition,
+  laneSeries,
+  lanes,
+  numTicks,
+  durationPerTick,
+  locale,
+  dpr,
+  chart
+}) {
+  var _a, _b, _c;
+  const cursorSeriesIndex = deriveCursorSeriesIndex({
+    cursorPosition,
+    lanes
+  });
+  if (!cursorSeriesIndex) {
+    return null;
+  }
+  const events = laneSeries[cursorSeriesIndex - 1];
+  if (!events || events.length === 0) {
+    return null;
+  }
+  const widthPerTick = chart.bbox.width / dpr / numTicks;
+  const sortedEvents = sortEventsByDuration(events);
+  const hit = findEventHit({
+    events: sortedEvents,
+    cursorSeriesIndex,
+    cursorPosition,
+    durationPerTick,
+    widthPerTick,
+    xScaleMin: (_c = (_b = (_a = chart == null ? void 0 : chart.scales) == null ? void 0 : _a.x) == null ? void 0 : _b.min) != null ? _c : 0
+  });
+  if (!hit) {
+    return null;
+  }
+  const lane = lanes[cursorSeriesIndex - 1];
+  if (!lane) {
+    return null;
+  }
+  const tooltip = adjustForOverflow({
+    tooltipX: hit.tooltipX,
+    tooltipY: hit.tooltipY,
+    event: hit.event,
+    plotRightEdge: 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);
+  return {
+    lane,
+    event: hit.event,
+    tooltip,
+    content,
+    meta
+  };
+}
+function deriveCursorSeriesIndex({ cursorPosition, lanes }) {
+  if (!lanes.length) {
+    return 0;
+  }
+  const rawIndex = Math.floor(cursorPosition.y / FIXED_LANE_HEIGHT) + 1;
+  return Math.min(lanes.length, Math.max(1, rawIndex));
+}
+function sortEventsByDuration(events) {
+  return [...events].sort((a, b) => {
+    if (a.duration === 0 && b.duration !== 0) return 1;
+    if (a.duration !== 0 && b.duration === 0) return -1;
+    return 0;
+  });
+}
+function findEventHit({
+  events,
+  cursorSeriesIndex,
+  cursorPosition,
+  durationPerTick,
+  widthPerTick,
+  xScaleMin
+}) {
+  for (let i = events.length - 1; i >= 0; i -= 1) {
+    const event = events[i];
+    const metrics = getEventMetrics({
+      event,
+      cursorSeriesIndex,
+      durationPerTick,
+      widthPerTick,
+      xScaleMin
+    });
+    if (metrics && hitTestEvent({ metrics, cursorPosition })) {
+      return {
+        event,
+        tooltipX: metrics.tooltipX,
+        tooltipY: metrics.tooltipY
+      };
+    }
+  }
+  return null;
+}
+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;
+    return {
+      tooltipX: xStart + CIRCLE_X_OFFSET,
+      tooltipY: cursorSeriesIndex * FIXED_LANE_HEIGHT,
+      hitMin: xStart - circleRadius,
+      hitMax: xStart + circleRadius
+    };
+  }
+  const durationWidth = event.duration / durationPerTick * widthPerTick;
+  const barWidth = Math.max(durationWidth, MIN_BAR_WIDTH);
+  return {
+    tooltipX: xStart + CIRCLE_X_OFFSET,
+    tooltipY: cursorSeriesIndex * FIXED_LANE_HEIGHT,
+    hitMin: xStart,
+    hitMax: xStart + barWidth
+  };
+}
+function hitTestEvent({ metrics, cursorPosition }) {
+  const { x } = cursorPosition;
+  return x >= metrics.hitMin && x <= metrics.hitMax;
+}
+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 buildTooltipContent({ lane, event, locale, displaySeconds }) {
+  const startTime = new Date(event.start).toLocaleTimeString(
+    locale,
+    tooltipLocaleTimeFormat(displaySeconds)
+  );
+  const endTime = new Date(event.end).toLocaleTimeString(locale, tooltipLocaleTimeFormat(displaySeconds));
+  return __spreadValues({
+    from: startTime,
+    to: endTime,
+    lane,
+    category: (event == null ? void 0 : event.category) || void 0
+  }, event.additionalTooltipValue);
+}
+function buildTooltipMeta(event) {
+  return __spreadValues({
+    duration: event.duration
+  }, event.additionalTooltipValue);
+}
+function applyTooltipState({
+  chart,
+  tooltipState,
+  tooltipRef,
+  setHighlightedLane,
+  setHighlightedEvent,
+  setHighlightedCategory
+}) {
+  var _a;
+  chart.root.style.cursor = "pointer";
+  tooltipRef.current = {
+    visible: true,
+    x: tooltipState.tooltip.x,
+    y: tooltipState.tooltip.y,
+    overflow: tooltipState.tooltip.overflow,
+    content: tooltipState.content,
+    meta: tooltipState.meta
+  };
+  setHighlightedLane(tooltipState.lane);
+  setHighlightedEvent(tooltipState.event);
+  setHighlightedCategory((_a = tooltipState.event) == null ? void 0 : _a.category);
+}
+function clearTooltipIfVisible({
+  chart,
+  tooltipRef,
+  setHighlightedLane,
+  setHighlightedEvent,
+  setHighlightedCategory
+}) {
+  if (!tooltipRef.current.visible) {
+    return;
+  }
+  chart.root.style.cursor = "default";
+  tooltipRef.current = {
+    visible: false,
+    overflow: false,
+    content: "",
+    meta: ""
+  };
+  setHighlightedLane(null);
+  setHighlightedEvent(null);
+  setHighlightedCategory(null);
+}
 
 // src/Timeline/PureTimeline/src/TimelinePlugin.tsx
 var TimelinePlugin = ({
@@ -2568,52 +2888,58 @@ var TimelinePlugin = ({
   numTicks,
   durationPerTick,
   highlightedCategory = null,
-  highlightedEvent = null
+  highlightedEvent = null,
+  theme
 }) => {
-  const FIXED_LANE_HEIGHT = 32;
+  const FIXED_LANE_HEIGHT2 = 32;
   const AXIS_COLOR = backgroundColor;
   const ALTERNATE_COLOR = getAlternateColor(backgroundColor, 0.1);
-  const MIN_BAR_WIDTH = 20;
+  const MIN_BAR_WIDTH2 = 20;
   const LANE_SCALE_FACTOR = 0.85;
-  const theme = (0, themes_exports.useSplunkTheme)();
   let dpr = window.devicePixelRatio || 1;
   const redrawChart = (u) => {
     u.redraw();
   };
+  let resizeHandler;
   return {
     hooks: {
+      destroy: () => {
+        if (resizeHandler) {
+          window.removeEventListener("resize", resizeHandler);
+        }
+      },
       drawClear: (u) => {
         const { ctx } = u;
         const canvas = u.root.querySelector("canvas");
         if (canvas) {
           canvas.style.position = "absolute";
         }
-        window.addEventListener("resize", () => {
+        resizeHandler = () => {
           const newDpr = window.devicePixelRatio || 1;
+          console.warn(newDpr, dpr);
           if (newDpr !== dpr) {
             dpr = newDpr;
             redrawChart(u);
           }
-        });
+        };
+        window.addEventListener("resize", resizeHandler);
         ctx.save();
-        ctx.scale(dpr, dpr);
-        const chartTopY = u.bbox.top / dpr;
+        const chartTopY = 0;
         lanes.forEach((lane, sidx) => {
-          const y = chartTopY + sidx * FIXED_LANE_HEIGHT;
+          const y = chartTopY + sidx * FIXED_LANE_HEIGHT2;
           ctx.fillStyle = (lanes.length - sidx - 1) % 2 === 0 ? AXIS_COLOR : ALTERNATE_COLOR;
-          ctx.fillRect(u.bbox.left / dpr, y, u.bbox.width / dpr, FIXED_LANE_HEIGHT);
+          ctx.fillRect(0, y, u.width, FIXED_LANE_HEIGHT2);
         });
         ctx.restore();
       },
       draw: (u) => {
         const { ctx } = u;
-        const widthPerTick = u.bbox.width / dpr / numTicks;
+        const widthPerTick = u.width / numTicks;
         const scaleMin = u.scales.x.min;
         ctx.save();
-        ctx.scale(dpr, dpr);
         lanes.forEach((lane, sidx) => {
           const events = laneSeries[sidx];
-          const laneCenterY = u.bbox.top / dpr + sidx * FIXED_LANE_HEIGHT + FIXED_LANE_HEIGHT / 2;
+          const laneCenterY = sidx * FIXED_LANE_HEIGHT2 + FIXED_LANE_HEIGHT2 / 2;
           events.forEach((event) => {
             const isHighlighted = highlightedEvent ? highlightedEvent === event : highlightedCategory === null || event.category === highlightedCategory;
             const fillColor = isHighlighted ? hexToRgba(event.color, 0.5) : hexToRgba(theme.contentColorMuted, 0.2);
@@ -2621,8 +2947,8 @@ var TimelinePlugin = ({
             const xStartFraction = (event.start - scaleMin) / durationPerTick;
             const xStart = sidx === 0 ? xStartFraction * widthPerTick + 2 : xStartFraction * widthPerTick;
             const durationWidth = event.duration / durationPerTick * widthPerTick;
-            const barWidth = Math.max(durationWidth, MIN_BAR_WIDTH);
-            const barHeight = FIXED_LANE_HEIGHT * LANE_SCALE_FACTOR;
+            const barWidth = Math.max(durationWidth, MIN_BAR_WIDTH2);
+            const barHeight = FIXED_LANE_HEIGHT2 * LANE_SCALE_FACTOR;
             const yBarTop = laneCenterY - barHeight / 2;
             if (xStart >= 0) {
               if (event.duration === null || event.duration === 0) {
@@ -2659,9 +2985,10 @@ var XAxisPlugin = ({
   tickInterval = "1d",
   isFontLoaded = false,
   locale = "en-US",
-  setIsFontLoaded
+  setIsFontLoaded,
+  theme
 } = {}) => {
-  const themes3 = (0, themes_exports.useSplunkTheme)();
+  const themes3 = theme;
   const redrawFont = () => {
     if (!isFontLoaded) {
       setIsFontLoaded(true);
@@ -2681,17 +3008,14 @@ var XAxisPlugin = ({
       },
       drawClear: (u) => {
         const { ctx } = u;
-        const dpr = window.devicePixelRatio || 1;
         ctx.save();
-        ctx.scale(dpr, dpr);
-        const xAxisY = (u.bbox.top + u.bbox.height - X_AXIS_HEIGHT * dpr) / dpr;
+        const xAxisY = u.height - X_AXIS_HEIGHT;
         ctx.fillStyle = backgroundColor;
-        ctx.fillRect(0, xAxisY, u.bbox.width / dpr, X_AXIS_HEIGHT);
+        ctx.fillRect(0, xAxisY, u.width, X_AXIS_HEIGHT);
         ctx.restore();
       },
       draw: (u) => {
         const { ctx } = u;
-        const dpr = window.devicePixelRatio || 1;
         const scaleMin = u.scales.x.min;
         const maxLabelWidth = 50;
         const ticks = [scaleMin];
@@ -2734,7 +3058,6 @@ var XAxisPlugin = ({
           return labelParts;
         });
         ctx.save();
-        ctx.scale(dpr, dpr);
         ctx.font = `10px ${VIZ_FONT_FAMILY}`;
         ctx.fillStyle = themes3.contentColorDefault;
         ctx.textAlign = "left";
@@ -2742,15 +3065,15 @@ var XAxisPlugin = ({
         const tickHeight = 5;
         const labelOffset = 5;
         const lineHeight = 12;
-        const xAxisY = (u.bbox.top + u.bbox.height - X_AXIS_HEIGHT * dpr) / dpr;
+        const xAxisY = u.height - X_AXIS_HEIGHT;
         ticks.forEach((val, i) => {
           let xTickPosition;
           if (i === 0) {
             xTickPosition = 0;
           } else {
-            xTickPosition = i * (u.bbox.width / dpr / numTicks);
+            xTickPosition = i * (u.width / numTicks);
           }
-          if (i === ticks.length - 1 && xTickPosition + maxLabelWidth > u.bbox.width / dpr) {
+          if (i === ticks.length - 1 && xTickPosition + maxLabelWidth > u.width) {
             return;
           }
           const yLabelPosition = xAxisY + tickHeight + labelOffset;
@@ -2758,7 +3081,7 @@ var XAxisPlugin = ({
           ctx.moveTo(xTickPosition, xAxisY);
           ctx.lineTo(xTickPosition, xAxisY + tickHeight);
           ctx.strokeStyle = "rgba(144, 144, 144, 0.5)";
-          ctx.lineWidth = i === 0 ? 1 * dpr : 0.5 * dpr;
+          ctx.lineWidth = i === 0 ? 1 : 0.5;
           ctx.stroke();
           const label = labels[i];
           if (label) {
@@ -2859,7 +3182,7 @@ TimelineYAxis.propTypes = {
 var TimelineYAxis_default = TimelineYAxis;
 
 // src/Timeline/PureTimeline/src/TimelineLegend.tsx
-var LEGEND_WIDTH = 92;
+var LEGEND_WIDTH = 88;
 var LEGEND_TEXT_WIDTH = 55;
 var LegendContainer = styled_components_default.div`
     display: flex;
@@ -2886,7 +3209,7 @@ var LegendContainer = styled_components_default.div`
 `;
 var LegendItem = styled_components_default.div`
     display: flex;
-    align-items: center;
+    align-items: ${({ legendTruncation }) => legendTruncation === "ellipsisOff" ? "flex-start" : "center"};
     margin: ${({ legendDisplay }) => legendDisplay === "bottom" ? "10px 20px 10px 0px" : "4px"};
     cursor: pointer;
     opacity: ${({ isHighlighted }) => isHighlighted ? 1 : 0.5};
@@ -2896,13 +3219,18 @@ var LegendColor = styled_components_default.div`
     width: 6px;
     height: 11px;
     margin-right: ${({ legendDisplay }) => legendDisplay === "bottom" ? "8px" : "4px"};
+    margin-top: ${({ legendTruncation }) => legendTruncation === "ellipsisOff" ? "2px" : "0"};
     background-color: ${({ color }) => hexToRgba(color, 0.5)};
     border: 1px solid ${({ color }) => color};
     transform: ${({ legendDisplay }) => legendDisplay === "bottom" ? "rotate(90deg)" : "none"};
     opacity: ${({ isHighlighted }) => isHighlighted ? 1 : 0.5};
 `;
 var LegendText = styled_components_default.div`
-    ${({ legendTruncation }) => legendTruncation !== "ellipsisOff" && `
+    ${({ legendTruncation }) => legendTruncation === "ellipsisOff" ? `
+            white-space: normal;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+        ` : `
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -2925,10 +3253,8 @@ var TimelineLegend = ({
   const handleMouseEnter = (category) => {
     setHighlightedCategory == null ? void 0 : setHighlightedCategory(category);
   };
-  const handleMouseLeave = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      setHighlightedCategory == null ? void 0 : setHighlightedCategory(null);
-    }
+  const handleMouseLeave = () => {
+    setHighlightedCategory == null ? void 0 : setHighlightedCategory(null);
   };
   return /* @__PURE__ */ react_exports.createElement(
     LegendContainer,
@@ -2953,8 +3279,9 @@ var TimelineLegend = ({
           color,
           isHighlighted,
           legendDisplay,
+          legendTruncation,
           onMouseEnter: () => handleMouseEnter(category),
-          onMouseOut: (e) => handleMouseLeave(e),
+          onMouseLeave: handleMouseLeave,
           onClick: () => {
             handleLegendClick2(category);
           }
@@ -2965,7 +3292,8 @@ var TimelineLegend = ({
             "data-test": "legend-color",
             color,
             isHighlighted,
-            legendDisplay
+            legendDisplay,
+            legendTruncation
           }
         ),
         /* @__PURE__ */ react_exports.createElement(LegendText, { legendTruncation, "data-test": "legend-text" }, truncatedText)
@@ -2989,9 +3317,9 @@ var useSplunkTheme_exports = {};
 __export(useSplunkTheme_exports, {
   default: () => useSplunkTheme_default
 });
-var defaultImport37 = __toESM(require("@splunk/themes/useSplunkTheme"));
+var defaultImport36 = __toESM(require("@splunk/themes/useSplunkTheme"));
 __reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var useSplunkTheme_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Timeline/PureTimeline/src/TimelineTooltip.tsx
 var TooltipContainer = styled_components_default.div`
@@ -3081,9 +3409,9 @@ var uPlot_min_exports = {};
 __export(uPlot_min_exports, {
   default: () => uPlot_min_default
 });
-var defaultImport38 = __toESM(require("uplot/dist/uPlot.min.css"));
+var defaultImport37 = __toESM(require("uplot/dist/uPlot.min.css"));
 __reExport(uPlot_min_exports, require("uplot/dist/uPlot.min.css"));
-var uPlot_min_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var uPlot_min_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/Timeline/PureTimeline/src/TimelineUplot.tsx
 var TimelineUplotContainer = styled_components_default.div`
@@ -3124,6 +3452,11 @@ var TimelineUplot = ({
   const [highlightedEvent, setHighlightedEvent] = react_exports.useState(null);
   const [highlightedLane, setHighlightedLane] = react_exports.useState(null);
   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 scaleFactor = fullscreenEl && fullscreenEl.tagName !== "BODY" ? 1 : zoom || 1;
+  const { version: dprVersion } = (0, visualization_canvas_exports.useDevicePixelRatio)();
   const tooltipRef = react_exports.useRef({
     visible: false,
     x: 0,
@@ -3148,63 +3481,98 @@ var TimelineUplot = ({
   const unitsPerTick = Math.ceil(totalNumberOfTicks / maxNumOfTicks);
   const numTicks = totalNumberOfTicks / unitsPerTick;
   const durationPerTick = granularityMultiplier * unitsPerTick;
-  const opts = {
-    width: chartWidth,
-    height: chartHeight,
-    series: [],
-    axes: [
-      { scale: "x", show: false },
-      { scale: "y", show: false }
-    ],
-    cursor: {
-      x: true,
-      y: false,
-      hover: {
-        prox: 1e3,
-        bias: 0
+  const opts = react_exports.useMemo(
+    () => ({
+      width: chartWidth,
+      height: chartHeight,
+      series: [],
+      axes: [
+        { scale: "x", show: false },
+        { scale: "y", show: false }
+      ],
+      cursor: {
+        x: true,
+        y: false,
+        hover: {
+          prox: 1e3,
+          bias: 0
+        },
+        drag: {
+          setScale: false,
+          x: false,
+          y: false
+        }
       },
-      drag: {
-        setScale: false,
-        x: false,
-        y: false
-      }
-    },
-    padding: [0, 0, 0, 0],
-    legend: { show: false },
-    plugins: [
-      TimelinePlugin_default({
-        laneSeries,
-        lanes,
-        backgroundColor,
-        numTicks,
-        durationPerTick,
-        highlightedCategory,
-        highlightedEvent
-      }),
-      XAxisPlugin_default({
-        durationPerTick,
-        numTicks,
-        backgroundColor,
-        tickInterval,
-        isFontLoaded,
-        setIsFontLoaded,
-        locale
-      }),
-      CursorPlugin_default({
-        laneSeries,
-        lanes,
-        numTicks,
-        durationPerTick,
-        setHighlightedCategory,
-        setHighlightedEvent,
-        setHighlightedLane,
-        handleEventClick,
-        tooltipRef,
-        locale
-      })
+      padding: [0, 0, 0, 0],
+      legend: { show: false },
+      pxAlign: false,
+      pxRatio: 1,
+      plugins: [
+        {
+          hooks: createTimelineCanvasScaleHooks(scaleFactor)
+        },
+        TimelinePlugin_default({
+          laneSeries,
+          lanes,
+          backgroundColor,
+          numTicks,
+          durationPerTick,
+          highlightedCategory,
+          highlightedEvent,
+          theme
+        }),
+        XAxisPlugin_default({
+          durationPerTick,
+          numTicks,
+          backgroundColor,
+          tickInterval,
+          isFontLoaded,
+          setIsFontLoaded,
+          locale,
+          theme
+        }),
+        CursorPlugin_default({
+          laneSeries,
+          lanes,
+          numTicks,
+          durationPerTick,
+          setHighlightedCategory,
+          setHighlightedEvent,
+          setHighlightedLane,
+          handleEventClick,
+          tooltipRef,
+          locale,
+          scaleFactor
+        })
+      ]
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      chartWidth,
+      chartHeight,
+      scaleFactor,
+      dprVersion,
+      // Force recreation of canvas scale hooks when DPR changes
+      laneSeries,
+      lanes,
+      backgroundColor,
+      numTicks,
+      durationPerTick,
+      highlightedCategory,
+      highlightedEvent,
+      tickInterval,
+      isFontLoaded,
+      setIsFontLoaded,
+      locale,
+      setHighlightedCategory,
+      setHighlightedEvent,
+      setHighlightedLane,
+      handleEventClick,
+      tooltipRef,
+      theme
     ]
-  };
-  return /* @__PURE__ */ react_exports.createElement(TimelineUplotContainer, { legendDisplay }, /* @__PURE__ */ react_exports.createElement(TimelineChartContainer, { "data-test": "timeline-chart-container" }, /* @__PURE__ */ react_exports.createElement(
+  );
+  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,
     {
       height: chartHeight,
@@ -3215,7 +3583,14 @@ var TimelineUplot = ({
       highlightedLane,
       handleLaneClick
     }
-  ), /* @__PURE__ */ react_exports.createElement(TimelineUplotWrapper, { width: chartWidth }, /* @__PURE__ */ react_exports.createElement(uplot_react_default, { options: opts, data: [[xMin], ...lanes.map(() => [])] }), /* @__PURE__ */ react_exports.createElement(TimelineTooltip_default, __spreadValues({}, tooltipRef.current)))), showLegend && /* @__PURE__ */ react_exports.createElement(
+  ), /* @__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(
     TimelineLegend_default,
     {
       height: chartHeight,
@@ -3269,7 +3644,7 @@ 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 { laneSeries, lanes, categoricalColors, tickInterval } = mapDataToTimeline(
+  const { laneSeries, lanes, categoricalColors, tickInterval } = mapDataToTimeline({
     resultLimit,
     x,
     y,
@@ -3279,7 +3654,7 @@ var PureTimeline = (_a) => {
     seriesColors,
     additionalTooltipValues,
     timezone
-  );
+  });
   const handleLaneClick = (laneValue) => {
     onLaneClick({
       type: "lane.click",
@@ -3442,40 +3817,17 @@ var computeVizProps = (_a) => {
     "onLegendClick",
     "onLaneClick"
   ]);
-  let convertedDuration;
-  let timelineDataColors = dataColors;
-  let timelineSeriesColors = seriesColors;
   const pickedOptions = (0, lodash_exports.chain)(otherOptions).pick(validOptions).value();
   const columns = ((_c = (_b = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _b.data) == null ? void 0 : _c.columns) || [];
   const fields = ((_e = (_d = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _d.data) == null ? void 0 : _e.fields) || [];
   const additionalTooltipValues = (pickedOptions == null ? void 0 : pickedOptions.additionalTooltipFields) ? extractAdditionalTooltipValues(columns, fields, pickedOptions == null ? void 0 : pickedOptions.additionalTooltipFields) : [];
-  if (seriesColors && typeof seriesColors === "string") {
-    try {
-      timelineSeriesColors = JSON.parse(seriesColors);
-    } catch (e) {
-      timelineSeriesColors = visualization_color_palettes_exports.VIZ_CATEGORICAL;
-    }
-  } else if (!seriesColors) {
-    timelineSeriesColors = visualization_color_palettes_exports.VIZ_CATEGORICAL;
-  } else if (seriesColors && Array.isArray(seriesColors)) {
-    timelineSeriesColors = (0, colorUtils_exports.sanitizeArrayOfColors)(seriesColors);
-  }
-  if (Array.isArray(dataColors) && (dataColors == null ? void 0 : dataColors.length)) {
-    timelineDataColors = (0, colorUtils_exports.sanitizeArrayOfColors)(dataColors);
-  } else if (dataColors && typeof dataColors === "string") {
-    try {
-      timelineDataColors = JSON.parse(dataColors);
-    } catch (e) {
-      timelineDataColors = visualization_color_palettes_exports.VIZ_CATEGORICAL;
-    }
-  }
-  if ((duration == null ? void 0 : duration.length) > 0 && typeof duration[0] === "string") {
-    convertedDuration = convertToNumbers(duration);
-  }
+  const timelineSeriesColors = normalizeSeriesColors(seriesColors);
+  const timelineDataColors = normalizeDataColors(dataColors);
+  const durationValues = normalizeDuration(duration);
   return __spreadValues({
     x,
     y,
-    duration: convertedDuration || duration,
+    duration: durationValues,
     category,
     additionalTooltipValues,
     onEventClick,
@@ -3490,6 +3842,41 @@ function convertToNumbers(arr) {
     return (0, types_exports.isNumber)(item) ? parseFloat(item) : 0;
   });
 }
+function normalizeSeriesColors(seriesColors) {
+  if (seriesColors && typeof seriesColors === "string") {
+    try {
+      return JSON.parse(seriesColors);
+    } catch (e) {
+      return visualization_color_palettes_exports.VIZ_CATEGORICAL;
+    }
+  }
+  if (!seriesColors) {
+    return visualization_color_palettes_exports.VIZ_CATEGORICAL;
+  }
+  if (Array.isArray(seriesColors)) {
+    return (0, colorUtils_exports.sanitizeArrayOfColors)(seriesColors);
+  }
+  return seriesColors;
+}
+function normalizeDataColors(dataColors) {
+  if (Array.isArray(dataColors) && (dataColors == null ? void 0 : dataColors.length)) {
+    return (0, colorUtils_exports.sanitizeArrayOfColors)(dataColors);
+  }
+  if (dataColors && typeof dataColors === "string") {
+    try {
+      return JSON.parse(dataColors);
+    } catch (e) {
+      return visualization_color_palettes_exports.VIZ_CATEGORICAL;
+    }
+  }
+  return dataColors;
+}
+function normalizeDuration(duration) {
+  if ((duration == null ? void 0 : duration.length) > 0 && typeof duration[0] === "string") {
+    return convertToNumbers(duration);
+  }
+  return duration;
+}
 function extractAdditionalTooltipValues(columns, fields, additionalTooltipFields) {
   var _a;
   const fieldIndexMap = fields.reduce((acc, field, index) => {