@splunk/visualizations 26.1.1 → 26.2.0

package/Line.js

@@ -87,20 +87,20 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 224);
+/******/ 	return __webpack_require__(__webpack_require__.s = 246);
 /******/ })
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 /* 2 */
@@ -148,6 +148,7 @@ var VizBehavior;
    */
   VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
   VizBehavior["EVENTS"] = "events";
+  VizBehavior["DOWNSAMPLING"] = "downsampling";
   /**
    * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
    * missing.
@@ -163,7 +164,7 @@ var VizBehavior;
 /* 7 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 /* 8 */
@@ -175,28 +176,34 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 /* 9 */
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 /* 10 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 /* 11 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
 /* 12 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 /* 13 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/variables");
+
+/***/ }),
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -205,16 +212,504 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
+
+var numberUtils_1 = __webpack_require__(11);
+
+var interfaces_1 = __webpack_require__(40); // TODO: utilize this fn in ParallelCoordinates
+
+
+var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
+  if (!columns || !columns[0] || !columns[0].length) return [];
+  var data = [];
+
+  var _loop = function _loop(i) {
+    var newObj = {};
+    fields.forEach(function (field, index) {
+      var fieldName = typeof field === 'string' ? field : field.name;
+
+      if (columns[index][i] === '') {
+        newObj[fieldName] = null;
+      } else {
+        newObj[fieldName] = columns[index][i];
+      }
+    });
+    data.push(newObj);
+  };
+
+  for (var i = 0; i < columns[0].length; i += 1) {
+    _loop(i);
+  }
+
+  return data;
+};
+
+exports.convertToArrOfObjects = convertToArrOfObjects; // LTTB algorithm which can be used to downsample time series data while striving to maintain
+// the spikes and overall shape of the chart
+// Copied from https://github.com/sveinn-steinarsson/flot-downsample/blob/0815010016fc94b1bbc6a010afb8aad13ada6d0d/jquery.flot.downsample.js
+// Modifications include:
+// 1) Convert to modern JavaScript(use const, let, and use array.push to push to last element of array)
+// 2) Convert to camel case
+// 3) Convert to TS and also return the indices of the points that are in the downsampled result.
+// 4) Add a new parameter preferredDownsampleIndices that correspond to the indices of points
+// that should be used in case of a tie of the max area in a bucket
+
+var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, threshold, preferredDownsampleIndices) {
+  var dataLength = data.length;
+  var downsampledIndices = [];
+
+  if (threshold >= dataLength || threshold === 0) {
+    var allIndices = data.map(function (values, index) {
+      return index;
+    });
+    return {
+      downsampledData: data,
+      downsampledIndices: allIndices
+    }; // Nothing to do
+  }
+
+  var sampled = [];
+  var sampledIndex = 0; // Bucket size. Leave room for start and end data points
+
+  var every = (dataLength - 2) / (threshold - 2);
+  var a = 0; // Initially a is the first point in the triangle
+
+  var maxAreaPoint;
+  var maxArea;
+  var area;
+  var nextA;
+  sampled.push(data[a]); // Always add the first point
+
+  downsampledIndices.push(0); // eslint-disable-next-line no-plusplus
+
+  for (var i = 0; i < threshold - 2; i++) {
+    // Calculate point average for next bucket (containing c)
+    var avgX = 0;
+    var avgY = 0;
+    var avgRangeStart = Math.floor((i + 1) * every) + 1;
+    var avgRangeEnd = Math.floor((i + 2) * every) + 1;
+    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    var avgRangeLength = avgRangeEnd - avgRangeStart; // eslint-disable-next-line no-plusplus
+
+    for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
+      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
+
+      avgY += data[avgRangeStart][1] * 1;
+    }
+
+    avgX /= avgRangeLength;
+    avgY /= avgRangeLength; // Get the range for this bucket
+
+    var rangeOffs = Math.floor((i + 0) * every) + 1;
+    var rangeTo = Math.floor((i + 1) * every) + 1; // Point a
+
+    var pointAX = Number(data[a][0]); // Enforce Number (value may be Date)
+
+    var pointAY = data[a][1] * 1; // eslint-disable-next-line no-multi-assign
+
+    maxArea = area = -1;
+    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
+
+    for (; rangeOffs < rangeTo; rangeOffs++) {
+      // Calculate triangle area over three buckets
+      area = Math.abs((pointAX - avgX) * (data[rangeOffs][1] - pointAY) - (pointAX - Number(data[rangeOffs][0])) * (avgY - pointAY)) * 0.5; // Modification: try to downsample the least amount of points possible when there are multiple series
+      // If all points in a bucket have the same area, prioritize the one with an x index
+      // that also existed from another series so we don't add another point unnecessarily.
+      // By default LTTB picks the leftmost point in the bucket
+
+      if (area > maxArea || area === maxArea && preferredDownsampleIndices.has(rangeOffs)) {
+        maxArea = area;
+        maxAreaPoint = data[rangeOffs];
+        nextA = rangeOffs; // Next a is this b
+        // Modification: save the index of the point with the most area
+
+        maxAreaIndex = rangeOffs;
+      }
+    } // eslint-disable-next-line no-plusplus
+
+
+    sampled[sampledIndex++] = maxAreaPoint; // Pick this point from the bucket
+
+    downsampledIndices.push(maxAreaIndex);
+    a = nextA; // This a is the next a (chosen b)
+  } // eslint-disable-next-line no-plusplus
+
+
+  sampled[sampledIndex++] = data[dataLength - 1]; // Always add last
+
+  downsampledIndices.push(dataLength - 1);
+  return {
+    downsampledData: sampled,
+    downsampledIndices: downsampledIndices
+  };
+};
+/**
+ * Strictly coerces the entire column to numbers if it only consists of numeric strings or numbers. Also determines
+ * if at least one of the values in the column can be loosely coerced to a number.
+ * If the column cannot be strictly downsampled (if it contains nulls or non-numeric strings), returns an empty array and
+ * returns that it cannot downsample the column.
+ */
+
+
+var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
+  // Splunk charting allows for numbers in formats such as negative hex that
+  // Number() does not support and also allows loose coercion of hex numbers (but not other formats)
+  // We want to identify columns which contain at least one value that can be loosely coerced
+  var canLooselyCoerceSomeValues = column.findIndex(function (value) {
+    return (0, numberUtils_1.startsWithNumber)("".concat(value));
+  }) >= 0; // If not all values in column can be strictly coerced to a number, we do not downsample
+
+  var coercedColumn = [];
+  var canDownsampleColumn = !column.some(function (value) {
+    var coercedValue = Number(value); // if it can't be parsed or isn't safe, fail
+
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number') {
+      return true;
+    } // save value and continue to next
+
+
+    coercedColumn.push(coercedValue);
+    return false;
+  });
+  return {
+    canDownsampleColumn: canDownsampleColumn,
+    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
+    coercedColumn: canDownsampleColumn ? coercedColumn : []
+  };
+};
+/**
+ * Tries to coerce the x-column to numbers or dates, if it is eligible for downsampling.
+ * Only strictly increasing x-columns are eligible for downsampling.
+ * If the column is not eligible for downsampling, returns an empty array.
+ */
+
+
+var strictlyCoerceXColumn = function strictlyCoerceXColumn(column, fieldType) {
+  if (fieldType === 'number') {
+    var coercedXColumn = column.map(function (xValue) {
+      return Number(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
+      return coercedXColumn;
+    }
+  } else if (fieldType === 'time') {
+    var _coercedXColumn = column.map(function (xValue) {
+      return new Date(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(_coercedXColumn, fieldType)) {
+      return _coercedXColumn;
+    }
+  }
 
-var React = __webpack_require__(1);
+  return [];
+};
+
+var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
+  var vizConfig = _ref.vizConfig;
+
+  var _a;
+
+  return (_a = vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(interfaces_1.VizBehavior.DOWNSAMPLING);
+};
+
+exports.isDownsamplingEnabledForViz = isDownsamplingEnabledForViz;
+
+var calculateThresholdOnRangeSelect = function calculateThresholdOnRangeSelect(_ref2) {
+  var firstIndex = _ref2.firstIndex,
+      lastIndex = _ref2.lastIndex,
+      dataSources = _ref2.dataSources,
+      width = _ref2.width;
+
+  var _a, _b, _c;
+
+  var window = lastIndex - firstIndex + 1;
+  var ratio = Math.round(Number(((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns[0]) === null || _c === void 0 ? void 0 : _c.length) / window) * 10) / 10;
+  return Math.round(ratio * Number(width));
+};
+
+exports.calculateThresholdOnRangeSelect = calculateThresholdOnRangeSelect;
+/**
+ * Calculates the downsampling threshold based on the range selection. If search zoom is enabled or there is no selection,
+ * then returns the width of the visualization.
+ *
+ * Otherwise calculates the threshold based on the ratio of the window selected compared to the size of the non-downsampled
+ * data sources. Returns null if the chart event's dataset does not match the passed in primary data source or if the chart is zoomed
+ * in for a categorical chart.
+ */
+
+var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_ref3) {
+  var enableSearchZoom = _ref3.enableSearchZoom,
+      dataSources = _ref3.dataSources,
+      selectChartEvent = _ref3.selectChartEvent,
+      width = _ref3.width,
+      xField = _ref3.xField,
+      y2Fields = _ref3.y2Fields;
+
+  var _a, _b, _c;
+
+  if (enableSearchZoom || !selectChartEvent) {
+    return Number(width);
+  }
+
+  var primaryDataSource = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary;
+
+  if (!primaryDataSource) {
+    return null;
+  }
+
+  var startXIndex = selectChartEvent.startXIndex,
+      endXIndex = selectChartEvent.endXIndex,
+      currentTarget = selectChartEvent.currentTarget;
+
+  try {
+    var xFieldIndex = (_a = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _a === void 0 ? void 0 : _a.fields.findIndex(function (field) {
+      return field.name === xField;
+    });
+    var downsampledXFieldIndex = (_b = currentTarget.dataSet) === null || _b === void 0 ? void 0 : _b.fields.findIndex(function (field) {
+      return field === xField;
+    });
+
+    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
+      return null;
+    }
+
+    var fullSeries = (_c = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _c === void 0 ? void 0 : _c.columns[xFieldIndex];
+    var downsampledSeries = currentTarget.dataSet.seriesList[downsampledXFieldIndex];
+    var firstIndex = fullSeries.findIndex(function (x) {
+      return downsampledSeries[startXIndex] === x;
+    });
+    var lastIndex = fullSeries.findIndex(function (x) {
+      return downsampledSeries[endXIndex] === x;
+    }); // For charts with categorical x-axis (charts with an xField that isn't _time), do not support
+    // re-calculating downsampling threshold if the chart is zoomed in until SPL-259458 is fixed
+    // Also do not support re-calculating downsampling threshold for zoomed-in charts with y2
+    // until SPL-259611 is fixed
+
+    if (xField !== '_time' || (y2Fields === null || y2Fields === void 0 ? void 0 : y2Fields.length)) {
+      return firstIndex === 0 && lastIndex === fullSeries.length - 1 ? width : null;
+    }
+
+    if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
+      return (0, exports.calculateThresholdOnRangeSelect)({
+        firstIndex: firstIndex,
+        lastIndex: lastIndex,
+        dataSources: dataSources,
+        width: width
+      });
+    }
+  } catch (e) {
+    console.error('Error occurred while setting downsample threshold on range select event', e);
+  }
+
+  return null;
+};
+
+exports.calculateDownsamplingThreshold = calculateDownsamplingThreshold;
+
+var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fieldType) {
+  return column.every(function (value, index) {
+    if (fieldType === 'number') {
+      if (Number.isNaN(value)) {
+        return false;
+      }
+    }
+
+    if (fieldType === 'time') {
+      if (Number.isNaN(value.getTime())) {
+        return false;
+      }
+    }
+
+    if (index === 0) {
+      return true;
+    }
+
+    return value > column[index - 1];
+  });
+};
+/**
+ * Verifies that all of the columns that are displayed in a chart can be downsampled. Valid columns that can be
+ * displayed are those that contain at least one number. We can only downsample columns that only consist of numbers.
+ *
+ * If all columns can be downsampled, returns the x column coerced to time/number and y columns coerced to numbers.
+ * If not all columns can be downsampled, then returns empty arrays for both x and y
+ */
+
+
+var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes) {
+  var xColumn = [];
+  var yColumns = [];
+  var canDownsample = !ds.data.fields.some(function (field, index) {
+    var _a, _b;
+
+    var fieldName = (_a = field.name) !== null && _a !== void 0 ? _a : field;
+    var fieldType = (_b = fieldTypes[index]) !== null && _b !== void 0 ? _b : 'unknown';
+    var column = ds.data.columns[index];
+    var hasDisplayedColumnThatCantBeDownsampled = false;
+
+    if (fieldName === xField) {
+      xColumn = strictlyCoerceXColumn(column, fieldType);
+    } else if (yFields.has(fieldName)) {
+      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index]),
+          coercedColumn = _strictlyCoerceYColum.coercedColumn,
+          canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
+          canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
+      // be downsampled using LTTB
+
+
+      hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
+
+      if (hasDisplayedColumnThatCantBeDownsampled) {
+        return true;
+      }
+
+      if (canDownsampleColumn) {
+        yColumns.push(coercedColumn);
+      }
+    }
+
+    return false;
+  });
+
+  if (canDownsample) {
+    return {
+      xColumn: xColumn,
+      yColumns: yColumns
+    };
+  }
+
+  return {
+    xColumn: [],
+    yColumns: []
+  };
+};
+
+var pickIndicesFromDataSource = function pickIndicesFromDataSource(ds, indices) {
+  var sortedIndices = Array.from(indices).sort(function (a, b) {
+    return a - b;
+  });
+  var slicedColumns = [];
+  ds.data.columns.forEach(function (column) {
+    var slicedColumn = [];
+    sortedIndices.forEach(function (index) {
+      slicedColumn.push(column[index]);
+    });
+    slicedColumns.push(slicedColumn);
+  }); // update data columns with downsampled columns
+
+  return Object.assign(Object.assign({}, ds), {
+    data: Object.assign(Object.assign({}, ds.data), {
+      columns: slicedColumns
+    })
+  });
+};
+
+var downsampleDataSources = function downsampleDataSources(_ref4) {
+  var dataSources = _ref4.dataSources,
+      threshold = _ref4.threshold,
+      options = _ref4.options;
+
+  var _a, _b, _c;
+
+  var primaryDS = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary; // only downsample time series when number of data points are over threshold
+
+  var numPoints = (_c = (_b = (_a = primaryDS === null || primaryDS === void 0 ? void 0 : primaryDS.data) === null || _a === void 0 ? void 0 : _a.columns[0]) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+
+  if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
+    return dataSources;
+  }
+
+  var xField = options.xField,
+      yFields = options.yFields,
+      fieldTypes = options.fieldTypes;
+
+  if (!xField || !(yFields === null || yFields === void 0 ? void 0 : yFields.length) || !(fieldTypes === null || fieldTypes === void 0 ? void 0 : fieldTypes.length)) {
+    return dataSources;
+  }
+
+  var nonInternalYFields = new Set(yFields.filter(function (yField) {
+    return !yField.startsWith('_');
+  }));
+  var maxPointsInDownsample = Math.min(nonInternalYFields.size * threshold, numPoints); // Do not try to downsample if there are too many downsampled pts
+  // At the worst case, each series has non-overlapping downsampled pts
+  // which will mean that all points will be included in the downsampled result
+  // This will just lead to additional overhead due to coercing each
+  // x and y field to number
+
+  if (maxPointsInDownsample >= numPoints) {
+    return dataSources;
+  }
+
+  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
+      xColumn = _tryToCoerceAllDispla.xColumn,
+      yColumns = _tryToCoerceAllDispla.yColumns;
+
+  if (!yColumns.length || !xColumn.length) {
+    return dataSources;
+  }
+
+  var downsampledDataSources = Object.assign({}, dataSources);
+  var downsampledIndices = new Set();
+  yColumns.forEach(function (yColumn, columnIndex) {
+    // perform LTTB downsampling for current series, LTTB takes an [x, y] pair
+    var xyPair = yColumn.map(function (yValue, index) {
+      return [xColumn[index], yValue];
+    });
+
+    try {
+      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
+          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
+
+      downsampledIndicesForSeries.forEach(function (downsampleIndex) {
+        return downsampledIndices.add(downsampleIndex);
+      });
+    } catch (e) {
+      console.error("Error occurred while downsampling column ".concat(columnIndex), e);
+    }
+  }); // update data columns with downsampled columns
+
+  downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
+  return downsampledDataSources;
+};
+
+exports.downsampleDataSources = downsampleDataSources;
+
+/***/ }),
+/* 15 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(19);
+var style_1 = __webpack_require__(18);
 
-var style_1 = __webpack_require__(14);
+var colorUtils_1 = __webpack_require__(15);
 
-var colorUtils_1 = __webpack_require__(12);
+var SizeAwareWrapper_1 = __webpack_require__(26);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -260,6 +755,20 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     var width = props.width,
         height = props.height,
         backgroundColor = props.backgroundColor;
+    var cachedHandleResize = React.useCallback(function (w, h) {
+      setContainerWidth(w);
+      setContainerHeight(h);
+    }, []);
+
+    var _React$useState = React.useState(Number(props.width)),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        containerWidth = _React$useState2[0],
+        setContainerWidth = _React$useState2[1];
+
+    var _React$useState3 = React.useState(Number(props.height)),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        containerHeight = _React$useState4[0],
+        setContainerHeight = _React$useState4[1];
 
     if (!height) {
       return React.createElement(Item, {
@@ -271,18 +780,18 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.1.1 - b6df0a015",
+      "data-splunk-visualization-version": "26.2.0 - 49b909915",
       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
-      }));
-    })));
+    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, {
+      width: width,
+      height: height,
+      onResize: cachedHandleResize
+    }), React.createElement(Viz, Object.assign({}, props, {
+      width: containerWidth,
+      height: containerHeight
+    }))));
   };
 
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
@@ -292,13 +801,94 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 exports.default = withFixedSizeContainer;
 
 /***/ }),
-/* 14 */
+/* 18 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
-/* 15 */
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.validSegmentationModes = ['none', 'inner'];
+exports.validOutputModes = ['json_cols', 'json'];
+
+/***/ }),
+/* 20 */,
+/* 21 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(10);
+
+var _createClass = __webpack_require__(25);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultVizActionHandler = void 0;
+
+var DefaultVizActionHandler = /*#__PURE__*/function () {
+  function DefaultVizActionHandler() {
+    _classCallCheck(this, DefaultVizActionHandler);
+  }
+
+  _createClass(DefaultVizActionHandler, [{
+    key: "focus",
+    value: function focus() {// noop
+    }
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      return null; // noop
+    }
+  }]);
+
+  return DefaultVizActionHandler;
+}();
+
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
+
+/***/ }),
+/* 22 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizCategory = void 0;
+var VizCategory;
+
+(function (VizCategory) {
+  VizCategory["SINGLE_VALUE"] = "Single Value";
+  VizCategory["TRENDS"] = "Trends";
+  VizCategory["COMPARISONS"] = "Comparisons";
+  VizCategory["TABLE"] = "Table";
+  VizCategory["GAUGE"] = "Gauge";
+  VizCategory["DISTRIBUTIONS"] = "Distributions";
+  VizCategory["CHOROPLETH"] = "Choropleth Maps";
+  VizCategory["SHAPES"] = "Shapes";
+  VizCategory["MISC"] = "misc";
+  VizCategory["FLOW"] = "Flow";
+  VizCategory["CORRELATION"] = "Correlation";
+  VizCategory["SPATIAL"] = "Spatial";
+})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
+
+/***/ }),
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -330,31 +920,25 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
-/* 16 */
+/* 24 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
-/* 17 */
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/slicedToArray");
-
-/***/ }),
-/* 18 */
+/* 25 */
 /***/ (function(module, exports) {
 
 module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
-/* 19 */
+/* 26 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
-/* 20 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -362,7 +946,7 @@ module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 var _toConsumableArray = __webpack_require__(8);
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(9);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -384,7 +968,7 @@ exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(16);
+var schemaUtils_1 = __webpack_require__(24);
 
 var VizBehavior_1 = __webpack_require__(6);
 
@@ -590,58 +1174,73 @@ var insertLayout = function insertLayout(layout, index) {
 exports.insertLayout = insertLayout;
 
 /***/ }),
-/* 21 */
+/* 28 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlagContext");
 
 /***/ }),
-/* 22 */,
-/* 23 */
+/* 29 */,
+/* 30 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/pick");
 
 /***/ }),
-/* 24 */,
-/* 25 */
+/* 31 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
-/* 26 */
+/* 32 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
-/* 27 */
-/***/ (function(module, exports) {
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __webpack_require__(0);
+
+function usePrevious(value) {
+  var ref = (0, react_1.useRef)();
+  (0, react_1.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+exports.default = usePrevious;
 
 /***/ }),
-/* 28 */
+/* 34 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
-/* 29 */
+/* 35 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/propUtils");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
-/* 30 */
+/* 36 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/propUtils");
 
 /***/ }),
-/* 31 */,
-/* 32 */
+/* 37 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -652,17 +1251,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(12);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var FixedSizeContainer_1 = __webpack_require__(17);
 /**
  * @method shouldShowIconPlaceholder
  * @param {object} dataSources
@@ -733,24 +1332,24 @@ IconPlaceholder.defaultProps = {
 exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
-/* 33 */
+/* 38 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(9);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var DataSource_1 = __webpack_require__(34);
+var DataSource_1 = __webpack_require__(19);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -800,10 +1399,239 @@ var getSortingParams = function getSortingParams(_ref) {
   };
 };
 
-exports.getSortingParams = getSortingParams;
+exports.getSortingParams = getSortingParams;
+
+/***/ }),
+/* 39 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
+
+var T = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(3);
+
+exports.PaginatorParamsPropTypes = T.shape({
+  isPaging: T.bool,
+  current: T.number,
+  totalPages: T.number,
+  onChange: T.func
+});
+
+var getPaginationParams = function getPaginationParams(_ref) {
+  var requestParams = _ref.requestParams,
+      meta = _ref.meta,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var totalCount = meta && meta.totalCount || 0;
+  var offset = requestParams && requestParams.offset || 0;
+  var count = requestParams && requestParams.count;
+  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
+  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
+  var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
+
+  var onChangeHandler = function onChangeHandler(e, _ref2) {
+    var page = _ref2.page,
+        countArg = _ref2.count;
+    var newParams = (0, lodash_1.cloneDeep)(requestParams);
+
+    if (typeof countArg === 'number') {
+      newParams.count = countArg;
+      newParams.offset = 0;
+    }
+
+    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+
+    if (typeof page === 'number' && page > 0) {
+      newParams.count = pageCount;
+      newParams.offset = (page - 1) * pageCount;
+    }
+
+    onRequestParamsChange(newParams);
+  };
+
+  return {
+    isPaging: isPaging,
+    current: current,
+    totalPages: totalPages,
+    onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
+  };
+};
+
+exports.getPaginationParams = getPaginationParams;
+
+/***/ }),
+/* 40 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
+
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+
+var __exportStar = this && this.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+__exportStar(__webpack_require__(41), exports);
+
+__exportStar(__webpack_require__(42), exports);
+
+__exportStar(__webpack_require__(19), exports);
+
+__exportStar(__webpack_require__(43), exports);
+
+__exportStar(__webpack_require__(44), exports);
+
+__exportStar(__webpack_require__(45), exports);
+
+__exportStar(__webpack_require__(46), exports);
+
+__exportStar(__webpack_require__(47), exports);
+
+__exportStar(__webpack_require__(48), exports);
+
+__exportStar(__webpack_require__(49), exports);
+
+__exportStar(__webpack_require__(21), exports);
+
+__exportStar(__webpack_require__(6), exports);
+
+__exportStar(__webpack_require__(22), exports);
+
+__exportStar(__webpack_require__(50), exports);
+
+__exportStar(__webpack_require__(51), exports);
+
+__exportStar(__webpack_require__(52), exports);
+
+__exportStar(__webpack_require__(53), exports);
+
+__exportStar(__webpack_require__(54), exports);
+
+__exportStar(__webpack_require__(55), exports);
+
+/***/ }),
+/* 41 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 42 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+/**
+ *  A data structure used at runtime to wire up a visualization.
+ */
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 43 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 44 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 45 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 46 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 47 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 48 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
-/* 34 */
+/* 49 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -812,13 +1640,9 @@ exports.getSortingParams = getSortingParams;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
-exports.validSegmentationModes = ['none', 'inner'];
-exports.validOutputModes = ['json_cols', 'json'];
 
 /***/ }),
-/* 35 */
+/* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -827,62 +1651,42 @@ exports.validOutputModes = ['json_cols', 'json'];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+/***/ }),
+/* 51 */
+/***/ (function(module, exports, __webpack_require__) {
 
-var lodash_1 = __webpack_require__(3);
+"use strict";
 
-exports.PaginatorParamsPropTypes = T.shape({
-  isPaging: T.bool,
-  current: T.number,
-  totalPages: T.number,
-  onChange: T.func
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
 
-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 && typeof onRequestParamsChange === 'function';
+/***/ }),
+/* 52 */
+/***/ (function(module, exports, __webpack_require__) {
 
-  var onChangeHandler = function onChangeHandler(e, _ref2) {
-    var page = _ref2.page,
-        countArg = _ref2.count;
-    var newParams = (0, lodash_1.cloneDeep)(requestParams);
+"use strict";
 
-    if (typeof countArg === 'number') {
-      newParams.count = countArg;
-      newParams.offset = 0;
-    }
 
-    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-    if (typeof page === 'number' && page > 0) {
-      newParams.count = pageCount;
-      newParams.offset = (page - 1) * pageCount;
-    }
+/***/ }),
+/* 53 */
+/***/ (function(module, exports, __webpack_require__) {
 
-    onRequestParamsChange(newParams);
-  };
+"use strict";
 
-  return {
-    isPaging: isPaging,
-    current: current,
-    totalPages: totalPages,
-    onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
-  };
-};
 
-exports.getPaginationParams = getPaginationParams;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
-/* 36 */
+/* 54 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -891,78 +1695,78 @@ exports.getPaginationParams = getPaginationParams;
 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 = {}));
+/***/ }),
+/* 55 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
 /***/ }),
-/* 37 */
+/* 56 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(17);
+var _slicedToArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(38);
+var getSettingsFromThemedProps_1 = __webpack_require__(57);
 
-var Options_1 = __webpack_require__(30);
+var Options_1 = __webpack_require__(16);
 
-var SanitizeProps_1 = __webpack_require__(39);
+var SanitizeProps_1 = __webpack_require__(58);
 
-var TimezoneContext_1 = __webpack_require__(26);
+var TimezoneContext_1 = __webpack_require__(32);
 
-var moment_1 = __webpack_require__(40);
+var moment_1 = __webpack_require__(59);
 
-var FeatureFlagContext_1 = __webpack_require__(21);
+var FeatureFlagContext_1 = __webpack_require__(28);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(27);
+var hocUtils_1 = __webpack_require__(34);
 
-var JSONSchemaUtils_1 = __webpack_require__(28);
+var JSONSchemaUtils_1 = __webpack_require__(35);
 
-var async_dynamic_options_evaluator_1 = __webpack_require__(41);
+var async_dynamic_options_evaluator_1 = __webpack_require__(60);
 
-var id_1 = __webpack_require__(25);
+var id_1 = __webpack_require__(31);
 
-var SplunkVisualization_1 = __webpack_require__(42);
+var SplunkVisualization_1 = __webpack_require__(61);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var getSorting_1 = __webpack_require__(33);
+var getSorting_1 = __webpack_require__(38);
+
+var getPagination_1 = __webpack_require__(39);
+
+var useDeepMemo_1 = __webpack_require__(62);
+
+var MissingPropsMessage_1 = __webpack_require__(63);
 
-var getPagination_1 = __webpack_require__(35);
+var withEditModeCover_1 = __webpack_require__(64);
 
-var useDeepMemo_1 = __webpack_require__(44);
+var withPlaceholder_1 = __webpack_require__(65);
 
-var MissingPropsMessage_1 = __webpack_require__(45);
+var useDownsampleDataSources_1 = __webpack_require__(66);
 
-var withEditModeCover_1 = __webpack_require__(46);
+var dataUtils_1 = __webpack_require__(14);
 
-var withPlaceholder_1 = __webpack_require__(47);
+var featureFlagUtils_1 = __webpack_require__(68);
 /**
  * hoc that wraps a pure react visualization in a Dashboard visualization
  * @param {DashboardVizOpts} opts
@@ -1053,25 +1857,61 @@ var withDashboardViz = function withDashboardViz(opts) {
         dataFramesInState = _React$useState8[0],
         setDataFramesInState = _React$useState8[1];
 
-    var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
+    var _React$useState9 = React.useState(Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_useWebWorkersForDSL'))),
         _React$useState10 = _slicedToArray(_React$useState9, 2),
         useAsyncEvaluatedOptions = _React$useState10[0],
         setUseAsyncEvaluatedOptions = _React$useState10[1];
 
+    var isDownsamplingEnabledByFeatureFlag = Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_enableDownsampling);
     var isMounted = React.useRef(true);
+    var optionsToEvaluate = React.useMemo(function () {
+      return {
+        context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
+        options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
+      };
+    }, [options, context]);
+
+    var _React$useState11 = React.useState(Number(width)),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        threshold = _React$useState12[0],
+        setThreshold = _React$useState12[1];
+
+    var onDownsamplingThresholdChange = React.useCallback(function (newThreshold) {
+      setThreshold(newThreshold);
+    }, []);
+    var isDownsamplingEnabled = React.useMemo(function () {
+      return isDownsamplingEnabledByFeatureFlag && (0, dataUtils_1.isDownsamplingEnabledForViz)({
+        vizConfig: vizConfig
+      });
+    }, [isDownsamplingEnabledByFeatureFlag]);
+    var downsamplingProps = React.useMemo(function () {
+      if (!isDownsamplingEnabled) {
+        return {};
+      }
+
+      return {
+        onDownsamplingThresholdChange: onDownsamplingThresholdChange,
+        originalDataSources: dataSources
+      };
+    }, [dataSources, isDownsamplingEnabled, onDownsamplingThresholdChange]);
+    var downsampledDataSources = (0, useDownsampleDataSources_1.default)({
+      options: optionsToEvaluate.options,
+      context: optionsToEvaluate.context,
+      dataSources: dataSources,
+      threshold: threshold,
+      isDownsamplingEnabled: isDownsamplingEnabled
+    });
     evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
         if (useAsyncEvaluatedOptions) {
-          var optionsToEvaluate = {
-            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
-            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-          };
           var asyncDynamicOptionsEvaluatorParams = {
             visualizationID: visualizationID,
             props: props,
             options: optionsToEvaluate,
-            dataSources: dataSources,
-            theme: vizConfig.themes
+            dataSources: downsampledDataSources,
+            theme: vizConfig.themes,
+            bypassCloneDeepOptionScope: Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_bypassCloneDeepOptionScope')),
+            lazyLoadingDataFrame: Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_lazyLoadingDataFrame'))
           };
           async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
             setEvaluatedOptionsAsync(results.results);
@@ -1083,16 +1923,14 @@ var withDashboardViz = function withDashboardViz(opts) {
         } else {
           var dataFrames = dataFramesInState;
 
-          if (dataSources !== dataSourcesInState) {
-            setDataSourcesInState(dataSources);
-            dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
+          if (downsampledDataSources !== dataSourcesInState) {
+            setDataSourcesInState(downsampledDataSources);
+            dataFrames = Options_1.Options.dataFrameFromDataSource(downsampledDataSources, (0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_lazyLoadingDataFrame'));
             setDataFramesInState(dataFrames);
           }
 
-          return Options_1.Options.evaluate({
-            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
-            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-          }, dataSources, themeFunc, dataFrames);
+          var result = Options_1.Options.evaluate(optionsToEvaluate, downsampledDataSources, themeFunc, dataFrames, (0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_bypassCloneDeepOptionScope'));
+          return result;
         }
       } catch (e) {
         // eslint-disable-next-line no-console
@@ -1101,7 +1939,7 @@ var withDashboardViz = function withDashboardViz(opts) {
       }
 
       return {};
-    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, optionsToEvaluate, downsampledDataSources, serializedTimezone, useAsyncEvaluatedOptions]);
     var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
     // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
     // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
@@ -1243,7 +2081,7 @@ var withDashboardViz = function withDashboardViz(opts) {
       mode: mode,
       width: width,
       height: height
-    }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
+    }, downsamplingProps, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
 
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
@@ -1260,37 +2098,37 @@ var withDashboardViz = function withDashboardViz(opts) {
 exports.default = withDashboardViz;
 
 /***/ }),
-/* 38 */
+/* 57 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
-/* 39 */
+/* 58 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
-/* 40 */
+/* 59 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
-/* 41 */
+/* 60 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
-/* 42 */
+/* 61 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+var _classCallCheck = __webpack_require__(10);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1298,11 +2136,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+var VizActionHandler_1 = __webpack_require__(21); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
 
 exports.INITIAL_WIDTH = 250;
@@ -1435,44 +2273,7 @@ SplunkVisualization.defaultProps = {
 exports.default = SplunkVisualization;
 
 /***/ }),
-/* 43 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(9);
-
-var _createClass = __webpack_require__(18);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultVizActionHandler = void 0;
-
-var DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
-
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {// noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
-    }
-  }]);
-
-  return DefaultVizActionHandler;
-}();
-
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
-
-/***/ }),
-/* 44 */
+/* 62 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1483,7 +2284,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -1517,7 +2318,7 @@ var useDeepMemo = function useDeepMemo(fn, dependencies) {
 exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
-/* 45 */
+/* 63 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1528,15 +2329,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(12);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var FixedSizeContainer_1 = __webpack_require__(17);
 /**
  * @method isMissing
  * @param {any} v
@@ -1597,7 +2398,7 @@ exports.MissingPropsMessage.defaultProps = {
 exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
 
 /***/ }),
-/* 46 */
+/* 64 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1607,18 +2408,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(15);
+var hocUtils_1 = __webpack_require__(23);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "26.1.1 - b6df0a015"
+  'data-splunk-visualization-version': "26.2.0 - 49b909915"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1639,101 +2440,345 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
     }));
   };
 
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
+  (0, hocUtils_1.extendStaticWrapperProps)({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
+
+exports.default = withEditModeCover;
+
+/***/ }),
+/* 65 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var colorUtils_1 = __webpack_require__(15);
+
+var variables_1 = __webpack_require__(13);
+
+var IconPlaceholder_1 = __webpack_require__(37);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var hocUtils_1 = __webpack_require__(23);
+
+var withPlaceholder = function withPlaceholder(Visualization) {
+  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
+  var config = Visualization.config;
+  var themes = config.themes;
+
+  var Wrapper = function Wrapper(props) {
+    var _a, _b;
+
+    var dataSources = props.dataSources,
+        loading = props.loading,
+        options = props.options,
+        height = props.height,
+        width = props.width;
+    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
+    var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
+    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
+    var iconColor = variables_1.default.contentColorActive(props);
+
+    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
+      return React.createElement(IconPlaceholder_1.default, {
+        "data-test": "icon-placeholder",
+        icon: icon,
+        width: width,
+        height: height,
+        backgroundColor: bgColorFromTheme,
+        iconColor: iconColor
+      });
+    }
+
+    return React.createElement(Visualization, Object.assign({}, props));
+  };
+
+  (0, hocUtils_1.extendStaticWrapperProps)({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
+
+exports.default = withPlaceholder;
+
+/***/ }),
+/* 66 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var dataUtils_1 = __webpack_require__(14);
+
+var usePrevious_1 = __webpack_require__(33);
+
+var useGetXAndYFields_1 = __webpack_require__(67);
+
+var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
+  var dataSources = _ref.dataSources,
+      options = _ref.options,
+      context = _ref.context,
+      threshold = _ref.threshold,
+      isDownsamplingEnabled = _ref.isDownsamplingEnabled;
+  var isFirstUseEffectCall = (0, react_1.useRef)(true);
+  var xAndYFieldsWithTypes = (0, useGetXAndYFields_1.default)({
+    shouldEvaluateDSL: isDownsamplingEnabled,
+    options: options,
+    context: context,
+    dataSources: dataSources
+  });
+  var previousXAndYFieldsWithTypes = (0, usePrevious_1.default)(xAndYFieldsWithTypes);
+  var previousDataSources = (0, usePrevious_1.default)(dataSources);
+  var previousThreshold = (0, usePrevious_1.default)(threshold);
+
+  var _ref2 = (0, react_1.useState)(function () {
+    return isDownsamplingEnabled ? (0, dataUtils_1.downsampleDataSources)({
+      dataSources: dataSources,
+      threshold: threshold,
+      options: xAndYFieldsWithTypes
+    }) : dataSources;
+  }),
+      _ref3 = _slicedToArray(_ref2, 2),
+      downsampledDataSources = _ref3[0],
+      setDownsampledDataSources = _ref3[1];
+
+  var debouncedDownsampleDataSources = (0, react_1.useMemo)(function () {
+    return (0, lodash_1.debounce)(function (downsampleOptions) {
+      var downsampledResult = (0, dataUtils_1.downsampleDataSources)(downsampleOptions);
+      setDownsampledDataSources(downsampledResult);
+    }, 100, {
+      trailing: true
+    });
+  }, []);
+  (0, react_1.useEffect)(function () {
+    // don't downsample again on the use effect call that happened due to the initial render
+    // this is since we already downsampled as part of the useState call
+    if (isFirstUseEffectCall.current) {
+      isFirstUseEffectCall.current = false;
+      return;
+    }
+
+    if (!isDownsamplingEnabled) {
+      setDownsampledDataSources(dataSources);
+      return;
+    }
+
+    if ((0, lodash_1.isEqual)(previousXAndYFieldsWithTypes, xAndYFieldsWithTypes) && previousDataSources === dataSources && previousThreshold === threshold) {
+      return;
+    } // Debounce the downsampling so we don't have to downsample and execute DSL multiple times
+    // while the viz is being resized
+
+
+    debouncedDownsampleDataSources({
+      dataSources: dataSources,
+      options: xAndYFieldsWithTypes,
+      threshold: threshold
+    }); // need to detect if this runs as part of the initial render
+  }, [dataSources, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousXAndYFieldsWithTypes, previousDataSources, previousThreshold]);
+  return downsampledDataSources;
 };
 
-exports.default = withEditModeCover;
+exports.default = useDownsampleDataSources;
 
 /***/ }),
-/* 47 */
+/* 67 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _toConsumableArray = __webpack_require__(8);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
-var colorUtils_1 = __webpack_require__(12);
+var Options_1 = __webpack_require__(16);
+/**
+ * Hook that evaluates the DSL for subset of a viz's options needed to determine
+ * its x and y fields as well as the types of all its fields.
+ */
 
-var variables_1 = __webpack_require__(11);
 
-var IconPlaceholder_1 = __webpack_require__(32);
+var useGetXAndYFields = function useGetXAndYFields(_ref) {
+  var shouldEvaluateDSL = _ref.shouldEvaluateDSL,
+      options = _ref.options,
+      context = _ref.context,
+      dataSources = _ref.dataSources;
 
-var VizBehavior_1 = __webpack_require__(6);
+  var _ref2 = (0, react_1.useMemo)(function () {
+    var _a, _b, _c;
 
-var hocUtils_1 = __webpack_require__(15);
+    if (!shouldEvaluateDSL) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
 
-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;
+    if (!((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.length)) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
 
-  var Wrapper = function Wrapper(props) {
-    var _a, _b;
+    var primaryDS = dataSources.primary;
+    var columnsWithOnlyOnePoint = primaryDS.data.columns.map(function (column) {
+      return [column[0]];
+    });
+    var filteredDataSources = {
+      primary: Object.assign(Object.assign({}, primaryDS), {
+        data: Object.assign(Object.assign({}, primaryDS.data), {
+          columns: columnsWithOnlyOnePoint
+        })
+      })
+    };
+    return {
+      dataSourcesWithOnlyOnePoint: filteredDataSources,
+      dataFrameWithOnlyOnePoint: Options_1.Options.dataFrameFromDataSource(filteredDataSources)
+    };
+  }, [dataSources, shouldEvaluateDSL]),
+      dataSourcesWithOnlyOnePoint = _ref2.dataSourcesWithOnlyOnePoint,
+      dataFrameWithOnlyOnePoint = _ref2.dataFrameWithOnlyOnePoint;
 
-    var dataSources = props.dataSources,
-        loading = props.loading,
-        options = props.options,
-        height = props.height,
-        width = props.width;
-    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
-    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
-    var iconColor = variables_1.default.contentColorActive(props);
+  var xAndYFieldsWithTypes = (0, react_1.useMemo)(function () {
+    try {
+      if (!dataSourcesWithOnlyOnePoint || !dataFrameWithOnlyOnePoint) {
+        return options;
+      }
 
-    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
-      return React.createElement(IconPlaceholder_1.default, {
-        "data-test": "icon-placeholder",
-        icon: icon,
-        width: width,
-        height: height,
-        backgroundColor: bgColorFromTheme,
-        iconColor: iconColor
-      });
+      if (!(options === null || options === void 0 ? void 0 : options.x) || !(options === null || options === void 0 ? void 0 : options.y) && !(options === null || options === void 0 ? void 0 : options.y2)) {
+        return options;
+      }
+
+      var optionsToEvaluate = {
+        x: options.x,
+        xField: '> x | getField()',
+        y: options.y,
+        yFields: options.y ? '> y | getField()' : undefined,
+        y2: options.y2,
+        y2Fields: options.y2 ? '> y2 | getField()' : undefined,
+        fieldTypes: '> primary | getType()'
+      };
+
+      var _Options_1$Options$ev = Options_1.Options.evaluate({
+        options: optionsToEvaluate,
+        context: context
+      }, dataSourcesWithOnlyOnePoint, function () {}, dataFrameWithOnlyOnePoint),
+          _Options_1$Options$ev2 = _Options_1$Options$ev.xField,
+          xField = _Options_1$Options$ev2 === void 0 ? '' : _Options_1$Options$ev2,
+          _Options_1$Options$ev3 = _Options_1$Options$ev.yFields,
+          yFields = _Options_1$Options$ev3 === void 0 ? [] : _Options_1$Options$ev3,
+          _Options_1$Options$ev4 = _Options_1$Options$ev.y2Fields,
+          y2Fields = _Options_1$Options$ev4 === void 0 ? [] : _Options_1$Options$ev4,
+          fieldTypes = _Options_1$Options$ev.fieldTypes;
+
+      return {
+        xField: xField,
+        yFields: [].concat(_toConsumableArray(yFields), _toConsumableArray(y2Fields)),
+        fieldTypes: fieldTypes
+      };
+    } catch (e) {
+      return {
+        xField: undefined,
+        yFields: [],
+        fieldTypes: []
+      };
     }
+  }, [options, context, dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint]);
+  return xAndYFieldsWithTypes;
+};
 
-    return React.createElement(Visualization, Object.assign({}, props));
-  };
+exports.default = useGetXAndYFields;
 
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
+/***/ }),
+/* 68 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFeatureFlag = void 0;
+
+var FeatureFlags_1 = __webpack_require__(69);
+
+var getFeatureFlag = function getFeatureFlag(context, flagName) {
+  // look for feature flag in context first
+  if (context && Object.keys(context).find(function (key) {
+    return key === flagName;
+  })) {
+    return context[flagName];
+  } // fall back to defaults
+
+
+  if (Object.keys(FeatureFlags_1.default).find(function (key) {
+    return key === flagName;
+  })) {
+    return FeatureFlags_1.default[flagName];
+  } // fall back to false
+
+
+  return false;
 };
 
-exports.default = withPlaceholder;
+exports.getFeatureFlag = getFeatureFlag;
 
 /***/ }),
-/* 48 */,
-/* 49 */,
-/* 50 */
+/* 69 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/FeatureFlags");
+
+/***/ }),
+/* 70 */,
+/* 71 */,
+/* 72 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons/placeholders");
 
 /***/ }),
-/* 51 */
+/* 73 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-color-palettes");
 
 /***/ }),
-/* 52 */
+/* 74 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-icons");
 
 /***/ }),
-/* 53 */
+/* 75 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1763,20 +2808,20 @@ var background = function background(_ref) {
 exports.default = background;
 
 /***/ }),
-/* 54 */,
-/* 55 */
+/* 76 */,
+/* 77 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/charting-bundle");
 
 /***/ }),
-/* 56 */
+/* 78 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/useSplunkTheme");
 
 /***/ }),
-/* 57 */
+/* 79 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1800,7 +2845,7 @@ var __rest = this && this.__rest || function (s, e) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.constructFieldsAndColumns = exports.toArrayForSeries = exports.isMultiSeriesData = exports.convertOverlayFields = exports.convertY2AxisOptions = exports.mapToValues = exports.truncateData = exports.getAnnotations = void 0;
+exports.shouldEnableSearchZoom = exports.constructFieldsAndColumns = exports.toArrayForSeries = exports.isMultiSeriesData = exports.convertOverlayFields = exports.convertY2AxisOptions = exports.mapToValues = exports.truncateData = exports.getAnnotations = void 0;
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -1996,15 +3041,31 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
 
 exports.constructFieldsAndColumns = constructFieldsAndColumns;
 
+var shouldEnableSearchZoom = function shouldEnableSearchZoom() {
+  var eventHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var xField = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var rangeSelectEventHandler = eventHandlers.find(function (eventHandler) {
+    var _a;
+
+    return (_a = eventHandler.options.events) === null || _a === void 0 ? void 0 : _a.includes('range.select');
+  }); // Check if xField is _time. This is how splunk-charting distinguishes a time chart from categorical.
+  // Note: search zoom will be buggy if the x axis uses timestamp values but is not _time
+
+  var xAxisIsTime = xField === '_time';
+  return !!rangeSelectEventHandler && xAxisIsTime;
+};
+
+exports.shouldEnableSearchZoom = shouldEnableSearchZoom;
+
 /***/ }),
-/* 58 */,
-/* 59 */,
-/* 60 */,
-/* 61 */,
-/* 62 */,
-/* 63 */,
-/* 64 */,
-/* 65 */
+/* 80 */,
+/* 81 */,
+/* 82 */,
+/* 83 */,
+/* 84 */,
+/* 85 */,
+/* 86 */,
+/* 87 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2020,34 +3081,40 @@ var lodash_1 = __webpack_require__(3);
 
 var i18n_1 = __webpack_require__(2);
 
-var visualization_color_palettes_1 = __webpack_require__(51);
+var visualization_color_palettes_1 = __webpack_require__(73);
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
-var react_event_listener_1 = __webpack_require__(66);
+var react_event_listener_1 = __webpack_require__(88);
 
-__webpack_require__(67); // fixme, @splunk/charting should be refactor to use locale & timezone instead of i18n functions
+__webpack_require__(89); // fixme, @splunk/charting should be refactor to use locale & timezone instead of i18n functions
 
 
-var charting_bundle_1 = __webpack_require__(55);
+var charting_bundle_1 = __webpack_require__(77);
 
-var TimezoneContext_1 = __webpack_require__(26);
+var TimezoneContext_1 = __webpack_require__(32);
 
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(18);
 
 var styled_components_1 = __webpack_require__(4);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(12);
+
+var useSplunkTheme_1 = __webpack_require__(78);
+
+var themeUtils_1 = __webpack_require__(90);
+
+var ChartingApi_1 = __webpack_require__(91);
 
-var useSplunkTheme_1 = __webpack_require__(56);
+var usePrevious_1 = __webpack_require__(33);
 
-var themeUtils_1 = __webpack_require__(68);
+var useEventCallback_1 = __webpack_require__(92);
 
-var ChartingApi_1 = __webpack_require__(69);
+var dataUtils_1 = __webpack_require__(14);
 
 exports.NO_INPLACE_PROPS = ['chart', 'chart.orientation', 'layout.splitSeries', 'chart.style', 'legend.placement'];
 
@@ -2061,14 +3128,6 @@ var changedOptions = function changedOptions(curOptions, nextOptions) {
 
 exports.changedOptions = changedOptions;
 
-function usePrevious(value) {
-  var ref = (0, react_1.useRef)();
-  (0, react_1.useEffect)(function () {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
 var canUpdateInPlace = function canUpdateInPlace(curOptions, nextOptions) {
   // if either of the options are undefined
   // it cannot update in place.
@@ -2133,16 +3192,23 @@ var propTypes = {
   style: T.object,
   colorPalette: T.array,
   visualizationApiRef: T.func,
-  themeKey: T.string
+  themeKey: T.string,
+  originalDataSources: T.object,
+  onDownsamplingThresholdChange: T.func,
+  xField: T.string,
+  y2Fields: T.array
 };
 
 var Charting = function Charting(props) {
+  var _a, _b;
+
   var container = (0, react_1.useRef)(null);
   var needsInit = (0, react_1.useRef)(true);
   var chart = (0, react_1.useRef)();
   var needsRedraw = (0, react_1.useRef)(true);
   var api = (0, react_1.useRef)(new ChartingApi_1.ChartingApiFunctional(chart));
   var timezone = (0, react_1.useContext)(TimezoneContext_1.default);
+  var selectChartEvent = (0, react_1.useRef)(null);
 
   var computeChartingSize = function computeChartingSize() {
     if (container.current) {
@@ -2170,9 +3236,13 @@ var Charting = function Charting(props) {
       onSelect = props.onSelect,
       onPointMouseOut = props.onPointMouseOut,
       onPointMouseOver = props.onPointMouseOver,
-      onEventTrigger = props.onEventTrigger;
-  var prevOptions = usePrevious(options);
-  var prevTimezone = usePrevious(timezone);
+      onEventTrigger = props.onEventTrigger,
+      originalDataSources = props.originalDataSources,
+      onDownsamplingThresholdChange = props.onDownsamplingThresholdChange,
+      xField = props.xField,
+      y2Fields = props.y2Fields;
+  var prevOptions = (0, usePrevious_1.default)(options);
+  var prevTimezone = (0, usePrevious_1.default)(timezone);
 
   var handleClick = function handleClick(chartEvent, type) {
     var payload = (0, lodash_1.pick)(chartEvent, 'name2', 'value2', '_span', 'modifierKey');
@@ -2202,8 +3272,37 @@ var Charting = function Charting(props) {
     needsInit.current = true;
   };
 
-  var handleSelect = function handleSelect(chartEvent) {
-    // todo: need change this after breaking all visualizations
+  var enableSearchZoom = (_b = (_a = chartData === null || chartData === void 0 ? void 0 : chartData.chartDataOptions) === null || _a === void 0 ? void 0 : _a.enableSearchZoom) !== null && _b !== void 0 ? _b : false;
+  var recalculateDownsamplingThreshold = React.useCallback(function () {
+    if (!onDownsamplingThresholdChange || !xField) {
+      return;
+    }
+
+    var newThreshold = (0, dataUtils_1.calculateDownsamplingThreshold)({
+      enableSearchZoom: enableSearchZoom,
+      dataSources: originalDataSources,
+      width: Number(width),
+      selectChartEvent: selectChartEvent.current,
+      xField: xField,
+      y2Fields: y2Fields
+    });
+
+    if (Number.isFinite(newThreshold)) {
+      onDownsamplingThresholdChange(newThreshold);
+    }
+  }, [enableSearchZoom, originalDataSources, onDownsamplingThresholdChange, width, xField, y2Fields]);
+  React.useEffect(function () {
+    recalculateDownsamplingThreshold();
+  }, [recalculateDownsamplingThreshold]); // useEventCallback is used for these handlers to make sure that they are a stable reference and
+  // we always use the latest version of the callback
+  // Since chart drawing is debounced, there is a race condition where a stale callback may be called
+  // if a prop changes and the event handler is called before the chart redraws. This means that
+  // it will use the old callback rather than the newer one, which can lead to inaccurate results
+
+  var handleSelect = (0, useEventCallback_1.default)(function (chartEvent) {
+    selectChartEvent.current = chartEvent;
+    recalculateDownsamplingThreshold(); // todo: need change this after breaking all visualizations
+
     if (onSelect && typeof onSelect === 'function') {
       onSelect({
         type: 'range.select',
@@ -2219,9 +3318,8 @@ var Charting = function Charting(props) {
       originalEvent: chartEvent,
       payload: (0, lodash_1.pick)(chartEvent, 'startXIndex', 'endXIndex', 'startXValue', 'endXValue')
     });
-  };
-
-  var handlePointMouseOut = function handlePointMouseOut(chartEvent, type) {
+  });
+  var handlePointMouseOut = (0, useEventCallback_1.default)(function (chartEvent, type) {
     var payload = (0, lodash_1.pick)(chartEvent, 'name2', 'value2', '_span', 'modifierKey', 'tooltipContext');
     payload.name = payload.name2;
     delete payload.name2;
@@ -2233,9 +3331,8 @@ var Charting = function Charting(props) {
       originalEvent: chartEvent,
       payload: payload
     });
-  };
-
-  var handlePointMouseOver = function handlePointMouseOver(chartEvent, type) {
+  });
+  var handlePointMouseOver = (0, useEventCallback_1.default)(function (chartEvent, type) {
     var payload = (0, lodash_1.pick)(chartEvent, 'name2', 'value2', '_span', 'modifierKey', 'tooltipContext');
     payload.name = payload.name2;
     delete payload.name2;
@@ -2247,7 +3344,7 @@ var Charting = function Charting(props) {
       originalEvent: chartEvent,
       payload: payload
     });
-  };
+  });
 
   var drawChart = function drawChart() {
     var updatedOptions = Object.assign(Object.assign({}, options), {
@@ -2273,7 +3370,7 @@ var Charting = function Charting(props) {
 
     if (prevOptions) {
       Object.keys(prevOptions).forEach(function (key) {
-        if (updatedOptions[key] === undefined) {
+        if (prevOptions[key] && updatedOptions[key] === undefined) {
           updatedOptions[key] = '';
         }
       });
@@ -2343,8 +3440,8 @@ var Charting = function Charting(props) {
     debouncedDrawChart();
   };
 
-  var prevTheme = usePrevious(themeKey);
-  var prevOnClick = usePrevious(onClick);
+  var prevTheme = (0, usePrevious_1.default)(themeKey);
+  var prevOnClick = (0, usePrevious_1.default)(onClick);
   (0, react_1.useEffect)(function () {
     debouncedDrawChart();
     props.visualizationApiRef(api.current);
@@ -2359,11 +3456,11 @@ var Charting = function Charting(props) {
     if (!chart.current || !(0, exports.canUpdateInPlace)(prevOptions, options) || // timezone is a simple object so this comparison should be fast
     JSON.stringify(prevTimezone) !== JSON.stringify(timezone) || !props.themeKey && prevTheme !== themeKey || prevOnClick !== onClick) {
       needsInit.current = true;
-    }
-
-    needsRedraw.current = true; // need to immediately call drawChart upon an option or chartData change
+    } // need to immediately call drawChart upon an option or chartData change
     // otherwise a noop would occur if the onContainerMount drawChart is re-invoked when dimensions change
 
+
+    needsRedraw.current = true;
     drawChart();
   }, [JSON.stringify(options), JSON.stringify(chartData.toJSON()), JSON.stringify(chartData.annotations), timezone === null || timezone === void 0 ? void 0 : timezone.ianaTimezone, timezone === null || timezone === void 0 ? void 0 : timezone.utcOffset, timezone === null || timezone === void 0 ? void 0 : timezone.serializedTimezone, themeKey, onClick]);
   return React.createElement(ChartingContainer, {
@@ -2391,7 +3488,11 @@ var defaultProps = {
   colorPalette: visualization_color_palettes_1.VIZ_CATEGORICAL,
   visualizationApiRef: lodash_1.noop,
   chartData: null,
-  themeKey: null
+  themeKey: null,
+  onDownsamplingThresholdChange: null,
+  originalDataSources: null,
+  xField: null,
+  y2Fields: []
 };
 Charting.propTypes = propTypes;
 Charting.defaultProps = defaultProps; // allow for early return in case of empty chartData while still following hook rules
@@ -2427,33 +3528,33 @@ var withEmptyChartMessage = function withEmptyChartMessage(Chart) {
 exports.default = withEmptyChartMessage(Charting);
 
 /***/ }),
-/* 66 */
+/* 88 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-event-listener");
 
 /***/ }),
-/* 67 */
+/* 89 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/i18n");
 
 /***/ }),
-/* 68 */
+/* 90 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/themeUtils");
 
 /***/ }),
-/* 69 */
+/* 91 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+var _classCallCheck = __webpack_require__(10);
 
-var _createClass = __webpack_require__(18);
+var _createClass = __webpack_require__(25);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -2513,16 +3614,41 @@ var ChartingApiFunctional = /*#__PURE__*/function () {
 exports.ChartingApiFunctional = ChartingApiFunctional;
 
 /***/ }),
-/* 70 */
+/* 92 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __webpack_require__(0);
+
+var useEventCallback = function useEventCallback(fn) {
+  var ref = (0, react_1.useRef)(fn);
+  (0, react_1.useLayoutEffect)(function () {
+    ref.current = fn;
+  });
+  return (0, react_1.useCallback)(function () {
+    return ref.current.apply(ref, arguments);
+  }, []);
+};
+
+exports.default = useEventCallback;
+
+/***/ }),
+/* 93 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/simpleXMLOptions");
 
 /***/ }),
-/* 71 */,
-/* 72 */,
-/* 73 */,
-/* 74 */
+/* 94 */,
+/* 95 */,
+/* 96 */,
+/* 97 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2537,7 +3663,7 @@ exports.AxesChartDataConfigAreaColumnLine = exports.AxesChartDataConfigBubble =
 
 var i18n_1 = __webpack_require__(2);
 
-var configUtils_1 = __webpack_require__(20);
+var configUtils_1 = __webpack_require__(27);
 
 var AxesChartDataConfig = {
   label: (0, i18n_1._)('Data configurations'),
@@ -2662,7 +3788,7 @@ exports.AxesChartDataConfigAreaColumnLine = {
 exports.default = AxesChartDataConfig;
 
 /***/ }),
-/* 75 */
+/* 98 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2674,11 +3800,11 @@ Object.defineProperty(exports, "__esModule", {
 
 var i18n_1 = __webpack_require__(2);
 
-var pick_1 = __webpack_require__(23);
+var pick_1 = __webpack_require__(30);
 
-var variables_1 = __webpack_require__(11);
+var variables_1 = __webpack_require__(13);
 
-var BackgroundColor_1 = __webpack_require__(53);
+var BackgroundColor_1 = __webpack_require__(75);
 
 var themes = {
   defaultBackgroundColor: function defaultBackgroundColor(props) {
@@ -2708,7 +3834,7 @@ var AxesChartColorAndStyle = {
 exports.default = AxesChartColorAndStyle;
 
 /***/ }),
-/* 76 */
+/* 99 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2772,7 +3898,7 @@ var AxesChartLegend = {
 exports.default = AxesChartLegend;
 
 /***/ }),
-/* 77 */
+/* 100 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2787,7 +3913,7 @@ exports.AxesChartXGridAndLabelsBubbleScatter = exports.AxesChartXGridAndLabelsCo
 
 var i18n_1 = __webpack_require__(2);
 
-var configUtils_1 = __webpack_require__(20);
+var configUtils_1 = __webpack_require__(27);
 
 exports.AxesChartXGridAndLabelsCommon = {
   label: (0, i18n_1._)('X-axis grid and labels'),
@@ -3060,7 +4186,7 @@ exports.AxesChartXGridAndLabelsBubbleScatter = {
 exports.default = AxesChartXGridAndLabels;
 
 /***/ }),
-/* 78 */
+/* 101 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3222,17 +4348,17 @@ var AxesChartYGridAndLabels = {
 exports.default = AxesChartYGridAndLabels;
 
 /***/ }),
-/* 79 */,
-/* 80 */,
-/* 81 */,
-/* 82 */,
-/* 83 */,
-/* 84 */,
-/* 85 */,
-/* 86 */,
-/* 87 */,
-/* 88 */,
-/* 89 */
+/* 102 */,
+/* 103 */,
+/* 104 */,
+/* 105 */,
+/* 106 */,
+/* 107 */,
+/* 108 */,
+/* 109 */,
+/* 110 */,
+/* 111 */,
+/* 112 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3249,7 +4375,7 @@ var i18n_1 = __webpack_require__(2);
 
 var lodash_1 = __webpack_require__(3);
 
-var configUtils_1 = __webpack_require__(20);
+var configUtils_1 = __webpack_require__(27);
 
 exports.AxesChartDataDisplayLine = {
   label: (0, i18n_1._)('Data display'),
@@ -3370,7 +4496,7 @@ exports.AxesChartDataDisplayColumn = {
 exports.default = AxesChartDataDisplay;
 
 /***/ }),
-/* 90 */
+/* 113 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3544,29 +4670,6 @@ var axesChartY2GridAndLabels = {
 exports.default = axesChartY2GridAndLabels;
 
 /***/ }),
-/* 91 */,
-/* 92 */,
-/* 93 */,
-/* 94 */,
-/* 95 */,
-/* 96 */,
-/* 97 */,
-/* 98 */,
-/* 99 */,
-/* 100 */,
-/* 101 */,
-/* 102 */,
-/* 103 */,
-/* 104 */,
-/* 105 */,
-/* 106 */,
-/* 107 */,
-/* 108 */,
-/* 109 */,
-/* 110 */,
-/* 111 */,
-/* 112 */,
-/* 113 */,
 /* 114 */,
 /* 115 */,
 /* 116 */,
@@ -3608,7 +4711,29 @@ exports.default = axesChartY2GridAndLabels;
 /* 152 */,
 /* 153 */,
 /* 154 */,
-/* 155 */
+/* 155 */,
+/* 156 */,
+/* 157 */,
+/* 158 */,
+/* 159 */,
+/* 160 */,
+/* 161 */,
+/* 162 */,
+/* 163 */,
+/* 164 */,
+/* 165 */,
+/* 166 */,
+/* 167 */,
+/* 168 */,
+/* 169 */,
+/* 170 */,
+/* 171 */,
+/* 172 */,
+/* 173 */,
+/* 174 */,
+/* 175 */,
+/* 176 */,
+/* 177 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3632,20 +4757,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.config = exports.themes = exports.computeVizProps = void 0; // Charting imports i18n which needs to be run to instantiate window globals in the tests
 
-var Charting_1 = __webpack_require__(65); // eslint-disable-next-line import/order
+var Charting_1 = __webpack_require__(87); // eslint-disable-next-line import/order
 
 
-var charting_bundle_1 = __webpack_require__(55);
+var charting_bundle_1 = __webpack_require__(77);
 
-var config_1 = __webpack_require__(156);
+var config_1 = __webpack_require__(178);
 
 exports.config = config_1.default;
 
-var withDashboardViz_1 = __webpack_require__(37);
+var withDashboardViz_1 = __webpack_require__(56);
 
-var chartingUtils_1 = __webpack_require__(57);
+var chartingUtils_1 = __webpack_require__(79);
 
-var lineUtils_1 = __webpack_require__(225);
+var lineUtils_1 = __webpack_require__(247);
 
 var computeVizProps = function computeVizProps(_a) {
   var dataSources = _a.dataSources,
@@ -3666,7 +4791,8 @@ var computeVizProps = function computeVizProps(_a) {
   };
   var y2 = otherOptions.y2,
       y2Fields = otherOptions.y2Fields,
-      hasEventHandlers = otherOptions.hasEventHandlers;
+      hasEventHandlers = otherOptions.hasEventHandlers,
+      eventHandlers = otherOptions.eventHandlers;
   computedProps.options = (0, lineUtils_1.transformOptions)(otherOptions);
   var chartingAnnotations = (0, chartingUtils_1.getAnnotations)({
     annotationX: annotationX,
@@ -3696,7 +4822,10 @@ var computeVizProps = function computeVizProps(_a) {
 
   computedProps.chartData = charting_bundle_1.default.extractChartReadyData(Object.assign(Object.assign({}, primaryData), {
     annotations: chartingAnnotations
-  }));
+  }), {
+    removeRangeSelectOnLoad: true,
+    enableSearchZoom: (0, chartingUtils_1.shouldEnableSearchZoom)(eventHandlers, xField)
+  });
 
   if (hasEventHandlers) {
     computedProps.onClick = onEventTrigger;
@@ -3719,7 +4848,7 @@ exports.themes = themes;
 exports.default = Line;
 
 /***/ }),
-/* 156 */
+/* 178 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3731,39 +4860,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var schemaUtils_1 = __webpack_require__(16);
+var schemaUtils_1 = __webpack_require__(24);
 
-var visualization_color_palettes_1 = __webpack_require__(51);
+var visualization_color_palettes_1 = __webpack_require__(73);
 
-var visualization_icons_1 = __webpack_require__(52);
+var visualization_icons_1 = __webpack_require__(74);
 
-var placeholders_1 = __webpack_require__(50);
+var placeholders_1 = __webpack_require__(72);
 
 var i18n_1 = __webpack_require__(2);
 
-var pick_1 = __webpack_require__(23);
+var pick_1 = __webpack_require__(30);
 
-var variables_1 = __webpack_require__(11);
+var variables_1 = __webpack_require__(13);
 
-var AxesChartDataConfig_1 = __webpack_require__(74);
+var AxesChartDataConfig_1 = __webpack_require__(97);
 
-var AxesChartDataDisplay_1 = __webpack_require__(89);
+var AxesChartDataDisplay_1 = __webpack_require__(112);
 
-var AxesChartColorAndStyle_1 = __webpack_require__(75);
+var AxesChartColorAndStyle_1 = __webpack_require__(98);
 
-var AxesChartLegend_1 = __webpack_require__(76);
+var AxesChartLegend_1 = __webpack_require__(99);
 
-var AxesChartXGridAndLabels_1 = __webpack_require__(77);
+var AxesChartXGridAndLabels_1 = __webpack_require__(100);
 
-var AxesChartYGridAndLabels_1 = __webpack_require__(78);
+var AxesChartYGridAndLabels_1 = __webpack_require__(101);
 
-var AxesChartY2GridAndLabels_1 = __webpack_require__(90);
+var AxesChartY2GridAndLabels_1 = __webpack_require__(113);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var VizCategory_1 = __webpack_require__(36);
+var VizCategory_1 = __webpack_require__(22);
 
-var configUtils_1 = __webpack_require__(20);
+var configUtils_1 = __webpack_require__(27);
 
 var dataContract = {
   requiredDataSources: [{
@@ -4386,34 +5515,12 @@ var config = {
       description: 'triggered when user moves out of a data point'
     }
   },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER],
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.DOWNSAMPLING],
   themes: themes
 };
 exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
-/* 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 */,
@@ -4459,7 +5566,29 @@ exports.default = (0, configUtils_1.enhanceConfig)(config);
 /* 221 */,
 /* 222 */,
 /* 223 */,
-/* 224 */
+/* 224 */,
+/* 225 */,
+/* 226 */,
+/* 227 */,
+/* 228 */,
+/* 229 */,
+/* 230 */,
+/* 231 */,
+/* 232 */,
+/* 233 */,
+/* 234 */,
+/* 235 */,
+/* 236 */,
+/* 237 */,
+/* 238 */,
+/* 239 */,
+/* 240 */,
+/* 241 */,
+/* 242 */,
+/* 243 */,
+/* 244 */,
+/* 245 */,
+/* 246 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4495,9 +5624,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-__exportStar(__webpack_require__(155), exports);
+__exportStar(__webpack_require__(177), exports);
 
-var Line_1 = __webpack_require__(155);
+var Line_1 = __webpack_require__(177);
 
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -4507,7 +5636,7 @@ Object.defineProperty(exports, "default", {
 });
 
 /***/ }),
-/* 225 */
+/* 247 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -4518,13 +5647,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.convertToLineSCProperties = exports.convertMarkerOptions = exports.transformOptions = void 0;
 
-var propUtils_1 = __webpack_require__(29);
+var propUtils_1 = __webpack_require__(36);
 
-var simpleXMLOptions_1 = __webpack_require__(70);
+var simpleXMLOptions_1 = __webpack_require__(93);
 
 var lodash_1 = __webpack_require__(3);
 
-var config_1 = __webpack_require__(156);
+var config_1 = __webpack_require__(178);
 
 var transformOptions = function transformOptions(originalOptions) {
   var returnOptions = (0, propUtils_1.adjustOptionsToSchema)(originalOptions, config_1.default.optionsSchema);