@splunk/visualizations 26.1.1 → 26.2.0

package/Image.js

@@ -87,47 +87,42 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 221);
+/******/ 	return __webpack_require__(__webpack_require__.s = 243);
 /******/ })
 /************************************************************************/
-/******/ ({
-
-/***/ 0:
+/******/ ([
+/* 0 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
-
-/***/ 1:
+/* 1 */
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
-
-/***/ 10:
+/* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
-
-/***/ 11:
+/* 3 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
+module.exports = require("lodash");
 
 /***/ }),
-
-/***/ 12:
+/* 4 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("styled-components");
 
 /***/ }),
-
-/***/ 13:
+/* 5 */,
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -136,102 +131,79 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.VizBehavior = void 0;
+var VizBehavior;
 
-var React = __webpack_require__(1);
+(function (VizBehavior) {
+  /**
+   * Dynamic Options Behavior.
+   * This allows visualization options to be powered by data
+   *
+   * **Example**
+   *
+   * sparklineValues: ">primary|seriesByIndex(0)"
+   * would configure sparklineValues with an array of data points
+   * coming from the first series in the primary datasource
+   *
+   */
+  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
+  VizBehavior["EVENTS"] = "events";
+  VizBehavior["DOWNSAMPLING"] = "downsampling";
+  /**
+   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
+   * missing.
+   * @type {string}
+   */
 
-var styled_components_1 = __webpack_require__(4);
+  VizBehavior["PLACEHOLDER"] = "placeholder";
+  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
+})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
-var SizeAwareWrapper_1 = __webpack_require__(19);
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
 
-var style_1 = __webpack_require__(14);
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
-var colorUtils_1 = __webpack_require__(12);
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
 
-var Item = styled_components_1.default.div.attrs(function (_ref) {
-  var width = _ref.width;
-  return {
-    style: {
-      width: (0, style_1.toPx)(width)
-    }
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__Item",
-  componentId: "sc-1yhgpod-0"
-})(["position:relative;background-color:", "};"], function (props) {
-  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
-var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
-  var width = _ref2.width,
-      height = _ref2.height;
-  return {
-    style: Object.assign(Object.assign({}, width && {
-      width: (0, style_1.toPx)(width)
-    }), height && {
-      height: (0, style_1.toPx)(height)
-    })
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__FixSizeItem",
-  componentId: "sc-1yhgpod-1"
-})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-var ItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__ItemContent",
-  componentId: "sc-1yhgpod-2"
-})(["position:relative;min-height:100px;width:100%;"]);
-var FixSizeItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__FixSizeItemContent",
-  componentId: "sc-1yhgpod-3"
-})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
 
-var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
-  var FixedSizeContainer = function FixedSizeContainer(props) {
-    var width = props.width,
-        height = props.height,
-        backgroundColor = props.backgroundColor;
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
-    if (!height) {
-      return React.createElement(Item, {
-        "data-test": "item",
-        width: width,
-        backgroundColor: backgroundColor
-      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
-    }
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
 
-    return React.createElement(FixSizeItem, {
-      "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.1.1 - b6df0a015",
-      width: width,
-      height: height,
-      backgroundColor: backgroundColor
-    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
-      var newWidth = _ref3.width,
-          newHeight = _ref3.height;
-      return React.createElement(Viz, Object.assign({}, props, {
-        width: newWidth,
-        height: newHeight
-      }));
-    })));
-  };
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
-  FixedSizeContainer.displayName = 'withFixedSizeContainer';
-  return FixedSizeContainer;
-};
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
 
-exports.default = withFixedSizeContainer;
+module.exports = require("@splunk/visualizations-shared/numberUtils");
 
 /***/ }),
-
-/***/ 14:
+/* 12 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/style");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
+/* 13 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/variables");
 
-/***/ 15:
+/***/ }),
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -240,547 +212,655 @@ module.exports = require("@splunk/visualizations-shared/style");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extendStaticWrapperProps = void 0;
-/**
- * @method extendStaticWrapperProps
- * @param {Object} props
- * @param {DashboardVizType} props.Wrapper
- * @param {DashboardVizType} props.Visualization
- */
-
-var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
-  var Wrapper = _ref.Wrapper,
-      Visualization = _ref.Visualization;
-  var extendProperties = ['propTypes', 'defaultProps', 'config'];
-  extendProperties.forEach(function (prop) {
-    if (Visualization[prop]) {
-      // eslint-disable-next-line no-param-reassign
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
+exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
 
-exports.extendStaticWrapperProps = extendStaticWrapperProps;
+var numberUtils_1 = __webpack_require__(11);
 
-/***/ }),
+var interfaces_1 = __webpack_require__(40); // TODO: utilize this fn in ParallelCoordinates
 
-/***/ 153:
-/***/ (function(module, exports, __webpack_require__) {
 
-"use strict";
+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;
 
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
+      if (columns[index][i] === '') {
+        newObj[fieldName] = null;
+      } else {
+        newObj[fieldName] = columns[index][i];
+      }
+    });
+    data.push(newObj);
+  };
 
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  for (var i = 0; i < columns[0].length; i += 1) {
+    _loop(i);
   }
 
-  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;
+  return data;
 };
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.config = exports.themes = exports.toImageDimensions = exports.shouldShowPlaceholder = void 0;
+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 lodash_1 = __webpack_require__(3);
+  var sampled = [];
+  var sampledIndex = 0; // Bucket size. Leave room for start and end data points
 
-var React = __webpack_require__(1);
+  var every = (dataLength - 2) / (threshold - 2);
+  var a = 0; // Initially a is the first point in the triangle
 
-var i18n_1 = __webpack_require__(2);
+  var maxAreaPoint;
+  var maxArea;
+  var area;
+  var nextA;
+  sampled.push(data[a]); // Always add the first point
 
-var style_1 = __webpack_require__(14);
+  downsampledIndices.push(0); // eslint-disable-next-line no-plusplus
 
-var RemoteImage_1 = __webpack_require__(154);
+  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
 
-var styled_components_1 = __webpack_require__(4);
+    for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
+      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
+
+      avgY += data[avgRangeStart][1] * 1;
+    }
 
-var T = __webpack_require__(0);
+    avgX /= avgRangeLength;
+    avgY /= avgRangeLength; // Get the range for this bucket
 
-var config_1 = __webpack_require__(222);
+    var rangeOffs = Math.floor((i + 0) * every) + 1;
+    var rangeTo = Math.floor((i + 1) * every) + 1; // Point a
 
-exports.config = config_1.default;
+    var pointAX = Number(data[a][0]); // Enforce Number (value may be Date)
 
-var withDashboardViz_1 = __webpack_require__(37);
+    var pointAY = data[a][1] * 1; // eslint-disable-next-line no-multi-assign
 
-var ImageApi_1 = __webpack_require__(223);
+    maxArea = area = -1;
+    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
 
-var useEffect = React.useEffect,
-    useRef = React.useRef;
-var validOptions = Object.keys(config_1.default.optionsSchema);
-var Container = styled_components_1.default.div.attrs(function () {
+    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 {
-    'data-test': 'image-container'
+    downsampledData: sampled,
+    downsampledIndices: downsampledIndices
   };
-}).withConfig({
-  displayName: "Image__Container",
-  componentId: "kplb09-0"
-})(["position:relative;box-sizing:border-box;display:flex;justify-content:center;align-items:center;cursor:", ";", ";"], function (props) {
-  return props.onClick ? 'pointer' : 'inherit';
-}, function (props) {
-  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
-});
+};
+/**
+ * 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 shouldShowPlaceholder = function shouldShowPlaceholder(dataSources, loading, options) {
-  if (options.src) {
+
+var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
+  // Splunk charting allows for numbers in formats such as negative hex that
+  // Number() does not support and also allows loose coercion of hex numbers (but not other formats)
+  // We want to identify columns which contain at least one value that can be loosely coerced
+  var canLooselyCoerceSomeValues = column.findIndex(function (value) {
+    return (0, numberUtils_1.startsWithNumber)("".concat(value));
+  }) >= 0; // If not all values in column can be strictly coerced to a number, we do not downsample
+
+  var coercedColumn = [];
+  var canDownsampleColumn = !column.some(function (value) {
+    var coercedValue = Number(value); // if it can't be parsed or isn't safe, fail
+
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number') {
+      return true;
+    } // save value and continue to next
+
+
+    coercedColumn.push(coercedValue);
     return false;
+  });
+  return {
+    canDownsampleColumn: canDownsampleColumn,
+    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
+    coercedColumn: canDownsampleColumn ? coercedColumn : []
+  };
+};
+/**
+ * Tries to coerce the x-column to numbers or dates, if it is eligible for downsampling.
+ * Only strictly increasing x-columns are eligible for downsampling.
+ * If the column is not eligible for downsampling, returns an empty array.
+ */
+
+
+var strictlyCoerceXColumn = function strictlyCoerceXColumn(column, fieldType) {
+  if (fieldType === 'number') {
+    var coercedXColumn = column.map(function (xValue) {
+      return Number(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
+      return coercedXColumn;
+    }
+  } else if (fieldType === 'time') {
+    var _coercedXColumn = column.map(function (xValue) {
+      return new Date(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(_coercedXColumn, fieldType)) {
+      return _coercedXColumn;
+    }
   }
 
-  return true;
+  return [];
 };
 
-exports.shouldShowPlaceholder = shouldShowPlaceholder;
+var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
+  var vizConfig = _ref.vizConfig;
 
-var toImageDimensions = function toImageDimensions(props) {
-  if (props.shouldPreserveAspectRatio) {
-    return "\n            max-width: 100%;\n            max-height: 100%;\n            width: auto;\n            height: auto;\n        ";
-  }
+  var _a;
 
-  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
+  return (_a = vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(interfaces_1.VizBehavior.DOWNSAMPLING);
 };
 
-exports.toImageDimensions = toImageDimensions;
-var StyledImage = styled_components_1.default.img.withConfig({
-  displayName: "Image__StyledImage",
-  componentId: "kplb09-1"
-})(["display:block;", ";"], function (props) {
-  return (0, exports.toImageDimensions)(props);
-});
+exports.isDownsamplingEnabledForViz = isDownsamplingEnabledForViz;
 
-var computeVizProps = function computeVizProps(_a) {
-  var visualizationApiRef = _a.visualizationApiRef,
-      title = _a.title,
-      otherOptions = __rest(_a, ["visualizationApiRef", "title"]);
+var calculateThresholdOnRangeSelect = function calculateThresholdOnRangeSelect(_ref2) {
+  var firstIndex = _ref2.firstIndex,
+      lastIndex = _ref2.lastIndex,
+      dataSources = _ref2.dataSources,
+      width = _ref2.width;
 
-  var options = (0, lodash_1.chain)(otherOptions).pick(validOptions).value();
-  return {
-    options: options,
-    title: title,
-    visualizationApiRef: visualizationApiRef
-  };
+  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));
 };
 
-var ImageVisualization = function ImageVisualization(_ref) {
-  var height = _ref.height,
-      width = _ref.width,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      visualizationApiRef = _ref.visualizationApiRef,
-      options = _ref.options,
-      onImageClick = _ref.onImageClick;
-  var src = options.src,
-      preserveAspectRatio = options.preserveAspectRatio;
-  var remoteImage = useRef(null);
-  var api = useRef(new ImageApi_1.default({
-    options: {
-      src: src,
-      preserveAspectRatio: preserveAspectRatio
-    },
-    remoteImage: remoteImage
-  }));
-  var isRemote = (0, RemoteImage_1.isRemoteImage)(src);
-  useEffect(function () {
-    visualizationApiRef(api.current);
-    return function () {
-      visualizationApiRef(null);
-    };
-  }, []);
-  return React.createElement(Container, {
-    width: width,
-    height: height,
-    onClick: onImageClick
-  }, isRemote ? React.createElement(RemoteImage_1.default, {
-    imageURL: src,
-    title: title,
-    preserveAspectRatio: preserveAspectRatio,
-    width: width,
-    height: height,
-    ref: remoteImage
-  }) : React.createElement(StyledImage, {
-    "data-test": "image",
-    src: src,
-    shouldPreserveAspectRatio: preserveAspectRatio,
-    width: width,
-    height: height,
-    alt: (0, i18n_1._)(title),
-    onError: function onError(e) {
-      e.target.alt = (0, i18n_1._)('Image not found');
-    },
-    referrerPolicy: "no-referrer"
-  }));
-};
-
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  options: T.object,
-  title: T.string,
-  visualizationApiRef: T.func,
-  onImageClick: T.func
-};
-var defaultProps = {
-  width: '100%',
-  height: undefined,
-  options: {},
-  title: '',
-  visualizationApiRef: lodash_1.noop,
-  onImageClick: lodash_1.noop
-};
-ImageVisualization.propTypes = propTypes;
-ImageVisualization.defaultProps = defaultProps;
-var Image = (0, withDashboardViz_1.default)({
-  ReactViz: ImageVisualization,
-  vizConfig: config_1.default,
-  useIconPlaceholder: exports.shouldShowPlaceholder,
-  computeVizProps: computeVizProps
-});
-var themes = null;
-exports.themes = themes;
-exports.default = Image;
+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;
 
-/***/ 154:
-/***/ (function(module, exports) {
+  var _a, _b, _c;
 
-module.exports = require("@splunk/visualizations-shared/RemoteImage");
+  if (enableSearchZoom || !selectChartEvent) {
+    return Number(width);
+  }
 
-/***/ }),
+  var primaryDataSource = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary;
 
-/***/ 16:
-/***/ (function(module, exports) {
+  if (!primaryDataSource) {
+    return null;
+  }
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+  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;
+    });
 
-/***/ 17:
-/***/ (function(module, exports) {
+    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
+      return null;
+    }
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+    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);
+  }
 
-/***/ 18:
-/***/ (function(module, exports) {
+  return null;
+};
 
-module.exports = require("@babel/runtime/helpers/createClass");
+exports.calculateDownsamplingThreshold = calculateDownsamplingThreshold;
 
-/***/ }),
+var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fieldType) {
+  return column.every(function (value, index) {
+    if (fieldType === 'number') {
+      if (Number.isNaN(value)) {
+        return false;
+      }
+    }
 
-/***/ 19:
-/***/ (function(module, exports) {
+    if (fieldType === 'time') {
+      if (Number.isNaN(value.getTime())) {
+        return false;
+      }
+    }
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+    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
+ */
 
-/***/ 2:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+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;
 
-/***/ 20:
-/***/ (function(module, exports, __webpack_require__) {
+    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
 
-"use strict";
 
+      hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
 
-var _toConsumableArray = __webpack_require__(8);
+      if (hasDisplayedColumnThatCantBeDownsampled) {
+        return true;
+      }
 
-var _defineProperty = __webpack_require__(7);
+      if (canDownsampleColumn) {
+        yColumns.push(coercedColumn);
+      }
+    }
 
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
+    return false;
+  });
 
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (canDownsample) {
+    return {
+      xColumn: xColumn,
+      yColumns: yColumns
+    };
   }
 
-  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;
+  return {
+    xColumn: [],
+    yColumns: []
+  };
 };
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+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
 
-var lodash_1 = __webpack_require__(3);
+  return Object.assign(Object.assign({}, ds), {
+    data: Object.assign(Object.assign({}, ds.data), {
+      columns: slicedColumns
+    })
+  });
+};
 
-var schemaUtils_1 = __webpack_require__(16);
+var downsampleDataSources = function downsampleDataSources(_ref4) {
+  var dataSources = _ref4.dataSources,
+      threshold = _ref4.threshold,
+      options = _ref4.options;
 
-var VizBehavior_1 = __webpack_require__(6);
+  var _a, _b, _c;
 
-var dynamicOptionsDSLType = {
-  type: 'string',
-  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
-};
-/**
- * Helper function to extend an options schema with dynamic options DSL
- * @param optionsSchema a visualization's options schema
- * @returns an updated options schema that additionally allows strings starting with > for each option
- */
+  var primaryDS = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary; // only downsample time series when number of data points are over threshold
 
-function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
-  var enhancedOptionsSchema = {};
-  Object.keys(optionsSchema).forEach(function (key) {
-    var _a = optionsSchema[key],
-        title = _a.title,
-        description = _a.description,
-        readOnly = _a.readOnly,
-        writeOnly = _a.writeOnly,
-        examples = _a.examples,
-        defaultValue = _a.default,
-        type = _a.type,
-        properties = _a.properties,
-        patternProperties = _a.patternProperties,
-        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+  var 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;
 
-    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
-      title: title
-    }), description !== undefined && {
-      description: description
-    }), readOnly !== undefined && {
-      readOnly: readOnly
-    }), writeOnly !== undefined && {
-      writeOnly: writeOnly
-    }), examples !== undefined && {
-      examples: examples
-    }), defaultValue !== undefined && {
-      default: defaultValue
-    });
+  if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
+    return dataSources;
+  }
 
-    if (type === 'object') {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
-        type: type
-      }), properties && {
-        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
-      });
+  var xField = options.xField,
+      yFields = options.yFields,
+      fieldTypes = options.fieldTypes;
 
-      if (patternProperties) {
-        var enhancedPatternProperties = {};
-        Object.keys(patternProperties).forEach(function (opt) {
-          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
-        });
-        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
-      }
-    } else {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
-        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
-          type: type
-        }), remainingSchemaEntry), dynamicOptionsDSLType]
-      });
-    }
-  });
-  return enhancedOptionsSchema;
-}
+  if (!xField || !(yFields === null || yFields === void 0 ? void 0 : yFields.length) || !(fieldTypes === null || fieldTypes === void 0 ? void 0 : fieldTypes.length)) {
+    return dataSources;
+  }
 
-exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
-/**
- * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
- * this function also collapse all editor panels
- * @param vizConfig a Visualization Config
- * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
- * and containing `open: false` for all editor panels in editorConfig
- */
+  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;
+  }
 
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = Object.assign({}, vizConfig);
+  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
+      xColumn = _tryToCoerceAllDispla.xColumn,
+      yColumns = _tryToCoerceAllDispla.yColumns;
 
-  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
-    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
+  if (!yColumns.length || !xColumn.length) {
+    return dataSources;
   }
 
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: config.open || false
+  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];
     });
-  });
-  return enhancedConfig;
-}
 
-exports.enhanceConfig = enhanceConfig;
-/**
- * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
- * Created for editor unit tests
- * @param vizConfig a Visualization Config
- * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
- */
+    try {
+      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
+          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
 
-function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
-  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: true
-    });
-  });
-  return editorPanelUncollapsedConfig;
-}
+      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
 
-exports.uncollapseEditorConfig = uncollapseEditorConfig;
+  downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
+  return downsampledDataSources;
+};
 
-function isDynamicOption(option) {
-  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
-}
+exports.downsampleDataSources = downsampleDataSources;
 
-exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
-// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+/***/ }),
+/* 15 */
+/***/ (function(module, exports) {
 
-/**
- * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
- * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
- * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
- * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
- *
- * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
- */
+module.exports = require("@splunk/visualizations-shared/colorUtils");
 
-function hasCompatibleContexts(vizContext, presetContext) {
-  var presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(function (contextKey) {
-    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
-  });
-}
-/**
- * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
- */
+/***/ }),
+/* 16 */
+/***/ (function(module, exports) {
 
+module.exports = require("@splunk/visualization-encoding/Options");
 
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  var presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(function (optionKey) {
-    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
-  });
-}
-/**
- * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
- * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
- *
- * @param {Object} vizContext - the current vizContext definition
- * @param {Object} vizOptions - the current vizOptions definition
- * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
- */
+/***/ }),
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
 
-function getInitialPreset(vizContext, vizOptions, presets) {
-  return presets.find(function (preset) {
-    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
-    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
-    var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
-    // if not, then the preset is invalid in config.ts
 
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
+var _slicedToArray = __webpack_require__(7);
 
-exports.getInitialPreset = getInitialPreset;
-/**
- * generates number precision values for a Select editor
- *
- * @param {Number} numPrecisionValues - number of integer precision values to generate
- * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
- */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-function generatePrecisionValues(numPrecisionValues) {
-  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
-    return {
-      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
-      value: i
-    };
-  });
-}
+var React = __webpack_require__(0);
 
-exports.generatePrecisionValues = generatePrecisionValues;
-/**
- * insert layout in layout array, return a new layout array instead of updating the original
- *
- * @param {EditorLayoutConfig[][]} layout - editor layout
- * @param {Number} index - the index to insert layout item(s)
- * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
- * @returns {EditorLayoutConfig[][]} new editor layout with insertion
- */
+var styled_components_1 = __webpack_require__(4);
 
-var insertLayout = function insertLayout(layout, index) {
-  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    layoutItems[_key - 2] = arguments[_key];
-  }
+var style_1 = __webpack_require__(18);
 
-  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
+var colorUtils_1 = __webpack_require__(15);
+
+var SizeAwareWrapper_1 = __webpack_require__(26);
+
+var Item = styled_components_1.default.div.attrs(function (_ref) {
+  var width = _ref.width;
+  return {
+    style: {
+      width: (0, style_1.toPx)(width)
+    }
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__Item",
+  componentId: "sc-1yhgpod-0"
+})(["position:relative;background-color:", "};"], function (props) {
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
+
+var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height;
+  return {
+    style: Object.assign(Object.assign({}, width && {
+      width: (0, style_1.toPx)(width)
+    }), height && {
+      height: (0, style_1.toPx)(height)
+    })
+  };
+}).withConfig({
+  displayName: "FixedSizeContainer__FixSizeItem",
+  componentId: "sc-1yhgpod-1"
+})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
+  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
+});
+var ItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__ItemContent",
+  componentId: "sc-1yhgpod-2"
+})(["position:relative;min-height:100px;width:100%;"]);
+var FixSizeItemContent = styled_components_1.default.div.withConfig({
+  displayName: "FixedSizeContainer__FixSizeItemContent",
+  componentId: "sc-1yhgpod-3"
+})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
+
+var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
+  var FixedSizeContainer = function FixedSizeContainer(props) {
+    var width = props.width,
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+    var cachedHandleResize = React.useCallback(function (w, h) {
+      setContainerWidth(w);
+      setContainerHeight(h);
+    }, []);
+
+    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, {
+        "data-test": "item",
+        width: width,
+        backgroundColor: backgroundColor
+      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
+    }
+
+    return React.createElement(FixSizeItem, {
+      "data-test": "fix-size-item",
+      "data-splunk-visualization-version": "26.2.0 - 49b909915",
+      width: width,
+      height: height,
+      backgroundColor: backgroundColor
+    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, {
+      width: width,
+      height: height,
+      onResize: cachedHandleResize
+    }), React.createElement(Viz, Object.assign({}, props, {
+      width: containerWidth,
+      height: containerHeight
+    }))));
+  };
+
+  FixedSizeContainer.displayName = 'withFixedSizeContainer';
+  return FixedSizeContainer;
 };
 
-exports.insertLayout = insertLayout;
+exports.default = withFixedSizeContainer;
 
 /***/ }),
-
-/***/ 21:
+/* 18 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
-
-/***/ 221:
+/* 19 */
 /***/ (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);
+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'];
 
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function get() {
-        return m[k];
-      }
-    };
-  }
+/***/ }),
+/* 20 */,
+/* 21 */
+/***/ (function(module, exports, __webpack_require__) {
 
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
+"use strict";
 
-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);
-  }
-};
+
+var _classCallCheck = __webpack_require__(10);
+
+var _createClass = __webpack_require__(25);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.DefaultVizActionHandler = void 0;
+
+var DefaultVizActionHandler = /*#__PURE__*/function () {
+  function DefaultVizActionHandler() {
+    _classCallCheck(this, DefaultVizActionHandler);
+  }
 
-__exportStar(__webpack_require__(153), exports);
+  _createClass(DefaultVizActionHandler, [{
+    key: "focus",
+    value: function focus() {// noop
+    }
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      return null; // noop
+    }
+  }]);
 
-var Image_1 = __webpack_require__(153);
+  return DefaultVizActionHandler;
+}();
 
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return Image_1.default;
-  }
-});
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
-
-/***/ 222:
+/* 22 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -789,252 +869,419 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.VizCategory = void 0;
+var VizCategory;
 
-var i18n_1 = __webpack_require__(2);
+(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 = {}));
 
-var visualization_icons_1 = __webpack_require__(52);
+/***/ }),
+/* 23 */
+/***/ (function(module, exports, __webpack_require__) {
 
-var VizBehavior_1 = __webpack_require__(6);
+"use strict";
 
-var VizCategory_1 = __webpack_require__(36);
 
-var configUtils_1 = __webpack_require__(20);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extendStaticWrapperProps = void 0;
+/**
+ * @method extendStaticWrapperProps
+ * @param {Object} props
+ * @param {DashboardVizType} props.Wrapper
+ * @param {DashboardVizType} props.Visualization
+ */
 
-var dataContract = {
-  requiredDataSources: [],
-  optionalDataSources: [// Note: SCP-14090 disable ui for optional datasources. We may need to add it back later
-    // {
-    //     name: 'annotation',
-    //     description: 'DataSource that populate event annotations',
-    // },
-  ],
-  initialRequestParams: {}
-};
-var size = {
-  initialWidth: 300,
-  initialHeight: 300
-};
-var defaultContext = {};
-var optionsSchema = {
-  src: {
-    description: 'URL of an image file. All browser-supported image formats are acceptable.',
-    type: 'string'
-  },
-  preserveAspectRatio: {
-    default: false,
-    description: 'Set to true to maintain the aspect ratio of an image when the screen is resized.',
-    type: 'boolean'
-  }
-};
-var editorConfig = [{
-  label: (0, i18n_1._)('Image content'),
-  layout: [[{
-    label: (0, i18n_1._)('Image file'),
-    option: 'src',
-    editor: 'editor.image'
-  }], [{
-    label: (0, i18n_1._)('Preserve aspect ratio'),
-    option: 'preserveAspectRatio',
-    editor: 'editor.checkbox',
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return !!options.src;
-    }
-  }]]
-}];
-var themes = {};
-/**
- * visualization configuration
- */
-
-var config = {
-  /**
-   * unique viz key
-   */
-  key: 'splunk.image',
-
-  /**
-   * viz name
-   */
-  name: (0, i18n_1._)('Image'),
-  category: VizCategory_1.VizCategory.MISC,
-
-  /**
-   * viz icon
-   */
-  icon: visualization_icons_1.Image,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
-  editorConfig: editorConfig,
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.EVENTS],
-  themes: themes,
-  events: {
-    'image.click': {
-      description: 'triggered when user clicks on the image'
+var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
+  var Wrapper = _ref.Wrapper,
+      Visualization = _ref.Visualization;
+  var extendProperties = ['propTypes', 'defaultProps', 'config'];
+  extendProperties.forEach(function (prop) {
+    if (Visualization[prop]) {
+      // eslint-disable-next-line no-param-reassign
+      Wrapper[prop] = Visualization[prop];
     }
-  }
+  });
 };
-exports.default = (0, configUtils_1.enhanceConfig)(config);
-
-/***/ }),
-
-/***/ 223:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(9);
-
-var _createClass = __webpack_require__(18);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var lodash_1 = __webpack_require__(3);
-
-var RemoteImage_1 = __webpack_require__(154);
-/**
- * Image Api
- */
-
-
-var ImageApi = /*#__PURE__*/function () {
-  function ImageApi(viz) {
-    _classCallCheck(this, ImageApi);
-
-    this.viz = viz;
-  }
-  /**
-   * put focus on the visualization
-   */
-  // eslint-disable-next-line class-methods-use-this
-
-
-  _createClass(ImageApi, [{
-    key: "focus",
-    value: function focus() {}
-    /**
-     * return snapshot of that includes inlined image
-     */
-
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      var srcFromOptions = (0, lodash_1.get)(this.viz.options, 'src', '');
-      var isRemote = (0, RemoteImage_1.isRemoteImage)(srcFromOptions);
-      return {
-        options: Object.assign(Object.assign({}, this.viz.options), {
-          src: isRemote && this.viz.remoteImage ? (0, lodash_1.get)(this.viz.remoteImage, ['current', 'state', 'imageDataURI'], '') : srcFromOptions
-        })
-      };
-    }
-  }]);
-
-  return ImageApi;
-}();
-
-exports.default = ImageApi;
-
-/***/ }),
-
-/***/ 25:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/id");
+exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
-
-/***/ 26:
+/* 24 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
-
-/***/ 27:
+/* 25 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
-
-/***/ 28:
+/* 26 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
+/* 27 */
+/***/ (function(module, exports, __webpack_require__) {
 
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
+"use strict";
 
-/***/ 30:
-/***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+var _toConsumableArray = __webpack_require__(8);
 
-/***/ }),
+var _defineProperty = __webpack_require__(9);
 
-/***/ 32:
-/***/ (function(module, exports, __webpack_require__) {
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
 
-"use strict";
+  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.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
+exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var i18n_1 = __webpack_require__(2);
+var schemaUtils_1 = __webpack_require__(24);
 
-var Message_1 = __webpack_require__(10);
+var VizBehavior_1 = __webpack_require__(6);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var dynamicOptionsDSLType = {
+  type: 'string',
+  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
+};
 /**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
+ * Helper function to extend an options schema with dynamic options DSL
+ * @param optionsSchema a visualization's options schema
+ * @returns an updated options schema that additionally allows strings starting with > for each option
  */
 
+function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
+  var enhancedOptionsSchema = {};
+  Object.keys(optionsSchema).forEach(function (key) {
+    var _a = optionsSchema[key],
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
+    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
+      title: title
+    }), description !== undefined && {
+      description: description
+    }), readOnly !== undefined && {
+      readOnly: readOnly
+    }), writeOnly !== undefined && {
+      writeOnly: writeOnly
+    }), examples !== undefined && {
+      examples: examples
+    }), defaultValue !== undefined && {
+      default: defaultValue
+    });
 
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = (0, lodash_1.get)(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
+    if (type === 'object') {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
+        type: type
+      }), properties && {
+        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
+      });
 
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
+      if (patternProperties) {
+        var enhancedPatternProperties = {};
+        Object.keys(patternProperties).forEach(function (opt) {
+          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
+        });
+        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
+      }
+    } else {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
+        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
+          type: type
+        }), remainingSchemaEntry), dynamicOptionsDSLType]
+      });
+    }
+  });
+  return enhancedOptionsSchema;
+}
+
+exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
+ * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
+ * this function also collapse all editor panels
+ * @param vizConfig a Visualization Config
+ * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
+ * and containing `open: false` for all editor panels in editorConfig
+ */
+
+function enhanceConfig(vizConfig) {
+  var enhancedConfig = Object.assign({}, vizConfig);
+
+  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
+    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
+  }
+
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: config.open || false
+    });
+  });
+  return enhancedConfig;
+}
+
+exports.enhanceConfig = enhanceConfig;
+/**
+ * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
+ * Created for editor unit tests
+ * @param vizConfig a Visualization Config
+ * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
+ */
+
+function uncollapseEditorConfig(vizConfig) {
+  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
+  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: true
+    });
+  });
+  return editorPanelUncollapsedConfig;
+}
+
+exports.uncollapseEditorConfig = uncollapseEditorConfig;
+
+function isDynamicOption(option) {
+  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
+}
+
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
+// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
+
+/**
+ * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
+ * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
+ * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
+ * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
+ *
+ * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
+ */
+
+function hasCompatibleContexts(vizContext, presetContext) {
+  var presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(function (contextKey) {
+    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
+  });
+}
+/**
+ * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
+ */
+
+
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  var presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(function (optionKey) {
+    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
+  });
+}
+/**
+ * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
+ * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
+ *
+ * @param {Object} vizContext - the current vizContext definition
+ * @param {Object} vizOptions - the current vizOptions definition
+ * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
+ */
+
+
+function getInitialPreset(vizContext, vizOptions, presets) {
+  return presets.find(function (preset) {
+    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
+    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
+    var presetContextKeys = Object.keys(presetContext);
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    // if not, then the preset is invalid in config.ts
+
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
+
+exports.getInitialPreset = getInitialPreset;
+/**
+ * generates number precision values for a Select editor
+ *
+ * @param {Number} numPrecisionValues - number of integer precision values to generate
+ * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
+ */
+
+function generatePrecisionValues(numPrecisionValues) {
+  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
+    return {
+      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
+      value: i
+    };
+  });
+}
+
+exports.generatePrecisionValues = generatePrecisionValues;
+/**
+ * insert layout in layout array, return a new layout array instead of updating the original
+ *
+ * @param {EditorLayoutConfig[][]} layout - editor layout
+ * @param {Number} index - the index to insert layout item(s)
+ * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
+ * @returns {EditorLayoutConfig[][]} new editor layout with insertion
+ */
+
+var insertLayout = function insertLayout(layout, index) {
+  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    layoutItems[_key - 2] = arguments[_key];
+  }
+
+  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
+};
+
+exports.insertLayout = insertLayout;
+
+/***/ }),
+/* 28 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+
+/***/ }),
+/* 29 */,
+/* 30 */,
+/* 31 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+/* 32 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/TimezoneContext");
+
+/***/ }),
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"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;
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/hocUtils");
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+
+/***/ }),
+/* 36 */,
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowIconPlaceholder = void 0;
+
+var React = __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__(12);
+
+var FixedSizeContainer_1 = __webpack_require__(17);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = (0, lodash_1.get)(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
+
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  iconColor: T.string
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
  */
 
 var IconPlaceholder = function IconPlaceholder(props) {
@@ -1075,25 +1322,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,
@@ -1146,24 +1392,7 @@ var getSortingParams = function getSortingParams(_ref) {
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
-
-/***/ 34:
-/***/ (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'];
-
-/***/ }),
-
-/***/ 35:
+/* 39 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1174,7 +1403,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1227,89 +1456,307 @@ var getPaginationParams = function getPaginationParams(_ref) {
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
-
-/***/ 36:
+/* 40 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizCategory = void 0;
-var VizCategory;
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
 
-(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 = {}));
+  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
+});
 
 /***/ }),
+/* 49 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 50 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 51 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 52 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 53 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 54 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 55 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 
-/***/ 37:
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+/* 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
@@ -1400,25 +1847,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);
@@ -1430,16 +1913,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
@@ -1448,7 +1929,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)
@@ -1582,258 +2063,651 @@ var withDashboardViz = function withDashboardViz(opts) {
     } // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
 
 
-    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
-      return null;
-    }
+    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
+      return null;
+    }
+
+    return React.createElement(SanitizedReactViz, Object.assign({
+      mode: mode,
+      width: width,
+      height: height
+    }, downsamplingProps, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
+  };
+
+  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
+  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
+    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
+    theme: {}
+  }); // attach viz config
+
+  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+
+  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
+};
+
+exports.default = withDashboardViz;
+
+/***/ }),
+/* 57 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
+
+/***/ }),
+/* 58 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+
+/***/ }),
+/* 59 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/moment");
+
+/***/ }),
+/* 60 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/async-dynamic-options-evaluator");
+
+/***/ }),
+/* 61 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(10);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
+/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
+
+var T = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(3);
+
+var VizActionHandler_1 = __webpack_require__(21); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
+exports.INITIAL_WIDTH = 250;
+exports.INITIAL_HEIGHT = 250;
+/**
+ * A Splunk visualization
+ */
+
+var SplunkVisualization = function SplunkVisualization() {
+  _classCallCheck(this, SplunkVisualization);
+};
+
+SplunkVisualization.propTypes = {
+  /**
+   * display mode
+   */
+  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
+  /**
+   * width in pixel or string, defaults to 100%
+   */
+  width: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * height in pixel or string
+   */
+  height: T.oneOfType([T.string, T.number]).isRequired,
+
+  /**
+   * visualization context used for dynamic option evaluation
+   */
+  context: T.object,
+
+  /**
+   * visualization formatting options
+   */
+  options: T.object,
+
+  /**
+   * A callback to update formatting options
+   */
+  onOptionsChange: T.func,
+
+  /**
+   * datasource state which include data and request params, object key indicate the datasource type.
+   */
+  dataSources: T.objectOf(T.shape({
+    /**
+     * current request params
+     */
+    requestParams: T.object,
+
+    /**
+     * current dataset
+     */
+    data: T.shape({
+      fields: T.array,
+      columns: T.array
+    }),
+
+    /**
+     * error
+     */
+    error: T.shape({
+      level: T.string,
+      message: T.string
+    }),
+
+    /**
+     * meta data that came with the dataset
+     */
+    meta: T.object
+  })),
+
+  /**
+   * A callback to trigger event
+   */
+  onEventTrigger: T.func,
+
+  /**
+   * Inform viz if there are handlers listening to events
+   */
+  hasEventHandlers: T.bool,
+
+  /**
+   * A callback to communicate computed props to a consumer
+   */
+  onComputedProps: T.func,
+
+  /**
+   * A callback to obtain visualization api
+   */
+  vizActionHandlerRef: T.func,
+  loading: T.bool,
+  theme: T.object,
+
+  /**
+   * A callback to request new data with updated request params
+   */
+  onRequestParamsChange: T.func
+};
+/**
+ *
+ */
+
+SplunkVisualization.defaultProps = {
+  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
+  width: '100%',
+  height: exports.INITIAL_HEIGHT,
+  dataSources: {},
+  onEventTrigger: function onEventTrigger() {
+    return {};
+  },
+  mode: 'view',
+  hasEventHandlers: false,
+  options: {},
+  context: {},
+  onOptionsChange: function onOptionsChange() {
+    return {};
+  },
+  vizActionHandlerRef: function vizActionHandlerRef() {
+    return new VizActionHandler_1.DefaultVizActionHandler();
+  },
+  onComputedProps: function onComputedProps() {
+    return {};
+  },
+  loading: false,
+  onRequestParamsChange: lodash_1.noop
+};
+exports.default = SplunkVisualization;
+
+/***/ }),
+/* 62 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDeepMemo = void 0;
+
+var react_1 = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+/**
+ * This hook evaluates and stores the result of a passed function and only
+ * re-evaluates the function when passed dependencies change.
+ *
+ * It is different from the internal React useMemo in the following aspects:
+ * - it only stores the last evaluated result
+ * - it uses a deep equality check to determine if dependencies have changed
+ *
+ * Inspired by apollo-client's useDeepMemo
+ *
+ * @param fn the function to be executed and
+ * @param dependencies an array of dependencies
+ */
+
+
+var useDeepMemo = function useDeepMemo(fn, dependencies) {
+  var ref = (0, react_1.useRef)();
+
+  if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
+    ref.current = {
+      dependencies: dependencies,
+      value: fn()
+    };
+  }
+
+  return ref.current.value;
+};
+
+exports.useDeepMemo = useDeepMemo;
+
+/***/ }),
+/* 63 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
+var React = __webpack_require__(0);
+
+var T = __webpack_require__(1);
+
+var i18n_1 = __webpack_require__(2);
+
+var Message_1 = __webpack_require__(12);
+
+var FixedSizeContainer_1 = __webpack_require__(17);
+/**
+ * @method isMissing
+ * @param {any} v
+ * @returns {boolean} true if the input value === null or undefined
+ */
+
+
+var isMissing = function isMissing(v) {
+  return v === null || v === undefined;
+};
+
+exports.isMissing = isMissing;
+/**
+ * @method misskingKeys
+ * @param {string[]} keys
+ * @param {object} target
+ * @returns {string[]} the keys of missing required props
+ */
+
+var missingKeys = function missingKeys(keys, target) {
+  return keys.filter(function (k) {
+    return (0, exports.isMissing)(target[k]);
+  });
+};
+
+exports.missingKeys = missingKeys;
+var propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  missingProps: T.arrayOf(T.string)
+};
+/**
+ * @method MissingPropsMessage
+ * @param {MissingPropsProps} props
+ * @returns {React.ReactElement}
+ */
+
+var MissingPropsMessage = function MissingPropsMessage(props) {
+  var width = props.width,
+      height = props.height,
+      missingProps = props.missingProps;
+  return React.createElement(Message_1.default, {
+    "data-test": "message",
+    width: width,
+    height: height,
+    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
+  });
+};
+
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
+
+/***/ }),
+/* 64 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
 
-    return React.createElement(SanitizedReactViz, Object.assign({
-      mode: mode,
-      width: width,
-      height: height
-    }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
-  };
 
-  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
-  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
-    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
-    theme: {}
-  }); // attach viz config
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
+var React = __webpack_require__(0);
 
-  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
+var styled_components_1 = __webpack_require__(4);
+
+var hocUtils_1 = __webpack_require__(23);
+
+var Cover = styled_components_1.default.div.withConfig({
+  displayName: "withEditModeCover__Cover",
+  componentId: "sc-1gsbnxb-0"
+})(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
+var Blocker = styled_components_1.default.div.attrs({
+  'data-splunk-visualization-version': "26.2.0 - 49b909915"
+}).withConfig({
+  displayName: "withEditModeCover__Blocker",
+  componentId: "sc-1gsbnxb-1"
+})(["position:relative;width:100%;height:100%;"]);
+/**
+ * HOC that renders a cover layer in edit mode
+ * @method withEditModeCover
+ * @param {ExtendedDashViz} Visualization
+ * @returns {ExtendedDashViz} Wrapper
+ */
+
+var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
+  var Wrapper = function Wrapper(props) {
+    var mode = props.mode;
+    var showEditCover = mode === 'edit' && !disableEditModeCover;
+    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
+      "data-test": "edit-mode-cover"
+    }));
+  };
+
+  (0, hocUtils_1.extendStaticWrapperProps)({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
 };
 
-exports.default = withDashboardViz;
+exports.default = withEditModeCover;
 
 /***/ }),
+/* 65 */
+/***/ (function(module, exports, __webpack_require__) {
 
-/***/ 38:
-/***/ (function(module, exports) {
+"use strict";
 
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
-/***/ }),
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-/***/ 39:
-/***/ (function(module, exports) {
+var React = __webpack_require__(0);
 
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
+var colorUtils_1 = __webpack_require__(15);
 
-/***/ }),
+var variables_1 = __webpack_require__(13);
 
-/***/ 4:
-/***/ (function(module, exports) {
+var IconPlaceholder_1 = __webpack_require__(37);
 
-module.exports = require("styled-components");
+var VizBehavior_1 = __webpack_require__(6);
 
-/***/ }),
+var hocUtils_1 = __webpack_require__(23);
 
-/***/ 40:
-/***/ (function(module, exports) {
+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;
 
-module.exports = require("@splunk/moment");
+  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);
 
-/***/ 41:
-/***/ (function(module, exports) {
+    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
+      });
+    }
 
-module.exports = require("@splunk/async-dynamic-options-evaluator");
+    return React.createElement(Visualization, Object.assign({}, props));
+  };
 
-/***/ }),
+  (0, hocUtils_1.extendStaticWrapperProps)({
+    Wrapper: Wrapper,
+    Visualization: Visualization
+  });
+  return Wrapper;
+};
+
+exports.default = withPlaceholder;
 
-/***/ 42:
+/***/ }),
+/* 66 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
+var _slicedToArray = __webpack_require__(7);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
-/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
 
-var T = __webpack_require__(0);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
-
-
-exports.INITIAL_WIDTH = 250;
-exports.INITIAL_HEIGHT = 250;
-/**
- * A Splunk visualization
- */
-
-var SplunkVisualization = function SplunkVisualization() {
-  _classCallCheck(this, SplunkVisualization);
-};
+var dataUtils_1 = __webpack_require__(14);
 
-SplunkVisualization.propTypes = {
-  /**
-   * display mode
-   */
-  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+var usePrevious_1 = __webpack_require__(33);
 
-  /**
-   * width in pixel or string, defaults to 100%
-   */
-  width: T.oneOfType([T.string, T.number]).isRequired,
+var useGetXAndYFields_1 = __webpack_require__(67);
 
-  /**
-   * height in pixel or string
-   */
-  height: T.oneOfType([T.string, T.number]).isRequired,
+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;
+    }
 
-  /**
-   * visualization context used for dynamic option evaluation
-   */
-  context: T.object,
+    if (!isDownsamplingEnabled) {
+      setDownsampledDataSources(dataSources);
+      return;
+    }
 
-  /**
-   * visualization formatting options
-   */
-  options: T.object,
+    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
 
-  /**
-   * A callback to update formatting options
-   */
-  onOptionsChange: T.func,
 
-  /**
-   * datasource state which include data and request params, object key indicate the datasource type.
-   */
-  dataSources: T.objectOf(T.shape({
-    /**
-     * current request params
-     */
-    requestParams: T.object,
+    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;
+};
 
-    /**
-     * current dataset
-     */
-    data: T.shape({
-      fields: T.array,
-      columns: T.array
-    }),
+exports.default = useDownsampleDataSources;
 
-    /**
-     * error
-     */
-    error: T.shape({
-      level: T.string,
-      message: T.string
-    }),
+/***/ }),
+/* 67 */
+/***/ (function(module, exports, __webpack_require__) {
 
-    /**
-     * meta data that came with the dataset
-     */
-    meta: T.object
-  })),
+"use strict";
 
-  /**
-   * A callback to trigger event
-   */
-  onEventTrigger: T.func,
 
-  /**
-   * Inform viz if there are handlers listening to events
-   */
-  hasEventHandlers: T.bool,
+var _toConsumableArray = __webpack_require__(8);
 
-  /**
-   * A callback to communicate computed props to a consumer
-   */
-  onComputedProps: T.func,
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-  /**
-   * A callback to obtain visualization api
-   */
-  vizActionHandlerRef: T.func,
-  loading: T.bool,
-  theme: T.object,
+var react_1 = __webpack_require__(0);
 
-  /**
-   * A callback to request new data with updated request params
-   */
-  onRequestParamsChange: T.func
-};
+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.
  */
 
-SplunkVisualization.defaultProps = {
-  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
-  width: '100%',
-  height: exports.INITIAL_HEIGHT,
-  dataSources: {},
-  onEventTrigger: function onEventTrigger() {
-    return {};
-  },
-  mode: 'view',
-  hasEventHandlers: false,
-  options: {},
-  context: {},
-  onOptionsChange: function onOptionsChange() {
-    return {};
-  },
-  vizActionHandlerRef: function vizActionHandlerRef() {
-    return new VizActionHandler_1.DefaultVizActionHandler();
-  },
-  onComputedProps: function onComputedProps() {
-    return {};
-  },
-  loading: false,
-  onRequestParamsChange: lodash_1.noop
-};
-exports.default = SplunkVisualization;
 
-/***/ }),
+var useGetXAndYFields = function useGetXAndYFields(_ref) {
+  var shouldEvaluateDSL = _ref.shouldEvaluateDSL,
+      options = _ref.options,
+      context = _ref.context,
+      dataSources = _ref.dataSources;
 
-/***/ 43:
-/***/ (function(module, exports, __webpack_require__) {
+  var _ref2 = (0, react_1.useMemo)(function () {
+    var _a, _b, _c;
 
-"use strict";
+    if (!shouldEvaluateDSL) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
 
+    if (!((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.length)) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
 
-var _classCallCheck = __webpack_require__(9);
+    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 xAndYFieldsWithTypes = (0, react_1.useMemo)(function () {
+    try {
+      if (!dataSourcesWithOnlyOnePoint || !dataFrameWithOnlyOnePoint) {
+        return options;
+      }
 
-var _createClass = __webpack_require__(18);
+      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;
+      }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultVizActionHandler = void 0;
+      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 DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
+      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;
 
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {// noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
+      return {
+        xField: xField,
+        yFields: [].concat(_toConsumableArray(yFields), _toConsumableArray(y2Fields)),
+        fieldTypes: fieldTypes
+      };
+    } catch (e) {
+      return {
+        xField: undefined,
+        yFields: [],
+        fieldTypes: []
+      };
     }
-  }]);
-
-  return DefaultVizActionHandler;
-}();
+  }, [options, context, dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint]);
+  return xAndYFieldsWithTypes;
+};
 
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
+exports.default = useGetXAndYFields;
 
 /***/ }),
-
-/***/ 44:
+/* 68 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1842,178 +2716,449 @@ exports.DefaultVizActionHandler = DefaultVizActionHandler;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useDeepMemo = void 0;
+exports.getFeatureFlag = void 0;
 
-var react_1 = __webpack_require__(1);
+var FeatureFlags_1 = __webpack_require__(69);
 
-var lodash_1 = __webpack_require__(3);
-/**
- * This hook evaluates and stores the result of a passed function and only
- * re-evaluates the function when passed dependencies change.
- *
- * It is different from the internal React useMemo in the following aspects:
- * - it only stores the last evaluated result
- * - it uses a deep equality check to determine if dependencies have changed
- *
- * Inspired by apollo-client's useDeepMemo
- *
- * @param fn the function to be executed and
- * @param dependencies an array of dependencies
- */
+var getFeatureFlag = function getFeatureFlag(context, flagName) {
+  // look for feature flag in context first
+  if (context && Object.keys(context).find(function (key) {
+    return key === flagName;
+  })) {
+    return context[flagName];
+  } // fall back to defaults
 
 
-var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = (0, react_1.useRef)();
+  if (Object.keys(FeatureFlags_1.default).find(function (key) {
+    return key === flagName;
+  })) {
+    return FeatureFlags_1.default[flagName];
+  } // fall back to false
 
-  if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
-    ref.current = {
-      dependencies: dependencies,
-      value: fn()
-    };
-  }
 
-  return ref.current.value;
+  return false;
 };
 
-exports.useDeepMemo = useDeepMemo;
+exports.getFeatureFlag = getFeatureFlag;
+
+/***/ }),
+/* 69 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/FeatureFlags");
 
 /***/ }),
+/* 70 */,
+/* 71 */,
+/* 72 */,
+/* 73 */,
+/* 74 */
+/***/ (function(module, exports) {
 
-/***/ 45:
+module.exports = require("@splunk/visualization-icons");
+
+/***/ }),
+/* 75 */,
+/* 76 */,
+/* 77 */,
+/* 78 */,
+/* 79 */,
+/* 80 */,
+/* 81 */,
+/* 82 */,
+/* 83 */,
+/* 84 */,
+/* 85 */,
+/* 86 */,
+/* 87 */,
+/* 88 */,
+/* 89 */,
+/* 90 */,
+/* 91 */,
+/* 92 */,
+/* 93 */,
+/* 94 */,
+/* 95 */,
+/* 96 */,
+/* 97 */,
+/* 98 */,
+/* 99 */,
+/* 100 */,
+/* 101 */,
+/* 102 */,
+/* 103 */,
+/* 104 */,
+/* 105 */,
+/* 106 */,
+/* 107 */,
+/* 108 */,
+/* 109 */,
+/* 110 */,
+/* 111 */,
+/* 112 */,
+/* 113 */,
+/* 114 */,
+/* 115 */,
+/* 116 */,
+/* 117 */,
+/* 118 */,
+/* 119 */,
+/* 120 */,
+/* 121 */,
+/* 122 */,
+/* 123 */,
+/* 124 */,
+/* 125 */,
+/* 126 */,
+/* 127 */,
+/* 128 */,
+/* 129 */,
+/* 130 */,
+/* 131 */,
+/* 132 */,
+/* 133 */,
+/* 134 */,
+/* 135 */,
+/* 136 */,
+/* 137 */,
+/* 138 */,
+/* 139 */,
+/* 140 */,
+/* 141 */,
+/* 142 */,
+/* 143 */,
+/* 144 */,
+/* 145 */,
+/* 146 */,
+/* 147 */,
+/* 148 */,
+/* 149 */,
+/* 150 */,
+/* 151 */,
+/* 152 */,
+/* 153 */,
+/* 154 */,
+/* 155 */,
+/* 156 */,
+/* 157 */,
+/* 158 */,
+/* 159 */,
+/* 160 */,
+/* 161 */,
+/* 162 */,
+/* 163 */,
+/* 164 */,
+/* 165 */,
+/* 166 */,
+/* 167 */,
+/* 168 */,
+/* 169 */,
+/* 170 */,
+/* 171 */,
+/* 172 */,
+/* 173 */,
+/* 174 */,
+/* 175 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "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.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+exports.config = exports.themes = exports.toImageDimensions = exports.shouldShowPlaceholder = void 0;
 
-var React = __webpack_require__(1);
+var lodash_1 = __webpack_require__(3);
 
-var T = __webpack_require__(0);
+var React = __webpack_require__(0);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var style_1 = __webpack_require__(18);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
-/**
- * @method isMissing
- * @param {any} v
- * @returns {boolean} true if the input value === null or undefined
- */
+var RemoteImage_1 = __webpack_require__(176);
 
+var styled_components_1 = __webpack_require__(4);
 
-var isMissing = function isMissing(v) {
-  return v === null || v === undefined;
+var T = __webpack_require__(1);
+
+var config_1 = __webpack_require__(244);
+
+exports.config = config_1.default;
+
+var withDashboardViz_1 = __webpack_require__(56);
+
+var ImageApi_1 = __webpack_require__(245);
+
+var useEffect = React.useEffect,
+    useRef = React.useRef;
+var validOptions = Object.keys(config_1.default.optionsSchema);
+var Container = styled_components_1.default.div.attrs(function () {
+  return {
+    'data-test': 'image-container'
+  };
+}).withConfig({
+  displayName: "Image__Container",
+  componentId: "kplb09-0"
+})(["position:relative;box-sizing:border-box;display:flex;justify-content:center;align-items:center;cursor:", ";", ";"], function (props) {
+  return props.onClick ? 'pointer' : 'inherit';
+}, function (props) {
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
+});
+
+var shouldShowPlaceholder = function shouldShowPlaceholder(dataSources, loading, options) {
+  if (options.src) {
+    return false;
+  }
+
+  return true;
 };
 
-exports.isMissing = isMissing;
-/**
- * @method misskingKeys
- * @param {string[]} keys
- * @param {object} target
- * @returns {string[]} the keys of missing required props
- */
+exports.shouldShowPlaceholder = shouldShowPlaceholder;
 
-var missingKeys = function missingKeys(keys, target) {
-  return keys.filter(function (k) {
-    return (0, exports.isMissing)(target[k]);
-  });
+var toImageDimensions = function toImageDimensions(props) {
+  if (props.shouldPreserveAspectRatio) {
+    return "\n            max-width: 100%;\n            max-height: 100%;\n            width: auto;\n            height: auto;\n        ";
+  }
+
+  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 };
 
-exports.missingKeys = missingKeys;
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  missingProps: T.arrayOf(T.string)
+exports.toImageDimensions = toImageDimensions;
+var StyledImage = styled_components_1.default.img.withConfig({
+  displayName: "Image__StyledImage",
+  componentId: "kplb09-1"
+})(["display:block;", ";"], function (props) {
+  return (0, exports.toImageDimensions)(props);
+});
+
+var computeVizProps = function computeVizProps(_a) {
+  var visualizationApiRef = _a.visualizationApiRef,
+      title = _a.title,
+      otherOptions = __rest(_a, ["visualizationApiRef", "title"]);
+
+  var options = (0, lodash_1.chain)(otherOptions).pick(validOptions).value();
+  return {
+    options: options,
+    title: title,
+    visualizationApiRef: visualizationApiRef
+  };
 };
-/**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
- */
 
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
+var ImageVisualization = function ImageVisualization(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      visualizationApiRef = _ref.visualizationApiRef,
+      options = _ref.options,
+      onImageClick = _ref.onImageClick;
+  var src = options.src,
+      preserveAspectRatio = options.preserveAspectRatio;
+  var remoteImage = useRef(null);
+  var api = useRef(new ImageApi_1.default({
+    options: {
+      src: src,
+      preserveAspectRatio: preserveAspectRatio
+    },
+    remoteImage: remoteImage
+  }));
+  var isRemote = (0, RemoteImage_1.isRemoteImage)(src);
+  useEffect(function () {
+    visualizationApiRef(api.current);
+    return function () {
+      visualizationApiRef(null);
+    };
+  }, []);
+  return React.createElement(Container, {
     width: width,
     height: height,
-    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
-  });
+    onClick: onImageClick
+  }, isRemote ? React.createElement(RemoteImage_1.default, {
+    imageURL: src,
+    title: title,
+    preserveAspectRatio: preserveAspectRatio,
+    width: width,
+    height: height,
+    ref: remoteImage
+  }) : React.createElement(StyledImage, {
+    "data-test": "image",
+    src: src,
+    shouldPreserveAspectRatio: preserveAspectRatio,
+    width: width,
+    height: height,
+    alt: (0, i18n_1._)(title),
+    onError: function onError(e) {
+      e.target.alt = (0, i18n_1._)('Image not found');
+    },
+    referrerPolicy: "no-referrer"
+  }));
 };
 
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
+var propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  options: T.object,
+  title: T.string,
+  visualizationApiRef: T.func,
+  onImageClick: T.func
+};
+var defaultProps = {
   width: '100%',
-  height: 250
+  height: undefined,
+  options: {},
+  title: '',
+  visualizationApiRef: lodash_1.noop,
+  onImageClick: lodash_1.noop
 };
-exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
+ImageVisualization.propTypes = propTypes;
+ImageVisualization.defaultProps = defaultProps;
+var Image = (0, withDashboardViz_1.default)({
+  ReactViz: ImageVisualization,
+  vizConfig: config_1.default,
+  useIconPlaceholder: exports.shouldShowPlaceholder,
+  computeVizProps: computeVizProps
+});
+var themes = null;
+exports.themes = themes;
+exports.default = Image;
 
 /***/ }),
+/* 176 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/RemoteImage");
 
-/***/ 46:
+/***/ }),
+/* 177 */,
+/* 178 */,
+/* 179 */,
+/* 180 */,
+/* 181 */,
+/* 182 */,
+/* 183 */,
+/* 184 */,
+/* 185 */,
+/* 186 */,
+/* 187 */,
+/* 188 */,
+/* 189 */,
+/* 190 */,
+/* 191 */,
+/* 192 */,
+/* 193 */,
+/* 194 */,
+/* 195 */,
+/* 196 */,
+/* 197 */,
+/* 198 */,
+/* 199 */,
+/* 200 */,
+/* 201 */,
+/* 202 */,
+/* 203 */,
+/* 204 */,
+/* 205 */,
+/* 206 */,
+/* 207 */,
+/* 208 */,
+/* 209 */,
+/* 210 */,
+/* 211 */,
+/* 212 */,
+/* 213 */,
+/* 214 */,
+/* 215 */,
+/* 216 */,
+/* 217 */,
+/* 218 */,
+/* 219 */,
+/* 220 */,
+/* 221 */,
+/* 222 */,
+/* 223 */,
+/* 224 */,
+/* 225 */,
+/* 226 */,
+/* 227 */,
+/* 228 */,
+/* 229 */,
+/* 230 */,
+/* 231 */,
+/* 232 */,
+/* 233 */,
+/* 234 */,
+/* 235 */,
+/* 236 */,
+/* 237 */,
+/* 238 */,
+/* 239 */,
+/* 240 */,
+/* 241 */,
+/* 242 */,
+/* 243 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
 
-var React = __webpack_require__(1);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
 
-var styled_components_1 = __webpack_require__(4);
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
 
-var hocUtils_1 = __webpack_require__(15);
+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);
+  }
+};
 
-var Cover = styled_components_1.default.div.withConfig({
-  displayName: "withEditModeCover__Cover",
-  componentId: "sc-1gsbnxb-0"
-})(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
-var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "26.1.1 - b6df0a015"
-}).withConfig({
-  displayName: "withEditModeCover__Blocker",
-  componentId: "sc-1gsbnxb-1"
-})(["position:relative;width:100%;height:100%;"]);
-/**
- * HOC that renders a cover layer in edit mode
- * @method withEditModeCover
- * @param {ExtendedDashViz} Visualization
- * @returns {ExtendedDashViz} Wrapper
- */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
-  var Wrapper = function Wrapper(props) {
-    var mode = props.mode;
-    var showEditCover = mode === 'edit' && !disableEditModeCover;
-    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
-      "data-test": "edit-mode-cover"
-    }));
-  };
+__exportStar(__webpack_require__(175), exports);
 
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
+var Image_1 = __webpack_require__(175);
 
-exports.default = withEditModeCover;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return Image_1.default;
+  }
+});
 
 /***/ }),
-
-/***/ 47:
+/* 244 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2023,127 +3168,154 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
-
-var colorUtils_1 = __webpack_require__(12);
-
-var variables_1 = __webpack_require__(11);
+var i18n_1 = __webpack_require__(2);
 
-var IconPlaceholder_1 = __webpack_require__(32);
+var visualization_icons_1 = __webpack_require__(74);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var hocUtils_1 = __webpack_require__(15);
-
-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
-      });
-    }
+var VizCategory_1 = __webpack_require__(22);
 
-    return React.createElement(Visualization, Object.assign({}, props));
-  };
+var configUtils_1 = __webpack_require__(27);
 
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
+var dataContract = {
+  requiredDataSources: [],
+  optionalDataSources: [// Note: SCP-14090 disable ui for optional datasources. We may need to add it back later
+    // {
+    //     name: 'annotation',
+    //     description: 'DataSource that populate event annotations',
+    // },
+  ],
+  initialRequestParams: {}
 };
+var size = {
+  initialWidth: 300,
+  initialHeight: 300
+};
+var defaultContext = {};
+var optionsSchema = {
+  src: {
+    description: 'URL of an image file. All browser-supported image formats are acceptable.',
+    type: 'string'
+  },
+  preserveAspectRatio: {
+    default: false,
+    description: 'Set to true to maintain the aspect ratio of an image when the screen is resized.',
+    type: 'boolean'
+  }
+};
+var editorConfig = [{
+  label: (0, i18n_1._)('Image content'),
+  layout: [[{
+    label: (0, i18n_1._)('Image file'),
+    option: 'src',
+    editor: 'editor.image'
+  }], [{
+    label: (0, i18n_1._)('Preserve aspect ratio'),
+    option: 'preserveAspectRatio',
+    editor: 'editor.checkbox',
+    showEditor: function showEditor(_ref) {
+      var options = _ref.options;
+      return !!options.src;
+    }
+  }]]
+}];
+var themes = {};
+/**
+ * visualization configuration
+ */
 
-exports.default = withPlaceholder;
-
-/***/ }),
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.image',
 
-/***/ 52:
-/***/ (function(module, exports) {
+  /**
+   * viz name
+   */
+  name: (0, i18n_1._)('Image'),
+  category: VizCategory_1.VizCategory.MISC,
 
-module.exports = require("@splunk/visualization-icons");
+  /**
+   * viz icon
+   */
+  icon: visualization_icons_1.Image,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: optionsSchema,
+  editorConfig: editorConfig,
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.PLACEHOLDER, VizBehavior_1.VizBehavior.EVENTS],
+  themes: themes,
+  events: {
+    'image.click': {
+      description: 'triggered when user clicks on the image'
+    }
+  }
+};
+exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
-
-/***/ 6:
+/* 245 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _classCallCheck = __webpack_require__(10);
+
+var _createClass = __webpack_require__(25);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VizBehavior = void 0;
-var VizBehavior;
-
-(function (VizBehavior) {
-  /**
-   * Dynamic Options Behavior.
-   * This allows visualization options to be powered by data
-   *
-   * **Example**
-   *
-   * sparklineValues: ">primary|seriesByIndex(0)"
-   * would configure sparklineValues with an array of data points
-   * coming from the first series in the primary datasource
-   *
-   */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
-   */
 
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
+var lodash_1 = __webpack_require__(3);
 
-/***/ }),
+var RemoteImage_1 = __webpack_require__(176);
+/**
+ * Image Api
+ */
 
-/***/ 7:
-/***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+var ImageApi = /*#__PURE__*/function () {
+  function ImageApi(viz) {
+    _classCallCheck(this, ImageApi);
 
-/***/ }),
+    this.viz = viz;
+  }
+  /**
+   * put focus on the visualization
+   */
+  // eslint-disable-next-line class-methods-use-this
 
-/***/ 8:
-/***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+  _createClass(ImageApi, [{
+    key: "focus",
+    value: function focus() {}
+    /**
+     * return snapshot of that includes inlined image
+     */
 
-/***/ }),
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      var srcFromOptions = (0, lodash_1.get)(this.viz.options, 'src', '');
+      var isRemote = (0, RemoteImage_1.isRemoteImage)(srcFromOptions);
+      return {
+        options: Object.assign(Object.assign({}, this.viz.options), {
+          src: isRemote && this.viz.remoteImage ? (0, lodash_1.get)(this.viz.remoteImage, ['current', 'state', 'imageDataURI'], '') : srcFromOptions
+        })
+      };
+    }
+  }]);
 
-/***/ 9:
-/***/ (function(module, exports) {
+  return ImageApi;
+}();
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+exports.default = ImageApi;
 
 /***/ })
-
-/******/ });
+/******/ ]);
 //# sourceMappingURL=Image.js.map