@splunk/visualizations 26.1.1 → 26.2.0

package/Map.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 410);
+/******/ 	return __webpack_require__(__webpack_require__.s = 432);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,188 +95,1122 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 11:
+/***/ 106:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
 
-/***/ 12:
+/***/ 11:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
 
-/***/ 121:
+/***/ 115:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _defineProperty = __webpack_require__(9);
+
+var _slicedToArray = __webpack_require__(7);
+
+var _toConsumableArray = __webpack_require__(8);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertToArrOfObjects = void 0; // TODO: utilize this fn in ParallelCoordinates
+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 convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
-  if (!columns || !columns[0] || !columns[0].length) return [];
-  var data = [];
+var lodash_1 = __webpack_require__(3);
 
-  var _loop = function _loop(i) {
-    var newObj = {};
-    fields.forEach(function (field, index) {
-      var fieldName = typeof field === 'string' ? field : field.name;
+var d3_scale_1 = __webpack_require__(116);
 
-      if (columns[index][i] === '') {
-        newObj[fieldName] = null;
-      } else {
-        newObj[fieldName] = columns[index][i];
-      }
-    });
-    data.push(newObj);
-  };
+var chroma = __webpack_require__(181);
 
-  for (var i = 0; i < columns[0].length; i += 1) {
-    _loop(i);
-  }
+var colorUtils_1 = __webpack_require__(15);
 
-  return data;
-};
+var visualization_color_palettes_1 = __webpack_require__(73);
 
-exports.convertToArrOfObjects = convertToArrOfObjects;
+var types_1 = __webpack_require__(106);
 
-/***/ }),
+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
 
-/***/ 13:
-/***/ (function(module, exports, __webpack_require__) {
+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
 
-"use strict";
+exports.MIN_BUBBLE_RADIUS = 7.11; // 10px
 
+exports.MAX_BUBBLE_RADIUS = 45.26; // 85px
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.DEFAULT_OPACITY = 0.8;
+var LONGITUDE = 'longitude';
+var LATITUDE = 'latitude';
+var LAYER_TYPE;
 
-var React = __webpack_require__(1);
+(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
+ * @param {MapContextInterface} args
+ * @param {BaseTileConfig[]} args.defaultTileConfig
+ * @param {BaseTileConfig[]} args.customTileConfig
+ * @returns {Object} tile preset
+ */
 
-var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(19);
+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;
 
-var style_1 = __webpack_require__(14);
+  var _a, _b;
 
-var colorUtils_1 = __webpack_require__(12);
+  var tilePreset = {};
+  var defaultTileLight = {};
+  var defaultTileDark = {};
+  var tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
+  (0, lodash_1.forEach)(tileConfigs, function (tileConfig) {
+    var key = tileConfig === null || tileConfig === void 0 ? void 0 : tileConfig.key;
+    var updatedConfig = Object.assign(Object.assign({
+      theme: 'all'
+    }, tileConfig), {
+      version: exports.MAP_STYLE_VERSION_NUMBER
+    });
+    tilePreset[key] = updatedConfig;
+  });
 
-var Item = styled_components_1.default.div.attrs(function (_ref) {
-  var width = _ref.width;
-  return {
-    style: {
-      width: (0, style_1.toPx)(width)
-    }
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__Item",
-  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
+  if (defaultTileConfig.length > 0) {
+    defaultTileLight = (_a = defaultTileConfig.find(function (config) {
+      return config.theme === 'light';
+    })) !== null && _a !== void 0 ? _a : defaultTileConfig.find(function (config) {
+      return config.theme === undefined;
+    });
+    defaultTileDark = (_b = defaultTileConfig.find(function (config) {
+      return config.theme === 'dark';
+    })) !== null && _b !== void 0 ? _b : defaultTileConfig.find(function (config) {
+      return config.theme === undefined;
+    });
+  }
 
-var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
-  var width = _ref2.width,
-      height = _ref2.height;
   return {
-    style: Object.assign(Object.assign({}, width && {
-      width: (0, style_1.toPx)(width)
-    }), height && {
-      height: (0, style_1.toPx)(height)
-    })
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__FixSizeItem",
-  componentId: "sc-1yhgpod-1"
-})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-var ItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__ItemContent",
-  componentId: "sc-1yhgpod-2"
-})(["position:relative;min-height:100px;width:100%;"]);
-var FixSizeItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__FixSizeItemContent",
-  componentId: "sc-1yhgpod-3"
-})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
-
-var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
-  var FixedSizeContainer = function FixedSizeContainer(props) {
-    var width = props.width,
-        height = props.height,
-        backgroundColor = props.backgroundColor;
-
-    if (!height) {
-      return React.createElement(Item, {
-        "data-test": "item",
-        width: width,
-        backgroundColor: backgroundColor
-      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
-    }
-
-    return React.createElement(FixSizeItem, {
-      "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "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;
-      return React.createElement(Viz, Object.assign({}, props, {
-        width: newWidth,
-        height: newHeight
-      }));
-    })));
+    tilePreset: tilePreset,
+    defaultTileLight: defaultTileLight,
+    defaultTileDark: defaultTileDark
   };
-
-  FixedSizeContainer.displayName = 'withFixedSizeContainer';
-  return FixedSizeContainer;
 };
 
-exports.default = withFixedSizeContainer;
+exports.getTilePreset = getTilePreset;
+/**
+ * Check if baseLayerTileServer is in tilePreset and config matches current theme, if yes, return.
+ * If no, construct a mapStyle with baseLayerTilerServer and baseLayerTileServerType
+ * Else return default tile config based on current theme
+ * @param {Object} args
+ * @param {BaseTileConfig[]} args.tilePreset
+ * @param {String} args.baseLayerTilerServer
+ * @param {String} args.baseLayerTileServerType
+ * @param {String} args.colorScheme
+ * @param {BaseTileConfig} args.defaultTileDark
+ * @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;
 
-/***/ 131:
-/***/ (function(module, exports, __webpack_require__) {
+  if (!showBaseLayer) {
+    return {
+      version: exports.MAP_STYLE_VERSION_NUMBER,
+      sources: {
+        'base-tiles': {
+          type: 'raster',
+          tiles: ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='],
+          tileSize: 256
+        }
+      },
+      layers: [{
+        id: 'base-layer',
+        type: 'raster',
+        source: 'base-tiles',
+        minzoom: 0,
+        maxzoom: 22
+      }]
+    };
+  }
 
-"use strict";
+  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === 'all')) {
+    return tilePreset[baseLayerTileServer];
+  }
 
+  if (baseLayerTileServer && baseLayerTileServerType) {
+    var tiles = [];
+    /**
+     * Tile Server URLs (eg: http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png) can specify the variable {s} which refers to a subdomain
+     * 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
+     */
 
-var _slicedToArray = __webpack_require__(17);
+    if (baseLayerTileServer.match(/^(https?):\/\/{(s|S)}\../)) {
+      /**
+       * sXML (Leaflet) allows users to define their own tile server URLs + list of available subdomains
+       * In order to preserve this behavior during conversion to splunk.map,
+       * if the variable {s} or {S} is detected, replace it with 'a', 'b' and 'c' - default values for subdomains
+       * TODO: in the future, add an additional prop - baseLayerTileServerSubdomains: ['x', 'y', 'z'], default being ['a', 'b', 'c']
+       */
+      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
 
-var _defineProperty = __webpack_require__(7);
 
-var _toConsumableArray = __webpack_require__(8);
+    var mapStyle = {
+      version: exports.MAP_STYLE_VERSION_NUMBER,
+      sources: {
+        'base-tiles': {
+          type: baseLayerTileServerType,
+          tiles: tiles,
+          tileSize: 256
+        }
+      },
+      layers: [{
+        id: 'base-layer',
+        type: 'raster',
+        source: 'base-tiles',
+        minzoom: 0,
+        maxzoom: 24 // https://maplibre.org/maplibre-gl-js-docs/api/map/
 
-var _taggedTemplateLiteral = __webpack_require__(59);
+      }]
+    };
+    return mapStyle;
+  } // 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
+
+  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;
+
+    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
+
+
+  for (var _i = 0; _i < layers.length; _i += 1) {
+    var _layers$_i = layers[_i],
+        _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/
+
+
+  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
+
+
+  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
+
+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
+  // 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
+
+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
+
+var sanitizeValues = function sanitizeValues(values) {
+  // null / undefined
+  if (!values) {
+    return 0;
+  } // number
+
+
+  if (!Array.isArray(values)) {
+    return values > 0 ? values : 0;
+  } // 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)
+  // 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)
+
+  if (Array.isArray(layer.bubbleSize[0])) {
+    // one-time array transpose,
+    // e.g. from [column0data, column0data] (multi series)
+    // to [[column0datum0, column1datum0], [column0datum1, column1data1], ...]
+    // or e.g. from [column0data] (single series)
+    // to [[column0data]]
+    // 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
+
+    if (layer.bubbleSize.length > 1) {
+      isPie = true;
+    }
+  } else {
+    transposedBubbleSize = layer.bubbleSize.map(function (n) {
+      return [n];
+    });
+    transposedSanitizedBubbleSize = sanitizedBubbleSize.map(function (n) {
+      return [n];
+    });
+  }
+
+  if (!transposedBubbleSize || !transposedBubbleSize.length) {
+    return null;
+  }
+
+  var data = layer.latitude.map(function (lat, i) {
+    return {
+      zoom: (0, exports.getZoomLevelFromGeobin)(layer.geobin[i]),
+      values: transposedBubbleSize[i],
+      sanitizedValues: transposedSanitizedBubbleSize[i],
+      coordinates: [layer.longitude[i], lat],
+      metadata: layer.metadata ? layer.metadata[i] : {}
+    };
+  }).filter(function (d) {
+    return Boolean(d.values);
+  }); // 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) {
+    var bubbleSize = (0, lodash_1.sum)(row);
+    max = bubbleSize > max ? bubbleSize : max;
+    min = bubbleSize < min ? bubbleSize : min;
+  });
+  return {
+    data: data,
+    dataRange: [min, max],
+    isPie: isPie,
+    resultLimit: layer.resultLimit,
+    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];
+
+  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
+ * @param {LayerType[]} layer
+ * @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) {
+      return geomObject.coordinates.flat(2);
+    });
+    return flatCoordinates.map(function (coord) {
+      return coord[field === LONGITUDE ? 0 : 1];
+    });
+  };
+
+  return layer.type === LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
+};
+/**
+ * Returns the min and max LongLat pairs to determine the layer boundaries to fit all markers/bubbles
+ * @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;
+      });
+      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
+
+  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';
+  });
+  var nextBaseLayer = (_b = next === null || next === void 0 ? void 0 : next.layers) === null || _b === void 0 ? void 0 : _b.find(function (layer) {
+    return (layer === null || layer === void 0 ? void 0 : layer.id) === 'base-layer';
+  });
+  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 {};
+  var metadata = choroplethLayer.metadata ? choroplethLayer.metadata[i] : {};
+  var name = choroplethLayer.areaIds[i];
+  var value = choroplethLayer.areaValues[i];
+  var base = {
+    name: name,
+    value: String(value)
+  };
+  return Object.keys(metadata).reduce(function (result, curr) {
+    var key = "row.".concat(curr, ".value");
+    var val = (0, lodash_1.isObject)(metadata[curr]) ? JSON.stringify(metadata[curr]) : String(metadata[curr]);
+    return Object.assign(Object.assign({}, result), _defineProperty({}, key, val));
+  }, base);
+};
+
+exports.formatMetadata = formatMetadata;
+
+/***/ }),
+
+/***/ 116:
+/***/ (function(module, exports) {
+
+module.exports = require("d3-scale");
+
+/***/ }),
+
+/***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/Message");
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/variables");
+
+/***/ }),
+
+/***/ 14:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
+
+var numberUtils_1 = __webpack_require__(11);
+
+var interfaces_1 = __webpack_require__(40); // 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 {
+        newObj[fieldName] = columns[index][i];
+      }
+    });
+    data.push(newObj);
+  };
+
+  for (var i = 0; i < columns[0].length; i += 1) {
+    _loop(i);
+  }
+
+  return data;
+};
+
+exports.convertToArrOfObjects = convertToArrOfObjects; // LTTB algorithm which can be used to downsample time series data while striving to maintain
+// the spikes and overall shape of the chart
+// Copied from https://github.com/sveinn-steinarsson/flot-downsample/blob/0815010016fc94b1bbc6a010afb8aad13ada6d0d/jquery.flot.downsample.js
+// Modifications include:
+// 1) Convert to modern JavaScript(use const, let, and use array.push to push to last element of array)
+// 2) Convert to camel case
+// 3) Convert to TS and also return the indices of the points that are in the downsampled result.
+// 4) Add a new parameter preferredDownsampleIndices that correspond to the indices of points
+// that should be used in case of a tie of the max area in a bucket
+
+var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, threshold, preferredDownsampleIndices) {
+  var dataLength = data.length;
+  var downsampledIndices = [];
+
+  if (threshold >= dataLength || threshold === 0) {
+    var allIndices = data.map(function (values, index) {
+      return index;
+    });
+    return {
+      downsampledData: data,
+      downsampledIndices: allIndices
+    }; // Nothing to do
+  }
+
+  var sampled = [];
+  var sampledIndex = 0; // Bucket size. Leave room for start and end data points
+
+  var every = (dataLength - 2) / (threshold - 2);
+  var a = 0; // Initially a is the first point in the triangle
+
+  var maxAreaPoint;
+  var maxArea;
+  var area;
+  var nextA;
+  sampled.push(data[a]); // Always add the first point
+
+  downsampledIndices.push(0); // eslint-disable-next-line no-plusplus
+
+  for (var i = 0; i < threshold - 2; i++) {
+    // Calculate point average for next bucket (containing c)
+    var avgX = 0;
+    var avgY = 0;
+    var avgRangeStart = Math.floor((i + 1) * every) + 1;
+    var avgRangeEnd = Math.floor((i + 2) * every) + 1;
+    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    var avgRangeLength = avgRangeEnd - avgRangeStart; // eslint-disable-next-line no-plusplus
+
+    for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
+      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
+
+      avgY += data[avgRangeStart][1] * 1;
+    }
+
+    avgX /= avgRangeLength;
+    avgY /= avgRangeLength; // Get the range for this bucket
+
+    var rangeOffs = Math.floor((i + 0) * every) + 1;
+    var rangeTo = Math.floor((i + 1) * every) + 1; // Point a
+
+    var pointAX = Number(data[a][0]); // Enforce Number (value may be Date)
+
+    var pointAY = data[a][1] * 1; // eslint-disable-next-line no-multi-assign
+
+    maxArea = area = -1;
+    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
+
+    for (; rangeOffs < rangeTo; rangeOffs++) {
+      // Calculate triangle area over three buckets
+      area = Math.abs((pointAX - avgX) * (data[rangeOffs][1] - pointAY) - (pointAX - Number(data[rangeOffs][0])) * (avgY - pointAY)) * 0.5; // Modification: try to downsample the least amount of points possible when there are multiple series
+      // If all points in a bucket have the same area, prioritize the one with an x index
+      // that also existed from another series so we don't add another point unnecessarily.
+      // By default LTTB picks the leftmost point in the bucket
+
+      if (area > maxArea || area === maxArea && preferredDownsampleIndices.has(rangeOffs)) {
+        maxArea = area;
+        maxAreaPoint = data[rangeOffs];
+        nextA = rangeOffs; // Next a is this b
+        // Modification: save the index of the point with the most area
+
+        maxAreaIndex = rangeOffs;
+      }
+    } // eslint-disable-next-line no-plusplus
+
+
+    sampled[sampledIndex++] = maxAreaPoint; // Pick this point from the bucket
+
+    downsampledIndices.push(maxAreaIndex);
+    a = nextA; // This a is the next a (chosen b)
+  } // eslint-disable-next-line no-plusplus
+
+
+  sampled[sampledIndex++] = data[dataLength - 1]; // Always add last
+
+  downsampledIndices.push(dataLength - 1);
+  return {
+    downsampledData: sampled,
+    downsampledIndices: downsampledIndices
+  };
+};
+/**
+ * Strictly coerces the entire column to numbers if it only consists of numeric strings or numbers. Also determines
+ * if at least one of the values in the column can be loosely coerced to a number.
+ * If the column cannot be strictly downsampled (if it contains nulls or non-numeric strings), returns an empty array and
+ * returns that it cannot downsample the column.
+ */
+
+
+var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
+  // 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));
+  }) >= 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
+
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number') {
+      return true;
+    } // save value and continue to next
+
+
+    coercedColumn.push(coercedValue);
+    return false;
+  });
+  return {
+    canDownsampleColumn: canDownsampleColumn,
+    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
+    coercedColumn: canDownsampleColumn ? coercedColumn : []
+  };
+};
+/**
+ * Tries to coerce the x-column to numbers or dates, if it is eligible for downsampling.
+ * Only strictly increasing x-columns are eligible for downsampling.
+ * If the column is not eligible for downsampling, returns an empty array.
+ */
+
+
+var strictlyCoerceXColumn = function strictlyCoerceXColumn(column, fieldType) {
+  if (fieldType === 'number') {
+    var coercedXColumn = column.map(function (xValue) {
+      return Number(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
+      return coercedXColumn;
+    }
+  } else if (fieldType === 'time') {
+    var _coercedXColumn = column.map(function (xValue) {
+      return new Date(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(_coercedXColumn, fieldType)) {
+      return _coercedXColumn;
+    }
+  }
+
+  return [];
+};
+
+var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
+  var vizConfig = _ref.vizConfig;
+
+  var _a;
+
+  return (_a = vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(interfaces_1.VizBehavior.DOWNSAMPLING);
+};
+
+exports.isDownsamplingEnabledForViz = isDownsamplingEnabledForViz;
+
+var calculateThresholdOnRangeSelect = function calculateThresholdOnRangeSelect(_ref2) {
+  var firstIndex = _ref2.firstIndex,
+      lastIndex = _ref2.lastIndex,
+      dataSources = _ref2.dataSources,
+      width = _ref2.width;
+
+  var _a, _b, _c;
+
+  var window = lastIndex - firstIndex + 1;
+  var ratio = Math.round(Number(((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns[0]) === null || _c === void 0 ? void 0 : _c.length) / window) * 10) / 10;
+  return Math.round(ratio * Number(width));
+};
+
+exports.calculateThresholdOnRangeSelect = calculateThresholdOnRangeSelect;
+/**
+ * Calculates the downsampling threshold based on the range selection. If search zoom is enabled or there is no selection,
+ * then returns the width of the visualization.
+ *
+ * Otherwise calculates the threshold based on the ratio of the window selected compared to the size of the non-downsampled
+ * data sources. Returns null if the chart event's dataset does not match the passed in primary data source or if the chart is zoomed
+ * in for a categorical chart.
+ */
+
+var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_ref3) {
+  var enableSearchZoom = _ref3.enableSearchZoom,
+      dataSources = _ref3.dataSources,
+      selectChartEvent = _ref3.selectChartEvent,
+      width = _ref3.width,
+      xField = _ref3.xField,
+      y2Fields = _ref3.y2Fields;
+
+  var _a, _b, _c;
+
+  if (enableSearchZoom || !selectChartEvent) {
+    return Number(width);
+  }
+
+  var primaryDataSource = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary;
+
+  if (!primaryDataSource) {
+    return null;
+  }
+
+  var startXIndex = selectChartEvent.startXIndex,
+      endXIndex = selectChartEvent.endXIndex,
+      currentTarget = selectChartEvent.currentTarget;
+
+  try {
+    var xFieldIndex = (_a = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _a === void 0 ? void 0 : _a.fields.findIndex(function (field) {
+      return field.name === xField;
+    });
+    var downsampledXFieldIndex = (_b = currentTarget.dataSet) === null || _b === void 0 ? void 0 : _b.fields.findIndex(function (field) {
+      return field === xField;
+    });
+
+    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
+      return null;
+    }
+
+    var fullSeries = (_c = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _c === void 0 ? void 0 : _c.columns[xFieldIndex];
+    var downsampledSeries = currentTarget.dataSet.seriesList[downsampledXFieldIndex];
+    var firstIndex = fullSeries.findIndex(function (x) {
+      return downsampledSeries[startXIndex] === x;
+    });
+    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)({
+        firstIndex: firstIndex,
+        lastIndex: lastIndex,
+        dataSources: dataSources,
+        width: width
+      });
+    }
+  } catch (e) {
+    console.error('Error occurred while setting downsample threshold on range select event', e);
+  }
+
+  return null;
+};
+
+exports.calculateDownsamplingThreshold = calculateDownsamplingThreshold;
+
+var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fieldType) {
+  return column.every(function (value, index) {
+    if (fieldType === 'number') {
+      if (Number.isNaN(value)) {
+        return false;
+      }
+    }
+
+    if (fieldType === 'time') {
+      if (Number.isNaN(value.getTime())) {
+        return false;
+      }
+    }
+
+    if (index === 0) {
+      return true;
+    }
+
+    return value > column[index - 1];
+  });
+};
+/**
+ * Verifies that all of the columns that are displayed in a chart can be downsampled. Valid columns that can be
+ * displayed are those that contain at least one number. We can only downsample columns that only consist of numbers.
+ *
+ * If all columns can be downsampled, returns the x column coerced to time/number and y columns coerced to numbers.
+ * If not all columns can be downsampled, then returns empty arrays for both x and y
+ */
+
+
+var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes) {
+  var xColumn = [];
+  var yColumns = [];
+  var canDownsample = !ds.data.fields.some(function (field, index) {
+    var _a, _b;
+
+    var fieldName = (_a = field.name) !== null && _a !== void 0 ? _a : field;
+    var fieldType = (_b = fieldTypes[index]) !== null && _b !== void 0 ? _b : 'unknown';
+    var column = ds.data.columns[index];
+    var hasDisplayedColumnThatCantBeDownsampled = false;
+
+    if (fieldName === xField) {
+      xColumn = strictlyCoerceXColumn(column, fieldType);
+    } else if (yFields.has(fieldName)) {
+      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index]),
+          coercedColumn = _strictlyCoerceYColum.coercedColumn,
+          canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
+          canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
+      // be downsampled using LTTB
+
+
+      hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
+
+      if (hasDisplayedColumnThatCantBeDownsampled) {
+        return true;
+      }
+
+      if (canDownsampleColumn) {
+        yColumns.push(coercedColumn);
+      }
+    }
+
+    return false;
+  });
+
+  if (canDownsample) {
+    return {
+      xColumn: xColumn,
+      yColumns: yColumns
+    };
+  }
+
+  return {
+    xColumn: [],
+    yColumns: []
+  };
+};
+
+var pickIndicesFromDataSource = function pickIndicesFromDataSource(ds, indices) {
+  var sortedIndices = Array.from(indices).sort(function (a, b) {
+    return a - b;
+  });
+  var slicedColumns = [];
+  ds.data.columns.forEach(function (column) {
+    var slicedColumn = [];
+    sortedIndices.forEach(function (index) {
+      slicedColumn.push(column[index]);
+    });
+    slicedColumns.push(slicedColumn);
+  }); // update data columns with downsampled columns
+
+  return Object.assign(Object.assign({}, ds), {
+    data: Object.assign(Object.assign({}, ds.data), {
+      columns: slicedColumns
+    })
+  });
+};
+
+var downsampleDataSources = function downsampleDataSources(_ref4) {
+  var dataSources = _ref4.dataSources,
+      threshold = _ref4.threshold,
+      options = _ref4.options;
+
+  var _a, _b, _c;
+
+  var primaryDS = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary; // only downsample time series when number of data points are over threshold
+
+  var numPoints = (_c = (_b = (_a = primaryDS === null || primaryDS === void 0 ? void 0 : primaryDS.data) === null || _a === void 0 ? void 0 : _a.columns[0]) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+
+  if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
+    return dataSources;
+  }
+
+  var xField = options.xField,
+      yFields = options.yFields,
+      fieldTypes = options.fieldTypes;
+
+  if (!xField || !(yFields === null || yFields === void 0 ? void 0 : yFields.length) || !(fieldTypes === null || fieldTypes === void 0 ? void 0 : fieldTypes.length)) {
+    return dataSources;
+  }
+
+  var nonInternalYFields = new Set(yFields.filter(function (yField) {
+    return !yField.startsWith('_');
+  }));
+  var maxPointsInDownsample = Math.min(nonInternalYFields.size * threshold, numPoints); // Do not try to downsample if there are too many downsampled pts
+  // At the worst case, each series has non-overlapping downsampled pts
+  // which will mean that all points will be included in the downsampled result
+  // This will just lead to additional overhead due to coercing each
+  // x and y field to number
+
+  if (maxPointsInDownsample >= numPoints) {
+    return dataSources;
+  }
+
+  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
+      xColumn = _tryToCoerceAllDispla.xColumn,
+      yColumns = _tryToCoerceAllDispla.yColumns;
+
+  if (!yColumns.length || !xColumn.length) {
+    return dataSources;
+  }
+
+  var downsampledDataSources = Object.assign({}, dataSources);
+  var downsampledIndices = new Set();
+  yColumns.forEach(function (yColumn, columnIndex) {
+    // perform LTTB downsampling for current series, LTTB takes an [x, y] pair
+    var xyPair = yColumn.map(function (yValue, index) {
+      return [xColumn[index], yValue];
+    });
+
+    try {
+      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
+          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
+
+      downsampledIndicesForSeries.forEach(function (downsampleIndex) {
+        return downsampledIndices.add(downsampleIndex);
+      });
+    } catch (e) {
+      console.error("Error occurred while downsampling column ".concat(columnIndex), e);
+    }
+  }); // update data columns with downsampled columns
+
+  downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
+  return downsampledDataSources;
+};
+
+exports.downsampleDataSources = downsampleDataSources;
+
+/***/ }),
+
+/***/ 15:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+
+/***/ 153:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(7);
+
+var _defineProperty = __webpack_require__(9);
+
+var _toConsumableArray = __webpack_require__(8);
+
+var _taggedTemplateLiteral = __webpack_require__(81);
 
 var _templateObject;
 
@@ -285,17 +1219,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__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
 var lodash_1 = __webpack_require__(3);
 
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(15);
 
-var MapUtils_1 = __webpack_require__(92);
+var MapUtils_1 = __webpack_require__(115);
 
-var MarkerWrapper_1 = __webpack_require__(132);
+var MarkerWrapper_1 = __webpack_require__(154);
 
 exports.GEO_BOUND_PREFIX = '_geo_bounds_';
 exports.GEO_LAT_AND_LONG_FIELD = ['_geo_long_field', '_geo_lat_field'];
@@ -536,13 +1470,13 @@ exports.default = BubbleLayer;
 
 /***/ }),
 
-/***/ 132:
+/***/ 154:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(17);
+var _slicedToArray = __webpack_require__(7);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -561,11 +1495,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var maplibre_gl_1 = __webpack_require__(160);
+var maplibre_gl_1 = __webpack_require__(182);
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var Tooltip_1 = __webpack_require__(416);
+var Tooltip_1 = __webpack_require__(438);
 
 var MarkerWrapper = function MarkerWrapper(_a) {
   var longitude = _a.longitude,
@@ -650,94 +1584,174 @@ exports.default = MarkerWrapper;
 
 /***/ }),
 
-/***/ 133:
+/***/ 155:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/utils/dsl");
 
 /***/ }),
 
-/***/ 14:
+/***/ 16:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/style");
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+
+/***/ 17:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var styled_components_1 = __webpack_require__(4);
+
+var style_1 = __webpack_require__(18);
+
+var colorUtils_1 = __webpack_require__(15);
+
+var SizeAwareWrapper_1 = __webpack_require__(26);
+
+var Item = styled_components_1.default.div.attrs(function (_ref) {
+  var width = _ref.width;
+  return {
+    style: {
+      width: (0, style_1.toPx)(width)
+    }
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__Item",
+  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
+
+var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height;
+  return {
+    style: Object.assign(Object.assign({}, width && {
+      width: (0, style_1.toPx)(width)
+    }), height && {
+      height: (0, style_1.toPx)(height)
+    })
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__FixSizeItem",
+  componentId: "sc-1yhgpod-1"
+})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+});
+var ItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__ItemContent",
+  componentId: "sc-1yhgpod-2"
+})(["position:relative;min-height:100px;width:100%;"]);
+var FixSizeItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__FixSizeItemContent",
+  componentId: "sc-1yhgpod-3"
+})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
 
-/***/ }),
+var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
+  var FixedSizeContainer = function FixedSizeContainer(props) {
+    var width = props.width,
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+    var cachedHandleResize = React.useCallback(function (w, h) {
+      setContainerWidth(w);
+      setContainerHeight(h);
+    }, []);
 
-/***/ 15:
-/***/ (function(module, exports, __webpack_require__) {
+    var _React$useState = React.useState(Number(props.width)),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        containerWidth = _React$useState2[0],
+        setContainerWidth = _React$useState2[1];
 
-"use strict";
+    var _React$useState3 = React.useState(Number(props.height)),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        containerHeight = _React$useState4[0],
+        setContainerHeight = _React$useState4[1];
 
+    if (!height) {
+      return React.createElement(Item, {
+        "data-test": "item",
+        width: width,
+        backgroundColor: backgroundColor
+      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
+    }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.extendStaticWrapperProps = void 0;
-/**
- * @method extendStaticWrapperProps
- * @param {Object} props
- * @param {DashboardVizType} props.Wrapper
- * @param {DashboardVizType} props.Visualization
- */
+    return React.createElement(FixSizeItem, {
+      "data-test": "fix-size-item",
+      "data-splunk-visualization-version": "26.2.0 - 49b909915",
+      width: width,
+      height: height,
+      backgroundColor: backgroundColor
+    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, {
+      width: width,
+      height: height,
+      onResize: cachedHandleResize
+    }), React.createElement(Viz, Object.assign({}, props, {
+      width: containerWidth,
+      height: containerHeight
+    }))));
+  };
 
-var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
-  var Wrapper = _ref.Wrapper,
-      Visualization = _ref.Visualization;
-  var extendProperties = ['propTypes', 'defaultProps', 'config'];
-  extendProperties.forEach(function (prop) {
-    if (Visualization[prop]) {
-      // eslint-disable-next-line no-param-reassign
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
+  FixedSizeContainer.displayName = 'withFixedSizeContainer';
+  return FixedSizeContainer;
 };
 
-exports.extendStaticWrapperProps = extendStaticWrapperProps;
+exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 159:
+/***/ 18:
 /***/ (function(module, exports) {
 
-module.exports = require("chroma-js");
+module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 16:
+/***/ 181:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+module.exports = require("chroma-js");
 
 /***/ }),
 
-/***/ 160:
+/***/ 182:
 /***/ (function(module, exports) {
 
 module.exports = require("maplibre-gl");
 
 /***/ }),
 
-/***/ 161:
+/***/ 183:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(17);
+var _slicedToArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Choropleth = exports.cleanupChoropleth = exports.compareChoropleth = exports.compareGeom = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var MapUtils_1 = __webpack_require__(92);
+var MapUtils_1 = __webpack_require__(115);
 
-var MarkerWrapper_1 = __webpack_require__(132);
+var MarkerWrapper_1 = __webpack_require__(154);
 
 var getShapeId = function getShapeId(id) {
   return "shape-".concat(id);
@@ -991,35 +2005,151 @@ exports.default = ChoroplethLayer;
 
 /***/ }),
 
-/***/ 17:
+/***/ 19:
+/***/ (function(module, exports, __webpack_require__) {
+
+"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'];
+
+/***/ }),
+
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 18:
+/***/ 21:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(10);
+
+var _createClass = __webpack_require__(25);
+
+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;
+
+/***/ }),
+
+/***/ 22:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizCategory = void 0;
+var VizCategory;
+
+(function (VizCategory) {
+  VizCategory["SINGLE_VALUE"] = "Single Value";
+  VizCategory["TRENDS"] = "Trends";
+  VizCategory["COMPARISONS"] = "Comparisons";
+  VizCategory["TABLE"] = "Table";
+  VizCategory["GAUGE"] = "Gauge";
+  VizCategory["DISTRIBUTIONS"] = "Distributions";
+  VizCategory["CHOROPLETH"] = "Choropleth Maps";
+  VizCategory["SHAPES"] = "Shapes";
+  VizCategory["MISC"] = "misc";
+  VizCategory["FLOW"] = "Flow";
+  VizCategory["CORRELATION"] = "Correlation";
+  VizCategory["SPATIAL"] = "Spatial";
+})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
+
+/***/ }),
+
+/***/ 23:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extendStaticWrapperProps = void 0;
+/**
+ * @method extendStaticWrapperProps
+ * @param {Object} props
+ * @param {DashboardVizType} props.Wrapper
+ * @param {DashboardVizType} props.Visualization
+ */
+
+var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
+  var Wrapper = _ref.Wrapper,
+      Visualization = _ref.Visualization;
+  var extendProperties = ['propTypes', 'defaultProps', 'config'];
+  extendProperties.forEach(function (prop) {
+    if (Visualization[prop]) {
+      // eslint-disable-next-line no-param-reassign
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
+};
+
+exports.extendStaticWrapperProps = extendStaticWrapperProps;
+
+/***/ }),
+
+/***/ 24:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/createClass");
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 19:
+/***/ 25:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 2:
+/***/ 26:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 20:
+/***/ 27:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1027,7 +2157,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 var _toConsumableArray = __webpack_require__(8);
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(9);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -1049,7 +2179,7 @@ exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(16);
+var schemaUtils_1 = __webpack_require__(24);
 
 var VizBehavior_1 = __webpack_require__(6);
 
@@ -1256,56 +2386,73 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 21:
+/***/ 28:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlagContext");
 
 /***/ }),
 
-/***/ 25:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/id");
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 26:
+/***/ 31:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 27:
+/***/ 32:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 28:
-/***/ (function(module, exports) {
+/***/ 33:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __webpack_require__(0);
+
+function usePrevious(value) {
+  var ref = (0, react_1.useRef)();
+  (0, react_1.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+exports.default = usePrevious;
 
 /***/ }),
 
-/***/ 3:
+/***/ 34:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 30:
+/***/ 35:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
-/***/ 32:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1316,17 +2463,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(12);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var FixedSizeContainer_1 = __webpack_require__(17);
 /**
  * @method shouldShowIconPlaceholder
  * @param {object} dataSources
@@ -1398,24 +2545,24 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
-/***/ 33:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(9);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var DataSource_1 = __webpack_require__(34);
+var DataSource_1 = __webpack_require__(19);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -1460,32 +2607,16 @@ var getSortingParams = function getSortingParams(_ref) {
 
   return {
     currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
-  };
-};
-
-exports.getSortingParams = getSortingParams;
-
-/***/ }),
-
-/***/ 34:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
+    currentSortDir: currentSortDir,
+    onSort: onSort
+  };
+};
 
-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'];
+exports.getSortingParams = getSortingParams;
 
 /***/ }),
 
-/***/ 35:
+/***/ 39:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1496,7 +2627,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1550,422 +2681,128 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 36:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizCategory = void 0;
-var VizCategory;
+/***/ 4:
+/***/ (function(module, exports) {
 
-(function (VizCategory) {
-  VizCategory["SINGLE_VALUE"] = "Single Value";
-  VizCategory["TRENDS"] = "Trends";
-  VizCategory["COMPARISONS"] = "Comparisons";
-  VizCategory["TABLE"] = "Table";
-  VizCategory["GAUGE"] = "Gauge";
-  VizCategory["DISTRIBUTIONS"] = "Distributions";
-  VizCategory["CHOROPLETH"] = "Choropleth Maps";
-  VizCategory["SHAPES"] = "Shapes";
-  VizCategory["MISC"] = "misc";
-  VizCategory["FLOW"] = "Flow";
-  VizCategory["CORRELATION"] = "Correlation";
-  VizCategory["SPATIAL"] = "Spatial";
-})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 37:
+/***/ 40:
 /***/ (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__(38);
-
-var Options_1 = __webpack_require__(30);
-
-var SanitizeProps_1 = __webpack_require__(39);
-
-var TimezoneContext_1 = __webpack_require__(26);
-
-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__(41);
-
-var id_1 = __webpack_require__(25);
-
-var SplunkVisualization_1 = __webpack_require__(42);
-
-var VizBehavior_1 = __webpack_require__(6);
-
-var getSorting_1 = __webpack_require__(33);
-
-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.
-
-  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;
-
-    var _React$useContext = React.useContext(TimezoneContext_1.default),
-        serializedTimezone = _React$useContext.serializedTimezone;
-
-    if (serializedTimezone) {
-      /*
-          @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
-          This ensures that if a timezone was provided via TimezoneContext @splunk/moment time formatting
-           will use it.
-           @TODO(pwied):
-           - remove when we moved away from @splunk/moment
-           - provide timezone context to dynamic option evaluation phase
-      */
-      if (!moment_1.default.getDefaultSplunkTimezone()) {
-        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;
-
-    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
-
-
-    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];
-
-    var _React$useState5 = React.useState({}),
-        _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];
-
-    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];
-
-    var isMounted = React.useRef(true);
-    evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
-      try {
-        if (useAsyncEvaluatedOptions) {
-          var optionsToEvaluate = {
-            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
-            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-          };
-          var asyncDynamicOptionsEvaluatorParams = {
-            visualizationID: visualizationID,
-            props: props,
-            options: optionsToEvaluate,
-            dataSources: dataSources,
-            theme: vizConfig.themes
-          };
-          async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
-            setEvaluatedOptionsAsync(results.results);
-          }).catch(function () {
-            if (isMounted.current) {
-              setUseAsyncEvaluatedOptions(false);
-            }
-          });
-        } else {
-          var dataFrames = dataFramesInState;
-
-          if (dataSources !== dataSourcesInState) {
-            setDataSourcesInState(dataSources);
-            dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
-            setDataFramesInState(dataFrames);
-          }
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
 
-          return Options_1.Options.evaluate({
-            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
-            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-          }, dataSources, themeFunc, dataFrames);
-        }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error("unexpected error evaluating options: ".concat(e.message));
-        return {};
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
       }
+    };
+  }
 
-      return {};
-    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    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
-    // 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);
-    });
-    React.useEffect(function () {
-      return function () {
-        if (useAsyncEvaluatedOptions) {
-          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
-
-    var _vizConfig$requiredPr = vizConfig.requiredProps,
-        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
-
-
-    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 _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 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;
-          }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
 
-          return onEventTrigger({
-            originalEvent: ev,
-            payload: payload,
-            type: eventName
-          });
-        };
+var __exportStar = this && this.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
+};
 
-        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
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
+__exportStar(__webpack_require__(41), exports);
 
-    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
-      themeFunc: themeFunc
-    }));
-    /**
-     * PAGE_AND_SORT behavior
-     *
-     * Some visualizations, like table, requires metadata about the datasource,
-     * like total number of results, current count, offset, and sort, for rendering
-     * paginator and sorting direction. In this approach, the visualization
-     * allow users to set 'paginateDataSourceKey' to select which datasource
-     * should the visualization extract the metadata from. It defaults to 'primary' datasource.
-     * The visualization config should set the PAGE_AND_SORT behavior to receive
-     * 'requestParams', 'meta' and onRequestParams callback as props.
-     *
-     * In future, we could automatically detect which all datasources are being used
-     * and bind those magically to pagination/sorting behavior.
-     */
+__exportStar(__webpack_require__(42), exports);
 
-    var dataSourceMetadata = {};
-    var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
+__exportStar(__webpack_require__(19), exports);
 
-    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'], {});
+__exportStar(__webpack_require__(43), exports);
 
-      var handleRequestParamsChange = function handleRequestParamsChange(payload) {
-        return onRequestParamsChange(paginateDataSourceKey, payload);
-      };
+__exportStar(__webpack_require__(44), exports);
 
-      var sortParams = (0, getSorting_1.getSortingParams)({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      var paginatorParams = (0, getPagination_1.getPaginationParams)({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      dataSourceMetadata = {
-        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
+__exportStar(__webpack_require__(45), exports);
 
+__exportStar(__webpack_require__(46), exports);
 
-    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
-      return null;
-    }
+__exportStar(__webpack_require__(47), exports);
 
-    return React.createElement(SanitizedReactViz, Object.assign({
-      mode: mode,
-      width: width,
-      height: height
-    }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
-  };
+__exportStar(__webpack_require__(48), exports);
 
-  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
+__exportStar(__webpack_require__(49), exports);
 
-  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+__exportStar(__webpack_require__(21), exports);
 
-  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
-};
+__exportStar(__webpack_require__(6), exports);
 
-exports.default = withDashboardViz;
+__exportStar(__webpack_require__(22), exports);
 
-/***/ }),
+__exportStar(__webpack_require__(50), exports);
 
-/***/ 38:
-/***/ (function(module, exports) {
+__exportStar(__webpack_require__(51), exports);
 
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
+__exportStar(__webpack_require__(52), exports);
 
-/***/ }),
+__exportStar(__webpack_require__(53), exports);
 
-/***/ 39:
-/***/ (function(module, exports) {
+__exportStar(__webpack_require__(54), exports);
 
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+__exportStar(__webpack_require__(55), exports);
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
+/***/ 41:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("styled-components");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
 
-/***/ 40:
-/***/ (function(module, exports) {
+/***/ 42:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/moment");
+"use strict";
+
+/**
+ *  A data structure used at runtime to wire up a visualization.
+ */
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
 
-/***/ 41:
-/***/ (function(module, exports) {
+/***/ 43:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/async-dynamic-options-evaluator");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
 
-/***/ 410:
+/***/ 432:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1990,29 +2827,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.PureMap = exports.config = exports.themes = exports.useIconPlaceholder = exports.computeVizProps = void 0;
 /* eslint-disable no-sequences */
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(15);
 
-var hocUtils_1 = __webpack_require__(27);
+var hocUtils_1 = __webpack_require__(34);
 
-var JSONSchemaUtils_1 = __webpack_require__(28);
+var JSONSchemaUtils_1 = __webpack_require__(35);
 
-var PureMap_1 = __webpack_require__(411);
+var PureMap_1 = __webpack_require__(433);
 
 exports.PureMap = PureMap_1.default;
 
-var config_1 = __webpack_require__(421);
+var config_1 = __webpack_require__(443);
 
 exports.config = config_1.default;
 
-var withDashboardViz_1 = __webpack_require__(37);
+var withDashboardViz_1 = __webpack_require__(56);
 
-var mapUtils_1 = __webpack_require__(422);
+var mapUtils_1 = __webpack_require__(444);
 
-var BubbleLayer_1 = __webpack_require__(131);
+var BubbleLayer_1 = __webpack_require__(153);
 
-var dataUtils_1 = __webpack_require__(121);
+var dataUtils_1 = __webpack_require__(14);
 
 var formatLayer = function formatLayer(l, dataFields, dataSourceData, transformedData) {
   // add key `geobin` to the layer object if the data is returned from geostats commands
@@ -2232,44 +3069,44 @@ exports.default = Map;
 
 /***/ }),
 
-/***/ 411:
+/***/ 433:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(17);
+var _slicedToArray = __webpack_require__(7);
 
 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 React = __webpack_require__(0);
 
 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__(159);
+var chroma = __webpack_require__(181);
 
-var maplibre_gl_1 = __webpack_require__(160);
+var maplibre_gl_1 = __webpack_require__(182);
 
 var i18n_1 = __webpack_require__(2);
 
-var MapContext_1 = __webpack_require__(412);
+var MapContext_1 = __webpack_require__(434);
 
-var PureMapContainer_1 = __webpack_require__(413);
+var PureMapContainer_1 = __webpack_require__(435);
 
-var MapUtils_1 = __webpack_require__(92);
+var MapUtils_1 = __webpack_require__(115);
 
-var ClusterLayer_1 = __webpack_require__(415);
+var ClusterLayer_1 = __webpack_require__(437);
 
-var ChoroplethLayer_1 = __webpack_require__(161);
+var ChoroplethLayer_1 = __webpack_require__(183);
 
-var LocalChoroplethLayer_1 = __webpack_require__(418);
+var LocalChoroplethLayer_1 = __webpack_require__(440);
 
 exports.DEFAULT_CENTER = [0, 0];
 exports.DEFAULT_CONTROL_BACKGROUND_COLOR = '#2b3033';
@@ -2696,14 +3533,14 @@ exports.default = PureMap;
 
 /***/ }),
 
-/***/ 412:
+/***/ 434:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/MapContext");
 
 /***/ }),
 
-/***/ 413:
+/***/ 435:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2717,9 +3554,9 @@ var styled_components_1 = __webpack_require__(4);
 
 var lodash_1 = __webpack_require__(3);
 
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(18);
 
-var maplibre_gl_css_1 = __webpack_require__(414);
+var maplibre_gl_css_1 = __webpack_require__(436);
 
 var PureMapContainer = styled_components_1.default.div.attrs({
   'data-testid': 'puremap-container'
@@ -2757,7 +3594,7 @@ exports.default = PureMapContainer;
 
 /***/ }),
 
-/***/ 414:
+/***/ 436:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2766,7 +3603,7 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ 415:
+/***/ 437:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2776,13 +3613,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var BubbleLayer_1 = __webpack_require__(131);
+var BubbleLayer_1 = __webpack_require__(153);
 
-var MarkerLayer_1 = __webpack_require__(417);
+var MarkerLayer_1 = __webpack_require__(439);
 
-var MapUtils_1 = __webpack_require__(92);
+var MapUtils_1 = __webpack_require__(115);
 
 var ClusterLayer = function ClusterLayer(_ref) {
   var clusterLayer = _ref.clusterLayer,
@@ -2821,13 +3658,13 @@ exports.default = ClusterLayer;
 
 /***/ }),
 
-/***/ 416:
+/***/ 438:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _taggedTemplateLiteral = __webpack_require__(59);
+var _taggedTemplateLiteral = __webpack_require__(81);
 
 var _templateObject;
 
@@ -2836,11 +3673,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.convertDegToDMS = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var Popover_1 = __webpack_require__(62);
+var Popover_1 = __webpack_require__(84);
 
 var i18n_1 = __webpack_require__(2);
 
@@ -2945,15 +3782,15 @@ exports.default = Tooltip;
 
 /***/ }),
 
-/***/ 417:
+/***/ 439:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(9);
 
-var _taggedTemplateLiteral = __webpack_require__(59);
+var _taggedTemplateLiteral = __webpack_require__(81);
 
 var _templateObject;
 
@@ -2977,15 +3814,15 @@ exports.generateMarkerWrapperProps = exports.MarkerIcon = void 0;
 
 var styled_components_1 = __webpack_require__(4);
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(15);
 
 var lodash_1 = __webpack_require__(3);
 
-var MapUtils_1 = __webpack_require__(92);
+var MapUtils_1 = __webpack_require__(115);
 
-var MarkerWrapper_1 = __webpack_require__(132);
+var MarkerWrapper_1 = __webpack_require__(154);
 
 var MarkerIcon = function MarkerIcon(_a) {
   var theme = _a.theme,
@@ -3111,29 +3948,41 @@ exports.default = MarkerLayer;
 
 /***/ }),
 
-/***/ 418:
+/***/ 44:
+/***/ (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__(17);
+var _slicedToArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(12);
 
-var GeoRegistry_1 = __webpack_require__(419);
+var GeoRegistry_1 = __webpack_require__(441);
 
-var GeoJsonProvider_1 = __webpack_require__(420);
+var GeoJsonProvider_1 = __webpack_require__(442);
 
-var MapUtils_1 = __webpack_require__(92);
+var MapUtils_1 = __webpack_require__(115);
 
-var ChoroplethLayer_1 = __webpack_require__(161);
+var ChoroplethLayer_1 = __webpack_require__(183);
 
 var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
   var _a, _b;
@@ -3312,184 +4161,32 @@ var LocalChoroplethLayer = function LocalChoroplethLayer(props) {
       handleMapClick: function handleMapClick(e) {
         return _handleMapClick(e, el.idx);
       },
-      isThemeChanged: isThemeChanged,
-      geomData: geoJson.features[i].geometry,
-      additionalFields: additionalFields[el.idx]
-    });
-  }));
-};
-
-exports.default = LocalChoroplethLayer;
-
-/***/ }),
-
-/***/ 419:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/GeoRegistry");
-
-/***/ }),
-
-/***/ 42:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-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__(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,
+      isThemeChanged: isThemeChanged,
+      geomData: geoJson.features[i].geometry,
+      additionalFields: additionalFields[el.idx]
+    });
+  }));
+};
 
-  /**
-   * A callback to communicate computed props to a consumer
-   */
-  onComputedProps: T.func,
+exports.default = LocalChoroplethLayer;
 
-  /**
-   * 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
-};
-/**
- *
- */
+/***/ 441:
+/***/ (function(module, exports) {
 
-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/visualization-context/GeoRegistry");
 
 /***/ }),
 
-/***/ 420:
+/***/ 442:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/GeoJsonProvider");
 
 /***/ }),
 
-/***/ 421:
+/***/ 443:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3499,27 +4196,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var visualization_icons_1 = __webpack_require__(52);
+var visualization_icons_1 = __webpack_require__(74);
 
-var placeholders_1 = __webpack_require__(50);
+var placeholders_1 = __webpack_require__(72);
 
-var schemaUtils_1 = __webpack_require__(16);
+var schemaUtils_1 = __webpack_require__(24);
 
-var visualization_color_palettes_1 = __webpack_require__(51);
+var visualization_color_palettes_1 = __webpack_require__(73);
 
-var themes_1 = __webpack_require__(60);
+var themes_1 = __webpack_require__(82);
 
 var i18n_1 = __webpack_require__(2);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var VizCategory_1 = __webpack_require__(36);
+var VizCategory_1 = __webpack_require__(22);
 
-var configUtils_1 = __webpack_require__(20);
+var configUtils_1 = __webpack_require__(27);
 
-var MapUtils_1 = __webpack_require__(92);
+var MapUtils_1 = __webpack_require__(115);
 
-var BackgroundColor_1 = __webpack_require__(53);
+var BackgroundColor_1 = __webpack_require__(75);
 
 var defaultContext = {
   colorRangeConfig: [{
@@ -4209,7 +4906,7 @@ exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
 
-/***/ 422:
+/***/ 444:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4220,15 +4917,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.columnsNullToZeros = void 0;
 
-var types_1 = __webpack_require__(83);
+var types_1 = __webpack_require__(106);
 
-var dsl_1 = __webpack_require__(133);
+var dsl_1 = __webpack_require__(155);
 
-var hocUtils_1 = __webpack_require__(27);
+var hocUtils_1 = __webpack_require__(34);
 
-var JSONSchemaUtils_1 = __webpack_require__(28);
+var JSONSchemaUtils_1 = __webpack_require__(35);
 
-var BubbleLayer_1 = __webpack_require__(131);
+var BubbleLayer_1 = __webpack_require__(153);
 
 var columnsNullToZeros = function columnsNullToZeros(config, dataSources, options) {
   var _a, _b;
@@ -4279,45 +4976,43 @@ exports.columnsNullToZeros = columnsNullToZeros;
 
 /***/ }),
 
-/***/ 43:
+/***/ 45:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 46:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
 
-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
-    }
-  }]);
+/***/ 47:
+/***/ (function(module, exports, __webpack_require__) {
 
-  return DefaultVizActionHandler;
-}();
+"use strict";
 
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
 
-/***/ 44:
+/***/ 48:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4326,298 +5021,502 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 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
- * re-evaluates the function when passed dependencies change.
- *
- * It is different from the internal React useMemo in the following aspects:
- * - it only stores the last evaluated result
- * - it uses a deep equality check to determine if dependencies have changed
- *
- * Inspired by apollo-client's useDeepMemo
- *
- * @param fn the function to be executed and
- * @param dependencies an array of dependencies
- */
+/***/ 49:
+/***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
 
-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()
-    };
-  }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  return ref.current.value;
-};
+/***/ }),
 
-exports.useDeepMemo = useDeepMemo;
+/***/ 50:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
 
-/***/ 45:
+/***/ 51:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 52:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 53:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 54:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 55:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 56:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+var _slicedToArray = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(57);
+
+var Options_1 = __webpack_require__(16);
+
+var SanitizeProps_1 = __webpack_require__(58);
+
+var TimezoneContext_1 = __webpack_require__(32);
+
+var moment_1 = __webpack_require__(59);
+
+var FeatureFlagContext_1 = __webpack_require__(28);
+
+var styled_components_1 = __webpack_require__(4);
+
+var hocUtils_1 = __webpack_require__(34);
+
+var JSONSchemaUtils_1 = __webpack_require__(35);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(60);
+
+var id_1 = __webpack_require__(31);
+
+var SplunkVisualization_1 = __webpack_require__(61);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var getSorting_1 = __webpack_require__(38);
+
+var getPagination_1 = __webpack_require__(39);
+
+var useDeepMemo_1 = __webpack_require__(62);
+
+var MissingPropsMessage_1 = __webpack_require__(63);
+
+var withEditModeCover_1 = __webpack_require__(64);
+
+var withPlaceholder_1 = __webpack_require__(65);
+
+var useDownsampleDataSources_1 = __webpack_require__(66);
+
+var dataUtils_1 = __webpack_require__(14);
+
+var featureFlagUtils_1 = __webpack_require__(68);
+/**
+ * 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.
+
+  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;
+
+    var _React$useContext = React.useContext(TimezoneContext_1.default),
+        serializedTimezone = _React$useContext.serializedTimezone;
+
+    if (serializedTimezone) {
+      /*
+          @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
+          This ensures that if a timezone was provided via TimezoneContext @splunk/moment time formatting
+           will use it.
+           @TODO(pwied):
+           - remove when we moved away from @splunk/moment
+           - provide timezone context to dynamic option evaluation phase
+      */
+      if (!moment_1.default.getDefaultSplunkTimezone()) {
+        moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
+      }
+    }
 
-var React = __webpack_require__(1);
+    var themeFunc = function themeFunc(themeVar) {
+      var _a, _b;
 
-var T = __webpack_require__(0);
+      return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
+    };
 
-var i18n_1 = __webpack_require__(2);
+    var bgColorFromTheme = themeFunc('defaultBackgroundColor');
 
-var Message_1 = __webpack_require__(10);
+    var _ref = (0, getSettingsFromThemedProps_1.default)({
+      theme: theme
+    }),
+        currentThemeFamily = _ref.family,
+        currentThemeColorScheme = _ref.colorScheme,
+        currentThemeDensity = _ref.density;
 
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method isMissing
- * @param {any} v
- * @returns {boolean} true if the input value === null or undefined
- */
+    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
 
-var isMissing = function isMissing(v) {
-  return v === null || v === undefined;
-};
 
-exports.isMissing = isMissing;
-/**
- * @method misskingKeys
- * @param {string[]} keys
- * @param {object} target
- * @returns {string[]} the keys of missing required props
- */
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
 
-var missingKeys = function missingKeys(keys, target) {
-  return keys.filter(function (k) {
-    return (0, exports.isMissing)(target[k]);
-  });
-};
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
 
-exports.missingKeys = missingKeys;
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  missingProps: T.arrayOf(T.string)
-};
-/**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
- */
+    var _React$useState5 = React.useState({}),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        dataSourcesInState = _React$useState6[0],
+        setDataSourcesInState = _React$useState6[1];
 
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
-    width: width,
-    height: height,
-    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
-  });
-};
+    var _React$useState7 = React.useState(),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        dataFramesInState = _React$useState8[0],
+        setDataFramesInState = _React$useState8[1];
 
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
+    var _React$useState9 = React.useState(Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_useWebWorkersForDSL'))),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        useAsyncEvaluatedOptions = _React$useState10[0],
+        setUseAsyncEvaluatedOptions = _React$useState10[1];
 
-/***/ }),
+    var isDownsamplingEnabledByFeatureFlag = Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_enableDownsampling);
+    var isMounted = React.useRef(true);
+    var optionsToEvaluate = React.useMemo(function () {
+      return {
+        context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+        options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
+      };
+    }, [options, context]);
+
+    var _React$useState11 = React.useState(Number(width)),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        threshold = _React$useState12[0],
+        setThreshold = _React$useState12[1];
+
+    var onDownsamplingThresholdChange = React.useCallback(function (newThreshold) {
+      setThreshold(newThreshold);
+    }, []);
+    var isDownsamplingEnabled = React.useMemo(function () {
+      return isDownsamplingEnabledByFeatureFlag && (0, dataUtils_1.isDownsamplingEnabledForViz)({
+        vizConfig: vizConfig
+      });
+    }, [isDownsamplingEnabledByFeatureFlag]);
+    var downsamplingProps = React.useMemo(function () {
+      if (!isDownsamplingEnabled) {
+        return {};
+      }
 
-/***/ 46:
-/***/ (function(module, exports, __webpack_require__) {
+      return {
+        onDownsamplingThresholdChange: onDownsamplingThresholdChange,
+        originalDataSources: dataSources
+      };
+    }, [dataSources, isDownsamplingEnabled, onDownsamplingThresholdChange]);
+    var downsampledDataSources = (0, useDownsampleDataSources_1.default)({
+      options: optionsToEvaluate.options,
+      context: optionsToEvaluate.context,
+      dataSources: dataSources,
+      threshold: threshold,
+      isDownsamplingEnabled: isDownsamplingEnabled
+    });
+    evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          var asyncDynamicOptionsEvaluatorParams = {
+            visualizationID: visualizationID,
+            props: props,
+            options: optionsToEvaluate,
+            dataSources: downsampledDataSources,
+            theme: vizConfig.themes,
+            bypassCloneDeepOptionScope: Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_bypassCloneDeepOptionScope')),
+            lazyLoadingDataFrame: Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_lazyLoadingDataFrame'))
+          };
+          async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
+            setEvaluatedOptionsAsync(results.results);
+          }).catch(function () {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
+          });
+        } else {
+          var dataFrames = dataFramesInState;
 
-"use strict";
+          if (downsampledDataSources !== dataSourcesInState) {
+            setDataSourcesInState(downsampledDataSources);
+            dataFrames = Options_1.Options.dataFrameFromDataSource(downsampledDataSources, (0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_lazyLoadingDataFrame'));
+            setDataFramesInState(dataFrames);
+          }
 
+          var result = Options_1.Options.evaluate(optionsToEvaluate, downsampledDataSources, themeFunc, dataFrames, (0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_bypassCloneDeepOptionScope'));
+          return result;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error("unexpected error evaluating options: ".concat(e.message));
+        return {};
+      }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+      return {};
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, optionsToEvaluate, downsampledDataSources, serializedTimezone, useAsyncEvaluatedOptions]);
+    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 React = __webpack_require__(1);
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    var clonedEvaluatedOptions = evaluatedOptionsToUse;
 
-var styled_components_1 = __webpack_require__(4);
+    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
+    // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
 
-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.1.1 - b6df0a015"
-}).withConfig({
-  displayName: "withEditModeCover__Blocker",
-  componentId: "sc-1gsbnxb-1"
-})(["position:relative;width:100%;height:100%;"]);
-/**
- * HOC that renders a cover layer in edit mode
- * @method withEditModeCover
- * @param {ExtendedDashViz} Visualization
- * @returns {ExtendedDashViz} Wrapper
- */
+    React.useEffect(function () {
+      onComputedProps(clonedEvaluatedOptions);
+    });
+    React.useEffect(function () {
+      return function () {
+        if (useAsyncEvaluatedOptions) {
+          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
 
-var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
-  var Wrapper = function Wrapper(props) {
-    var mode = props.mode;
-    var showEditCover = mode === 'edit' && !disableEditModeCover;
-    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
-      "data-test": "edit-mode-cover"
-    }));
-  };
+    var _vizConfig$requiredPr = vizConfig.requiredProps,
+        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+        supports = vizConfig.supports;
+    var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
 
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
+    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
 
-exports.default = withEditModeCover;
 
-/***/ }),
+    var eventCallbackProps = {};
 
-/***/ 47:
-/***/ (function(module, exports, __webpack_require__) {
+    if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
+      var supportedEvents = vizConfig.events;
+      Object.keys(supportedEvents).forEach(function (eventName) {
+        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
 
-"use strict";
+        var payload = {};
 
+        if (Array.isArray(payloadKeys) && payloadKeys.length) {
+          payloadKeys.forEach(function (p) {
+            payload[p] = evaluatedOptionsToUse[p];
+          });
+        }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+        eventCallbackProps[eventCallbackPropName] = function (ev) {
+          if (ev && ev.payload) {
+            payload = ev.payload;
+          }
 
-var React = __webpack_require__(1);
+          return onEventTrigger({
+            originalEvent: ev,
+            payload: payload,
+            type: eventName
+          });
+        };
 
-var colorUtils_1 = __webpack_require__(12);
+        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
 
-var variables_1 = __webpack_require__(11);
 
-var IconPlaceholder_1 = __webpack_require__(32);
+    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+      themeFunc: themeFunc
+    }));
+    /**
+     * PAGE_AND_SORT behavior
+     *
+     * Some visualizations, like table, requires metadata about the datasource,
+     * like total number of results, current count, offset, and sort, for rendering
+     * paginator and sorting direction. In this approach, the visualization
+     * allow users to set 'paginateDataSourceKey' to select which datasource
+     * should the visualization extract the metadata from. It defaults to 'primary' datasource.
+     * The visualization config should set the PAGE_AND_SORT behavior to receive
+     * 'requestParams', 'meta' and onRequestParams callback as props.
+     *
+     * In future, we could automatically detect which all datasources are being used
+     * and bind those magically to pagination/sorting behavior.
+     */
 
-var VizBehavior_1 = __webpack_require__(6);
+    var dataSourceMetadata = {};
+    var OptionKey = 'paginateDataSourceKey';
+    var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
 
-var hocUtils_1 = __webpack_require__(15);
+    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 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 handleRequestParamsChange = function handleRequestParamsChange(payload) {
+        return onRequestParamsChange(paginateDataSourceKey, payload);
+      };
 
-  var Wrapper = function Wrapper(props) {
-    var _a, _b;
+      var sortParams = (0, getSorting_1.getSortingParams)({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      var paginatorParams = (0, getPagination_1.getPaginationParams)({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      dataSourceMetadata = {
+        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
 
-    var dataSources = props.dataSources,
-        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",
-        icon: icon,
-        width: width,
-        height: height,
-        backgroundColor: bgColorFromTheme,
-        iconColor: iconColor
-      });
+    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
+      return null;
     }
 
-    return React.createElement(Visualization, Object.assign({}, props));
+    return React.createElement(SanitizedReactViz, Object.assign({
+      mode: mode,
+      width: width,
+      height: height
+    }, downsamplingProps, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
 
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
-
-exports.default = withPlaceholder;
+  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
 
-/***/ 50:
-/***/ (function(module, exports) {
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
+};
 
-module.exports = require("@splunk/visualization-icons/placeholders");
+exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 51:
+/***/ 57:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-color-palettes");
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 52:
+/***/ 58:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-icons");
-
-/***/ }),
-
-/***/ 53:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-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;
-  return [{
-    label: (0, i18n_1._)(label || 'Background'),
-    option: 'backgroundColor',
-    editor: 'editor.color',
-    editorProps: {
-      labelPosition: labelPosition || 'top',
-      themes: themes
-    }
-  }];
-};
-
-exports.default = background;
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
 /***/ 59:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+module.exports = require("@splunk/moment");
 
 /***/ }),
 
@@ -4647,6 +5546,7 @@ var VizBehavior;
    */
   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.
@@ -4663,617 +5563,746 @@ var VizBehavior;
 /***/ 60:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes");
+module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 62:
-/***/ (function(module, exports) {
+/***/ 61:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(10);
+
+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__(1);
+
+var lodash_1 = __webpack_require__(3);
+
+var VizActionHandler_1 = __webpack_require__(21); // 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
+};
+/**
+ *
+ */
 
-module.exports = require("@splunk/react-ui/Popover");
+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;
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
+/***/ 62:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+"use strict";
 
-/***/ }),
 
-/***/ 8:
-/***/ (function(module, exports) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeepMemo = void 0;
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+var react_1 = __webpack_require__(0);
 
-/***/ }),
+var lodash_1 = __webpack_require__(3);
+/**
+ * This hook evaluates and stores the result of a passed function and only
+ * re-evaluates the function when passed dependencies change.
+ *
+ * It is different from the internal React useMemo in the following aspects:
+ * - it only stores the last evaluated result
+ * - it uses a deep equality check to determine if dependencies have changed
+ *
+ * Inspired by apollo-client's useDeepMemo
+ *
+ * @param fn the function to be executed and
+ * @param dependencies an array of dependencies
+ */
 
-/***/ 83:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/utils/types");
+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()
+    };
+  }
 
-/***/ 9:
-/***/ (function(module, exports) {
+  return ref.current.value;
+};
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 92:
+/***/ 63:
 /***/ (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__(93);
+exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var chroma = __webpack_require__(159);
+var React = __webpack_require__(0);
 
-var colorUtils_1 = __webpack_require__(12);
+var T = __webpack_require__(1);
 
-var visualization_color_palettes_1 = __webpack_require__(51);
+var i18n_1 = __webpack_require__(2);
 
-var types_1 = __webpack_require__(83);
+var Message_1 = __webpack_require__(12);
 
-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
+var FixedSizeContainer_1 = __webpack_require__(17);
+/**
+ * @method isMissing
+ * @param {any} v
+ * @returns {boolean} true if the input value === null or undefined
+ */
 
-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
+var isMissing = function isMissing(v) {
+  return v === null || v === undefined;
+};
 
-exports.MAX_BUBBLE_RADIUS = 45.26; // 85px
+exports.isMissing = isMissing;
+/**
+ * @method misskingKeys
+ * @param {string[]} keys
+ * @param {object} target
+ * @returns {string[]} the keys of missing required props
+ */
 
-exports.DEFAULT_OPACITY = 0.8;
-var LONGITUDE = 'longitude';
-var LATITUDE = 'latitude';
-var LAYER_TYPE;
+var missingKeys = function missingKeys(keys, target) {
+  return keys.filter(function (k) {
+    return (0, exports.isMissing)(target[k]);
+  });
+};
 
-(function (LAYER_TYPE) {
-  LAYER_TYPE["Marker"] = "marker";
-  LAYER_TYPE["Bubble"] = "bubble";
-  LAYER_TYPE["Choropleth"] = "choropleth";
-})(LAYER_TYPE = exports.LAYER_TYPE || (exports.LAYER_TYPE = {}));
+exports.missingKeys = missingKeys;
+var propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  missingProps: T.arrayOf(T.string)
+};
 /**
- * Construct a tile preset {key: config} by combining the default + custom tile configs
- * Also returns the default tile config for each theme - light/dark
- * @param {MapContextInterface} args
- * @param {BaseTileConfig[]} args.defaultTileConfig
- * @param {BaseTileConfig[]} args.customTileConfig
- * @returns {Object} tile preset
+ * @method MissingPropsMessage
+ * @param {MissingPropsProps} props
+ * @returns {React.ReactElement}
  */
 
+var MissingPropsMessage = function MissingPropsMessage(props) {
+  var width = props.width,
+      height = props.height,
+      missingProps = props.missingProps;
+  return React.createElement(Message_1.default, {
+    "data-test": "message",
+    width: width,
+    height: height,
+    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
+  });
+};
 
-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;
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
 
-  var _a, _b;
+/***/ }),
 
-  var tilePreset = {};
-  var defaultTileLight = {};
-  var defaultTileDark = {};
-  var tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
-  (0, lodash_1.forEach)(tileConfigs, function (tileConfig) {
-    var key = tileConfig === null || tileConfig === void 0 ? void 0 : tileConfig.key;
-    var updatedConfig = Object.assign(Object.assign({
-      theme: 'all'
-    }, tileConfig), {
-      version: exports.MAP_STYLE_VERSION_NUMBER
-    });
-    tilePreset[key] = updatedConfig;
-  });
+/***/ 64:
+/***/ (function(module, exports, __webpack_require__) {
 
-  if (defaultTileConfig.length > 0) {
-    defaultTileLight = (_a = defaultTileConfig.find(function (config) {
-      return config.theme === 'light';
-    })) !== null && _a !== void 0 ? _a : defaultTileConfig.find(function (config) {
-      return config.theme === undefined;
-    });
-    defaultTileDark = (_b = defaultTileConfig.find(function (config) {
-      return config.theme === 'dark';
-    })) !== null && _b !== void 0 ? _b : defaultTileConfig.find(function (config) {
-      return config.theme === undefined;
-    });
-  }
+"use strict";
 
-  return {
-    tilePreset: tilePreset,
-    defaultTileLight: defaultTileLight,
-    defaultTileDark: defaultTileDark
-  };
-};
 
-exports.getTilePreset = getTilePreset;
-/**
- * Check if baseLayerTileServer is in tilePreset and config matches current theme, if yes, return.
- * If no, construct a mapStyle with baseLayerTilerServer and baseLayerTileServerType
- * Else return default tile config based on current theme
- * @param {Object} args
- * @param {BaseTileConfig[]} args.tilePreset
- * @param {String} args.baseLayerTilerServer
- * @param {String} args.baseLayerTileServerType
- * @param {String} args.colorScheme
- * @param {BaseTileConfig} args.defaultTileDark
- * @param {BaseTileConfig} args.defaultTileLight
- * @returns {BaseTileConfig} mapStyle
- */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-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;
+var React = __webpack_require__(0);
 
-  if (!showBaseLayer) {
-    return {
-      version: exports.MAP_STYLE_VERSION_NUMBER,
-      sources: {
-        'base-tiles': {
-          type: 'raster',
-          tiles: ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='],
-          tileSize: 256
-        }
-      },
-      layers: [{
-        id: 'base-layer',
-        type: 'raster',
-        source: 'base-tiles',
-        minzoom: 0,
-        maxzoom: 22
-      }]
-    };
-  }
+var styled_components_1 = __webpack_require__(4);
+
+var hocUtils_1 = __webpack_require__(23);
+
+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.2.0 - 49b909915"
+}).withConfig({
+  displayName: "withEditModeCover__Blocker",
+  componentId: "sc-1gsbnxb-1"
+})(["position:relative;width:100%;height:100%;"]);
+/**
+ * HOC that renders a cover layer in edit mode
+ * @method withEditModeCover
+ * @param {ExtendedDashViz} Visualization
+ * @returns {ExtendedDashViz} Wrapper
+ */
 
-  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === 'all')) {
-    return tilePreset[baseLayerTileServer];
-  }
+var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
+  var Wrapper = function Wrapper(props) {
+    var mode = props.mode;
+    var showEditCover = mode === 'edit' && !disableEditModeCover;
+    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
+      "data-test": "edit-mode-cover"
+    }));
+  };
 
-  if (baseLayerTileServer && baseLayerTileServerType) {
-    var tiles = [];
-    /**
-     * Tile Server URLs (eg: http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png) can specify the variable {s} which refers to a subdomain
-     * 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
-     */
+  (0, hocUtils_1.extendStaticWrapperProps)({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
 
-    if (baseLayerTileServer.match(/^(https?):\/\/{(s|S)}\../)) {
-      /**
-       * sXML (Leaflet) allows users to define their own tile server URLs + list of available subdomains
-       * In order to preserve this behavior during conversion to splunk.map,
-       * if the variable {s} or {S} is detected, replace it with 'a', 'b' and 'c' - default values for subdomains
-       * TODO: in the future, add an additional prop - baseLayerTileServerSubdomains: ['x', 'y', 'z'], default being ['a', 'b', 'c']
-       */
-      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
+exports.default = withEditModeCover;
 
+/***/ }),
 
-    var mapStyle = {
-      version: exports.MAP_STYLE_VERSION_NUMBER,
-      sources: {
-        'base-tiles': {
-          type: baseLayerTileServerType,
-          tiles: tiles,
-          tileSize: 256
-        }
-      },
-      layers: [{
-        id: 'base-layer',
-        type: 'raster',
-        source: 'base-tiles',
-        minzoom: 0,
-        maxzoom: 24 // https://maplibre.org/maplibre-gl-js-docs/api/map/
+/***/ 65:
+/***/ (function(module, exports, __webpack_require__) {
 
-      }]
-    };
-    return mapStyle;
-  } // if tile server is not present in the preset AND we can't construct a mapStyle, fall back on defaults
+"use strict";
 
 
-  return colorScheme === 'light' ? defaultTileLight : defaultTileDark;
-};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-exports.getMapStyle = getMapStyle;
+var React = __webpack_require__(0);
 
-var getZoomConstraintsFromTileConfig = function getZoomConstraintsFromTileConfig(tileConfig, baseLayerTileServer) {
-  var sources = tileConfig.sources,
-      layers = tileConfig.layers;
-  var matchedBaseLayerTileServer = false; // check sources for minzoom maxzoom first
+var colorUtils_1 = __webpack_require__(15);
 
-  var sourceKeys = Object.keys(sources);
+var variables_1 = __webpack_require__(13);
 
-  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;
+var IconPlaceholder_1 = __webpack_require__(37);
 
-    if (baseLayerTileServer && sources[sourceKeys[i]].tiles.indexOf(baseLayerTileServer) !== -1) {
-      matchedBaseLayerTileServer = true;
-    }
+var VizBehavior_1 = __webpack_require__(6);
 
-    if ((baseLayerTileServer && matchedBaseLayerTileServer || !baseLayerTileServer) && (0, lodash_1.isNumber)(minzoom) && (0, lodash_1.isNumber)(maxzoom)) {
-      return {
-        minZoom: minzoom,
-        maxZoom: maxzoom
-      };
-    }
-  } // then check layers
+var hocUtils_1 = __webpack_require__(23);
 
+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;
 
-  for (var _i = 0; _i < layers.length; _i += 1) {
-    var _layers$_i = layers[_i],
-        _minzoom = _layers$_i.minzoom,
-        _maxzoom = _layers$_i.maxzoom;
+  var Wrapper = function Wrapper(props) {
+    var _a, _b;
 
-    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/
+    var dataSources = props.dataSources,
+        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",
+        icon: icon,
+        width: width,
+        height: height,
+        backgroundColor: bgColorFromTheme,
+        iconColor: iconColor
+      });
+    }
 
-  return {
-    minZoom: 0,
-    maxZoom: 24
+    return React.createElement(Visualization, Object.assign({}, props));
   };
+
+  (0, hocUtils_1.extendStaticWrapperProps)({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
 };
 
-exports.getZoomConstraintsFromTileConfig = getZoomConstraintsFromTileConfig;
+exports.default = withPlaceholder;
 
-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
+/***/ 66:
+/***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
 
-  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
+var _slicedToArray = __webpack_require__(7);
 
-var getStaticColors = function getStaticColors(colorCount, colorArray) {
-  if (colorCount < 0 || !colorCount) {
-    return [exports.DEFAULT_CLUSTER_COLOR];
-  }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  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
-  // start from begining again if colorCount > colorArray.length
+var react_1 = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
 
+var dataUtils_1 = __webpack_require__(14);
 
-  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;
+var usePrevious_1 = __webpack_require__(33);
+
+var useGetXAndYFields_1 = __webpack_require__(67);
+
+var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
+  var dataSources = _ref.dataSources,
+      options = _ref.options,
+      context = _ref.context,
+      threshold = _ref.threshold,
+      isDownsamplingEnabled = _ref.isDownsamplingEnabled;
+  var isFirstUseEffectCall = (0, react_1.useRef)(true);
+  var xAndYFieldsWithTypes = (0, useGetXAndYFields_1.default)({
+    shouldEvaluateDSL: isDownsamplingEnabled,
+    options: options,
+    context: context,
+    dataSources: dataSources
   });
-};
+  var previousXAndYFieldsWithTypes = (0, usePrevious_1.default)(xAndYFieldsWithTypes);
+  var previousDataSources = (0, usePrevious_1.default)(dataSources);
+  var previousThreshold = (0, usePrevious_1.default)(threshold);
 
-exports.getStaticColors = getStaticColors; // Bubble size
+  var _ref2 = (0, react_1.useState)(function () {
+    return isDownsamplingEnabled ? (0, dataUtils_1.downsampleDataSources)({
+      dataSources: dataSources,
+      threshold: threshold,
+      options: xAndYFieldsWithTypes
+    }) : dataSources;
+  }),
+      _ref3 = _slicedToArray(_ref2, 2),
+      downsampledDataSources = _ref3[0],
+      setDownsampledDataSources = _ref3[1];
+
+  var debouncedDownsampleDataSources = (0, react_1.useMemo)(function () {
+    return (0, lodash_1.debounce)(function (downsampleOptions) {
+      var downsampledResult = (0, dataUtils_1.downsampleDataSources)(downsampleOptions);
+      setDownsampledDataSources(downsampledResult);
+    }, 100, {
+      trailing: true
+    });
+  }, []);
+  (0, react_1.useEffect)(function () {
+    // don't downsample again on the use effect call that happened due to the initial render
+    // this is since we already downsampled as part of the useState call
+    if (isFirstUseEffectCall.current) {
+      isFirstUseEffectCall.current = false;
+      return;
+    }
 
-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 (!isDownsamplingEnabled) {
+      setDownsampledDataSources(dataSources);
+      return;
+    }
 
-  if (size > exports.MAX_BUBBLE_RADIUS) {
-    return exports.MAX_BUBBLE_RADIUS;
-  }
+    if ((0, lodash_1.isEqual)(previousXAndYFieldsWithTypes, xAndYFieldsWithTypes) && 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
 
-  if (size < exports.MIN_BUBBLE_RADIUS) {
-    return exports.MIN_BUBBLE_RADIUS;
-  }
 
-  return size;
+    debouncedDownsampleDataSources({
+      dataSources: dataSources,
+      options: xAndYFieldsWithTypes,
+      threshold: threshold
+    }); // need to detect if this runs as part of the initial render
+  }, [dataSources, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousXAndYFieldsWithTypes, previousDataSources, previousThreshold]);
+  return downsampledDataSources;
 };
 
-exports.matchBubbleSize = matchBubbleSize;
+exports.default = useDownsampleDataSources;
 
-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];
+/***/ 67:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _toConsumableArray = __webpack_require__(8);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __webpack_require__(0);
+
+var Options_1 = __webpack_require__(16);
+/**
+ * Hook that evaluates the DSL for subset of a viz's options needed to determine
+ * its x and y fields as well as the types of all its fields.
+ */
+
+
+var useGetXAndYFields = function useGetXAndYFields(_ref) {
+  var shouldEvaluateDSL = _ref.shouldEvaluateDSL,
+      options = _ref.options,
+      context = _ref.context,
+      dataSources = _ref.dataSources;
+
+  var _ref2 = (0, react_1.useMemo)(function () {
+    var _a, _b, _c;
+
+    if (!shouldEvaluateDSL) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
+
+    if (!((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.length)) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
+
+    var primaryDS = dataSources.primary;
+    var columnsWithOnlyOnePoint = primaryDS.data.columns.map(function (column) {
+      return [column[0]];
     });
-  });
-};
+    var filteredDataSources = {
+      primary: Object.assign(Object.assign({}, primaryDS), {
+        data: Object.assign(Object.assign({}, primaryDS.data), {
+          columns: columnsWithOnlyOnePoint
+        })
+      })
+    };
+    return {
+      dataSourcesWithOnlyOnePoint: filteredDataSources,
+      dataFrameWithOnlyOnePoint: Options_1.Options.dataFrameFromDataSource(filteredDataSources)
+    };
+  }, [dataSources, shouldEvaluateDSL]),
+      dataSourcesWithOnlyOnePoint = _ref2.dataSourcesWithOnlyOnePoint,
+      dataFrameWithOnlyOnePoint = _ref2.dataFrameWithOnlyOnePoint;
 
-exports.transposeArray = transposeArray; // sanitize values: update all null, undefined, or negative values to 0
+  var xAndYFieldsWithTypes = (0, react_1.useMemo)(function () {
+    try {
+      if (!dataSourcesWithOnlyOnePoint || !dataFrameWithOnlyOnePoint) {
+        return options;
+      }
 
-var sanitizeValues = function sanitizeValues(values) {
-  // null / undefined
-  if (!values) {
-    return 0;
-  } // number
+      if (!(options === null || options === void 0 ? void 0 : options.x) || !(options === null || options === void 0 ? void 0 : options.y) && !(options === null || options === void 0 ? void 0 : options.y2)) {
+        return options;
+      }
+
+      var optionsToEvaluate = {
+        x: options.x,
+        xField: '> x | getField()',
+        y: options.y,
+        yFields: options.y ? '> y | getField()' : undefined,
+        y2: options.y2,
+        y2Fields: options.y2 ? '> y2 | getField()' : undefined,
+        fieldTypes: '> primary | getType()'
+      };
+
+      var _Options_1$Options$ev = Options_1.Options.evaluate({
+        options: optionsToEvaluate,
+        context: context
+      }, dataSourcesWithOnlyOnePoint, function () {}, dataFrameWithOnlyOnePoint),
+          _Options_1$Options$ev2 = _Options_1$Options$ev.xField,
+          xField = _Options_1$Options$ev2 === void 0 ? '' : _Options_1$Options$ev2,
+          _Options_1$Options$ev3 = _Options_1$Options$ev.yFields,
+          yFields = _Options_1$Options$ev3 === void 0 ? [] : _Options_1$Options$ev3,
+          _Options_1$Options$ev4 = _Options_1$Options$ev.y2Fields,
+          y2Fields = _Options_1$Options$ev4 === void 0 ? [] : _Options_1$Options$ev4,
+          fieldTypes = _Options_1$Options$ev.fieldTypes;
+
+      return {
+        xField: xField,
+        yFields: [].concat(_toConsumableArray(yFields), _toConsumableArray(y2Fields)),
+        fieldTypes: fieldTypes
+      };
+    } catch (e) {
+      return {
+        xField: undefined,
+        yFields: [],
+        fieldTypes: []
+      };
+    }
+  }, [options, context, dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint]);
+  return xAndYFieldsWithTypes;
+};
 
+exports.default = useGetXAndYFields;
 
-  if (!Array.isArray(values)) {
-    return values > 0 ? values : 0;
-  } // array
+/***/ }),
 
+/***/ 68:
+/***/ (function(module, exports, __webpack_require__) {
 
-  return values.map(function (arr) {
-    return (0, exports.sanitizeValues)(arr);
-  });
-};
+"use strict";
 
-exports.sanitizeValues = sanitizeValues;
 
-var bakeBubbleData = function bakeBubbleData(layer) {
-  var _a;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFeatureFlag = void 0;
 
-  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)
-  // e.g. [value0, value1, ...]
-  // format each value as an array to unify data operations for data series and frames
+var FeatureFlags_1 = __webpack_require__(69);
 
+var getFeatureFlag = function getFeatureFlag(context, flagName) {
+  // look for feature flag in context first
+  if (context && Object.keys(context).find(function (key) {
+    return key === flagName;
+  })) {
+    return context[flagName];
+  } // fall back to defaults
 
-  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)
 
-  if (Array.isArray(layer.bubbleSize[0])) {
-    // one-time array transpose,
-    // e.g. from [column0data, column0data] (multi series)
-    // to [[column0datum0, column1datum0], [column0datum1, column1data1], ...]
-    // or e.g. from [column0data] (single series)
-    // to [[column0data]]
-    // 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
+  if (Object.keys(FeatureFlags_1.default).find(function (key) {
+    return key === flagName;
+  })) {
+    return FeatureFlags_1.default[flagName];
+  } // fall back to false
 
-    if (layer.bubbleSize.length > 1) {
-      isPie = true;
-    }
-  } else {
-    transposedBubbleSize = layer.bubbleSize.map(function (n) {
-      return [n];
-    });
-    transposedSanitizedBubbleSize = sanitizedBubbleSize.map(function (n) {
-      return [n];
-    });
-  }
 
-  if (!transposedBubbleSize || !transposedBubbleSize.length) {
-    return null;
-  }
+  return false;
+};
 
-  var data = layer.latitude.map(function (lat, i) {
-    return {
-      zoom: (0, exports.getZoomLevelFromGeobin)(layer.geobin[i]),
-      values: transposedBubbleSize[i],
-      sanitizedValues: transposedSanitizedBubbleSize[i],
-      coordinates: [layer.longitude[i], lat],
-      metadata: layer.metadata ? layer.metadata[i] : {}
-    };
-  }).filter(function (d) {
-    return Boolean(d.values);
-  }); // compute the min/max value to encode min/max pie or bubble size
+exports.getFeatureFlag = getFeatureFlag;
 
-  var min = (0, lodash_1.sum)(transposedSanitizedBubbleSize[0]);
-  var max = (0, lodash_1.sum)(transposedSanitizedBubbleSize[1]);
-  transposedSanitizedBubbleSize.forEach(function (row) {
-    var bubbleSize = (0, lodash_1.sum)(row);
-    max = bubbleSize > max ? bubbleSize : max;
-    min = bubbleSize < min ? bubbleSize : min;
-  });
-  return {
-    data: data,
-    dataRange: [min, max],
-    isPie: isPie,
-    resultLimit: layer.resultLimit,
-    bubbleSizeFields: layer.bubbleSizeFields
-  };
-};
+/***/ }),
 
-exports.bakeBubbleData = bakeBubbleData;
+/***/ 69:
+/***/ (function(module, exports) {
 
-var isValidLatLon = function isValidLatLon(latlon) {
-  if (!latlon || !Array.isArray(latlon) || latlon.length !== 2) {
-    return false;
-  }
+module.exports = require("@splunk/visualization-context/FeatureFlags");
 
-  var _latlon = _slicedToArray(latlon, 2),
-      lat = _latlon[0],
-      lon = _latlon[1];
+/***/ }),
 
-  if (!(0, types_1.isNumber)(lat) || !(lat >= exports.MIN_LATITUDE && lat <= exports.MAX_LATITUDE)) {
-    return false;
-  }
+/***/ 7:
+/***/ (function(module, exports) {
 
-  if (!(0, types_1.isNumber)(lon) || !(lon >= exports.MIN_LONGITUDE && lon <= exports.MAX_LONGITUDE)) {
-    return false;
-  }
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
-  return true;
-};
+/***/ }),
 
-exports.isValidLatLon = isValidLatLon;
-/**
- * Returns a list of all lat or lon coordinates used in a specified layer
- * @param {LayerType[]} layer
- * @param {string} field
- * @returns {number[]} list of lat coordinates or lon coordinates
- */
+/***/ 72:
+/***/ (function(module, exports) {
 
-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);
-  };
+module.exports = require("@splunk/visualization-icons/placeholders");
 
-  var getChoroplethValues = function getChoroplethValues(choroplethLayer) {
-    var slicedGeomList = choroplethLayer.geom.slice(0, choroplethLayer.resultLimit);
-    var flatCoordinates = slicedGeomList.flatMap(function (geomObject) {
-      return geomObject.coordinates.flat(2);
-    });
-    return flatCoordinates.map(function (coord) {
-      return coord[field === LONGITUDE ? 0 : 1];
-    });
-  };
+/***/ }),
 
-  return layer.type === LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
-};
-/**
- * Returns the min and max LongLat pairs to determine the layer boundaries to fit all markers/bubbles
- * @param {LayerType[]} layers
- * @returns {LngLatBoundsLike}
- */
+/***/ 73:
+/***/ (function(module, exports) {
 
+module.exports = require("@splunk/visualization-color-palettes");
 
-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;
-  };
+/***/ 74:
+/***/ (function(module, exports) {
 
-  var getDefaultMin = function getDefaultMin(field) {
-    return field === LONGITUDE ? exports.MIN_LONGITUDE : exports.MIN_LATITUDE;
-  };
+module.exports = require("@splunk/visualization-icons");
 
-  if (!layers || !Array.isArray(layers) || !layers.length) {
-    return null;
-  }
+/***/ }),
 
-  var getMin = function getMin(field) {
-    if (!isLayerValid(field)) {
-      return getDefaultMin(field);
-    }
+/***/ 75:
+/***/ (function(module, exports, __webpack_require__) {
 
-    return layers.reduce(function (prevVal, layer) {
-      var coordinatesNumArr = getLatOrLonCoordinates(layer, field).map(function (x) {
-        return +x;
-      });
-      return (0, lodash_1.min)([prevVal].concat(_toConsumableArray(coordinatesNumArr)));
-    }, getDefaultMax(field));
-  };
+"use strict";
 
-  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));
-  };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  return [[getMin(LONGITUDE), getMin(LATITUDE)], [getMax(LONGITUDE), getMax(LATITUDE)]];
+var i18n_1 = __webpack_require__(2);
+
+var background = function background(_ref) {
+  var label = _ref.label,
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
+  return [{
+    label: (0, i18n_1._)(label || 'Background'),
+    option: 'backgroundColor',
+    editor: 'editor.color',
+    editorProps: {
+      labelPosition: labelPosition || 'top',
+      themes: themes
+    }
+  }];
 };
 
-exports.getGlobalLayerBoundaries = getGlobalLayerBoundaries;
+exports.default = background;
 
-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
+/***/ 8:
+/***/ (function(module, exports) {
 
-  return opacities === null || opacities === void 0 ? void 0 : opacities.map(function (opacity) {
-    return opacity * cfgOpacity;
-  });
-};
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
-exports.getScaledOpacities = getScaledOpacities;
+/***/ }),
 
-var compareBaseStyles = function compareBaseStyles(curr, next) {
-  var _a, _b, _c, _d;
+/***/ 81:
+/***/ (function(module, exports) {
 
-  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';
-  });
-  var nextBaseLayer = (_b = next === null || next === void 0 ? void 0 : next.layers) === null || _b === void 0 ? void 0 : _b.find(function (layer) {
-    return (layer === null || layer === void 0 ? void 0 : layer.id) === 'base-layer';
-  });
-  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 : '');
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 
-  if (!currBaseLayer || !nextBaseLayer || !currBaseSource || !nextBaseSource) {
-    return false;
-  }
+/***/ }),
 
-  return (0, lodash_1.isEqual)(currBaseLayer, nextBaseLayer) && (0, lodash_1.isEqual)(currBaseSource, nextBaseSource);
-};
+/***/ 82:
+/***/ (function(module, exports) {
 
-exports.compareBaseStyles = compareBaseStyles;
+module.exports = require("@splunk/themes");
 
-var formatMetadata = function formatMetadata(choroplethLayer, i) {
-  if (!choroplethLayer || !choroplethLayer.areaIds || !choroplethLayer.areaValues) return {};
-  if (i >= choroplethLayer.areaIds.length) return {};
-  var metadata = choroplethLayer.metadata ? choroplethLayer.metadata[i] : {};
-  var name = choroplethLayer.areaIds[i];
-  var value = choroplethLayer.areaValues[i];
-  var base = {
-    name: name,
-    value: String(value)
-  };
-  return Object.keys(metadata).reduce(function (result, curr) {
-    var key = "row.".concat(curr, ".value");
-    var val = (0, lodash_1.isObject)(metadata[curr]) ? JSON.stringify(metadata[curr]) : String(metadata[curr]);
-    return Object.assign(Object.assign({}, result), _defineProperty({}, key, val));
-  }, base);
-};
+/***/ }),
 
-exports.formatMetadata = formatMetadata;
+/***/ 84:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 93:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("d3-scale");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ })