@splunk/visualizations 24.3.0 → 24.3.3

package/Map.js

@@ -360,7 +360,7 @@ var _typeof = __webpack_require__(20);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deepMergeWithArrayOverrides = exports.extendStaticWrapperProps = void 0;
+exports.findClosestMatchFromDefaultList = exports.deepMergeWithArrayPrimitiveOverrides = exports.extendStaticWrapperProps = void 0;
 
 var lodash_1 = __webpack_require__(2);
 /**
@@ -386,17 +386,19 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
 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)
+ * deeply nested primitive keys are merged similarly to lodash's defaultsDeep, while keys with arrays of primitives will be preserved if already present in the resultant merged object
+ * this prevents default arrays of primitives from appending values to user-defined arrays (this occurs if the default array is longer than the user-defined one).
+ * Array of objects gets merged with the defaults, where the defaults can be an array of objects. Closest matching default object from the defaults list based on key - value pair
+ * will be used for merging defaults for each object in the array. If no closest match found, first object in default array list used for merging.
  *
- * @method deepMergeWithArrayOverrides
+ * @method deepMergeWithArrayPrimitiveOverrides
  * @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 deepMergeWithArrayPrimitiveOverrides = function deepMergeWithArrayPrimitiveOverrides(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++) {
@@ -407,18 +409,72 @@ var deepMergeWithArrayOverrides = function deepMergeWithArrayOverrides(initial)
     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]);
+        clone[sourceKey] = exports.deepMergeWithArrayPrimitiveOverrides(clone[sourceKey], sourceToApply[sourceKey]);
+      } else if (Array.isArray(clone[sourceKey]) && _typeof(clone[sourceKey][0]) === 'object' && !Array.isArray(clone[sourceKey][0])) {
+        // If option is an array of objects
+        for (var i = 0; i < clone[sourceKey].length; i += 1) {
+          if (_typeof(clone[sourceKey][i]) === 'object') {
+            var closestMatchIdx = exports.findClosestMatchFromDefaultList(sourceToApply[sourceKey], clone[sourceKey][i]);
+
+            if (closestMatchIdx > -1) {
+              clone[sourceKey][i] = exports.deepMergeWithArrayPrimitiveOverrides(clone[sourceKey][i], sourceToApply[sourceKey][closestMatchIdx]);
+            }
+          }
+        }
       }
     });
   });
   return clone;
 };
 
-exports.deepMergeWithArrayOverrides = deepMergeWithArrayOverrides;
+exports.deepMergeWithArrayPrimitiveOverrides = deepMergeWithArrayPrimitiveOverrides;
+/**
+ *  Finds the closest matching object from the list, which has the max same key value pairs.
+ *  Returns the index of match if found, or -1
+ *  For eg :-
+   const list = [{
+        type: "marker",
+        lat: "value1"
+    }, {
+        type: "bubble",
+        size: "value2"
+    }];
+
+    const obj = {
+        type: 'bubble'
+    };
+
+    findClosestMatch(list, obj) -> returns index 1.
+ */
+
+var findClosestMatchFromDefaultList = function findClosestMatchFromDefaultList(searchList, inputObj) {
+  if (!Array.isArray(searchList) || searchList.length === 0) {
+    return -1;
+  }
+
+  var keys = Object.keys(inputObj);
+  var maxMatchCnt = 0;
+  var maxMatchIdx = 0;
+  searchList.forEach(function (item, idx) {
+    var matchCnt = 0;
+    keys.forEach(function (key) {
+      if (item[key] === inputObj[key]) {
+        matchCnt += 1;
+      }
+    });
+
+    if (Math.max(maxMatchCnt, matchCnt) > maxMatchCnt) {
+      maxMatchCnt = matchCnt;
+      maxMatchIdx = idx;
+    }
+  });
+  return maxMatchIdx;
+};
+
+exports.findClosestMatchFromDefaultList = findClosestMatchFromDefaultList;
 
 /***/ }),
 /* 8 */
@@ -520,7 +576,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.3.0 - 1c1ae4b3c",
+      "data-splunk-visualization-version": "24.3.3 - 8d441d88c",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -593,7 +649,7 @@ var T = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(2);
 
-var DataSource_1 = __webpack_require__(33);
+var DataSource_1 = __webpack_require__(34);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -716,6 +772,39 @@ exports.getPaginationParams = getPaginationParams;
 "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;
+
+/***/ }),
+/* 26 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -798,7 +887,7 @@ IconPlaceholder.defaultProps = {
 exports.default = FixedSizeContainer_1.default(IconPlaceholder);
 
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -826,7 +915,7 @@ var VizCategory;
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
 /***/ }),
-/* 27 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -840,15 +929,15 @@ var React = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(2);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(28);
+var getSettingsFromThemedProps_1 = __webpack_require__(29);
 
-var Options_1 = __webpack_require__(29);
+var Options_1 = __webpack_require__(30);
 
-var SanitizeProps_1 = __webpack_require__(30);
+var SanitizeProps_1 = __webpack_require__(31);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SplunkVisualization_1 = __webpack_require__(31);
+var SplunkVisualization_1 = __webpack_require__(32);
 
 var VizBehavior_1 = __webpack_require__(5);
 
@@ -856,9 +945,9 @@ var getSorting_1 = __webpack_require__(23);
 
 var getPagination_1 = __webpack_require__(24);
 
-var useDeepMemo_1 = __webpack_require__(34);
+var useDeepMemo_1 = __webpack_require__(35);
 
-var JSONSchemaUtils_1 = __webpack_require__(35);
+var JSONSchemaUtils_1 = __webpack_require__(25);
 
 var MissingPropsMessage_1 = __webpack_require__(36);
 
@@ -920,7 +1009,7 @@ var withDashboardViz = function withDashboardViz(opts) {
       try {
         return Options_1.Options.evaluate({
           context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
-          options: hocUtils_1.deepMergeWithArrayOverrides({}, options, defaultOptions)
+          options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
         }, dataSources, themeFunc);
       } catch (e) {
         // eslint-disable-next-line no-console
@@ -1050,25 +1139,25 @@ var withDashboardViz = function withDashboardViz(opts) {
 exports.default = withDashboardViz;
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
-/* 29 */
+/* 30 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-encoding/Options");
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1086,7 +1175,7 @@ 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
+var VizActionHandler_1 = __webpack_require__(33); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -1219,7 +1308,7 @@ SplunkVisualization.defaultProps = {
 exports.default = SplunkVisualization;
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1256,7 +1345,7 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
 exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1269,7 +1358,7 @@ exports.validSortDirs = void 0;
 exports.validSortDirs = ['asc', 'desc', 'none'];
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1313,39 +1402,6 @@ var useDeepMemo = function useDeepMemo(fn, dependencies) {
 
 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__) {
@@ -1448,7 +1504,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.3.0 - 1c1ae4b3c"
+  'data-splunk-visualization-version': "24.3.3 - 8d441d88c"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1493,7 +1549,7 @@ var React = __webpack_require__(1);
 
 var colorUtils_1 = __webpack_require__(11);
 
-var IconPlaceholder_1 = __webpack_require__(25);
+var IconPlaceholder_1 = __webpack_require__(26);
 
 var VizBehavior_1 = __webpack_require__(5);
 
@@ -1562,13 +1618,13 @@ module.exports = require("@splunk/visualization-icons");
 /* 45 */,
 /* 46 */,
 /* 47 */,
-/* 48 */
+/* 48 */,
+/* 49 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
-/* 49 */,
 /* 50 */,
 /* 51 */,
 /* 52 */,
@@ -1734,24 +1790,46 @@ module.exports = require("maplibre-gl");
 "use strict";
 
 
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PureMap = exports.config = exports.themes = exports.computeVizProps = void 0;
+/* eslint-disable no-sequences */
+
+var React = __webpack_require__(1);
 
 var colorUtils_1 = __webpack_require__(11);
 
 var types_1 = __webpack_require__(190);
 
-var PureMap_1 = __webpack_require__(191);
+var dsl_1 = __webpack_require__(191);
+
+var JSONSchemaUtils_1 = __webpack_require__(25);
+
+var hocUtils_1 = __webpack_require__(7);
+
+var PureMap_1 = __webpack_require__(192);
 
 exports.PureMap = PureMap_1.default;
 
-var config_1 = __webpack_require__(199);
+var config_1 = __webpack_require__(200);
 
 exports.config = config_1.default;
 
-var withDashboardViz_1 = __webpack_require__(27);
+var withDashboardViz_1 = __webpack_require__(28);
 
 var computeVizProps = function computeVizProps(_ref) {
   var themeFunc = _ref.themeFunc,
@@ -1797,8 +1875,121 @@ var computeVizProps = function computeVizProps(_ref) {
   }), layers);
 };
 
-exports.computeVizProps = computeVizProps;
-var Map = withDashboardViz_1.default({
+exports.computeVizProps = computeVizProps; // HOC for stripping the internal fields for Maps
+
+var withoutInternalFields = function withoutInternalFields(Viz) {
+  // eslint-disable-next-line react/display-name
+  var VizWithoutInternalFields = function VizWithoutInternalFields(_a) {
+    var dataSources = _a.dataSources,
+        otherProps = __rest(_a, ["dataSources"]);
+
+    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
+      return React.createElement(Viz, Object.assign({}, otherProps));
+    }
+
+    var primary = dataSources.primary;
+    var _primary$data = primary.data,
+        columns = _primary$data.columns,
+        fields = _primary$data.fields;
+    var newColumns = [];
+    var newFields = [];
+
+    if (fields && columns && fields.length === columns.length) {
+      // computed sorted index for removal
+      var indicesToRemove = new Set(fields.reduce(function (arr, e, i) {
+        return (typeof e === 'string' ? e.startsWith('_') : e.name.toString().startsWith('_')) && arr.push(i), arr;
+      }, []));
+      newFields = fields.filter(function (d, i) {
+        return !indicesToRemove.has(i);
+      });
+      newColumns = columns.filter(function (d, i) {
+        return !indicesToRemove.has(i);
+      });
+    }
+
+    var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
+      primary: Object.assign(Object.assign({}, primary), {
+        data: Object.assign(Object.assign({}, primary.data), {
+          columns: newColumns,
+          fields: newFields
+        })
+      })
+    });
+    return React.createElement(Viz, Object.assign({
+      dataSources: modifiedDatasources
+    }, otherProps));
+  };
+
+  VizWithoutInternalFields.propTypes = Viz.propTypes;
+  VizWithoutInternalFields.defaultProps = Viz.defaultProps;
+  VizWithoutInternalFields.config = Viz.config;
+  return VizWithoutInternalFields;
+}; // HOC for updating all null values in data columns to zeros
+// excluding 'latitude', 'longitude' and 'geobin'
+
+
+var withNullToZeros = function withNullToZeros(Viz) {
+  // eslint-disable-next-line react/display-name
+  var VizWithColumnsNullToZeros = function VizWithColumnsNullToZeros(_a) {
+    var dataSources = _a.dataSources,
+        options = _a.options,
+        otherProps = __rest(_a, ["dataSources", "options"]);
+
+    if (!dataSources || !dataSources.primary || !dataSources.primary.data) {
+      return React.createElement(Viz, Object.assign({}, otherProps));
+    }
+
+    var primary = dataSources.primary;
+    var _primary$data2 = primary.data,
+        columns = _primary$data2.columns,
+        fields = _primary$data2.fields;
+    var newColumns = columns;
+    var mergedOptions = hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, JSONSchemaUtils_1.pickFieldFromJSONSchema(config_1.default.optionsSchema, 'default'));
+
+    if (mergedOptions.layers && mergedOptions.layers.length && mergedOptions.layers[0].type === 'bubble') {
+      var latitudeField = dsl_1.getFieldsFromDSL(mergedOptions.layers[0].latitude, dataSources)[0] || '';
+      var longitudeField = dsl_1.getFieldsFromDSL(mergedOptions.layers[0].longitude, dataSources)[0] || '';
+      var excludedFields = [latitudeField, longitudeField, 'geobin'];
+      var indicesToEvaluate = new Set(fields.reduce(function (arr, e, i) {
+        var field = typeof e === 'string' ? e : e.name.toString();
+
+        if (!excludedFields.includes(field)) {
+          arr.push(i);
+        }
+
+        return arr;
+      }, []));
+      newColumns = columns.map(function (column, i) {
+        if (indicesToEvaluate.has(i)) {
+          return column.map(function (value) {
+            return !value ? 0 : value;
+          });
+        }
+
+        return column;
+      });
+    }
+
+    var modifiedDatasources = Object.assign(Object.assign({}, dataSources), {
+      primary: Object.assign(Object.assign({}, primary), {
+        data: Object.assign(Object.assign({}, primary.data), {
+          columns: newColumns
+        })
+      })
+    });
+    return React.createElement(Viz, Object.assign({
+      dataSources: modifiedDatasources,
+      options: options
+    }, otherProps));
+  };
+
+  VizWithColumnsNullToZeros.propTypes = Viz.propTypes;
+  VizWithColumnsNullToZeros.defaultProps = Viz.defaultProps;
+  VizWithColumnsNullToZeros.config = Viz.config;
+  return VizWithColumnsNullToZeros;
+};
+
+var Map = withoutInternalFields(withNullToZeros(withDashboardViz_1.default({
   ReactViz: PureMap_1.default,
   vizConfig: config_1.default,
   computeVizProps: exports.computeVizProps,
@@ -1806,7 +1997,7 @@ var Map = withDashboardViz_1.default({
   useIconPlaceholder: function useIconPlaceholder() {
     return false;
   }
-});
+})));
 var themes = config_1.default.themes;
 exports.themes = themes;
 exports.default = Map;
@@ -1819,12 +2010,18 @@ module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
 /* 191 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/utils/dsl");
+
+/***/ }),
+/* 192 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(48);
+var _slicedToArray = __webpack_require__(49);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1839,19 +2036,19 @@ var react_1 = __webpack_require__(1);
 
 var T = __webpack_require__(0);
 
-var chroma = __webpack_require__(192);
+var chroma = __webpack_require__(193);
 
 var maplibre_gl_1 = __webpack_require__(123);
 
-var MapContext_1 = __webpack_require__(193);
+var MapContext_1 = __webpack_require__(194);
 
-var PureMapContainer_1 = __webpack_require__(194);
+var PureMapContainer_1 = __webpack_require__(195);
 
-__webpack_require__(195);
+__webpack_require__(196);
 
-var MapUtils_1 = __webpack_require__(196);
+var MapUtils_1 = __webpack_require__(197);
 
-var Tooltip_1 = __webpack_require__(198);
+var Tooltip_1 = __webpack_require__(199);
 
 exports.DEFAULT_CENTER = [0, 0];
 exports.DEFAULT_CONTROL_BACKGROUND_COLOR = '#2b3033';
@@ -1915,12 +2112,12 @@ var PureMap = function PureMap(props) {
     return [center[1], center[0]];
   }, [center]);
   var initializeMap = react_1.useCallback(function (mapStyle) {
-    map.current = new maplibre_gl_1.Map({
+    map.current = new maplibre_gl_1.Map(Object.assign({
       container: basemapContainer.current,
       style: mapStyle,
       center: lngLatCenter,
       zoom: zoom
-    }); // Fired immediately after all necessary resources have been downloaded
+    }, MapUtils_1.getZoomConstraintsFromTileConfig(mapStyle))); // 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 () {
@@ -1972,6 +2169,13 @@ var PureMap = function PureMap(props) {
     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']));
+
+      var _MapUtils_1$getZoomCo = MapUtils_1.getZoomConstraintsFromTileConfig(mapStyle),
+          minZoom = _MapUtils_1$getZoomCo.minZoom,
+          maxZoom = _MapUtils_1$getZoomCo.maxZoom;
+
+      map.current.setMinZoom(minZoom);
+      map.current.setMaxZoom(maxZoom);
       updateScale();
     } else {
       // initialize the map only once with a constructed style from user configured options
@@ -2003,58 +2207,63 @@ var PureMap = function PureMap(props) {
     var bubbles = [];
 
     if (map.current && layers && layers.length && map.current.isStyleLoaded) {
-      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 = [];
-          }
-        };
+      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 (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 (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 (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) {
+              cleanupLayer(); // render bubbles when layers options get update
 
-          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
+              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);
-            });
+              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);
       }
     }
 
@@ -2135,19 +2344,19 @@ PureMap.defaultProps = {
 exports.default = PureMap;
 
 /***/ }),
-/* 192 */
+/* 193 */
 /***/ (function(module, exports) {
 
 module.exports = require("chroma-js");
 
 /***/ }),
-/* 193 */
+/* 194 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/MapContext");
 
 /***/ }),
-/* 194 */
+/* 195 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2194,26 +2403,26 @@ var PureMapContainer = styled_components_1.default.div.withConfig({
 exports.default = PureMapContainer;
 
 /***/ }),
-/* 195 */
+/* 196 */
 /***/ (function(module, exports) {
 
 module.exports = require("maplibre-gl/dist/maplibre-gl.css");
 
 /***/ }),
-/* 196 */
+/* 197 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(48);
+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;
+exports.pieSegment = exports.createPieChart = exports.updateBubbles = exports.bakeBubbleData = exports.sanitizeValues = exports.transposeArray = exports.matchSize = exports.getStaticColors = exports.getZoomLevelFromGeobin = exports.getZoomConstraintsFromTileConfig = 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);
 
@@ -2225,16 +2434,17 @@ var colorUtils_1 = __webpack_require__(11);
 
 var visualization_color_palettes_1 = __webpack_require__(41);
 
-var MarkerIcons_1 = __webpack_require__(197);
+var MarkerIcons_1 = __webpack_require__(198);
 
 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.MAP_STYLE_VERSION_NUMBER = 8; // currently using one [min, max] value set for bubbles across all zoom levels
+// TODO: design choices on [min, max] bubble size for different zoom levels
+
 exports.MIN_BUBBLE_RADIUS = 4;
-exports.MAX_BUBBLE_RADIUS = 50; // 58
-// Returns marker background img with the requiref fillColor based on the theme
+exports.MAX_BUBBLE_RADIUS = 50; // Returns marker background img with the requiref fillColor based on the theme
 
 var getMarkerSVGBackgroundImg = function getMarkerSVGBackgroundImg(color, theme) {
   var fillColor = color.replace('#', '%23');
@@ -2424,15 +2634,59 @@ var getMapStyle = function getMapStyle(_ref2) {
 
 exports.getMapStyle = getMapStyle;
 
+var getZoomConstraintsFromTileConfig = function getZoomConstraintsFromTileConfig(tileConfig) {
+  var sources = tileConfig.sources,
+      layers = tileConfig.layers; // check sources for minzoom maxzoom first
+
+  var sourceKeys = Object.keys(sources);
+
+  for (var i = 0; i < sourceKeys.length; i += 1) {
+    var _sources$sourceKeys$i = sources[sourceKeys[i]],
+        minzoom = _sources$sourceKeys$i.minzoom,
+        maxzoom = _sources$sourceKeys$i.maxzoom;
+
+    if (lodash_1.isNumber(minzoom) && lodash_1.isNumber(maxzoom)) {
+      return {
+        minZoom: minzoom,
+        maxZoom: maxzoom
+      };
+    }
+  } // then check layers
+
+
+  for (var _i = 0; _i < layers.length; _i += 1) {
+    var _layers$_i = layers[_i],
+        _minzoom = _layers$_i.minzoom,
+        _maxzoom = _layers$_i.maxzoom;
+
+    if (lodash_1.isNumber(_minzoom) && lodash_1.isNumber(_maxzoom)) {
+      return {
+        minZoom: _minzoom,
+        maxZoom: _maxzoom
+      };
+    }
+  } // Maplibre default - would reset previous min/maxZoom
+
+
+  return {
+    minZoom: 0,
+    maxZoom: 22
+  };
+};
+
+exports.getZoomConstraintsFromTileConfig = getZoomConstraintsFromTileConfig;
+
 var getZoomLevelFromGeobin = function getZoomLevelFromGeobin(geobinStr) {
+  var _a;
+
   if (!geobinStr) {
     return null;
   } // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range
 
 
-  var geobinPattern = /(?<=bin_id_zl_).([0-9]{0,2})?(?=_y_)/g;
-  var match = geobinStr.match(geobinPattern);
-  return match && parseInt(match[0], 10);
+  var geobinPattern = /bin_id_zl_([0-9]{0,2})?_y_/g;
+  var match = geobinPattern.exec(geobinStr);
+  return (_a = (match === null || match === void 0 ? void 0 : match.length) && parseInt(match[1], 10)) !== null && _a !== void 0 ? _a : null;
 };
 
 exports.getZoomLevelFromGeobin = getZoomLevelFromGeobin; // Bubble colors - static
@@ -2485,7 +2739,26 @@ var transposeArray = function transposeArray(array) {
   });
 };
 
-exports.transposeArray = transposeArray;
+exports.transposeArray = transposeArray; // sanitize values: update all null, undefined, or negative values to 0
+
+var sanitizeValues = function sanitizeValues(values) {
+  // null / undefined
+  if (!values) {
+    return 0;
+  } // number
+
+
+  if (!Array.isArray(values)) {
+    return values > 0 ? values : 0;
+  } // array
+
+
+  return values.map(function (arr) {
+    return exports.sanitizeValues(arr);
+  });
+};
+
+exports.sanitizeValues = sanitizeValues;
 
 var bakeBubbleData = function bakeBubbleData(layer) {
   var _a;
@@ -2497,9 +2770,13 @@ var bakeBubbleData = function bakeBubbleData(layer) {
   // format each value as an array to unify data operations for data series and frames
 
 
+  var sanitizedBubbleSize = exports.sanitizeValues(layer.bubbleSize);
   var transposedBubbleSize = layer.bubbleSize.map(function (n) {
     return [n];
   });
+  var transposedSanitizedBubbleSize = sanitizedBubbleSize.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') {
@@ -2510,7 +2787,8 @@ var bakeBubbleData = function bakeBubbleData(layer) {
     // 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
+    transposedBubbleSize = exports.transposeArray(layer.bubbleSize);
+    transposedSanitizedBubbleSize = exports.transposeArray(sanitizedBubbleSize); // if multiple series in the dataframe, set isPie to true
 
     if (layer.bubbleSize.length > 1) {
       isPie = true;
@@ -2525,13 +2803,16 @@ var bakeBubbleData = function bakeBubbleData(layer) {
     return {
       zoom: exports.getZoomLevelFromGeobin(layer.geobin[i]),
       values: transposedBubbleSize[i],
+      sanitizedValues: transposedSanitizedBubbleSize[i],
       coordinates: [layer.longitude[i], lat]
     };
+  }).filter(function (d) {
+    return Boolean(d.values);
   }); // 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 min = lodash_1.sum(transposedSanitizedBubbleSize[0]);
+  var max = lodash_1.sum(transposedSanitizedBubbleSize[1]);
+  transposedSanitizedBubbleSize.forEach(function (row) {
     var bubbleSize = lodash_1.sum(row);
     max = bubbleSize > max ? bubbleSize : max;
     min = bubbleSize < min ? bubbleSize : min;
@@ -2541,7 +2822,6 @@ var bakeBubbleData = function bakeBubbleData(layer) {
     dataRange: [min, max],
     isPie: isPie,
     resultLimit: layer.resultLimit,
-    transposedBubbleSize: transposedBubbleSize,
     bubbleSizeFields: layer.bubbleSizeFields
   };
 };
@@ -2556,7 +2836,6 @@ var updateBubbles = function updateBubbles(dataObj, zoomLevel, staticColors, dyn
   var data = dataObj.data,
       dataRange = dataObj.dataRange,
       resultLimit = dataObj.resultLimit,
-      transposedBubbleSize = dataObj.transposedBubbleSize,
       bubbleSizeFields = dataObj.bubbleSizeFields,
       isPie = dataObj.isPie;
 
@@ -2584,13 +2863,13 @@ var updateBubbles = function updateBubbles(dataObj, zoomLevel, staticColors, dyn
     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 el = exports.createPieChart(datum.data.sanitizedValues, 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[i].map(function (count, index) {
+    var bubbleSize = datum.data.values.map(function (count, index) {
       return {
         name: bubbleSizeFields[index],
         count: count,
@@ -2620,7 +2899,25 @@ var updateBubbles = function updateBubbles(dataObj, zoomLevel, staticColors, dyn
 
 exports.updateBubbles = updateBubbles; // Create an SVG pie from column values
 
-var createPieChart = function createPieChart(values, valueRange, colors, themeColor, isPie) {
+var createPieChart = function createPieChart(orginalValues, valueRange, colors, themeColor, isPie) {
+  // create a div for pie (bubble)
+  var el = document.createElement('div');
+  var allZeros = true;
+  orginalValues.forEach(function (v) {
+    if (v !== 0) {
+      allZeros = false;
+    }
+  });
+
+  if (allZeros || !orginalValues || !orginalValues.length) {
+    return el;
+  } // sanitize values
+
+
+  var values = orginalValues.map(function (v) {
+    return v > 0 ? v : 0;
+  }); // compute offsets for pie segments
+
   var offsets = [];
   var total = 0;
   values.forEach(function (count) {
@@ -2641,7 +2938,6 @@ var createPieChart = function createPieChart(values, valueRange, colors, themeCo
     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;
@@ -2667,7 +2963,7 @@ var pieSegment = function pieSegment(start, end, radius, color, themeColor) {
 exports.pieSegment = pieSegment;
 
 /***/ }),
-/* 197 */
+/* 198 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2691,7 +2987,7 @@ var defaultMarkerDarkTheme = function defaultMarkerDarkTheme(fillColor) {
 exports.defaultMarkerDarkTheme = defaultMarkerDarkTheme;
 
 /***/ }),
-/* 198 */
+/* 199 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2733,21 +3029,15 @@ var BubbleSizeColorBlock = styled_components_1.default.div.withConfig({
   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 convertDegToDMS = function convertDegToDMS(decimalDegree, type) {
+  var truncate = function truncate(n) {
+    return n > 0 ? Math.floor(n) : Math.ceil(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);
+  var absoluteDegree = Math.abs(decimalDegree);
+  var degrees = truncate(absoluteDegree);
+  var minutes = truncate((absoluteDegree - degrees) * 60);
+  var seconds = Math.round((absoluteDegree - degrees - minutes / 60) * 3600);
 
   if (seconds === 60) {
     minutes += 1;
@@ -2759,6 +3049,14 @@ var convertDegToDMS = function convertDegToDMS(deg, type) {
     minutes = 0;
   }
 
+  var direction;
+
+  if (type === 'longitude') {
+    direction = decimalDegree < 0 ? 'W' : 'E';
+  } else if (type === 'latitude') {
+    direction = decimalDegree < 0 ? 'S' : 'N';
+  }
+
   return "".concat(degrees, "\xB0 ").concat(minutes, "' ").concat(seconds, "\" ").concat(direction);
 };
 
@@ -2798,7 +3096,7 @@ var Tooltip = function Tooltip(_ref) {
 exports.default = Tooltip;
 
 /***/ }),
-/* 199 */
+/* 200 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2820,7 +3118,7 @@ var i18n_1 = __webpack_require__(3);
 
 var VizBehavior_1 = __webpack_require__(5);
 
-var VizCategory_1 = __webpack_require__(26);
+var VizCategory_1 = __webpack_require__(27);
 
 var configUtils_1 = __webpack_require__(6);
 
@@ -2878,13 +3176,23 @@ var optionsSchema = {
     }
   },
   layers: {
+    // The option merging of defaults and data binding with editing UI happens with the default defined below.
+    // The inner defaults for properties within anyOf objects is used only for code intellisense in UDF to populate options.
     default: [{
       type: '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: []
+      tooltipFields: [],
+      resultLimit: 1000
+    }, {
+      type: 'marker',
+      latitude: '> primary | seriesByName("latitude")',
+      longitude: '> primary | seriesByName("longitude")',
+      seriesColors: visualization_color_palettes_1.VIZ_CATEGORICAL,
+      tooltipFields: [],
+      resultLimit: 1000
     }],
     type: 'array',
     description: 'Specify the data visualization layers on top of the base map. Can be empty to only show the base map.',
@@ -2913,13 +3221,13 @@ var optionsSchema = {
             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
-            }
+            },
+            default: visualization_color_palettes_1.VIZ_CATEGORICAL
           },
           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.',
@@ -2970,13 +3278,13 @@ var optionsSchema = {
             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
-            }
+            },
+            default: visualization_color_palettes_1.VIZ_CATEGORICAL
           },
           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.',
@@ -3088,7 +3396,7 @@ var editorConfig = [{
     editor: 'editor.columnSelector',
     showEditor: function showEditor(_ref) {
       var options = _ref.options;
-      return options.layers && options.layers.length && options.layers[0].type === 'bubble';
+      return !(options.layers && options.layers.length && options.layers[0].type === 'marker');
     },
     editorProps: {
       dataSourceKey: 'primary'