@splunk/visualizations 28.2.3 → 28.4.0

package/Timeline.js

@@ -115,41 +115,50 @@ 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-color-palettes/editors/PresetPalettes
+var PresetPalettes_exports = {};
+__export(PresetPalettes_exports, {
+  default: () => PresetPalettes_default
+});
+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 defaultImport6 ? defaultImport6.default : defaultImport6;
+
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport6 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport7 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+var visualization_icons_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
-// esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
-var PresetPalettes_exports = {};
-__export(PresetPalettes_exports, {
-  default: () => PresetPalettes_default
+// esm-externals:@splunk/visualization-icons/placeholders
+var placeholders_exports = {};
+__export(placeholders_exports, {
+  default: () => placeholders_default
 });
-var defaultImport7 = __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 defaultImport8 = __toESM(require("@splunk/visualization-icons/placeholders"));
+__reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
+var placeholders_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
 
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport8 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport9 = __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 defaultImport9 ? defaultImport9.default : defaultImport9;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport9 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport10 = __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 defaultImport10 ? defaultImport10.default : defaultImport10;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -183,18 +192,18 @@ var pick_exports = {};
 __export(pick_exports, {
   default: () => pick_default
 });
-var defaultImport10 = __toESM(require("@splunk/themes/pick"));
+var defaultImport11 = __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 defaultImport11 ? defaultImport11.default : defaultImport11;
 
 // esm-externals:@splunk/themes/variables
 var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport11 = __toESM(require("@splunk/themes/variables"));
+var defaultImport12 = __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 defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // src/common/ThemedDefaults.tsx
 var defaultBackgroundColor = (props) => pick_default({
@@ -438,7 +447,6 @@ var config = {
    * viz icon
    */
   icon: visualization_icons_exports.Timeline,
-  // placeholderIcon: TimelinePlaceholderIcon, TBD
   dataContract,
   size,
   defaultContext,
@@ -456,7 +464,8 @@ var config = {
     }
   },
   supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "placeholder" /* PLACEHOLDER */, "events" /* EVENTS */],
-  themes
+  themes,
+  placeholderIcon: placeholders_exports.Timeline
 };
 var config_default = enhanceConfig(config);
 
@@ -465,117 +474,117 @@ var react_exports = {};
 __export(react_exports, {
   default: () => react_default
 });
-var defaultImport12 = __toESM(require("react"));
+var defaultImport13 = __toESM(require("react"));
 __reExport(react_exports, require("react"));
-var react_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var react_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:@splunk/themes/getSettingsFromThemedProps
 var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport13 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport14 = __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 defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport14 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport15 = __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 defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport15 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport16 = __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 defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport16 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport17 = __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 defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport17 = __toESM(require("@splunk/moment"));
+var defaultImport18 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var moment_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/visualization-context/FeatureFlagContext
 var FeatureFlagContext_exports = {};
 __export(FeatureFlagContext_exports, {
   default: () => FeatureFlagContext_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+var defaultImport19 = __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 defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:styled-components
 var styled_components_exports = {};
 __export(styled_components_exports, {
   default: () => styled_components_default
 });
-var defaultImport19 = __toESM(require("styled-components"));
+var defaultImport20 = __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 defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/visualizations-shared/hocUtils
 var hocUtils_exports = {};
 __export(hocUtils_exports, {
   default: () => hocUtils_default
 });
-var defaultImport20 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
+var defaultImport21 = __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 defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/visualizations-shared/JSONSchemaUtils
 var JSONSchemaUtils_exports = {};
 __export(JSONSchemaUtils_exports, {
   default: () => JSONSchemaUtils_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
+var defaultImport22 = __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 defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // 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 defaultImport23 = __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 defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // esm-externals:@splunk/ui-utils/id
 var id_exports = {};
 __export(id_exports, {
   default: () => id_default
 });
-var defaultImport23 = __toESM(require("@splunk/ui-utils/id"));
+var defaultImport24 = __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 defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:prop-types
 var prop_types_exports = {};
 __export(prop_types_exports, {
   default: () => prop_types_default
 });
-var defaultImport24 = __toESM(require("prop-types"));
+var defaultImport25 = __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 defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -783,18 +792,18 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport26 = __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 defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
 var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport27 = __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 defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // src/common/components/MissingPropsMessage.tsx
 var isMissing = (v) => {
@@ -849,7 +858,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.2.3 - f147a8bda"
+  "data-splunk-visualization-version": "28.4.0 - 002bd482f"
 })`
     position: relative;
     width: 100%;
@@ -871,9 +880,9 @@ var style_exports = {};
 __export(style_exports, {
   default: () => style_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport28 = __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 defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -930,7 +939,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.2.3 - f147a8bda",
+        "data-splunk-visualization-version": "28.4.0 - 002bd482f",
         width,
         height,
         backgroundColor
@@ -1021,11 +1030,12 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport29 = __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 defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/common/utils/dataUtils.ts
+var getFieldName = (field) => typeof field === "string" ? field : field.name;
 var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
   const dataLength = data.length;
   const downsampledIndices = [];
@@ -1142,9 +1152,9 @@ var tryToCoerceAllDisplayedFields = (ds, xField, yFields, fieldTypes, options) =
   let xColumn = [];
   const yColumns = [];
   const canDownsample = !ds.data.fields.some((field, index) => {
-    var _a, _b;
-    const fieldName = (_a = field.name) != null ? _a : field;
-    const fieldType = (_b = fieldTypes[index]) != null ? _b : "unknown";
+    var _a;
+    const fieldName = getFieldName(field);
+    const fieldType = (_a = fieldTypes[index]) != null ? _a : "unknown";
     const column = ds.data.columns[index];
     let hasDisplayedColumnThatCantBeDownsampled = false;
     if (fieldName === xField) {
@@ -1403,9 +1413,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport30 = __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 defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -1423,9 +1433,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport31 = __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 defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -1442,9 +1452,9 @@ var visualization_canvas_exports = {};
 __export(visualization_canvas_exports, {
   default: () => visualization_canvas_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualization-canvas"));
+var defaultImport32 = __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 defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // src/common/components/VizStyleWrapper.jsx
 var VizStyleWrapper = styled_components_default.div.attrs(({ dataTestKey }) => ({
@@ -1466,9 +1476,9 @@ var Triangle_exports = {};
 __export(Triangle_exports, {
   default: () => Triangle_default
 });
-var defaultImport32 = __toESM(require("@splunk/react-icons/Triangle"));
+var defaultImport33 = __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 defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
@@ -1484,14 +1494,29 @@ 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
   });
 };
+var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
+  const rangeSelectEventHandler = eventHandlers.find(
+    (eventHandler) => {
+      var _a;
+      return (_a = eventHandler.options.events) == null ? void 0 : _a.includes("range.select");
+    }
+  );
+  const xAxisIsTime = xField === "_time";
+  return !!rangeSelectEventHandler && xAxisIsTime;
+};
 var canvasSupportedTimeSeriesCharts = ["splunk.line"];
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
   return canvasSupportedTimeSeriesCharts.indexOf(vizConfigKey) > -1;
@@ -1512,16 +1537,31 @@ var filterChartDataFromInternalFields = (chartData) => {
 var convert2DArrayToNumbers = (arr) => {
   return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
 };
+var parseAxisValue = (val) => {
+  if (val === void 0 || val === null || val === "auto" || val === "") {
+    return void 0;
+  }
+  const num = typeof val === "number" ? val : Number.parseFloat(val);
+  return Number.isNaN(num) ? void 0 : num;
+};
 var SideLegendWidth = 75;
-var commonLegendProps = { center: true, fontSize: 12, largerTiles: true, hideSeriesValue: true };
+var SeriesCompareLegendWidth = 200;
 var getLegend = (props) => {
   const legendPlacement = props == null ? void 0 : props.legendDisplay;
+  const { isSeriesCompare } = props;
+  const commonLegendProps = {
+    center: true,
+    fontSize: 12,
+    largerTiles: true,
+    hideSeriesValue: !isSeriesCompare
+    // Show values if in seriesCompare mode
+  };
   switch (legendPlacement) {
     case "off":
       return false;
     case "left":
       return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
-        width: SideLegendWidth
+        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
       }, commonLegendProps));
     case "bottom":
       return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
@@ -1533,7 +1573,7 @@ var getLegend = (props) => {
       }, commonLegendProps));
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: SideLegendWidth
+        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
       }, commonLegendProps));
   }
 };
@@ -1569,19 +1609,25 @@ var ellipsisAxisTitle = (axisTitle, containerSpacing, fontSize = 12) => {
   const end = axisTitle.slice(-halfChars);
   return `${start}...${end}`;
 };
-var getFieldName = (field) => {
+var getFieldName2 = (field) => {
   const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
   return fieldName;
 };
 var getFieldNames = (fields) => {
-  return fields.map((field) => getFieldName(field));
+  return fields.map((field) => getFieldName2(field));
 };
-var getXScaleConfig = (label) => {
+var getXScaleConfig = (label, xAxisLabelVisibility, xAxisLabelRotation) => {
   const xConfig = { x: {} };
   xConfig.x.label = label;
+  if (xAxisLabelVisibility === "hide") {
+    xConfig.x.hideLabels = true;
+  }
+  if (xAxisLabelRotation !== void 0) {
+    xConfig.x.labelRotation = xAxisLabelRotation;
+  }
   return xConfig;
 };
-var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax) => {
   const scaleType = yAxisScale != null ? yAxisScale : "linear";
   const yConfig = { y: {} };
   yConfig.y.label = label;
@@ -1594,23 +1640,42 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
   } else {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
+  if (yAxisLabelVisibility === "hide") {
+    yConfig.y.hideLabels = true;
+  }
+  if (yAxisMin !== void 0 || yAxisMax !== void 0) {
+    yConfig.y.range = (u, dataMin, dataMax) => {
+      const min = yAxisMin != null ? yAxisMin : dataMin;
+      const max = yAxisMax != null ? yAxisMax : dataMax;
+      return [min, max];
+    };
+  }
   return yConfig;
 };
-var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility, y2AxisMin, y2AxisMax) => {
   const y2Config = { y2: {} };
   const scaleType = axisScale != null ? axisScale : "linear";
   y2Config.y2.label = label;
   y2Config.y2.side = "right";
-  y2Config.y2.showGrid = false;
   y2Config.y2.type = scaleType;
   if (axisAbbreviation !== "none") {
     y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
+  if (y2AxisLabelVisibility === "hide") {
+    y2Config.y2.hideLabels = true;
+  }
+  if (y2AxisMin !== void 0 || y2AxisMax !== void 0) {
+    y2Config.y2.range = (u, dataMin, dataMax) => {
+      const min = y2AxisMin != null ? y2AxisMin : dataMin;
+      const max = y2AxisMax != null ? y2AxisMax : dataMax;
+      return [min, max];
+    };
+  }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -1642,12 +1707,90 @@ 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;
+    }
+    const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
+    if (fieldDashStyle) {
+      seriesConfig[field].lineDashStyle = fieldDashStyle;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
   });
   return seriesConfig;
 };
+var findRangeIndices = (xData, startValue, endValue) => {
+  let startXIndex = -1;
+  let endXIndex = -1;
+  const xDataEpoch = xData.map((val) => {
+    if (typeof val === "string") {
+      return new Date(val).getTime() / 1e3;
+    }
+    return val;
+  });
+  for (let i = 0; i < xDataEpoch.length; i += 1) {
+    if (xDataEpoch[i] >= startValue) {
+      startXIndex = i;
+      break;
+    }
+  }
+  if (startXIndex === -1 && xDataEpoch.length > 0) {
+    startXIndex = xDataEpoch.length - 1;
+  }
+  for (let i = xDataEpoch.length - 1; i >= 0; i -= 1) {
+    if (xDataEpoch[i] <= endValue) {
+      endXIndex = i;
+      break;
+    }
+  }
+  if (endXIndex === -1 && xDataEpoch.length > 0) {
+    endXIndex = 0;
+  }
+  return { startXIndex, endXIndex };
+};
+
+// src/common/hooks/useTrellisEnabled.ts
+var useTrellisFeatureFlagOn = () => {
+  const context = (0, react_exports.useContext)(FeatureFlagContext_default);
+  return Boolean(context == null ? void 0 : context.visualizations_enableTrellis);
+};
+var useTrellisEnabled = (layoutType = visualization_schemas_exports.LAYOUT_TYPE.Off) => {
+  const trellisFeatureEnabled = useTrellisFeatureFlagOn();
+  return trellisFeatureEnabled && layoutType === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+
+// src/common/components/TrellisTitle.tsx
+var TRELLIS_TITLE_HEIGHT = 28;
+var TrellisTitleText = styled_components_default.div`
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-top: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+var TrellisTitleDiv = styled_components_default.div`
+    height: ${TRELLIS_TITLE_HEIGHT}px;
+    font-size: 14px;
+    font-weight: 700;
+    color: ${(props) => props.fontColor};
+    background-color: ${(props) => props.backgroundColor};
+    box-shadow: 0 1px ${(props) => props.backgroundColor}; // this is added to avoid a 1px gap between title and viz divs that showed up intermittently because of pixel rounding error in chrome.
+`;
+var TrellisTitle = (props) => {
+  const titleText = String(props.trellisKey).toString();
+  return /* @__PURE__ */ react_exports.createElement(
+    TrellisTitleDiv,
+    {
+      fontColor: props.fontColor,
+      backgroundColor: props.backgroundColor,
+      "data-test": "trellis-title",
+      title: titleText
+    },
+    /* @__PURE__ */ react_exports.createElement(TrellisTitleText, null, titleText)
+  );
+};
 
 // src/common/TimeSeriesChartWrapper.tsx
 var TimeSeriesChartContainer = styled_components_default.div`
@@ -1658,45 +1801,190 @@ 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 appendTrellisToPayload = (payload, trellisKey, trellisSplitBy) => {
+  const result = __spreadValues({}, payload);
+  if (trellisSplitBy) {
+    result["trellis.name"] = trellisSplitBy;
+  }
+  if (trellisKey) {
+    result["trellis.value"] = trellisKey;
+  }
+  return result;
+};
+var hasMouseoverPayloadChanged = (currentPayload, previousPayload) => {
+  if (!previousPayload) {
+    return true;
+  }
+  if (currentPayload.index !== previousPayload.index) {
+    return true;
+  }
+  if (currentPayload.seriesIndex !== previousPayload.seriesIndex) {
+    return true;
+  }
+  if (currentPayload["trellis.name"] !== previousPayload["trellis.name"]) {
+    return true;
+  }
+  if (currentPayload["trellis.value"] !== previousPayload["trellis.value"]) {
+    return true;
+  }
+  return false;
+};
+var handleClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
   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.assign(
+      payload,
+      Object.keys(chartEvent.rowContext).reduce((acc, fieldName) => {
+        acc[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
+        return acc;
+      }, {})
+    );
+  }
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onClick) {
+    onClick({
       type: "point.click",
       originalEvent: chartEvent,
-      payload
+      payload: updatedPayload
     });
   }
 };
-var handleLegendClick = (chartEvent, props) => {
+var handleLegendClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
   const payload = {
     name: chartEvent
   };
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onClick) {
+    onClick({
       type: "legend.click",
       originalEvent: chartEvent,
-      payload
+      payload: updatedPayload
     });
   }
 };
+var handleRangeSelection = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
+  var _a;
+  if (!rangeEvent) {
+    return;
+  }
+  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
+  const payload = {
+    startXIndex,
+    startXValue: rangeEvent.start,
+    endXIndex,
+    endXValue: rangeEvent.end
+  };
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onSelect) {
+    onSelect({
+      type: "range.selectBeforeZoom",
+      originalEvent: rangeEvent,
+      payload: updatedPayload
+    });
+  }
+};
+var handleRangeZoom = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
+  var _a;
+  const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
+  const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
+  const payload = {
+    startXIndex,
+    startXValue: rangeEvent.start,
+    endXIndex,
+    endXValue: rangeEvent.end
+  };
+  const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+  if (onSelect) {
+    onSelect({
+      type: "range.select",
+      originalEvent: rangeEvent,
+      payload: updatedPayload
+    });
+  }
+};
+var parseArrayOption = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (value) {
+    return JSON.parse(value);
+  }
+  return void 0;
+};
 var TimeSeriesChartWrapper = (props) => {
-  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
-  const {
+  var _b, _c, _d;
+  const _a = props, {
+    width,
+    height,
+    chartData,
+    options,
+    userLocale,
+    annotationX,
+    annotationLabel,
+    annotationColor,
+    legendDisplay,
+    markerDisplay,
+    onClick,
+    onPointMouseOver,
+    onPointMouseOut,
+    onSelect,
+    splitByLayout,
+    trellisKey,
+    trellisSplitBy,
     backgroundColor,
+    defaultFontColor,
+    additionalTooltipValues,
+    showYAxisWithZero: showYAxisWithZeroFromProps,
+    showY2AxisWithZero: showY2AxisWithZeroFromProps
+  } = _a, otherOptions = __objRest(_a, [
+    "width",
+    "height",
+    "chartData",
+    "options",
+    "userLocale",
+    "annotationX",
+    "annotationLabel",
+    "annotationColor",
+    "legendDisplay",
+    "markerDisplay",
+    "onClick",
+    "onPointMouseOver",
+    "onPointMouseOut",
+    "onSelect",
+    "splitByLayout",
+    "trellisKey",
+    "trellisSplitBy",
+    "backgroundColor",
+    "defaultFontColor",
+    "additionalTooltipValues",
+    // Extract showYAxisWithZero directly from props for accelerated render mode
+    "showYAxisWithZero",
+    "showY2AxisWithZero"
+  ]);
+  const { eventHandlers, xField: xFieldFromProps } = otherOptions;
+  const trellisEnabled = useTrellisEnabled(splitByLayout);
+  const {
+    backgroundColor: bgColorFromOptions,
     seriesColors: seriesColorsStr,
     fieldColors,
+    legendLabels: legendLabelsStr,
+    legendMode,
     "axisTitleX.text": xAxisTitleText,
     "axisTitleY.text": yAxisTitleText,
     "axisTitleY2.text": y2AxisTitleText,
     "axisTitleX.visibility": xAxisTitleVisibility,
     "axisTitleY.visibility": yAxisTitleVisibility,
     "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
+    "axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
+    "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
+    "axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
+    "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
+    "axisLabelsY2.majorUnit": y2AxisMajorUnitFromSimpleXML,
     "axisY.abbreviation": yAxisAbbreviation,
     "axisY.scale": yAxisScale,
     "axisY2.abbreviation": y2AxisAbbreviation,
@@ -1706,10 +1994,63 @@ var TimeSeriesChartWrapper = (props) => {
     "axisLabelsY2.integerUnits": y2IntegerUnits,
     "chart.overlayFields": overlayFieldsStr,
     "chart.nullValueMode": nullValueMode,
-    lineWidth
+    "chart.showDataLabels": showDataLabels,
+    lineWidth,
+    lineDashStyle,
+    fieldDashStyles: lineDashStylesByFieldStr,
+    yAxisMin: yAxisMinRaw,
+    yAxisMax: yAxisMaxRaw,
+    y2AxisMin: y2AxisMinRaw,
+    y2AxisMax: y2AxisMaxRaw,
+    showXMajorGridLines,
+    showYMajorGridLines,
+    showY2MajorGridLines,
+    showYMinorGridLines,
+    showY2MinorGridLines,
+    showLineSmoothing,
+    yAxisMajorTickVisibility,
+    y2AxisMajorTickVisibility,
+    yAxisMajorTickSize,
+    y2AxisMajorTickSize,
+    yAxisMajorTickInterval,
+    y2AxisMajorTickInterval,
+    yAxisMinorTickVisibility,
+    y2AxisMinorTickVisibility,
+    yAxisMinorTickSize,
+    y2AxisMinorTickSize,
+    showYAxisWithZero: showYAxisWithZeroFromOptions,
+    showY2AxisWithZero: showY2AxisWithZeroFromOptions
   } = options;
+  const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
+  const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
+  const showY2AxisWithZero = showY2AxisWithZeroFromProps != null ? showY2AxisWithZeroFromProps : showY2AxisWithZeroFromOptions;
+  const showYMajorTicks = yAxisMajorTickVisibility === "show";
+  const showY2MajorTicks = y2AxisMajorTickVisibility === "show";
+  const showYMinorTicks = yAxisMinorTickVisibility === "show";
+  const showY2MinorTicks = y2AxisMinorTickVisibility === "show";
+  const yAxisMin = parseAxisValue(yAxisMinRaw);
+  const yAxisMax = parseAxisValue(yAxisMaxRaw);
+  const y2AxisMin = parseAxisValue(y2AxisMinRaw);
+  const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
+  const parseTickInterval = (simpleXMLValue, canvasValue) => {
+    if (simpleXMLValue) return Number(simpleXMLValue);
+    if (canvasValue) return Number(canvasValue);
+    return void 0;
+  };
+  const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
+  const y2AxisMajorTickIntervalNum = parseTickInterval(
+    y2AxisMajorUnitFromSimpleXML,
+    y2AxisMajorTickInterval
+  );
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize ? Number(yAxisMajorTickSize) : void 0;
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize ? Number(y2AxisMajorTickSize) : void 0;
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize ? Number(yAxisMinorTickSize) : void 0;
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize ? Number(y2AxisMinorTickSize) : void 0;
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
+  const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
+  const legendLabels = parseArrayOption(legendLabelsStr);
+  const bgColor = backgroundColor || bgColorFromOptions;
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
   const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
   const cachedHandleResize = react_exports.useCallback((w, h) => {
@@ -1720,25 +2061,64 @@ var TimeSeriesChartWrapper = (props) => {
     fields: chartData.fields,
     columns: chartData.seriesList
   });
-  const xField = getFieldName(filteredChartData.fields[0]);
+  const xField = getFieldName2(filteredChartData.fields[0]);
   const yFields = getFieldNames(
     filteredChartData.fields.length > 1 ? filteredChartData.fields.slice(1) : []
   );
-  const y2Fields = y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [];
-  const overlayFields = overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [];
+  const y2Fields = (0, react_exports.useMemo)(
+    () => y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [],
+    [y2FieldsStr]
+  );
+  const overlayFields = (0, react_exports.useMemo)(
+    () => overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [],
+    [overlayFieldsStr]
+  );
   let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
   xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
-  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFields, yAxisTitleVisibility);
+  const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
+  let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
   yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
   const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
   let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
   y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
-  const xScaleConfig = getXScaleConfig(xAxisTitle);
-  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale);
-  let y2ScaleConfig = {};
-  if (y2Enabled) {
-    y2ScaleConfig = getY2ScaleConfig(y2AxisTitle, y2AxisAbbreviation, y2AxisScale, y2IntegerUnits);
-  }
+  const xScaleConfig = (0, react_exports.useMemo)(
+    () => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
+    [xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
+  );
+  const yScaleConfig = (0, react_exports.useMemo)(
+    () => getYScaleConfig(
+      yAxisTitle,
+      yAxisAbbreviation,
+      yAxisScale,
+      yAxisLabelVisibility,
+      yAxisMin,
+      yAxisMax
+    ),
+    [yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
+  );
+  const y2ScaleConfig = (0, react_exports.useMemo)(() => {
+    if (y2Enabled) {
+      return getY2ScaleConfig(
+        y2AxisTitle,
+        y2AxisAbbreviation,
+        y2AxisScale,
+        y2IntegerUnits,
+        y2AxisLabelVisibility,
+        y2AxisMin,
+        y2AxisMax
+      );
+    }
+    return {};
+  }, [
+    y2Enabled,
+    y2AxisTitle,
+    y2AxisAbbreviation,
+    y2AxisScale,
+    y2IntegerUnits,
+    y2AxisLabelVisibility,
+    y2AxisMin,
+    y2AxisMax
+  ]);
   const uplotContainerElement = (0, react_exports.useRef)(null);
   const seriesDataFormatted = [
     filteredChartData.columns[0],
@@ -1746,24 +2126,140 @@ 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,
+      lineDashStyle,
+      lineDashStylesByField
+    ),
+    [
+      yFields,
+      y2Fields,
+      lineWidth,
+      overlayFields,
+      y2Enabled,
+      nullValueMode,
+      markerDisplay,
+      lineDashStyle,
+      lineDashStylesByField
+    ]
   );
-  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,
+  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, isSeriesCompare: legendMode === "seriesCompare" }),
+    [legendDisplay, legendMode]
+  );
+  const handleChartClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleClick(event, onClick, trellisKey, trellisSplitBy);
+      }
+    },
+    [onClick, trellisKey, trellisSplitBy]
+  );
+  const handleChartLegendClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleLegendClick(event, onClick, trellisKey, trellisSplitBy);
+      }
+    },
+    [onClick, trellisKey, trellisSplitBy]
+  );
+  const handleChartRangeSelection = react_exports.useCallback(
+    (range2) => {
+      if (onSelect) {
+        handleRangeSelection(range2, onSelect, chartData, trellisKey, trellisSplitBy);
+      }
+    },
+    [onSelect, chartData, trellisKey, trellisSplitBy]
+  );
+  const handleChartRangeZoom = react_exports.useCallback(
+    (range2) => {
+      if (onSelect) {
+        handleRangeZoom(range2, onSelect, chartData, trellisKey, trellisSplitBy);
+      }
+    },
+    [onSelect, chartData, trellisKey, trellisSplitBy]
+  );
+  const xFieldToUse = xFieldFromProps || xField;
+  const enableSearchZoom = react_exports.useMemo(
+    () => shouldEnableSearchZoom(eventHandlers, xFieldToUse),
+    [eventHandlers, xFieldToUse]
+  );
+  const lastPayloadRef = react_exports.useRef(null);
+  const lastOriginalEventRef = react_exports.useRef(null);
+  const previousMouseoverPayloadRef = react_exports.useRef(null);
+  const additionalTooltipValuesRef = react_exports.useRef(additionalTooltipValues);
+  react_exports.useEffect(() => {
+    additionalTooltipValuesRef.current = additionalTooltipValues;
+  }, [additionalTooltipValues]);
+  const handleChartCrosshairChange = react_exports.useCallback(
+    (event) => {
+      if (onPointMouseOver || onPointMouseOut) {
+        if (!event) {
+          if (onPointMouseOut && lastPayloadRef.current) {
+            onPointMouseOut({
+              type: "point.mouseout",
+              originalEvent: lastOriginalEventRef.current,
+              payload: lastPayloadRef.current
+            });
+          }
+          previousMouseoverPayloadRef.current = null;
+          return;
+        }
+        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+          name: event.seriesKey
+        });
+        delete payload.seriesKey;
+        if (event.rowContext) {
+          Object.assign(
+            payload,
+            Object.keys(event.rowContext).reduce((acc, fieldName) => {
+              acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
+              return acc;
+            }, {})
+          );
+        }
+        const updatedPayload = appendTrellisToPayload(payload, trellisKey, trellisSplitBy);
+        if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
+          return;
+        }
+        lastPayloadRef.current = updatedPayload;
+        lastOriginalEventRef.current = event;
+        previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
+        if (onPointMouseOver) {
+          onPointMouseOver({
+            type: "point.mouseover",
+            originalEvent: event,
+            payload: updatedPayload
+          });
+        }
+      }
+    },
+    [onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
+  );
+  const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
+  const memoizedChart = (0, react_exports.useMemo)(() => {
+    const computedOnRangeZoom = onSelect ? handleChartRangeZoom : void 0;
+    return /* @__PURE__ */ react_exports.createElement(visualization_canvas_exports.RangeSelectionProvider, { key: dataKey }, /* @__PURE__ */ react_exports.createElement(
+      visualization_canvas_exports.TimeSeriesChart,
       {
         data: chartData,
         width: containerWidth,
@@ -1771,49 +2267,113 @@ var TimeSeriesChartWrapper = (props) => {
         seriesColors,
         seriesColorsByField,
         seriesConfig: seriesOverrides,
-        legend: getLegend(props),
+        legend,
+        legendLabels,
+        isSeriesCompare: legendMode === "seriesCompare",
+        maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
         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,
+        onRangeSelection: handleChartRangeSelection,
+        onRangeZoom: computedOnRangeZoom,
+        serverSideZoom: enableSearchZoom,
         userLocale,
         events: chartingEventAnnotations,
-        eventsConfig: { renderer: triangleEventAnnotationRenderer }
+        eventsConfig: { renderer: triangleEventAnnotationRenderer },
+        additionalTooltipValuesRef,
+        showXMajorGridLines,
+        showYMajorGridLines,
+        showY2MajorGridLines,
+        showYMinorGridLines,
+        showY2MinorGridLines,
+        showLineSmoothing,
+        dataValuesDisplay,
+        showYMajorTicks,
+        showY2MajorTicks,
+        yAxisMajorTickSize: yAxisMajorTickSizeNum,
+        y2AxisMajorTickSize: y2AxisMajorTickSizeNum,
+        yAxisMajorTickInterval: yAxisMajorTickIntervalNum,
+        y2AxisMajorTickInterval: y2AxisMajorTickIntervalNum,
+        showYMinorTicks,
+        showY2MinorTicks,
+        yAxisMinorTickSize: yAxisMinorTickSizeNum,
+        y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
+        showYAxisWithZero,
+        showY2AxisWithZero
       }
-    ),
-    [
-      MemoizedChart,
-      chartData,
-      containerWidth,
-      containerHeight,
-      seriesColors,
-      seriesColorsByField,
-      seriesOverrides,
-      lineWidth,
-      props,
-      scaleConfig,
-      userLocale,
-      chartingEventAnnotations
-    ]
-  );
+    ));
+  }, [
+    onSelect,
+    handleChartRangeZoom,
+    dataKey,
+    chartData,
+    containerWidth,
+    containerHeight,
+    seriesColors,
+    seriesColorsByField,
+    seriesOverrides,
+    legend,
+    legendLabels,
+    scaleConfig,
+    onClick,
+    handleChartClick,
+    onPointMouseOver,
+    onPointMouseOut,
+    handleChartCrosshairChange,
+    handleChartLegendClick,
+    handleChartRangeSelection,
+    enableSearchZoom,
+    userLocale,
+    chartingEventAnnotations,
+    showXMajorGridLines,
+    showYMajorGridLines,
+    showY2MajorGridLines,
+    showYMinorGridLines,
+    showY2MinorGridLines,
+    showLineSmoothing,
+    dataValuesDisplay,
+    showYMajorTicks,
+    showY2MajorTicks,
+    yAxisMajorTickSizeNum,
+    y2AxisMajorTickSizeNum,
+    yAxisMajorTickIntervalNum,
+    y2AxisMajorTickIntervalNum,
+    showYMinorTicks,
+    showY2MinorTicks,
+    yAxisMinorTickSizeNum,
+    y2AxisMinorTickSizeNum,
+    showYAxisWithZero,
+    showY2AxisWithZero,
+    legendMode
+  ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
-    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
-  }, [backgroundColor]);
-  return /* @__PURE__ */ react_exports.createElement(
+    return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
+  }, [bgColor, memoizedChart]);
+  return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
+    TrellisTitle,
+    {
+      trellisKey,
+      backgroundColor: bgColor,
+      fontColor: defaultFontColor
+    }
+  ), /* @__PURE__ */ react_exports.createElement(
     TimeSeriesChartContainer,
     {
-      height,
+      height: trellisEnabled ? Number(height) - TRELLIS_TITLE_HEIGHT : height,
       width,
       ref: uplotContainerElement,
       "data-test": "timeseries-chart-wrapper"
     },
     /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }),
     memoizedVisualization
-  );
+  ));
 };
 var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
+var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -1822,6 +2382,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -1950,11 +2511,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;
@@ -2042,7 +2611,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -2066,10 +2635,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), {
@@ -2097,34 +2663,71 @@ var config_exports = {};
 __export(config_exports, {
   default: () => config_default2
 });
-var defaultImport33 = __toESM(require("@splunk/splunk-utils/config"));
+var defaultImport34 = __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 defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/themes
 var themes_exports = {};
 __export(themes_exports, {
   default: () => themes_default
 });
-var defaultImport34 = __toESM(require("@splunk/themes"));
+var defaultImport35 = __toESM(require("@splunk/themes"));
 __reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var themes_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
-// src/common/utils/styleUtils.ts
+// src/common/utils/textUtils.ts
 var VIZ_FONT_FAMILY = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
+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 ellipsis;
+};
 
 // 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;
@@ -2160,16 +2763,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();
@@ -2190,7 +2805,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;
@@ -2207,7 +2822,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);
     }
@@ -2241,43 +2856,6 @@ 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") {
-    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 ellipsis;
-};
 var getTickInterval = (averageDiff) => {
   if (averageDiff < 6e4) {
     return "1s";
@@ -2341,26 +2919,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 defaultImport36 = __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 defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/visualization-context/ZoomContext
 var ZoomContext_exports = {};
 __export(ZoomContext_exports, {
   default: () => ZoomContext_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualization-context/ZoomContext"));
+var defaultImport37 = __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 defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // 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,
@@ -2372,25 +2980,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");
@@ -2419,21 +3011,16 @@ var CursorPlugin = (props) => {
       init: (u) => {
         const chartContainer = u.root;
         chartContainer.addEventListener("click", handleClick2);
-        const pointerLeaveHandler = (e) => {
+        const pointerExitHandler = (e) => {
           if (!chartContainer.contains(e.relatedTarget)) {
             handleMouseLeave(u);
           }
         };
-        chartContainer.addEventListener("pointerleave", pointerLeaveHandler);
-        const pointerOutHandler = (e) => {
-          if (!chartContainer.contains(e.relatedTarget)) {
-            handleMouseLeave(u);
-          }
-        };
-        document.addEventListener("pointerout", pointerOutHandler, true);
+        chartContainer.addEventListener("pointerleave", pointerExitHandler);
+        document.addEventListener("pointerout", pointerExitHandler, true);
         return () => {
-          chartContainer.removeEventListener("pointerleave", pointerLeaveHandler);
-          document.removeEventListener("pointerout", pointerOutHandler, true);
+          chartContainer.removeEventListener("pointerleave", pointerExitHandler);
+          document.removeEventListener("pointerout", pointerExitHandler, true);
           chartContainer.removeEventListener("click", handleClick2);
         };
       },
@@ -2442,128 +3029,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 = ({
@@ -2573,52 +3326,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);
@@ -2626,8 +3385,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) {
@@ -2664,9 +3423,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);
@@ -2686,17 +3446,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];
@@ -2739,7 +3496,6 @@ var XAxisPlugin = ({
           return labelParts;
         });
         ctx.save();
-        ctx.scale(dpr, dpr);
         ctx.font = `10px ${VIZ_FONT_FAMILY}`;
         ctx.fillStyle = themes3.contentColorDefault;
         ctx.textAlign = "left";
@@ -2747,15 +3503,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;
@@ -2763,7 +3519,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) {
@@ -2864,7 +3620,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;
@@ -2891,7 +3647,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};
@@ -2901,13 +3657,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;
@@ -2930,10 +3691,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,
@@ -2958,8 +3717,9 @@ var TimelineLegend = ({
           color,
           isHighlighted,
           legendDisplay,
+          legendTruncation,
           onMouseEnter: () => handleMouseEnter(category),
-          onMouseOut: (e) => handleMouseLeave(e),
+          onMouseLeave: handleMouseLeave,
           onClick: () => {
             handleLegendClick2(category);
           }
@@ -2970,7 +3730,8 @@ var TimelineLegend = ({
             "data-test": "legend-color",
             color,
             isHighlighted,
-            legendDisplay
+            legendDisplay,
+            legendTruncation
           }
         ),
         /* @__PURE__ */ react_exports.createElement(LegendText, { legendTruncation, "data-test": "legend-text" }, truncatedText)
@@ -2994,9 +3755,9 @@ var useSplunkTheme_exports = {};
 __export(useSplunkTheme_exports, {
   default: () => useSplunkTheme_default
 });
-var defaultImport37 = __toESM(require("@splunk/themes/useSplunkTheme"));
+var defaultImport38 = __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 defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // src/Timeline/PureTimeline/src/TimelineTooltip.tsx
 var TooltipContainer = styled_components_default.div`
@@ -3086,9 +3847,9 @@ var uPlot_min_exports = {};
 __export(uPlot_min_exports, {
   default: () => uPlot_min_default
 });
-var defaultImport38 = __toESM(require("uplot/dist/uPlot.min.css"));
+var defaultImport39 = __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 defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/Timeline/PureTimeline/src/TimelineUplot.tsx
 var TimelineUplotContainer = styled_components_default.div`
@@ -3129,6 +3890,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,
@@ -3153,63 +3919,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,
@@ -3220,7 +4021,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,
@@ -3274,7 +4082,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,
@@ -3284,7 +4092,7 @@ var PureTimeline = (_a) => {
     seriesColors,
     additionalTooltipValues,
     timezone
-  );
+  });
   const handleLaneClick = (laneValue) => {
     onLaneClick({
       type: "lane.click",
@@ -3447,40 +4255,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,
@@ -3495,6 +4280,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) => {