@splunk/visualizations 25.10.0 → 25.12.0

package/Map.js

@@ -113,13 +113,6 @@ module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 105:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-encoding/utils/dsl");
-
-/***/ }),
-
 /***/ 11:
 /***/ (function(module, exports) {
 
@@ -127,14 +120,7 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorUtils");
-
-/***/ }),
-
-/***/ 120:
+/***/ 119:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -169,93 +155,14 @@ exports.convertToArrOfObjects = convertToArrOfObjects;
 
 /***/ }),
 
-/***/ 13:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
+/***/ 12:
+/***/ (function(module, exports) {
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var React = __webpack_require__(0);
-var styled_components_1 = __webpack_require__(4);
-var SizeAwareWrapper_1 = __webpack_require__(18);
-var style_1 = __webpack_require__(14);
-var colorUtils_1 = __webpack_require__(12);
-var Item = styled_components_1.default.div.attrs(function (_ref) {
-  var width = _ref.width;
-  return {
-    style: {
-      width: style_1.toPx(width)
-    }
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__Item",
-  componentId: "sc-1yhgpod-0"
-})(["position:relative;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-// Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
-  var width = _ref2.width,
-    height = _ref2.height;
-  return {
-    style: Object.assign(Object.assign({}, width && {
-      width: style_1.toPx(width)
-    }), height && {
-      height: style_1.toPx(height)
-    })
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__FixSizeItem",
-  componentId: "sc-1yhgpod-1"
-})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-var ItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__ItemContent",
-  componentId: "sc-1yhgpod-2"
-})(["position:relative;min-height:100px;width:100%;"]);
-var FixSizeItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__FixSizeItemContent",
-  componentId: "sc-1yhgpod-3"
-})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
-var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
-  var FixedSizeContainer = function FixedSizeContainer(props) {
-    var width = props.width,
-      height = props.height,
-      backgroundColor = props.backgroundColor;
-    if (!height) {
-      return React.createElement(Item, {
-        "data-test": "item",
-        width: width,
-        backgroundColor: backgroundColor
-      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
-    }
-    return React.createElement(FixSizeItem, {
-      "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.10.0 - 8d01deb08",
-      width: width,
-      height: height,
-      backgroundColor: backgroundColor
-    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
-      var newWidth = _ref3.width,
-        newHeight = _ref3.height;
-      return React.createElement(Viz, Object.assign({}, props, {
-        width: newWidth,
-        height: newHeight
-      }));
-    })));
-  };
-  FixedSizeContainer.displayName = 'withFixedSizeContainer';
-  return FixedSizeContainer;
-};
-exports.default = withFixedSizeContainer;
+module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
-/***/ 130:
+/***/ 129:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -273,7 +180,7 @@ var styled_components_1 = __webpack_require__(4);
 var lodash_1 = __webpack_require__(3);
 var colorUtils_1 = __webpack_require__(12);
 var MapUtils_1 = __webpack_require__(85);
-var MarkerWrapper_1 = __webpack_require__(131);
+var MarkerWrapper_1 = __webpack_require__(130);
 exports.GEO_BOUND_PREFIX = '_geo_bounds_';
 exports.GEO_LAT_AND_LONG_FIELD = ['_geo_long_field', '_geo_lat_field'];
 exports.PieSegment = React.memo(function (_ref) {
@@ -340,7 +247,7 @@ exports.Bubble = React.memo(function (_ref3) {
   var onBubbleClick = React.useCallback(function (e, name, value) {
     handleMapClick(e, name, value);
     e.stopPropagation();
-  }, [bubbleSize]);
+  }, [handleMapClick]);
   var bubble = React.useMemo(function () {
     var allZeros = originalValues.every(function (v) {
       return v === 0;
@@ -385,7 +292,7 @@ exports.Bubble = React.memo(function (_ref3) {
         handleBubbleClick: onBubbleClick
       });
     }));
-  }, [colors, isPie, originalValues, themeColor, valueRange]);
+  }, [bubbleSize, colors, isPie, onBubbleClick, originalValues, themeColor, valueRange]);
   if (!bubble) {
     return null;
   }
@@ -455,7 +362,7 @@ var BubbleLayer = function BubbleLayer(props) {
       e: e,
       payload: payload
     });
-  }, [dataToRender]);
+  }, [dataToRender, onMapClick]);
   return React.createElement(React.Fragment, null, dataToRender.map(function (datum, i) {
     var colors = dynamicColors ? [dataToRender.map(function (obj) {
       return colorUtils_1.isColor(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : MapUtils_1.DEFAULT_CLUSTER_COLOR;
@@ -498,7 +405,93 @@ exports.default = BubbleLayer;
 
 /***/ }),
 
-/***/ 131:
+/***/ 13:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var React = __webpack_require__(0);
+var styled_components_1 = __webpack_require__(4);
+var SizeAwareWrapper_1 = __webpack_require__(18);
+var style_1 = __webpack_require__(14);
+var colorUtils_1 = __webpack_require__(12);
+var Item = styled_components_1.default.div.attrs(function (_ref) {
+  var width = _ref.width;
+  return {
+    style: {
+      width: style_1.toPx(width)
+    }
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__Item",
+  componentId: "sc-1yhgpod-0"
+})(["position:relative;background-color:", "};"], function (props) {
+  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+});
+// Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
+  var width = _ref2.width,
+    height = _ref2.height;
+  return {
+    style: Object.assign(Object.assign({}, width && {
+      width: style_1.toPx(width)
+    }), height && {
+      height: style_1.toPx(height)
+    })
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__FixSizeItem",
+  componentId: "sc-1yhgpod-1"
+})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
+  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+});
+var ItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__ItemContent",
+  componentId: "sc-1yhgpod-2"
+})(["position:relative;min-height:100px;width:100%;"]);
+var FixSizeItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__FixSizeItemContent",
+  componentId: "sc-1yhgpod-3"
+})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
+var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
+  var FixedSizeContainer = function FixedSizeContainer(props) {
+    var width = props.width,
+      height = props.height,
+      backgroundColor = props.backgroundColor;
+    if (!height) {
+      return React.createElement(Item, {
+        "data-test": "item",
+        width: width,
+        backgroundColor: backgroundColor
+      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
+    }
+    return React.createElement(FixSizeItem, {
+      "data-test": "fix-size-item",
+      "data-splunk-visualization-version": "25.12.0 - d7a0fecdf",
+      width: width,
+      height: height,
+      backgroundColor: backgroundColor
+    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
+      var newWidth = _ref3.width,
+        newHeight = _ref3.height;
+      return React.createElement(Viz, Object.assign({}, props, {
+        width: newWidth,
+        height: newHeight
+      }));
+    })));
+  };
+  FixedSizeContainer.displayName = 'withFixedSizeContainer';
+  return FixedSizeContainer;
+};
+exports.default = withFixedSizeContainer;
+
+/***/ }),
+
+/***/ 130:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -600,6 +593,13 @@ exports.default = MarkerWrapper;
 
 /***/ }),
 
+/***/ 131:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/utils/dsl");
+
+/***/ }),
+
 /***/ 14:
 /***/ (function(module, exports) {
 
@@ -666,7 +666,7 @@ exports.Choropleth = exports.cleanupChoropleth = exports.compareChoropleth = exp
 var React = __webpack_require__(0);
 var lodash_1 = __webpack_require__(3);
 var MapUtils_1 = __webpack_require__(85);
-var MarkerWrapper_1 = __webpack_require__(131);
+var MarkerWrapper_1 = __webpack_require__(130);
 var getShapeId = function getShapeId(id) {
   return "shape-".concat(id);
 };
@@ -1738,7 +1738,6 @@ exports.PureMap = exports.config = exports.themes = exports.useIconPlaceholder =
 /* eslint-disable no-sequences */
 var React = __webpack_require__(0);
 var colorUtils_1 = __webpack_require__(12);
-var dsl_1 = __webpack_require__(105);
 var hocUtils_1 = __webpack_require__(26);
 var JSONSchemaUtils_1 = __webpack_require__(27);
 var PureMap_1 = __webpack_require__(405);
@@ -1747,8 +1746,8 @@ var config_1 = __webpack_require__(415);
 exports.config = config_1.default;
 var withDashboardViz_1 = __webpack_require__(36);
 var mapUtils_1 = __webpack_require__(416);
-var BubbleLayer_1 = __webpack_require__(130);
-var dataUtils_1 = __webpack_require__(120);
+var BubbleLayer_1 = __webpack_require__(129);
+var dataUtils_1 = __webpack_require__(119);
 var formatLayer = function formatLayer(l, dataFields, dataSourceData, transformedData) {
   // add key `geobin` to the layer object if the data is returned from geostats commands
   // to distinguish geostats commands from table commands
@@ -1807,7 +1806,7 @@ var computeVizProps = function computeVizProps(props) {
 exports.computeVizProps = computeVizProps;
 var withTooltipFields = function withTooltipFields(Viz) {
   var VizWithTooltipFields = function VizWithTooltipFields(_a) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var dataSources = _a.dataSources,
       options = _a.options,
       otherProps = __rest(_a, ["dataSources", "options"]);
@@ -1819,7 +1818,9 @@ var withTooltipFields = function withTooltipFields(Viz) {
     var mergedOptions = hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, JSONSchemaUtils_1.pickFieldFromJSONSchema(config_1.default.optionsSchema, 'default'));
     if ((_b = mergedOptions.layers) === null || _b === void 0 ? void 0 : _b[0]) {
       if (((_d = (_c = mergedOptions.layers) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.type) === 'bubble') {
-        mergedOptions.layers[0].bubbleSizeFields = dsl_1.getFieldsFromDSL((_e = mergedOptions.layers[0].bubbleSize) !== null && _e !== void 0 ? _e : mergedOptions.layers[0].bubbleSize, dataSources);
+        // make sure bubbleSize and bubbleSizeFields dsl evaluation happen at the last HOC "withDashboardViz".
+        // so value/type augmentation in the HOCs stay consistent
+        mergedOptions.layers[0].bubbleSizeFields = '> bubbleSize | getField()';
       }
       var fields = dataSources.primary.data.fields;
       if (Array.isArray(mergedOptions.layers[0].additionalTooltipFields) && Array.isArray(fields) && fields.length) {
@@ -1948,6 +1949,7 @@ var react_1 = __webpack_require__(0);
 var T = __webpack_require__(1);
 var chroma = __webpack_require__(154);
 var maplibre_gl_1 = __webpack_require__(155);
+var i18n_1 = __webpack_require__(2);
 var MapContext_1 = __webpack_require__(406);
 var PureMapContainer_1 = __webpack_require__(407);
 var MapUtils_1 = __webpack_require__(85);
@@ -2012,7 +2014,12 @@ var PureMap = function PureMap(props) {
   var _React$useState = React.useState(zoom !== null && zoom !== void 0 ? zoom : exports.DEFAULT_ZOOM),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     currentZoomLevel = _React$useState2[0],
-    setCurrentZoomLevel = _React$useState2[1];
+    _setCurrentZoomLevel = _React$useState2[1];
+  var currentZoomLevelRef = react_1.useRef(currentZoomLevel);
+  var setCurrentZoomLevel = function setCurrentZoomLevel(newZoom) {
+    currentZoomLevelRef.current = newZoom;
+    _setCurrentZoomLevel(newZoom);
+  };
   var _React$useState3 = React.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     isMapLoaded = _React$useState4[0],
@@ -2020,7 +2027,21 @@ var PureMap = function PureMap(props) {
   var _React$useState5 = React.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     isThemeChanged = _React$useState6[0],
-    setIsThemeChanged = _React$useState6[1]; // Assign default center when no center is defined
+    setIsThemeChanged = _React$useState6[1]; // We are tracking mapMinZoom, which is the smallest zoom the map is capable of doing
+  // This is because DEFAULT_ZOOM of 0 is sometimes not possible for maps with height > 500.
+  // The map will do a little shake when it tries, and then auto change zoom value to mapMinZoom.
+  // Interestingly, the larger the map height, the larger the mapMinZoom is.
+  // For some reason, map.getMinZoom() is always 0, might be a MapLibre bug.
+  var _React$useState7 = React.useState(-1),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    mapMinZoom = _React$useState8[0],
+    _setMapMinZoom = _React$useState8[1];
+  var mapMinZoomRef = react_1.useRef(mapMinZoom);
+  var setMapMinZoom = function setMapMinZoom(newMinZoom) {
+    mapMinZoomRef.current = newMinZoom;
+    _setMapMinZoom(newMinZoom);
+  };
+  // Assign default center when no center is defined
   var lngLatCenter = react_1.useMemo(function () {
     if (!MapUtils_1.isValidLatLon(center)) {
       return exports.DEFAULT_CENTER;
@@ -2038,30 +2059,27 @@ var PureMap = function PureMap(props) {
   var setIsThemeChangedCallback = function setIsThemeChangedCallback(isMyThemeChanged) {
     setIsThemeChanged(isMyThemeChanged);
   };
-  var onOptionsChangeProxy = function onOptionsChangeProxy(e) {
+  var onOptionsChangeProxy = react_1.useCallback(function (e) {
     if (mode === 'edit') {
       onOptionsChange(e);
     }
-  };
+  }, [onOptionsChange, mode]);
+  var fitMapToContent = react_1.useCallback(function () {
+    var lngLatBounds = MapUtils_1.getGlobalLayerBoundaries([layers[0]]);
+    map.current.fitBounds(lngLatBounds, {
+      padding: MapUtils_1.MAX_BUBBLE_RADIUS + 5,
+      animate: false
+    });
+  }, [layers]);
   var initializeMap = react_1.useCallback(function (mapStyle) {
-    var fitMapToContent = function fitMapToContent() {
-      var lngLatBounds = MapUtils_1.getGlobalLayerBoundaries([layers[0]]);
-      map.current.fitBounds(lngLatBounds, {
-        padding: MapUtils_1.MAX_BUBBLE_RADIUS + 5,
-        animate: false
-      });
-    };
     var addZoomEndEventListener = function addZoomEndEventListener() {
       // register event listener - zoom
       map.current.on('zoomend', function () {
-        setCurrentZoomLevel(map.current.getZoom());
-        // when zooming with mouse/track pad,
-        // zooming centers at the cursor position, need to update center as well
-        var newCenter = map.current.getCenter();
-        onOptionsChangeProxy({
-          center: [newCenter.lat, newCenter.lng],
-          zoom: map.current.getZoom()
-        });
+        var mapZoomLevel = map.current.getZoom();
+        if (mapZoomLevel < mapMinZoomRef.current) {
+          setMapMinZoom(mapZoomLevel);
+        }
+        setCurrentZoomLevel(mapZoomLevel);
       });
     };
     map.current = new maplibre_gl_1.Map(Object.assign({
@@ -2069,12 +2087,18 @@ var PureMap = function PureMap(props) {
       preserveDrawingBuffer: true,
       style: mapStyle,
       center: lngLatCenter,
-      zoom: zoomLevel
+      zoom: zoomLevel,
+      cooperativeGestures: {
+        windowsHelpText: i18n_1._('Use Ctrl + scroll to zoom map'),
+        macHelpText: i18n_1._('Use ⌘ + scroll to zoom map'),
+        mobileHelpText: i18n_1._('Use two fingers to move the map')
+      }
     }, MapUtils_1.getZoomConstraintsFromTileConfig(mapStyle, baseLayerTileServer)));
     // Fired immediately after all necessary resources have been downloaded
     // and the first visually complete rendering of the map has occurred.
     map.current.on('load', function () {
       if ((layers === null || layers === void 0 ? void 0 : layers.length) > 0 && center === undefined && zoom === undefined) {
+        setMapMinZoom(map.current.getZoom());
         map.current.on('zoomend', function () {
           addZoomEndEventListener();
         });
@@ -2086,16 +2110,28 @@ var PureMap = function PureMap(props) {
       // TODO :- Temp timeout added for onMapLoad event to avoid flaky screenshots caused by
       // https://maplibre.org/maplibre-gl-js-docs/api/map/#map#fitbounds. Need alternate approach to handle the same.
       setTimeout(function () {
-        return onMapLoad();
+        if (onMapLoad && typeof onMapLoad.exec === 'function') {
+          onMapLoad.exec();
+        }
       }, 500);
     });
     // register event listener - drag
     map.current.on('dragend', function () {
       var newCenter = map.current.getCenter();
       onOptionsChangeProxy({
-        center: [newCenter.lat, newCenter.lng]
+        center: [newCenter.lat, newCenter.lng],
+        zoom: map.current.getZoom()
       });
     });
+    map.current.on('resize', function () {
+      var mapZoomLevel = map.current.getZoom();
+      // If the map's zoom value is at the min zoom, and the map did a resize
+      // sometimes the map will have a changed min zoom value.
+      // Then we want to update the map's min zoom value.
+      if (currentZoomLevelRef.current <= mapMinZoomRef.current && mapZoomLevel !== mapMinZoomRef.current) {
+        setMapMinZoom(mapZoomLevel);
+      }
+    });
     // add zoom control
     zoomControl.current = new maplibre_gl_1.NavigationControl({
       showCompass: false
@@ -2120,6 +2156,24 @@ var PureMap = function PureMap(props) {
       map.current.resize();
     }
   }, [width, height]);
+  react_1.useEffect(function () {
+    if (map.current) {
+      // We want to skip onOptionsChangeProxy if we have transitioned into the default map state, with undefined zoom and center.
+      // This is because the DEFAULT_ZOOM value, 0, is sometimes not possible for maps with height > 500.
+      // So in those cases the map will auto change its zoom from 0 => mapMinZoom
+      // Since this is not a user event we don't want to broadcast it.
+      if (currentZoomLevel === mapMinZoomRef.current && (zoom === undefined || zoom < mapMinZoomRef.current)) {
+        return;
+      }
+      var newCenter = map.current.getCenter();
+      onOptionsChangeProxy({
+        // when zooming with mouse/track pad,
+        // zooming centers at the cursor position, need to update center as well
+        center: [newCenter.lat, newCenter.lng],
+        zoom: currentZoomLevel
+      });
+    }
+  }, [currentZoomLevel, onOptionsChangeProxy]);
   react_1.useEffect(function () {
     // do not render when defaultTileConfig, customTileConfig and tileset are not configured
     if (Object.keys(tilePreset).length === 0 && (!baseLayerTileServer || !baseLayerTileServerType)) {
@@ -2166,7 +2220,9 @@ var PureMap = function PureMap(props) {
     if (map.current) {
       map.current.flyTo({
         center: lngLatCenter,
-        zoom: zoomLevel
+        // Make sure we are not flying to a zoom value smaller than the mapMinZoom
+        // If we do, the map will do a little shake.
+        zoom: Math.max(zoomLevel, mapMinZoomRef.current)
       });
     }
   }, [lngLatCenter, zoomLevel]);
@@ -2256,7 +2312,9 @@ PureMap.propTypes = {
   showScale: T.bool,
   themeColorScheme: T.string,
   zoom: T.number,
-  onMapLoad: T.func,
+  onMapLoad: T.shape({
+    exec: T.func
+  }),
   onMapClick: T.func,
   onOptionsChange: T.func
 };
@@ -2273,7 +2331,9 @@ PureMap.defaultProps = {
   showBaseLayer: exports.DEFAULT_SHOW_BASELAYER,
   layers: [],
   themeColorScheme: 'dark',
-  onMapLoad: lodash_1.noop,
+  onMapLoad: {
+    exec: lodash_1.noop
+  },
   onMapClick: lodash_1.noop,
   onOptionsChange: lodash_1.noop
 };
@@ -2304,7 +2364,7 @@ var maplibre_gl_css_1 = __webpack_require__(408);
 var PureMapContainer = styled_components_1.default.div.withConfig({
   displayName: "PureMapContainer",
   componentId: "sc-1gjwxfv-0"
-})(["", " overflow:hidden;position:relative;z-index:0;background-color:", ";", ";.maplibregl-ctrl-top-left{display:", ";position:absolute;top:12px;left:16px;.maplibregl-ctrl-group{width:40px !important;height:87px !important;border-radius:4px;margin:8px 0px;background-color:", ";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=\"", "\" fill-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=\"", "\" fill-opacity=\"", "\" /></svg>');}}}.maplibregl-ctrl-bottom-left{display:", ";position:absolute;z-index:0;bottom:16px;left:12px;width:86px;height:29px;border-radius:4px;margin:0;background-color:", ";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:", ";color:", ";border:2px solid ", ";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;}}"], maplibre_gl_css_1.default, function (props) {
+})(["", " overflow:hidden;position:relative;z-index:0;background-color:", ";", ";.maplibregl-cooperative-gesture-screen{z-index:0;}.maplibregl-ctrl-top-left{display:", ";position:absolute;top:12px;left:16px;.maplibregl-ctrl-group{width:40px !important;height:87px !important;border-radius:4px;margin:8px 0px;background-color:", ";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=\"", "\" fill-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=\"", "\" fill-opacity=\"", "\" /></svg>');}}}.maplibregl-ctrl-bottom-left{display:", ";position:absolute;z-index:0;bottom:16px;left:12px;width:86px;height:29px;border-radius:4px;margin:0;background-color:", ";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:", ";color:", ";border:2px solid ", ";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;}}"], maplibre_gl_css_1.default, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
@@ -2354,7 +2414,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var React = __webpack_require__(0);
-var BubbleLayer_1 = __webpack_require__(130);
+var BubbleLayer_1 = __webpack_require__(129);
 var MarkerLayer_1 = __webpack_require__(411);
 var MapUtils_1 = __webpack_require__(85);
 var ClusterLayer = function ClusterLayer(_ref) {
@@ -2593,6 +2653,7 @@ var Tooltip = function Tooltip(_ref) {
     additionalFields = _ref$additionalFields === void 0 ? [] : _ref$additionalFields;
   return React.createElement(StyledPopover, {
     open: open,
+    animation: false,
     anchor: anchor,
     "data-test": "map-marker-tooltip",
     defaultPlacement: "above"
@@ -2650,7 +2711,7 @@ var React = __webpack_require__(0);
 var colorUtils_1 = __webpack_require__(12);
 var lodash_1 = __webpack_require__(3);
 var MapUtils_1 = __webpack_require__(85);
-var MarkerWrapper_1 = __webpack_require__(131);
+var MarkerWrapper_1 = __webpack_require__(130);
 var MarkerIcon = function MarkerIcon(_a) {
   var theme = _a.theme,
     color = _a.color,
@@ -3637,8 +3698,8 @@ var config = {
   /**
    * viz name
    */
-  name: 'Map',
-  category: VizCategory_1.VizCategory.CHOROPLETH,
+  name: i18n_1._('Map'),
+  category: VizCategory_1.VizCategory.SPATIAL,
   status: 'preview',
   /**
    * viz icon
@@ -3677,10 +3738,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.columnsNullToZeros = void 0;
 var types_1 = __webpack_require__(90);
-var dsl_1 = __webpack_require__(105);
+var dsl_1 = __webpack_require__(131);
 var hocUtils_1 = __webpack_require__(26);
 var JSONSchemaUtils_1 = __webpack_require__(27);
-var BubbleLayer_1 = __webpack_require__(130);
+var BubbleLayer_1 = __webpack_require__(129);
 var columnsNullToZeros = function columnsNullToZeros(config, dataSources, options) {
   var _a, _b;
   var primary = dataSources.primary;
@@ -3895,7 +3956,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "25.10.0 - 8d01deb08"
+  'data-splunk-visualization-version': "25.12.0 - d7a0fecdf"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"