@splunk/visualizations 26.1.2 → 26.2.0

package/Markdown.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 423);
+/******/ 	return __webpack_require__(__webpack_require__.s = 445);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,78 +95,583 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
+
+/***/ }),
+
+/***/ 106:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
 
 /***/ 11:
 /***/ (function(module, exports) {
 
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 12:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/Message");
+
+/***/ }),
+
+/***/ 13:
+/***/ (function(module, exports) {
+
 module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 110:
+/***/ 133:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Paragraph");
 
 /***/ }),
 
-/***/ 12:
-/***/ (function(module, exports) {
+/***/ 14:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
+
+var numberUtils_1 = __webpack_require__(11);
+
+var interfaces_1 = __webpack_require__(40); // TODO: utilize this fn in ParallelCoordinates
+
+
+var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
+  if (!columns || !columns[0] || !columns[0].length) return [];
+  var data = [];
+
+  var _loop = function _loop(i) {
+    var newObj = {};
+    fields.forEach(function (field, index) {
+      var fieldName = typeof field === 'string' ? field : field.name;
+
+      if (columns[index][i] === '') {
+        newObj[fieldName] = null;
+      } else {
+        newObj[fieldName] = columns[index][i];
+      }
+    });
+    data.push(newObj);
+  };
+
+  for (var i = 0; i < columns[0].length; i += 1) {
+    _loop(i);
+  }
+
+  return data;
+};
+
+exports.convertToArrOfObjects = convertToArrOfObjects; // LTTB algorithm which can be used to downsample time series data while striving to maintain
+// the spikes and overall shape of the chart
+// Copied from https://github.com/sveinn-steinarsson/flot-downsample/blob/0815010016fc94b1bbc6a010afb8aad13ada6d0d/jquery.flot.downsample.js
+// Modifications include:
+// 1) Convert to modern JavaScript(use const, let, and use array.push to push to last element of array)
+// 2) Convert to camel case
+// 3) Convert to TS and also return the indices of the points that are in the downsampled result.
+// 4) Add a new parameter preferredDownsampleIndices that correspond to the indices of points
+// that should be used in case of a tie of the max area in a bucket
+
+var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, threshold, preferredDownsampleIndices) {
+  var dataLength = data.length;
+  var downsampledIndices = [];
+
+  if (threshold >= dataLength || threshold === 0) {
+    var allIndices = data.map(function (values, index) {
+      return index;
+    });
+    return {
+      downsampledData: data,
+      downsampledIndices: allIndices
+    }; // Nothing to do
+  }
+
+  var sampled = [];
+  var sampledIndex = 0; // Bucket size. Leave room for start and end data points
+
+  var every = (dataLength - 2) / (threshold - 2);
+  var a = 0; // Initially a is the first point in the triangle
+
+  var maxAreaPoint;
+  var maxArea;
+  var area;
+  var nextA;
+  sampled.push(data[a]); // Always add the first point
+
+  downsampledIndices.push(0); // eslint-disable-next-line no-plusplus
+
+  for (var i = 0; i < threshold - 2; i++) {
+    // Calculate point average for next bucket (containing c)
+    var avgX = 0;
+    var avgY = 0;
+    var avgRangeStart = Math.floor((i + 1) * every) + 1;
+    var avgRangeEnd = Math.floor((i + 2) * every) + 1;
+    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    var avgRangeLength = avgRangeEnd - avgRangeStart; // eslint-disable-next-line no-plusplus
+
+    for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
+      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
+
+      avgY += data[avgRangeStart][1] * 1;
+    }
+
+    avgX /= avgRangeLength;
+    avgY /= avgRangeLength; // Get the range for this bucket
+
+    var rangeOffs = Math.floor((i + 0) * every) + 1;
+    var rangeTo = Math.floor((i + 1) * every) + 1; // Point a
+
+    var pointAX = Number(data[a][0]); // Enforce Number (value may be Date)
+
+    var pointAY = data[a][1] * 1; // eslint-disable-next-line no-multi-assign
+
+    maxArea = area = -1;
+    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
+
+    for (; rangeOffs < rangeTo; rangeOffs++) {
+      // Calculate triangle area over three buckets
+      area = Math.abs((pointAX - avgX) * (data[rangeOffs][1] - pointAY) - (pointAX - Number(data[rangeOffs][0])) * (avgY - pointAY)) * 0.5; // Modification: try to downsample the least amount of points possible when there are multiple series
+      // If all points in a bucket have the same area, prioritize the one with an x index
+      // that also existed from another series so we don't add another point unnecessarily.
+      // By default LTTB picks the leftmost point in the bucket
+
+      if (area > maxArea || area === maxArea && preferredDownsampleIndices.has(rangeOffs)) {
+        maxArea = area;
+        maxAreaPoint = data[rangeOffs];
+        nextA = rangeOffs; // Next a is this b
+        // Modification: save the index of the point with the most area
+
+        maxAreaIndex = rangeOffs;
+      }
+    } // eslint-disable-next-line no-plusplus
+
+
+    sampled[sampledIndex++] = maxAreaPoint; // Pick this point from the bucket
+
+    downsampledIndices.push(maxAreaIndex);
+    a = nextA; // This a is the next a (chosen b)
+  } // eslint-disable-next-line no-plusplus
+
+
+  sampled[sampledIndex++] = data[dataLength - 1]; // Always add last
+
+  downsampledIndices.push(dataLength - 1);
+  return {
+    downsampledData: sampled,
+    downsampledIndices: downsampledIndices
+  };
+};
+/**
+ * Strictly coerces the entire column to numbers if it only consists of numeric strings or numbers. Also determines
+ * if at least one of the values in the column can be loosely coerced to a number.
+ * If the column cannot be strictly downsampled (if it contains nulls or non-numeric strings), returns an empty array and
+ * returns that it cannot downsample the column.
+ */
+
+
+var strictlyCoerceYColumn = function strictlyCoerceYColumn(column) {
+  // Splunk charting allows for numbers in formats such as negative hex that
+  // Number() does not support and also allows loose coercion of hex numbers (but not other formats)
+  // We want to identify columns which contain at least one value that can be loosely coerced
+  var canLooselyCoerceSomeValues = column.findIndex(function (value) {
+    return (0, numberUtils_1.startsWithNumber)("".concat(value));
+  }) >= 0; // If not all values in column can be strictly coerced to a number, we do not downsample
+
+  var coercedColumn = [];
+  var canDownsampleColumn = !column.some(function (value) {
+    var coercedValue = Number(value); // if it can't be parsed or isn't safe, fail
+
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== 'string' && typeof value !== 'number') {
+      return true;
+    } // save value and continue to next
+
+
+    coercedColumn.push(coercedValue);
+    return false;
+  });
+  return {
+    canDownsampleColumn: canDownsampleColumn,
+    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
+    coercedColumn: canDownsampleColumn ? coercedColumn : []
+  };
+};
+/**
+ * Tries to coerce the x-column to numbers or dates, if it is eligible for downsampling.
+ * Only strictly increasing x-columns are eligible for downsampling.
+ * If the column is not eligible for downsampling, returns an empty array.
+ */
+
+
+var strictlyCoerceXColumn = function strictlyCoerceXColumn(column, fieldType) {
+  if (fieldType === 'number') {
+    var coercedXColumn = column.map(function (xValue) {
+      return Number(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
+      return coercedXColumn;
+    }
+  } else if (fieldType === 'time') {
+    var _coercedXColumn = column.map(function (xValue) {
+      return new Date(xValue);
+    });
+
+    if (isColumnStrictlyIncreasing(_coercedXColumn, fieldType)) {
+      return _coercedXColumn;
+    }
+  }
+
+  return [];
+};
+
+var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
+  var vizConfig = _ref.vizConfig;
+
+  var _a;
+
+  return (_a = vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(interfaces_1.VizBehavior.DOWNSAMPLING);
+};
+
+exports.isDownsamplingEnabledForViz = isDownsamplingEnabledForViz;
+
+var calculateThresholdOnRangeSelect = function calculateThresholdOnRangeSelect(_ref2) {
+  var firstIndex = _ref2.firstIndex,
+      lastIndex = _ref2.lastIndex,
+      dataSources = _ref2.dataSources,
+      width = _ref2.width;
+
+  var _a, _b, _c;
+
+  var window = lastIndex - firstIndex + 1;
+  var ratio = Math.round(Number(((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns[0]) === null || _c === void 0 ? void 0 : _c.length) / window) * 10) / 10;
+  return Math.round(ratio * Number(width));
+};
+
+exports.calculateThresholdOnRangeSelect = calculateThresholdOnRangeSelect;
+/**
+ * Calculates the downsampling threshold based on the range selection. If search zoom is enabled or there is no selection,
+ * then returns the width of the visualization.
+ *
+ * Otherwise calculates the threshold based on the ratio of the window selected compared to the size of the non-downsampled
+ * data sources. Returns null if the chart event's dataset does not match the passed in primary data source or if the chart is zoomed
+ * in for a categorical chart.
+ */
+
+var calculateDownsamplingThreshold = function calculateDownsamplingThreshold(_ref3) {
+  var enableSearchZoom = _ref3.enableSearchZoom,
+      dataSources = _ref3.dataSources,
+      selectChartEvent = _ref3.selectChartEvent,
+      width = _ref3.width,
+      xField = _ref3.xField,
+      y2Fields = _ref3.y2Fields;
+
+  var _a, _b, _c;
+
+  if (enableSearchZoom || !selectChartEvent) {
+    return Number(width);
+  }
+
+  var primaryDataSource = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary;
+
+  if (!primaryDataSource) {
+    return null;
+  }
+
+  var startXIndex = selectChartEvent.startXIndex,
+      endXIndex = selectChartEvent.endXIndex,
+      currentTarget = selectChartEvent.currentTarget;
+
+  try {
+    var xFieldIndex = (_a = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _a === void 0 ? void 0 : _a.fields.findIndex(function (field) {
+      return field.name === xField;
+    });
+    var downsampledXFieldIndex = (_b = currentTarget.dataSet) === null || _b === void 0 ? void 0 : _b.fields.findIndex(function (field) {
+      return field === xField;
+    });
+
+    if (xFieldIndex === -1 || downsampledXFieldIndex === -1) {
+      return null;
+    }
+
+    var fullSeries = (_c = primaryDataSource === null || primaryDataSource === void 0 ? void 0 : primaryDataSource.data) === null || _c === void 0 ? void 0 : _c.columns[xFieldIndex];
+    var downsampledSeries = currentTarget.dataSet.seriesList[downsampledXFieldIndex];
+    var firstIndex = fullSeries.findIndex(function (x) {
+      return downsampledSeries[startXIndex] === x;
+    });
+    var lastIndex = fullSeries.findIndex(function (x) {
+      return downsampledSeries[endXIndex] === x;
+    }); // For charts with categorical x-axis (charts with an xField that isn't _time), do not support
+    // re-calculating downsampling threshold if the chart is zoomed in until SPL-259458 is fixed
+    // Also do not support re-calculating downsampling threshold for zoomed-in charts with y2
+    // until SPL-259611 is fixed
+
+    if (xField !== '_time' || (y2Fields === null || y2Fields === void 0 ? void 0 : y2Fields.length)) {
+      return firstIndex === 0 && lastIndex === fullSeries.length - 1 ? width : null;
+    }
+
+    if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
+      return (0, exports.calculateThresholdOnRangeSelect)({
+        firstIndex: firstIndex,
+        lastIndex: lastIndex,
+        dataSources: dataSources,
+        width: width
+      });
+    }
+  } catch (e) {
+    console.error('Error occurred while setting downsample threshold on range select event', e);
+  }
+
+  return null;
+};
+
+exports.calculateDownsamplingThreshold = calculateDownsamplingThreshold;
+
+var isColumnStrictlyIncreasing = function isColumnStrictlyIncreasing(column, fieldType) {
+  return column.every(function (value, index) {
+    if (fieldType === 'number') {
+      if (Number.isNaN(value)) {
+        return false;
+      }
+    }
+
+    if (fieldType === 'time') {
+      if (Number.isNaN(value.getTime())) {
+        return false;
+      }
+    }
+
+    if (index === 0) {
+      return true;
+    }
+
+    return value > column[index - 1];
+  });
+};
+/**
+ * Verifies that all of the columns that are displayed in a chart can be downsampled. Valid columns that can be
+ * displayed are those that contain at least one number. We can only downsample columns that only consist of numbers.
+ *
+ * If all columns can be downsampled, returns the x column coerced to time/number and y columns coerced to numbers.
+ * If not all columns can be downsampled, then returns empty arrays for both x and y
+ */
+
+
+var tryToCoerceAllDisplayedFields = function tryToCoerceAllDisplayedFields(ds, xField, yFields, fieldTypes) {
+  var xColumn = [];
+  var yColumns = [];
+  var canDownsample = !ds.data.fields.some(function (field, index) {
+    var _a, _b;
+
+    var fieldName = (_a = field.name) !== null && _a !== void 0 ? _a : field;
+    var fieldType = (_b = fieldTypes[index]) !== null && _b !== void 0 ? _b : 'unknown';
+    var column = ds.data.columns[index];
+    var hasDisplayedColumnThatCantBeDownsampled = false;
+
+    if (fieldName === xField) {
+      xColumn = strictlyCoerceXColumn(column, fieldType);
+    } else if (yFields.has(fieldName)) {
+      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index]),
+          coercedColumn = _strictlyCoerceYColum.coercedColumn,
+          canLooselyCoerceSomeValues = _strictlyCoerceYColum.canLooselyCoerceSomeValues,
+          canDownsampleColumn = _strictlyCoerceYColum.canDownsampleColumn; // do not perform downsampling if a column can possibly be displayed but cannot
+      // be downsampled using LTTB
+
+
+      hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
+
+      if (hasDisplayedColumnThatCantBeDownsampled) {
+        return true;
+      }
+
+      if (canDownsampleColumn) {
+        yColumns.push(coercedColumn);
+      }
+    }
+
+    return false;
+  });
+
+  if (canDownsample) {
+    return {
+      xColumn: xColumn,
+      yColumns: yColumns
+    };
+  }
+
+  return {
+    xColumn: [],
+    yColumns: []
+  };
+};
+
+var pickIndicesFromDataSource = function pickIndicesFromDataSource(ds, indices) {
+  var sortedIndices = Array.from(indices).sort(function (a, b) {
+    return a - b;
+  });
+  var slicedColumns = [];
+  ds.data.columns.forEach(function (column) {
+    var slicedColumn = [];
+    sortedIndices.forEach(function (index) {
+      slicedColumn.push(column[index]);
+    });
+    slicedColumns.push(slicedColumn);
+  }); // update data columns with downsampled columns
+
+  return Object.assign(Object.assign({}, ds), {
+    data: Object.assign(Object.assign({}, ds.data), {
+      columns: slicedColumns
+    })
+  });
+};
+
+var downsampleDataSources = function downsampleDataSources(_ref4) {
+  var dataSources = _ref4.dataSources,
+      threshold = _ref4.threshold,
+      options = _ref4.options;
+
+  var _a, _b, _c;
+
+  var primaryDS = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary; // only downsample time series when number of data points are over threshold
+
+  var numPoints = (_c = (_b = (_a = primaryDS === null || primaryDS === void 0 ? void 0 : primaryDS.data) === null || _a === void 0 ? void 0 : _a.columns[0]) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+
+  if (Number.isNaN(threshold) || numPoints <= threshold || threshold < 2) {
+    return dataSources;
+  }
+
+  var xField = options.xField,
+      yFields = options.yFields,
+      fieldTypes = options.fieldTypes;
+
+  if (!xField || !(yFields === null || yFields === void 0 ? void 0 : yFields.length) || !(fieldTypes === null || fieldTypes === void 0 ? void 0 : fieldTypes.length)) {
+    return dataSources;
+  }
+
+  var nonInternalYFields = new Set(yFields.filter(function (yField) {
+    return !yField.startsWith('_');
+  }));
+  var maxPointsInDownsample = Math.min(nonInternalYFields.size * threshold, numPoints); // Do not try to downsample if there are too many downsampled pts
+  // At the worst case, each series has non-overlapping downsampled pts
+  // which will mean that all points will be included in the downsampled result
+  // This will just lead to additional overhead due to coercing each
+  // x and y field to number
+
+  if (maxPointsInDownsample >= numPoints) {
+    return dataSources;
+  }
+
+  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes),
+      xColumn = _tryToCoerceAllDispla.xColumn,
+      yColumns = _tryToCoerceAllDispla.yColumns;
+
+  if (!yColumns.length || !xColumn.length) {
+    return dataSources;
+  }
+
+  var downsampledDataSources = Object.assign({}, dataSources);
+  var downsampledIndices = new Set();
+  yColumns.forEach(function (yColumn, columnIndex) {
+    // perform LTTB downsampling for current series, LTTB takes an [x, y] pair
+    var xyPair = yColumn.map(function (yValue, index) {
+      return [xColumn[index], yValue];
+    });
+
+    try {
+      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
+          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
+
+      downsampledIndicesForSeries.forEach(function (downsampleIndex) {
+        return downsampledIndices.add(downsampleIndex);
+      });
+    } catch (e) {
+      console.error("Error occurred while downsampling column ".concat(columnIndex), e);
+    }
+  }); // update data columns with downsampled columns
+
+  downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
+  return downsampledDataSources;
+};
+
+exports.downsampleDataSources = downsampleDataSources;
 
 /***/ }),
 
-/***/ 122:
+/***/ 144:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Markdown");
 
 /***/ }),
 
-/***/ 125:
+/***/ 147:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Heading");
 
 /***/ }),
 
-/***/ 13:
+/***/ 15:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/colorUtils");
+
+/***/ }),
+
+/***/ 16:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+
+/***/ 17:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _slicedToArray = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(19);
+var style_1 = __webpack_require__(18);
 
-var style_1 = __webpack_require__(14);
+var colorUtils_1 = __webpack_require__(15);
 
-var colorUtils_1 = __webpack_require__(12);
+var SizeAwareWrapper_1 = __webpack_require__(26);
 
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
@@ -212,6 +717,20 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     var width = props.width,
         height = props.height,
         backgroundColor = props.backgroundColor;
+    var cachedHandleResize = React.useCallback(function (w, h) {
+      setContainerWidth(w);
+      setContainerHeight(h);
+    }, []);
+
+    var _React$useState = React.useState(Number(props.width)),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        containerWidth = _React$useState2[0],
+        setContainerWidth = _React$useState2[1];
+
+    var _React$useState3 = React.useState(Number(props.height)),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        containerHeight = _React$useState4[0],
+        setContainerHeight = _React$useState4[1];
 
     if (!height) {
       return React.createElement(Item, {
@@ -223,18 +742,18 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.1.2 - 9c7479612",
+      "data-splunk-visualization-version": "26.2.0 - 49b909915",
       width: width,
       height: height,
       backgroundColor: backgroundColor
-    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
-      var newWidth = _ref3.width,
-          newHeight = _ref3.height;
-      return React.createElement(Viz, Object.assign({}, props, {
-        width: newWidth,
-        height: newHeight
-      }));
-    })));
+    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, {
+      width: width,
+      height: height,
+      onResize: cachedHandleResize
+    }), React.createElement(Viz, Object.assign({}, props, {
+      width: containerWidth,
+      height: containerHeight
+    }))));
   };
 
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
@@ -245,95 +764,55 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 14:
+/***/ 18:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/style");
 
 /***/ }),
 
-/***/ 15:
+/***/ 184:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _taggedTemplateLiteral = __webpack_require__(81);
+
+var _templateObject;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extendStaticWrapperProps = void 0;
-/**
- * @method extendStaticWrapperProps
- * @param {Object} props
- * @param {DashboardVizType} props.Wrapper
- * @param {DashboardVizType} props.Visualization
- */
-
-var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
-  var Wrapper = _ref.Wrapper,
-      Visualization = _ref.Visualization;
-  var extendProperties = ['propTypes', 'defaultProps', 'config'];
-  extendProperties.forEach(function (prop) {
-    if (Visualization[prop]) {
-      // eslint-disable-next-line no-param-reassign
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
-
-exports.extendStaticWrapperProps = extendStaticWrapperProps;
-
-/***/ }),
-
-/***/ 16:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
-
-/***/ }),
-
-/***/ 162:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _taggedTemplateLiteral = __webpack_require__(59);
-
-var _templateObject;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getFontMap = exports.config = exports.themes = exports.computeVizProps = exports.FONT_SIZES = void 0;
+exports.getFontMap = exports.config = exports.themes = exports.computeVizProps = exports.FONT_SIZES = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var types_1 = __webpack_require__(83);
+var types_1 = __webpack_require__(106);
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var style_1 = __webpack_require__(14);
+var style_1 = __webpack_require__(18);
 
-var Markdown_1 = __webpack_require__(122);
+var Markdown_1 = __webpack_require__(144);
 
 var styled_components_1 = __webpack_require__(4);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
-var themes_1 = __webpack_require__(60);
+var themes_1 = __webpack_require__(82);
 
-var Heading_1 = __webpack_require__(125);
+var Heading_1 = __webpack_require__(147);
 
-var Paragraph_1 = __webpack_require__(110);
+var Paragraph_1 = __webpack_require__(133);
 
-var List_1 = __webpack_require__(424);
+var List_1 = __webpack_require__(446);
 
-var Code_1 = __webpack_require__(425);
+var Code_1 = __webpack_require__(447);
 
-var withDashboardViz_1 = __webpack_require__(37);
+var withDashboardViz_1 = __webpack_require__(56);
 
-var config_1 = __webpack_require__(426);
+var config_1 = __webpack_require__(448);
 
 exports.config = config_1.default; // map of valid font sizes with elements' respective pixel sizes
 
@@ -610,35 +1089,151 @@ exports.default = Markdown;
 
 /***/ }),
 
-/***/ 17:
+/***/ 19:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.validSegmentationModes = ['none', 'inner'];
+exports.validOutputModes = ['json_cols', 'json'];
+
+/***/ }),
+
+/***/ 2:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 18:
+/***/ 21:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _classCallCheck = __webpack_require__(10);
+
+var _createClass = __webpack_require__(25);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultVizActionHandler = void 0;
+
+var DefaultVizActionHandler = /*#__PURE__*/function () {
+  function DefaultVizActionHandler() {
+    _classCallCheck(this, DefaultVizActionHandler);
+  }
+
+  _createClass(DefaultVizActionHandler, [{
+    key: "focus",
+    value: function focus() {// noop
+    }
+  }, {
+    key: "snapshot",
+    value: function snapshot() {
+      return null; // noop
+    }
+  }]);
+
+  return DefaultVizActionHandler;
+}();
+
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
+
+/***/ }),
+
+/***/ 22:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VizCategory = void 0;
+var VizCategory;
+
+(function (VizCategory) {
+  VizCategory["SINGLE_VALUE"] = "Single Value";
+  VizCategory["TRENDS"] = "Trends";
+  VizCategory["COMPARISONS"] = "Comparisons";
+  VizCategory["TABLE"] = "Table";
+  VizCategory["GAUGE"] = "Gauge";
+  VizCategory["DISTRIBUTIONS"] = "Distributions";
+  VizCategory["CHOROPLETH"] = "Choropleth Maps";
+  VizCategory["SHAPES"] = "Shapes";
+  VizCategory["MISC"] = "misc";
+  VizCategory["FLOW"] = "Flow";
+  VizCategory["CORRELATION"] = "Correlation";
+  VizCategory["SPATIAL"] = "Spatial";
+})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
+
+/***/ }),
+
+/***/ 23:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extendStaticWrapperProps = void 0;
+/**
+ * @method extendStaticWrapperProps
+ * @param {Object} props
+ * @param {DashboardVizType} props.Wrapper
+ * @param {DashboardVizType} props.Visualization
+ */
+
+var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
+  var Wrapper = _ref.Wrapper,
+      Visualization = _ref.Visualization;
+  var extendProperties = ['propTypes', 'defaultProps', 'config'];
+  extendProperties.forEach(function (prop) {
+    if (Visualization[prop]) {
+      // eslint-disable-next-line no-param-reassign
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
+};
+
+exports.extendStaticWrapperProps = extendStaticWrapperProps;
+
+/***/ }),
+
+/***/ 24:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/createClass");
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 19:
+/***/ 25:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+module.exports = require("@babel/runtime/helpers/createClass");
 
 /***/ }),
 
-/***/ 2:
+/***/ 26:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 20:
+/***/ 27:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -646,7 +1241,7 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 var _toConsumableArray = __webpack_require__(8);
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(9);
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -668,7 +1263,7 @@ exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig
 
 var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(16);
+var schemaUtils_1 = __webpack_require__(24);
 
 var VizBehavior_1 = __webpack_require__(6);
 
@@ -875,56 +1470,73 @@ exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 21:
+/***/ 28:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualization-context/FeatureFlagContext");
 
 /***/ }),
 
-/***/ 25:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/id");
+module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 26:
+/***/ 31:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
+module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 27:
+/***/ 32:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+module.exports = require("@splunk/visualization-context/TimezoneContext");
 
 /***/ }),
 
-/***/ 28:
-/***/ (function(module, exports) {
+/***/ 33:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __webpack_require__(0);
+
+function usePrevious(value) {
+  var ref = (0, react_1.useRef)();
+  (0, react_1.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+exports.default = usePrevious;
 
 /***/ }),
 
-/***/ 3:
+/***/ 34:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/visualizations-shared/hocUtils");
 
 /***/ }),
 
-/***/ 30:
+/***/ 35:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
 
 /***/ }),
 
-/***/ 32:
+/***/ 37:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -935,17 +1547,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldShowIconPlaceholder = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(12);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var FixedSizeContainer_1 = __webpack_require__(17);
 /**
  * @method shouldShowIconPlaceholder
  * @param {object} dataSources
@@ -1017,24 +1629,24 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 /***/ }),
 
-/***/ 33:
+/***/ 38:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _defineProperty = __webpack_require__(7);
+var _defineProperty = __webpack_require__(9);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
-var DataSource_1 = __webpack_require__(34);
+var DataSource_1 = __webpack_require__(19);
 
 exports.SortParamsPropTypes = T.shape({
   currentSortKey: T.string,
@@ -1088,23 +1700,7 @@ 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";
@@ -1115,7 +1711,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);
 
@@ -1169,311 +1765,874 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 36:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizCategory = void 0;
-var VizCategory;
+/***/ 4:
+/***/ (function(module, exports) {
 
-(function (VizCategory) {
-  VizCategory["SINGLE_VALUE"] = "Single Value";
-  VizCategory["TRENDS"] = "Trends";
-  VizCategory["COMPARISONS"] = "Comparisons";
-  VizCategory["TABLE"] = "Table";
-  VizCategory["GAUGE"] = "Gauge";
-  VizCategory["DISTRIBUTIONS"] = "Distributions";
-  VizCategory["CHOROPLETH"] = "Choropleth Maps";
-  VizCategory["SHAPES"] = "Shapes";
-  VizCategory["MISC"] = "misc";
-  VizCategory["FLOW"] = "Flow";
-  VizCategory["CORRELATION"] = "Correlation";
-  VizCategory["SPATIAL"] = "Spatial";
-})(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 37:
+/***/ 40:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _slicedToArray = __webpack_require__(17);
+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
-});
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
 
-var React = __webpack_require__(1);
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
 
-var lodash_1 = __webpack_require__(3);
+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 getSettingsFromThemedProps_1 = __webpack_require__(38);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-var Options_1 = __webpack_require__(30);
+__exportStar(__webpack_require__(41), exports);
 
-var SanitizeProps_1 = __webpack_require__(39);
+__exportStar(__webpack_require__(42), exports);
 
-var TimezoneContext_1 = __webpack_require__(26);
+__exportStar(__webpack_require__(19), exports);
 
-var moment_1 = __webpack_require__(40);
+__exportStar(__webpack_require__(43), exports);
 
-var FeatureFlagContext_1 = __webpack_require__(21);
+__exportStar(__webpack_require__(44), exports);
 
-var styled_components_1 = __webpack_require__(4);
+__exportStar(__webpack_require__(45), exports);
 
-var hocUtils_1 = __webpack_require__(27);
+__exportStar(__webpack_require__(46), exports);
 
-var JSONSchemaUtils_1 = __webpack_require__(28);
+__exportStar(__webpack_require__(47), exports);
 
-var async_dynamic_options_evaluator_1 = __webpack_require__(41);
+__exportStar(__webpack_require__(48), exports);
 
-var id_1 = __webpack_require__(25);
+__exportStar(__webpack_require__(49), exports);
 
-var SplunkVisualization_1 = __webpack_require__(42);
+__exportStar(__webpack_require__(21), exports);
 
-var VizBehavior_1 = __webpack_require__(6);
+__exportStar(__webpack_require__(6), exports);
 
-var getSorting_1 = __webpack_require__(33);
+__exportStar(__webpack_require__(22), exports);
 
-var getPagination_1 = __webpack_require__(35);
+__exportStar(__webpack_require__(50), exports);
 
-var useDeepMemo_1 = __webpack_require__(44);
+__exportStar(__webpack_require__(51), exports);
 
-var MissingPropsMessage_1 = __webpack_require__(45);
+__exportStar(__webpack_require__(52), exports);
 
-var withEditModeCover_1 = __webpack_require__(46);
+__exportStar(__webpack_require__(53), exports);
 
-var withPlaceholder_1 = __webpack_require__(47);
-/**
- * hoc that wraps a pure react visualization in a Dashboard visualization
- * @param {DashboardVizOpts} opts
- * @returns {HOC}
- */
+__exportStar(__webpack_require__(54), exports);
 
+__exportStar(__webpack_require__(55), exports);
 
-var withDashboardViz = function withDashboardViz(opts) {
-  var ReactViz = opts.ReactViz,
-      vizConfig = opts.vizConfig,
-      _opts$computeVizProps = opts.computeVizProps,
-      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
-      disableEditModeCover = opts.disableEditModeCover,
-      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+/***/ }),
 
-  var SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
-  var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
+/***/ 41:
+/***/ (function(module, exports, __webpack_require__) {
 
-  var DashboardViz = function DashboardViz(props) {
-    var _a;
+"use strict";
 
-    var mode = props.mode,
-        hasEventHandlers = props.hasEventHandlers,
-        dataSources = props.dataSources,
-        options = props.options,
-        _props$context = props.context,
-        context = _props$context === void 0 ? {} : _props$context,
-        width = props.width,
-        height = props.height,
-        onComputedProps = props.onComputedProps,
-        onEventTrigger = props.onEventTrigger,
-        theme = props.theme,
-        onRequestParamsChange = props.onRequestParamsChange;
 
-    var _React$useContext = React.useContext(TimezoneContext_1.default),
-        serializedTimezone = _React$useContext.serializedTimezone;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-    if (serializedTimezone) {
-      /*
-          @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
-          This ensures that if a timezone was provided via TimezoneContext @splunk/moment time formatting
-           will use it.
-           @TODO(pwied):
-           - remove when we moved away from @splunk/moment
-           - provide timezone context to dynamic option evaluation phase
-      */
-      if (!moment_1.default.getDefaultSplunkTimezone()) {
-        moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
-      }
-    }
+/***/ }),
 
-    var themeFunc = function themeFunc(themeVar) {
-      var _a, _b;
+/***/ 42:
+/***/ (function(module, exports, __webpack_require__) {
 
-      return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
-    };
+"use strict";
 
-    var bgColorFromTheme = themeFunc('defaultBackgroundColor');
+/**
+ *  A data structure used at runtime to wire up a visualization.
+ */
 
-    var _ref = (0, getSettingsFromThemedProps_1.default)({
-      theme: theme
-    }),
-        currentThemeFamily = _ref.family,
-        currentThemeColorScheme = _ref.colorScheme,
-        currentThemeDensity = _ref.density;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-    var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+/***/ }),
 
-    var _React$useState = React.useState({}),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        evaluatedOptionsAsync = _React$useState2[0],
-        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+/***/ 43:
+/***/ (function(module, exports, __webpack_require__) {
 
+"use strict";
 
-    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
 
-    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
-        _React$useState4 = _slicedToArray(_React$useState3, 1),
-        visualizationID = _React$useState4[0];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-    var _React$useState5 = React.useState({}),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        dataSourcesInState = _React$useState6[0],
-        setDataSourcesInState = _React$useState6[1];
+/***/ }),
 
-    var _React$useState7 = React.useState(),
-        _React$useState8 = _slicedToArray(_React$useState7, 2),
-        dataFramesInState = _React$useState8[0],
-        setDataFramesInState = _React$useState8[1];
+/***/ 44:
+/***/ (function(module, exports, __webpack_require__) {
 
-    var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
-        _React$useState10 = _slicedToArray(_React$useState9, 2),
-        useAsyncEvaluatedOptions = _React$useState10[0],
-        setUseAsyncEvaluatedOptions = _React$useState10[1];
+"use strict";
 
-    var isMounted = React.useRef(true);
-    evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
-      try {
-        if (useAsyncEvaluatedOptions) {
-          var optionsToEvaluate = {
-            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
-            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-          };
-          var asyncDynamicOptionsEvaluatorParams = {
-            visualizationID: visualizationID,
-            props: props,
-            options: optionsToEvaluate,
-            dataSources: dataSources,
-            theme: vizConfig.themes
-          };
-          async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
-            setEvaluatedOptionsAsync(results.results);
-          }).catch(function () {
-            if (isMounted.current) {
-              setUseAsyncEvaluatedOptions(false);
-            }
-          });
-        } else {
-          var dataFrames = dataFramesInState;
 
-          if (dataSources !== dataSourcesInState) {
-            setDataSourcesInState(dataSources);
-            dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
-            setDataFramesInState(dataFrames);
-          }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-          return Options_1.Options.evaluate({
-            context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
-            options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-          }, dataSources, themeFunc, dataFrames);
-        }
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error("unexpected error evaluating options: ".concat(e.message));
-        return {};
-      }
+/***/ }),
 
-      return {};
-    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
-    // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
-    // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
+/***/ 445:
+/***/ (function(module, exports, __webpack_require__) {
 
-    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
-    var clonedEvaluatedOptions = evaluatedOptionsToUse;
+"use strict";
 
-    if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
-      clonedEvaluatedOptions = Object.assign(Object.assign({}, evaluatedOptionsToUse), {
-        backgroundColor: clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
-      });
-    } // useEffect hook needs to be initialized before any early returns
-    // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
 
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
 
-    React.useEffect(function () {
-      onComputedProps(clonedEvaluatedOptions);
-    });
-    React.useEffect(function () {
-      return function () {
-        if (useAsyncEvaluatedOptions) {
-          isMounted.current = false;
-          async_dynamic_options_evaluator_1.default.reset(visualizationID);
-        }
-      }; // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // present warning message if any required props are missing
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function get() {
+        return m[k];
+      }
+    };
+  }
 
-    var _vizConfig$requiredPr = vizConfig.requiredProps,
-        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
-        supports = vizConfig.supports;
-    var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
 
-    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
-    ) {
-        return React.createElement(MissingPropsMessage_1.default, {
-          "data-test": "missing-props-message",
-          width: width,
-          height: height,
-          missingProps: missing,
-          backgroundColor: bgColorFromTheme
-        });
-      } // events
+var __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
+});
+exports.default = void 0;
 
-    var eventCallbackProps = {};
+__exportStar(__webpack_require__(184), exports);
 
-    if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
-      var supportedEvents = vizConfig.events;
-      Object.keys(supportedEvents).forEach(function (eventName) {
-        var _supportedEvents$even = supportedEvents[eventName],
-            parentKeys = _supportedEvents$even.parentKeys,
-            payloadKeys = _supportedEvents$even.payloadKeys;
-        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName)); // todo: refactor single value and single value icon to send payload from viz
-        // then remove these lines
+var Markdown_1 = __webpack_require__(184);
 
-        var payload = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return Markdown_1.default;
+  }
+});
 
-        if (Array.isArray(payloadKeys) && payloadKeys.length) {
-          payloadKeys.forEach(function (p) {
-            payload[p] = evaluatedOptionsToUse[p];
-          });
-        }
+/***/ }),
 
-        eventCallbackProps[eventCallbackPropName] = function (ev) {
-          if (ev && ev.payload) {
-            payload = ev.payload;
-          }
+/***/ 446:
+/***/ (function(module, exports) {
 
-          return onEventTrigger({
-            originalEvent: ev,
-            payload: payload,
-            type: eventName
-          });
-        };
+module.exports = require("@splunk/react-ui/List");
 
-        if (parentKeys) {
-          for (var i = parentKeys.length - 1; i >= 0; i -= 1) {
-            var newObject = {};
-            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
-            eventCallbackProps[eventCallbackPropName] = newObject;
-          }
-        }
-      });
-    } // compute pure viz props which are not from options
+/***/ }),
+
+/***/ 447:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Code");
+
+/***/ }),
+
+/***/ 448:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _toConsumableArray = __webpack_require__(8);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var themes_1 = __webpack_require__(82);
+
+var i18n_1 = __webpack_require__(2);
+
+var schemaUtils_1 = __webpack_require__(24);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var VizCategory_1 = __webpack_require__(22);
+
+var configUtils_1 = __webpack_require__(27);
+
+var BackgroundColor_1 = __webpack_require__(75);
+
+var FONT_OPTIONS = new Set(['extraSmall', 'small', 'default', 'large', 'extraLarge']);
+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: {
+    primary: {
+      offset: 0,
+      count: 10000
+    }
+  }
+};
+var size = {
+  initialWidth: 300,
+  initialHeight: 300
+};
+var defaultContext = {};
+var optionsSchema = {
+  backgroundColor: {
+    description: 'Specify the background color using a Hex code such as "#FF0000".',
+    type: 'string',
+    default: 'transparent',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+  },
+  customFontSize: {
+    description: 'Specify the font size (in pixels) you would like to use for unformatted text when `fontSize` is set to `custom`. Header elements are calculated with the following formula: h1 = 2 × `customFontSize`, h2 = 1.5 × `customFontSize`, h3 = 1.25 × `customFontSize`',
+    default: 14,
+    type: 'number'
+  },
+  fontColor: {
+    description: 'Specify the text color using Hex codes or RGBA values, such as "#FF0000" or "rgba(25,12,13,0.1)". The default for enterprise light is "#3c444d". The default for enterprise dark is "#FFFFFF". The default for prisma dark is "rgba(255, 255, 255, 0.7)".',
+    type: 'string',
+    default: '> themes.defaultFontColor',
+    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
+  },
+  fontFamily: {
+    default: 'Splunk Platform Sans',
+    pattern: (0, schemaUtils_1.getPattern)(['Splunk Platform Sans', 'Splunk Data Sans', 'Splunk Platform Mono', 'Arial', 'Helvetica', 'Times New Roman', 'Comic Sans MS']),
+    description: 'Specify the font family you would like to use for markdown content, such as "Comic Sans MS". Note: the font needs to be available to your end user.',
+    type: 'string'
+  },
+  fontSize: {
+    description: 'Specify the font size you would like to use for markdown content. Font sizes range from extra small (10px for unformatted text) to extra large (18px for unformatted text) with the default being 14px for unformatted text.',
+    type: 'string',
+    default: 'default',
+    pattern: (0, schemaUtils_1.getPattern)(['extraSmall', 'small', 'default', 'large', 'extraLarge', 'custom'])
+  },
+  markdown: {
+    description: 'Add text using basic markdown syntax.',
+    type: 'string'
+  },
+  rotation: {
+    description: 'Specify the angle of rotation of the markdown content in degrees.',
+    type: 'number',
+    default: 0
+  }
+};
+var themes = {
+  defaultFontColor: function defaultFontColor(props) {
+    return (0, themes_1.pick)({
+      enterprise: {
+        dark: themes_1.variables.textColor(props),
+        light: themes_1.variables.textColor(props)
+      },
+      prisma: themes_1.variables.contentColorDefault(props)
+    })(props);
+  }
+};
+var editorConfig = [{
+  label: (0, i18n_1._)('Color and style'),
+  layout: [[{
+    label: (0, i18n_1._)('Font'),
+    option: 'fontColor',
+    editor: 'editor.color',
+    editorProps: {
+      labelPosition: 'top',
+      themes: themes
+    }
+  }].concat(_toConsumableArray((0, BackgroundColor_1.default)({
+    label: 'Background',
+    themes: themes
+  }))), [{
+    label: (0, i18n_1._)('Font family'),
+    option: 'fontFamily',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        value: 'Splunk Platform Sans'
+      }, {
+        value: 'Splunk Data Sans'
+      }, {
+        value: 'Splunk Platform Mono'
+      }, {
+        value: 'Arial'
+      }, {
+        value: 'Helvetica'
+      }, {
+        value: 'Times New Roman'
+      }, {
+        value: 'Comic Sans MS'
+      }]
+    }
+  }], [{
+    label: (0, i18n_1._)('Font size'),
+    option: 'fontSize',
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: (0, i18n_1._)('Extra Small'),
+        value: 'extraSmall'
+      }, {
+        label: (0, i18n_1._)('Small'),
+        value: 'small'
+      }, {
+        label: (0, i18n_1._)('Default'),
+        value: 'default'
+      }, {
+        label: (0, i18n_1._)('Large'),
+        value: 'large'
+      }, {
+        label: (0, i18n_1._)('Extra Large'),
+        value: 'extraLarge'
+      }, {
+        label: (0, i18n_1._)('Custom'),
+        value: 'custom'
+      }]
+    }
+  }, {
+    label: (0, i18n_1._)('Custom font size (px)'),
+    option: 'customFontSize',
+    editor: 'editor.number',
+    editorProps: {
+      min: 0,
+      labelPosition: 'top'
+    },
+    showEditor: function showEditor(_ref) {
+      var options = _ref.options;
+      return options.fontSize && !FONT_OPTIONS.has(options.fontSize);
+    }
+  }], [{
+    label: (0, i18n_1._)('Rotation (degrees)'),
+    option: 'rotation',
+    editor: 'editor.number',
+    editorProps: {
+      min: -360,
+      max: 360
+    }
+  }]]
+}, {
+  label: (0, i18n_1._)('Markdown content'),
+  open: true,
+  layout: [[{
+    label: '',
+    option: 'markdown',
+    editor: 'editor.markdown'
+  }]]
+}];
+/**
+ * visualization configuration
+ */
+
+var config = {
+  /**
+   * unique viz key
+   */
+  key: 'splunk.markdown',
+
+  /**
+   * viz name
+   */
+  name: (0, i18n_1._)('Markdown'),
+  category: VizCategory_1.VizCategory.COMPARISONS,
+
+  /**
+   * viz icon
+   */
+  icon: null,
+  dataContract: dataContract,
+  size: size,
+  defaultContext: defaultContext,
+  optionsSchema: optionsSchema,
+  editorConfig: editorConfig,
+  events: {
+    'markdown.click': {
+      description: 'triggered when user clicks on markdown area not formatted as a link'
+    }
+  },
+  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
+  themes: themes
+};
+exports.default = (0, configUtils_1.enhanceConfig)(config);
+
+/***/ }),
+
+/***/ 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";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/***/ }),
+
+/***/ 56:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _slicedToArray = __webpack_require__(7);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var React = __webpack_require__(0);
+
+var lodash_1 = __webpack_require__(3);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(57);
+
+var Options_1 = __webpack_require__(16);
+
+var SanitizeProps_1 = __webpack_require__(58);
+
+var TimezoneContext_1 = __webpack_require__(32);
+
+var moment_1 = __webpack_require__(59);
+
+var FeatureFlagContext_1 = __webpack_require__(28);
+
+var styled_components_1 = __webpack_require__(4);
+
+var hocUtils_1 = __webpack_require__(34);
+
+var JSONSchemaUtils_1 = __webpack_require__(35);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(60);
+
+var id_1 = __webpack_require__(31);
+
+var SplunkVisualization_1 = __webpack_require__(61);
+
+var VizBehavior_1 = __webpack_require__(6);
+
+var getSorting_1 = __webpack_require__(38);
+
+var getPagination_1 = __webpack_require__(39);
+
+var useDeepMemo_1 = __webpack_require__(62);
+
+var MissingPropsMessage_1 = __webpack_require__(63);
+
+var withEditModeCover_1 = __webpack_require__(64);
+
+var withPlaceholder_1 = __webpack_require__(65);
+
+var useDownsampleDataSources_1 = __webpack_require__(66);
+
+var dataUtils_1 = __webpack_require__(14);
+
+var featureFlagUtils_1 = __webpack_require__(68);
+/**
+ * hoc that wraps a pure react visualization in a Dashboard visualization
+ * @param {DashboardVizOpts} opts
+ * @returns {HOC}
+ */
+
+
+var withDashboardViz = function withDashboardViz(opts) {
+  var ReactViz = opts.ReactViz,
+      vizConfig = opts.vizConfig,
+      _opts$computeVizProps = opts.computeVizProps,
+      computeVizProps = _opts$computeVizProps === void 0 ? function () {} : _opts$computeVizProps,
+      disableEditModeCover = opts.disableEditModeCover,
+      useIconPlaceholder = opts.useIconPlaceholder; // sanitizing props before sending them to reactviz.
+
+  var SanitizedReactViz = (0, SanitizeProps_1.withSanitizedProps)(ReactViz);
+  var defaultOptions = (0, JSONSchemaUtils_1.pickFieldFromJSONSchema)(vizConfig.optionsSchema, 'default');
+
+  var DashboardViz = function DashboardViz(props) {
+    var _a;
+
+    var mode = props.mode,
+        hasEventHandlers = props.hasEventHandlers,
+        dataSources = props.dataSources,
+        options = props.options,
+        _props$context = props.context,
+        context = _props$context === void 0 ? {} : _props$context,
+        width = props.width,
+        height = props.height,
+        onComputedProps = props.onComputedProps,
+        onEventTrigger = props.onEventTrigger,
+        theme = props.theme,
+        onRequestParamsChange = props.onRequestParamsChange;
+
+    var _React$useContext = React.useContext(TimezoneContext_1.default),
+        serializedTimezone = _React$useContext.serializedTimezone;
+
+    if (serializedTimezone) {
+      /*
+          @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
+          This ensures that if a timezone was provided via TimezoneContext @splunk/moment time formatting
+           will use it.
+           @TODO(pwied):
+           - remove when we moved away from @splunk/moment
+           - provide timezone context to dynamic option evaluation phase
+      */
+      if (!moment_1.default.getDefaultSplunkTimezone()) {
+        moment_1.default.setDefaultSplunkTimezone(serializedTimezone);
+      }
+    }
+
+    var themeFunc = function themeFunc(themeVar) {
+      var _a, _b;
+
+      return (_b = (_a = vizConfig.themes)[themeVar]) === null || _b === void 0 ? void 0 : _b.call(_a, props);
+    };
+
+    var bgColorFromTheme = themeFunc('defaultBackgroundColor');
+
+    var _ref = (0, getSettingsFromThemedProps_1.default)({
+      theme: theme
+    }),
+        currentThemeFamily = _ref.family,
+        currentThemeColorScheme = _ref.colorScheme,
+        currentThemeDensity = _ref.density;
+
+    var evaluatedOptions = {}; // evaluatedOptions need to be initialized as an empty object
+
+    var _React$useState = React.useState({}),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        evaluatedOptionsAsync = _React$useState2[0],
+        setEvaluatedOptionsAsync = _React$useState2[1]; // evaluatedOptions need to be initialized as an empty object
+
+
+    var featureFlagContext = React.useContext(FeatureFlagContext_1.default);
+
+    var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat((0, id_1.createGUID)())),
+        _React$useState4 = _slicedToArray(_React$useState3, 1),
+        visualizationID = _React$useState4[0];
+
+    var _React$useState5 = React.useState({}),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        dataSourcesInState = _React$useState6[0],
+        setDataSourcesInState = _React$useState6[1];
+
+    var _React$useState7 = React.useState(),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        dataFramesInState = _React$useState8[0],
+        setDataFramesInState = _React$useState8[1];
+
+    var _React$useState9 = React.useState(Boolean((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 asyncDynamicOptionsEvaluatorParams = {
+            visualizationID: visualizationID,
+            props: props,
+            options: optionsToEvaluate,
+            dataSources: downsampledDataSources,
+            theme: vizConfig.themes,
+            bypassCloneDeepOptionScope: Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_bypassCloneDeepOptionScope')),
+            lazyLoadingDataFrame: Boolean((0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_lazyLoadingDataFrame'))
+          };
+          async_dynamic_options_evaluator_1.default.evaluate(asyncDynamicOptionsEvaluatorParams).then(function (results) {
+            setEvaluatedOptionsAsync(results.results);
+          }).catch(function () {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
+          });
+        } else {
+          var dataFrames = dataFramesInState;
+
+          if (downsampledDataSources !== dataSourcesInState) {
+            setDataSourcesInState(downsampledDataSources);
+            dataFrames = Options_1.Options.dataFrameFromDataSource(downsampledDataSources, (0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_lazyLoadingDataFrame'));
+            setDataFramesInState(dataFrames);
+          }
+
+          var result = Options_1.Options.evaluate(optionsToEvaluate, downsampledDataSources, themeFunc, dataFrames, (0, featureFlagUtils_1.getFeatureFlag)(featureFlagContext, 'visualizations_bypassCloneDeepOptionScope'));
+          return result;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error("unexpected error evaluating options: ".concat(e.message));
+        return {};
+      }
+
+      return {};
+    }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, optionsToEvaluate, downsampledDataSources, serializedTimezone, useAsyncEvaluatedOptions]);
+    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // trellis specific backgroundColor update for onComputedProps
+    // if trellis is enabled following these three criteria - 1) trellis feature flag is enabled 2) vizConfig supports array has 'trellis' 3)  option 'splitByLayout' is set to 'trellis
+    // onComputedProps api should return back trellisBackgroundColor value for backgroundColor option to support coloring of sibling panels (for eg:- title/ description on UDF side)
+
+    var isTrellisFeatureFlagOn = Boolean(featureFlagContext && featureFlagContext.visualizations_enableTrellis);
+    var clonedEvaluatedOptions = evaluatedOptionsToUse;
+
+    if (isTrellisFeatureFlagOn && ((_a = vizConfig === null || vizConfig === void 0 ? void 0 : vizConfig.supports) === null || _a === void 0 ? void 0 : _a.includes(VizBehavior_1.VizBehavior.TRELLIS)) && (clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.splitByLayout) === VizBehavior_1.VizBehavior.TRELLIS) {
+      clonedEvaluatedOptions = Object.assign(Object.assign({}, evaluatedOptionsToUse), {
+        backgroundColor: clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
+      });
+    } // useEffect hook needs to be initialized before any early returns
+    // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
+
+
+    React.useEffect(function () {
+      onComputedProps(clonedEvaluatedOptions);
+    });
+    React.useEffect(function () {
+      return function () {
+        if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
+          async_dynamic_options_evaluator_1.default.reset(visualizationID);
+        }
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // present warning message if any required props are missing
+
+    var _vizConfig$requiredPr = vizConfig.requiredProps,
+        requiredProps = _vizConfig$requiredPr === void 0 ? [] : _vizConfig$requiredPr,
+        supports = vizConfig.supports;
+    var missing = (0, MissingPropsMessage_1.missingKeys)(requiredProps, evaluatedOptionsToUse);
+
+    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
+    ) {
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
+
+
+    var eventCallbackProps = {};
+
+    if (hasEventHandlers && mode === 'view' && vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.EVENTS) > -1) {
+      var supportedEvents = vizConfig.events;
+      Object.keys(supportedEvents).forEach(function (eventName) {
+        var _supportedEvents$even = supportedEvents[eventName],
+            parentKeys = _supportedEvents$even.parentKeys,
+            payloadKeys = _supportedEvents$even.payloadKeys;
+        var eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName)); // todo: refactor single value and single value icon to send payload from viz
+        // then remove these lines
+
+        var payload = {};
+
+        if (Array.isArray(payloadKeys) && payloadKeys.length) {
+          payloadKeys.forEach(function (p) {
+            payload[p] = evaluatedOptionsToUse[p];
+          });
+        }
+
+        eventCallbackProps[eventCallbackPropName] = function (ev) {
+          if (ev && ev.payload) {
+            payload = ev.payload;
+          }
+
+          return onEventTrigger({
+            originalEvent: ev,
+            payload: payload,
+            type: eventName
+          });
+        };
+
+        if (parentKeys) {
+          for (var i = parentKeys.length - 1; i >= 0; i -= 1) {
+            var newObject = {};
+            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
+            eventCallbackProps[eventCallbackPropName] = newObject;
+          }
+        }
+      });
+    } // compute pure viz props which are not from options
 
 
     var computedVizProps = computeVizProps(Object.assign(Object.assign(Object.assign(Object.assign({}, props), evaluatedOptionsToUse), eventCallbackProps), {
@@ -1531,7 +2690,7 @@ var withDashboardViz = function withDashboardViz(opts) {
       mode: mode,
       width: width,
       height: height
-    }, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
+    }, downsamplingProps, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
   };
 
   DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
@@ -1549,519 +2708,227 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 38:
+/***/ 57:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
-/***/ 39:
+/***/ 58:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
 
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 40:
+/***/ 59:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
 
-/***/ 41:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/async-dynamic-options-evaluator");
-
-/***/ }),
-
-/***/ 42:
+/***/ 6:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _classCallCheck = __webpack_require__(9);
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
-/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(3);
-
-var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
-
-
-exports.INITIAL_WIDTH = 250;
-exports.INITIAL_HEIGHT = 250;
-/**
- * A Splunk visualization
- */
-
-var SplunkVisualization = function SplunkVisualization() {
-  _classCallCheck(this, SplunkVisualization);
-};
-
-SplunkVisualization.propTypes = {
-  /**
-   * display mode
-   */
-  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
-
-  /**
-   * width in pixel or string, defaults to 100%
-   */
-  width: T.oneOfType([T.string, T.number]).isRequired,
-
-  /**
-   * height in pixel or string
-   */
-  height: T.oneOfType([T.string, T.number]).isRequired,
-
-  /**
-   * visualization context used for dynamic option evaluation
-   */
-  context: T.object,
-
-  /**
-   * visualization formatting options
-   */
-  options: T.object,
-
-  /**
-   * A callback to update formatting options
-   */
-  onOptionsChange: T.func,
-
-  /**
-   * datasource state which include data and request params, object key indicate the datasource type.
-   */
-  dataSources: T.objectOf(T.shape({
-    /**
-     * current request params
-     */
-    requestParams: T.object,
-
-    /**
-     * current dataset
-     */
-    data: T.shape({
-      fields: T.array,
-      columns: T.array
-    }),
-
-    /**
-     * error
-     */
-    error: T.shape({
-      level: T.string,
-      message: T.string
-    }),
-
-    /**
-     * meta data that came with the dataset
-     */
-    meta: T.object
-  })),
-
-  /**
-   * A callback to trigger event
-   */
-  onEventTrigger: T.func,
-
-  /**
-   * Inform viz if there are handlers listening to events
-   */
-  hasEventHandlers: T.bool,
-
-  /**
-   * 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,
+exports.VizBehavior = void 0;
+var VizBehavior;
 
+(function (VizBehavior) {
   /**
-   * 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;
-
-/***/ }),
-
-/***/ 423:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function get() {
-        return m[k];
-      }
-    };
-  }
-
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-__exportStar(__webpack_require__(162), exports);
-
-var Markdown_1 = __webpack_require__(162);
-
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return Markdown_1.default;
-  }
-});
-
-/***/ }),
-
-/***/ 424:
-/***/ (function(module, exports) {
+   * 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}
+   */
 
-module.exports = require("@splunk/react-ui/List");
+  VizBehavior["PLACEHOLDER"] = "placeholder";
+  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
+})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
 
-/***/ 425:
+/***/ 60:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Code");
+module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
 
-/***/ 426:
+/***/ 61:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var _toConsumableArray = __webpack_require__(8);
+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 themes_1 = __webpack_require__(60);
+var T = __webpack_require__(1);
 
-var i18n_1 = __webpack_require__(2);
+var lodash_1 = __webpack_require__(3);
 
-var schemaUtils_1 = __webpack_require__(16);
+var VizActionHandler_1 = __webpack_require__(21); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
 
-var VizBehavior_1 = __webpack_require__(6);
 
-var VizCategory_1 = __webpack_require__(36);
+exports.INITIAL_WIDTH = 250;
+exports.INITIAL_HEIGHT = 250;
+/**
+ * A Splunk visualization
+ */
 
-var configUtils_1 = __webpack_require__(20);
+var SplunkVisualization = function SplunkVisualization() {
+  _classCallCheck(this, SplunkVisualization);
+};
 
-var BackgroundColor_1 = __webpack_require__(53);
+SplunkVisualization.propTypes = {
+  /**
+   * display mode
+   */
+  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
 
-var FONT_OPTIONS = new Set(['extraSmall', 'small', 'default', 'large', 'extraLarge']);
-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: {
-    primary: {
-      offset: 0,
-      count: 10000
-    }
-  }
-};
-var size = {
-  initialWidth: 300,
-  initialHeight: 300
-};
-var defaultContext = {};
-var optionsSchema = {
-  backgroundColor: {
-    description: 'Specify the background color using a Hex code such as "#FF0000".',
-    type: 'string',
-    default: 'transparent',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-  },
-  customFontSize: {
-    description: 'Specify the font size (in pixels) you would like to use for unformatted text when `fontSize` is set to `custom`. Header elements are calculated with the following formula: h1 = 2 × `customFontSize`, h2 = 1.5 × `customFontSize`, h3 = 1.25 × `customFontSize`',
-    default: 14,
-    type: 'number'
-  },
-  fontColor: {
-    description: 'Specify the text color using Hex codes or RGBA values, such as "#FF0000" or "rgba(25,12,13,0.1)". The default for enterprise light is "#3c444d". The default for enterprise dark is "#FFFFFF". The default for prisma dark is "rgba(255, 255, 255, 0.7)".',
-    type: 'string',
-    default: '> themes.defaultFontColor',
-    pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN_WITH_RGBA
-  },
-  fontFamily: {
-    default: 'Splunk Platform Sans',
-    pattern: (0, schemaUtils_1.getPattern)(['Splunk Platform Sans', 'Splunk Data Sans', 'Splunk Platform Mono', 'Arial', 'Helvetica', 'Times New Roman', 'Comic Sans MS']),
-    description: 'Specify the font family you would like to use for markdown content, such as "Comic Sans MS". Note: the font needs to be available to your end user.',
-    type: 'string'
-  },
-  fontSize: {
-    description: 'Specify the font size you would like to use for markdown content. Font sizes range from extra small (10px for unformatted text) to extra large (18px for unformatted text) with the default being 14px for unformatted text.',
-    type: 'string',
-    default: 'default',
-    pattern: (0, schemaUtils_1.getPattern)(['extraSmall', 'small', 'default', 'large', 'extraLarge', 'custom'])
-  },
-  markdown: {
-    description: 'Add text using basic markdown syntax.',
-    type: 'string'
-  },
-  rotation: {
-    description: 'Specify the angle of rotation of the markdown content in degrees.',
-    type: 'number',
-    default: 0
-  }
-};
-var themes = {
-  defaultFontColor: function defaultFontColor(props) {
-    return (0, themes_1.pick)({
-      enterprise: {
-        dark: themes_1.variables.textColor(props),
-        light: themes_1.variables.textColor(props)
-      },
-      prisma: themes_1.variables.contentColorDefault(props)
-    })(props);
-  }
-};
-var editorConfig = [{
-  label: (0, i18n_1._)('Color and style'),
-  layout: [[{
-    label: (0, i18n_1._)('Font'),
-    option: 'fontColor',
-    editor: 'editor.color',
-    editorProps: {
-      labelPosition: 'top',
-      themes: themes
-    }
-  }].concat(_toConsumableArray((0, BackgroundColor_1.default)({
-    label: 'Background',
-    themes: themes
-  }))), [{
-    label: (0, i18n_1._)('Font family'),
-    option: 'fontFamily',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        value: 'Splunk Platform Sans'
-      }, {
-        value: 'Splunk Data Sans'
-      }, {
-        value: 'Splunk Platform Mono'
-      }, {
-        value: 'Arial'
-      }, {
-        value: 'Helvetica'
-      }, {
-        value: 'Times New Roman'
-      }, {
-        value: 'Comic Sans MS'
-      }]
-    }
-  }], [{
-    label: (0, i18n_1._)('Font size'),
-    option: 'fontSize',
-    editor: 'editor.select',
-    editorProps: {
-      values: [{
-        label: (0, i18n_1._)('Extra Small'),
-        value: 'extraSmall'
-      }, {
-        label: (0, i18n_1._)('Small'),
-        value: 'small'
-      }, {
-        label: (0, i18n_1._)('Default'),
-        value: 'default'
-      }, {
-        label: (0, i18n_1._)('Large'),
-        value: 'large'
-      }, {
-        label: (0, i18n_1._)('Extra Large'),
-        value: 'extraLarge'
-      }, {
-        label: (0, i18n_1._)('Custom'),
-        value: 'custom'
-      }]
-    }
-  }, {
-    label: (0, i18n_1._)('Custom font size (px)'),
-    option: 'customFontSize',
-    editor: 'editor.number',
-    editorProps: {
-      min: 0,
-      labelPosition: 'top'
-    },
-    showEditor: function showEditor(_ref) {
-      var options = _ref.options;
-      return options.fontSize && !FONT_OPTIONS.has(options.fontSize);
-    }
-  }], [{
-    label: (0, i18n_1._)('Rotation (degrees)'),
-    option: 'rotation',
-    editor: 'editor.number',
-    editorProps: {
-      min: -360,
-      max: 360
-    }
-  }]]
-}, {
-  label: (0, i18n_1._)('Markdown content'),
-  open: true,
-  layout: [[{
-    label: '',
-    option: 'markdown',
-    editor: 'editor.markdown'
-  }]]
-}];
-/**
- * visualization configuration
- */
+  /**
+   * 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
+  })),
 
-var config = {
   /**
-   * unique viz key
+   * A callback to trigger event
    */
-  key: 'splunk.markdown',
+  onEventTrigger: T.func,
 
   /**
-   * viz name
+   * Inform viz if there are handlers listening to events
    */
-  name: (0, i18n_1._)('Markdown'),
-  category: VizCategory_1.VizCategory.COMPARISONS,
+  hasEventHandlers: T.bool,
 
   /**
-   * viz icon
+   * A callback to communicate computed props to a consumer
    */
-  icon: null,
-  dataContract: dataContract,
-  size: size,
-  defaultContext: defaultContext,
-  optionsSchema: optionsSchema,
-  editorConfig: editorConfig,
-  events: {
-    'markdown.click': {
-      description: 'triggered when user clicks on markdown area not formatted as a link'
-    }
-  },
-  supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS],
-  themes: themes
-};
-exports.default = (0, configUtils_1.enhanceConfig)(config);
-
-/***/ }),
-
-/***/ 43:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(9);
-
-var _createClass = __webpack_require__(18);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DefaultVizActionHandler = void 0;
-
-var DefaultVizActionHandler = /*#__PURE__*/function () {
-  function DefaultVizActionHandler() {
-    _classCallCheck(this, DefaultVizActionHandler);
-  }
+  onComputedProps: T.func,
 
-  _createClass(DefaultVizActionHandler, [{
-    key: "focus",
-    value: function focus() {// noop
-    }
-  }, {
-    key: "snapshot",
-    value: function snapshot() {
-      return null; // noop
-    }
-  }]);
+  /**
+   * A callback to obtain visualization api
+   */
+  vizActionHandlerRef: T.func,
+  loading: T.bool,
+  theme: T.object,
 
-  return DefaultVizActionHandler;
-}();
+  /**
+   * A callback to request new data with updated request params
+   */
+  onRequestParamsChange: T.func
+};
+/**
+ *
+ */
 
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
+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;
 
 /***/ }),
 
-/***/ 44:
+/***/ 62:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2072,7 +2939,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -2107,7 +2974,7 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 45:
+/***/ 63:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2118,15 +2985,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var i18n_1 = __webpack_require__(2);
 
-var Message_1 = __webpack_require__(10);
+var Message_1 = __webpack_require__(12);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var FixedSizeContainer_1 = __webpack_require__(17);
 /**
  * @method isMissing
  * @param {any} v
@@ -2188,7 +3055,7 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 
 /***/ }),
 
-/***/ 46:
+/***/ 64:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2198,18 +3065,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(15);
+var hocUtils_1 = __webpack_require__(23);
 
 var Cover = styled_components_1.default.div.withConfig({
   displayName: "withEditModeCover__Cover",
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "26.1.2 - 9c7479612"
+  'data-splunk-visualization-version': "26.2.0 - 49b909915"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -2241,7 +3108,7 @@ exports.default = withEditModeCover;
 
 /***/ }),
 
-/***/ 47:
+/***/ 65:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2251,17 +3118,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var colorUtils_1 = __webpack_require__(12);
+var colorUtils_1 = __webpack_require__(15);
 
-var variables_1 = __webpack_require__(11);
+var variables_1 = __webpack_require__(13);
 
-var IconPlaceholder_1 = __webpack_require__(32);
+var IconPlaceholder_1 = __webpack_require__(37);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var hocUtils_1 = __webpack_require__(15);
+var hocUtils_1 = __webpack_require__(23);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -2306,45 +3173,212 @@ exports.default = withPlaceholder;
 
 /***/ }),
 
-/***/ 53:
+/***/ 66:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _slicedToArray = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var i18n_1 = __webpack_require__(2);
+var react_1 = __webpack_require__(0);
 
-var background = function background(_ref) {
-  var label = _ref.label,
-      themes = _ref.themes,
-      labelPosition = _ref.labelPosition;
-  return [{
-    label: (0, i18n_1._)(label || 'Background'),
-    option: 'backgroundColor',
-    editor: 'editor.color',
-    editorProps: {
-      labelPosition: labelPosition || 'top',
-      themes: themes
+var lodash_1 = __webpack_require__(3);
+
+var dataUtils_1 = __webpack_require__(14);
+
+var usePrevious_1 = __webpack_require__(33);
+
+var useGetXAndYFields_1 = __webpack_require__(67);
+
+var useDownsampleDataSources = function useDownsampleDataSources(_ref) {
+  var dataSources = _ref.dataSources,
+      options = _ref.options,
+      context = _ref.context,
+      threshold = _ref.threshold,
+      isDownsamplingEnabled = _ref.isDownsamplingEnabled;
+  var isFirstUseEffectCall = (0, react_1.useRef)(true);
+  var xAndYFieldsWithTypes = (0, useGetXAndYFields_1.default)({
+    shouldEvaluateDSL: isDownsamplingEnabled,
+    options: options,
+    context: context,
+    dataSources: dataSources
+  });
+  var previousXAndYFieldsWithTypes = (0, usePrevious_1.default)(xAndYFieldsWithTypes);
+  var previousDataSources = (0, usePrevious_1.default)(dataSources);
+  var previousThreshold = (0, usePrevious_1.default)(threshold);
+
+  var _ref2 = (0, react_1.useState)(function () {
+    return isDownsamplingEnabled ? (0, dataUtils_1.downsampleDataSources)({
+      dataSources: dataSources,
+      threshold: threshold,
+      options: xAndYFieldsWithTypes
+    }) : dataSources;
+  }),
+      _ref3 = _slicedToArray(_ref2, 2),
+      downsampledDataSources = _ref3[0],
+      setDownsampledDataSources = _ref3[1];
+
+  var debouncedDownsampleDataSources = (0, react_1.useMemo)(function () {
+    return (0, lodash_1.debounce)(function (downsampleOptions) {
+      var downsampledResult = (0, dataUtils_1.downsampleDataSources)(downsampleOptions);
+      setDownsampledDataSources(downsampledResult);
+    }, 100, {
+      trailing: true
+    });
+  }, []);
+  (0, react_1.useEffect)(function () {
+    // don't downsample again on the use effect call that happened due to the initial render
+    // this is since we already downsampled as part of the useState call
+    if (isFirstUseEffectCall.current) {
+      isFirstUseEffectCall.current = false;
+      return;
     }
-  }];
+
+    if (!isDownsamplingEnabled) {
+      setDownsampledDataSources(dataSources);
+      return;
+    }
+
+    if ((0, lodash_1.isEqual)(previousXAndYFieldsWithTypes, xAndYFieldsWithTypes) && previousDataSources === dataSources && previousThreshold === threshold) {
+      return;
+    } // Debounce the downsampling so we don't have to downsample and execute DSL multiple times
+    // while the viz is being resized
+
+
+    debouncedDownsampleDataSources({
+      dataSources: dataSources,
+      options: xAndYFieldsWithTypes,
+      threshold: threshold
+    }); // need to detect if this runs as part of the initial render
+  }, [dataSources, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousXAndYFieldsWithTypes, previousDataSources, previousThreshold]);
+  return downsampledDataSources;
 };
 
-exports.default = background;
+exports.default = useDownsampleDataSources;
 
 /***/ }),
 
-/***/ 59:
-/***/ (function(module, exports) {
+/***/ 67:
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+"use strict";
+
+
+var _toConsumableArray = __webpack_require__(8);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __webpack_require__(0);
+
+var Options_1 = __webpack_require__(16);
+/**
+ * Hook that evaluates the DSL for subset of a viz's options needed to determine
+ * its x and y fields as well as the types of all its fields.
+ */
+
+
+var useGetXAndYFields = function useGetXAndYFields(_ref) {
+  var shouldEvaluateDSL = _ref.shouldEvaluateDSL,
+      options = _ref.options,
+      context = _ref.context,
+      dataSources = _ref.dataSources;
+
+  var _ref2 = (0, react_1.useMemo)(function () {
+    var _a, _b, _c;
+
+    if (!shouldEvaluateDSL) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
+
+    if (!((_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.length)) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
+    }
+
+    var primaryDS = dataSources.primary;
+    var columnsWithOnlyOnePoint = primaryDS.data.columns.map(function (column) {
+      return [column[0]];
+    });
+    var filteredDataSources = {
+      primary: Object.assign(Object.assign({}, primaryDS), {
+        data: Object.assign(Object.assign({}, primaryDS.data), {
+          columns: columnsWithOnlyOnePoint
+        })
+      })
+    };
+    return {
+      dataSourcesWithOnlyOnePoint: filteredDataSources,
+      dataFrameWithOnlyOnePoint: Options_1.Options.dataFrameFromDataSource(filteredDataSources)
+    };
+  }, [dataSources, shouldEvaluateDSL]),
+      dataSourcesWithOnlyOnePoint = _ref2.dataSourcesWithOnlyOnePoint,
+      dataFrameWithOnlyOnePoint = _ref2.dataFrameWithOnlyOnePoint;
+
+  var xAndYFieldsWithTypes = (0, react_1.useMemo)(function () {
+    try {
+      if (!dataSourcesWithOnlyOnePoint || !dataFrameWithOnlyOnePoint) {
+        return options;
+      }
+
+      if (!(options === null || options === void 0 ? void 0 : options.x) || !(options === null || options === void 0 ? void 0 : options.y) && !(options === null || options === void 0 ? void 0 : options.y2)) {
+        return options;
+      }
+
+      var optionsToEvaluate = {
+        x: options.x,
+        xField: '> x | getField()',
+        y: options.y,
+        yFields: options.y ? '> y | getField()' : undefined,
+        y2: options.y2,
+        y2Fields: options.y2 ? '> y2 | getField()' : undefined,
+        fieldTypes: '> primary | getType()'
+      };
+
+      var _Options_1$Options$ev = Options_1.Options.evaluate({
+        options: optionsToEvaluate,
+        context: context
+      }, dataSourcesWithOnlyOnePoint, function () {}, dataFrameWithOnlyOnePoint),
+          _Options_1$Options$ev2 = _Options_1$Options$ev.xField,
+          xField = _Options_1$Options$ev2 === void 0 ? '' : _Options_1$Options$ev2,
+          _Options_1$Options$ev3 = _Options_1$Options$ev.yFields,
+          yFields = _Options_1$Options$ev3 === void 0 ? [] : _Options_1$Options$ev3,
+          _Options_1$Options$ev4 = _Options_1$Options$ev.y2Fields,
+          y2Fields = _Options_1$Options$ev4 === void 0 ? [] : _Options_1$Options$ev4,
+          fieldTypes = _Options_1$Options$ev.fieldTypes;
+
+      return {
+        xField: xField,
+        yFields: [].concat(_toConsumableArray(yFields), _toConsumableArray(y2Fields)),
+        fieldTypes: fieldTypes
+      };
+    } catch (e) {
+      return {
+        xField: undefined,
+        yFields: [],
+        fieldTypes: []
+      };
+    }
+  }, [options, context, dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint]);
+  return xAndYFieldsWithTypes;
+};
+
+exports.default = useGetXAndYFields;
 
 /***/ }),
 
-/***/ 6:
+/***/ 68:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2353,47 +3387,75 @@ module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VizBehavior = void 0;
-var VizBehavior;
+exports.getFeatureFlag = void 0;
 
-(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}
-   */
+var FeatureFlags_1 = __webpack_require__(69);
 
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
+var getFeatureFlag = function getFeatureFlag(context, flagName) {
+  // look for feature flag in context first
+  if (context && Object.keys(context).find(function (key) {
+    return key === flagName;
+  })) {
+    return context[flagName];
+  } // fall back to defaults
+
+
+  if (Object.keys(FeatureFlags_1.default).find(function (key) {
+    return key === flagName;
+  })) {
+    return FeatureFlags_1.default[flagName];
+  } // fall back to false
+
+
+  return false;
+};
+
+exports.getFeatureFlag = getFeatureFlag;
 
 /***/ }),
 
-/***/ 60:
+/***/ 69:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes");
+module.exports = require("@splunk/visualization-context/FeatureFlags");
 
 /***/ }),
 
 /***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
+
+/***/ }),
+
+/***/ 75:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var i18n_1 = __webpack_require__(2);
+
+var background = function background(_ref) {
+  var label = _ref.label,
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
+  return [{
+    label: (0, i18n_1._)(label || 'Background'),
+    option: 'backgroundColor',
+    editor: 'editor.color',
+    editorProps: {
+      labelPosition: labelPosition || 'top',
+      themes: themes
+    }
+  }];
+};
+
+exports.default = background;
 
 /***/ }),
 
@@ -2404,17 +3466,24 @@ module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
-/***/ 83:
+/***/ 81:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/utils/types");
+module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
+
+/***/ }),
+
+/***/ 82:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/themes");
 
 /***/ }),
 
 /***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ })