@splunk/visualizations 28.2.3 → 28.4.0

package/Map.js

@@ -59,6 +59,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/Map/index.ts
 var Map_exports = {};
@@ -207,113 +227,68 @@ var defaultImport15 = __toESM(require("maplibre-gl/dist/maplibre-gl.css"));
 __reExport(maplibre_gl_exports2, require("maplibre-gl/dist/maplibre-gl.css"));
 var maplibre_gl_default2 = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
-// src/Map/PureMap/PureMapContainer.tsx
-var PureMapContainer = styled_components_default.div.attrs({
-  "data-test": "puremap-container"
-})`
-    ${maplibre_gl_default2}
-    overflow: hidden;
-    position: relative;
-    z-index: 0;
-    background-color: ${(props) => props.backgroundColor};
-    ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
-
-    // keep zoom control on top of cooperative gesture layer
-    .maplibregl-cooperative-gesture-screen {
-        z-index: 0;
-    }
+// esm-externals:@splunk/visualizations-shared/iconUtils
+var iconUtils_exports = {};
+__export(iconUtils_exports, {
+  default: () => iconUtils_default
+});
+var defaultImport16 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
+__reExport(iconUtils_exports, require("@splunk/visualizations-shared/iconUtils"));
+var iconUtils_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
-    // overwrite maplibregl zoom control styles
-    .maplibregl-ctrl-top-left {
-        display: ${(props) => props.showZoomControls ? "block" : "none"};
-        position: absolute;
-        top: 12px;
-        left: 16px;
-        .maplibregl-ctrl-group {
-            width: 40px !important;
-            height: 87px !important;
-            border-radius: 4px;
-            margin: 8px 0px;
-            background-color: ${(props) => props.controlBackgroundColor};
-            box-shadow:
-                0px 26px 103px rgba(0, 0, 0, 0.64),
-                0px 11px 18px rgba(0, 0, 0, 0.32),
-                0px 3px 6px rgba(0, 0, 0, 0.3);
-            & button {
-                width: 40px;
-                height: 43px;
-                border-top: 0;
-            }
-            .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
-                background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1V7H1C0.447715 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H7V15C7 15.5523 7.44772 16 8 16C8.55229 16 9 15.5523 9 15V9H15C15.5523 9 16 8.55229 16 8C16 7.44772 15.5523 7 15 7H9V1Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
-            }
+// esm-externals:@splunk/visualizations-shared/RemoteIcon
+var RemoteIcon_exports = {};
+__export(RemoteIcon_exports, {
+  default: () => RemoteIcon_default
+});
+var defaultImport17 = __toESM(require("@splunk/visualizations-shared/RemoteIcon"));
+__reExport(RemoteIcon_exports, require("@splunk/visualizations-shared/RemoteIcon"));
+var RemoteIcon_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
-            .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
-                background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="3" viewBox="0 0 14 3" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.99707C0 1.44479 0.447715 0.99707 1 0.99707H13C13.5523 0.99707 14 1.44479 14 1.99707C14 2.54936 13.5523 2.99707 13 2.99707H1C0.447715 2.99707 0 2.54936 0 1.99707Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
-            }
-        }
-    }
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport18 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
-    // overwrite maplibregl scale styles
-    .maplibregl-ctrl-bottom-left {
-        display: ${(props) => props.showScale ? "block" : "none"};
-        position: absolute;
-        z-index: 0;
-        bottom: 16px;
-        left: 12px;
-        width: 86px;
-        height: 29px;
-        border-radius: 4px;
-        margin: 0;
-        background-color: ${(props) => props.controlBackgroundColor};
-        box-shadow:
-            0px 26px 103px rgba(0, 0, 0, 0.13),
-            0px 11px 18px rgba(0, 0, 0, 0.06),
-            0px 3px 6px rgba(0, 0, 0, 0.06);
-        .maplibregl-ctrl-scale {
-            background-color: ${(props) => props.controlBackgroundColor};
-            color: ${(props) => props.controlForegroundColor};
-            border: 2px solid ${(props) => props.controlForegroundColor};
-            border-top: 0;
-            border-left: 0;
-            border-right: 0;
-            padding: 0;
-            margin: 6px 8px 8px 8px;
-            line-height: 13px;
-            letter-spacing: 0.02em;
-            font-family: sans-serif;
-            font-size: 10px;
-        }
-    }
-`;
-var PureMapContainer_default = PureMapContainer;
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport19 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
 
 // esm-externals:d3-scale
 var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport16 = __toESM(require("d3-scale"));
+var defaultImport20 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+var d3_scale_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // esm-externals:@splunk/visualization-color-palettes
 var visualization_color_palettes_exports = {};
 __export(visualization_color_palettes_exports, {
   default: () => visualization_color_palettes_default
 });
-var defaultImport17 = __toESM(require("@splunk/visualization-color-palettes"));
+var defaultImport21 = __toESM(require("@splunk/visualization-color-palettes"));
 __reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
-var visualization_color_palettes_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+var visualization_color_palettes_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
 
 // esm-externals:@splunk/visualization-encoding/utils/types
 var types_exports = {};
 __export(types_exports, {
   default: () => types_default
 });
-var defaultImport18 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+var defaultImport22 = __toESM(require("@splunk/visualization-encoding/utils/types"));
 __reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
-var types_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+var types_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // src/Map/PureMap/MapUtils.ts
 var MAX_LATITUDE = 90;
@@ -332,23 +307,24 @@ var getTilePreset = ({
   defaultTileConfig = [],
   customTileConfig = []
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const tilePreset = {};
   let defaultTileLight = {};
   let defaultTileDark = {};
-  const tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
+  const tileConfigs = [...defaultTileConfig, ...customTileConfig];
   (0, lodash_exports.forEach)(tileConfigs, (tileConfig) => {
     const key = tileConfig == null ? void 0 : tileConfig.key;
-    const updatedConfig = __spreadProps(__spreadValues({
-      theme: "all"
-    }, tileConfig), {
+    if (!key) {
+      return;
+    }
+    const updatedConfig = __spreadProps(__spreadValues({}, tileConfig), {
       version: MAP_STYLE_VERSION_NUMBER
     });
     tilePreset[key] = updatedConfig;
   });
   if (defaultTileConfig.length > 0) {
-    defaultTileLight = (_a = defaultTileConfig.find((config2) => config2.theme === "light")) != null ? _a : defaultTileConfig.find((config2) => config2.theme === void 0);
-    defaultTileDark = (_b = defaultTileConfig.find((config2) => config2.theme === "dark")) != null ? _b : defaultTileConfig.find((config2) => config2.theme === void 0);
+    defaultTileLight = (_b = (_a = defaultTileConfig.find((config2) => config2.theme === "light")) != null ? _a : defaultTileConfig.find((config2) => config2.theme === void 0)) != null ? _b : {};
+    defaultTileDark = (_d = (_c = defaultTileConfig.find((config2) => config2.theme === "dark")) != null ? _c : defaultTileConfig.find((config2) => config2.theme === void 0)) != null ? _d : {};
   }
   return { tilePreset, defaultTileLight, defaultTileDark };
 };
@@ -363,6 +339,8 @@ var getMapStyle = ({
 }) => {
   if (!showBaseLayer) {
     return {
+      name: "empty-base-layer",
+      key: "empty-base-layer",
       version: MAP_STYLE_VERSION_NUMBER,
       sources: {
         "base-tiles": {
@@ -384,21 +362,23 @@ var getMapStyle = ({
       ]
     };
   }
-  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === "all")) {
+  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (!tilePreset[baseLayerTileServer].theme || tilePreset[baseLayerTileServer].theme === colorScheme)) {
     return tilePreset[baseLayerTileServer];
   }
   if (baseLayerTileServer && baseLayerTileServerType) {
     let tiles = [];
-    if (baseLayerTileServer.match(/^(https?):\/\/{(s|S)}\../)) {
+    if (/^(https?):\/\/{[sS]}\./.exec(baseLayerTileServer)) {
       tiles = [
-        baseLayerTileServer.replace(/{(s|S)}/, "a"),
-        baseLayerTileServer.replace(/{(s|S)}/, "b"),
-        baseLayerTileServer.replace(/{(s|S)}/, "c")
+        baseLayerTileServer.replace(/{[sS]}/, "a"),
+        baseLayerTileServer.replace(/{[sS]}/, "b"),
+        baseLayerTileServer.replace(/{[sS]}/, "c")
       ];
     } else {
       tiles = [baseLayerTileServer];
     }
     const mapStyle = {
+      name: baseLayerTileServer,
+      key: baseLayerTileServer,
       version: MAP_STYLE_VERSION_NUMBER,
       sources: {
         "base-tiles": {
@@ -426,9 +406,11 @@ var getZoomConstraintsFromTileConfig = (tileConfig, baseLayerTileServer) => {
   const { sources, layers } = tileConfig;
   let matchedBaseLayerTileServer = false;
   const sourceKeys = Object.keys(sources);
-  for (let i = 0; i < sourceKeys.length; i += 1) {
-    const { minzoom, maxzoom } = sources[sourceKeys[i]];
-    if (baseLayerTileServer && sources[sourceKeys[i]].tiles.indexOf(baseLayerTileServer) !== -1) {
+  for (const key of sourceKeys) {
+    const source = sources[key];
+    const { minzoom, maxzoom } = source;
+    const tiles = Array.isArray(source == null ? void 0 : source.tiles) ? source.tiles : [];
+    if (baseLayerTileServer && tiles.includes(baseLayerTileServer)) {
       matchedBaseLayerTileServer = true;
     }
     if ((baseLayerTileServer && matchedBaseLayerTileServer || !baseLayerTileServer) && (0, lodash_exports.isNumber)(minzoom) && (0, lodash_exports.isNumber)(maxzoom)) {
@@ -438,8 +420,8 @@ var getZoomConstraintsFromTileConfig = (tileConfig, baseLayerTileServer) => {
       };
     }
   }
-  for (let i = 0; i < layers.length; i += 1) {
-    const { minzoom, maxzoom } = layers[i];
+  for (const layer of layers) {
+    const { minzoom, maxzoom } = layer;
     if ((baseLayerTileServer && matchedBaseLayerTileServer || !baseLayerTileServer) && (0, lodash_exports.isNumber)(minzoom) && (0, lodash_exports.isNumber)(maxzoom)) {
       return {
         minZoom: minzoom,
@@ -452,12 +434,13 @@ var getZoomConstraintsFromTileConfig = (tileConfig, baseLayerTileServer) => {
     maxZoom: 24
   };
 };
+var isBaseTileConfig = (config2) => Boolean(config2 && "name" in config2 && "key" in config2 && "sources" in config2 && "layers" in config2);
 var getZoomLevelFromGeobin = (geobinStr) => {
   var _a;
   if (!geobinStr) {
     return null;
   }
-  const geobinPattern = /bin_id_zl_([0-9]{0,2})?_y_/g;
+  const geobinPattern = /bin_id_zl_(\d{1,2})_y_/g;
   const match = geobinPattern.exec(geobinStr);
   return (_a = (match == null ? void 0 : match.length) && parseInt(match[1], 10)) != null ? _a : null;
 };
@@ -465,7 +448,7 @@ var getStaticColors = (colorCount, colorArray) => {
   if (colorCount < 0 || !colorCount) {
     return [DEFAULT_CLUSTER_COLOR];
   }
-  if (!colorArray || !colorArray.length) {
+  if (!(colorArray == null ? void 0 : colorArray.length)) {
     return [...Array(colorCount).keys()].map((i) => DEFAULT_SERIES_COLORS[i]);
   }
   return [...Array(colorCount).keys()].map(
@@ -485,7 +468,8 @@ var matchBubbleSize = (dataRange, data) => {
   return size2;
 };
 var transposeArray = (array2) => {
-  if (!array2 || !array2.length || !array2[0] || !array2[0].length) {
+  var _a;
+  if (!(array2 == null ? void 0 : array2.length) || !((_a = array2[0]) == null ? void 0 : _a.length)) {
     return [];
   }
   return array2[0].map((_7, i) => array2.map((row) => row[i]));
@@ -507,8 +491,8 @@ var sortByValuesField = (bubbleLayer) => {
   bubbleLayer.bubbleSize.unshift(bubbleLayer.bubbleSize.splice(index, 1)[0]);
 };
 var bakeBubbleData = (layer) => {
-  var _a;
-  if (!layer || !((_a = layer.bubbleSize) == null ? void 0 : _a.length) || !layer.geobin || !layer.geobin.length || !layer.latitude || !layer.latitude.length || !layer.longitude || !layer.longitude.length) {
+  var _a, _b, _c, _d;
+  if (!((_a = layer == null ? void 0 : layer.bubbleSize) == null ? void 0 : _a.length) || !((_b = layer == null ? void 0 : layer.geobin) == null ? void 0 : _b.length) || !((_c = layer == null ? void 0 : layer.latitude) == null ? void 0 : _c.length) || !((_d = layer == null ? void 0 : layer.longitude) == null ? void 0 : _d.length)) {
     return null;
   }
   const sanitizedBubbleSize = sanitizeValues(layer.bubbleSize);
@@ -528,7 +512,7 @@ var bakeBubbleData = (layer) => {
     transposedBubbleSize = layer.bubbleSize.map((n) => [n]);
     transposedSanitizedBubbleSize = sanitizedBubbleSize.map((n) => [n]);
   }
-  if (!transposedBubbleSize || !transposedBubbleSize.length) {
+  if (!(transposedBubbleSize == null ? void 0 : transposedBubbleSize.length)) {
     return null;
   }
   const data = layer.latitude.map((lat, i) => ({
@@ -566,17 +550,33 @@ var isValidLatLon = (latlon) => {
   }
   return true;
 };
+var getChoroplethValues = (field, choroplethLayer) => {
+  var _a;
+  if (!Array.isArray(choroplethLayer.geom) || choroplethLayer.geom.length === 0) {
+    return [];
+  }
+  const limit = (_a = choroplethLayer.resultLimit) != null ? _a : DEFAULT_RESULT_LIMIT;
+  const slicedGeomList = choroplethLayer.geom.slice(0, limit);
+  const flatCoordinates = slicedGeomList.flatMap((geomObject) => {
+    if (!geomObject) {
+      return [];
+    }
+    if (geomObject.type === "MultiPolygon") {
+      return geomObject.coordinates.flat(2);
+    }
+    if (geomObject.type === "Polygon") {
+      return geomObject.coordinates.flat();
+    }
+    return [];
+  });
+  return flatCoordinates.map((coord) => coord[field === LONGITUDE ? 0 : 1]);
+};
 var getLatOrLonCoordinates = (layer, field) => {
   const getClusterValues = (clusterLayer) => (0, lodash_exports.get)(clusterLayer, field, []).slice(
     0,
     clusterLayer.type === visualization_schemas_exports.LAYER_TYPE.Marker && clusterLayer.resultLimit ? clusterLayer.resultLimit : DEFAULT_RESULT_LIMIT
   );
-  const getChoroplethValues = (choroplethLayer) => {
-    const slicedGeomList = choroplethLayer.geom.slice(0, choroplethLayer.resultLimit);
-    const flatCoordinates = slicedGeomList.flatMap((geomObject) => geomObject.coordinates.flat(2));
-    return flatCoordinates.map((coord) => coord[field === LONGITUDE ? 0 : 1]);
-  };
-  return layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
+  return layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth ? getChoroplethValues(field, layer) : getClusterValues(layer);
 };
 var getGlobalLayerBoundaries = (layers) => {
   const isLayerValid = (field) => layers.every((layer) => layer[field] || layer.geom);
@@ -608,6 +608,15 @@ var getGlobalLayerBoundaries = (layers) => {
     [getMax(LONGITUDE), getMax(LATITUDE)]
   ];
 };
+var formatTooltipFieldValue = (value) => {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return JSON.stringify(value);
+};
 var getScaledOpacities = (colors, cfgOpacity) => {
   const opacities = colors == null ? void 0 : colors.map((color) => {
     var _a;
@@ -627,7 +636,7 @@ var compareBaseStyles = (curr, next) => {
   return (0, lodash_exports.isEqual)(currBaseLayer, nextBaseLayer) && (0, lodash_exports.isEqual)(currBaseSource, nextBaseSource);
 };
 var formatMetadata = (choroplethLayer, i) => {
-  if (!choroplethLayer || !choroplethLayer.areaIds || !choroplethLayer.areaValues) return {};
+  if (!(choroplethLayer == null ? void 0 : choroplethLayer.areaIds) || !(choroplethLayer == null ? void 0 : choroplethLayer.areaValues)) return {};
   if (i >= choroplethLayer.areaIds.length) return {};
   const metadata = choroplethLayer.metadata ? choroplethLayer.metadata[i] : {};
   const name = choroplethLayer.areaIds[i];
@@ -640,42 +649,6 @@ var formatMetadata = (choroplethLayer, i) => {
   }, base);
 };
 
-// esm-externals:@splunk/visualizations-shared/iconUtils
-var iconUtils_exports = {};
-__export(iconUtils_exports, {
-  default: () => iconUtils_default
-});
-var defaultImport19 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
-__reExport(iconUtils_exports, require("@splunk/visualizations-shared/iconUtils"));
-var iconUtils_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
-
-// esm-externals:@splunk/visualizations-shared/RemoteIcon
-var RemoteIcon_exports = {};
-__export(RemoteIcon_exports, {
-  default: () => RemoteIcon_default
-});
-var defaultImport20 = __toESM(require("@splunk/visualizations-shared/RemoteIcon"));
-__reExport(RemoteIcon_exports, require("@splunk/visualizations-shared/RemoteIcon"));
-var RemoteIcon_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
-
-// esm-externals:@splunk/visualization-context/FeatureFlagContext
-var FeatureFlagContext_exports = {};
-__export(FeatureFlagContext_exports, {
-  default: () => FeatureFlagContext_default
-});
-var defaultImport21 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
-__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
-
-// esm-externals:@splunk/ui-utils/id
-var id_exports = {};
-__export(id_exports, {
-  default: () => id_default
-});
-var defaultImport22 = __toESM(require("@splunk/ui-utils/id"));
-__reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
-
 // esm-externals:@splunk/react-ui/Popover
 var Popover_exports = {};
 __export(Popover_exports, {
@@ -696,19 +669,24 @@ var themes_default = "default" in defaultImport24 ? defaultImport24.default : de
 
 // src/Map/PureMap/Tooltip.tsx
 var StyledPopover = styled_components_default(Popover_default)`
-    width: 250px;
+    min-width: 250px;
+    max-width: 332px;
+    max-width: fit-content;
     font-size: 12px;
 `;
 var StyledTable = styled_components_default.table`
     margin: 2px 6px 2px 6px;
-    table-layout: fixed;
     width: calc(100% - 12px);
 `;
 var StyledTitleColumn = styled_components_default.td`
     opacity: 0.85;
+    word-break: break-all;
+    vertical-align: top;
 `;
 var StyledValueColumn = styled_components_default.td`
     text-align: right;
+    word-break: break-all;
+    vertical-align: top;
 `;
 var StyledColorBlock = styled_components_default.div`
     background-color: ${(props) => props.color};
@@ -719,10 +697,6 @@ var StyledColorBlock = styled_components_default.div`
     height: 11px;
     transform: translateY(1px);
 `;
-var StyledFieldLabel = styled_components_default.span`
-    display: inline-block;
-    white-space: nowrap;
-`;
 var StyledIconWrapper = styled_components_default.span`
     margin-left: 4px;
     display: inline-block;
@@ -789,7 +763,7 @@ var Tooltip = ({
       "data-test": "map-marker-tooltip",
       defaultPlacement: "above"
     },
-    /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, areaId && areaValue && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }) => /* @__PURE__ */ react_exports.createElement("tr", { key: (0, id_exports.createDOMID)() }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement(StyledFieldLabel, null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
+    /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, Boolean(areaId && areaValue) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }) => /* @__PURE__ */ react_exports.createElement("tr", { key: (0, id_exports.createDOMID)() }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement("span", null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
   );
 };
 var Tooltip_default = Tooltip;
@@ -905,8 +879,9 @@ var PieSegment = react_exports.memo(
     );
     if (end - start === 1) {
       return /* @__PURE__ */ react_exports.createElement(
-        "circle",
+        BubbleSegment,
         {
+          as: "circle",
           onClick: handleSegmentClick,
           cx: radius,
           cy: radius,
@@ -926,8 +901,9 @@ var PieSegment = react_exports.memo(
     const y1 = Math.sin(a1);
     const arc = end - start > 0.5 ? 1 : 0;
     return /* @__PURE__ */ react_exports.createElement(
-      "path",
+      BubbleSegment,
       {
+        as: "path",
         onClick: handleSegmentClick,
         d: `M ${radius} ${radius} L ${radius + radius * x0} ${radius + radius * y0} A ${radius} ${radius} 0 ${arc} 1 ${radius + radius * x1} ${radius + radius * y1} L ${radius} ${radius} A 0 0 0 ${arc} 0 ${radius} ${radius}`,
         fill: color,
@@ -940,6 +916,14 @@ var PieSegment = react_exports.memo(
   }
 );
 PieSegment.displayName = "MapBubblePieSegment";
+var BubbleSegment = styled_components_default.path`
+    transition: 0.2s ease-in-out;
+    transition-property: fill, stroke;
+`;
+var BUBBLE_SEGMENT_DIMMED_STYLES = {
+  fill: "rgba(150, 150, 150, 0.3)",
+  stroke: "rgba(200, 200, 200, 0.4)"
+};
 var StyledMarkerWrapper = styled_components_default(MarkerWrapper_default)`
     cursor: pointer;
 `;
@@ -1138,6 +1122,92 @@ var BubbleLayer = (props) => {
 };
 var BubbleLayer_default = BubbleLayer;
 
+// src/Map/PureMap/PureMapContainer.tsx
+var PureMapContainer = styled_components_default.div.attrs({
+  "data-test": "puremap-container"
+})`
+    ${maplibre_gl_default2}
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+    background-color: ${(props) => props.backgroundColor};
+    ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
+
+    // keep zoom control on top of cooperative gesture layer
+    .maplibregl-cooperative-gesture-screen {
+        z-index: 0;
+    }
+
+    // overwrite maplibregl zoom control styles
+    .maplibregl-ctrl-top-left {
+        display: ${(props) => props.showZoomControls ? "block" : "none"};
+        position: absolute;
+        top: 12px;
+        left: 16px;
+        .maplibregl-ctrl-group {
+            width: 40px !important;
+            height: 87px !important;
+            border-radius: 4px;
+            margin: 8px 0px;
+            background-color: ${(props) => props.controlBackgroundColor};
+            box-shadow:
+                0px 26px 103px rgba(0, 0, 0, 0.64),
+                0px 11px 18px rgba(0, 0, 0, 0.32),
+                0px 3px 6px rgba(0, 0, 0, 0.3);
+            & button {
+                width: 40px;
+                height: 43px;
+                border-top: 0;
+            }
+            .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
+                background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1V7H1C0.447715 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H7V15C7 15.5523 7.44772 16 8 16C8.55229 16 9 15.5523 9 15V9H15C15.5523 9 16 8.55229 16 8C16 7.44772 15.5523 7 15 7H9V1Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
+            }
+
+            .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
+                background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="3" viewBox="0 0 14 3" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.99707C0 1.44479 0.447715 0.99707 1 0.99707H13C13.5523 0.99707 14 1.44479 14 1.99707C14 2.54936 13.5523 2.99707 13 2.99707H1C0.447715 2.99707 0 2.54936 0 1.99707Z" fill="${(props) => props.controlIconColorEncoded.color}" fill-opacity="${(props) => props.controlIconColorEncoded.opacity}" /></svg>');
+            }
+        }
+    }
+
+    // overwrite maplibregl scale styles
+    .maplibregl-ctrl-bottom-left {
+        display: ${(props) => props.showScale ? "block" : "none"};
+        position: absolute;
+        z-index: 0;
+        bottom: 16px;
+        left: 12px;
+        width: 86px;
+        height: 29px;
+        border-radius: 4px;
+        margin: 0;
+        background-color: ${(props) => props.controlBackgroundColor};
+        box-shadow:
+            0px 26px 103px rgba(0, 0, 0, 0.13),
+            0px 11px 18px rgba(0, 0, 0, 0.06),
+            0px 3px 6px rgba(0, 0, 0, 0.06);
+        .maplibregl-ctrl-scale {
+            background-color: ${(props) => props.controlBackgroundColor};
+            color: ${(props) => props.controlForegroundColor};
+            border: 2px solid ${(props) => props.controlForegroundColor};
+            border-top: 0;
+            border-left: 0;
+            border-right: 0;
+            padding: 0;
+            margin: 6px 8px 8px 8px;
+            line-height: 13px;
+            letter-spacing: 0.02em;
+            font-family: sans-serif;
+            font-size: 10px;
+        }
+    }
+
+    :has(${BubbleSegment}:hover) ${BubbleSegment}:not(:hover) {
+        fill: ${BUBBLE_SEGMENT_DIMMED_STYLES.fill};
+        stroke: ${BUBBLE_SEGMENT_DIMMED_STYLES.stroke};
+    }
+`;
+var PureMapContainer_default = PureMapContainer;
+
 // src/Map/PureMap/MarkerLayer.tsx
 var MarkerIcon = (_a) => {
   var _b = _a, { theme, color } = _b, otherProps = __objRest(_b, ["theme", "color"]);
@@ -1452,18 +1522,21 @@ var ChoroplethLayer = (props) => {
   );
   const areaIdSliced = (_h = (_g = choroplethLayer == null ? void 0 : choroplethLayer.areaIds) == null ? void 0 : _g.slice(0, limit)) != null ? _h : [];
   const uniqueAreaIdSliced = (0, lodash_exports.uniq)(areaIdSliced).length !== areaIdSliced.length ? areaIdSliced.map((id, i) => `${id}${i}`) : areaIdSliced;
-  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(
-    (choroplethMetadata) => choroplethLayer.additionalTooltipFields.map((field) => ({
-      name: field,
-      value: choroplethMetadata[field]
-    }))
-  ) : [];
+  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map((choroplethMetadata) => {
+    if (choroplethLayer.additionalTooltipFields) {
+      return choroplethLayer.additionalTooltipFields.map((field) => ({
+        name: field,
+        value: formatTooltipFieldValue(choroplethMetadata[field])
+      }));
+    }
+    return [];
+  }) : [];
   const tooltipHeaderField = (choroplethLayer == null ? void 0 : choroplethLayer.tooltipHeaderField) || null;
   const handleMapClick = (e, i) => {
     const payload = formatMetadata(choroplethLayer, i);
     onMapClick({ e, payload });
   };
-  if (!map || !choroplethLayer || !choroplethLayer.geom) {
+  if (!map || !(choroplethLayer == null ? void 0 : choroplethLayer.geom)) {
     return null;
   }
   if (isThemeChanged) {
@@ -1526,74 +1599,99 @@ var LocalChoroplethLayer = (props) => {
   var _a, _b;
   const { width, height, map, choroplethLayer, isThemeChanged, setIsThemeChanged, onMapClick } = props;
   const cfgOpacity = Math.min(Math.max(choroplethLayer == null ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
-  const [geoJson, setGeoJson] = react_exports.useState({
-    features: [{ properties: { name: "" }, geometry: [] }]
-  });
+  const emptyFeature = {
+    type: "Feature",
+    properties: { name: "" },
+    geometry: null
+  };
+  const [geoJson, setGeoJson] = react_exports.useState(
+    {
+      type: "FeatureCollection",
+      features: [emptyFeature]
+    }
+  );
   const [validGeoJson, setValidGeoJson] = react_exports.useState(true);
   const [geoJsonError, setGeoJsonError] = react_exports.useState({
     message: ""
   });
   react_exports.useEffect(() => {
-    let geoJsonData;
+    let isMounted = true;
     const geoRegistry = GeoRegistry_default.create();
     geoRegistry.addDefaultProvider(new GeoJsonProvider_default());
-    try {
-      geoJsonData = geoRegistry.getByURL(choroplethLayer.source);
-      setGeoJson(geoJsonData);
-      setValidGeoJson(true);
-    } catch (e) {
-      setGeoJsonError(e);
-      setValidGeoJson(false);
-    }
+    const loadGeoJson = () => __async(void 0, null, function* () {
+      try {
+        const geoJsonData = yield geoRegistry.getByURL(choroplethLayer.source);
+        if (!isMounted) {
+          return;
+        }
+        setGeoJson(geoJsonData);
+        setValidGeoJson(true);
+      } catch (e) {
+        if (!isMounted) {
+          return;
+        }
+        setGeoJsonError(e);
+        setValidGeoJson(false);
+      }
+    });
+    loadGeoJson();
+    return () => {
+      isMounted = false;
+    };
   }, [choroplethLayer.source]);
   const updatedPropertyFormat = react_exports.useMemo(() => {
     let propertyFormat = "name";
     if (choroplethLayer.areaIds && validGeoJson) {
       const propertyFormats = Object.keys(geoJson.features[0].properties);
-      for (let idx = 0; idx < geoJson.features.length; idx += 1) {
-        const shapeProperty = geoJson.features[idx].properties;
-        const formatCheck = propertyFormats.find(
-          (key) => shapeProperty[key] === choroplethLayer.areaIds[0]
-        );
-        if (formatCheck !== void 0) {
-          propertyFormat = formatCheck;
-          break;
-        }
+      const formatCheck = geoJson.features.flatMap(
+        (element) => propertyFormats.filter((key) => element.properties[key] === choroplethLayer.areaIds[0])
+      )[0];
+      if (formatCheck !== void 0) {
+        propertyFormat = formatCheck;
       }
     }
     return propertyFormat;
   }, [choroplethLayer.areaIds, geoJson]);
   const colors = (_a = choroplethLayer == null ? void 0 : choroplethLayer.dataColors) == null ? void 0 : _a.map((color) => (color == null ? void 0 : color.length) > 7 ? color.slice(0, 7) : color);
   const scaledOpacities = (_b = getScaledOpacities(choroplethLayer == null ? void 0 : choroplethLayer.dataColors, cfgOpacity)) != null ? _b : [];
-  const updatedAllChoroplethData = react_exports.useMemo(() => {
-    const allChoroplethData = [];
-    if (validGeoJson) {
-      for (let idx = 0; idx < geoJson.features.length; idx += 1) {
-        const el = geoJson.features[idx];
-        const choroplethData = {
-          color: choroplethLayer.choroplethEmptyAreaColor,
-          areaValue: "No Data",
-          opacity: cfgOpacity,
-          name: "",
-          idx: 0
-        };
-        choroplethData.name = el.properties[updatedPropertyFormat];
-        if (choroplethLayer.areaIds) {
-          const dataIdx = choroplethLayer.areaIds.indexOf(el.properties[updatedPropertyFormat]);
-          if (dataIdx !== -1) {
-            choroplethData.color = colors[dataIdx];
-            choroplethData.areaValue = choroplethLayer.areaValues[dataIdx];
-            choroplethData.opacity = scaledOpacities[dataIdx];
-            choroplethData.idx = dataIdx;
-          } else {
-            choroplethData.idx = choroplethLayer.areaIds.length;
-          }
-        }
-        allChoroplethData.push(choroplethData);
+  const buildChoroplethData = (el) => {
+    const choroplethData = {
+      color: choroplethLayer.choroplethEmptyAreaColor,
+      areaValue: "No Data",
+      opacity: cfgOpacity,
+      name: "",
+      idx: 0
+    };
+    const rawName = el.properties[updatedPropertyFormat];
+    choroplethData.name = typeof rawName === "string" || typeof rawName === "number" ? String(rawName) : "";
+    if (choroplethLayer.areaIds) {
+      const lookupValue = choroplethData.name;
+      const dataIdx = choroplethLayer.areaIds.indexOf(lookupValue);
+      if (dataIdx !== -1) {
+        choroplethData.color = colors[dataIdx];
+        choroplethData.areaValue = choroplethLayer.areaValues[dataIdx];
+        choroplethData.opacity = scaledOpacities[dataIdx];
+        choroplethData.idx = dataIdx;
+      } else {
+        choroplethData.idx = choroplethLayer.areaIds.length;
       }
     }
-    return allChoroplethData;
-  }, [choroplethLayer.areaIds, choroplethLayer.areaValues, colors, scaledOpacities]);
+    return choroplethData;
+  };
+  const updatedAllChoroplethData = react_exports.useMemo(() => {
+    if (!validGeoJson) return [];
+    return geoJson.features.map((el) => buildChoroplethData(el));
+  }, [
+    choroplethLayer.areaIds,
+    choroplethLayer.areaValues,
+    choroplethLayer.choroplethEmptyAreaColor,
+    colors,
+    scaledOpacities,
+    cfgOpacity,
+    validGeoJson,
+    geoJson.features,
+    updatedPropertyFormat
+  ]);
   const handleMapClick = (e, i) => {
     const payload = formatMetadata(choroplethLayer, i);
     onMapClick({ e, payload });
@@ -1601,15 +1699,14 @@ var LocalChoroplethLayer = (props) => {
   if (isThemeChanged) {
     setIsThemeChanged(false);
   }
-  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(
-    (choroplethMetadata) => {
-      var _a2;
-      return (_a2 = choroplethLayer.additionalTooltipFields) == null ? void 0 : _a2.map((field) => ({
-        name: field,
-        value: choroplethMetadata[field]
-      }));
-    }
-  ) : [];
+  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map((choroplethMetadata) => {
+    var _a2;
+    const tooltipFields = (_a2 = choroplethLayer.additionalTooltipFields) != null ? _a2 : [];
+    return tooltipFields.map((field) => ({
+      name: field,
+      value: formatTooltipFieldValue(choroplethMetadata[field])
+    }));
+  }) : [];
   return /* @__PURE__ */ react_exports.createElement("div", null, !validGeoJson && /* @__PURE__ */ react_exports.createElement(
     Message_default,
     {
@@ -1620,6 +1717,9 @@ var LocalChoroplethLayer = (props) => {
       message: geoJsonError.message
     }
   ), validGeoJson && updatedAllChoroplethData.map((el, i) => {
+    var _a2, _b2;
+    const geometry = (_a2 = geoJson.features[i]) == null ? void 0 : _a2.geometry;
+    const geomData = geometry && (geometry.type === "MultiPolygon" || geometry.type === "Polygon") ? geometry : null;
     return /* @__PURE__ */ react_exports.createElement(
       Choropleth,
       {
@@ -1630,12 +1730,12 @@ var LocalChoroplethLayer = (props) => {
         opacity: el.opacity,
         strokeColor: choroplethLayer.choroplethStrokeColor,
         areaId: el.name,
-        areaValue: el.areaValue,
+        areaValue: typeof el.areaValue === "number" ? el.areaValue : Number(el.areaValue),
         handleMapClick: (e) => handleMapClick(e, el.idx),
         isThemeChanged,
-        geomData: geoJson.features[i].geometry,
+        geomData,
         additionalFields: additionalFields[el.idx],
-        tooltipHeader: choroplethLayer.tooltipHeaderField && choroplethLayer.tooltipHeaderField[el.idx]
+        tooltipHeader: (_b2 = choroplethLayer.tooltipHeaderField) == null ? void 0 : _b2[el.idx]
       }
     );
   }));
@@ -1708,6 +1808,7 @@ var PureMap = (props) => {
   const scaleControl = (0, react_exports.useRef)(null);
   const zoomControl = (0, react_exports.useRef)(null);
   const fitToDataButtonClickedRef = (0, react_exports.useRef)(false);
+  const isUserInteractingRef = (0, react_exports.useRef)(false);
   const { tilePreset, defaultTileLight, defaultTileDark } = (0, react_exports.useMemo)(
     () => getTilePreset({ defaultTileConfig, customTileConfig }),
     [defaultTileConfig, customTileConfig]
@@ -1791,7 +1892,7 @@ var PureMap = (props) => {
       map.current.on("load", () => {
         if ((layers == null ? void 0 : layers.length) > 0 && center === void 0 && zoom === void 0) {
           setMapMinZoom(map.current.getZoom());
-          map.current.on("zoomend", () => {
+          map.current.once("zoomend", () => {
             addZoomEndEventListener();
           });
           fitMapToContent();
@@ -1816,6 +1917,26 @@ var PureMap = (props) => {
           zoom: map.current.getZoom()
         });
       });
+      map.current.on("dragstart", () => {
+        isUserInteractingRef.current = true;
+      });
+      map.current.on("dragend", () => {
+        setTimeout(() => {
+          if (isUserInteractingRef) {
+            isUserInteractingRef.current = false;
+          }
+        }, 100);
+      });
+      map.current.on("zoomstart", () => {
+        isUserInteractingRef.current = true;
+      });
+      map.current.on("zoomend", () => {
+        setTimeout(() => {
+          if (isUserInteractingRef) {
+            isUserInteractingRef.current = false;
+          }
+        }, 100);
+      });
       map.current.on("resize", () => {
         const mapZoomLevel = map.current.getZoom();
         if (currentZoomLevelRef.current <= mapMinZoomRef.current && mapZoomLevel !== mapMinZoomRef.current) {
@@ -1875,6 +1996,9 @@ var PureMap = (props) => {
       defaultTileLight,
       defaultTileDark
     });
+    if (!isBaseTileConfig(mapStyle)) {
+      return;
+    }
     mapStyle.version = MAP_STYLE_VERSION_NUMBER;
     if (map.current) {
       const curr = map.current.getStyle();
@@ -1908,6 +2032,9 @@ var PureMap = (props) => {
       if (fitToDataButtonClickedRef.current) {
         return;
       }
+      if (isUserInteractingRef.current) {
+        return;
+      }
       map.current.flyTo({
         center: lngLatCenter,
         // Make sure we are not flying to a zoom value smaller than the mapMinZoom
@@ -2586,7 +2713,6 @@ var editorConfig = [
           }
         }
       ],
-      // TODO: add support for seriesColorsByField option
       // [
       //     {
       //         label: _('Series colors by field name'),
@@ -2980,7 +3106,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%;
@@ -3052,7 +3178,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
@@ -3154,7 +3280,7 @@ var convertToArrOfObjects = (columns, fields) => {
   for (let i = 0; i < columns[0].length; i += 1) {
     const newObj = {};
     fields.forEach((field, index) => {
-      const fieldName = typeof field === "string" ? field : field.name;
+      const fieldName = getFieldName(field);
       if (columns[index][i] === "") {
         newObj[fieldName] = null;
       } else {
@@ -3165,6 +3291,7 @@ var convertToArrOfObjects = (columns, fields) => {
   }
   return data;
 };
+var getFieldName = (field) => typeof field === "string" ? field : field.name;
 var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
   const dataLength = data.length;
   const downsampledIndices = [];
@@ -3281,9 +3408,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) {
@@ -3623,14 +3750,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;
@@ -3651,16 +3793,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({
@@ -3672,7 +3829,7 @@ var getLegend = (props) => {
       }, commonLegendProps));
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: SideLegendWidth
+        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
       }, commonLegendProps));
   }
 };
@@ -3708,19 +3865,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;
@@ -3733,23 +3896,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;
@@ -3781,12 +3963,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`
@@ -3797,45 +4057,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,
@@ -3845,10 +4250,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) => {
@@ -3859,25 +4317,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],
@@ -3885,24 +4382,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,
@@ -3910,49 +4523,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,
@@ -3961,6 +4638,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder: useIconPlaceholder2
   } = opts;
@@ -4089,11 +4767,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;
@@ -4181,7 +4867,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -4205,10 +4891,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), {
@@ -4304,10 +4987,10 @@ var formatLayer = (l, dataFields, dataSourceData, transformedData) => {
       return typeof geomItem === "string" ? JSON.parse(geomItem) : geomItem;
     });
   }
-  if (Object.prototype.hasOwnProperty.call(layer, "seriesColors")) {
+  if (Object.hasOwn(layer, "seriesColors")) {
     layer.seriesColors = Array.isArray(layer.seriesColors) ? (0, colorUtils_exports.sanitizeArrayOfColors)(layer.seriesColors) : void 0;
   }
-  if (Object.prototype.hasOwnProperty.call(layer, "dataColors")) {
+  if (Object.hasOwn(layer, "dataColors")) {
     layer.dataColors = Array.isArray(layer.dataColors) ? (0, colorUtils_exports.sanitizeArrayOfColors)(layer.dataColors) : void 0;
   }
   layer.metadata = transformedData;
@@ -4422,7 +5105,7 @@ var withNullToZeros = (Viz) => {
 function useIconPlaceholder(dataSources, loading) {
   return loading;
 }
-var Map2 = withoutInternalFields(
+var MapVisualization = withoutInternalFields(
   withTooltipFields(
     withNullToZeros(
       withDashboardViz_default({
@@ -4436,5 +5119,5 @@ var Map2 = withoutInternalFields(
   )
 );
 var { themes: themes2 } = config_default;
-var Map_default = Map2;
+var Map_default = MapVisualization;
 //# sourceMappingURL=Map.js.map