@splunk/visualizations 26.0.0 → 26.1.1

package/Map.js

@@ -1,5 +1,5 @@
 /*!
- * Copyright © 2018 Splunk Inc.
+ * Copyright © 2024 Splunk Inc.
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
  */
@@ -136,15 +136,17 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertToArrOfObjects = void 0;
-// TODO: utilize this fn in ParallelCoordinates
+exports.convertToArrOfObjects = void 0; // TODO: utilize this fn in ParallelCoordinates
+
 var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
   if (!columns || !columns[0] || !columns[0].length) return [];
   var data = [];
+
   var _loop = function _loop(i) {
     var newObj = {};
     fields.forEach(function (field, index) {
       var fieldName = typeof field === 'string' ? field : field.name;
+
       if (columns[index][i] === '') {
         newObj[fieldName] = null;
       } else {
@@ -153,11 +155,14 @@ var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
     });
     data.push(newObj);
   };
+
   for (var i = 0; i < columns[0].length; i += 1) {
     _loop(i);
   }
+
   return data;
 };
+
 exports.convertToArrOfObjects = convertToArrOfObjects;
 
 /***/ }),
@@ -171,11 +176,17 @@ exports.convertToArrOfObjects = convertToArrOfObjects;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 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 {
@@ -188,11 +199,11 @@ var Item = styled_components_1.default.div.attrs(function (_ref) {
   componentId: "sc-1yhgpod-0"
 })(["position:relative;background-color:", "};"], function (props) {
   return (0, 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
+}); // 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;
+      height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
       width: (0, style_1.toPx)(width)
@@ -214,11 +225,13 @@ 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;
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+
     if (!height) {
       return React.createElement(Item, {
         "data-test": "item",
@@ -226,24 +239,27 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
         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": "26.0.0 - 2f7458907",
+      "data-splunk-visualization-version": "26.1.1 - b6df0a015",
       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;
+          newHeight = _ref3.height;
       return React.createElement(Viz, Object.assign({}, props, {
         width: newWidth,
         height: newHeight
       }));
     })));
   };
+
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
   return FixedSizeContainer;
 };
+
 exports.default = withFixedSizeContainer;
 
 /***/ }),
@@ -255,36 +271,51 @@ exports.default = withFixedSizeContainer;
 
 
 var _slicedToArray = __webpack_require__(17);
+
 var _defineProperty = __webpack_require__(7);
+
 var _toConsumableArray = __webpack_require__(8);
+
 var _taggedTemplateLiteral = __webpack_require__(59);
+
 var _templateObject;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Bubble = exports.PieSegment = exports.GEO_LAT_AND_LONG_FIELD = exports.GEO_BOUND_PREFIX = void 0;
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var lodash_1 = __webpack_require__(3);
+
 var colorUtils_1 = __webpack_require__(12);
-var MapUtils_1 = __webpack_require__(91);
+
+var MapUtils_1 = __webpack_require__(92);
+
 var MarkerWrapper_1 = __webpack_require__(132);
+
 exports.GEO_BOUND_PREFIX = '_geo_bounds_';
 exports.GEO_LAT_AND_LONG_FIELD = ['_geo_long_field', '_geo_lat_field'];
 exports.PieSegment = React.memo(function (_ref) {
   var start = _ref.start,
-    end = _ref.end,
-    radius = _ref.radius,
-    color = _ref.color,
-    themeColor = _ref.themeColor,
-    segmentMetadata = _ref.segmentMetadata,
-    handleBubbleClick = _ref.handleBubbleClick;
+      end = _ref.end,
+      radius = _ref.radius,
+      color = _ref.color,
+      themeColor = _ref.themeColor,
+      segmentMetadata = _ref.segmentMetadata,
+      handleBubbleClick = _ref.handleBubbleClick;
+
   var _ref2 = segmentMetadata !== null && segmentMetadata !== void 0 ? segmentMetadata : {},
-    name = _ref2.name,
-    value = _ref2.value;
+      name = _ref2.name,
+      value = _ref2.value;
+
   var handleSegmentClick = React.useCallback(function (e) {
     handleBubbleClick(e, name, value);
   }, [name, value, handleBubbleClick]);
+
   if (end - start === 1) {
     return React.createElement("circle", {
       onClick: handleSegmentClick,
@@ -297,6 +328,7 @@ exports.PieSegment = React.memo(function (_ref) {
       stroke: color
     });
   }
+
   var a0 = 2 * Math.PI * (start - 0.25);
   var a1 = 2 * Math.PI * (end - 0.25);
   var x0 = Math.cos(a0);
@@ -318,17 +350,17 @@ exports.PieSegment.displayName = 'MapBubblePieSegment';
 var StyledMarkerWrapper = (0, styled_components_1.default)(MarkerWrapper_1.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n"])));
 exports.Bubble = React.memo(function (_ref3) {
   var originalValues = _ref3.originalValues,
-    valueRange = _ref3.valueRange,
-    colors = _ref3.colors,
-    themeColor = _ref3.themeColor,
-    isPie = _ref3.isPie,
-    latitude = _ref3.latitude,
-    longitude = _ref3.longitude,
-    bubbleSize = _ref3.bubbleSize,
-    _ref3$additionalField = _ref3.additionalFields,
-    additionalFields = _ref3$additionalField === void 0 ? [] : _ref3$additionalField,
-    map = _ref3.map,
-    handleMapClick = _ref3.handleMapClick;
+      valueRange = _ref3.valueRange,
+      colors = _ref3.colors,
+      themeColor = _ref3.themeColor,
+      isPie = _ref3.isPie,
+      latitude = _ref3.latitude,
+      longitude = _ref3.longitude,
+      bubbleSize = _ref3.bubbleSize,
+      _ref3$additionalField = _ref3.additionalFields,
+      additionalFields = _ref3$additionalField === void 0 ? [] : _ref3$additionalField,
+      map = _ref3.map,
+      handleMapClick = _ref3.handleMapClick;
   var onBubbleClick = React.useCallback(function (e, name, value) {
     handleMapClick(e, name, value);
     e.stopPropagation();
@@ -337,14 +369,16 @@ exports.Bubble = React.memo(function (_ref3) {
     var allZeros = originalValues.every(function (v) {
       return v === 0;
     });
+
     if (allZeros || !originalValues.length) {
       return null;
-    }
-    // sanitize values
+    } // sanitize values
+
+
     var values = originalValues.map(function (v) {
       return v > 0 ? v : 0;
-    });
-    // compute offsets for pie segments
+    }); // compute offsets for pie segments
+
     var offsets = [];
     var total = 0;
     values.forEach(function (count) {
@@ -378,9 +412,11 @@ exports.Bubble = React.memo(function (_ref3) {
       });
     }));
   }, [bubbleSize, colors, isPie, onBubbleClick, originalValues, themeColor, valueRange]);
+
   if (!bubble) {
     return null;
   }
+
   return React.createElement(StyledMarkerWrapper, {
     longitude: longitude,
     latitude: latitude,
@@ -390,12 +426,13 @@ exports.Bubble = React.memo(function (_ref3) {
   }, bubble);
 });
 exports.Bubble.displayName = 'MapBubble';
+
 var BubbleLayer = function BubbleLayer(props) {
   var bubbleLayer = props.bubbleLayer,
-    themeColorScheme = props.themeColorScheme,
-    map = props.map,
-    zoom = props.zoom,
-    onMapClick = props.onMapClick;
+      themeColorScheme = props.themeColorScheme,
+      map = props.map,
+      zoom = props.zoom,
+      onMapClick = props.onMapClick;
   bubbleLayer.seriesColors = bubbleLayer.seriesColors || MapUtils_1.DEFAULT_SERIES_COLORS;
   bubbleLayer.bubbleSize = bubbleLayer.bubbleSize || [];
   var bakedData = React.useMemo(function () {
@@ -404,20 +441,22 @@ var BubbleLayer = function BubbleLayer(props) {
   var staticColors = React.useMemo(function () {
     return (0, MapUtils_1.getStaticColors)(bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors);
   }, [bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors]);
+
   var _ref4 = bakedData !== null && bakedData !== void 0 ? bakedData : {},
-    _ref4$data = _ref4.data,
-    data = _ref4$data === void 0 ? [] : _ref4$data,
-    _ref4$dataRange = _ref4.dataRange,
-    dataRange = _ref4$dataRange === void 0 ? [] : _ref4$dataRange,
-    resultLimit = _ref4.resultLimit,
-    bubbleSizeFields = _ref4.bubbleSizeFields,
-    isPie = _ref4.isPie;
+      _ref4$data = _ref4.data,
+      data = _ref4$data === void 0 ? [] : _ref4$data,
+      _ref4$dataRange = _ref4.dataRange,
+      dataRange = _ref4$dataRange === void 0 ? [] : _ref4$dataRange,
+      resultLimit = _ref4.resultLimit,
+      bubbleSizeFields = _ref4.bubbleSizeFields,
+      isPie = _ref4.isPie;
+
   var _bubbleLayer$addition = bubbleLayer.additionalTooltipFields,
-    additionalTooltipFields = _bubbleLayer$addition === void 0 ? [] : _bubbleLayer$addition;
+      additionalTooltipFields = _bubbleLayer$addition === void 0 ? [] : _bubbleLayer$addition;
   var roundedZoom = Math.round(zoom);
   var themeColor = themeColorScheme === 'light' ? '#ffffff' : '#1a1c20';
-  var dynamicColors = bubbleLayer.dataColors;
-  // filter data for the current zoom level and sort base on values
+  var dynamicColors = bubbleLayer.dataColors; // filter data for the current zoom level and sort base on values
+
   var dataToRender = React.useMemo(function () {
     return data.reduce(function (acc, datum, i) {
       if (datum.zoom === roundedZoom) {
@@ -426,14 +465,17 @@ var BubbleLayer = function BubbleLayer(props) {
           idx: i
         });
       }
+
       return acc;
     }, []).slice(0, resultLimit || MapUtils_1.DEFAULT_RESULT_LIMIT).sort(function (a, b) {
       return (0, lodash_1.sum)(b.data.values) - (0, lodash_1.sum)(a.data.values);
     });
   }, [data, resultLimit, roundedZoom]);
+
   var _handleMapClick = React.useCallback(function (e, name, value, i) {
-    var _a, _b, _c;
-    // retrieve metadata from the appropriate datum, indexed by i
+    var _a, _b, _c; // retrieve metadata from the appropriate datum, indexed by i
+
+
     var metadata = (_c = (_b = (_a = dataToRender[i]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.metadata) !== null && _c !== void 0 ? _c : {};
     var payload = Object.keys(metadata).reduce(function (acc, curr) {
       var key = "row.".concat(curr, ".value");
@@ -448,13 +490,16 @@ var BubbleLayer = function BubbleLayer(props) {
       payload: payload
     });
   }, [dataToRender, onMapClick]);
+
   return React.createElement(React.Fragment, null, dataToRender.map(function (datum, i) {
     var colors = dynamicColors ? [dataToRender.map(function (obj) {
       return (0, colorUtils_1.isColor)(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : MapUtils_1.DEFAULT_CLUSTER_COLOR;
     })[i]] : staticColors;
+
     var _datum$data$coordinat = _slicedToArray(datum.data.coordinates, 2),
-      longitude = _datum$data$coordinat[0],
-      latitude = _datum$data$coordinat[1];
+        longitude = _datum$data$coordinat[0],
+        latitude = _datum$data$coordinat[1];
+
     var bubbleSize = datum.data.values.map(function (value, index) {
       return {
         name: bubbleSizeFields[index],
@@ -486,6 +531,7 @@ var BubbleLayer = function BubbleLayer(props) {
     });
   }));
 };
+
 exports.default = BubbleLayer;
 
 /***/ }),
@@ -497,39 +543,50 @@ exports.default = BubbleLayer;
 
 
 var _slicedToArray = __webpack_require__(17);
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var maplibre_gl_1 = __webpack_require__(159);
+
+var maplibre_gl_1 = __webpack_require__(160);
+
 var React = __webpack_require__(1);
+
 var Tooltip_1 = __webpack_require__(416);
+
 var MarkerWrapper = function MarkerWrapper(_a) {
   var longitude = _a.longitude,
-    latitude = _a.latitude,
-    areaId = _a.areaId,
-    areaValue = _a.areaValue,
-    _a$additionalFields = _a.additionalFields,
-    additionalFields = _a$additionalFields === void 0 ? [] : _a$additionalFields,
-    map = _a.map,
-    isChoroplethTooltipOpen = _a.isChoroplethTooltipOpen,
-    children = _a.children,
-    otherProps = __rest(_a, ["longitude", "latitude", "areaId", "areaValue", "additionalFields", "map", "isChoroplethTooltipOpen", "children"]);
+      latitude = _a.latitude,
+      areaId = _a.areaId,
+      areaValue = _a.areaValue,
+      _a$additionalFields = _a.additionalFields,
+      additionalFields = _a$additionalFields === void 0 ? [] : _a$additionalFields,
+      map = _a.map,
+      isChoroplethTooltipOpen = _a.isChoroplethTooltipOpen,
+      children = _a.children,
+      otherProps = __rest(_a, ["longitude", "latitude", "areaId", "areaValue", "additionalFields", "map", "isChoroplethTooltipOpen", "children"]);
+
   var container = React.useRef();
   var marker = React.useRef();
+
   var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isTooltipOpen = _React$useState2[0],
-    setTooltipOpenStatus = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTooltipOpen = _React$useState2[0],
+      setTooltipOpenStatus = _React$useState2[1];
+
   var isChoroplethTooltip = React.useCallback(function () {
     return isChoroplethTooltipOpen !== undefined;
   }, [isChoroplethTooltipOpen]);
@@ -588,6 +645,7 @@ var MarkerWrapper = function MarkerWrapper(_a) {
     additionalFields: additionalFields
   })));
 };
+
 exports.default = MarkerWrapper;
 
 /***/ }),
@@ -622,9 +680,10 @@ exports.extendStaticWrapperProps = void 0;
  * @param {DashboardVizType} props.Wrapper
  * @param {DashboardVizType} props.Visualization
  */
+
 var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
   var Wrapper = _ref.Wrapper,
-    Visualization = _ref.Visualization;
+      Visualization = _ref.Visualization;
   var extendProperties = ['propTypes', 'defaultProps', 'config'];
   extendProperties.forEach(function (prop) {
     if (Visualization[prop]) {
@@ -633,72 +692,89 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
     }
   });
 };
+
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
 
-/***/ 158:
+/***/ 159:
 /***/ (function(module, exports) {
 
 module.exports = require("chroma-js");
 
 /***/ }),
 
-/***/ 159:
+/***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("maplibre-gl");
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 16:
+/***/ 160:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+module.exports = require("maplibre-gl");
 
 /***/ }),
 
-/***/ 160:
+/***/ 161:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Choropleth = exports.cleanupChoropleth = exports.compareChoropleth = exports.compareGeom = void 0;
+
 var React = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
-var MapUtils_1 = __webpack_require__(91);
+
+var MapUtils_1 = __webpack_require__(92);
+
 var MarkerWrapper_1 = __webpack_require__(132);
+
 var getShapeId = function getShapeId(id) {
   return "shape-".concat(id);
 };
+
 var getSourceId = function getSourceId(id) {
   return "source-".concat(id);
 };
+
 var getStrokeId = function getStrokeId(id) {
   return "stroke-".concat(id);
 };
+
 var compareGeom = function compareGeom(prev, next) {
   if (prev !== null && next !== null) {
     return prev.type === next.type && (0, lodash_1.isEqual)(prev.coordinates, next.coordinates);
   }
+
   return prev === null && next === null;
 };
+
 exports.compareGeom = compareGeom;
+
 var compareChoropleth = function compareChoropleth(prevProps, nextProps) {
   return (0, exports.compareGeom)(prevProps.geomData, nextProps.geomData) && prevProps.id === nextProps.id && prevProps.map === nextProps.map && prevProps.areaId === nextProps.areaId && prevProps.areaValue === nextProps.areaValue && prevProps.color === nextProps.color && prevProps.opacity === nextProps.opacity && prevProps.strokeColor === nextProps.strokeColor && prevProps.isThemeChanged === nextProps.isThemeChanged && (0, lodash_1.isEqual)(prevProps.additionalFields, nextProps.additionalFields) && prevProps.handleMapClick.toString() === nextProps.handleMapClick.toString();
 };
+
 exports.compareChoropleth = compareChoropleth;
+
 var cleanupChoropleth = function cleanupChoropleth(shapeId, sourceId, strokeId, map) {
-  var _a, _b, _c;
-  // catch errors where map is undefined
+  var _a, _b, _c; // catch errors where map is undefined
+
+
   var currLayer;
   var currSource;
   var currStrokeLayer;
+
   try {
     currLayer = (_a = map === null || map === void 0 ? void 0 : map.current) === null || _a === void 0 ? void 0 : _a.getLayer(shapeId);
     currStrokeLayer = (_b = map === null || map === void 0 ? void 0 : map.current) === null || _b === void 0 ? void 0 : _b.getLayer(strokeId);
@@ -706,29 +782,33 @@ var cleanupChoropleth = function cleanupChoropleth(shapeId, sourceId, strokeId,
   } catch (_d) {
     return;
   }
+
   if (currLayer) {
     map.current.removeLayer(shapeId);
   }
+
   if (currStrokeLayer) {
     map.current.removeLayer(strokeId);
   }
+
   if (currSource) {
     map.current.removeSource(sourceId);
   }
 };
+
 exports.cleanupChoropleth = cleanupChoropleth;
 exports.Choropleth = React.memo(function (_ref) {
   var id = _ref.id,
-    areaId = _ref.areaId,
-    areaValue = _ref.areaValue,
-    geomData = _ref.geomData,
-    map = _ref.map,
-    color = _ref.color,
-    opacity = _ref.opacity,
-    strokeColor = _ref.strokeColor,
-    isThemeChanged = _ref.isThemeChanged,
-    additionalFields = _ref.additionalFields,
-    handleMapClick = _ref.handleMapClick;
+      areaId = _ref.areaId,
+      areaValue = _ref.areaValue,
+      geomData = _ref.geomData,
+      map = _ref.map,
+      color = _ref.color,
+      opacity = _ref.opacity,
+      strokeColor = _ref.strokeColor,
+      isThemeChanged = _ref.isThemeChanged,
+      additionalFields = _ref.additionalFields,
+      handleMapClick = _ref.handleMapClick;
   var sourceId = getSourceId(id);
   var shapeId = getShapeId(id);
   var strokeId = getStrokeId(id);
@@ -736,18 +816,22 @@ exports.Choropleth = React.memo(function (_ref) {
     type: 'Feature',
     geometry: geomData
   };
+
   var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isTooltipOpen = _React$useState2[0],
-    setTooltipOpenStatus = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTooltipOpen = _React$useState2[0],
+      setTooltipOpenStatus = _React$useState2[1];
+
   var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    mouseLat = _React$useState4[0],
-    setmouseLat = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      mouseLat = _React$useState4[0],
+      setmouseLat = _React$useState4[1];
+
   var _React$useState5 = React.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    mouseLng = _React$useState6[0],
-    setmouseLng = _React$useState6[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      mouseLng = _React$useState6[0],
+      setmouseLng = _React$useState6[1];
+
   var openTooltip = React.useCallback(function () {
     setTooltipOpenStatus(true);
   }, []);
@@ -757,9 +841,9 @@ exports.Choropleth = React.memo(function (_ref) {
   var updateChoropleth = React.useCallback(function () {
     // Apply changes by removing the existing choropleth and creating a new one
     // instead of mutating the current
-    (0, exports.cleanupChoropleth)(shapeId, sourceId, strokeId, map);
-    // In order to set a different color and opacity to each choropleth region
+    (0, exports.cleanupChoropleth)(shapeId, sourceId, strokeId, map); // In order to set a different color and opacity to each choropleth region
     // we are creating a different layer for each region, and each layer requires a source
+
     map.current.addSource(sourceId, {
       type: 'geojson',
       data: formattedGeomData
@@ -774,6 +858,7 @@ exports.Choropleth = React.memo(function (_ref) {
         'fill-color': color
       }
     });
+
     if (strokeColor !== 'transparent') {
       map.current.addLayer({
         id: strokeId,
@@ -786,6 +871,7 @@ exports.Choropleth = React.memo(function (_ref) {
         }
       });
     }
+
     map.current.on('mousemove', shapeId, function (e) {
       var mouseLngLat = e.lngLat;
       setmouseLat(mouseLngLat.lat);
@@ -793,30 +879,30 @@ exports.Choropleth = React.memo(function (_ref) {
       openTooltip();
       map.current.getCanvas().style.cursor = 'pointer'; // eslint-disable-line no-param-reassign
     });
-
     map.current.on('mouseleave', shapeId, function () {
       closeTooltip();
       map.current.getCanvas().style.cursor = ''; // eslint-disable-line no-param-reassign
     });
-
     map.current.on('click', shapeId, function (e) {
       handleMapClick(e);
     });
   }, [shapeId, sourceId, map, color, opacity, formattedGeomData]);
   React.useEffect(function () {
     updateChoropleth();
-  }, [map, geomData, color, opacity, id, strokeColor]);
-  // Clean up on unmount
+  }, [map, geomData, color, opacity, id, strokeColor]); // Clean up on unmount
+
   React.useEffect(function () {
     return function () {
       return (0, exports.cleanupChoropleth)(shapeId, sourceId, strokeId, map);
     };
   }, []);
+
   if (isThemeChanged) {
     // Theme changes will reset the style layers of the entire map
     // so we need to rerender the choropleths
     updateChoropleth();
   }
+
   return React.createElement(MarkerWrapper_1.default, {
     isChoroplethTooltipOpen: isTooltipOpen,
     additionalFields: additionalFields,
@@ -834,21 +920,23 @@ exports.Choropleth = React.memo(function (_ref) {
   }));
 }, exports.compareChoropleth);
 exports.Choropleth.displayName = 'MapChoropleth';
+
 var ChoroplethLayer = function ChoroplethLayer(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
+
   var map = props.map,
-    choroplethLayer = props.choroplethLayer,
-    isThemeChanged = props.isThemeChanged,
-    setIsThemeChanged = props.setIsThemeChanged,
-    onMapClick = props.onMapClick;
+      choroplethLayer = props.choroplethLayer,
+      isThemeChanged = props.isThemeChanged,
+      setIsThemeChanged = props.setIsThemeChanged,
+      onMapClick = props.onMapClick;
   var cfgOpacity = Math.min(Math.max(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
   var scaledOpacities = (_a = (0, MapUtils_1.getScaledOpacities)(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors, cfgOpacity)) !== null && _a !== void 0 ? _a : [];
   var colors = (_b = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors) === null || _b === void 0 ? void 0 : _b.map(function (color) {
     return (color === null || color === void 0 ? void 0 : color.length) > 7 ? color.slice(0, 7) : color;
   });
   var limit = Math.min((_c = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaIds) === null || _c === void 0 ? void 0 : _c.length, (_d = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaValues) === null || _d === void 0 ? void 0 : _d.length, (_f = (_e = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.geom) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0, (choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.resultLimit) ? choroplethLayer.resultLimit : MapUtils_1.DEFAULT_RESULT_LIMIT);
-  var areaIdSliced = (_h = (_g = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaIds) === null || _g === void 0 ? void 0 : _g.slice(0, limit)) !== null && _h !== void 0 ? _h : [];
-  // generate a unique id if areaIds are not unique
+  var areaIdSliced = (_h = (_g = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.areaIds) === null || _g === void 0 ? void 0 : _g.slice(0, limit)) !== null && _h !== void 0 ? _h : []; // generate a unique id if areaIds are not unique
+
   var uniqueAreaIdSliced = (0, lodash_1.uniq)(areaIdSliced).length !== areaIdSliced.length ? areaIdSliced.map(function (id, i) {
     return "".concat(id).concat(i);
   }) : areaIdSliced;
@@ -860,6 +948,7 @@ var ChoroplethLayer = function ChoroplethLayer(props) {
       };
     });
   }) : [];
+
   var _handleMapClick = function handleMapClick(e, i) {
     var payload = (0, MapUtils_1.formatMetadata)(choroplethLayer, i);
     onMapClick({
@@ -867,12 +956,15 @@ var ChoroplethLayer = function ChoroplethLayer(props) {
       payload: payload
     });
   };
+
   if (!map || !choroplethLayer || !choroplethLayer.geom) {
     return React.createElement(React.Fragment, null);
   }
+
   if (isThemeChanged) {
     setIsThemeChanged(false);
   }
+
   return React.createElement("div", null, uniqueAreaIdSliced.map(function (id, i) {
     var areaId = areaIdSliced[i];
     var areaValue = choroplethLayer.areaValues[i];
@@ -894,6 +986,7 @@ var ChoroplethLayer = function ChoroplethLayer(props) {
     });
   }));
 };
+
 exports.default = ChoroplethLayer;
 
 /***/ }),
@@ -933,24 +1026,33 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var _defineProperty = __webpack_require__(7);
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var dynamicOptionsDSLType = {
   type: 'string',
   pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
@@ -960,20 +1062,22 @@ var dynamicOptionsDSLType = {
  * @param optionsSchema a visualization's options schema
  * @returns an updated options schema that additionally allows strings starting with > for each option
  */
+
 function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   var enhancedOptionsSchema = {};
   Object.keys(optionsSchema).forEach(function (key) {
     var _a = optionsSchema[key],
-      title = _a.title,
-      description = _a.description,
-      readOnly = _a.readOnly,
-      writeOnly = _a.writeOnly,
-      examples = _a.examples,
-      defaultValue = _a.default,
-      type = _a.type,
-      properties = _a.properties,
-      patternProperties = _a.patternProperties,
-      remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
     var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
       title: title
     }), description !== undefined && {
@@ -987,12 +1091,14 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
     }), defaultValue !== undefined && {
       default: defaultValue
     });
+
     if (type === 'object') {
       enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
         type: type
       }), properties && {
         properties: enhanceOptionsSchemaWithDynamicOptions(properties)
       });
+
       if (patternProperties) {
         var enhancedPatternProperties = {};
         Object.keys(patternProperties).forEach(function (opt) {
@@ -1010,6 +1116,7 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   });
   return enhancedOptionsSchema;
 }
+
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
@@ -1018,11 +1125,14 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
  * and containing `open: false` for all editor panels in editorConfig
  */
+
 function enhanceConfig(vizConfig) {
   var enhancedConfig = Object.assign({}, vizConfig);
+
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
+
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: config.open || false
@@ -1030,6 +1140,7 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
+
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -1037,6 +1148,7 @@ exports.enhanceConfig = enhanceConfig;
  * @param vizConfig a Visualization Config
  * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
  */
+
 function uncollapseEditorConfig(vizConfig) {
   var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
   editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
@@ -1046,13 +1158,16 @@ function uncollapseEditorConfig(vizConfig) {
   });
   return editorPanelUncollapsedConfig;
 }
+
 exports.uncollapseEditorConfig = uncollapseEditorConfig;
+
 function isDynamicOption(option) {
   return option && typeof option === 'string' && option.trim().startsWith('>') || false;
 }
-exports.isDynamicOption = isDynamicOption;
-// private helpers to improve readability of getInitialPreset
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
 // this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
 /**
  * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
  * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
@@ -1061,6 +1176,7 @@ exports.isDynamicOption = isDynamicOption;
  *
  * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
  */
+
 function hasCompatibleContexts(vizContext, presetContext) {
   var presetContextKeys = Object.keys(presetContext);
   return presetContextKeys.every(function (contextKey) {
@@ -1070,6 +1186,8 @@ function hasCompatibleContexts(vizContext, presetContext) {
 /**
  * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
  */
+
+
 function hasCompatibleOptions(vizOptions, presetOptions) {
   var presetOptionKeys = Object.keys(presetOptions);
   return presetOptionKeys.every(function (optionKey) {
@@ -1084,18 +1202,21 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  * @param {Object} vizOptions - the current vizOptions definition
  * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
  */
+
+
 function getInitialPreset(vizContext, vizOptions, presets) {
   return presets.find(function (preset) {
     var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
     var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
     var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions);
-    // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
     // if not, then the preset is invalid in config.ts
+
     if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
     return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
   });
 }
+
 exports.getInitialPreset = getInitialPreset;
 /**
  * generates number precision values for a Select editor
@@ -1103,6 +1224,7 @@ exports.getInitialPreset = getInitialPreset;
  * @param {Number} numPrecisionValues - number of integer precision values to generate
  * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
  */
+
 function generatePrecisionValues(numPrecisionValues) {
   return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
     return {
@@ -1111,6 +1233,7 @@ function generatePrecisionValues(numPrecisionValues) {
     };
   });
 }
+
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -1120,12 +1243,15 @@ exports.generatePrecisionValues = generatePrecisionValues;
  * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
  * @returns {EditorLayoutConfig[][]} new editor layout with insertion
  */
+
 var insertLayout = function insertLayout(layout, index) {
   for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     layoutItems[_key - 2] = arguments[_key];
   }
+
   return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
 };
+
 exports.insertLayout = insertLayout;
 
 /***/ }),
@@ -1189,11 +1315,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shouldShowIconPlaceholder = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
@@ -1201,6 +1333,8 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  * @param {boolean} loading
  * @returns {boolean}
  */
+
+
 var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
   var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
@@ -1209,6 +1343,7 @@ var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources)
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
+
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -1223,11 +1358,13 @@ var propTypes = {
  * @param {IconPlaceholderProps} props
  * @returns {React.ReactElement}
  */
+
 var IconPlaceholder = function IconPlaceholder(props) {
   var width = props.width,
-    height = props.height,
-    icon = props.icon,
-    iconColor = props.iconColor;
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
   if (icon) {
     return React.createElement(icon, {
       style: {
@@ -1239,9 +1376,11 @@ var IconPlaceholder = function IconPlaceholder(props) {
         transform: 'translate(-50%, -50%)'
       },
       width: '50%',
-      height: '50%'
+      height: '50%',
+      'data-test': 'icon-placeholder'
     });
   }
+
   return React.createElement(Message_1.default, {
     width: width,
     height: height,
@@ -1249,6 +1388,7 @@ var IconPlaceholder = function IconPlaceholder(props) {
     message: (0, i18n_1._)('No DataSource Connected')
   });
 };
+
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
@@ -1265,21 +1405,27 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 
 var _defineProperty = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
-var DataSource_1 = __webpack_require__(43);
+
+var DataSource_1 = __webpack_require__(34);
+
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
   currentSortDir: T.oneOf(DataSource_1.validSortDirs),
   onSort: T.func
 });
+
 var getSortingParams = function getSortingParams(_ref) {
   var requestParams = _ref.requestParams,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var currentSortKey;
   var currentSortDir;
   var nextSortDirMap = {
@@ -1288,15 +1434,18 @@ var getSortingParams = function getSortingParams(_ref) {
     none: 'asc'
   };
   var onSort;
+
   if (typeof onRequestParamsChange === 'function') {
     if (requestParams && (0, lodash_1.has)(requestParams, 'sort')) {
       currentSortKey = Object.keys(requestParams.sort).shift();
       currentSortDir = requestParams.sort[currentSortKey];
-    }
-    // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
     onSort = function onSort(e, _ref2) {
       var sortKey = _ref2.sortKey,
-        sortDir = _ref2.sortDir;
+          sortDir = _ref2.sortDir;
+
       if (typeof sortKey === 'string') {
         var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
@@ -1308,12 +1457,14 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
+
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
+
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
@@ -1324,43 +1475,69 @@ exports.getSortingParams = getSortingParams;
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.validSegmentationModes = ['none', 'inner'];
+exports.validOutputModes = ['json_cols', 'json'];
+
+/***/ }),
+
+/***/ 35:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
   current: T.number,
   totalPages: T.number,
   onChange: T.func
 });
+
 var getPaginationParams = function getPaginationParams(_ref) {
   var requestParams = _ref.requestParams,
-    meta = _ref.meta,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var totalCount = meta && meta.totalCount || 0;
   var offset = requestParams && requestParams.offset || 0;
   var count = requestParams && requestParams.count;
   var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
   var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
   var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
+
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
-      countArg = _ref2.count;
+        countArg = _ref2.count;
     var newParams = (0, lodash_1.cloneDeep)(requestParams);
+
     if (typeof countArg === 'number') {
       newParams.count = countArg;
       newParams.offset = 0;
     }
+
     var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+
     if (typeof page === 'number' && page > 0) {
       newParams.count = pageCount;
       newParams.offset = (page - 1) * pageCount;
     }
+
     onRequestParamsChange(newParams);
   };
+
   return {
     isPaging: isPaging,
     current: current,
@@ -1368,11 +1545,12 @@ var getPaginationParams = function getPaginationParams(_ref) {
     onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
+
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1383,6 +1561,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
+
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -1400,67 +1579,96 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 36:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
-var getSettingsFromThemedProps_1 = __webpack_require__(37);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(38);
+
 var Options_1 = __webpack_require__(30);
-var SanitizeProps_1 = __webpack_require__(38);
+
+var SanitizeProps_1 = __webpack_require__(39);
+
 var TimezoneContext_1 = __webpack_require__(26);
-var moment_1 = __webpack_require__(39);
+
+var moment_1 = __webpack_require__(40);
+
 var FeatureFlagContext_1 = __webpack_require__(21);
+
 var styled_components_1 = __webpack_require__(4);
+
 var hocUtils_1 = __webpack_require__(27);
+
 var JSONSchemaUtils_1 = __webpack_require__(28);
-var async_dynamic_options_evaluator_1 = __webpack_require__(40);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(41);
+
 var id_1 = __webpack_require__(25);
-var SplunkVisualization_1 = __webpack_require__(41);
+
+var SplunkVisualization_1 = __webpack_require__(42);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var getSorting_1 = __webpack_require__(33);
-var getPagination_1 = __webpack_require__(34);
+
+var getPagination_1 = __webpack_require__(35);
+
 var useDeepMemo_1 = __webpack_require__(44);
+
 var MissingPropsMessage_1 = __webpack_require__(45);
+
 var withEditModeCover_1 = __webpack_require__(46);
+
 var withPlaceholder_1 = __webpack_require__(47);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
  * @returns {HOC}
  */
+
+
 var withDashboardViz = function withDashboardViz(opts) {
   var ReactViz = opts.ReactViz,
-    vizConfig = opts.vizConfig,
-    _opts$computeVizProps = opts.computeVizProps,
-    computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
-    disableEditModeCover = opts.disableEditModeCover,
-    useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+      vizConfig = opts.vizConfig,
+      _opts$computeVizProps = opts.computeVizProps,
+      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
+      disableEditModeCover = opts.disableEditModeCover,
+      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+
   var SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
   var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
+
   var DashboardViz = function DashboardViz(props) {
     var _a;
+
     var mode = props.mode,
-      hasEventHandlers = props.hasEventHandlers,
-      dataSources = props.dataSources,
-      options = props.options,
-      _props$context = props.context,
-      context = _props$context === void 0 ? {} : _props$context,
-      width = props.width,
-      height = props.height,
-      onComputedProps = props.onComputedProps,
-      onEventTrigger = props.onEventTrigger,
-      theme = props.theme,
-      onRequestParamsChange = props.onRequestParamsChange;
+        hasEventHandlers = props.hasEventHandlers,
+        dataSources = props.dataSources,
+        options = props.options,
+        _props$context = props.context,
+        context = _props$context === void 0 ? {} : _props$context,
+        width = props.width,
+        height = props.height,
+        onComputedProps = props.onComputedProps,
+        onEventTrigger = props.onEventTrigger,
+        theme = props.theme,
+        onRequestParamsChange = props.onRequestParamsChange;
+
     var _React$useContext = React.useContext(TimezoneContext_1.default),
-      serializedTimezone = _React$useContext.serializedTimezone;
+        serializedTimezone = _React$useContext.serializedTimezone;
+
     if (serializedTimezone) {
       /*
           @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
@@ -1474,38 +1682,51 @@ var withDashboardViz = function withDashboardViz(opts) {
         moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
       }
     }
+
     var themeFunc = function themeFunc(themeVar) {
       var _a, _b;
+
       return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     };
+
     var bgColorFromTheme = themeFunc('defaultBackgroundColor');
+
     var _ref = (0, getSettingsFromThemedProps_1.default)({
-        theme: theme
-      }),
-      currentThemeFamily = _ref.family,
-      currentThemeColorScheme = _ref.colorScheme,
-      currentThemeDensity = _ref.density;
+      theme: theme
+    }),
+        currentThemeFamily = _ref.family,
+        currentThemeColorScheme = _ref.colorScheme,
+        currentThemeDensity = _ref.density;
+
     var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+
     var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      evaluatedOptionsAsync = _React$useState2[0],
-      setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        evaluatedOptionsAsync = _React$useState2[0],
+        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+
+
     var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+
     var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
-      _React$useState4 = _slicedToArray(_React$useState3, 1),
-      visualizationID = _React$useState4[0];
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
+
     var _React$useState5 = React.useState({}),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      dataSourcesInState = _React$useState6[0],
-      setDataSourcesInState = _React$useState6[1];
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        dataSourcesInState = _React$useState6[0],
+        setDataSourcesInState = _React$useState6[1];
+
     var _React$useState7 = React.useState(),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      dataFramesInState = _React$useState8[0],
-      setDataFramesInState = _React$useState8[1];
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        dataFramesInState = _React$useState8[0],
+        setDataFramesInState = _React$useState8[1];
+
     var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      useAsyncEvaluatedOptions = _React$useState10[0],
-      setUseAsyncEvaluatedOptions = _React$useState10[1];
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        useAsyncEvaluatedOptions = _React$useState10[0],
+        setUseAsyncEvaluatedOptions = _React$useState10[1];
+
     var isMounted = React.useRef(true);
     evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
@@ -1530,11 +1751,13 @@ var withDashboardViz = function withDashboardViz(opts) {
           });
         } else {
           var dataFrames = dataFramesInState;
+
           if (dataSources !== dataSourcesInState) {
             setDataSourcesInState(dataSources);
             dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
             setDataFramesInState(dataFrames);
           }
+
           return Options_1.Options.evaluate({
             context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
             options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
@@ -1545,21 +1768,24 @@ var withDashboardViz = function withDashboardViz(opts) {
         console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
+
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    // trellis specific backgroundColor update for onComputedProps
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
     // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
     // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
+
     var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
     var clonedEvaluatedOptions = evaluatedOptionsToUse;
+
     if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
       clonedEvaluatedOptions = Object.assign(Object.assign({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
-    }
-    // useEffect hook needs to be initialized before any early returns
+    } // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
+
+
     React.useEffect(function () {
       onComputedProps(clonedEvaluatedOptions);
     });
@@ -1569,53 +1795,68 @@ var withDashboardViz = function withDashboardViz(opts) {
           isMounted.current = false;
           async_dynamic_options_evaluator_1.default.reset(visualizationID);
         }
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // present warning message if any required props are missing
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // present warning message if any required props are missing
+
     var _vizConfig$requiredPr = vizConfig.requiredProps,
-      requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
-      supports = vizConfig.supports;
+        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+        supports = vizConfig.supports;
     var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
+
     if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
     ) {
-      return React.createElement(MissingPropsMessage_1.default, {
-        "data-test": "missing-props-message",
-        width: width,
-        height: height,
-        missingProps: missing,
-        backgroundColor: bgColorFromTheme
-      });
-    }
-    // events
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
+
+
     var eventCallbackProps = {};
+
     if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
       var supportedEvents = vizConfig.events;
       Object.keys(supportedEvents).forEach(function (eventName) {
-        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName));
-        eventCallbackProps[eventCallbackPropName] = null;
-        // todo: refactor single value and single value icon to send payload from viz
+        var _supportedEvents$even = supportedEvents[eventName],
+            parentKeys = _supportedEvents$even.parentKeys,
+            payloadKeys = _supportedEvents$even.payloadKeys;
+        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName)); // todo: refactor single value and single value icon to send payload from viz
         // then remove these lines
-        var payloadKeys = supportedEvents[eventName].payloadKeys;
+
         var payload = {};
+
         if (Array.isArray(payloadKeys) && payloadKeys.length) {
           payloadKeys.forEach(function (p) {
             payload[p] = evaluatedOptionsToUse[p];
           });
         }
+
         eventCallbackProps[eventCallbackPropName] = function (ev) {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
+
           return onEventTrigger({
             originalEvent: ev,
             payload: payload,
             type: eventName
           });
         };
+
+        if (parentKeys) {
+          for (var i = parentKeys.length - 1; i >= 0; i -= 1) {
+            var newObject = {};
+            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
+            eventCallbackProps[eventCallbackPropName] = newObject;
+          }
+        }
       });
-    }
-    // compute pure viz props which are not from options
+    } // compute pure viz props which are not from options
+
+
     var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
       themeFunc: themeFunc
     }));
@@ -1633,15 +1874,19 @@ var withDashboardViz = function withDashboardViz(opts) {
      * In future, we could automatically detect which all datasources are being used
      * and bind those magically to pagination/sorting behavior.
      */
+
     var dataSourceMetadata = {};
     var OptionKey = 'paginateDataSourceKey';
     var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
+
     if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && (0, lodash_1.has)(dataSources, paginateDataSourceKey)) {
       var requestParams = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'requestParams'], {});
       var meta = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'meta'], {});
+
       var handleRequestParamsChange = function handleRequestParamsChange(payload) {
         return onRequestParamsChange(paginateDataSourceKey, payload);
       };
+
       var sortParams = (0, getSorting_1.getSortingParams)({
         requestParams: requestParams,
         meta: meta,
@@ -1656,49 +1901,46 @@ var withDashboardViz = function withDashboardViz(opts) {
         sortParams: sortParams,
         paginatorParams: paginatorParams
       };
-    }
-    // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+    } // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
+
+
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
+
     return React.createElement(SanitizedReactViz, Object.assign({
       mode: mode,
       width: width,
       height: height
     }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
+
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
   DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
     // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
     theme: {}
-  });
-  // attach viz config
-  DashboardViz.config = vizConfig;
-  // @ts-ignore: TODO fix sc upgrade TS issues
-  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
-};
-exports.default = withDashboardViz;
+  }); // attach viz config
 
-/***/ }),
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
 
-/***/ 37:
-/***/ (function(module, exports) {
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
+};
 
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
+exports.default = withDashboardViz;
 
 /***/ }),
 
 /***/ 38:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
 /***/ 39:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/moment");
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
@@ -1712,137 +1954,14 @@ module.exports = require("styled-components");
 /***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/async-dynamic-options-evaluator");
+module.exports = require("@splunk/moment");
 
 /***/ }),
 
 /***/ 41:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
+/***/ (function(module, exports) {
 
-var _classCallCheck = __webpack_require__(9);
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
-/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
-var T = __webpack_require__(0);
-var lodash_1 = __webpack_require__(3);
-var VizActionHandler_1 = __webpack_require__(42);
-// this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
-exports.INITIAL_WIDTH = 250;
-exports.INITIAL_HEIGHT = 250;
-/**
- * A Splunk visualization
- */
-var SplunkVisualization = function SplunkVisualization() {
-  _classCallCheck(this, SplunkVisualization);
-};
-SplunkVisualization.propTypes = {
-  /**
-   * display mode
-   */
-  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
-  /**
-   * width in pixel or string, defaults to 100%
-   */
-  width: T.oneOfType([T.string, T.number]).isRequired,
-  /**
-   * height in pixel or string
-   */
-  height: T.oneOfType([T.string, T.number]).isRequired,
-  /**
-   * visualization context used for dynamic option evaluation
-   */
-  context: T.object,
-  /**
-   * visualization formatting options
-   */
-  options: T.object,
-  /**
-   * A callback to update formatting options
-   */
-  onOptionsChange: T.func,
-  /**
-   * datasource state which include data and request params, object key indicate the datasource type.
-   */
-  dataSources: T.objectOf(T.shape({
-    /**
-     * current request params
-     */
-    requestParams: T.object,
-    /**
-     * current dataset
-     */
-    data: T.shape({
-      fields: T.array,
-      columns: T.array
-    }),
-    /**
-     * error
-     */
-    error: T.shape({
-      level: T.string,
-      message: T.string
-    }),
-    /**
-     * meta data that came with the dataset
-     */
-    meta: T.object
-  })),
-  /**
-   * A callback to trigger event
-   */
-  onEventTrigger: T.func,
-  /**
-   * Inform viz if there are handlers listening to events
-   */
-  hasEventHandlers: T.bool,
-  /**
-   * A callback to communicate computed props to a consumer
-   */
-  onComputedProps: T.func,
-  /**
-   * A callback to obtain visualization api
-   */
-  vizActionHandlerRef: T.func,
-  loading: T.bool,
-  theme: T.object,
-  /**
-   * A callback to request new data with updated request params
-   */
-  onRequestParamsChange: T.func
-};
-/**
- *
- */
-SplunkVisualization.defaultProps = {
-  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
-  width: '100%',
-  height: exports.INITIAL_HEIGHT,
-  dataSources: {},
-  onEventTrigger: function onEventTrigger() {
-    return {};
-  },
-  mode: 'view',
-  hasEventHandlers: false,
-  options: {},
-  context: {},
-  onOptionsChange: function onOptionsChange() {
-    return {};
-  },
-  vizActionHandlerRef: function vizActionHandlerRef() {
-    return new VizActionHandler_1.DefaultVizActionHandler();
-  },
-  onComputedProps: function onComputedProps() {
-    return {};
-  },
-  loading: false,
-  onRequestParamsChange: lodash_1.noop
-};
-exports.default = SplunkVisualization;
+module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
@@ -1854,74 +1973,98 @@ exports.default = SplunkVisualization;
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PureMap = exports.config = exports.themes = exports.useIconPlaceholder = exports.computeVizProps = void 0;
 /* eslint-disable no-sequences */
+
 var React = __webpack_require__(1);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var hocUtils_1 = __webpack_require__(27);
+
 var JSONSchemaUtils_1 = __webpack_require__(28);
+
 var PureMap_1 = __webpack_require__(411);
+
 exports.PureMap = PureMap_1.default;
+
 var config_1 = __webpack_require__(421);
+
 exports.config = config_1.default;
-var withDashboardViz_1 = __webpack_require__(36);
+
+var withDashboardViz_1 = __webpack_require__(37);
+
 var mapUtils_1 = __webpack_require__(422);
+
 var BubbleLayer_1 = __webpack_require__(131);
+
 var dataUtils_1 = __webpack_require__(121);
+
 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
   var geobinIdx = dataFields.indexOf('geobin');
   var layer = l;
+
   if (geobinIdx > -1) {
     layer.geobin = dataSourceData.columns[geobinIdx];
-  }
-  // similarly add key `geom` to layer object for choropleths
+  } // similarly add key `geom` to layer object for choropleths
+
+
   var geomIdx = dataFields.indexOf('geom');
+
   if (geomIdx > -1) {
     layer.geom = dataSourceData.columns[geomIdx].map(function (geomItem) {
       return typeof geomItem === 'string' ? JSON.parse(geomItem) : geomItem;
     });
-  }
-  // Sanitize colors within layers
+  } // Sanitize colors within layers
+
+
   if (Object.prototype.hasOwnProperty.call(layer, 'seriesColors')) {
     layer.seriesColors = Array.isArray(layer.seriesColors) ? (0, colorUtils_1.sanitizeArrayOfColors)(layer.seriesColors) : undefined;
   }
+
   if (Object.prototype.hasOwnProperty.call(layer, 'dataColors')) {
     layer.dataColors = Array.isArray(layer.dataColors) ? (0, colorUtils_1.sanitizeArrayOfColors)(layer.dataColors) : undefined;
   }
+
   layer.metadata = transformedData;
 };
+
 var computeVizProps = function computeVizProps(props) {
   var _a, _b, _c;
+
   var themeFunc = props.themeFunc,
-    theme = props.theme,
-    layers = props.layers,
-    dataSources = props.dataSources,
-    onOptionsChange = props.onOptionsChange,
-    title = props.title;
+      theme = props.theme,
+      layers = props.layers,
+      dataSources = props.dataSources,
+      onOptionsChange = props.onOptionsChange,
+      title = props.title;
   var themeColorVariables = ['controlBackgroundColor', 'controlForegroundColor'];
   var themeColors = {};
   themeColorVariables.forEach(function (variable) {
     themeColors[variable] = themeFunc(variable);
-  });
-  // Markers use different icons, Bubbles has different styles for light and dark theme
+  }); // Markers use different icons, Bubbles has different styles for light and dark theme
   // this prop is passed for that
+
   var themeColorScheme = (theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1) ? theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1.colorScheme : 'dark';
-  var dataSourceData = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {};
-  // transforms data structure into array of objects to allow for indexing metadata at layer level
+  var dataSourceData = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {}; // transforms data structure into array of objects to allow for indexing metadata at layer level
   // TODO: explore any potential changes when multiple layers are supported
+
   var transformedData = (0, dataUtils_1.convertToArrOfObjects)(dataSourceData.columns, dataSourceData.fields);
   var dataFields = ((_c = dataSourceData.fields) !== null && _c !== void 0 ? _c : []).map(function (field) {
     return typeof field === 'string' ? field : field.name;
@@ -1936,29 +2079,37 @@ var computeVizProps = function computeVizProps(props) {
     title: title
   });
 };
+
 exports.computeVizProps = computeVizProps;
+
 var withTooltipFields = function withTooltipFields(Viz) {
   var VizWithTooltipFields = function VizWithTooltipFields(_a) {
     var _b, _c, _d;
+
     var dataSources = _a.dataSources,
-      options = _a.options,
-      otherProps = __rest(_a, ["dataSources", "options"]);
+        options = _a.options,
+        otherProps = __rest(_a, ["dataSources", "options"]);
+
     if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
       return React.createElement(Viz, Object.assign({}, otherProps, {
         options: options
       }));
     }
+
     var mergedOptions = (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, (0, 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') {
         // 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) {
         var _mergedOptions$layers = mergedOptions.layers[0].bubbleSizeFields,
-          bubbleSizeFields = _mergedOptions$layers === void 0 ? [] : _mergedOptions$layers;
+            bubbleSizeFields = _mergedOptions$layers === void 0 ? [] : _mergedOptions$layers;
         mergedOptions.layers[0].additionalTooltipFields = mergedOptions.layers[0].additionalTooltipFields.filter(function (field) {
           return (typeof fields[0] === 'string' ? fields.includes(field) : fields.map(function (f) {
             return f.name;
@@ -1966,38 +2117,46 @@ var withTooltipFields = function withTooltipFields(Viz) {
         });
       }
     }
+
     return React.createElement(Viz, Object.assign({
       dataSources: dataSources,
       options: mergedOptions
     }, otherProps));
   };
+
   VizWithTooltipFields.propTypes = Viz.propTypes;
   VizWithTooltipFields.defaultProps = Viz.defaultProps;
   VizWithTooltipFields.config = Viz.config;
   return VizWithTooltipFields;
-};
-// HOC for stripping the internal fields for Maps
+}; // HOC for stripping the internal fields for Maps
+
+
 var withoutInternalFields = function withoutInternalFields(Viz) {
   // eslint-disable-next-line react/display-name
   var VizWithoutInternalFields = function VizWithoutInternalFields(_a) {
     var dataSources = _a.dataSources,
-      otherProps = __rest(_a, ["dataSources"]);
+        otherProps = __rest(_a, ["dataSources"]);
+
     if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
       return React.createElement(Viz, Object.assign({}, otherProps));
     }
+
     var primary = dataSources.primary;
     var _primary$data = primary.data,
-      columns = _primary$data.columns,
-      fields = _primary$data.fields;
+        columns = _primary$data.columns,
+        fields = _primary$data.fields;
     var newColumns = [];
     var newFields = [];
+
     if (fields && columns && fields.length === columns.length) {
       // computed sorted index for removal
       var indicesToRemove = new Set(fields.reduce(function (arr, e, i) {
         var field = typeof e === 'string' ? e : e.name.toString();
+
         if (field.startsWith('_') && !field.startsWith(BubbleLayer_1.GEO_BOUND_PREFIX) && !BubbleLayer_1.GEO_LAT_AND_LONG_FIELD.includes(field)) {
           arr.push(i);
         }
+
         return arr;
       }, []));
       newFields = fields.filter(function (d, i) {
@@ -2007,6 +2166,7 @@ var withoutInternalFields = function withoutInternalFields(Viz) {
         return !indicesToRemove.has(i);
       });
     }
+
     var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
       primary: Object.assign(Object.assign({}, primary), {
         data: Object.assign(Object.assign({}, primary.data), {
@@ -2019,38 +2179,45 @@ var withoutInternalFields = function withoutInternalFields(Viz) {
       dataSources: modifiedDatasources
     }, otherProps));
   };
+
   VizWithoutInternalFields.propTypes = Viz.propTypes;
   VizWithoutInternalFields.defaultProps = Viz.defaultProps;
   VizWithoutInternalFields.config = Viz.config;
   return VizWithoutInternalFields;
-};
-// HOC for updating all null values in data columns to zeros
+}; // HOC for updating all null values in data columns to zeros
 // excluding 'latitude', 'longitude' and 'geobin'
+
+
 var withNullToZeros = function withNullToZeros(Viz) {
   // eslint-disable-next-line react/display-name
   var VizWithColumnsNullToZeros = function VizWithColumnsNullToZeros(_a) {
     var dataSources = _a.dataSources,
-      options = _a.options,
-      otherProps = __rest(_a, ["dataSources", "options"]);
+        options = _a.options,
+        otherProps = __rest(_a, ["dataSources", "options"]);
+
     if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
       return React.createElement(Viz, Object.assign({
         options: options
       }, otherProps));
     }
+
     var modifiedDatasources = (0, mapUtils_1.columnsNullToZeros)(config_1.default, dataSources, options);
     return React.createElement(Viz, Object.assign({
       dataSources: modifiedDatasources,
       options: options
     }, otherProps));
   };
+
   VizWithColumnsNullToZeros.propTypes = Viz.propTypes;
   VizWithColumnsNullToZeros.defaultProps = Viz.defaultProps;
   VizWithColumnsNullToZeros.config = Viz.config;
   return VizWithColumnsNullToZeros;
 };
+
 function useIconPlaceholder(dataSources, loading) {
   return loading;
 }
+
 exports.useIconPlaceholder = useIconPlaceholder;
 var Map = withoutInternalFields(withTooltipFields(withNullToZeros((0, withDashboardViz_1.default)({
   ReactViz: PureMap_1.default,
@@ -2072,23 +2239,38 @@ exports.default = Map;
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isLatLng = exports.formatColor = exports.DEFAULT_ZOOM = exports.DEFAULT_SHOW_BASELAYER = exports.DEFAULT_SHOW_ZOOM_CONTROLS = exports.DEFAULT_SHOW_SCALE = exports.DEFAULT_SCALE_UNIT = exports.DEFAULT_CONTROL_FOREGROUND_COLOR = exports.DEFAULT_CONTROL_BACKGROUND_COLOR = exports.DEFAULT_CENTER = void 0;
+
 var React = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
+
 var react_1 = __webpack_require__(1);
+
 var T = __webpack_require__(0);
-var chroma = __webpack_require__(158);
-var maplibre_gl_1 = __webpack_require__(159);
+
+var chroma = __webpack_require__(159);
+
+var maplibre_gl_1 = __webpack_require__(160);
+
 var i18n_1 = __webpack_require__(2);
+
 var MapContext_1 = __webpack_require__(412);
+
 var PureMapContainer_1 = __webpack_require__(413);
-var MapUtils_1 = __webpack_require__(91);
+
+var MapUtils_1 = __webpack_require__(92);
+
 var ClusterLayer_1 = __webpack_require__(415);
-var ChoroplethLayer_1 = __webpack_require__(160);
+
+var ChoroplethLayer_1 = __webpack_require__(161);
+
 var LocalChoroplethLayer_1 = __webpack_require__(418);
+
 exports.DEFAULT_CENTER = [0, 0];
 exports.DEFAULT_CONTROL_BACKGROUND_COLOR = '#2b3033';
 exports.DEFAULT_CONTROL_FOREGROUND_COLOR = '#B5B5B5';
@@ -2096,8 +2278,8 @@ exports.DEFAULT_SCALE_UNIT = 'imperial';
 exports.DEFAULT_SHOW_SCALE = true;
 exports.DEFAULT_SHOW_ZOOM_CONTROLS = true;
 exports.DEFAULT_SHOW_BASELAYER = true;
-exports.DEFAULT_ZOOM = 0;
-// convert rgb/rgba/hex color to encoded color & opacity for SVG strings
+exports.DEFAULT_ZOOM = 0; // convert rgb/rgba/hex color to encoded color & opacity for SVG strings
+
 var formatColor = function formatColor(color) {
   var chromaColor = chroma(color);
   return {
@@ -2105,94 +2287,115 @@ var formatColor = function formatColor(color) {
     opacity: chromaColor.alpha()
   };
 };
+
 exports.formatColor = formatColor;
 PureMapContainer_1.default.displayName = 'PureMapContainer';
+
 var PureMap = function PureMap(props) {
   var width = props.width,
-    height = props.height,
-    backgroundColor = props.backgroundColor,
-    baseLayerTileServer = props.baseLayerTileServer,
-    baseLayerTileServerType = props.baseLayerTileServerType,
-    center = props.center,
-    controlBackgroundColor = props.controlBackgroundColor,
-    controlForegroundColor = props.controlForegroundColor,
-    _props$layers = props.layers,
-    layers = _props$layers === void 0 ? [] : _props$layers,
-    scaleUnit = props.scaleUnit,
-    showScale = props.showScale,
-    showZoomControls = props.showZoomControls,
-    showBaseLayer = props.showBaseLayer,
-    themeColorScheme = props.themeColorScheme,
-    zoom = props.zoom,
-    onMapLoad = props.onMapLoad,
-    onMapClick = props.onMapClick,
-    onOptionsChange = props.onOptionsChange,
-    mode = props.mode,
-    title = props.title;
+      height = props.height,
+      backgroundColor = props.backgroundColor,
+      baseLayerTileServer = props.baseLayerTileServer,
+      baseLayerTileServerType = props.baseLayerTileServerType,
+      center = props.center,
+      controlBackgroundColor = props.controlBackgroundColor,
+      controlForegroundColor = props.controlForegroundColor,
+      _props$layers = props.layers,
+      layers = _props$layers === void 0 ? [] : _props$layers,
+      scaleUnit = props.scaleUnit,
+      showScale = props.showScale,
+      showZoomControls = props.showZoomControls,
+      showBaseLayer = props.showBaseLayer,
+      themeColorScheme = props.themeColorScheme,
+      zoom = props.zoom,
+      onMapLoad = props.onMapLoad,
+      onMapClick = props.onMapClick,
+      onOptionsChange = props.onOptionsChange,
+      mode = props.mode,
+      title = props.title;
+
   var _ref = (0, react_1.useContext)(MapContext_1.default),
-    defaultTileConfig = _ref.defaultTileConfig,
-    customTileConfig = _ref.customTileConfig;
+      defaultTileConfig = _ref.defaultTileConfig,
+      customTileConfig = _ref.customTileConfig;
+
   var basemapContainer = (0, react_1.useRef)(null);
   var map = (0, react_1.useRef)(null);
   var scaleControl = (0, react_1.useRef)(null);
   var zoomControl = (0, react_1.useRef)(null);
+
   var _ref2 = (0, react_1.useMemo)(function () {
-      return (0, MapUtils_1.getTilePreset)({
-        defaultTileConfig: defaultTileConfig,
-        customTileConfig: customTileConfig
-      });
-    }, [defaultTileConfig, customTileConfig]),
-    tilePreset = _ref2.tilePreset,
-    defaultTileLight = _ref2.defaultTileLight,
-    defaultTileDark = _ref2.defaultTileDark;
+    return (0, MapUtils_1.getTilePreset)({
+      defaultTileConfig: defaultTileConfig,
+      customTileConfig: customTileConfig
+    });
+  }, [defaultTileConfig, customTileConfig]),
+      tilePreset = _ref2.tilePreset,
+      defaultTileLight = _ref2.defaultTileLight,
+      defaultTileDark = _ref2.defaultTileDark;
+
   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];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      currentZoomLevel = _React$useState2[0],
+      _setCurrentZoomLevel = _React$useState2[1];
+
   var currentZoomLevelRef = (0, 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],
-    setMapIsLoaded = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isMapLoaded = _React$useState4[0],
+      setMapIsLoaded = _React$useState4[1];
+
   var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isThemeChanged = _React$useState6[0],
-    setIsThemeChanged = _React$useState6[1]; // We are tracking mapMinZoom, which is the smallest zoom the map is capable of doing
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isThemeChanged = _React$useState6[0],
+      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];
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      mapMinZoom = _React$useState8[0],
+      _setMapMinZoom = _React$useState8[1];
+
   var mapMinZoomRef = (0, react_1.useRef)(mapMinZoom);
+
   var setMapMinZoom = function setMapMinZoom(newMinZoom) {
     mapMinZoomRef.current = newMinZoom;
+
     _setMapMinZoom(newMinZoom);
-  };
-  // Assign default center when no center is defined
+  }; // Assign default center when no center is defined
+
+
   var lngLatCenter = (0, react_1.useMemo)(function () {
     if (!(0, MapUtils_1.isValidLatLon)(center)) {
       return exports.DEFAULT_CENTER;
     }
+
     return [center[1], center[0]];
-  }, [center]);
-  // TODO: take out zoomLevel to use zoom instead (set prop zoom = DEFAULT_ZOOM)
+  }, [center]); // TODO: take out zoomLevel to use zoom instead (set prop zoom = DEFAULT_ZOOM)
   // Assign default zoom when no zoom is defined
+
   var zoomLevel = (0, react_1.useMemo)(function () {
     if (zoom === undefined) {
       return exports.DEFAULT_ZOOM;
     }
+
     return zoom;
   }, [zoom]);
+
   var setIsThemeChangedCallback = function setIsThemeChangedCallback(isMyThemeChanged) {
     setIsThemeChanged(isMyThemeChanged);
   };
+
   var onOptionsChangeProxy = (0, react_1.useCallback)(function (e) {
     if (mode === 'edit') {
       onOptionsChange(e);
@@ -2210,12 +2413,15 @@ var PureMap = function PureMap(props) {
       // register event listener - zoom
       map.current.on('zoomend', function () {
         var mapZoomLevel = map.current.getZoom();
+
         if (mapZoomLevel < mapMinZoomRef.current) {
           setMapMinZoom(mapZoomLevel);
         }
+
         setCurrentZoomLevel(mapZoomLevel);
       });
     };
+
     map.current = new maplibre_gl_1.Map(Object.assign({
       container: basemapContainer.current,
       preserveDrawingBuffer: true,
@@ -2227,9 +2433,9 @@ var PureMap = function PureMap(props) {
         macHelpText: (0, i18n_1._)('Use ⌘ + scroll to zoom map'),
         mobileHelpText: (0, i18n_1._)('Use two fingers to move the map')
       }
-    }, (0, MapUtils_1.getZoomConstraintsFromTileConfig)(mapStyle, baseLayerTileServer)));
-    // Fired immediately after all necessary resources have been downloaded
+    }, (0, 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());
@@ -2240,16 +2446,17 @@ var PureMap = function PureMap(props) {
       } else {
         addZoomEndEventListener();
       }
-      setMapIsLoaded(true);
-      // TODO :- Temp timeout added for onMapLoad event to avoid flaky screenshots caused by
+
+      setMapIsLoaded(true); // 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 () {
         if (onMapLoad && typeof onMapLoad.exec === 'function') {
           onMapLoad.exec();
         }
       }, 500);
-    });
-    // register event listener - drag
+    }); // register event listener - drag
+
     map.current.on('dragend', function () {
       var newCenter = map.current.getCenter();
       onOptionsChangeProxy({
@@ -2258,15 +2465,15 @@ var PureMap = function PureMap(props) {
       });
     });
     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
+      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
+    }); // add zoom control
+
     zoomControl.current = new maplibre_gl_1.NavigationControl({
       showCompass: false
     });
@@ -2281,6 +2488,7 @@ var PureMap = function PureMap(props) {
   }, [scaleUnit]);
   var updateScale = (0, react_1.useCallback)(function () {
     var _a;
+
     if (showScale) {
       (_a = scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.current) === null || _a === void 0 ? void 0 : _a.setUnit(scaleUnit);
     }
@@ -2299,6 +2507,7 @@ var PureMap = function PureMap(props) {
       if (currentZoomLevel === mapMinZoomRef.current && (zoom === undefined || zoom < mapMinZoomRef.current)) {
         return;
       }
+
       var newCenter = map.current.getCenter();
       onOptionsChangeProxy({
         // when zooming with mouse/track pad,
@@ -2315,6 +2524,7 @@ var PureMap = function PureMap(props) {
       console.warn('Map Tile Server configuration is missing or invalid. Please provide a valid configuration');
       return;
     }
+
     var mapStyle = (0, MapUtils_1.getMapStyle)({
       showBaseLayer: showBaseLayer,
       baseLayerTileServer: baseLayerTileServer,
@@ -2324,22 +2534,24 @@ var PureMap = function PureMap(props) {
       defaultTileLight: defaultTileLight,
       defaultTileDark: defaultTileDark
     });
-    mapStyle.version = MapUtils_1.MAP_STYLE_VERSION_NUMBER;
-    // If the map has already been initialized, we update the styles
+    mapStyle.version = MapUtils_1.MAP_STYLE_VERSION_NUMBER; // If the map has already been initialized, we update the styles
+
     if (map.current) {
       var curr = map.current.getStyle();
-      var next = (0, lodash_1.omit)(mapStyle, ['theme', 'name', 'key']);
-      // In dashboard studio this setStyle function is triggered by zoom changes as well
+      var next = (0, lodash_1.omit)(mapStyle, ['theme', 'name', 'key']); // In dashboard studio this setStyle function is triggered by zoom changes as well
       // Since setStyle will reset all style layers on the map including choropleth,
       // we ONLY want to this to be called when there are style changes
+
       if (!(0, MapUtils_1.compareBaseStyles)(curr, next)) {
         // Refer to https://maplibre.org/maplibre-gl-js-docs/api/map/#setstyle-example for options.diff (default is true)
         map.current.setStyle((0, lodash_1.omit)(mapStyle, ['theme', 'name', 'key']));
         setIsThemeChanged(true);
       }
+
       var _ref3 = (0, MapUtils_1.getZoomConstraintsFromTileConfig)(mapStyle, baseLayerTileServer),
-        minZoom = _ref3.minZoom,
-        maxZoom = _ref3.maxZoom;
+          minZoom = _ref3.minZoom,
+          maxZoom = _ref3.maxZoom;
+
       map.current.setMinZoom(minZoom);
       map.current.setMaxZoom(maxZoom);
       updateScale();
@@ -2367,8 +2579,10 @@ var PureMap = function PureMap(props) {
       }
     };
   }, []);
+
   var _layers = _slicedToArray(layers, 1),
-    layer = _layers[0];
+      layer = _layers[0];
+
   return React.createElement(React.Fragment, null, React.createElement(PureMapContainer_1.default, {
     "aria-label": title || (0, i18n_1._)('Map'),
     className: "puremap",
@@ -2403,21 +2617,27 @@ var PureMap = function PureMap(props) {
     onMapClick: onMapClick
   })));
 };
+
 var isLatLng = function isLatLng(props, propName, componentName) {
   if (!props[propName]) {
     return null;
   }
+
   var latAbs = Math.abs(props[propName][0]);
   var lonAbs = Math.abs(props[propName][1]);
   var latlon = props[propName];
+
   if (latAbs > MapUtils_1.MAX_LATITUDE && lonAbs <= MapUtils_1.MAX_LATITUDE) {
     throw new Error("".concat(componentName, " ").concat(propName, " may have reversed [lat, lon] ranges."));
   }
+
   if (!(0, MapUtils_1.isValidLatLon)(latlon)) {
     throw new Error("".concat(componentName, " ").concat(propName, " incorrect [lat, lon] ranges."));
   }
+
   return null;
 };
+
 exports.isLatLng = isLatLng;
 PureMap.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
@@ -2492,10 +2712,15 @@ module.exports = require("@splunk/visualization-context/MapContext");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var styled_components_1 = __webpack_require__(4);
+
 var lodash_1 = __webpack_require__(3);
+
 var style_1 = __webpack_require__(14);
+
 var maplibre_gl_css_1 = __webpack_require__(414);
+
 var PureMapContainer = styled_components_1.default.div.attrs({
   'data-testid': 'puremap-container'
 }).withConfig({
@@ -2550,17 +2775,24 @@ __webpack_require__.r(__webpack_exports__);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var BubbleLayer_1 = __webpack_require__(131);
+
 var MarkerLayer_1 = __webpack_require__(417);
-var MapUtils_1 = __webpack_require__(91);
+
+var MapUtils_1 = __webpack_require__(92);
+
 var ClusterLayer = function ClusterLayer(_ref) {
   var clusterLayer = _ref.clusterLayer,
-    themeColorScheme = _ref.themeColorScheme,
-    zoom = _ref.zoom,
-    map = _ref.map,
-    onMapClick = _ref.onMapClick;
+      themeColorScheme = _ref.themeColorScheme,
+      zoom = _ref.zoom,
+      map = _ref.map,
+      onMapClick = _ref.onMapClick;
+
   var _a;
+
   if (((_a = map === null || map === void 0 ? void 0 : map.current) === null || _a === void 0 ? void 0 : _a.isStyleLoaded) && [clusterLayer.longitude, clusterLayer.latitude].every(Array.isArray)) {
     if ((clusterLayer === null || clusterLayer === void 0 ? void 0 : clusterLayer.type) === MapUtils_1.LAYER_TYPE.Marker && !('geobin' in clusterLayer)) {
       return React.createElement(MarkerLayer_1.default, {
@@ -2570,6 +2802,7 @@ var ClusterLayer = function ClusterLayer(_ref) {
         onMapClick: onMapClick
       });
     }
+
     if ((clusterLayer === null || clusterLayer === void 0 ? void 0 : clusterLayer.type) === MapUtils_1.LAYER_TYPE.Bubble && 'geobin' in clusterLayer && 'bubbleSize' in clusterLayer) {
       return React.createElement(BubbleLayer_1.default, {
         bubbleLayer: clusterLayer,
@@ -2580,8 +2813,10 @@ var ClusterLayer = function ClusterLayer(_ref) {
       });
     }
   }
+
   return null;
 };
+
 exports.default = ClusterLayer;
 
 /***/ }),
@@ -2593,15 +2828,22 @@ exports.default = ClusterLayer;
 
 
 var _taggedTemplateLiteral = __webpack_require__(59);
+
 var _templateObject;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertDegToDMS = void 0;
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var Popover_1 = __webpack_require__(62);
+
 var i18n_1 = __webpack_require__(2);
+
 var StyledPopover = (0, styled_components_1.default)(Popover_1.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 250px;\n    font-size: 12px;\n"])));
 var StyledTable = styled_components_1.default.table.withConfig({
   displayName: "Tooltip__StyledTable",
@@ -2621,42 +2863,50 @@ var StyledColorBlock = styled_components_1.default.div.withConfig({
 })(["background-color:", ";display:inline-block;margin-right:4px;border-radius:2px;width:6px;height:11px;transform:translateY(1px);"], function (props) {
   return props.color;
 });
+
 var convertDegToDMS = function convertDegToDMS(decimalDegree, type) {
   var truncate = function truncate(n) {
     return n > 0 ? Math.floor(n) : Math.ceil(n);
   };
+
   var absoluteDegree = Math.abs(decimalDegree);
   var degrees = truncate(absoluteDegree);
   var minutes = truncate((absoluteDegree - degrees) * 60);
   var seconds = Math.round((absoluteDegree - degrees - minutes / 60) * 3600);
+
   if (seconds === 60) {
     minutes += 1;
     seconds = 0;
   }
+
   if (minutes === 60) {
     degrees += 1;
     minutes = 0;
   }
+
   var direction;
+
   if (type === 'longitude') {
     direction = decimalDegree < 0 ? 'W' : 'E';
   } else if (type === 'latitude') {
     direction = decimalDegree < 0 ? 'S' : 'N';
   }
+
   return "".concat(degrees, "\xB0 ").concat(minutes, "' ").concat(seconds, "\" ").concat(direction);
 };
-exports.convertDegToDMS = convertDegToDMS;
-// only want latitude/longitude for marker and bubble
+
+exports.convertDegToDMS = convertDegToDMS; // only want latitude/longitude for marker and bubble
 // omit for choropleth, and put areaid, areavalue instead
+
 var Tooltip = function Tooltip(_ref) {
   var open = _ref.open,
-    anchor = _ref.anchor,
-    latitude = _ref.latitude,
-    longitude = _ref.longitude,
-    areaId = _ref.areaId,
-    areaValue = _ref.areaValue,
-    _ref$additionalFields = _ref.additionalFields,
-    additionalFields = _ref$additionalFields === void 0 ? [] : _ref$additionalFields;
+      anchor = _ref.anchor,
+      latitude = _ref.latitude,
+      longitude = _ref.longitude,
+      areaId = _ref.areaId,
+      areaValue = _ref.areaValue,
+      _ref$additionalFields = _ref.additionalFields,
+      additionalFields = _ref$additionalFields === void 0 ? [] : _ref$additionalFields;
   return React.createElement(StyledPopover, {
     open: open,
     animation: false,
@@ -2676,8 +2926,8 @@ var Tooltip = function Tooltip(_ref) {
     return value && String(value) !== '0';
   }).map(function (_ref3, index) {
     var name = _ref3.name,
-      value = _ref3.value,
-      color = _ref3.color;
+        value = _ref3.value,
+        color = _ref3.color;
     return React.createElement("tr", {
       key: String(index)
     }, React.createElement(StyledTitleColumn, {
@@ -2690,6 +2940,7 @@ var Tooltip = function Tooltip(_ref) {
     }, value));
   }))));
 };
+
 exports.default = Tooltip;
 
 /***/ }),
@@ -2701,32 +2952,46 @@ exports.default = Tooltip;
 
 
 var _defineProperty = __webpack_require__(7);
+
 var _taggedTemplateLiteral = __webpack_require__(59);
+
 var _templateObject;
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateMarkerWrapperProps = exports.MarkerIcon = void 0;
+
 var styled_components_1 = __webpack_require__(4);
+
 var React = __webpack_require__(1);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var lodash_1 = __webpack_require__(3);
-var MapUtils_1 = __webpack_require__(91);
+
+var MapUtils_1 = __webpack_require__(92);
+
 var MarkerWrapper_1 = __webpack_require__(132);
+
 var MarkerIcon = function MarkerIcon(_a) {
   var theme = _a.theme,
-    color = _a.color,
-    otherProps = __rest(_a, ["theme", "color"]);
+      color = _a.color,
+      otherProps = __rest(_a, ["theme", "color"]);
+
   var strokeOpacity = theme === 'light' ? 0.7 : 0.15;
   return React.createElement("svg", Object.assign({
     width: 22,
@@ -2744,15 +3009,16 @@ var MarkerIcon = function MarkerIcon(_a) {
     strokeOpacity: strokeOpacity
   }));
 };
+
 exports.MarkerIcon = MarkerIcon;
 var Marker = React.memo(function (_ref) {
   var latitude = _ref.latitude,
-    longitude = _ref.longitude,
-    color = _ref.color,
-    themeColorScheme = _ref.themeColorScheme,
-    map = _ref.map,
-    additionalFields = _ref.additionalFields,
-    handleLayerClick = _ref.handleLayerClick;
+      longitude = _ref.longitude,
+      color = _ref.color,
+      themeColorScheme = _ref.themeColorScheme,
+      map = _ref.map,
+      additionalFields = _ref.additionalFields,
+      handleLayerClick = _ref.handleLayerClick;
   var icon = React.useMemo(function () {
     return React.createElement(exports.MarkerIcon, {
       color: color,
@@ -2770,6 +3036,7 @@ var Marker = React.memo(function (_ref) {
 });
 Marker.displayName = 'MapMarker';
 var StyledMarkerWrapper = (0, styled_components_1.default)(MarkerWrapper_1.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 22px;\n    height: 28px;\n    cursor: pointer;\n"])));
+
 var generateMarkerWrapperProps = function generateMarkerWrapperProps(markerLayer) {
   var onMapClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : lodash_1.noop;
   var latArray = markerLayer.latitude;
@@ -2777,6 +3044,7 @@ var generateMarkerWrapperProps = function generateMarkerWrapperProps(markerLayer
   var isStaticColor = !markerLayer.dataColors;
   var limit = Math.min(latArray.length, lonArray.length, markerLayer.resultLimit ? markerLayer.resultLimit : MapUtils_1.DEFAULT_RESULT_LIMIT);
   var markerProps = [];
+
   var _loop = function _loop(i) {
     var staticColor = markerLayer.seriesColors && (0, colorUtils_1.isColor)(markerLayer.seriesColors[0]) ? markerLayer.seriesColors[0] : MapUtils_1.DEFAULT_CLUSTER_COLOR;
     var dynamicColor = markerLayer.dataColors && (0, colorUtils_1.isColor)(markerLayer.dataColors[i]) ? markerLayer.dataColors[i] : MapUtils_1.DEFAULT_CLUSTER_COLOR;
@@ -2787,8 +3055,10 @@ var generateMarkerWrapperProps = function generateMarkerWrapperProps(markerLayer
         value: markerLayer.metadata[i][field]
       };
     }) : [];
+
     var handleLayerClick = function handleLayerClick(e) {
       var _a;
+
       var metadata = (_a = markerLayer === null || markerLayer === void 0 ? void 0 : markerLayer.metadata[i]) !== null && _a !== void 0 ? _a : {};
       var payload = Object.keys(metadata).reduce(function (acc, curr) {
         var key = "row.".concat(curr, ".value");
@@ -2800,6 +3070,7 @@ var generateMarkerWrapperProps = function generateMarkerWrapperProps(markerLayer
         payload: payload
       });
     };
+
     markerProps.push({
       latitude: latArray[i],
       longitude: lonArray[i],
@@ -2808,17 +3079,21 @@ var generateMarkerWrapperProps = function generateMarkerWrapperProps(markerLayer
       handleLayerClick: handleLayerClick
     });
   };
+
   for (var i = 0; i < limit; i += 1) {
     _loop(i);
   }
+
   return markerProps;
 };
+
 exports.generateMarkerWrapperProps = generateMarkerWrapperProps;
+
 var MarkerLayer = function MarkerLayer(props) {
   var map = props.map,
-    themeColorScheme = props.themeColorScheme,
-    markerLayer = props.markerLayer,
-    onMapClick = props.onMapClick;
+      themeColorScheme = props.themeColorScheme,
+      markerLayer = props.markerLayer,
+      onMapClick = props.onMapClick;
   markerLayer.seriesColors = markerLayer.seriesColors || MapUtils_1.DEFAULT_SERIES_COLORS;
   var markerPropsList = React.useMemo(function () {
     return (0, exports.generateMarkerWrapperProps)(markerLayer, onMapClick);
@@ -2831,6 +3106,7 @@ var MarkerLayer = function MarkerLayer(props) {
     }, markerProps));
   }));
 };
+
 exports.default = MarkerLayer;
 
 /***/ }),
@@ -2842,51 +3118,66 @@ exports.default = MarkerLayer;
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var Message_1 = __webpack_require__(10);
+
 var GeoRegistry_1 = __webpack_require__(419);
+
 var GeoJsonProvider_1 = __webpack_require__(420);
-var MapUtils_1 = __webpack_require__(91);
-var ChoroplethLayer_1 = __webpack_require__(160);
+
+var MapUtils_1 = __webpack_require__(92);
+
+var ChoroplethLayer_1 = __webpack_require__(161);
+
 var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
   var _a, _b;
+
   var width = props.width,
-    height = props.height,
-    map = props.map,
-    choroplethLayer = props.choroplethLayer,
-    isThemeChanged = props.isThemeChanged,
-    setIsThemeChanged = props.setIsThemeChanged,
-    onMapClick = props.onMapClick;
+      height = props.height,
+      map = props.map,
+      choroplethLayer = props.choroplethLayer,
+      isThemeChanged = props.isThemeChanged,
+      setIsThemeChanged = props.setIsThemeChanged,
+      onMapClick = props.onMapClick;
   var cfgOpacity = Math.min(Math.max(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
+
   var _React$useState = React.useState({
-      features: [{
-        properties: {
-          name: ''
-        },
-        geometry: []
-      }]
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    geoJson = _React$useState2[0],
-    setGeoJson = _React$useState2[1];
+    features: [{
+      properties: {
+        name: ''
+      },
+      geometry: []
+    }]
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      geoJson = _React$useState2[0],
+      setGeoJson = _React$useState2[1];
+
   var _React$useState3 = React.useState(true),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    validGeoJson = _React$useState4[0],
-    setValidGeoJson = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      validGeoJson = _React$useState4[0],
+      setValidGeoJson = _React$useState4[1];
+
   var _React$useState5 = React.useState({
-      level: 'info',
-      message: ''
-    }),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    geoJsonError = _React$useState6[0],
-    setGeoJsonError = _React$useState6[1]; // load local geoJson registry data
+    level: 'info',
+    message: ''
+  }),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      geoJsonError = _React$useState6[0],
+      setGeoJsonError = _React$useState6[1]; // load local geoJson registry data
+
+
   React.useEffect(function () {
     var geoJsonData;
     var geoRegistry = GeoRegistry_1.default.create();
     geoRegistry.addDefaultProvider(new GeoJsonProvider_1.default());
+
     try {
       geoJsonData = geoRegistry.getByURL(choroplethLayer.source);
       setGeoJson(geoJsonData);
@@ -2898,9 +3189,10 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
   }, [choroplethLayer.source]);
   var updatedPropertyFormat = React.useMemo(function () {
     var propertyFormat = 'name';
+
     if (choroplethLayer.areaIds && validGeoJson) {
-      var propertyFormats = Object.keys(geoJson.features[0].properties);
-      // check the state or country format used in dataSource
+      var propertyFormats = Object.keys(geoJson.features[0].properties); // check the state or country format used in dataSource
+
       /* Accepted format for countries:
           "properties":
           {
@@ -2917,21 +3209,26 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
               "label_en": "Michigan"
           },
       */
+
       var _loop = function _loop(idx) {
         var shapeProperty = geoJson.features[idx].properties;
         var formatCheck = propertyFormats.find(function (key) {
           return shapeProperty[key] === choroplethLayer.areaIds[0];
         });
+
         if (formatCheck !== undefined) {
           propertyFormat = formatCheck;
           return "break";
         }
       };
+
       for (var idx = 0; idx < geoJson.features.length; idx += 1) {
         var _ret = _loop(idx);
+
         if (_ret === "break") break;
       }
     }
+
     return propertyFormat;
   }, [choroplethLayer.areaIds, geoJson]);
   var colors = (_a = choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors) === null || _a === void 0 ? void 0 : _a.map(function (color) {
@@ -2940,6 +3237,7 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
   var scaledOpacities = (_b = (0, MapUtils_1.getScaledOpacities)(choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.dataColors, cfgOpacity)) !== null && _b !== void 0 ? _b : [];
   var updatedAllChoroplethData = React.useMemo(function () {
     var allChoroplethData = [];
+
     if (validGeoJson) {
       for (var idx = 0; idx < geoJson.features.length; idx += 1) {
         var el = geoJson.features[idx];
@@ -2950,11 +3248,12 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
           name: '',
           idx: 0
         };
-        choroplethData.name = el.properties[updatedPropertyFormat];
-        // check whether dataSource exists
+        choroplethData.name = el.properties[updatedPropertyFormat]; // check whether dataSource exists
+
         if (choroplethLayer.areaIds) {
           // store the postion of dataSource in geoJson
           var dataIdx = choroplethLayer.areaIds.indexOf(el.properties[updatedPropertyFormat]);
+
           if (dataIdx !== -1) {
             choroplethData.color = colors[dataIdx];
             choroplethData.areaValue = choroplethLayer.areaValues[dataIdx];
@@ -2964,11 +3263,14 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
             choroplethData.idx = choroplethLayer.areaIds.length;
           }
         }
+
         allChoroplethData.push(choroplethData);
       }
     }
+
     return allChoroplethData;
   }, [choroplethLayer.areaIds, choroplethLayer.areaValues, colors, scaledOpacities]);
+
   var _handleMapClick = function handleMapClick(e, i) {
     var payload = (0, MapUtils_1.formatMetadata)(choroplethLayer, i);
     onMapClick({
@@ -2976,11 +3278,14 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
       payload: payload
     });
   };
+
   if (isThemeChanged) {
     setIsThemeChanged(false);
   }
+
   var additionalFields = (choroplethLayer === null || choroplethLayer === void 0 ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(function (choroplethMetadata) {
     var _a;
+
     return (_a = choroplethLayer.additionalTooltipFields) === null || _a === void 0 ? void 0 : _a.map(function (field) {
       return {
         name: field,
@@ -3013,6 +3318,7 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
     });
   }));
 };
+
 exports.default = LocalChoroplethLayer;
 
 /***/ }),
@@ -3031,29 +3337,148 @@ module.exports = require("@splunk/visualization-context/GeoRegistry");
 
 
 var _classCallCheck = __webpack_require__(9);
-var _createClass = __webpack_require__(18);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DefaultVizActionHandler = void 0;
-var DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {
-      // noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
-    }
-  }]);
-  return DefaultVizActionHandler;
-}();
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
+exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
+/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
+exports.INITIAL_WIDTH = 250;
+exports.INITIAL_HEIGHT = 250;
+/**
+ * A Splunk visualization
+ */
+
+var SplunkVisualization = function SplunkVisualization() {
+  _classCallCheck(this, SplunkVisualization);
+};
+
+SplunkVisualization.propTypes = {
+  /**
+   * display mode
+   */
+  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
+  /**
+   * width in pixel or string, defaults to 100%
+   */
+  width: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * height in pixel or string
+   */
+  height: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * visualization context used for dynamic option evaluation
+   */
+  context: T.object,
+
+  /**
+   * visualization formatting options
+   */
+  options: T.object,
+
+  /**
+   * A callback to update formatting options
+   */
+  onOptionsChange: T.func,
+
+  /**
+   * datasource state which include data and request params, object key indicate the datasource type.
+   */
+  dataSources: T.objectOf(T.shape({
+    /**
+     * current request params
+     */
+    requestParams: T.object,
+
+    /**
+     * current dataset
+     */
+    data: T.shape({
+      fields: T.array,
+      columns: T.array
+    }),
+
+    /**
+     * error
+     */
+    error: T.shape({
+      level: T.string,
+      message: T.string
+    }),
+
+    /**
+     * meta data that came with the dataset
+     */
+    meta: T.object
+  })),
+
+  /**
+   * A callback to trigger event
+   */
+  onEventTrigger: T.func,
+
+  /**
+   * Inform viz if there are handlers listening to events
+   */
+  hasEventHandlers: T.bool,
+
+  /**
+   * A callback to communicate computed props to a consumer
+   */
+  onComputedProps: T.func,
+
+  /**
+   * A callback to obtain visualization api
+   */
+  vizActionHandlerRef: T.func,
+  loading: T.bool,
+  theme: T.object,
+
+  /**
+   * A callback to request new data with updated request params
+   */
+  onRequestParamsChange: T.func
+};
+/**
+ *
+ */
+
+SplunkVisualization.defaultProps = {
+  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
+  width: '100%',
+  height: exports.INITIAL_HEIGHT,
+  dataSources: {},
+  onEventTrigger: function onEventTrigger() {
+    return {};
+  },
+  mode: 'view',
+  hasEventHandlers: false,
+  options: {},
+  context: {},
+  onOptionsChange: function onOptionsChange() {
+    return {};
+  },
+  vizActionHandlerRef: function vizActionHandlerRef() {
+    return new VizActionHandler_1.DefaultVizActionHandler();
+  },
+  onComputedProps: function onComputedProps() {
+    return {};
+  },
+  loading: false,
+  onRequestParamsChange: lodash_1.noop
+};
+exports.default = SplunkVisualization;
 
 /***/ }),
 
@@ -3073,17 +3498,29 @@ module.exports = require("@splunk/visualization-context/GeoJsonProvider");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var visualization_icons_1 = __webpack_require__(52);
+
 var placeholders_1 = __webpack_require__(50);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var visualization_color_palettes_1 = __webpack_require__(51);
+
 var themes_1 = __webpack_require__(60);
+
 var i18n_1 = __webpack_require__(2);
+
 var VizBehavior_1 = __webpack_require__(6);
-var VizCategory_1 = __webpack_require__(35);
+
+var VizCategory_1 = __webpack_require__(36);
+
 var configUtils_1 = __webpack_require__(20);
-var MapUtils_1 = __webpack_require__(91);
+
+var MapUtils_1 = __webpack_require__(92);
+
 var BackgroundColor_1 = __webpack_require__(53);
+
 var defaultContext = {
   colorRangeConfig: [{
     to: 20,
@@ -3443,12 +3880,15 @@ var themes = {
     })(props);
   }
 };
+
 var checkTypeIsChoropleth = function checkTypeIsChoropleth(options) {
   return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth;
 };
+
 var checkTypeIsLocalChoropleth = function checkTypeIsLocalChoropleth(options) {
   return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth && (options.layers[0].source === 'geo://default/us' || options.layers[0].source === 'geo://default/world');
 };
+
 var EDITOR_LABEL_WIDTH = 140;
 var editorConfig = [{
   label: (0, i18n_1._)('Data configurations'),
@@ -3616,8 +4056,7 @@ var editorConfig = [{
   }]]
 }, {
   label: (0, i18n_1._)('Color and style'),
-  layout: [
-  // TODO: add support for color mode option and its corresponding editor
+  layout: [// TODO: add support for color mode option and its corresponding editor
   // [
   //     {
   //         label: _('Color mode'),
@@ -3639,8 +4078,7 @@ var editorConfig = [{
       var options = _ref8.options;
       return !(options.layers && options.layers.length && options.layers[0].type === 'choropleth');
     }
-  }],
-  // TODO: add editor for data colors
+  }], // TODO: add editor for data colors
   // [
   //     {
   //         label: _('Data colors'),
@@ -3686,8 +4124,7 @@ var editorConfig = [{
       themes: themes,
       min: 0
     }
-  }],
-  // TODO: add support for seriesColorsByField option
+  }], // TODO: add support for seriesColorsByField option
   // [
   //     {
   //         label: _('Series colors by field name'),
@@ -3731,17 +4168,20 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
+
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.map',
+
   /**
    * viz name
    */
   name: (0, i18n_1._)('Map'),
   category: VizCategory_1.VizCategory.SPATIAL,
   status: 'preview',
+
   /**
    * viz icon
    */
@@ -3754,7 +4194,8 @@ var config = {
   editorConfig: editorConfig,
   events: {
     'map.load': {
-      description: 'triggered when map is fully loaded'
+      description: 'triggered when map is fully loaded',
+      parentKeys: ['exec']
     },
     'map.click': {
       description: 'trigger when user clicks map layer'
@@ -3778,28 +4219,38 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.columnsNullToZeros = void 0;
-var types_1 = __webpack_require__(94);
+
+var types_1 = __webpack_require__(83);
+
 var dsl_1 = __webpack_require__(133);
+
 var hocUtils_1 = __webpack_require__(27);
+
 var JSONSchemaUtils_1 = __webpack_require__(28);
+
 var BubbleLayer_1 = __webpack_require__(131);
+
 var columnsNullToZeros = function columnsNullToZeros(config, dataSources, options) {
   var _a, _b;
+
   var primary = dataSources.primary;
   var _primary$data = primary.data,
-    columns = _primary$data.columns,
-    fields = _primary$data.fields;
+      columns = _primary$data.columns,
+      fields = _primary$data.fields;
   var newColumns = columns;
   var mergedOptions = (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(config.optionsSchema, 'default'));
+
   if (((_b = (_a = mergedOptions.layers) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.type) === 'bubble') {
     var latitudeField = (0, dsl_1.getFieldsFromDSL)(mergedOptions.layers[0].latitude, dataSources)[0] || '';
     var longitudeField = (0, dsl_1.getFieldsFromDSL)(mergedOptions.layers[0].longitude, dataSources)[0] || '';
     var excludedFields = [latitudeField, longitudeField, 'geobin'].concat(BubbleLayer_1.GEO_LAT_AND_LONG_FIELD);
     var indicesToEvaluate = new Set(fields.reduce(function (arr, e, i) {
       var field = typeof e === 'string' ? e : e.name.toString();
+
       if (!excludedFields.includes(field)) {
         arr.push(i);
       }
+
       return arr;
     }, []));
     newColumns = columns.map(function (column, i) {
@@ -3809,9 +4260,11 @@ var columnsNullToZeros = function columnsNullToZeros(config, dataSources, option
           return !value || !(0, types_1.isNumber)(value) ? 0 : +value;
         });
       }
+
       return column;
     });
   }
+
   var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
     primary: Object.assign(Object.assign({}, primary), {
       data: Object.assign(Object.assign({}, primary.data), {
@@ -3821,6 +4274,7 @@ var columnsNullToZeros = function columnsNullToZeros(config, dataSources, option
   });
   return modifiedDatasources;
 };
+
 exports.columnsNullToZeros = columnsNullToZeros;
 
 /***/ }),
@@ -3831,11 +4285,35 @@ exports.columnsNullToZeros = columnsNullToZeros;
 "use strict";
 
 
+var _classCallCheck = __webpack_require__(9);
+
+var _createClass = __webpack_require__(18);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.DefaultVizActionHandler = void 0;
+
+var DefaultVizActionHandler = /*#__PURE__*/function () {
+  function DefaultVizActionHandler() {
+    _classCallCheck(this, DefaultVizActionHandler);
+  }
+
+  _createClass(DefaultVizActionHandler, [{
+    key: "focus",
+    value: function focus() {// noop
+    }
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      return null; // noop
+    }
+  }]);
+
+  return DefaultVizActionHandler;
+}();
+
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 
@@ -3849,7 +4327,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepMemo = void 0;
+
 var react_1 = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
 /**
  * This hook evaluates and stores the result of a passed function and only
@@ -3864,16 +4344,21 @@ var lodash_1 = __webpack_require__(3);
  * @param fn the function to be executed and
  * @param dependencies an array of dependencies
  */
+
+
 var useDeepMemo = function useDeepMemo(fn, dependencies) {
   var ref = (0, react_1.useRef)();
+
   if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
     ref.current = {
       dependencies: dependencies,
       value: fn()
     };
   }
+
   return ref.current.value;
 };
+
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
@@ -3888,19 +4373,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method isMissing
  * @param {any} v
  * @returns {boolean} true if the input value === null or undefined
  */
+
+
 var isMissing = function isMissing(v) {
   return v === null || v === undefined;
 };
+
 exports.isMissing = isMissing;
 /**
  * @method misskingKeys
@@ -3908,11 +4401,13 @@ exports.isMissing = isMissing;
  * @param {object} target
  * @returns {string[]} the keys of missing required props
  */
+
 var missingKeys = function missingKeys(keys, target) {
   return keys.filter(function (k) {
     return (0, exports.isMissing)(target[k]);
   });
 };
+
 exports.missingKeys = missingKeys;
 var propTypes = {
   width: T.oneOfType([T.string, T.number]),
@@ -3926,10 +4421,11 @@ var propTypes = {
  * @param {MissingPropsProps} props
  * @returns {React.ReactElement}
  */
+
 var MissingPropsMessage = function MissingPropsMessage(props) {
   var width = props.width,
-    height = props.height,
-    missingProps = props.missingProps;
+      height = props.height,
+      missingProps = props.missingProps;
   return React.createElement(Message_1.default, {
     "data-test": "message",
     width: width,
@@ -3937,6 +4433,7 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
   });
 };
+
 exports.MissingPropsMessage = MissingPropsMessage;
 exports.MissingPropsMessage.propTypes = propTypes;
 exports.MissingPropsMessage.defaultProps = {
@@ -3956,15 +4453,19 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var hocUtils_1 = __webpack_require__(15);
+
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   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': "26.0.0 - 2f7458907"
+  'data-splunk-visualization-version': "26.1.1 - b6df0a015"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3975,6 +4476,7 @@ var Blocker = styled_components_1.default.div.attrs({
  * @param {ExtendedDashViz} Visualization
  * @returns {ExtendedDashViz} Wrapper
  */
+
 var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
   var Wrapper = function Wrapper(props) {
     var mode = props.mode;
@@ -3983,12 +4485,14 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
+
   (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withEditModeCover;
 
 /***/ }),
@@ -4002,27 +4506,37 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var variables_1 = __webpack_require__(11);
+
 var IconPlaceholder_1 = __webpack_require__(32);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var hocUtils_1 = __webpack_require__(15);
+
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
   var config = Visualization.config;
   var themes = config.themes;
+
   var Wrapper = function Wrapper(props) {
     var _a, _b;
+
     var dataSources = props.dataSources,
-      loading = props.loading,
-      options = props.options,
-      height = props.height,
-      width = props.width;
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
     var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
     var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
     var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
     var iconColor = variables_1.default.contentColorActive(props);
+
     if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
       return React.createElement(IconPlaceholder_1.default, {
         "data-test": "icon-placeholder",
@@ -4033,14 +4547,17 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         iconColor: iconColor
       });
     }
+
     return React.createElement(Visualization, Object.assign({}, props));
   };
+
   (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withPlaceholder;
 
 /***/ }),
@@ -4075,11 +4592,13 @@ module.exports = require("@splunk/visualization-icons");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var i18n_1 = __webpack_require__(2);
+
 var background = function background(_ref) {
   var label = _ref.label,
-    themes = _ref.themes,
-    labelPosition = _ref.labelPosition;
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
   return [{
     label: (0, i18n_1._)(label || 'Background'),
     option: 'backgroundColor',
@@ -4090,6 +4609,7 @@ var background = function background(_ref) {
     }
   }];
 };
+
 exports.default = background;
 
 /***/ }),
@@ -4112,6 +4632,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
+
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -4131,6 +4652,7 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
+
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";
@@ -4166,6 +4688,13 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
+/***/ 83:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/utils/types");
+
+/***/ }),
+
 /***/ 9:
 /***/ (function(module, exports) {
 
@@ -4173,42 +4702,55 @@ module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 91:
+/***/ 92:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _defineProperty = __webpack_require__(7);
+
 var _slicedToArray = __webpack_require__(17);
+
 var _toConsumableArray = __webpack_require__(8);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatMetadata = exports.compareBaseStyles = exports.getScaledOpacities = exports.getGlobalLayerBoundaries = exports.isValidLatLon = exports.bakeBubbleData = exports.sanitizeValues = exports.transposeArray = exports.matchBubbleSize = exports.getStaticColors = exports.getZoomLevelFromGeobin = exports.getZoomConstraintsFromTileConfig = exports.getMapStyle = exports.getTilePreset = exports.LAYER_TYPE = exports.DEFAULT_OPACITY = exports.MAX_BUBBLE_RADIUS = exports.MIN_BUBBLE_RADIUS = exports.MAP_STYLE_VERSION_NUMBER = exports.DEFAULT_SERIES_COLORS = exports.DEFAULT_CLUSTER_COLOR = exports.DEFAULT_RESULT_LIMIT = exports.MIN_LONGITUDE = exports.MAX_LONGITUDE = exports.MIN_LATITUDE = exports.MAX_LATITUDE = void 0;
+
 var lodash_1 = __webpack_require__(3);
-var d3_scale_1 = __webpack_require__(92);
-var chroma = __webpack_require__(158);
+
+var d3_scale_1 = __webpack_require__(93);
+
+var chroma = __webpack_require__(159);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var visualization_color_palettes_1 = __webpack_require__(51);
-var types_1 = __webpack_require__(94);
+
+var types_1 = __webpack_require__(83);
+
 exports.MAX_LATITUDE = 90;
 exports.MIN_LATITUDE = -90;
 exports.MAX_LONGITUDE = 180;
 exports.MIN_LONGITUDE = -180;
 exports.DEFAULT_RESULT_LIMIT = 1000;
 exports.DEFAULT_CLUSTER_COLOR = '#909090';
-exports.DEFAULT_SERIES_COLORS = visualization_color_palettes_1.VIZ_CATEGORICAL;
-// MapLibre requires a map style specification number which is always 8
-exports.MAP_STYLE_VERSION_NUMBER = 8;
-// currently using one [min, max] value set for bubbles across all zoom levels
+exports.DEFAULT_SERIES_COLORS = visualization_color_palettes_1.VIZ_CATEGORICAL; // MapLibre requires a map style specification number which is always 8
+
+exports.MAP_STYLE_VERSION_NUMBER = 8; // currently using one [min, max] value set for bubbles across all zoom levels
 // TODO: design choices on [min, max] bubble size for different zoom levels
+
 exports.MIN_BUBBLE_RADIUS = 7.11; // 10px
+
 exports.MAX_BUBBLE_RADIUS = 45.26; // 85px
+
 exports.DEFAULT_OPACITY = 0.8;
 var LONGITUDE = 'longitude';
 var LATITUDE = 'latitude';
 var LAYER_TYPE;
+
 (function (LAYER_TYPE) {
   LAYER_TYPE["Marker"] = "marker";
   LAYER_TYPE["Bubble"] = "bubble";
@@ -4222,12 +4764,16 @@ var LAYER_TYPE;
  * @param {BaseTileConfig[]} args.customTileConfig
  * @returns {Object} tile preset
  */
+
+
 var getTilePreset = function getTilePreset(_ref) {
   var _ref$defaultTileConfi = _ref.defaultTileConfig,
-    defaultTileConfig = _ref$defaultTileConfi === void 0 ? [] : _ref$defaultTileConfi,
-    _ref$customTileConfig = _ref.customTileConfig,
-    customTileConfig = _ref$customTileConfig === void 0 ? [] : _ref$customTileConfig;
+      defaultTileConfig = _ref$defaultTileConfi === void 0 ? [] : _ref$defaultTileConfi,
+      _ref$customTileConfig = _ref.customTileConfig,
+      customTileConfig = _ref$customTileConfig === void 0 ? [] : _ref$customTileConfig;
+
   var _a, _b;
+
   var tilePreset = {};
   var defaultTileLight = {};
   var defaultTileDark = {};
@@ -4241,6 +4787,7 @@ var getTilePreset = function getTilePreset(_ref) {
     });
     tilePreset[key] = updatedConfig;
   });
+
   if (defaultTileConfig.length > 0) {
     defaultTileLight = (_a = defaultTileConfig.find(function (config) {
       return config.theme === 'light';
@@ -4253,12 +4800,14 @@ var getTilePreset = function getTilePreset(_ref) {
       return config.theme === undefined;
     });
   }
+
   return {
     tilePreset: tilePreset,
     defaultTileLight: defaultTileLight,
     defaultTileDark: defaultTileDark
   };
 };
+
 exports.getTilePreset = getTilePreset;
 /**
  * Check if baseLayerTileServer is in tilePreset and config matches current theme, if yes, return.
@@ -4273,20 +4822,22 @@ exports.getTilePreset = getTilePreset;
  * @param {BaseTileConfig} args.defaultTileLight
  * @returns {BaseTileConfig} mapStyle
  */
+
 var getMapStyle = function getMapStyle(_ref2) {
   var showBaseLayer = _ref2.showBaseLayer,
-    _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
-    baseLayerTileServer = _ref2$baseLayerTileSe === void 0 ? '' : _ref2$baseLayerTileSe,
-    _ref2$baseLayerTileSe2 = _ref2.baseLayerTileServerType,
-    baseLayerTileServerType = _ref2$baseLayerTileSe2 === void 0 ? '' : _ref2$baseLayerTileSe2,
-    _ref2$tilePreset = _ref2.tilePreset,
-    tilePreset = _ref2$tilePreset === void 0 ? {} : _ref2$tilePreset,
-    _ref2$colorScheme = _ref2.colorScheme,
-    colorScheme = _ref2$colorScheme === void 0 ? 'light' : _ref2$colorScheme,
-    _ref2$defaultTileLigh = _ref2.defaultTileLight,
-    defaultTileLight = _ref2$defaultTileLigh === void 0 ? {} : _ref2$defaultTileLigh,
-    _ref2$defaultTileDark = _ref2.defaultTileDark,
-    defaultTileDark = _ref2$defaultTileDark === void 0 ? {} : _ref2$defaultTileDark;
+      _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
+      baseLayerTileServer = _ref2$baseLayerTileSe === void 0 ? '' : _ref2$baseLayerTileSe,
+      _ref2$baseLayerTileSe2 = _ref2.baseLayerTileServerType,
+      baseLayerTileServerType = _ref2$baseLayerTileSe2 === void 0 ? '' : _ref2$baseLayerTileSe2,
+      _ref2$tilePreset = _ref2.tilePreset,
+      tilePreset = _ref2$tilePreset === void 0 ? {} : _ref2$tilePreset,
+      _ref2$colorScheme = _ref2.colorScheme,
+      colorScheme = _ref2$colorScheme === void 0 ? 'light' : _ref2$colorScheme,
+      _ref2$defaultTileLigh = _ref2.defaultTileLight,
+      defaultTileLight = _ref2$defaultTileLigh === void 0 ? {} : _ref2$defaultTileLigh,
+      _ref2$defaultTileDark = _ref2.defaultTileDark,
+      defaultTileDark = _ref2$defaultTileDark === void 0 ? {} : _ref2$defaultTileDark;
+
   if (!showBaseLayer) {
     return {
       version: exports.MAP_STYLE_VERSION_NUMBER,
@@ -4306,9 +4857,11 @@ var getMapStyle = function getMapStyle(_ref2) {
       }]
     };
   }
+
   if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === 'all')) {
     return tilePreset[baseLayerTileServer];
   }
+
   if (baseLayerTileServer && baseLayerTileServerType) {
     var tiles = [];
     /**
@@ -4316,6 +4869,7 @@ var getMapStyle = function getMapStyle(_ref2) {
      * Subdomains are used to help with browser parallel requests per domain limitation. These subdomains are typically single letters 'a', 'b' and 'c'
      * Refer to https://leafletjs.com/SlavaUkraini/reference.html#tilelayer and https://wiki.openstreetmap.org/wiki/Tile_servers
      */
+
     if (baseLayerTileServer.match(/^(https?):\/\/{(s|S)}\../)) {
       /**
        * sXML (Leaflet) allows users to define their own tile server URLs + list of available subdomains
@@ -4326,8 +4880,9 @@ var getMapStyle = function getMapStyle(_ref2) {
       tiles = [baseLayerTileServer.replace(/{(s|S)}/, 'a'), baseLayerTileServer.replace(/{(s|S)}/, 'b'), baseLayerTileServer.replace(/{(s|S)}/, 'c')];
     } else {
       tiles = [baseLayerTileServer];
-    }
-    // TODO: remove hardcoded style when we allow users to pass in layer style through Viz options
+    } // TODO: remove hardcoded style when we allow users to pass in layer style through Viz options
+
+
     var mapStyle = {
       version: exports.MAP_STYLE_VERSION_NUMBER,
       sources: {
@@ -4343,134 +4898,164 @@ var getMapStyle = function getMapStyle(_ref2) {
         source: 'base-tiles',
         minzoom: 0,
         maxzoom: 24 // https://maplibre.org/maplibre-gl-js-docs/api/map/
+
       }]
     };
-
     return mapStyle;
-  }
-  // if tile server is not present in the preset AND we can't construct a mapStyle, fall back on defaults
+  } // if tile server is not present in the preset AND we can't construct a mapStyle, fall back on defaults
+
+
   return colorScheme === 'light' ? defaultTileLight : defaultTileDark;
 };
+
 exports.getMapStyle = getMapStyle;
+
 var getZoomConstraintsFromTileConfig = function getZoomConstraintsFromTileConfig(tileConfig, baseLayerTileServer) {
   var sources = tileConfig.sources,
-    layers = tileConfig.layers;
-  var matchedBaseLayerTileServer = false;
-  // check sources for minzoom maxzoom first
+      layers = tileConfig.layers;
+  var matchedBaseLayerTileServer = false; // check sources for minzoom maxzoom first
+
   var sourceKeys = Object.keys(sources);
+
   for (var i = 0; i < sourceKeys.length; i += 1) {
     var _sources$sourceKeys$i = sources[sourceKeys[i]],
-      minzoom = _sources$sourceKeys$i.minzoom,
-      maxzoom = _sources$sourceKeys$i.maxzoom;
+        minzoom = _sources$sourceKeys$i.minzoom,
+        maxzoom = _sources$sourceKeys$i.maxzoom;
+
     if (baseLayerTileServer && sources[sourceKeys[i]].tiles.indexOf(baseLayerTileServer) !== -1) {
       matchedBaseLayerTileServer = true;
     }
+
     if ((baseLayerTileServer && matchedBaseLayerTileServer || !baseLayerTileServer) && (0, lodash_1.isNumber)(minzoom) && (0, lodash_1.isNumber)(maxzoom)) {
       return {
         minZoom: minzoom,
         maxZoom: maxzoom
       };
     }
-  }
-  // then check layers
+  } // then check layers
+
+
   for (var _i = 0; _i < layers.length; _i += 1) {
     var _layers$_i = layers[_i],
-      _minzoom = _layers$_i.minzoom,
-      _maxzoom = _layers$_i.maxzoom;
+        _minzoom = _layers$_i.minzoom,
+        _maxzoom = _layers$_i.maxzoom;
+
     if ((baseLayerTileServer && matchedBaseLayerTileServer || !baseLayerTileServer) && (0, lodash_1.isNumber)(_minzoom) && (0, lodash_1.isNumber)(_maxzoom)) {
       return {
         minZoom: _minzoom,
         maxZoom: _maxzoom
       };
     }
-  }
-  // Maplibre default - would reset previous min/maxZoom https://maplibre.org/maplibre-gl-js-docs/api/map/
+  } // Maplibre default - would reset previous min/maxZoom https://maplibre.org/maplibre-gl-js-docs/api/map/
+
+
   return {
     minZoom: 0,
     maxZoom: 24
   };
 };
+
 exports.getZoomConstraintsFromTileConfig = getZoomConstraintsFromTileConfig;
+
 var getZoomLevelFromGeobin = function getZoomLevelFromGeobin(geobinStr) {
   var _a;
+
   if (!geobinStr) {
     return null;
-  }
-  // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range
+  } // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range
+
+
   var geobinPattern = /bin_id_zl_([0-9]{0,2})?_y_/g;
   var match = geobinPattern.exec(geobinStr);
   return (_a = (match === null || match === void 0 ? void 0 : match.length) && parseInt(match[1], 10)) !== null && _a !== void 0 ? _a : null;
 };
-exports.getZoomLevelFromGeobin = getZoomLevelFromGeobin;
-// Bubble colors - static
+
+exports.getZoomLevelFromGeobin = getZoomLevelFromGeobin; // Bubble colors - static
+
 var getStaticColors = function getStaticColors(colorCount, colorArray) {
   if (colorCount < 0 || !colorCount) {
     return [exports.DEFAULT_CLUSTER_COLOR];
   }
+
   if (!colorArray || !colorArray.length) {
     return _toConsumableArray(Array(colorCount).keys()).map(function (i) {
       return exports.DEFAULT_SERIES_COLORS[i];
     });
-  }
-  // loop through colorArray to pick the first $colorCount colors
+  } // loop through colorArray to pick the first $colorCount colors
   // start from begining again if colorCount > colorArray.length
+
+
   return _toConsumableArray(Array(colorCount).keys()).map(function (i) {
     return (0, colorUtils_1.isColor)(colorArray[i % colorArray.length]) ? colorArray[i % colorArray.length] : exports.DEFAULT_CLUSTER_COLOR;
   });
 };
-exports.getStaticColors = getStaticColors;
-// Bubble size
+
+exports.getStaticColors = getStaticColors; // Bubble size
+
 var matchBubbleSize = function matchBubbleSize(dataRange, data) {
   var size = (0, d3_scale_1.scalePow)().exponent(0.2).domain(dataRange).range([exports.MIN_BUBBLE_RADIUS, exports.MAX_BUBBLE_RADIUS])(data);
+
   if (size > exports.MAX_BUBBLE_RADIUS) {
     return exports.MAX_BUBBLE_RADIUS;
   }
+
   if (size < exports.MIN_BUBBLE_RADIUS) {
     return exports.MIN_BUBBLE_RADIUS;
   }
+
   return size;
 };
+
 exports.matchBubbleSize = matchBubbleSize;
+
 var transposeArray = function transposeArray(array) {
   if (!array || !array.length || !array[0] || !array[0].length) {
     return [];
   }
+
   return array[0].map(function (_, i) {
     return array.map(function (row) {
       return row[i];
     });
   });
 };
-exports.transposeArray = transposeArray;
-// sanitize values: update all null, undefined, or negative values to 0
+
+exports.transposeArray = transposeArray; // sanitize values: update all null, undefined, or negative values to 0
+
 var sanitizeValues = function sanitizeValues(values) {
   // null / undefined
   if (!values) {
     return 0;
-  }
-  // number
+  } // number
+
+
   if (!Array.isArray(values)) {
     return values > 0 ? values : 0;
-  }
-  // array
+  } // array
+
+
   return values.map(function (arr) {
     return (0, exports.sanitizeValues)(arr);
   });
 };
+
 exports.sanitizeValues = sanitizeValues;
+
 var bakeBubbleData = function bakeBubbleData(layer) {
   var _a;
+
   if (!layer || !((_a = layer.bubbleSize) === null || _a === void 0 ? void 0 : _a.length) || !layer.geobin || !layer.geobin.length || !layer.latitude || !layer.latitude.length || !layer.longitude || !layer.longitude.length) {
     return null;
-  }
-  // if bubbleSize is passed as an array of single number array (data series)
+  } // if bubbleSize is passed as an array of single number array (data series)
   // e.g. [value0, value1, ...]
   // format each value as an array to unify data operations for data series and frames
+
+
   var sanitizedBubbleSize = (0, exports.sanitizeValues)(layer.bubbleSize);
   var transposedBubbleSize;
   var transposedSanitizedBubbleSize;
-  var isPie = false;
-  // format array if bubbleSize is passed as an array of array (data frame)
+  var isPie = false; // format array if bubbleSize is passed as an array of array (data frame)
+
   if (Array.isArray(layer.bubbleSize[0])) {
     // one-time array transpose,
     // e.g. from [column0data, column0data] (multi series)
@@ -4480,8 +5065,8 @@ var bakeBubbleData = function bakeBubbleData(layer) {
     // for easy access of values at each geo location,
     // and min max pie size computation
     transposedBubbleSize = (0, exports.transposeArray)(layer.bubbleSize);
-    transposedSanitizedBubbleSize = (0, exports.transposeArray)(sanitizedBubbleSize);
-    // if multiple series in the dataframe, set isPie to true
+    transposedSanitizedBubbleSize = (0, exports.transposeArray)(sanitizedBubbleSize); // if multiple series in the dataframe, set isPie to true
+
     if (layer.bubbleSize.length > 1) {
       isPie = true;
     }
@@ -4493,9 +5078,11 @@ var bakeBubbleData = function bakeBubbleData(layer) {
       return [n];
     });
   }
+
   if (!transposedBubbleSize || !transposedBubbleSize.length) {
     return null;
   }
+
   var data = layer.latitude.map(function (lat, i) {
     return {
       zoom: (0, exports.getZoomLevelFromGeobin)(layer.geobin[i]),
@@ -4506,8 +5093,8 @@ var bakeBubbleData = function bakeBubbleData(layer) {
     };
   }).filter(function (d) {
     return Boolean(d.values);
-  });
-  // compute the min/max value to encode min/max pie or bubble size
+  }); // compute the min/max value to encode min/max pie or bubble size
+
   var min = (0, lodash_1.sum)(transposedSanitizedBubbleSize[0]);
   var max = (0, lodash_1.sum)(transposedSanitizedBubbleSize[1]);
   transposedSanitizedBubbleSize.forEach(function (row) {
@@ -4523,22 +5110,29 @@ var bakeBubbleData = function bakeBubbleData(layer) {
     bubbleSizeFields: layer.bubbleSizeFields
   };
 };
+
 exports.bakeBubbleData = bakeBubbleData;
+
 var isValidLatLon = function isValidLatLon(latlon) {
   if (!latlon || !Array.isArray(latlon) || latlon.length !== 2) {
     return false;
   }
+
   var _latlon = _slicedToArray(latlon, 2),
-    lat = _latlon[0],
-    lon = _latlon[1];
+      lat = _latlon[0],
+      lon = _latlon[1];
+
   if (!(0, types_1.isNumber)(lat) || !(lat >= exports.MIN_LATITUDE && lat <= exports.MAX_LATITUDE)) {
     return false;
   }
+
   if (!(0, types_1.isNumber)(lon) || !(lon >= exports.MIN_LONGITUDE && lon <= exports.MAX_LONGITUDE)) {
     return false;
   }
+
   return true;
 };
+
 exports.isValidLatLon = isValidLatLon;
 /**
  * Returns a list of all lat or lon coordinates used in a specified layer
@@ -4546,10 +5140,12 @@ exports.isValidLatLon = isValidLatLon;
  * @param {string} field
  * @returns {number[]} list of lat coordinates or lon coordinates
  */
+
 var getLatOrLonCoordinates = function getLatOrLonCoordinates(layer, field) {
   var getClusterValues = function getClusterValues(clusterLayer) {
     return (0, lodash_1.get)(clusterLayer, field, []).slice(0, clusterLayer.type === LAYER_TYPE.Marker && clusterLayer.resultLimit ? clusterLayer.resultLimit : exports.DEFAULT_RESULT_LIMIT);
   };
+
   var getChoroplethValues = function getChoroplethValues(choroplethLayer) {
     var slicedGeomList = choroplethLayer.geom.slice(0, choroplethLayer.resultLimit);
     var flatCoordinates = slicedGeomList.flatMap(function (geomObject) {
@@ -4559,6 +5155,7 @@ var getLatOrLonCoordinates = function getLatOrLonCoordinates(layer, field) {
       return coord[field === LONGITUDE ? 0 : 1];
     });
   };
+
   return layer.type === LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
 };
 /**
@@ -4566,25 +5163,32 @@ var getLatOrLonCoordinates = function getLatOrLonCoordinates(layer, field) {
  * @param {LayerType[]} layers
  * @returns {LngLatBoundsLike}
  */
+
+
 var getGlobalLayerBoundaries = function getGlobalLayerBoundaries(layers) {
   var isLayerValid = function isLayerValid(field) {
     return layers.every(function (layer) {
       return layer[field] || layer.geom;
     });
   };
+
   var getDefaultMax = function getDefaultMax(field) {
     return field === LONGITUDE ? exports.MAX_LONGITUDE : exports.MAX_LATITUDE;
   };
+
   var getDefaultMin = function getDefaultMin(field) {
     return field === LONGITUDE ? exports.MIN_LONGITUDE : exports.MIN_LATITUDE;
   };
+
   if (!layers || !Array.isArray(layers) || !layers.length) {
     return null;
   }
+
   var getMin = function getMin(field) {
     if (!isLayerValid(field)) {
       return getDefaultMin(field);
     }
+
     return layers.reduce(function (prevVal, layer) {
       var coordinatesNumArr = getLatOrLonCoordinates(layer, field).map(function (x) {
         return +x;
@@ -4592,32 +5196,41 @@ var getGlobalLayerBoundaries = function getGlobalLayerBoundaries(layers) {
       return (0, lodash_1.min)([prevVal].concat(_toConsumableArray(coordinatesNumArr)));
     }, getDefaultMax(field));
   };
+
   var getMax = function getMax(field) {
     if (!isLayerValid(field)) {
       return getDefaultMax(field);
     }
+
     return layers.reduce(function (prevVal, layer) {
       var coordinatesNumArr = getLatOrLonCoordinates(layer, field).map(Number);
       return (0, lodash_1.max)([prevVal].concat(_toConsumableArray(coordinatesNumArr)));
     }, getDefaultMin(field));
   };
+
   return [[getMin(LONGITUDE), getMin(LATITUDE)], [getMax(LONGITUDE), getMax(LATITUDE)]];
 };
+
 exports.getGlobalLayerBoundaries = getGlobalLayerBoundaries;
+
 var getScaledOpacities = function getScaledOpacities(colors, cfgOpacity) {
   // extract opacity information from 8 digit hex codes
   var opacities = colors === null || colors === void 0 ? void 0 : colors.map(function (color) {
     var _a;
+
     return (color === null || color === void 0 ? void 0 : color.length) === 9 ? (_a = chroma(color).alpha()) !== null && _a !== void 0 ? _a : 1 : 1;
-  });
-  // opacity cannot be greater than configured opacity
+  }); // opacity cannot be greater than configured opacity
+
   return opacities === null || opacities === void 0 ? void 0 : opacities.map(function (opacity) {
     return opacity * cfgOpacity;
   });
 };
+
 exports.getScaledOpacities = getScaledOpacities;
+
 var compareBaseStyles = function compareBaseStyles(curr, next) {
   var _a, _b, _c, _d;
+
   var currBaseLayer = (_a = curr === null || curr === void 0 ? void 0 : curr.layers) === null || _a === void 0 ? void 0 : _a.find(function (layer) {
     return (layer === null || layer === void 0 ? void 0 : layer.id) === 'base-layer';
   });
@@ -4626,12 +5239,16 @@ var compareBaseStyles = function compareBaseStyles(curr, next) {
   });
   var currBaseSource = (0, lodash_1.get)(curr === null || curr === void 0 ? void 0 : curr.sources, (_c = currBaseLayer === null || currBaseLayer === void 0 ? void 0 : currBaseLayer.source) !== null && _c !== void 0 ? _c : '');
   var nextBaseSource = (0, lodash_1.get)(next === null || next === void 0 ? void 0 : next.sources, (_d = nextBaseLayer === null || nextBaseLayer === void 0 ? void 0 : nextBaseLayer.source) !== null && _d !== void 0 ? _d : '');
+
   if (!currBaseLayer || !nextBaseLayer || !currBaseSource || !nextBaseSource) {
     return false;
   }
+
   return (0, lodash_1.isEqual)(currBaseLayer, nextBaseLayer) && (0, lodash_1.isEqual)(currBaseSource, nextBaseSource);
 };
+
 exports.compareBaseStyles = compareBaseStyles;
+
 var formatMetadata = function formatMetadata(choroplethLayer, i) {
   if (!choroplethLayer || !choroplethLayer.areaIds || !choroplethLayer.areaValues) return {};
   if (i >= choroplethLayer.areaIds.length) return {};
@@ -4648,22 +5265,16 @@ var formatMetadata = function formatMetadata(choroplethLayer, i) {
     return Object.assign(Object.assign({}, result), _defineProperty({}, key, val));
   }, base);
 };
+
 exports.formatMetadata = formatMetadata;
 
 /***/ }),
 
-/***/ 92:
+/***/ 93:
 /***/ (function(module, exports) {
 
 module.exports = require("d3-scale");
 
-/***/ }),
-
-/***/ 94:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-encoding/utils/types");
-
 /***/ })
 
 /******/ });