@splunk/visualizations 26.2.1 → 26.4.0

package/Map.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 432);
+/******/ 	return __webpack_require__(__webpack_require__.s = 420);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,25 +95,25 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
 
-/***/ 106:
+/***/ 103:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/utils/types");
@@ -123,38 +123,54 @@ module.exports = require("@splunk/visualization-encoding/utils/types");
 /***/ 11:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@splunk/visualizations-shared/Message");
+
+/***/ }),
+
+/***/ 112:
+/***/ (function(module, exports) {
+
+module.exports = require("d3-scale");
 
 /***/ }),
 
-/***/ 115:
+/***/ 117:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Button");
+
+/***/ }),
+
+/***/ 119:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(9);
+var _defineProperty = __webpack_require__(12);
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(6);
 
 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;
+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.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 lodash_1 = __webpack_require__(2);
 
-var d3_scale_1 = __webpack_require__(116);
+var d3_scale_1 = __webpack_require__(112);
 
-var chroma = __webpack_require__(181);
+var chroma = __webpack_require__(176);
 
 var colorUtils_1 = __webpack_require__(15);
 
-var visualization_color_palettes_1 = __webpack_require__(73);
+var visualization_color_palettes_1 = __webpack_require__(74);
+
+var types_1 = __webpack_require__(103);
 
-var types_1 = __webpack_require__(106);
+var visualization_schemas_1 = __webpack_require__(9);
 
 exports.MAX_LATITUDE = 90;
 exports.MIN_LATITUDE = -90;
@@ -174,13 +190,6 @@ 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";
-  LAYER_TYPE["Choropleth"] = "choropleth";
-})(LAYER_TYPE = exports.LAYER_TYPE || (exports.LAYER_TYPE = {}));
 /**
  * Construct a tile preset {key: config} by combining the default + custom tile configs
  * Also returns the default tile config for each theme - light/dark
@@ -190,7 +199,6 @@ var LAYER_TYPE;
  * @returns {Object} tile preset
  */
 
-
 var getTilePreset = function getTilePreset(_ref) {
   var _ref$defaultTileConfi = _ref.defaultTileConfig,
       defaultTileConfig = _ref$defaultTileConfi === void 0 ? [] : _ref$defaultTileConfi,
@@ -568,7 +576,7 @@ exports.isValidLatLon = isValidLatLon;
 
 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);
+    return (0, lodash_1.get)(clusterLayer, field, []).slice(0, clusterLayer.type === visualization_schemas_1.LAYER_TYPE.Marker && clusterLayer.resultLimit ? clusterLayer.resultLimit : exports.DEFAULT_RESULT_LIMIT);
   };
 
   var getChoroplethValues = function getChoroplethValues(choroplethLayer) {
@@ -581,7 +589,7 @@ var getLatOrLonCoordinates = function getLatOrLonCoordinates(layer, field) {
     });
   };
 
-  return layer.type === LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
+  return layer.type === visualization_schemas_1.LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
 };
 /**
  * Returns the min and max LongLat pairs to determine the layer boundaries to fit all markers/bubbles
@@ -695,17 +703,10 @@ exports.formatMetadata = formatMetadata;
 
 /***/ }),
 
-/***/ 116:
-/***/ (function(module, exports) {
-
-module.exports = require("d3-scale");
-
-/***/ }),
-
 /***/ 12:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
@@ -727,9 +728,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
 
-var numberUtils_1 = __webpack_require__(11);
+var numberUtils_1 = __webpack_require__(10);
 
-var interfaces_1 = __webpack_require__(40); // TODO: utilize this fn in ParallelCoordinates
+var interfaces_1 = __webpack_require__(39); // TODO: utilize this fn in ParallelCoordinates
 
 
 var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
@@ -864,19 +865,21 @@ var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, thr
  */
 
 
-var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
-  // Splunk charting allows for numbers in formats such as negative hex that
+var strictlyCoerceYColumn = function strictlyCoerceYColumn(column, options) {
+  var isNullCoercionEnabled = options.nullValueDisplay === 'zero'; // Splunk charting allows for numbers in formats such as negative hex that
   // Number() does not support and also allows loose coercion of hex numbers (but not other formats)
   // We want to identify columns which contain at least one value that can be loosely coerced
+
   var canLooselyCoerceSomeValues = column.findIndex(function (value) {
-    return (0, numberUtils_1.startsWithNumber)("".concat(value));
+    return (0, numberUtils_1.startsWithNumber)("".concat(value)) || isNullCoercionEnabled && value === null;
   }) >= 0; // If not all values in column can be strictly coerced to a number, we do not downsample
 
   var coercedColumn = [];
   var canDownsampleColumn = !column.some(function (value) {
-    var coercedValue = Number(value); // if it can't be parsed or isn't safe, fail
+    var coercedValue = Number(value);
+    var coerceValueToZero = isNullCoercionEnabled && value === null; // if it can't be parsed or isn't safe, fail
 
-    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number') {
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number' && !coerceValueToZero) {
       return true;
     } // save value and continue to next
 
@@ -957,8 +960,7 @@ var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_re
       dataSources = _ref3.dataSources,
       selectChartEvent = _ref3.selectChartEvent,
       width = _ref3.width,
-      xField = _ref3.xField,
-      y2Fields = _ref3.y2Fields;
+      xField = _ref3.xField;
 
   var _a, _b, _c;
 
@@ -995,14 +997,7 @@ var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_re
     });
     var lastIndex = fullSeries.findIndex(function (x) {
       return downsampledSeries[endXIndex] === x;
-    }); // For charts with categorical x-axis (charts with an xField that isn't _time), do not support
-    // re-calculating downsampling threshold if the chart is zoomed in until SPL-259458 is fixed
-    // Also do not support re-calculating downsampling threshold for zoomed-in charts with y2
-    // until SPL-259611 is fixed
-
-    if (xField !== '_time' || (y2Fields === null || y2Fields === void 0 ? void 0 : y2Fields.length)) {
-      return firstIndex === 0 && lastIndex === fullSeries.length - 1 ? width : null;
-    }
+    });
 
     if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
       return (0, exports.calculateThresholdOnRangeSelect)({
@@ -1013,6 +1008,7 @@ var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_re
       });
     }
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.error('Error occurred while setting downsample threshold on range select event', e);
   }
 
@@ -1051,7 +1047,7 @@ var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fie
  */
 
 
-var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes) {
+var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes, options) {
   var xColumn = [];
   var yColumns = [];
   var canDownsample = !ds.data.fields.some(function (field, index) {
@@ -1065,7 +1061,7 @@ var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, x
     if (fieldName === xField) {
       xColumn = strictlyCoerceXColumn(column, fieldType);
     } else if (yFields.has(fieldName)) {
-      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index]),
+      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index], options),
           coercedColumn = _strictlyCoerceYColum.coercedColumn,
           canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
           canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
@@ -1155,7 +1151,7 @@ var downsampleDataSources = function downsampleDataSources(_ref4) {
     return dataSources;
   }
 
-  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
+  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes, options),
       xColumn = _tryToCoerceAllDispla.xColumn,
       yColumns = _tryToCoerceAllDispla.yColumns;
 
@@ -1179,6 +1175,7 @@ var downsampleDataSources = function downsampleDataSources(_ref4) {
         return downsampledIndices.add(downsampleIndex);
       });
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error("Error occurred while downsampling column ".concat(columnIndex), e);
     }
   }); // update data columns with downsampled columns
@@ -1191,26 +1188,19 @@ exports.downsampleDataSources = downsampleDataSources;
 
 /***/ }),
 
-/***/ 15:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorUtils");
-
-/***/ }),
-
-/***/ 153:
+/***/ 149:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
-var _defineProperty = __webpack_require__(9);
+var _defineProperty = __webpack_require__(12);
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(6);
 
-var _taggedTemplateLiteral = __webpack_require__(81);
+var _taggedTemplateLiteral = __webpack_require__(78);
 
 var _templateObject;
 
@@ -1219,17 +1209,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Bubble = exports.PieSegment = exports.GEO_LAT_AND_LONG_FIELD = exports.GEO_BOUND_PREFIX = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
 var colorUtils_1 = __webpack_require__(15);
 
-var MapUtils_1 = __webpack_require__(115);
+var MapUtils_1 = __webpack_require__(119);
 
-var MarkerWrapper_1 = __webpack_require__(154);
+var MarkerWrapper_1 = __webpack_require__(150);
 
 exports.GEO_BOUND_PREFIX = '_geo_bounds_';
 exports.GEO_LAT_AND_LONG_FIELD = ['_geo_long_field', '_geo_lat_field'];
@@ -1470,13 +1460,20 @@ exports.default = BubbleLayer;
 
 /***/ }),
 
-/***/ 154:
+/***/ 15:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+
+/***/ 150:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -1495,11 +1492,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var maplibre_gl_1 = __webpack_require__(182);
+var maplibre_gl_1 = __webpack_require__(177);
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var Tooltip_1 = __webpack_require__(438);
+var Tooltip_1 = __webpack_require__(426);
 
 var MarkerWrapper = function MarkerWrapper(_a) {
   var longitude = _a.longitude,
@@ -1584,7 +1581,7 @@ exports.default = MarkerWrapper;
 
 /***/ }),
 
-/***/ 155:
+/***/ 151:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/utils/dsl");
@@ -1604,13 +1601,13 @@ module.exports = require("@splunk/visualization-encoding/Options");
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
@@ -1618,7 +1615,7 @@ var style_1 = __webpack_require__(18);
 
 var colorUtils_1 = __webpack_require__(15);
 
-var SizeAwareWrapper_1 = __webpack_require__(26);
+var SizeAwareWrapper_1 = __webpack_require__(25);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -1689,7 +1686,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.2.1 - 714383dbb",
+      "data-splunk-visualization-version": "26.4.0 - 04078274d",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -1711,47 +1708,40 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 18:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
-
-/***/ }),
-
-/***/ 181:
+/***/ 176:
 /***/ (function(module, exports) {
 
 module.exports = require("chroma-js");
 
 /***/ }),
 
-/***/ 182:
+/***/ 177:
 /***/ (function(module, exports) {
 
 module.exports = require("maplibre-gl");
 
 /***/ }),
 
-/***/ 183:
+/***/ 178:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Choropleth = exports.cleanupChoropleth = exports.compareChoropleth = exports.compareGeom = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var MapUtils_1 = __webpack_require__(115);
+var MapUtils_1 = __webpack_require__(119);
 
-var MarkerWrapper_1 = __webpack_require__(154);
+var MarkerWrapper_1 = __webpack_require__(150);
 
 var getShapeId = function getShapeId(id) {
   return "shape-".concat(id);
@@ -1871,7 +1861,8 @@ exports.Choropleth = React.memo(function (_ref) {
         'fill-opacity': opacity,
         'fill-color': color
       }
-    });
+    }); // needs to add a second layer to adjust the thickness of the line
+    // see https://github.com/mapbox/mapbox-gl-js/issues/3018
 
     if (strokeColor !== 'transparent') {
       map.current.addLayer({
@@ -2005,7 +1996,21 @@ exports.default = ChoroplethLayer;
 
 /***/ }),
 
-/***/ 19:
+/***/ 18:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/style");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 20:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2014,29 +2019,21 @@ exports.default = ChoroplethLayer;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validOutputModes = exports.validSortDirs = void 0;
 exports.validSortDirs = ['asc', 'desc', 'none'];
-exports.validSegmentationModes = ['none', 'inner'];
 exports.validOutputModes = ['json_cols', 'json'];
 
 /***/ }),
 
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-
 /***/ 21:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(8);
 
-var _createClass = __webpack_require__(25);
+var _createClass = __webpack_require__(24);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2131,123 +2128,41 @@ exports.extendStaticWrapperProps = extendStaticWrapperProps;
 /***/ 24:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
-
-/***/ }),
-
-/***/ 25:
-/***/ (function(module, exports) {
-
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 26:
+/***/ 25:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 27:
+/***/ 26:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
-
-var _defineProperty = __webpack_require__(9);
-
-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;
-};
+var _toConsumableArray = __webpack_require__(6);
 
 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__(24);
-
-var VizBehavior_1 = __webpack_require__(6);
+exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceConfig = exports.enhanceOptionsSchemaWithDynamicOptions = void 0;
 
-var dynamicOptionsDSLType = {
-  type: 'string',
-  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
-};
-/**
- * Helper function to extend an options schema with dynamic options DSL
- * @param optionsSchema a visualization's options schema
- * @returns an updated options schema that additionally allows strings starting with > for each option
- */
+var lodash_1 = __webpack_require__(2); // included for backwards compatibility
 
-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"]);
-
-    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
-      title: title
-    }), description !== undefined && {
-      description: description
-    }), readOnly !== undefined && {
-      readOnly: readOnly
-    }), writeOnly !== undefined && {
-      writeOnly: writeOnly
-    }), examples !== undefined && {
-      examples: examples
-    }), 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)
-      });
+var visualization_schemas_1 = __webpack_require__(9);
 
-      if (patternProperties) {
-        var enhancedPatternProperties = {};
-        Object.keys(patternProperties).forEach(function (opt) {
-          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
-        });
-        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
-      }
-    } else {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
-        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
-          type: type
-        }), remainingSchemaEntry), dynamicOptionsDSLType]
-      });
-    }
-  });
-  return enhancedOptionsSchema;
-}
-
-exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
+Object.defineProperty(exports, "enhanceOptionsSchemaWithDynamicOptions", {
+  enumerable: true,
+  get: function get() {
+    return visualization_schemas_1.enhanceOptionsSchemaWithDynamicOptions;
+  }
+});
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
  * this function also collapse all editor panels
@@ -2258,11 +2173,6 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
 
 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
@@ -2386,7 +2296,7 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 28:
+/***/ 27:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlagContext");
@@ -2396,25 +2306,25 @@ module.exports = require("@splunk/visualization-context/FeatureFlagContext");
 /***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 31:
+/***/ 30:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 32:
+/***/ 31:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 33:
+/***/ 32:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2424,7 +2334,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
 function usePrevious(value) {
   var ref = (0, react_1.useRef)();
@@ -2438,21 +2348,21 @@ exports.default = usePrevious;
 
 /***/ }),
 
-/***/ 34:
+/***/ 33:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 35:
+/***/ 34:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
-/***/ 37:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2463,15 +2373,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(12);
+var Message_1 = __webpack_require__(11);
 
 var FixedSizeContainer_1 = __webpack_require__(17);
 /**
@@ -2545,24 +2455,24 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
-/***/ 38:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(9);
+var _defineProperty = __webpack_require__(12);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var DataSource_1 = __webpack_require__(19);
+var DataSource_1 = __webpack_require__(20);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -2616,7 +2526,7 @@ exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 39:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2627,9 +2537,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
@@ -2681,14 +2591,7 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 40:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2723,11 +2626,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+__exportStar(__webpack_require__(40), exports);
+
 __exportStar(__webpack_require__(41), exports);
 
-__exportStar(__webpack_require__(42), exports);
+__exportStar(__webpack_require__(20), exports);
 
-__exportStar(__webpack_require__(19), exports);
+__exportStar(__webpack_require__(42), exports);
 
 __exportStar(__webpack_require__(43), exports);
 
@@ -2739,16 +2644,16 @@ __exportStar(__webpack_require__(46), exports);
 
 __exportStar(__webpack_require__(47), exports);
 
-__exportStar(__webpack_require__(48), exports);
-
-__exportStar(__webpack_require__(49), exports);
-
 __exportStar(__webpack_require__(21), exports);
 
-__exportStar(__webpack_require__(6), exports);
+__exportStar(__webpack_require__(7), exports);
 
 __exportStar(__webpack_require__(22), exports);
 
+__exportStar(__webpack_require__(48), exports);
+
+__exportStar(__webpack_require__(49), exports);
+
 __exportStar(__webpack_require__(50), exports);
 
 __exportStar(__webpack_require__(51), exports);
@@ -2757,13 +2662,16 @@ __exportStar(__webpack_require__(52), exports);
 
 __exportStar(__webpack_require__(53), exports);
 
-__exportStar(__webpack_require__(54), exports);
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
 
-__exportStar(__webpack_require__(55), exports);
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 41:
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2775,7 +2683,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 42:
+/***/ 41:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2790,7 +2698,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 43:
+/***/ 42:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2802,7 +2710,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 432:
+/***/ 420:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2827,27 +2735,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.PureMap = exports.config = exports.themes = exports.useIconPlaceholder = exports.computeVizProps = void 0;
 /* eslint-disable no-sequences */
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var colorUtils_1 = __webpack_require__(15);
 
-var hocUtils_1 = __webpack_require__(34);
+var hocUtils_1 = __webpack_require__(33);
 
-var JSONSchemaUtils_1 = __webpack_require__(35);
+var JSONSchemaUtils_1 = __webpack_require__(34);
 
-var PureMap_1 = __webpack_require__(433);
+var PureMap_1 = __webpack_require__(421);
 
 exports.PureMap = PureMap_1.default;
 
-var config_1 = __webpack_require__(443);
+var config_1 = __webpack_require__(431);
 
 exports.config = config_1.default;
 
-var withDashboardViz_1 = __webpack_require__(56);
+var withDashboardViz_1 = __webpack_require__(54);
 
-var mapUtils_1 = __webpack_require__(444);
+var mapUtils_1 = __webpack_require__(432);
 
-var BubbleLayer_1 = __webpack_require__(153);
+var BubbleLayer_1 = __webpack_require__(149);
 
 var dataUtils_1 = __webpack_require__(14);
 
@@ -3069,44 +2977,54 @@ exports.default = Map;
 
 /***/ }),
 
-/***/ 433:
+/***/ 421:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
+
+var _taggedTemplateLiteral = __webpack_require__(78);
+
+var _templateObject;
 
 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__(0);
+var React = __webpack_require__(1);
+
+var styled_components_1 = __webpack_require__(4);
+
+var lodash_1 = __webpack_require__(2);
 
-var lodash_1 = __webpack_require__(3);
+var react_1 = __webpack_require__(1);
 
-var react_1 = __webpack_require__(0);
+var T = __webpack_require__(0);
 
-var T = __webpack_require__(1);
+var chroma = __webpack_require__(176);
 
-var chroma = __webpack_require__(181);
+var maplibre_gl_1 = __webpack_require__(177);
 
-var maplibre_gl_1 = __webpack_require__(182);
+var i18n_1 = __webpack_require__(3);
 
-var i18n_1 = __webpack_require__(2);
+var Button_1 = __webpack_require__(117);
 
-var MapContext_1 = __webpack_require__(434);
+var MapContext_1 = __webpack_require__(422);
 
-var PureMapContainer_1 = __webpack_require__(435);
+var visualization_schemas_1 = __webpack_require__(9);
 
-var MapUtils_1 = __webpack_require__(115);
+var PureMapContainer_1 = __webpack_require__(423);
 
-var ClusterLayer_1 = __webpack_require__(437);
+var MapUtils_1 = __webpack_require__(119);
 
-var ChoroplethLayer_1 = __webpack_require__(183);
+var ClusterLayer_1 = __webpack_require__(425);
 
-var LocalChoroplethLayer_1 = __webpack_require__(440);
+var ChoroplethLayer_1 = __webpack_require__(178);
+
+var LocalChoroplethLayer_1 = __webpack_require__(428);
 
 exports.DEFAULT_CENTER = [0, 0];
 exports.DEFAULT_CONTROL_BACKGROUND_COLOR = '#2b3033';
@@ -3126,6 +3044,15 @@ var formatColor = function formatColor(color) {
 };
 
 exports.formatColor = formatColor;
+var StyledFitToDataButton = (0, styled_components_1.default)(Button_1.default).attrs({
+  'data-test': 'fit-to-data-button'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 115px;\n    left: 16px;\n    z-index: 3;\n    width: 40px !important;\n    height: 40px;\n    border-radius: 4px;\n    border: none;\n    box-shadow: 0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32),\n        0px 3px 6px rgba(0, 0, 0, 0.3) !important;\n    background-color: ", " !important;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"", "\" stroke-width=\"2\" stroke-linecap=\"round\"/><path d=\"M12 3.5V6.5M12 20.5V17.5M3.5 12H6.5M20.5 12H17.5\" stroke=\"", "\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>');\n"])), function (props) {
+  return props.controlBackgroundColor;
+}, function (props) {
+  return props.controlIconColorEncoded.color;
+}, function (props) {
+  return props.controlIconColorEncoded.color;
+});
 PureMapContainer_1.default.displayName = 'PureMapContainer';
 
 var PureMap = function PureMap(props) {
@@ -3148,7 +3075,6 @@ var PureMap = function PureMap(props) {
       onMapLoad = props.onMapLoad,
       onMapClick = props.onMapClick,
       onOptionsChange = props.onOptionsChange,
-      mode = props.mode,
       title = props.title;
 
   var _ref = (0, react_1.useContext)(MapContext_1.default),
@@ -3159,6 +3085,7 @@ var PureMap = function PureMap(props) {
   var map = (0, react_1.useRef)(null);
   var scaleControl = (0, react_1.useRef)(null);
   var zoomControl = (0, react_1.useRef)(null);
+  var fitToDataButtonClickedRef = (0, react_1.useRef)(false);
 
   var _ref2 = (0, react_1.useMemo)(function () {
     return (0, MapUtils_1.getTilePreset)({
@@ -3234,31 +3161,35 @@ var PureMap = function PureMap(props) {
   };
 
   var onOptionsChangeProxy = (0, react_1.useCallback)(function (e) {
-    if (mode === 'edit') {
-      onOptionsChange(e);
-    }
-  }, [onOptionsChange, mode]);
+    onOptionsChange(e);
+  }, [onOptionsChange]);
   var fitMapToContent = (0, react_1.useCallback)(function () {
     var lngLatBounds = (0, MapUtils_1.getGlobalLayerBoundaries)([layers[0]]);
     map.current.fitBounds(lngLatBounds, {
       padding: MapUtils_1.MAX_BUBBLE_RADIUS + 5,
       animate: false
+    }, {
+      triggeredFromFitBounds: true
     });
   }, [layers]);
-  var initializeMap = (0, react_1.useCallback)(function (mapStyle) {
-    var addZoomEndEventListener = function addZoomEndEventListener() {
-      // register event listener - zoom
-      map.current.on('zoomend', function () {
-        var mapZoomLevel = map.current.getZoom();
+  var addZoomEndEventListener = (0, react_1.useCallback)(function () {
+    // register event listener - zoom
+    map.current.on('zoomend', function (event) {
+      var mapZoomLevel = map.current.getZoom();
 
-        if (mapZoomLevel < mapMinZoomRef.current) {
-          setMapMinZoom(mapZoomLevel);
-        }
+      if (mapZoomLevel < mapMinZoomRef.current) {
+        setMapMinZoom(mapZoomLevel);
+      } // @ts-ignore
 
-        setCurrentZoomLevel(mapZoomLevel);
-      });
-    };
 
+      if (event === null || event === void 0 ? void 0 : event.triggeredFromFitBounds) {
+        return;
+      }
+
+      setCurrentZoomLevel(mapZoomLevel);
+    });
+  }, []);
+  var initializeMap = (0, react_1.useCallback)(function (mapStyle) {
     map.current = new maplibre_gl_1.Map(Object.assign({
       container: basemapContainer.current,
       preserveDrawingBuffer: true,
@@ -3401,6 +3332,10 @@ var PureMap = function PureMap(props) {
   }, [showBaseLayer, tilePreset, initializeMap, initializeScale, updateScale, defaultTileLight, defaultTileDark, baseLayerTileServer, baseLayerTileServerType, themeColorScheme]);
   (0, react_1.useEffect)(function () {
     if (map.current) {
+      if (fitToDataButtonClickedRef.current) {
+        return;
+      }
+
       map.current.flyTo({
         center: lngLatCenter,
         // Make sure we are not flying to a zoom value smaller than the mapMinZoom
@@ -3418,9 +3353,26 @@ var PureMap = function PureMap(props) {
   }, []);
 
   var _layers = _slicedToArray(layers, 1),
-      layer = _layers[0];
+      layer = _layers[0]; // when datasource changes or fit to data button clicked, we want to auto zoom if zoom is undefined
 
-  return React.createElement(React.Fragment, null, React.createElement(PureMapContainer_1.default, {
+
+  (0, react_1.useEffect)(function () {
+    if (isMapLoaded && layer && zoom === undefined && center === undefined) {
+      fitMapToContent();
+      fitToDataButtonClickedRef.current = false;
+    }
+  }, [layer === null || layer === void 0 ? void 0 : layer.resultLimit, layer === null || layer === void 0 ? void 0 : layer.latitude, layer === null || layer === void 0 ? void 0 : layer.longitude, layer === null || layer === void 0 ? void 0 : layer.areaIds, zoom, center]);
+  var showResetButton = (0, react_1.useCallback)(function () {
+    return center !== undefined || zoom !== undefined;
+  }, [center, zoom]);
+  var handleResetClick = (0, react_1.useCallback)(function () {
+    fitToDataButtonClickedRef.current = true;
+    onOptionsChangeProxy({
+      center: undefined,
+      zoom: undefined
+    });
+  }, [onOptionsChangeProxy]);
+  return React.createElement(PureMapContainer_1.default, {
     "aria-label": title || (0, i18n_1._)('Map'),
     className: "puremap",
     width: width,
@@ -3432,13 +3384,19 @@ var PureMap = function PureMap(props) {
     ref: basemapContainer,
     showScale: showScale,
     showZoomControls: showZoomControls
-  }, isMapLoaded && layer && (layer.type === MapUtils_1.LAYER_TYPE.Bubble || layer.type === MapUtils_1.LAYER_TYPE.Marker) && React.createElement(ClusterLayer_1.default, {
+  }, showResetButton() && React.createElement(StyledFitToDataButton, {
+    onClick: handleResetClick,
+    title: (0, i18n_1._)('Fit to data'),
+    controlBackgroundColor: controlBackgroundColor,
+    controlForegroundColor: controlForegroundColor,
+    controlIconColorEncoded: (0, exports.formatColor)(controlForegroundColor)
+  }), isMapLoaded && layer && (layer.type === visualization_schemas_1.LAYER_TYPE.Bubble || layer.type === visualization_schemas_1.LAYER_TYPE.Marker) && React.createElement(ClusterLayer_1.default, {
     clusterLayer: layer,
     themeColorScheme: themeColorScheme,
     map: map,
     zoom: currentZoomLevel,
     onMapClick: onMapClick
-  }), isMapLoaded && layer && layer.type === MapUtils_1.LAYER_TYPE.Choropleth && layer.source && React.createElement(LocalChoroplethLayer_1.default, {
+  }), isMapLoaded && layer && layer.type === visualization_schemas_1.LAYER_TYPE.Choropleth && layer.source && React.createElement(LocalChoroplethLayer_1.default, {
     width: width,
     height: height,
     map: map,
@@ -3446,13 +3404,13 @@ var PureMap = function PureMap(props) {
     isThemeChanged: isThemeChanged,
     setIsThemeChanged: setIsThemeChangedCallback,
     onMapClick: onMapClick
-  }), isMapLoaded && layer && layer.type === MapUtils_1.LAYER_TYPE.Choropleth && !layer.source && React.createElement(ChoroplethLayer_1.default, {
+  }), isMapLoaded && layer && layer.type === visualization_schemas_1.LAYER_TYPE.Choropleth && !layer.source && React.createElement(ChoroplethLayer_1.default, {
     map: map,
     choroplethLayer: layer,
     isThemeChanged: isThemeChanged,
     setIsThemeChanged: setIsThemeChangedCallback,
     onMapClick: onMapClick
-  })));
+  }));
 };
 
 var isLatLng = function isLatLng(props, propName, componentName) {
@@ -3533,14 +3491,14 @@ exports.default = PureMap;
 
 /***/ }),
 
-/***/ 434:
+/***/ 422:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/MapContext");
 
 /***/ }),
 
-/***/ 435:
+/***/ 423:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3552,14 +3510,14 @@ Object.defineProperty(exports, "__esModule", {
 
 var styled_components_1 = __webpack_require__(4);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
 var style_1 = __webpack_require__(18);
 
-var maplibre_gl_css_1 = __webpack_require__(436);
+var maplibre_gl_css_1 = __webpack_require__(424);
 
 var PureMapContainer = styled_components_1.default.div.attrs({
-  'data-testid': 'puremap-container'
+  'data-test': 'puremap-container'
 }).withConfig({
   displayName: "PureMapContainer",
   componentId: "sc-1gjwxfv-0"
@@ -3594,7 +3552,7 @@ exports.default = PureMapContainer;
 
 /***/ }),
 
-/***/ 436:
+/***/ 424:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3603,7 +3561,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 437:
+/***/ 425:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3613,13 +3571,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var BubbleLayer_1 = __webpack_require__(153);
+var visualization_schemas_1 = __webpack_require__(9);
 
-var MarkerLayer_1 = __webpack_require__(439);
+var BubbleLayer_1 = __webpack_require__(149);
 
-var MapUtils_1 = __webpack_require__(115);
+var MarkerLayer_1 = __webpack_require__(427);
 
 var ClusterLayer = function ClusterLayer(_ref) {
   var clusterLayer = _ref.clusterLayer,
@@ -3631,7 +3589,7 @@ var ClusterLayer = function ClusterLayer(_ref) {
   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)) {
+    if ((clusterLayer === null || clusterLayer === void 0 ? void 0 : clusterLayer.type) === visualization_schemas_1.LAYER_TYPE.Marker && !('geobin' in clusterLayer)) {
       return React.createElement(MarkerLayer_1.default, {
         markerLayer: clusterLayer,
         themeColorScheme: themeColorScheme,
@@ -3640,7 +3598,7 @@ var ClusterLayer = function ClusterLayer(_ref) {
       });
     }
 
-    if ((clusterLayer === null || clusterLayer === void 0 ? void 0 : clusterLayer.type) === MapUtils_1.LAYER_TYPE.Bubble && 'geobin' in clusterLayer && 'bubbleSize' in clusterLayer) {
+    if ((clusterLayer === null || clusterLayer === void 0 ? void 0 : clusterLayer.type) === visualization_schemas_1.LAYER_TYPE.Bubble && 'geobin' in clusterLayer && 'bubbleSize' in clusterLayer) {
       return React.createElement(BubbleLayer_1.default, {
         bubbleLayer: clusterLayer,
         themeColorScheme: themeColorScheme,
@@ -3658,13 +3616,13 @@ exports.default = ClusterLayer;
 
 /***/ }),
 
-/***/ 438:
+/***/ 426:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(81);
+var _taggedTemplateLiteral = __webpack_require__(78);
 
 var _templateObject;
 
@@ -3673,30 +3631,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.convertDegToDMS = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var Popover_1 = __webpack_require__(84);
+var Popover_1 = __webpack_require__(81);
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
 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",
-  componentId: "xwewsa-0"
+  componentId: "sc-xwewsa-0"
 })(["margin:2px 6px 2px 6px;width:calc(100% - 12px);"]);
 var StyledTitleColumn = styled_components_1.default.td.withConfig({
   displayName: "Tooltip__StyledTitleColumn",
-  componentId: "xwewsa-1"
+  componentId: "sc-xwewsa-1"
 })(["opacity:0.85;"]);
 var StyledValueColumn = styled_components_1.default.td.withConfig({
   displayName: "Tooltip__StyledValueColumn",
-  componentId: "xwewsa-2"
+  componentId: "sc-xwewsa-2"
 })(["text-align:right;"]);
 var StyledColorBlock = styled_components_1.default.div.withConfig({
   displayName: "Tooltip__StyledColorBlock",
-  componentId: "xwewsa-3"
+  componentId: "sc-xwewsa-3"
 })(["background-color:", ";display:inline-block;margin-right:4px;border-radius:2px;width:6px;height:11px;transform:translateY(1px);"], function (props) {
   return props.color;
 });
@@ -3782,15 +3740,15 @@ exports.default = Tooltip;
 
 /***/ }),
 
-/***/ 439:
+/***/ 427:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(9);
+var _defineProperty = __webpack_require__(12);
 
-var _taggedTemplateLiteral = __webpack_require__(81);
+var _taggedTemplateLiteral = __webpack_require__(78);
 
 var _templateObject;
 
@@ -3814,15 +3772,15 @@ exports.generateMarkerWrapperProps = exports.MarkerIcon = void 0;
 
 var styled_components_1 = __webpack_require__(4);
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var colorUtils_1 = __webpack_require__(15);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var MapUtils_1 = __webpack_require__(115);
+var MapUtils_1 = __webpack_require__(119);
 
-var MarkerWrapper_1 = __webpack_require__(154);
+var MarkerWrapper_1 = __webpack_require__(150);
 
 var MarkerIcon = function MarkerIcon(_a) {
   var theme = _a.theme,
@@ -3948,41 +3906,29 @@ exports.default = MarkerLayer;
 
 /***/ }),
 
-/***/ 44:
+/***/ 428:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 440:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var Message_1 = __webpack_require__(12);
+var Message_1 = __webpack_require__(11);
 
-var GeoRegistry_1 = __webpack_require__(441);
+var GeoRegistry_1 = __webpack_require__(429);
 
-var GeoJsonProvider_1 = __webpack_require__(442);
+var GeoJsonProvider_1 = __webpack_require__(430);
 
-var MapUtils_1 = __webpack_require__(115);
+var MapUtils_1 = __webpack_require__(119);
 
-var ChoroplethLayer_1 = __webpack_require__(183);
+var ChoroplethLayer_1 = __webpack_require__(178);
 
 var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
   var _a, _b;
@@ -4172,21 +4118,33 @@ exports.default = LocalChoroplethLayer;
 
 /***/ }),
 
-/***/ 441:
+/***/ 429:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/GeoRegistry");
 
 /***/ }),
 
-/***/ 442:
+/***/ 43:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 430:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/GeoJsonProvider");
 
 /***/ }),
 
-/***/ 443:
+/***/ 431:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4196,27 +4154,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var visualization_icons_1 = __webpack_require__(74);
+var visualization_icons_1 = __webpack_require__(71);
 
-var placeholders_1 = __webpack_require__(72);
+var placeholders_1 = __webpack_require__(70);
 
-var schemaUtils_1 = __webpack_require__(24);
+var visualization_schemas_1 = __webpack_require__(9);
 
-var visualization_color_palettes_1 = __webpack_require__(73);
+var themes_1 = __webpack_require__(79);
 
-var themes_1 = __webpack_require__(82);
+var i18n_1 = __webpack_require__(3);
 
-var i18n_1 = __webpack_require__(2);
-
-var VizBehavior_1 = __webpack_require__(6);
+var VizBehavior_1 = __webpack_require__(7);
 
 var VizCategory_1 = __webpack_require__(22);
 
-var configUtils_1 = __webpack_require__(27);
-
-var MapUtils_1 = __webpack_require__(115);
+var configUtils_1 = __webpack_require__(26);
 
-var BackgroundColor_1 = __webpack_require__(75);
+var BackgroundColor_1 = __webpack_require__(72);
 
 var defaultContext = {
   colorRangeConfig: [{
@@ -4256,277 +4210,6 @@ var size = {
   initialWidth: 800,
   initialHeight: 600
 };
-var optionsSchema = {
-  backgroundColor: {
-    default: '> themes.defaultBackgroundColor',
-    description: 'Specify a color for the background. You might use a dataSource to apply the color. The default for enterprise light is "#FFFFFF". The default for enterprise dark is "#000000". The default for prisma dark is "#0B0C0E".',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-    type: 'string'
-  },
-  baseLayerTileServer: {
-    type: 'string',
-    description: 'Specify the URL for the set of tiles that make up the base map.'
-  },
-  baseLayerTileServerType: {
-    type: 'string',
-    description: 'Specify the type of tile set for the base map.',
-    pattern: (0, schemaUtils_1.getPattern)(['vector', 'raster'])
-  },
-  center: {
-    type: 'array',
-    description: 'Specify the center of the map in coordinates, in the form of [latitude, longitude]. If you don’t provide coordinates, the map automatically centers, based on available location data. If there is no available location data, the center of the map defaults to [37.7749, -122.4194].',
-    items: {
-      type: 'number'
-    }
-  },
-  layers: {
-    // The option merging of defaults and data binding with editing UI happens with the default defined below.
-    // The inner defaults for properties within anyOf objects is used only for code intellisense in UDF to populate options.
-    default: [{
-      type: MapUtils_1.LAYER_TYPE.Bubble,
-      latitude: '> primary | seriesByName("latitude")',
-      longitude: '> primary | seriesByName("longitude")',
-      seriesColors: visualization_color_palettes_1.VIZ_CATEGORICAL,
-      bubbleSize: '> primary | frameWithoutSeriesNames("geobin", "latitude", "longitude") | frameBySeriesTypes("number")',
-      additionalTooltipFields: [],
-      resultLimit: 1000
-    }, {
-      type: MapUtils_1.LAYER_TYPE.Marker,
-      latitude: '> primary | seriesByName("latitude")',
-      longitude: '> primary | seriesByName("longitude")',
-      seriesColors: visualization_color_palettes_1.VIZ_CATEGORICAL,
-      additionalTooltipFields: [],
-      resultLimit: 1000
-    }, {
-      type: MapUtils_1.LAYER_TYPE.Choropleth,
-      areaIds: '> primary | seriesByType("string")',
-      areaValues: '> primary | seriesByType("number")',
-      dataColors: '> areaValues | gradient()',
-      additionalTooltipFields: [],
-      resultLimit: 1000,
-      choroplethEmptyAreaColor: '> themes.defaultChoroplethEmptyAreaColor',
-      choroplethStrokeColor: 'transparent',
-      choroplethOpacity: 0.8
-    }],
-    type: 'array',
-    description: 'Specify the optional data visualization layers over the base map. If empty, only the base map appears.',
-    items: {
-      anyOf: [{
-        type: 'object',
-        properties: {
-          type: {
-            description: 'Specify the type of data layer method to display points on the map. For example, “bubble”, “marker”, or "choropleth".',
-            type: 'string',
-            pattern: (0, schemaUtils_1.getPattern)([MapUtils_1.LAYER_TYPE.Marker, MapUtils_1.LAYER_TYPE.Bubble, MapUtils_1.LAYER_TYPE.Choropleth]),
-            default: MapUtils_1.LAYER_TYPE.Marker
-          },
-          latitude: {
-            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
-            type: ['string', 'array'],
-            items: {
-              type: 'number'
-            },
-            default: '> primary | seriesByName("latitude")'
-          },
-          longitude: {
-            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
-            type: ['string', 'array'],
-            items: {
-              type: 'number'
-            },
-            default: '> primary | seriesByName("longitude")'
-          },
-          seriesColors: {
-            description: 'Specify the colors to use for data points. If the dataColors option is specified, the seriesColors option is ignored. The seriesColors option applies to layers where type: "bubble" or type: "marker".',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-            },
-            default: visualization_color_palettes_1.VIZ_CATEGORICAL
-          },
-          dataColors: {
-            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default, and the opacities are shown at 80% of maximum to allow textual information to be visible in the map. By default, the dataColors option is not defined for type "bubble" or "marker". If type: "bubble", dataColors requires bubbleSize to have only a single series configured.',
-            type: ['string', 'array'],
-            items: {
-              type: 'string'
-            }
-          },
-          additionalTooltipFields: {
-            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values are shown in addition to the ones displayed by default.',
-            type: 'array',
-            items: {
-              type: 'string'
-            },
-            default: []
-          },
-          resultLimit: {
-            description: 'Specify the maximum number of data points to render on the map. Adjust the value to improve performance.',
-            type: 'number',
-            default: 1000
-          }
-        }
-      }, {
-        type: 'object',
-        properties: {
-          type: {
-            description: 'Specify the type of data layer method to display points on the map. For example, “bubble”, “marker”, or "choropleth".',
-            type: 'string',
-            pattern: (0, schemaUtils_1.getPattern)([MapUtils_1.LAYER_TYPE.Marker, MapUtils_1.LAYER_TYPE.Bubble, MapUtils_1.LAYER_TYPE.Choropleth]),
-            default: MapUtils_1.LAYER_TYPE.Choropleth
-          },
-          areaIds: {
-            description: 'Specify a dataSource series to identify each area in the choropleth map layer. This applies to layers where type: "choropleth".',
-            type: 'array',
-            items: {
-              type: 'string'
-            },
-            default: '> primary | seriesByType("string")'
-          },
-          areaValues: {
-            description: 'Specify a dataSource series that indicates the values for the choropleth map areas. This applies to layers where type: "choropleth".',
-            type: 'array',
-            items: {
-              type: 'number'
-            },
-            default: '> primary | seriesByType("number")'
-          },
-          dataColors: {
-            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default. By default, the dataColors option is not defined for type "bubble" or "marker".',
-            type: ['string', 'array'],
-            items: {
-              type: 'string'
-            },
-            default: '> areaValues | gradient()'
-          },
-          additionalTooltipFields: {
-            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values are shown in addition to the ones displayed by default.',
-            type: 'array',
-            items: {
-              type: 'string'
-            },
-            default: []
-          },
-          resultLimit: {
-            description: 'Specify the maximum number of data points to render on the map. Adjust the value to improve performance.',
-            type: 'number',
-            default: 1000
-          },
-          source: {
-            description: 'Source for the geodata for choropleth layer: "us" or "world", and will override data specified in the SPL geom command.',
-            pattern: (0, schemaUtils_1.getPattern)(['geo://default/us', 'geo://default/world']),
-            type: 'string'
-          },
-          choroplethEmptyAreaColor: {
-            description: 'Specify the color used for empty choropleth areas when "type": "choropleth", and will only work when "source" option is correctly configured.',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-            type: 'string',
-            default: '> themes.defaultChoroplethEmptyAreaColor'
-          },
-          choroplethStrokeColor: {
-            description: 'Specify the stroke color for choropleth area outlines. The hex value format should be "#FFFFFF".',
-            pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
-            type: 'string',
-            default: 'transparent'
-          },
-          choroplethOpacity: {
-            description: 'Specify the opacity of choropleth areas. Choose a number in the range of 0 - 1 (inclusive). You can also express the value as a percentage. For example, "0.8" in code or "80%" in UI.',
-            type: 'number',
-            default: 0.8
-          }
-        }
-      }, {
-        type: 'object',
-        properties: {
-          type: {
-            description: 'Specify the type of data layer method to display points on the map. For example, “bubble”, “marker”, or "choropleth".',
-            type: 'string',
-            pattern: (0, schemaUtils_1.getPattern)([MapUtils_1.LAYER_TYPE.Marker, MapUtils_1.LAYER_TYPE.Bubble, MapUtils_1.LAYER_TYPE.Choropleth]),
-            default: MapUtils_1.LAYER_TYPE.Bubble
-          },
-          bubbleSize: {
-            description: 'Specify the data column to encode bubble size. This applies to layers where type: "bubble".',
-            type: ['string', 'array'],
-            items: {
-              type: 'number'
-            },
-            default: '> primary | frameWithoutSeriesNames("geobin", "latitude", "longitude") | frameBySeriesTypes("number")'
-          },
-          latitude: {
-            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
-            type: ['string', 'array'],
-            items: {
-              type: 'number'
-            },
-            default: '> primary | seriesByName("latitude")'
-          },
-          longitude: {
-            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map. This applies to layers where type: "bubble" or type: "marker".',
-            type: ['string', 'array'],
-            items: {
-              type: 'number'
-            },
-            default: '> primary | seriesByName("longitude")'
-          },
-          seriesColors: {
-            description: 'Specify the colors to use for data points. If the dataColors option is specified, the seriesColors option is ignored. The seriesColors option applies to layers where type: "bubble" or type: "marker".',
-            type: 'array',
-            items: {
-              type: 'string',
-              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-            },
-            default: visualization_color_palettes_1.VIZ_CATEGORICAL
-          },
-          dataColors: {
-            description: 'Specify the colors to use for data points. You can use an array of colors to be picked from, or you can use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. When type: "choropleth", dataColors is defined by default, and the opacities are shown at 80% of maximum to allow textual information to be visible in the map. By default, the dataColors option is not defined for type "bubble" or "marker". If type: "bubble", dataColors requires bubbleSize to have only a single series configured.',
-            type: ['string', 'array'],
-            items: {
-              type: 'string'
-            }
-          },
-          additionalTooltipFields: {
-            description: 'Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over data points. These fields and their corresponding values are shown in addition to the ones displayed by default.',
-            type: 'array',
-            items: {
-              type: 'string'
-            },
-            default: []
-          },
-          resultLimit: {
-            description: 'Specify the maximum number of data points to render on the map. Adjust the value to improve performance.',
-            type: 'number',
-            default: 1000
-          }
-        }
-      }]
-    }
-  },
-  scaleUnit: {
-    default: 'metric',
-    type: 'string',
-    description: 'Specify the scale unit to use.',
-    pattern: (0, schemaUtils_1.getPattern)(['metric', 'imperial'])
-  },
-  showBaseLayer: {
-    default: true,
-    type: 'boolean',
-    description: 'Specify if showing the base map.'
-  },
-  showScale: {
-    default: true,
-    type: 'boolean',
-    description: 'Specify whether to display the scale on the bottom left.'
-  },
-  showZoomControls: {
-    default: true,
-    type: 'boolean',
-    description: 'Specify whether to display the control panel of zoom on the top left.'
-  },
-  zoom: {
-    description: 'Specify the zoom level of the map.',
-    type: 'number'
-  }
-};
 var themes = {
   defaultBackgroundColor: function defaultBackgroundColor(props) {
     return (0, themes_1.pick)({
@@ -4579,11 +4262,11 @@ var themes = {
 };
 
 var checkTypeIsChoropleth = function checkTypeIsChoropleth(options) {
-  return options.layers && options.layers.length && options.layers[0].type === MapUtils_1.LAYER_TYPE.Choropleth;
+  return options.layers && options.layers.length && options.layers[0].type === visualization_schemas_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');
+  return options.layers && options.layers.length && options.layers[0].type === visualization_schemas_1.LAYER_TYPE.Choropleth && (options.layers[0].source === 'geo://default/us' || options.layers[0].source === 'geo://default/world');
 };
 
 var EDITOR_LABEL_WIDTH = 140;
@@ -4596,13 +4279,13 @@ var editorConfig = [{
     editorProps: {
       values: [{
         label: (0, i18n_1._)('Bubble'),
-        value: MapUtils_1.LAYER_TYPE.Bubble
+        value: visualization_schemas_1.LAYER_TYPE.Bubble
       }, {
         label: (0, i18n_1._)('Marker'),
-        value: MapUtils_1.LAYER_TYPE.Marker
+        value: visualization_schemas_1.LAYER_TYPE.Marker
       }, {
         label: (0, i18n_1._)('Choropleth'),
-        value: MapUtils_1.LAYER_TYPE.Choropleth
+        value: visualization_schemas_1.LAYER_TYPE.Choropleth
       }]
     }
   }], [{
@@ -4887,7 +4570,7 @@ var config = {
   dataContract: dataContract,
   size: size,
   defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
+  optionsSchema: visualization_schemas_1.mapOptionsSchema,
   editorConfig: editorConfig,
   events: {
     'map.load': {
@@ -4906,7 +4589,7 @@ exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 444:
+/***/ 432:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4917,15 +4600,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.columnsNullToZeros = void 0;
 
-var types_1 = __webpack_require__(106);
+var types_1 = __webpack_require__(103);
 
-var dsl_1 = __webpack_require__(155);
+var dsl_1 = __webpack_require__(151);
 
-var hocUtils_1 = __webpack_require__(34);
+var hocUtils_1 = __webpack_require__(33);
 
-var JSONSchemaUtils_1 = __webpack_require__(35);
+var JSONSchemaUtils_1 = __webpack_require__(34);
 
-var BubbleLayer_1 = __webpack_require__(153);
+var BubbleLayer_1 = __webpack_require__(149);
 
 var columnsNullToZeros = function columnsNullToZeros(config, dataSources, options) {
   var _a, _b;
@@ -4976,7 +4659,7 @@ exports.columnsNullToZeros = columnsNullToZeros;
 
 /***/ }),
 
-/***/ 45:
+/***/ 44:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4988,7 +4671,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 46:
+/***/ 45:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5000,7 +4683,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 47:
+/***/ 46:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5012,7 +4695,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 48:
+/***/ 47:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5024,7 +4707,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 49:
+/***/ 48:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5036,7 +4719,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 50:
+/***/ 49:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5048,19 +4731,14 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 51:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
+/***/ 5:
+/***/ (function(module, exports) {
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
-/***/ 52:
+/***/ 50:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5072,7 +4750,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 53:
+/***/ 51:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5084,7 +4762,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 54:
+/***/ 52:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5096,7 +4774,7 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 55:
+/***/ 53:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5108,65 +4786,65 @@ Object.defineProperty(exports, "__esModule", {
 
 /***/ }),
 
-/***/ 56:
+/***/ 54:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(57);
+var getSettingsFromThemedProps_1 = __webpack_require__(55);
 
 var Options_1 = __webpack_require__(16);
 
-var SanitizeProps_1 = __webpack_require__(58);
+var SanitizeProps_1 = __webpack_require__(56);
 
-var TimezoneContext_1 = __webpack_require__(32);
+var TimezoneContext_1 = __webpack_require__(31);
 
-var moment_1 = __webpack_require__(59);
+var moment_1 = __webpack_require__(57);
 
-var FeatureFlagContext_1 = __webpack_require__(28);
+var FeatureFlagContext_1 = __webpack_require__(27);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(34);
+var hocUtils_1 = __webpack_require__(33);
 
-var JSONSchemaUtils_1 = __webpack_require__(35);
+var JSONSchemaUtils_1 = __webpack_require__(34);
 
-var async_dynamic_options_evaluator_1 = __webpack_require__(60);
+var async_dynamic_options_evaluator_1 = __webpack_require__(58);
 
-var id_1 = __webpack_require__(31);
+var id_1 = __webpack_require__(30);
 
-var SplunkVisualization_1 = __webpack_require__(61);
+var SplunkVisualization_1 = __webpack_require__(59);
 
-var VizBehavior_1 = __webpack_require__(6);
+var VizBehavior_1 = __webpack_require__(7);
 
-var getSorting_1 = __webpack_require__(38);
+var getSorting_1 = __webpack_require__(37);
 
-var getPagination_1 = __webpack_require__(39);
+var getPagination_1 = __webpack_require__(38);
 
-var useDeepMemo_1 = __webpack_require__(62);
+var useDeepMemo_1 = __webpack_require__(60);
 
-var MissingPropsMessage_1 = __webpack_require__(63);
+var MissingPropsMessage_1 = __webpack_require__(61);
 
-var withEditModeCover_1 = __webpack_require__(64);
+var withEditModeCover_1 = __webpack_require__(62);
 
-var withPlaceholder_1 = __webpack_require__(65);
+var withPlaceholder_1 = __webpack_require__(63);
 
-var useDownsampleDataSources_1 = __webpack_require__(66);
+var useDownsampleDataSources_1 = __webpack_require__(64);
 
 var dataUtils_1 = __webpack_require__(14);
 
-var featureFlagUtils_1 = __webpack_require__(68);
+var featureFlagUtils_1 = __webpack_require__(66);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -5499,81 +5177,41 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 57:
+/***/ 55:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 58:
+/***/ 56:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 59:
+/***/ 57:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 6:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizBehavior = void 0;
-var VizBehavior;
-
-(function (VizBehavior) {
-  /**
-   * Dynamic Options Behavior.
-   * This allows visualization options to be powered by data
-   *
-   * **Example**
-   *
-   * sparklineValues: ">primary|seriesByIndex(0)"
-   * would configure sparklineValues with an array of data points
-   * coming from the first series in the primary datasource
-   *
-   */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  VizBehavior["DOWNSAMPLING"] = "downsampling";
-  /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
-   */
-
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
-
-/***/ }),
-
-/***/ 60:
+/***/ 58:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 61:
+/***/ 59:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(10);
+var _classCallCheck = __webpack_require__(8);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -5581,9 +5219,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
 var VizActionHandler_1 = __webpack_require__(21); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
@@ -5719,7 +5357,14 @@ exports.default = SplunkVisualization;
 
 /***/ }),
 
-/***/ 62:
+/***/ 6:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
+
+/***/ }),
+
+/***/ 60:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5730,9 +5375,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 /**
  * This hook evaluates and stores the result of a passed function and only
  * re-evaluates the function when passed dependencies change.
@@ -5765,7 +5410,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 63:
+/***/ 61:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5776,13 +5421,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
-var T = __webpack_require__(1);
+var T = __webpack_require__(0);
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
-var Message_1 = __webpack_require__(12);
+var Message_1 = __webpack_require__(11);
 
 var FixedSizeContainer_1 = __webpack_require__(17);
 /**
@@ -5846,7 +5491,7 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 
 /***/ }),
 
-/***/ 64:
+/***/ 62:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5856,7 +5501,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
@@ -5867,7 +5512,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "26.2.1 - 714383dbb"
+  'data-splunk-visualization-version': "26.4.0 - 04078274d"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -5899,7 +5544,7 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 65:
+/***/ 63:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -5909,15 +5554,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(0);
+var React = __webpack_require__(1);
 
 var colorUtils_1 = __webpack_require__(15);
 
 var variables_1 = __webpack_require__(13);
 
-var IconPlaceholder_1 = __webpack_require__(37);
+var IconPlaceholder_1 = __webpack_require__(36);
 
-var VizBehavior_1 = __webpack_require__(6);
+var VizBehavior_1 = __webpack_require__(7);
 
 var hocUtils_1 = __webpack_require__(23);
 
@@ -5964,27 +5609,30 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 66:
+/***/ 64:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(7);
+var _slicedToArray = __webpack_require__(5);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
-var lodash_1 = __webpack_require__(3);
+var lodash_1 = __webpack_require__(2);
 
 var dataUtils_1 = __webpack_require__(14);
 
-var usePrevious_1 = __webpack_require__(33);
+var usePrevious_1 = __webpack_require__(32);
+
+var useGetXAndYFields_1 = __webpack_require__(65); // Options properties which impact/require re-downsample on change.
 
-var useGetXAndYFields_1 = __webpack_require__(67);
+
+var downsampleVizOptionProperties = ['nullValueDisplay'];
 
 var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
   var dataSources = _ref.dataSources,
@@ -5998,8 +5646,15 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
     options: options,
     context: context,
     dataSources: dataSources
-  });
-  var previousXAndYFieldsWithTypes = (0, usePrevious_1.default)(xAndYFieldsWithTypes);
+  }); // Extract viz options that impact downsampling.
+
+  var downsampleVizOptions = (0, react_1.useMemo)(function () {
+    return (0, lodash_1.pick)(options, downsampleVizOptionProperties);
+  }, [options]);
+  var downsampleDSOptions = (0, react_1.useMemo)(function () {
+    return Object.assign(Object.assign({}, downsampleVizOptions), xAndYFieldsWithTypes);
+  }, [xAndYFieldsWithTypes, downsampleVizOptions]);
+  var previousDownsampleDSOptions = (0, usePrevious_1.default)(downsampleDSOptions);
   var previousDataSources = (0, usePrevious_1.default)(dataSources);
   var previousThreshold = (0, usePrevious_1.default)(threshold);
 
@@ -6007,7 +5662,7 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
     return isDownsamplingEnabled ? (0, dataUtils_1.downsampleDataSources)({
       dataSources: dataSources,
       threshold: threshold,
-      options: xAndYFieldsWithTypes
+      options: downsampleDSOptions
     }) : dataSources;
   }),
       _ref3 = _slicedToArray(_ref2, 2),
@@ -6035,7 +5690,7 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
       return;
     }
 
-    if ((0, lodash_1.isEqual)(previousXAndYFieldsWithTypes, xAndYFieldsWithTypes) && previousDataSources === dataSources && previousThreshold === threshold) {
+    if ((0, lodash_1.isEqual)(previousDownsampleDSOptions, downsampleDSOptions) && previousDataSources === dataSources && previousThreshold === threshold) {
       return;
     } // Debounce the downsampling so we don't have to downsample and execute DSL multiple times
     // while the viz is being resized
@@ -6043,10 +5698,10 @@ var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
 
     debouncedDownsampleDataSources({
       dataSources: dataSources,
-      options: xAndYFieldsWithTypes,
+      options: downsampleDSOptions,
       threshold: threshold
     }); // need to detect if this runs as part of the initial render
-  }, [dataSources, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousXAndYFieldsWithTypes, previousDataSources, previousThreshold]);
+  }, [dataSources, downsampleDSOptions, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousDataSources, previousThreshold, previousDownsampleDSOptions]);
   return downsampledDataSources;
 };
 
@@ -6054,19 +5709,19 @@ exports.default = useDownsampleDataSources;
 
 /***/ }),
 
-/***/ 67:
+/***/ 65:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+var _toConsumableArray = __webpack_require__(6);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var react_1 = __webpack_require__(0);
+var react_1 = __webpack_require__(1);
 
 var Options_1 = __webpack_require__(16);
 /**
@@ -6169,7 +5824,7 @@ exports.default = useGetXAndYFields;
 
 /***/ }),
 
-/***/ 68:
+/***/ 66:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6180,7 +5835,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFeatureFlag = void 0;
 
-var FeatureFlags_1 = __webpack_require__(69);
+var FeatureFlags_1 = __webpack_require__(67);
 
 var getFeatureFlag = function getFeatureFlag(context, flagName) {
   // look for feature flag in context first
@@ -6205,7 +5860,7 @@ exports.getFeatureFlag = getFeatureFlag;
 
 /***/ }),
 
-/***/ 69:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlags");
@@ -6213,34 +5868,60 @@ module.exports = require("@splunk/visualization-context/FeatureFlags");
 /***/ }),
 
 /***/ 7:
-/***/ (function(module, exports) {
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+"use strict";
 
-/***/ }),
 
-/***/ 72:
-/***/ (function(module, exports) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizBehavior = void 0;
+var VizBehavior;
 
-module.exports = require("@splunk/visualization-icons/placeholders");
+(function (VizBehavior) {
+  /**
+   * Dynamic Options Behavior.
+   * This allows visualization options to be powered by data
+   *
+   * **Example**
+   *
+   * sparklineValues: ">primary|seriesByIndex(0)"
+   * would configure sparklineValues with an array of data points
+   * coming from the first series in the primary datasource
+   *
+   */
+  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
+  VizBehavior["EVENTS"] = "events";
+  VizBehavior["DOWNSAMPLING"] = "downsampling";
+  /**
+   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
+   * missing.
+   * @type {string}
+   */
+
+  VizBehavior["PLACEHOLDER"] = "placeholder";
+  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
+})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
 
-/***/ 73:
+/***/ 70:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-color-palettes");
+module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
 
-/***/ 74:
+/***/ 71:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
 
-/***/ 75:
+/***/ 72:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -6250,14 +5931,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var i18n_1 = __webpack_require__(2);
+var i18n_1 = __webpack_require__(3);
 
 var background = function background(_ref) {
   var label = _ref.label,
       themes = _ref.themes,
       labelPosition = _ref.labelPosition;
   return [{
-    label: (0, i18n_1._)(label || 'Background'),
+    label: (0, i18n_1._)(label || 'Background color'),
     option: 'backgroundColor',
     editor: 'editor.color',
     editorProps: {
@@ -6271,28 +5952,35 @@ exports.default = background;
 
 /***/ }),
 
-/***/ 8:
+/***/ 74:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("@splunk/visualization-color-palettes");
 
 /***/ }),
 
-/***/ 81:
+/***/ 78:
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 
 /***/ }),
 
-/***/ 82:
+/***/ 79:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes");
 
 /***/ }),
 
-/***/ 84:
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/classCallCheck");
+
+/***/ }),
+
+/***/ 81:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
@@ -6302,7 +5990,7 @@ module.exports = require("@splunk/react-ui/Popover");
 /***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@splunk/visualization-schemas");
 
 /***/ })