@splunk/visualizations 24.2.0 → 24.3.2

package/Map.js

@@ -0,0 +1,3141 @@
+/*!
+ * Copyright © 2018 Splunk Inc.
+ * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+ * in part without a valid written license from Splunk Inc. is PROHIBITED.
+ */
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 189);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizBehavior = void 0;
+var VizBehavior;
+
+(function (VizBehavior) {
+  /**
+   * Dynamic Options Behavior.
+   * This allows visualization options to be powered by data
+   *
+   * **Example**
+   *
+   * sparklineValues: ">primary|seriesByIndex(0)"
+   * would configure sparklineValues with an array of data points
+   * coming from the first series in the primary datasource
+   *
+   */
+  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
+  VizBehavior["EVENTS"] = "events";
+  /**
+   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
+   * missing.
+   * @type {string}
+   */
+
+  VizBehavior["PLACEHOLDER"] = "placeholder";
+  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _defineProperty = __webpack_require__(8);
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatePrecisionValues = exports.getInitialPreset = exports.isDynamicOption = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+
+var lodash_1 = __webpack_require__(2);
+
+var schemaUtils_1 = __webpack_require__(14);
+
+var VizBehavior_1 = __webpack_require__(5);
+
+var dynamicOptionsDSLType = {
+  type: 'string',
+  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
+};
+/**
+ * Helper function to extend an options schema with dynamic options DSL
+ * @param optionsSchema a visualization's options schema
+ * @returns an updated options schema that additionally allows strings starting with > for each option
+ */
+
+function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
+  var enhancedOptionsSchema = {};
+  Object.keys(optionsSchema).forEach(function (key) {
+    var _a = optionsSchema[key],
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
+    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
+      title: title
+    }), description !== undefined && {
+      description: description
+    }), readOnly !== undefined && {
+      readOnly: readOnly
+    }), writeOnly !== undefined && {
+      writeOnly: writeOnly
+    }), examples !== undefined && {
+      examples: examples
+    }), defaultValue !== undefined && {
+      default: defaultValue
+    });
+
+    if (type === 'object') {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
+        type: type
+      }), properties && {
+        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
+      });
+
+      if (patternProperties) {
+        var enhancedPatternProperties = {};
+        Object.keys(patternProperties).forEach(function (opt) {
+          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
+        });
+        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
+      }
+    } else {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
+        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
+          type: type
+        }), remainingSchemaEntry), dynamicOptionsDSLType]
+      });
+    }
+  });
+  return enhancedOptionsSchema;
+}
+
+exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
+/**
+ * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
+ * @param vizConfig a Visualization Config
+ * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
+ */
+
+function enhanceConfig(vizConfig) {
+  var enhancedConfig = vizConfig;
+
+  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
+    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
+  }
+
+  return enhancedConfig;
+}
+
+exports.enhanceConfig = enhanceConfig;
+
+function isDynamicOption(option) {
+  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
+}
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
+// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
+/**
+ * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
+ * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
+ * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
+ * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
+ *
+ * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
+ */
+
+function hasCompatibleContexts(vizContext, presetContext) {
+  var presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(function (contextKey) {
+    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
+  });
+}
+/**
+ * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
+ */
+
+
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  var presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(function (optionKey) {
+    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
+  });
+}
+/**
+ * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
+ * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
+ *
+ * @param {Object} vizContext - the current vizContext definition
+ * @param {Object} vizOptions - the current vizOptions definition
+ * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
+ */
+
+
+function getInitialPreset(vizContext, vizOptions, presets) {
+  return presets.find(function (preset) {
+    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
+    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContextKeys = Object.keys(presetContext);
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    // if not, then the preset is invalid in config.ts
+
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
+
+exports.getInitialPreset = getInitialPreset;
+/**
+ * generates number precision values for a Select editor
+ *
+ * @param {Number} numPrecisionValues - number of integer precision values to generate
+ * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
+ */
+
+function generatePrecisionValues(numPrecisionValues) {
+  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+    return {
+      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
+      value: i
+    };
+  });
+}
+
+exports.generatePrecisionValues = generatePrecisionValues;
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _typeof = __webpack_require__(20);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deepMergeWithArrayOverrides = exports.extendStaticWrapperProps = void 0;
+
+var lodash_1 = __webpack_require__(2);
+/**
+ * @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;
+/**
+ * helper to deeply merge objects while preserving arrays in earlier source objects
+ * deeply nested primitive keys are merged similarly to lodash's defaultsDeep, while keys with arrays will be preserved if already present in the resultant merged object
+ * this prevents default arrays from appending values to user-defined arrays (this occurs if the default array is longer than the user-defined one)
+ *
+ * @method deepMergeWithArrayOverrides
+ * @param {Object} initial - target object to merge values into
+ * @param {Object[]} sources - other default options to be merged into the resultant object if no explicit value is provided, with earlier args taking precedence over later ones
+ *
+ * @returns {Object}
+ */
+
+var deepMergeWithArrayOverrides = function deepMergeWithArrayOverrides(initial) {
+  var clone = lodash_1.cloneDeep(initial);
+
+  for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    sources[_key - 1] = arguments[_key];
+  }
+
+  sources.forEach(function (sourceToApply) {
+    Object.keys(sourceToApply).forEach(function (sourceKey) {
+      if (!Object.prototype.hasOwnProperty.call(clone, sourceKey)) {
+        clone[sourceKey] = lodash_1.cloneDeep(sourceToApply[sourceKey]);
+      } // object merging excluding arrays
+
+
+      if (clone[sourceKey] && _typeof(clone[sourceKey]) === 'object' && !Array.isArray(clone[sourceKey]) && _typeof(sourceToApply[sourceKey]) === 'object') {
+        clone[sourceKey] = exports.deepMergeWithArrayOverrides(clone[sourceKey], sourceToApply[sourceKey]);
+      }
+    });
+  });
+  return clone;
+};
+
+exports.deepMergeWithArrayOverrides = deepMergeWithArrayOverrides;
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/defineProperty");
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/Message");
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/classCallCheck");
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(1);
+
+var styled_components_1 = __webpack_require__(4);
+
+var SizeAwareWrapper_1 = __webpack_require__(16);
+
+var style_1 = __webpack_require__(13);
+
+var colorUtils_1 = __webpack_require__(11);
+
+var Item = styled_components_1.default.div.attrs(function (_ref) {
+  var width = _ref.width;
+  return {
+    style: {
+      width: style_1.toPx(width)
+    }
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__Item",
+  componentId: "sc-1yhgpod-0"
+})(["position:relative;background-color:", "};"], function (props) {
+  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+
+var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height;
+  return {
+    style: Object.assign(Object.assign({}, width && {
+      width: style_1.toPx(width)
+    }), height && {
+      height: style_1.toPx(height)
+    })
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__FixSizeItem",
+  componentId: "sc-1yhgpod-1"
+})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
+  return colorUtils_1.isColor(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+});
+var ItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__ItemContent",
+  componentId: "sc-1yhgpod-2"
+})(["position:relative;min-height:100px;width:100%;"]);
+var FixSizeItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__FixSizeItemContent",
+  componentId: "sc-1yhgpod-3"
+})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
+
+var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
+  var FixedSizeContainer = function FixedSizeContainer(props) {
+    var width = props.width,
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+
+    if (!height) {
+      return React.createElement(Item, {
+        "data-test": "item",
+        width: width,
+        backgroundColor: backgroundColor
+      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
+    }
+
+    return React.createElement(FixSizeItem, {
+      "data-test": "fix-size-item",
+      "data-splunk-visualization-version": "24.3.2 - 1cf892b72",
+      width: width,
+      height: height,
+      backgroundColor: backgroundColor
+    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
+      var newWidth = _ref3.width,
+          newHeight = _ref3.height;
+      return React.createElement(Viz, Object.assign({}, props, {
+        width: newWidth,
+        height: newHeight
+      }));
+    })));
+  };
+
+  FixedSizeContainer.displayName = 'withFixedSizeContainer';
+  return FixedSizeContainer;
+};
+
+exports.default = withFixedSizeContainer;
+
+/***/ }),
+/* 13 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/style");
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
+
+/***/ }),
+/* 15 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/createClass");
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+
+/***/ }),
+/* 17 */,
+/* 18 */,
+/* 19 */,
+/* 20 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/typeof");
+
+/***/ }),
+/* 21 */,
+/* 22 */,
+/* 23 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _defineProperty = __webpack_require__(8);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+var DataSource_1 = __webpack_require__(33);
+
+exports.SortParamsPropTypes = T.shape({
+  currentSortKey: T.string,
+  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
+  onSort: T.func
+});
+
+var getSortingParams = function getSortingParams(_ref) {
+  var requestParams = _ref.requestParams,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var currentSortKey;
+  var currentSortDir;
+  var nextSortDirMap = {
+    asc: 'desc',
+    desc: 'asc',
+    none: 'asc'
+  };
+  var onSort;
+
+  if (lodash_1.isFunction(onRequestParamsChange)) {
+    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+      currentSortKey = Object.keys(requestParams.sort).shift();
+      currentSortDir = requestParams.sort[currentSortKey];
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
+    onSort = function onSort(e, _ref2) {
+      var sortKey = _ref2.sortKey,
+          sortDir = _ref2.sortDir;
+
+      if (typeof sortKey === 'string') {
+        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
+          offset: 0,
+          sort: _defineProperty({}, sortKey, nextSortDir)
+        }));
+      } else {
+        onRequestParamsChange(requestParams);
+      }
+    };
+  }
+
+  return {
+    currentSortKey: currentSortKey,
+    currentSortDir: currentSortDir,
+    onSort: onSort
+  };
+};
+
+exports.getSortingParams = getSortingParams;
+
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+exports.PaginatorParamsPropTypes = T.shape({
+  isPaging: T.bool,
+  current: T.number,
+  totalPages: T.number,
+  onChange: T.func
+});
+
+var getPaginationParams = function getPaginationParams(_ref) {
+  var requestParams = _ref.requestParams,
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var totalCount = meta && meta.totalCount || 0;
+  var offset = requestParams && requestParams.offset || 0;
+  var count = requestParams && requestParams.count;
+  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
+  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
+  var isPaging = totalPages > 1 && lodash_1.isFunction(onRequestParamsChange);
+
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var page = _ref2.page,
+        countArg = _ref2.count;
+    var newParams = lodash_1.cloneDeep(requestParams);
+
+    if (typeof countArg === 'number') {
+      newParams.count = countArg;
+      newParams.offset = 0;
+    }
+
+    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+
+    if (typeof page === 'number' && page > 0) {
+      newParams.count = pageCount;
+      newParams.offset = (page - 1) * pageCount;
+    }
+
+    onRequestParamsChange(newParams);
+  };
+
+  return {
+    isPaging: isPaging,
+    current: current,
+    totalPages: totalPages,
+    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+  };
+};
+
+exports.getPaginationParams = getPaginationParams;
+
+/***/ }),
+/* 25 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowIconPlaceholder = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+var i18n_1 = __webpack_require__(3);
+
+var Message_1 = __webpack_require__(9);
+
+var FixedSizeContainer_1 = __webpack_require__(12);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
+
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  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
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
+
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon;
+
+  if (icon) {
+    return React.createElement(icon, {
+      style: {
+        left: '50%',
+        top: '50%',
+        color: 'grey',
+        position: 'absolute',
+        transform: 'translate(-50%, -50%)'
+      },
+      width: '50%',
+      height: '50%'
+    });
+  }
+
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
+};
+
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
+
+/***/ }),
+/* 26 */
+/***/ (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 = {}));
+
+/***/ }),
+/* 27 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(2);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(28);
+
+var Options_1 = __webpack_require__(29);
+
+var SanitizeProps_1 = __webpack_require__(30);
+
+var styled_components_1 = __webpack_require__(4);
+
+var SplunkVisualization_1 = __webpack_require__(31);
+
+var VizBehavior_1 = __webpack_require__(5);
+
+var getSorting_1 = __webpack_require__(23);
+
+var getPagination_1 = __webpack_require__(24);
+
+var useDeepMemo_1 = __webpack_require__(34);
+
+var JSONSchemaUtils_1 = __webpack_require__(35);
+
+var MissingPropsMessage_1 = __webpack_require__(36);
+
+var withEditModeCover_1 = __webpack_require__(37);
+
+var withPlaceholder_1 = __webpack_require__(38);
+
+var hocUtils_1 = __webpack_require__(7);
+/**
+ * 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 = SanitizeProps_1.withSanitizedProps(ReactViz);
+  var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
+
+  var DashboardViz = function DashboardViz(props) {
+    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 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 _getSettingsFromTheme = getSettingsFromThemedProps_1.default({
+      theme: theme
+    }),
+        currentThemeFamily = _getSettingsFromTheme.family,
+        currentThemeColorScheme = _getSettingsFromTheme.colorScheme,
+        currentThemeDensity = _getSettingsFromTheme.density;
+
+    var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+
+    evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
+      try {
+        return Options_1.Options.evaluate({
+          context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
+          options: hocUtils_1.deepMergeWithArrayOverrides({}, options, defaultOptions)
+        }, dataSources, themeFunc);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error("unexpected error evaluating options:  + ".concat(e.message));
+        return {};
+      }
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources]); // 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(evaluatedOptions);
+    }); // 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 = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptions);
+
+    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
+      return React.createElement(MissingPropsMessage_1.default, {
+        "data-test": "missing-props-message",
+        width: width,
+        height: height,
+        missingProps: missing,
+        backgroundColor: bgColorFromTheme
+      });
+    } // events
+
+
+    var eventCallbackProps = {};
+
+    if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
+      var supportedEvents = vizConfig.events;
+      Object.keys(supportedEvents).forEach(function (eventName) {
+        var eventCallbackPropName = lodash_1.camelCase("on.".concat(eventName));
+        eventCallbackProps[eventCallbackPropName] = null; // todo: refactor single value and single value icon to send payload from viz
+        // then remove these lines
+
+        var payloadKeys = supportedEvents[eventName].payloadKeys;
+        var payload = {};
+
+        if (Array.isArray(payloadKeys) && payloadKeys.length) {
+          payloadKeys.forEach(function (p) {
+            payload[p] = evaluatedOptions[p];
+          });
+        }
+
+        eventCallbackProps[eventCallbackPropName] = function (ev) {
+          if (ev && ev.payload) {
+            payload = ev.payload;
+          }
+
+          return onEventTrigger({
+            originalEvent: ev,
+            payload: payload,
+            type: eventName
+          });
+        };
+      });
+    } // compute pure viz props which are not from options
+
+
+    var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptions), 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 dataSourceMetadata = {};
+    var OptionKey = 'paginateDataSourceKey';
+    var paginateDataSourceKey = lodash_1.has(evaluatedOptions, OptionKey) && evaluatedOptions[OptionKey] || 'primary';
+
+    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && lodash_1.has(dataSources, paginateDataSourceKey)) {
+      var requestParams = lodash_1.get(dataSources, [paginateDataSourceKey, 'requestParams'], {});
+      var meta = lodash_1.get(dataSources, [paginateDataSourceKey, 'meta'], {});
+
+      var handleRequestParamsChange = function handleRequestParamsChange(payload) {
+        return onRequestParamsChange(paginateDataSourceKey, payload);
+      };
+
+      var sortParams = getSorting_1.getSortingParams({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      var paginatorParams = getPagination_1.getPaginationParams({
+        requestParams: requestParams,
+        meta: meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      dataSourceMetadata = {
+        sortParams: sortParams,
+        paginatorParams: paginatorParams
+      };
+    }
+
+    return React.createElement(SanitizedReactViz, Object.assign({
+      mode: mode,
+      width: width,
+      height: height
+    }, evaluatedOptions, computedVizProps, eventCallbackProps, dataSourceMetadata));
+  };
+
+  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
+  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
+    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
+    theme: {}
+  }); // attach viz config
+
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+
+  return styled_components_1.withTheme(withPlaceholder_1.default(withEditModeCover_1.default(DashboardViz, disableEditModeCover), useIconPlaceholder));
+};
+
+exports.default = withDashboardViz;
+
+/***/ }),
+/* 28 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
+
+/***/ }),
+/* 29 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+/* 30 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+
+/***/ }),
+/* 31 */
+/***/ (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__(0);
+
+var lodash_1 = __webpack_require__(2);
+
+var VizActionHandler_1 = __webpack_require__(32); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
+exports.INITIAL_WIDTH = 250;
+exports.INITIAL_HEIGHT = 250;
+/**
+ * A Splunk visualization
+ */
+
+var SplunkVisualization = function SplunkVisualization() {
+  _classCallCheck(this, SplunkVisualization);
+};
+
+SplunkVisualization.propTypes = {
+  /**
+   * display mode
+   */
+  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
+  /**
+   * width in pixel or string, defaults to 100%
+   */
+  width: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * height in pixel or string
+   */
+  height: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * visualization context used for dynamic option evaluation
+   */
+  context: T.object,
+
+  /**
+   * visualization formatting options
+   */
+  options: T.object,
+
+  /**
+   * A callback to update formatting options
+   */
+  onOptionsChange: T.func,
+
+  /**
+   * datasource state which include data and request params, object key indicate the datasource type.
+   */
+  dataSources: T.objectOf(T.shape({
+    /**
+     * current request params
+     */
+    requestParams: T.object,
+
+    /**
+     * current dataset
+     */
+    data: T.shape({
+      fields: T.array,
+      columns: T.array
+    }),
+
+    /**
+     * error
+     */
+    error: T.shape({
+      level: T.string,
+      message: T.string
+    }),
+
+    /**
+     * meta data that came with the dataset
+     */
+    meta: T.object
+  })),
+
+  /**
+   * A callback to trigger event
+   */
+  onEventTrigger: T.func,
+
+  /**
+   * Inform viz if there are handlers listening to events
+   */
+  hasEventHandlers: T.bool,
+
+  /**
+   * A callback to communicate computed props to a consumer
+   */
+  onComputedProps: T.func,
+
+  /**
+   * A callback to obtain visualization api
+   */
+  vizActionHandlerRef: T.func,
+  loading: T.bool,
+  theme: T.object,
+
+  /**
+   * A callback to request new data with updated request params
+   */
+  onRequestParamsChange: T.func
+};
+/**
+ *
+ */
+
+SplunkVisualization.defaultProps = {
+  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
+  width: '100%',
+  height: exports.INITIAL_HEIGHT,
+  dataSources: {},
+  onEventTrigger: function onEventTrigger() {
+    return {};
+  },
+  mode: 'view',
+  hasEventHandlers: false,
+  options: {},
+  context: {},
+  onOptionsChange: function onOptionsChange() {
+    return {};
+  },
+  vizActionHandlerRef: function vizActionHandlerRef() {
+    return new VizActionHandler_1.DefaultVizActionHandler();
+  },
+  onComputedProps: function onComputedProps() {
+    return {};
+  },
+  loading: false,
+  onRequestParamsChange: lodash_1.noop
+};
+exports.default = SplunkVisualization;
+
+/***/ }),
+/* 32 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(10);
+
+var _createClass = __webpack_require__(15);
+
+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;
+
+/***/ }),
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeepMemo = void 0;
+
+var react_1 = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(2);
+/**
+ * This hook evaluates and stores the result of a passed function and only
+ * re-evaluates the function when passed dependencies change.
+ *
+ * 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
+ */
+
+
+var useDeepMemo = function useDeepMemo(fn, dependencies) {
+  var ref = react_1.useRef();
+
+  if (!ref.current || !lodash_1.isEqual(dependencies, ref.current.dependencies)) {
+    ref.current = {
+      dependencies: dependencies,
+      value: fn()
+    };
+  }
+
+  return ref.current.value;
+};
+
+exports.useDeepMemo = useDeepMemo;
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickFieldFromJSONSchema = void 0;
+
+var lodash_1 = __webpack_require__(2);
+
+var pickFieldFromJSONSchema = function pickFieldFromJSONSchema(optionsSchema) {
+  var fieldName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  return Object.keys(optionsSchema).reduce(function (accum, k) {
+    if (lodash_1.has(optionsSchema[k], fieldName)) {
+      accum[k] = optionsSchema[k][fieldName];
+    } else if (lodash_1.get(optionsSchema, [k, 'type']) === 'object' && lodash_1.has(optionsSchema[k], 'properties')) {
+      var nestedSchema = exports.pickFieldFromJSONSchema(optionsSchema[k].properties, fieldName);
+
+      if (!lodash_1.isEmpty(nestedSchema)) {
+        accum[k] = nestedSchema;
+      }
+    }
+
+    return accum;
+  }, {});
+};
+
+exports.pickFieldFromJSONSchema = pickFieldFromJSONSchema;
+
+/***/ }),
+/* 36 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
+var React = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var i18n_1 = __webpack_require__(3);
+
+var Message_1 = __webpack_require__(9);
+
+var FixedSizeContainer_1 = __webpack_require__(12);
+/**
+ * @method isMissing
+ * @param {any} v
+ * @returns {boolean} true if the input value === null or undefined
+ */
+
+
+var isMissing = function isMissing(v) {
+  return v === null || v === undefined;
+};
+
+exports.isMissing = isMissing;
+/**
+ * @method misskingKeys
+ * @param {string[]} keys
+ * @param {object} target
+ * @returns {string[]} the keys of missing required props
+ */
+
+var missingKeys = function missingKeys(keys, target) {
+  return keys.filter(function (k) {
+    return exports.isMissing(target[k]);
+  });
+};
+
+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 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: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
+  });
+};
+
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
+
+/***/ }),
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(1);
+
+var styled_components_1 = __webpack_require__(4);
+
+var hocUtils_1 = __webpack_require__(7);
+
+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': "24.3.2 - 1cf892b72"
+}).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
+ */
+
+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"
+    }));
+  };
+
+  hocUtils_1.extendStaticWrapperProps({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
+
+exports.default = withEditModeCover;
+
+/***/ }),
+/* 38 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(1);
+
+var colorUtils_1 = __webpack_require__(11);
+
+var IconPlaceholder_1 = __webpack_require__(25);
+
+var VizBehavior_1 = __webpack_require__(5);
+
+var hocUtils_1 = __webpack_require__(7);
+
+var withPlaceholder = function withPlaceholder(Visualization) {
+  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
+  var config = Visualization.config;
+  var themes = config.themes;
+
+  var Wrapper = function Wrapper(props) {
+    var _a;
+
+    var dataSources = props.dataSources,
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
+    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
+    var bgColorFromTheme = 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);
+
+    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
+      return React.createElement(IconPlaceholder_1.default, {
+        "data-test": "icon-placeholder",
+        icon: config.icon,
+        width: width,
+        height: height,
+        backgroundColor: bgColorFromTheme
+      });
+    }
+
+    return React.createElement(Visualization, Object.assign({}, props));
+  };
+
+  hocUtils_1.extendStaticWrapperProps({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
+
+exports.default = withPlaceholder;
+
+/***/ }),
+/* 39 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
+
+/***/ }),
+/* 40 */,
+/* 41 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-color-palettes");
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-icons");
+
+/***/ }),
+/* 43 */,
+/* 44 */,
+/* 45 */,
+/* 46 */,
+/* 47 */,
+/* 48 */,
+/* 49 */
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/slicedToArray");
+
+/***/ }),
+/* 50 */,
+/* 51 */,
+/* 52 */,
+/* 53 */,
+/* 54 */,
+/* 55 */,
+/* 56 */,
+/* 57 */,
+/* 58 */,
+/* 59 */,
+/* 60 */,
+/* 61 */,
+/* 62 */,
+/* 63 */,
+/* 64 */,
+/* 65 */,
+/* 66 */,
+/* 67 */,
+/* 68 */,
+/* 69 */
+/***/ (function(module, exports) {
+
+module.exports = require("d3-scale");
+
+/***/ }),
+/* 70 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
+
+/***/ }),
+/* 71 */,
+/* 72 */,
+/* 73 */,
+/* 74 */,
+/* 75 */,
+/* 76 */,
+/* 77 */,
+/* 78 */,
+/* 79 */,
+/* 80 */,
+/* 81 */,
+/* 82 */,
+/* 83 */,
+/* 84 */,
+/* 85 */,
+/* 86 */,
+/* 87 */,
+/* 88 */,
+/* 89 */,
+/* 90 */,
+/* 91 */,
+/* 92 */,
+/* 93 */,
+/* 94 */,
+/* 95 */,
+/* 96 */,
+/* 97 */,
+/* 98 */,
+/* 99 */,
+/* 100 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Popover");
+
+/***/ }),
+/* 101 */,
+/* 102 */,
+/* 103 */,
+/* 104 */,
+/* 105 */,
+/* 106 */,
+/* 107 */,
+/* 108 */,
+/* 109 */,
+/* 110 */,
+/* 111 */,
+/* 112 */,
+/* 113 */,
+/* 114 */,
+/* 115 */,
+/* 116 */,
+/* 117 */,
+/* 118 */,
+/* 119 */,
+/* 120 */,
+/* 121 */,
+/* 122 */,
+/* 123 */
+/***/ (function(module, exports) {
+
+module.exports = require("maplibre-gl");
+
+/***/ }),
+/* 124 */,
+/* 125 */,
+/* 126 */,
+/* 127 */,
+/* 128 */,
+/* 129 */,
+/* 130 */,
+/* 131 */,
+/* 132 */,
+/* 133 */,
+/* 134 */,
+/* 135 */,
+/* 136 */,
+/* 137 */,
+/* 138 */,
+/* 139 */,
+/* 140 */,
+/* 141 */,
+/* 142 */,
+/* 143 */,
+/* 144 */,
+/* 145 */,
+/* 146 */,
+/* 147 */,
+/* 148 */,
+/* 149 */,
+/* 150 */,
+/* 151 */,
+/* 152 */,
+/* 153 */,
+/* 154 */,
+/* 155 */,
+/* 156 */,
+/* 157 */,
+/* 158 */,
+/* 159 */,
+/* 160 */,
+/* 161 */,
+/* 162 */,
+/* 163 */,
+/* 164 */,
+/* 165 */,
+/* 166 */,
+/* 167 */,
+/* 168 */,
+/* 169 */,
+/* 170 */,
+/* 171 */,
+/* 172 */,
+/* 173 */,
+/* 174 */,
+/* 175 */,
+/* 176 */,
+/* 177 */,
+/* 178 */,
+/* 179 */,
+/* 180 */,
+/* 181 */,
+/* 182 */,
+/* 183 */,
+/* 184 */,
+/* 185 */,
+/* 186 */,
+/* 187 */,
+/* 188 */,
+/* 189 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PureMap = exports.config = exports.themes = exports.computeVizProps = void 0;
+
+var colorUtils_1 = __webpack_require__(11);
+
+var types_1 = __webpack_require__(190);
+
+var PureMap_1 = __webpack_require__(191);
+
+exports.PureMap = PureMap_1.default;
+
+var config_1 = __webpack_require__(199);
+
+exports.config = config_1.default;
+
+var withDashboardViz_1 = __webpack_require__(27);
+
+var computeVizProps = function computeVizProps(_ref) {
+  var themeFunc = _ref.themeFunc,
+      theme = _ref.theme,
+      layers = _ref.layers,
+      dataSources = _ref.dataSources;
+  var themeColorVariables = ['controlBackgroundColor', 'controlForegroundColor'];
+  var themeColors = {};
+  themeColorVariables.forEach(function (variable) {
+    themeColors[variable] = themeFunc(variable);
+  }); // Markers use different icons, Bubbles has different styles for light and dark theme
+  // this prop is passed for that
+
+  var themeColorScheme = (theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1) ? theme === null || theme === void 0 ? void 0 : theme.splunkThemeV1.colorScheme : 'dark';
+  layers.forEach(function (l) {
+    var _a, _b, _c, _d; // add key `geobin` to the layer object if the data is returned from geostats commands
+    // to distinguish geostats commands from table commands
+
+
+    var dataSourceData = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : {};
+    var geobinIdx = ((_c = dataSourceData.fields) !== null && _c !== void 0 ? _c : []).map(function (field) {
+      return typeof field === 'string' ? field : field.name;
+    }).indexOf('geobin');
+    var layer = l;
+
+    if (geobinIdx > -1) {
+      layer.geobin = dataSourceData.columns[geobinIdx];
+    }
+
+    layer.bubbleSizeFields = ((_d = dataSourceData.fields) !== null && _d !== void 0 ? _d : []).map(function (field) {
+      return typeof field === 'string' ? field : field.name;
+    }).filter(function (field, index) {
+      var _a, _b;
+
+      return !['latitude', 'longitude', 'geobin'].includes(field) && types_1.inferDataTypeFromData((_b = (_a = dataSourceData.columns) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : []) === 'number';
+    }); // Sanitize colors within layers
+
+    layer.seriesColors = Array.isArray(layer.seriesColors) ? colorUtils_1.sanitizeArrayOfColors(layer.seriesColors) : undefined;
+    layer.dataColors = Array.isArray(layer.dataColors) ? colorUtils_1.sanitizeArrayOfColors(layer.dataColors) : undefined;
+  });
+  return Object.assign(Object.assign(Object.assign({}, themeColors), {
+    themeColorScheme: themeColorScheme
+  }), layers);
+};
+
+exports.computeVizProps = computeVizProps;
+var Map = withDashboardViz_1.default({
+  ReactViz: PureMap_1.default,
+  vizConfig: config_1.default,
+  computeVizProps: exports.computeVizProps,
+  disableEditModeCover: true,
+  useIconPlaceholder: function useIconPlaceholder() {
+    return false;
+  }
+});
+var themes = config_1.default.themes;
+exports.themes = themes;
+exports.default = Map;
+
+/***/ }),
+/* 190 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/utils/types");
+
+/***/ }),
+/* 191 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(49);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isLatLng = exports.formatColor = exports.DEFAULT_ZOOM = exports.DEFAULT_SHOW_SCALE = exports.DEFAULT_SCALE_UNIT = exports.DEFAULT_CONTROL_FOREGROUND_COLOR = exports.DEFAULT_CONTROL_BACKGROUND_COLOR = exports.DEFAULT_CENTER = void 0;
+
+var React = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(2);
+
+var react_1 = __webpack_require__(1);
+
+var T = __webpack_require__(0);
+
+var chroma = __webpack_require__(192);
+
+var maplibre_gl_1 = __webpack_require__(123);
+
+var MapContext_1 = __webpack_require__(193);
+
+var PureMapContainer_1 = __webpack_require__(194);
+
+__webpack_require__(195);
+
+var MapUtils_1 = __webpack_require__(196);
+
+var Tooltip_1 = __webpack_require__(198);
+
+exports.DEFAULT_CENTER = [0, 0];
+exports.DEFAULT_CONTROL_BACKGROUND_COLOR = '#2b3033';
+exports.DEFAULT_CONTROL_FOREGROUND_COLOR = '#B5B5B5';
+exports.DEFAULT_SCALE_UNIT = 'imperial';
+exports.DEFAULT_SHOW_SCALE = true;
+exports.DEFAULT_ZOOM = 0; // convert rgb/rgba/hex color to encoded color & opacity for SVG strings
+
+var formatColor = function formatColor(color) {
+  var chromaColor = chroma(color);
+  return {
+    color: chroma(chromaColor.rgb()).hex().replace('#', '%23'),
+    opacity: chromaColor.alpha()
+  };
+};
+
+exports.formatColor = formatColor;
+PureMapContainer_1.default.displayName = 'PureMapContainer';
+
+var PureMap = function PureMap(props) {
+  var width = props.width,
+      height = props.height,
+      backgroundColor = props.backgroundColor,
+      baseLayerTileServer = props.baseLayerTileServer,
+      baseLayerTileServerType = props.baseLayerTileServerType,
+      center = props.center,
+      controlBackgroundColor = props.controlBackgroundColor,
+      controlForegroundColor = props.controlForegroundColor,
+      layers = props.layers,
+      scaleUnit = props.scaleUnit,
+      showScale = props.showScale,
+      themeColorScheme = props.themeColorScheme,
+      zoom = props.zoom,
+      onMapLoad = props.onMapLoad;
+
+  var _react_1$useContext = react_1.useContext(MapContext_1.default),
+      defaultTileConfig = _react_1$useContext.defaultTileConfig,
+      customTileConfig = _react_1$useContext.customTileConfig;
+
+  var basemapContainer = react_1.useRef(null);
+  var map = react_1.useRef(null);
+  var scaleControl = react_1.useRef(null);
+  var zoomControl = react_1.useRef(null);
+
+  var _react_1$useMemo = react_1.useMemo(function () {
+    return MapUtils_1.getTilePreset({
+      defaultTileConfig: defaultTileConfig,
+      customTileConfig: customTileConfig
+    });
+  }, [defaultTileConfig, customTileConfig]),
+      tilePreset = _react_1$useMemo.tilePreset,
+      defaultTileLight = _react_1$useMemo.defaultTileLight,
+      defaultTileDark = _react_1$useMemo.defaultTileDark;
+
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tooltipProps = _React$useState2[0],
+      setTooltipProps = _React$useState2[1];
+
+  var lngLatCenter = react_1.useMemo(function () {
+    return [center[1], center[0]];
+  }, [center]);
+  var initializeMap = react_1.useCallback(function (mapStyle) {
+    map.current = new maplibre_gl_1.Map({
+      container: basemapContainer.current,
+      style: mapStyle,
+      center: lngLatCenter,
+      zoom: zoom
+    }); // Fired immediately after all necessary resources have been downloaded
+    // and the first visually complete rendering of the map has occurred.
+
+    map.current.on('load', function () {
+      onMapLoad();
+    }); // zoom
+
+    zoomControl.current = new maplibre_gl_1.NavigationControl({
+      showCompass: false
+    });
+    map.current.addControl(zoomControl.current, 'top-left');
+  }, [lngLatCenter, zoom]);
+  var initializeScale = react_1.useCallback(function () {
+    scaleControl.current = new maplibre_gl_1.ScaleControl({
+      maxWidth: 70,
+      unit: scaleUnit
+    });
+    map.current.addControl(scaleControl.current);
+  }, [scaleUnit]);
+  var updateScale = react_1.useCallback(function () {
+    var _a;
+
+    if (showScale) {
+      (_a = scaleControl === null || scaleControl === void 0 ? void 0 : scaleControl.current) === null || _a === void 0 ? void 0 : _a.setUnit(scaleUnit);
+    }
+  }, [scaleUnit, showScale]);
+  react_1.useEffect(function () {
+    if (map.current) {
+      map.current.resize();
+    }
+  }, [width, height]);
+  react_1.useEffect(function () {
+    // do not render when defaultTileConfig, customTileConfig and tileset are not configured
+    if (Object.keys(tilePreset).length === 0 && (!baseLayerTileServer || !baseLayerTileServerType)) {
+      // eslint-disable-next-line no-console
+      console.warn('Map Tile Server configuration is missing or invalid. Please provide a valid configuration');
+      return;
+    }
+
+    var mapStyle = MapUtils_1.getMapStyle({
+      baseLayerTileServer: baseLayerTileServer,
+      baseLayerTileServerType: baseLayerTileServerType,
+      tilePreset: tilePreset,
+      colorScheme: themeColorScheme,
+      defaultTileLight: defaultTileLight,
+      defaultTileDark: defaultTileDark
+    });
+    mapStyle.version = MapUtils_1.MAP_STYLE_VERSION_NUMBER; // If the map has already been initialized, we update the styles
+
+    if (map.current) {
+      // Refer to https://maplibre.org/maplibre-gl-js-docs/api/map/#setstyle-example for options.diff (default is true)
+      map.current.setStyle(lodash_1.omit(mapStyle, ['theme', 'name', 'key']));
+      updateScale();
+    } else {
+      // initialize the map only once with a constructed style from user configured options
+      // or default configs from the map context
+      initializeMap(lodash_1.omit(mapStyle, ['theme', 'name', 'key']));
+      initializeScale();
+      return;
+    } // eslint-disable-next-line consistent-return
+
+
+    return function () {
+      // free resources
+      map === null || map === void 0 ? void 0 : map.current.remove();
+      map.current = undefined;
+    };
+  }, [tilePreset, initializeMap, initializeScale, updateScale, defaultTileLight, defaultTileDark, baseLayerTileServer, baseLayerTileServerType, themeColorScheme]);
+  react_1.useEffect(function () {
+    if (map.current) {
+      map.current.flyTo({
+        center: lngLatCenter,
+        zoom: zoom
+      });
+    }
+  }, [lngLatCenter, zoom]);
+  react_1.useEffect(function () {
+    var cleanupLayer = function cleanupLayer() {};
+
+    var markers = [];
+    var bubbles = [];
+
+    if (map.current && layers && layers.length && map.current.isStyleLoaded) {
+      try {
+        if (layers[0].type === 'marker' && !('geobin' in layers[0])) {
+          // support for only single layer
+          var markerLayer = layers[0];
+          markerLayer.seriesColors = markerLayer.seriesColors ? markerLayer.seriesColors : MapUtils_1.DEFAULT_SERIES_COLORS;
+
+          cleanupLayer = function cleanupLayer() {
+            if (markers) {
+              markers.forEach(function (marker) {
+                return marker === null || marker === void 0 ? void 0 : marker.remove();
+              });
+              markers = [];
+            }
+          };
+
+          if (markerLayer) {
+            // Remove any existing markers
+            cleanupLayer();
+            var renderedMarkerLayer = MapUtils_1.renderMarkerLayer(markerLayer, themeColorScheme, map, setTooltipProps);
+            markers = renderedMarkerLayer && renderedMarkerLayer.markers;
+          }
+        }
+
+        if (layers[0].type === 'bubble') {
+          // support for only single layer
+          var bubbleLayer = layers[0];
+          bubbleLayer.seriesColors = bubbleLayer.seriesColors ? bubbleLayer.seriesColors : MapUtils_1.DEFAULT_SERIES_COLORS; // update bubbles on events
+
+          cleanupLayer = function cleanupLayer() {
+            if (bubbles && bubbles.length) {
+              bubbles.forEach(function (bubble) {
+                return bubble.remove();
+              });
+              bubbles = [];
+            }
+          }; // render bubbles with data returned from geostats cmds
+
+
+          if (bubbleLayer.geobin && bubbleLayer.bubbleSize) {
+            bubbleLayer.seriesColors = bubbleLayer.seriesColors ? bubbleLayer.seriesColors : MapUtils_1.DEFAULT_SERIES_COLORS;
+            var data = MapUtils_1.bakeBubbleData(bubbleLayer);
+            var staticColors = MapUtils_1.getStaticColors(bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors);
+
+            if (data && staticColors && staticColors.length) {
+              // render bubbles when layers options get update
+              bubbles = MapUtils_1.updateBubbles(data, zoom, staticColors, bubbleLayer.dataColors, themeColorScheme, map, setTooltipProps); // render bubbles on zoom
+
+              map.current.on('zoomend', function () {
+                cleanupLayer();
+                bubbles = MapUtils_1.updateBubbles(data, map.current.getZoom(), staticColors, bubbleLayer.dataColors, themeColorScheme, map, setTooltipProps);
+              });
+            }
+          }
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    return function () {
+      cleanupLayer();
+    };
+  }, [layers, width, height, zoom, themeColorScheme]);
+  var baseMapLayer = React.createElement(React.Fragment, null, React.createElement(PureMapContainer_1.default, {
+    className: "puremap",
+    width: width,
+    height: height,
+    backgroundColor: backgroundColor,
+    controlBackgroundColor: controlBackgroundColor,
+    controlForegroundColor: controlForegroundColor,
+    controlIconColorEncoded: exports.formatColor(controlForegroundColor),
+    ref: basemapContainer,
+    showScale: showScale
+  }), React.createElement(Tooltip_1.default, Object.assign({}, tooltipProps)));
+  return baseMapLayer;
+};
+
+var isLatLng = function isLatLng(props, propName, componentName) {
+  if (props[propName][0] >= -180 && props[propName][0] <= 180 && props[propName][1] >= -90 && props[propName][1] <= 90) {
+    throw new Error("".concat(componentName, " ").concat(propName, " may have reversed [lat, lon] ranges."));
+  }
+
+  if (props[propName][0] < -90 || props[propName][0] > 90 || props[propName][1] < -180 || props[propName][1] > 180) {
+    throw new Error("".concat(componentName, " ").concat(propName, " incorrect [lat, lon] ranges."));
+  }
+
+  return null;
+};
+
+exports.isLatLng = isLatLng;
+PureMap.propTypes = {
+  // eslint-disable-next-line react/no-unused-prop-types
+  mode: T.string,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  backgroundColor: T.string,
+  baseLayerTileServer: T.string,
+  baseLayerTileServerType: T.string,
+  center: exports.isLatLng,
+  controlBackgroundColor: T.string,
+  controlForegroundColor: T.string,
+  layers: T.arrayOf(T.shape({
+    type: T.string,
+    latitude: T.arrayOf(T.number),
+    longitude: T.arrayOf(T.number),
+    label: T.string,
+    showInLegend: T.bool,
+    dataColors: T.oneOfType([T.string, T.arrayOf(T.string)]),
+    seriesColors: T.arrayOf(T.string),
+    tooltipFields: T.arrayOf(T.string),
+    resultLimit: T.number
+  })),
+  scaleUnit: T.string,
+  showScale: T.bool,
+  themeColorScheme: T.string,
+  zoom: T.number,
+  onMapLoad: T.func
+};
+PureMap.defaultProps = {
+  mode: 'view',
+  width: 800,
+  height: 500,
+  backgroundColor: '#0b0c0e',
+  center: exports.DEFAULT_CENTER,
+  controlBackgroundColor: exports.DEFAULT_CONTROL_BACKGROUND_COLOR,
+  controlForegroundColor: exports.DEFAULT_CONTROL_FOREGROUND_COLOR,
+  scaleUnit: exports.DEFAULT_SCALE_UNIT,
+  showScale: exports.DEFAULT_SHOW_SCALE,
+  layers: [],
+  themeColorScheme: 'dark',
+  zoom: exports.DEFAULT_ZOOM,
+  onMapLoad: lodash_1.noop
+};
+exports.default = PureMap;
+
+/***/ }),
+/* 192 */
+/***/ (function(module, exports) {
+
+module.exports = require("chroma-js");
+
+/***/ }),
+/* 193 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/MapContext");
+
+/***/ }),
+/* 194 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var styled_components_1 = __webpack_require__(4);
+
+var lodash_1 = __webpack_require__(2);
+
+var style_1 = __webpack_require__(13);
+
+var PureMapContainer = styled_components_1.default.div.withConfig({
+  displayName: "PureMapContainer",
+  componentId: "sc-1gjwxfv-0"
+})(["overflow:hidden;position:relative;z-index:0;background-color:", ";", ";.custom-marker{width:22px;height:28px;cursor:pointer;}.custom-bubble{cursor:pointer;}.maplibregl-ctrl-top-left{position:absolute;top:12px;left:16px;.maplibregl-ctrl-group{width:40px !important;height:87px !important;border-radius:4px;margin:8px 0px;background-color:", ";box-shadow:0px 26px 103px rgba(0,0,0,0.64),0px 11px 18px rgba(0,0,0,0.32),0px 3px 6px rgba(0,0,0,0.3);& button{width:40px;height:43px;border-top:0;}.mapboxgl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url('data:image/svg+xml;charset=UTF-8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 1C9 0.447715 8.55229 0 8 0C7.44772 0 7 0.447715 7 1V7H1C0.447715 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H7V15C7 15.5523 7.44772 16 8 16C8.55229 16 9 15.5523 9 15V9H15C15.5523 9 16 8.55229 16 8C16 7.44772 15.5523 7 15 7H9V1Z\" fill=\"", "\" fill-opacity=\"", "\" /></svg>');}.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url('data:image/svg+xml;charset=UTF-8,<svg width=\"14\" height=\"3\" viewBox=\"0 0 14 3\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 1.99707C0 1.44479 0.447715 0.99707 1 0.99707H13C13.5523 0.99707 14 1.44479 14 1.99707C14 2.54936 13.5523 2.99707 13 2.99707H1C0.447715 2.99707 0 2.54936 0 1.99707Z\" fill=\"", "\" fill-opacity=\"", "\" /></svg>');}}}.maplibregl-ctrl-bottom-left{display:", ";position:absolute;z-index:0;bottom:16px;left:12px;width:86px;height:29px;border-radius:4px;margin:0;background-color:", ";box-shadow:0px 26px 103px rgba(0,0,0,0.13),0px 11px 18px rgba(0,0,0,0.06),0px 3px 6px rgba(0,0,0,0.06);.maplibregl-ctrl-scale{background-color:", ";color:", ";border:2px solid ", ";border-top:0;border-left:0;border-right:0;padding:0;margin:6px 8px 8px 8px;line-height:13px;letter-spacing:0.02em;font-family:sans-serif;font-size:10px;}}"], function (props) {
+  return props.backgroundColor;
+}, function (props) {
+  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+}, function (props) {
+  return props.controlBackgroundColor;
+}, function (props) {
+  return props.controlIconColorEncoded.color;
+}, function (props) {
+  return props.controlIconColorEncoded.opacity;
+}, function (props) {
+  return props.controlIconColorEncoded.color;
+}, function (props) {
+  return props.controlIconColorEncoded.opacity;
+}, function (props) {
+  return props.showScale ? 'inline' : 'none';
+}, function (props) {
+  return props.controlBackgroundColor;
+}, function (props) {
+  return props.controlBackgroundColor;
+}, function (props) {
+  return props.controlForegroundColor;
+}, function (props) {
+  return props.controlForegroundColor;
+});
+exports.default = PureMapContainer;
+
+/***/ }),
+/* 195 */
+/***/ (function(module, exports) {
+
+module.exports = require("maplibre-gl/dist/maplibre-gl.css");
+
+/***/ }),
+/* 196 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(49);
+
+var _toConsumableArray = __webpack_require__(39);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pieSegment = exports.createPieChart = exports.updateBubbles = exports.bakeBubbleData = exports.transposeArray = exports.matchSize = exports.getStaticColors = exports.getZoomLevelFromGeobin = exports.getMapStyle = exports.getTilePreset = exports.renderMarkerLayer = exports.getMarkerSVGBackgroundImg = 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 = void 0;
+
+var maplibre_gl_1 = __webpack_require__(123);
+
+var lodash_1 = __webpack_require__(2);
+
+var d3_scale_1 = __webpack_require__(69);
+
+var colorUtils_1 = __webpack_require__(11);
+
+var visualization_color_palettes_1 = __webpack_require__(41);
+
+var MarkerIcons_1 = __webpack_require__(197);
+
+exports.DEFAULT_RESULT_LIMIT = 1000;
+exports.DEFAULT_CLUSTER_COLOR = '#909090';
+exports.DEFAULT_SERIES_COLORS = visualization_color_palettes_1.VIZ_CATEGORICAL; // MapLibre requires a map style specification number which is always 8
+
+exports.MAP_STYLE_VERSION_NUMBER = 8;
+exports.MIN_BUBBLE_RADIUS = 4;
+exports.MAX_BUBBLE_RADIUS = 50; // 58
+// Returns marker background img with the requiref fillColor based on the theme
+
+var getMarkerSVGBackgroundImg = function getMarkerSVGBackgroundImg(color, theme) {
+  var fillColor = color.replace('#', '%23');
+  return theme === 'light' ? MarkerIcons_1.defaultMarkerLightTheme(fillColor) : MarkerIcons_1.defaultMarkerDarkTheme(fillColor);
+};
+
+exports.getMarkerSVGBackgroundImg = getMarkerSVGBackgroundImg; // Given a map instance and marker layer inputs, this method adds marker layers
+// Note :- Separated this as a util function for better testability
+
+var renderMarkerLayer = function renderMarkerLayer(markerLayer, themeColorScheme, map, setTooltipProps) {
+  if (!markerLayer || !map || !map.current || !Array.isArray(markerLayer.latitude) || !Array.isArray(markerLayer.longitude)) {
+    return null;
+  }
+
+  var lat = markerLayer.latitude;
+  var lon = markerLayer.longitude;
+  var isStaticColor = !markerLayer.dataColors;
+  var limit = Math.min(lat.length, lon.length, markerLayer.resultLimit ? markerLayer.resultLimit : exports.DEFAULT_RESULT_LIMIT);
+  var markers = [];
+  var colors = [];
+
+  var _loop = function _loop(i) {
+    var staticColor = markerLayer.seriesColors && colorUtils_1.isColor(markerLayer.seriesColors[0]) ? markerLayer.seriesColors[0] : exports.DEFAULT_CLUSTER_COLOR;
+    var dynamicColor = markerLayer.dataColors && colorUtils_1.isColor(markerLayer.dataColors[i]) ? markerLayer.dataColors[i] : exports.DEFAULT_CLUSTER_COLOR;
+    var color = isStaticColor ? staticColor : dynamicColor;
+    colors.push(color); // create a HTML element for each marker
+
+    var el = document.createElement('div');
+    el.className = 'custom-marker';
+    el.style.backgroundImage = "url('data:image/svg+xml;charset=UTF-8,".concat(exports.getMarkerSVGBackgroundImg(color, themeColorScheme), "')");
+    el.addEventListener('mouseover', function () {
+      setTooltipProps({
+        anchor: el,
+        longitude: lon[i],
+        latitude: lat[i]
+      });
+    });
+    el.addEventListener('mouseleave', function () {
+      setTooltipProps({
+        longitude: lon[i],
+        latitude: lat[i]
+      });
+    }); // make a marker for each [lon,lat] and add to the map
+
+    markers.push(new maplibre_gl_1.Marker(el).setLngLat([lon[i], lat[i]]).addTo(map.current));
+  };
+
+  for (var i = 0; i < limit; i += 1) {
+    _loop(i);
+  }
+
+  return {
+    markers: markers,
+    colors: colors
+  };
+};
+
+exports.renderMarkerLayer = renderMarkerLayer;
+/**
+ * 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 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 _a, _b;
+
+  var tilePreset = {};
+  var defaultTileLight = {};
+  var defaultTileDark = {};
+  var tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
+  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;
+  });
+
+  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;
+    });
+  }
+
+  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
+ */
+
+var getMapStyle = function getMapStyle(_ref2) {
+  var _ref2$baseLayerTileSe = _ref2.baseLayerTileServer,
+      baseLayerTileServer = _ref2$baseLayerTileSe === void 0 ? '' : _ref2$baseLayerTileSe,
+      _ref2$baseLayerTileSe2 = _ref2.baseLayerTileServerType,
+      baseLayerTileServerType = _ref2$baseLayerTileSe2 === void 0 ? '' : _ref2$baseLayerTileSe2,
+      _ref2$tilePreset = _ref2.tilePreset,
+      tilePreset = _ref2$tilePreset === void 0 ? {} : _ref2$tilePreset,
+      _ref2$colorScheme = _ref2.colorScheme,
+      colorScheme = _ref2$colorScheme === void 0 ? 'light' : _ref2$colorScheme,
+      _ref2$defaultTileLigh = _ref2.defaultTileLight,
+      defaultTileLight = _ref2$defaultTileLigh === void 0 ? {} : _ref2$defaultTileLigh,
+      _ref2$defaultTileDark = _ref2.defaultTileDark,
+      defaultTileDark = _ref2$defaultTileDark === void 0 ? {} : _ref2$defaultTileDark;
+
+  if (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
+     */
+
+    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 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: 10
+      }]
+    };
+    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 getZoomLevelFromGeobin = function getZoomLevelFromGeobin(geobinStr) {
+  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 = geobinStr.match(geobinPattern);
+  return match && parseInt(match[0], 10);
+};
+
+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 colorUtils_1.isColor(colorArray[i % colorArray.length]) ? colorArray[i % colorArray.length] : exports.DEFAULT_CLUSTER_COLOR;
+  });
+};
+
+exports.getStaticColors = getStaticColors; // Bubble size
+
+var matchSize = function matchSize(dataRange, data) {
+  var size = 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.matchSize = matchSize;
+
+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;
+
+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 transposedBubbleSize = layer.bubbleSize.map(function (n) {
+    return [n];
+  });
+  var isPie = false; // format array if bubbleSize is passed as an array of array (data frame)
+
+  if (typeof layer.bubbleSize[0] !== 'number') {
+    // 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 = exports.transposeArray(layer.bubbleSize); // if multiple series in the dataframe, set isPie to true
+
+    if (layer.bubbleSize.length > 1) {
+      isPie = true;
+    }
+  }
+
+  if (!transposedBubbleSize || !transposedBubbleSize.length) {
+    return null;
+  }
+
+  var data = layer.latitude.map(function (lat, i) {
+    return {
+      zoom: exports.getZoomLevelFromGeobin(layer.geobin[i]),
+      values: transposedBubbleSize[i],
+      coordinates: [layer.longitude[i], lat]
+    };
+  }); // compute the min/max value to encode min/max pie or bubble size
+
+  var min = lodash_1.sum(transposedBubbleSize[0]);
+  var max = lodash_1.sum(transposedBubbleSize[1]);
+  transposedBubbleSize.forEach(function (row) {
+    var bubbleSize = 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,
+    transposedBubbleSize: transposedBubbleSize,
+    bubbleSizeFields: layer.bubbleSizeFields
+  };
+};
+
+exports.bakeBubbleData = bakeBubbleData; // Update bubbles on each zoom level
+
+var updateBubbles = function updateBubbles(dataObj, zoomLevel, staticColors, dynamicColors, theme, map, setTooltipProps) {
+  if (!dataObj || !dataObj.data.length || !map || !map.current) {
+    return null;
+  }
+
+  var data = dataObj.data,
+      dataRange = dataObj.dataRange,
+      resultLimit = dataObj.resultLimit,
+      transposedBubbleSize = dataObj.transposedBubbleSize,
+      bubbleSizeFields = dataObj.bubbleSizeFields,
+      isPie = dataObj.isPie;
+
+  if (!data || !data.length || !dataRange || !dataRange.length) {
+    return null;
+  }
+
+  var roundedZoom = Math.round(zoomLevel);
+  var themeColor = theme === 'light' ? '#ffffff' : '#1a1c20'; // filter data for the current zoom level and sort base on values
+
+  var dataToRender = data.reduce(function (acc, datum, i) {
+    if (datum.zoom === roundedZoom) {
+      acc.push({
+        data: datum,
+        idx: i
+      });
+    }
+
+    return acc;
+  }, []).slice(0, resultLimit || exports.DEFAULT_RESULT_LIMIT).sort(function (a, b) {
+    return lodash_1.sum(b.data.values) - lodash_1.sum(a.data.values);
+  });
+  return dataToRender.map(function (datum, i) {
+    // create an HTML element for each bubble
+    var colors = dynamicColors ? [dataToRender.map(function (obj) {
+      return colorUtils_1.isColor(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : exports.DEFAULT_CLUSTER_COLOR;
+    })[i]] : staticColors;
+    var el = exports.createPieChart(datum.data.values, dataRange, colors, themeColor, isPie);
+
+    var _datum$data$coordinat = _slicedToArray(datum.data.coordinates, 2),
+        longitude = _datum$data$coordinat[0],
+        latitude = _datum$data$coordinat[1];
+
+    var bubbleSize = transposedBubbleSize[datum.idx].map(function (count, index) {
+      return {
+        name: bubbleSizeFields[index],
+        count: count,
+        color: colors[index]
+      };
+    });
+    el.addEventListener('mouseover', function () {
+      setTooltipProps({
+        anchor: el,
+        longitude: longitude,
+        latitude: latitude,
+        bubbleSize: bubbleSize
+      });
+    });
+    el.addEventListener('mouseleave', function () {
+      setTooltipProps({
+        longitude: longitude,
+        latitude: latitude,
+        bubbleSize: bubbleSize
+      });
+    });
+    return new maplibre_gl_1.Marker({
+      element: el
+    }).setLngLat(datum.data.coordinates).addTo(map.current);
+  });
+};
+
+exports.updateBubbles = updateBubbles; // Create an SVG pie from column values
+
+var createPieChart = function createPieChart(values, valueRange, colors, themeColor, isPie) {
+  var offsets = [];
+  var total = 0;
+  values.forEach(function (count) {
+    offsets.push(total);
+    total += count;
+  });
+  var radius = exports.matchSize(valueRange, total);
+  var width = radius * 2; // create bubble svg
+
+  var html = "<div>\n         <svg width=\"".concat(width, "\" height=\"").concat(width, "\" viewbox=\"-3 -3 ").concat(width + 6, " ").concat(width + 6, "\" >"); // add border for pie
+
+  if (isPie) {
+    html += "<circle cx=".concat(radius, " cy=").concat(radius, " r=").concat(radius, " fill='none' stroke-width=\"2\" stroke=").concat(themeColor, " stroke-opacity=\"0.3\"/>");
+  } // create pie segments
+
+
+  values.forEach(function (v, i) {
+    html += exports.pieSegment(offsets[i] / total, (offsets[i] + v) / total, radius, colors[i], themeColor);
+  });
+  html += "</svg>\n        </div>";
+  var el = document.createElement('div');
+  el.className = 'custom-bubble';
+  el.innerHTML = html;
+  return el;
+};
+
+exports.createPieChart = createPieChart; // Create a pie segment
+
+var pieSegment = function pieSegment(start, end, radius, color, themeColor) {
+  if (end - start === 1) {
+    return "<circle cx=".concat(radius, " cy=").concat(radius, " r=").concat(radius - 1, " fill=").concat(color, " fill-opacity=\"0.5\" stroke-width=\"1.5\" stroke=").concat(color, " />");
+  }
+
+  var a0 = 2 * Math.PI * (start - 0.25);
+  var a1 = 2 * Math.PI * (end - 0.25);
+  var x0 = Math.cos(a0);
+  var y0 = Math.sin(a0);
+  var x1 = Math.cos(a1);
+  var y1 = Math.sin(a1);
+  var arc = end - start > 0.5 ? 1 : 0;
+  return "<path d=\"M ".concat(radius, " ").concat(radius, " L ").concat(radius + radius * x0, " ").concat(radius + radius * y0, " A ").concat(radius, " ").concat(radius, " 0 ").concat(arc, " 1 ").concat(radius + radius * x1, " ").concat(radius + radius * y1, " L ").concat(radius, " ").concat(radius, " A 0 0 0 ").concat(arc, " 0 ").concat(radius, " ").concat(radius, "\" fill=\"").concat(color, "\" fill-opacity=\"0.8\" stroke=\"").concat(themeColor, "\" stroke-width=\"2\" stroke-opacity=\"0.3\" />");
+};
+
+exports.pieSegment = pieSegment;
+
+/***/ }),
+/* 197 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultMarkerDarkTheme = exports.defaultMarkerLightTheme = void 0;
+
+var defaultMarkerLightTheme = function defaultMarkerLightTheme(fillColor) {
+  return "<svg width=\"22\" height=\"28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" fill=\"".concat(fillColor, "\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"%2308090A\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"").concat(fillColor, "\" stroke-opacity=\".7\"/></svg>");
+};
+
+exports.defaultMarkerLightTheme = defaultMarkerLightTheme;
+
+var defaultMarkerDarkTheme = function defaultMarkerDarkTheme(fillColor) {
+  return "<svg width=\"22\" height=\"28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" fill=\"".concat(fillColor, "\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"%2308090A\"/><path d=\"M11 .5C5.201.5.5 5.201.5 11c0 3.136 1.376 5.952 3.555 7.875 2.839 2.506 4.144 4.58 4.893 6.02.183.35.334.665.469.946l.014.03c.136.285.263.548.387.766.235.412.571.863 1.182.863.61 0 .947-.45 1.182-.863.124-.218.25-.48.387-.765l.014-.03c.135-.282.286-.597.469-.947.75-1.44 2.054-3.514 4.893-6.02A10.476 10.476 0 0 0 21.5 11C21.5 5.201 16.799.5 11 .5Z\" stroke=\"").concat(fillColor, "\" stroke-opacity=\".15\"/></svg>");
+};
+
+exports.defaultMarkerDarkTheme = defaultMarkerDarkTheme;
+
+/***/ }),
+/* 198 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertDegToDMS = void 0;
+
+var React = __webpack_require__(1);
+
+var styled_components_1 = __webpack_require__(4);
+
+var Popover_1 = __webpack_require__(100);
+
+var i18n_1 = __webpack_require__(3);
+
+var StyledPopover = styled_components_1.default(Popover_1.default).withConfig({
+  displayName: "Tooltip__StyledPopover",
+  componentId: "xwewsa-0"
+})(["width:250px;font-size:12px;"]);
+var StyledTable = styled_components_1.default.table.withConfig({
+  displayName: "Tooltip__StyledTable",
+  componentId: "xwewsa-1"
+})(["padding:2px 6px 2px 6px;width:100%;"]);
+var StyledTitleColumn = styled_components_1.default.td.withConfig({
+  displayName: "Tooltip__StyledTitleColumn",
+  componentId: "xwewsa-2"
+})(["opacity:0.85;"]);
+var StyledValueColumn = styled_components_1.default.td.withConfig({
+  displayName: "Tooltip__StyledValueColumn",
+  componentId: "xwewsa-3"
+})(["text-align:right;"]);
+var BubbleSizeColorBlock = styled_components_1.default.div.withConfig({
+  displayName: "Tooltip__BubbleSizeColorBlock",
+  componentId: "xwewsa-4"
+})(["background-color:", ";display:inline-block;margin-right:4px;border-radius:2px;width:6px;height:11px;transform:translateY(1px);"], function (props) {
+  return props.color;
+});
+
+var convertDegToDMS = function convertDegToDMS(deg, type) {
+  var direction;
+
+  if (type === 'longitude') {
+    direction = deg < 0 ? 'W' : 'E';
+  } else if (type === 'latitude') {
+    direction = deg < 0 ? 'S' : 'N';
+  }
+
+  var degrees = Math.floor(deg);
+  var minfloat = Math.abs((deg - degrees) * 60);
+  var minutes = Math.floor(minfloat);
+  var secfloat = (minfloat - minutes) * 60;
+  var seconds = Math.round(secfloat);
+  degrees = Math.abs(degrees);
+
+  if (seconds === 60) {
+    minutes += 1;
+    seconds = 0;
+  }
+
+  if (minutes === 60) {
+    degrees += 1;
+    minutes = 0;
+  }
+
+  return "".concat(degrees, "\xB0 ").concat(minutes, "' ").concat(seconds, "\" ").concat(direction);
+};
+
+exports.convertDegToDMS = convertDegToDMS;
+
+var Tooltip = function Tooltip(_ref) {
+  var anchor = _ref.anchor,
+      latitude = _ref.latitude,
+      longitude = _ref.longitude,
+      _ref$bubbleSize = _ref.bubbleSize,
+      bubbleSize = _ref$bubbleSize === void 0 ? [] : _ref$bubbleSize;
+  return React.createElement(StyledPopover, {
+    open: !!anchor,
+    anchor: anchor,
+    "data-test": "map-marker-tooltip",
+    defaultPlacement: "above"
+  }, React.createElement(StyledTable, null, React.createElement("tbody", null, React.createElement("tr", null, React.createElement(StyledTitleColumn, null, i18n_1._('Latitude')), React.createElement(StyledValueColumn, {
+    "data-test": "latitude"
+  }, exports.convertDegToDMS(latitude, 'latitude'))), React.createElement("tr", null, React.createElement(StyledTitleColumn, null, i18n_1._('Longitude')), React.createElement(StyledValueColumn, {
+    "data-test": "longitude"
+  }, exports.convertDegToDMS(longitude, 'longitude'))), bubbleSize.map(function (_ref2) {
+    var name = _ref2.name,
+        count = _ref2.count,
+        color = _ref2.color;
+    return React.createElement("tr", {
+      key: color
+    }, React.createElement(StyledTitleColumn, {
+      "data-test": "count-title"
+    }, React.createElement(BubbleSizeColorBlock, {
+      color: color
+    }), name), React.createElement(StyledValueColumn, {
+      "data-test": "count-value"
+    }, count));
+  }))));
+};
+
+exports.default = Tooltip;
+
+/***/ }),
+/* 199 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var visualization_icons_1 = __webpack_require__(42);
+
+var schemaUtils_1 = __webpack_require__(14);
+
+var visualization_color_palettes_1 = __webpack_require__(41);
+
+var themes_1 = __webpack_require__(70);
+
+var i18n_1 = __webpack_require__(3);
+
+var VizBehavior_1 = __webpack_require__(5);
+
+var VizCategory_1 = __webpack_require__(26);
+
+var configUtils_1 = __webpack_require__(6);
+
+var defaultContext = {
+  colorRangeConfig: [{
+    to: 20,
+    value: '#D41F1F'
+  }, {
+    from: 20,
+    to: 40,
+    value: '#D94E17'
+  }, {
+    from: 40,
+    to: 60,
+    value: '#CBA700'
+  }, {
+    from: 60,
+    to: 80,
+    value: '#669922'
+  }, {
+    from: 80,
+    value: '#118832'
+  }]
+};
+var dataContract = {
+  requiredDataSources: [],
+  optionalDataSources: [{
+    name: 'primary',
+    description: 'DataSource that powers the visualization.'
+  }],
+  initialRequestParams: {
+    primary: {
+      offset: 0,
+      count: 10000
+    }
+  }
+};
+var size = {
+  initialWidth: 800,
+  initialHeight: 600
+};
+var optionsSchema = {
+  backgroundColor: {
+    default: '> themes.defaultBackgroundColor',
+    description: 'Specify the color for the background. You may use a dataSource to apply the color. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e".',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA,
+    type: 'string'
+  },
+  center: {
+    default: [37.7749, -122.4194],
+    type: 'array',
+    description: 'Specify the center of the map in coordinates, in the form of [latitude, longitude]. When not provided, will automatically calculate map center based on available location data. When no location data available will fall back to [37.7749, -122.4194].',
+    items: {
+      type: 'number'
+    }
+  },
+  layers: {
+    default: [{
+      type: 'bubble',
+      latitude: '> primary | seriesByName("latitude")',
+      longitude: '> primary | seriesByName("longitude")',
+      seriesColors: visualization_color_palettes_1.VIZ_CATEGORICAL,
+      bubbleSize: '> primary | frameWithoutSeriesNames("geobin", "latitude", "longitude") | frameBySeriesTypes("number")',
+      tooltipFields: []
+    }],
+    type: 'array',
+    description: 'Specify the data visualization layers on top of the base map. Can be empty to only show the base map.',
+    items: {
+      anyOf: [{
+        type: 'object',
+        properties: {
+          type: {
+            description: 'Specify the type of data layer method to display points on the map. For example, “bubble” or “marker”.',
+            type: 'string',
+            pattern: schemaUtils_1.getPattern(['marker']),
+            default: 'marker'
+          },
+          latitude: {
+            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map.',
+            type: ['string', 'array'],
+            default: '> primary | seriesByName("latitude")'
+          },
+          longitude: {
+            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map.',
+            type: ['string', 'array'],
+            default: '> primary | seriesByName("longitude")'
+          },
+          dataColors: {
+            description: 'Specify the colors used for data points. You may use an array of colors to be picked from, or you may use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. ',
+            type: ['string', 'array']
+          },
+          seriesColors: {
+            default: visualization_color_palettes_1.VIZ_CATEGORICAL,
+            description: 'Specify the colors used for data points.',
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+            }
+          },
+          tooltipFields: {
+            description: 'Specify the fields to add to tooltips shown while hovering over data points. These fields and their corresponding values will be shown in addition to the ones displayed by default.',
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            default: []
+          },
+          resultLimit: {
+            description: 'Specify the maximum number of data points rendered on the map to improve performance.',
+            type: 'number',
+            default: 1000
+          }
+        }
+      }, {
+        type: 'object',
+        properties: {
+          type: {
+            description: 'Specify the type of data layer method to display points on the map. For example, “bubble” or “marker”.',
+            type: 'string',
+            pattern: schemaUtils_1.getPattern(['bubble']),
+            default: 'bubble'
+          },
+          bubbleSize: {
+            description: 'Specify the data column to encode bubble size',
+            type: ['string', 'array'],
+            default: '> primary | frameWithoutSeriesNames("geobin", "latitude", "longitude") | frameBySeriesTypes("number")'
+          },
+          latitude: {
+            description: 'Specify a dataSource series to apply latitude coordinates for data points displayed on the map.',
+            type: ['string', 'array'],
+            items: {
+              type: 'number'
+            },
+            default: '> primary | seriesByName("latitude")'
+          },
+          longitude: {
+            description: 'Specify a dataSource series to apply longitude coordinates for data points displayed on the map.',
+            type: ['string', 'array'],
+            items: {
+              type: 'number'
+            },
+            default: '> primary | seriesByName("longitude")'
+          },
+          dataColors: {
+            description: 'Specify the colors used for data points. You may use an array of colors to be picked from, or you may use a dataSource to apply dynamic coloring. For example, “> primary | seriesByName("status") | matchValue(colorMatchConfig)”. ',
+            type: ['string', 'array']
+          },
+          seriesColors: {
+            default: visualization_color_palettes_1.VIZ_CATEGORICAL,
+            description: "Specify the colors used for data points. For example, [\"#FF0000\", \"#0000FF\", \"#008000\"].",
+            type: 'array',
+            items: {
+              type: 'string',
+              pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+            }
+          },
+          tooltipFields: {
+            description: 'Specify the fields to add to tooltips shown while hovering over data points. These fields and their corresponding values will be shown in addition to the ones displayed by default.',
+            type: 'array',
+            items: {
+              type: 'string'
+            },
+            default: []
+          },
+          resultLimit: {
+            description: 'Specify the maximum number of data points rendered on the map to improve performance.',
+            type: 'number',
+            default: 1000
+          }
+        }
+      }]
+    }
+  },
+  scaleUnit: {
+    default: 'metric',
+    type: 'string',
+    description: 'Specify which scale unit to use.',
+    pattern: schemaUtils_1.getPattern(['metric', 'imperial'])
+  },
+  // TODO: choropleth map retain old design
+  // showBaseLayer: {
+  //     default: true,
+  //     type: 'boolean',
+  //     description: 'Specify if showing the base map.',
+  // },
+  showScale: {
+    default: true,
+    type: 'boolean',
+    description: 'Specify whether the scale on the bottom left is shown.'
+  },
+  baseLayerTileServer: {
+    type: 'string',
+    description: 'Specify the tile set URL for the base map.'
+  },
+  baseLayerTileServerType: {
+    type: 'string',
+    description: 'Specify the type of tile set for the base map.',
+    pattern: schemaUtils_1.getPattern(['vector', 'raster'])
+  },
+  zoom: {
+    default: 5,
+    description: 'Specify the zoom level of the map.',
+    type: 'number'
+  }
+};
+var themes = {
+  defaultBackgroundColor: function defaultBackgroundColor(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: themes_1.variables.black(props),
+        light: themes_1.variables.backgroundColor(props)
+      },
+      prisma: themes_1.variables.backgroundColorSidebar(props)
+    })(props);
+  },
+  controlBackgroundColor: function controlBackgroundColor(props) {
+    return themes_1.pick({
+      enterprise: {
+        dark: themes_1.variables.gray22(props),
+        light: themes_1.variables.white(props)
+      },
+      prisma: themes_1.variables.backgroundColorPopup(props)
+    })(props);
+  },
+  controlForegroundColor: function controlForegroundColor(props) {
+    return themes_1.pick({
+      enterprise: themes_1.variables.textColor(props),
+      prisma: themes_1.variables.contentColorDefault(props)
+    })(props);
+  }
+};
+var editorConfig = [{
+  label: i18n_1._('Data Layer Formatting'),
+  layout: [[{
+    label: i18n_1._('Layer Type'),
+    option: 'layers[0].type',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Marker'),
+        value: 'marker'
+      }, {
+        label: i18n_1._('Bubble'),
+        value: 'bubble'
+      }]
+    }
+  }], [{
+    label: i18n_1._('Latitude'),
+    option: 'layers[0].latitude',
+    editor: 'editor.columnSelector',
+    editorProps: {
+      dataSourceKey: 'primary'
+    }
+  }], [{
+    label: i18n_1._('Longitude'),
+    option: 'layers[0].longitude',
+    editor: 'editor.columnSelector',
+    editorProps: {
+      dataSourceKey: 'primary'
+    }
+  }], [{
+    label: i18n_1._('Size'),
+    option: 'layers[0].bubbleSize',
+    editor: 'editor.columnSelector',
+    showEditor: function showEditor(_ref) {
+      var options = _ref.options;
+      return options.layers && options.layers.length && options.layers[0].type === 'bubble';
+    },
+    editorProps: {
+      dataSourceKey: 'primary'
+    }
+  }]]
+}];
+/**
+ * visualization configuration
+ */
+
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.map',
+
+  /**
+   * viz name
+   */
+  name: 'Map',
+  category: VizCategory_1.VizCategory.CHOROPLETH,
+  status: 'preview',
+
+  /**
+   * viz icon
+   */
+  icon: visualization_icons_1.Map,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: optionsSchema,
+  editorConfig: editorConfig,
+  events: {
+    'map.load': {
+      description: 'triggered when map is fully loaded'
+    }
+  },
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
+  themes: themes,
+  requiredProps: []
+};
+exports.default = configUtils_1.enhanceConfig(config);
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=Map.js.map