@splunk/visualizations 26.4.1 → 27.0.0

package/Markdown.js

@@ -1,3362 +1,1791 @@
-/*!
- * Copyright © 2024 Splunk Inc.
- * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
- * in part without a valid written license from Splunk Inc. is PROHIBITED.
- */
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 433);
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ 0:
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-
-/***/ 1:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
-/***/ 10:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/numberUtils");
-
-/***/ }),
-
-/***/ 103:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-encoding/utils/types");
-
-/***/ }),
-
-/***/ 11:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/Message");
-
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
-/***/ 13:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/variables");
-
-/***/ }),
-
-/***/ 131:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Paragraph");
-
-/***/ }),
-
-/***/ 14:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+/* Copyright © 2020 Splunk Inc.
+SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
+in part without a valid written license from Splunk Inc. is PROHIBITED. */
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Markdown/index.ts
+var Markdown_exports2 = {};
+__export(Markdown_exports2, {
+  FONT_SIZES: () => FONT_SIZES,
+  computeVizProps: () => computeVizProps,
+  config: () => config_default,
+  default: () => Markdown_default2,
+  getFontMap: () => getFontMap,
+  themes: () => themes2
 });
-exports.downsampleDataSources = exports.calculateDownsamplingThreshold = exports.calculateThresholdOnRangeSelect = exports.isDownsamplingEnabledForViz = exports.convertToArrOfObjects = void 0;
+module.exports = __toCommonJS(Markdown_exports2);
 
-var numberUtils_1 = __webpack_require__(10);
-
-var interfaces_1 = __webpack_require__(39); // TODO: utilize this fn in ParallelCoordinates
+// esm-externals:lodash
+var lodash_exports = {};
+__export(lodash_exports, {
+  default: () => lodash_default
+});
+var defaultImport = __toESM(require("lodash"));
+__reExport(lodash_exports, require("lodash"));
+var lodash_default = "default" in defaultImport ? defaultImport.default : defaultImport;
+
+// esm-externals:@splunk/visualization-encoding/utils/types
+var types_exports = {};
+__export(types_exports, {
+  default: () => types_default
+});
+var defaultImport2 = __toESM(require("@splunk/visualization-encoding/utils/types"));
+__reExport(types_exports, require("@splunk/visualization-encoding/utils/types"));
+var types_default = "default" in defaultImport2 ? defaultImport2.default : defaultImport2;
+
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => react_default
+});
+var defaultImport3 = __toESM(require("react"));
+__reExport(react_exports, require("react"));
+var react_default = "default" in defaultImport3 ? defaultImport3.default : defaultImport3;
+
+// esm-externals:@splunk/visualizations-shared/style
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+var defaultImport4 = __toESM(require("@splunk/visualizations-shared/style"));
+__reExport(style_exports, require("@splunk/visualizations-shared/style"));
+var style_default = "default" in defaultImport4 ? defaultImport4.default : defaultImport4;
+
+// esm-externals:@splunk/react-ui/Markdown
+var Markdown_exports = {};
+__export(Markdown_exports, {
+  default: () => Markdown_default
+});
+var defaultImport5 = __toESM(require("@splunk/react-ui/Markdown"));
+__reExport(Markdown_exports, require("@splunk/react-ui/Markdown"));
+var Markdown_default = "default" in defaultImport5 ? defaultImport5.default : defaultImport5;
+
+// esm-externals:styled-components
+var styled_components_exports = {};
+__export(styled_components_exports, {
+  default: () => styled_components_default
+});
+var defaultImport6 = __toESM(require("styled-components"));
+__reExport(styled_components_exports, require("styled-components"));
+var styled_components_default = "default" in defaultImport6 ? defaultImport6.default : defaultImport6;
+
+// esm-externals:prop-types
+var prop_types_exports = {};
+__export(prop_types_exports, {
+  default: () => prop_types_default
+});
+var defaultImport7 = __toESM(require("prop-types"));
+__reExport(prop_types_exports, require("prop-types"));
+var prop_types_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport8 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
+// esm-externals:@splunk/react-ui/Heading
+var Heading_exports = {};
+__export(Heading_exports, {
+  default: () => Heading_default
+});
+var defaultImport9 = __toESM(require("@splunk/react-ui/Heading"));
+__reExport(Heading_exports, require("@splunk/react-ui/Heading"));
+var Heading_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/react-ui/Paragraph
+var Paragraph_exports = {};
+__export(Paragraph_exports, {
+  default: () => Paragraph_default
+});
+var defaultImport10 = __toESM(require("@splunk/react-ui/Paragraph"));
+__reExport(Paragraph_exports, require("@splunk/react-ui/Paragraph"));
+var Paragraph_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// esm-externals:@splunk/react-ui/List
+var List_exports = {};
+__export(List_exports, {
+  default: () => List_default
+});
+var defaultImport11 = __toESM(require("@splunk/react-ui/List"));
+__reExport(List_exports, require("@splunk/react-ui/List"));
+var List_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// esm-externals:@splunk/react-ui/Code
+var Code_exports = {};
+__export(Code_exports, {
+  default: () => Code_default
+});
+var defaultImport12 = __toESM(require("@splunk/react-ui/Code"));
+__reExport(Code_exports, require("@splunk/react-ui/Code"));
+var Code_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+
+// esm-externals:@splunk/themes/getSettingsFromThemedProps
+var getSettingsFromThemedProps_exports = {};
+__export(getSettingsFromThemedProps_exports, {
+  default: () => getSettingsFromThemedProps_default
+});
+var defaultImport13 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+__reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
+var getSettingsFromThemedProps_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+
+// esm-externals:@splunk/visualization-encoding/Options
+var Options_exports = {};
+__export(Options_exports, {
+  default: () => Options_default
+});
+var defaultImport14 = __toESM(require("@splunk/visualization-encoding/Options"));
+__reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
+var Options_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+
+// esm-externals:@splunk/visualizations-shared/SanitizeProps
+var SanitizeProps_exports = {};
+__export(SanitizeProps_exports, {
+  default: () => SanitizeProps_default
+});
+var defaultImport15 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+__reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
+var SanitizeProps_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+
+// esm-externals:@splunk/visualization-context/TimezoneContext
+var TimezoneContext_exports = {};
+__export(TimezoneContext_exports, {
+  default: () => TimezoneContext_default
+});
+var defaultImport16 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+__reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
+var TimezoneContext_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
+
+// esm-externals:@splunk/moment
+var moment_exports = {};
+__export(moment_exports, {
+  default: () => moment_default
+});
+var defaultImport17 = __toESM(require("@splunk/moment"));
+__reExport(moment_exports, require("@splunk/moment"));
+var moment_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
+
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport18 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
+
+// esm-externals:@splunk/visualizations-shared/hocUtils
+var hocUtils_exports = {};
+__export(hocUtils_exports, {
+  default: () => hocUtils_default
+});
+var defaultImport19 = __toESM(require("@splunk/visualizations-shared/hocUtils"));
+__reExport(hocUtils_exports, require("@splunk/visualizations-shared/hocUtils"));
+var hocUtils_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// esm-externals:@splunk/visualizations-shared/JSONSchemaUtils
+var JSONSchemaUtils_exports = {};
+__export(JSONSchemaUtils_exports, {
+  default: () => JSONSchemaUtils_default
+});
+var defaultImport20 = __toESM(require("@splunk/visualizations-shared/JSONSchemaUtils"));
+__reExport(JSONSchemaUtils_exports, require("@splunk/visualizations-shared/JSONSchemaUtils"));
+var JSONSchemaUtils_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+
+// esm-externals:@splunk/async-dynamic-options-evaluator
+var async_dynamic_options_evaluator_exports = {};
+__export(async_dynamic_options_evaluator_exports, {
+  default: () => async_dynamic_options_evaluator_default
+});
+var defaultImport21 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+__reExport(async_dynamic_options_evaluator_exports, require("@splunk/async-dynamic-options-evaluator"));
+var async_dynamic_options_evaluator_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport22 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
+// src/common/interfaces/VizActionHandler.ts
+var DefaultVizActionHandler = class {
+  focus() {
+  }
+  snapshot() {
+    return null;
+  }
+};
 
-var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
-  if (!columns || !columns[0] || !columns[0].length) return [];
-  var data = [];
+// src/common/SplunkVisualization.tsx
+var INITIAL_HEIGHT = 250;
+var SplunkVisualization = class {
+};
+SplunkVisualization.propTypes = {
+  /**
+   * display mode
+   */
+  mode: prop_types_exports.oneOf(["view", "edit", "export"]).isRequired,
+  /**
+   * width in pixel or string, defaults to 100%
+   */
+  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]).isRequired,
+  /**
+   * height in pixel or string
+   */
+  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]).isRequired,
+  /**
+   * visualization context used for dynamic option evaluation
+   */
+  context: prop_types_exports.object,
+  /**
+   * visualization formatting options
+   */
+  options: prop_types_exports.object,
+  /**
+   * A callback to update formatting options
+   */
+  onOptionsChange: prop_types_exports.func,
+  /**
+   * datasource state which include data and request params, object key indicate the datasource type.
+   */
+  dataSources: prop_types_exports.objectOf(
+    prop_types_exports.shape({
+      /**
+       * current request params
+       */
+      requestParams: prop_types_exports.object,
+      /**
+       * current dataset
+       */
+      data: prop_types_exports.shape({
+        fields: prop_types_exports.array,
+        columns: prop_types_exports.array
+      }),
+      /**
+       * error
+       */
+      error: prop_types_exports.shape({
+        level: prop_types_exports.string,
+        message: prop_types_exports.string
+      }),
+      /**
+       * meta data that came with the dataset
+       */
+      meta: prop_types_exports.object
+    })
+  ),
+  /**
+   * A callback to trigger event
+   */
+  onEventTrigger: prop_types_exports.func,
+  /**
+   * Inform viz if there are handlers listening to events
+   */
+  hasEventHandlers: prop_types_exports.bool,
+  /**
+   * A callback to communicate computed props to a consumer
+   */
+  onComputedProps: prop_types_exports.func,
+  /**
+   * A callback to obtain visualization api
+   */
+  vizActionHandlerRef: prop_types_exports.func,
+  loading: prop_types_exports.bool,
+  theme: prop_types_exports.object,
+  /**
+   * A callback to request new data with updated request params
+   */
+  onRequestParamsChange: prop_types_exports.func
+};
+/**
+ *
+ */
+SplunkVisualization.defaultProps = {
+  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
+  width: "100%",
+  height: INITIAL_HEIGHT,
+  dataSources: {},
+  onEventTrigger: () => ({}),
+  mode: "view",
+  hasEventHandlers: false,
+  options: {},
+  context: {},
+  onOptionsChange: () => ({}),
+  vizActionHandlerRef: () => new DefaultVizActionHandler(),
+  onComputedProps: () => ({}),
+  loading: false,
+  onRequestParamsChange: lodash_exports.noop
+};
+var SplunkVisualization_default = SplunkVisualization;
 
-  var _loop = function _loop(i) {
-    var newObj = {};
-    fields.forEach(function (field, index) {
-      var fieldName = typeof field === 'string' ? field : field.name;
+// src/common/interfaces/DataSource.ts
+var validSortDirs = ["asc", "desc", "none"];
 
-      if (columns[index][i] === '') {
-        newObj[fieldName] = null;
+// src/common/hooks/getSorting.ts
+var SortParamsPropTypes = prop_types_exports.shape({
+  currentSortKey: prop_types_exports.string,
+  currentSortDir: prop_types_exports.oneOf(validSortDirs),
+  onSort: prop_types_exports.func
+});
+var getSortingParams = ({ requestParams, onRequestParamsChange }) => {
+  let currentSortKey;
+  let currentSortDir;
+  const nextSortDirMap = {
+    asc: "desc",
+    desc: "asc",
+    none: "asc"
+  };
+  let onSort;
+  if (typeof onRequestParamsChange === "function") {
+    if (requestParams && (0, lodash_exports.has)(requestParams, "sort")) {
+      currentSortKey = Object.keys(requestParams.sort).shift();
+      currentSortDir = requestParams.sort[currentSortKey];
+    }
+    onSort = (e, { sortKey, sortDir }) => {
+      if (typeof sortKey === "string") {
+        const nextSortDir = (0, lodash_exports.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : "none";
+        onRequestParamsChange(__spreadValues(__spreadValues({}, requestParams), { offset: 0, sort: { [sortKey]: nextSortDir } }));
       } else {
-        newObj[fieldName] = columns[index][i];
+        onRequestParamsChange(requestParams);
       }
-    });
-    data.push(newObj);
+    };
+  }
+  return {
+    currentSortKey,
+    currentSortDir,
+    onSort
+  };
+};
+
+// src/common/hooks/getPagination.ts
+var PaginatorParamsPropTypes = prop_types_exports.shape({
+  isPaging: prop_types_exports.bool,
+  current: prop_types_exports.number,
+  totalPages: prop_types_exports.number,
+  onChange: prop_types_exports.func
+});
+var getPaginationParams = ({
+  requestParams,
+  meta,
+  onRequestParamsChange
+}) => {
+  const totalCount = meta && meta.totalCount || 0;
+  const offset = requestParams && requestParams.offset || 0;
+  const count = requestParams && requestParams.count;
+  const totalPages = typeof count === "number" && count > 0 ? Math.ceil(totalCount / count) : 0;
+  const current = typeof count === "number" && count > 0 ? Math.floor(offset / count) + 1 : 0;
+  const isPaging = totalPages > 1 && typeof onRequestParamsChange === "function";
+  const onChangeHandler = (e, { page, count: countArg }) => {
+    const newParams = (0, lodash_exports.cloneDeep)(requestParams);
+    if (typeof countArg === "number") {
+      newParams.count = countArg;
+      newParams.offset = 0;
+    }
+    const pageCount = typeof newParams.count === "number" ? newParams.count : 10;
+    if (typeof page === "number" && page > 0) {
+      newParams.count = pageCount;
+      newParams.offset = (page - 1) * pageCount;
+    }
+    onRequestParamsChange(newParams);
+  };
+  return {
+    isPaging,
+    current,
+    totalPages,
+    onChange: typeof onRequestParamsChange === "function" ? onChangeHandler : lodash_exports.noop
   };
+};
 
-  for (var i = 0; i < columns[0].length; i += 1) {
-    _loop(i);
+// src/common/hooks/useDeepMemo.ts
+var useDeepMemo = (fn, dependencies) => {
+  const ref = (0, react_exports.useRef)();
+  if (!ref.current || !(0, lodash_exports.isEqual)(dependencies, ref.current.dependencies)) {
+    ref.current = {
+      dependencies,
+      value: fn()
+    };
   }
+  return ref.current.value;
+};
 
-  return data;
+// esm-externals:@splunk/ui-utils/i18n
+var i18n_exports = {};
+__export(i18n_exports, {
+  default: () => i18n_default
+});
+var defaultImport23 = __toESM(require("@splunk/ui-utils/i18n"));
+__reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
+var i18n_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// esm-externals:@splunk/visualizations-shared/Message
+var Message_exports = {};
+__export(Message_exports, {
+  default: () => Message_default
+});
+var defaultImport24 = __toESM(require("@splunk/visualizations-shared/Message"));
+__reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
+var Message_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+
+// esm-externals:@splunk/visualizations-shared/colorUtils
+var colorUtils_exports = {};
+__export(colorUtils_exports, {
+  default: () => colorUtils_default
+});
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
+__reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
+var colorUtils_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+
+// esm-externals:@splunk/visualizations-shared/SizeAwareWrapper
+var SizeAwareWrapper_exports = {};
+__export(SizeAwareWrapper_exports, {
+  default: () => SizeAwareWrapper_default
+});
+var defaultImport26 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+__reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var SizeAwareWrapper_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+
+// src/common/hocs/FixedSizeContainer.tsx
+var Item = styled_components_default.div.attrs(({ width }) => ({
+  style: {
+    width: (0, style_exports.toPx)(width)
+  }
+}))`
+    position: relative;
+    background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
+`;
+var FixSizeItem = styled_components_default.div.attrs(({ width, height }) => ({
+  style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
+}))`
+    position: relative;
+    flex-direction: column;
+    flex: 1;
+    display: flex;
+    background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
+`;
+var ItemContent = styled_components_default.div`
+    position: relative;
+    min-height: 100px;
+    width: 100%;
+`;
+var FixSizeItemContent = styled_components_default.div`
+    min-height: 0px;
+    flex: 1;
+    position: relative;
+    box-sizing: border-box;
+`;
+var withFixedSizeContainer = (Viz) => {
+  const FixedSizeContainer = (props) => {
+    const { width, height, backgroundColor } = props;
+    const cachedHandleResize = react_exports.useCallback((w, h) => {
+      setContainerWidth(w);
+      setContainerHeight(h);
+    }, []);
+    const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
+    const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
+    if (!height) {
+      return /* @__PURE__ */ react_exports.createElement(Item, { "data-test": "item", width, backgroundColor }, /* @__PURE__ */ react_exports.createElement(ItemContent, null, /* @__PURE__ */ react_exports.createElement(Viz, __spreadValues({}, props))));
+    }
+    return /* @__PURE__ */ react_exports.createElement(
+      FixSizeItem,
+      {
+        "data-test": "fix-size-item",
+        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        width,
+        height,
+        backgroundColor
+      },
+      /* @__PURE__ */ react_exports.createElement(FixSizeItemContent, null, /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }), /* @__PURE__ */ react_exports.createElement(Viz, __spreadProps(__spreadValues({}, props), { width: containerWidth, height: containerHeight })))
+    );
+  };
+  FixedSizeContainer.displayName = "withFixedSizeContainer";
+  return FixedSizeContainer;
 };
+var FixedSizeContainer_default = withFixedSizeContainer;
 
-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
+// src/common/components/MissingPropsMessage.tsx
+var isMissing = (v) => {
+  return v === null || v === void 0;
+};
+var missingKeys = (keys, target) => keys.filter((k) => isMissing(target[k]));
+var propTypes = {
+  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: prop_types_exports.string,
+  missingProps: prop_types_exports.arrayOf(prop_types_exports.string)
+};
+var MissingPropsMessage = (props) => {
+  const { width, height, missingProps } = props;
+  return /* @__PURE__ */ react_exports.createElement(
+    Message_default,
+    {
+      "data-test": "message",
+      width,
+      height,
+      message: (0, i18n_exports._)(`Missing property: ${missingProps.join(", ")}`)
+    }
+  );
+};
+MissingPropsMessage.propTypes = propTypes;
+MissingPropsMessage.defaultProps = {
+  width: "100%",
+  height: 250
+};
+var MissingPropsMessage_default = FixedSizeContainer_default(MissingPropsMessage);
+
+// src/common/utils/hocUtils.ts
+var extendStaticWrapperProps = ({
+  Wrapper,
+  Visualization
+}) => {
+  const extendProperties = ["propTypes", "defaultProps", "config"];
+  extendProperties.forEach((prop) => {
+    if (Visualization[prop]) {
+      Wrapper[prop] = Visualization[prop];
+    }
+  });
+};
 
-var largestTriangleThreeBuckets = function largestTriangleThreeBuckets(data, threshold, preferredDownsampleIndices) {
-  var dataLength = data.length;
-  var downsampledIndices = [];
+// src/common/hocs/withEditModeCover.tsx
+var Cover = styled_components_default.div`
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+`;
+var Blocker = styled_components_default.div.attrs({
+  "data-splunk-visualization-version": "27.0.0 - 9bf093b7d"
+})`
+    position: relative;
+    width: 100%;
+    height: 100%;
+`;
+var withEditModeCover = (Visualization, disableEditModeCover) => {
+  const Wrapper = (props) => {
+    const { mode } = props;
+    const showEditCover = mode === "edit" && !disableEditModeCover;
+    return /* @__PURE__ */ react_exports.createElement(Blocker, null, /* @__PURE__ */ react_exports.createElement(Visualization, __spreadValues({}, props)), showEditCover && /* @__PURE__ */ react_exports.createElement(Cover, { "data-test": "edit-mode-cover" }));
+  };
+  extendStaticWrapperProps({ Wrapper, Visualization });
+  return Wrapper;
+};
+var withEditModeCover_default = withEditModeCover;
 
-  if (threshold >= dataLength || threshold === 0) {
-    var allIndices = data.map(function (values, index) {
-      return index;
+// esm-externals:@splunk/themes/variables
+var variables_exports = {};
+__export(variables_exports, {
+  default: () => variables_default
+});
+var defaultImport27 = __toESM(require("@splunk/themes/variables"));
+__reExport(variables_exports, require("@splunk/themes/variables"));
+var variables_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+
+// src/common/components/IconPlaceholder.tsx
+var shouldShowIconPlaceholder = (dataSources, loading = false) => {
+  const data = (0, lodash_exports.get)(dataSources, "primary.data.columns[0]", void 0);
+  const noData = data === void 0;
+  const fields = (0, lodash_exports.get)(dataSources, "primary.data.fields[0]", void 0);
+  const noFields = fields === void 0;
+  return loading || noData || noFields;
+};
+var propTypes2 = {
+  icon: prop_types_exports.func,
+  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: prop_types_exports.string,
+  iconColor: prop_types_exports.string
+};
+var IconPlaceholder = (props) => {
+  const { width, height, icon, iconColor } = props;
+  if (icon) {
+    return react_exports.createElement(icon, {
+      style: {
+        left: "50%",
+        top: "50%",
+        color: iconColor,
+        opacity: 0.15,
+        position: "absolute",
+        transform: "translate(-50%, -50%)"
+      },
+      width: "50%",
+      height: "50%",
+      "data-test": "icon-placeholder"
     });
-    return {
-      downsampledData: data,
-      downsampledIndices: allIndices
-    }; // Nothing to do
   }
+  return /* @__PURE__ */ react_exports.createElement(Message_default, { width, height, level: "warning", message: (0, i18n_exports._)("No DataSource Connected") });
+};
+IconPlaceholder.propTypes = propTypes2;
+IconPlaceholder.defaultProps = {
+  width: "100%",
+  height: 250
+};
+var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
-  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
+// src/common/hocs/withPlaceholder.tsx
+var withPlaceholder = (Visualization, useIconPlaceholder = shouldShowIconPlaceholder) => {
+  const { config: config2 } = Visualization;
+  const { themes: themes3 } = config2;
+  const Wrapper = (props) => {
+    var _a, _b;
+    const { dataSources, loading, options, height, width } = props;
+    const showPlaceholder = useIconPlaceholder(dataSources, loading, options);
+    const bgColorFromTheme = (0, colorUtils_exports.isColor)(options == null ? void 0 : options.backgroundColor) ? options == null ? void 0 : options.backgroundColor : (_a = themes3 == null ? void 0 : themes3.defaultBackgroundColor) == null ? void 0 : _a.call(themes3, props);
+    const icon = (_b = config2.placeholderIcon) != null ? _b : config2.icon;
+    const iconColor = variables_default.contentColorActive(props);
+    if (config2.supports.includes("placeholder" /* PLACEHOLDER */) && showPlaceholder) {
+      return /* @__PURE__ */ react_exports.createElement(
+        IconPlaceholder_default,
+        {
+          "data-test": "icon-placeholder",
+          icon,
+          width,
+          height,
+          backgroundColor: bgColorFromTheme,
+          iconColor
+        }
+      );
+    }
+    return /* @__PURE__ */ react_exports.createElement(Visualization, __spreadValues({}, props));
+  };
+  extendStaticWrapperProps({ Wrapper, Visualization });
+  return Wrapper;
+};
+var withPlaceholder_default = withPlaceholder;
 
-  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;
+// esm-externals:@splunk/visualizations-shared/numberUtils
+var numberUtils_exports = {};
+__export(numberUtils_exports, {
+  default: () => numberUtils_default
+});
+var defaultImport28 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+__reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
+var numberUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+
+// src/common/utils/dataUtils.ts
+var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
+  const dataLength = data.length;
+  const downsampledIndices = [];
+  if (threshold >= dataLength || threshold === 0) {
+    const allIndices = data.map((values, index) => index);
+    return { downsampledData: data, downsampledIndices: allIndices };
+  }
+  const sampled = [];
+  let sampledIndex = 0;
+  const every = (dataLength - 2) / (threshold - 2);
+  let a = 0;
+  let maxAreaPoint;
+  let maxArea;
+  let area;
+  let nextA;
+  sampled.push(data[a]);
+  downsampledIndices.push(0);
+  for (let i = 0; i < threshold - 2; i++) {
+    let avgX = 0;
+    let avgY = 0;
+    let avgRangeStart = Math.floor((i + 1) * every) + 1;
+    let avgRangeEnd = Math.floor((i + 2) * every) + 1;
     avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
-    var avgRangeLength = avgRangeEnd - avgRangeStart; // eslint-disable-next-line no-plusplus
-
+    const avgRangeLength = avgRangeEnd - avgRangeStart;
     for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
-      avgX += Number(data[avgRangeStart][0]); // * 1 enforces Number (value may be Date)
-
+      avgX += Number(data[avgRangeStart][0]);
       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
-
+    avgY /= avgRangeLength;
+    let rangeOffs = Math.floor((i + 0) * every) + 1;
+    const rangeTo = Math.floor((i + 1) * every) + 1;
+    const pointAX = Number(data[a][0]);
+    const pointAY = data[a][1] * 1;
     maxArea = area = -1;
-    var maxAreaIndex = rangeOffs; // eslint-disable-next-line no-plusplus
-
+    let maxAreaIndex = rangeOffs;
     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
-
+      area = Math.abs(
+        (pointAX - avgX) * (data[rangeOffs][1] - pointAY) - (pointAX - Number(data[rangeOffs][0])) * (avgY - pointAY)
+      ) * 0.5;
       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
-
+        nextA = rangeOffs;
         maxAreaIndex = rangeOffs;
       }
-    } // eslint-disable-next-line no-plusplus
-
-
-    sampled[sampledIndex++] = maxAreaPoint; // Pick this point from the bucket
-
+    }
+    sampled[sampledIndex++] = maxAreaPoint;
     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
-
+    a = nextA;
+  }
+  sampled[sampledIndex++] = data[dataLength - 1];
   downsampledIndices.push(dataLength - 1);
-  return {
-    downsampledData: sampled,
-    downsampledIndices: downsampledIndices
-  };
+  return { downsampledData: sampled, 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, options) {
-  var isNullCoercionEnabled = options.nullValueDisplay === 'zero'; // 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)) || isNullCoercionEnabled && value === null;
-  }) >= 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);
-    var coerceValueToZero = isNullCoercionEnabled && value === null; // 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' && !coerceValueToZero) {
+var strictlyCoerceYColumn = (column, options) => {
+  const isNullCoercionEnabled = options.nullValueDisplay === "zero";
+  const canLooselyCoerceSomeValues = column.findIndex(
+    (value) => (0, numberUtils_exports.startsWithNumber)(`${value}`) || isNullCoercionEnabled && value === null
+  ) >= 0;
+  const coercedColumn = [];
+  const canDownsampleColumn = !column.some((value) => {
+    const coercedValue = Number(value);
+    const coerceValueToZero = isNullCoercionEnabled && value === null;
+    if (Number.isNaN(coercedValue) || coercedValue <= Number.MIN_SAFE_INTEGER || coercedValue >= Number.MAX_SAFE_INTEGER || typeof value !== "string" && typeof value !== "number" && !coerceValueToZero) {
       return true;
-    } // save value and continue to next
-
-
+    }
     coercedColumn.push(coercedValue);
     return false;
   });
   return {
-    canDownsampleColumn: canDownsampleColumn,
-    canLooselyCoerceSomeValues: canLooselyCoerceSomeValues,
+    canDownsampleColumn,
+    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);
-    });
-
+var strictlyCoerceXColumn = (column, fieldType) => {
+  if (fieldType === "number") {
+    const coercedXColumn = column.map((xValue) => 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;
+  } else if (fieldType === "time") {
+    const coercedXColumn = column.map((xValue) => new Date(xValue));
+    if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
+      return coercedXColumn;
     }
   }
-
   return [];
 };
-
-var isDownsamplingEnabledForViz = function isDownsamplingEnabledForViz(_ref) {
-  var vizConfig = _ref.vizConfig;
-
+var isDownsamplingEnabledForViz = ({ 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));
+  return (_a = vizConfig.supports) == null ? void 0 : _a.includes("downsampling" /* DOWNSAMPLING */);
 };
-
-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;
-
-  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;
-    });
-
-    if (firstIndex >= 0 && lastIndex >= 0 && firstIndex <= lastIndex) {
-      return (0, exports.calculateThresholdOnRangeSelect)({
-        firstIndex: firstIndex,
-        lastIndex: lastIndex,
-        dataSources: dataSources,
-        width: width
-      });
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    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') {
+var isColumnStrictlyIncreasing = (column, fieldType) => {
+  return column.every((value, index) => {
+    if (fieldType === "number") {
       if (Number.isNaN(value)) {
         return false;
       }
     }
-
-    if (fieldType === 'time') {
+    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, options) {
-  var xColumn = [];
-  var yColumns = [];
-  var canDownsample = !ds.data.fields.some(function (field, index) {
+var tryToCoerceAllDisplayedFields = (ds, xField, yFields, fieldTypes, options) => {
+  let xColumn = [];
+  const yColumns = [];
+  const canDownsample = !ds.data.fields.some((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;
-
+    const fieldName = (_a = field.name) != null ? _a : field;
+    const fieldType = (_b = fieldTypes[index]) != null ? _b : "unknown";
+    const column = ds.data.columns[index];
+    let hasDisplayedColumnThatCantBeDownsampled = false;
     if (fieldName === xField) {
       xColumn = strictlyCoerceXColumn(column, fieldType);
     } else if (yFields.has(fieldName)) {
-      var _strictlyCoerceYColum = strictlyCoerceYColumn(ds.data.columns[index], options),
-          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
-
-
+      const { coercedColumn, canLooselyCoerceSomeValues, canDownsampleColumn } = strictlyCoerceYColumn(
+        ds.data.columns[index],
+        options
+      );
       hasDisplayedColumnThatCantBeDownsampled = canLooselyCoerceSomeValues && !canDownsampleColumn;
-
       if (hasDisplayedColumnThatCantBeDownsampled) {
         return true;
       }
-
       if (canDownsampleColumn) {
         yColumns.push(coercedColumn);
       }
     }
-
     return false;
   });
-
   if (canDownsample) {
-    return {
-      xColumn: xColumn,
-      yColumns: yColumns
-    };
+    return { xColumn, yColumns };
   }
-
-  return {
-    xColumn: [],
-    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) {
+var pickIndicesFromDataSource = (ds, indices) => {
+  const sortedIndices = Array.from(indices).sort((a, b) => a - b);
+  const slicedColumns = [];
+  ds.data.columns.forEach((column) => {
+    const slicedColumn = [];
+    sortedIndices.forEach((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), {
+  });
+  return __spreadProps(__spreadValues({}, ds), {
+    data: __spreadProps(__spreadValues({}, ds.data), {
       columns: slicedColumns
     })
   });
 };
-
-var downsampleDataSources = function downsampleDataSources(_ref4) {
-  var dataSources = _ref4.dataSources,
-      threshold = _ref4.threshold,
-      options = _ref4.options;
-
+var downsampleDataSources = ({ dataSources, threshold, 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;
-
+  const primaryDS = dataSources == null ? void 0 : dataSources.primary;
+  const numPoints = (_c = (_b = (_a = primaryDS == null ? void 0 : primaryDS.data) == null ? void 0 : _a.columns[0]) == null ? void 0 : _b.length) != null ? _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)) {
+  const { xField, yFields, fieldTypes } = options;
+  if (!xField || !(yFields == null ? void 0 : yFields.length) || !(fieldTypes == null ? 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
-
+  const nonInternalYFields = new Set(yFields.filter((yField) => !yField.startsWith("_")));
+  const maxPointsInDownsample = Math.min(nonInternalYFields.size * threshold, numPoints);
   if (maxPointsInDownsample >= numPoints) {
     return dataSources;
   }
-
-  var _tryToCoerceAllDispla = tryToCoerceAllDisplayedFields(primaryDS, xField, nonInternalYFields, fieldTypes, options),
-      xColumn = _tryToCoerceAllDispla.xColumn,
-      yColumns = _tryToCoerceAllDispla.yColumns;
-
+  const { xColumn, yColumns } = tryToCoerceAllDisplayedFields(
+    primaryDS,
+    xField,
+    nonInternalYFields,
+    fieldTypes,
+    options
+  );
   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) {
+  const downsampledDataSources = __spreadValues({}, dataSources);
+  const downsampledIndices = /* @__PURE__ */ new Set();
+  yColumns.forEach((yColumn, columnIndex) => {
+    const xyPair = yColumn.map((yValue, index) => {
       return [xColumn[index], yValue];
     });
-
     try {
-      var _largestTriangleThree = largestTriangleThreeBuckets(xyPair, threshold, downsampledIndices),
-          downsampledIndicesForSeries = _largestTriangleThree.downsampledIndices;
-
-      downsampledIndicesForSeries.forEach(function (downsampleIndex) {
-        return downsampledIndices.add(downsampleIndex);
-      });
+      const { downsampledIndices: downsampledIndicesForSeries } = largestTriangleThreeBuckets(
+        xyPair,
+        threshold,
+        downsampledIndices
+      );
+      downsampledIndicesForSeries.forEach((downsampleIndex) => downsampledIndices.add(downsampleIndex));
     } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error("Error occurred while downsampling column ".concat(columnIndex), e);
+      console.error(`Error occurred while downsampling column ${columnIndex}`, e);
     }
-  }); // update data columns with downsampled columns
-
+  });
   downsampledDataSources.primary = pickIndicesFromDataSource(primaryDS, downsampledIndices);
   return downsampledDataSources;
 };
 
-exports.downsampleDataSources = downsampleDataSources;
-
-/***/ }),
-
-/***/ 142:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Markdown");
-
-/***/ }),
-
-/***/ 144:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Heading");
-
-/***/ }),
-
-/***/ 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__(5);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(1);
-
-var styled_components_1 = __webpack_require__(4);
-
-var style_1 = __webpack_require__(18);
-
-var colorUtils_1 = __webpack_require__(15);
-
-var SizeAwareWrapper_1 = __webpack_require__(25);
+// src/common/hooks/usePrevious.ts
+function usePrevious(value) {
+  const ref = (0, react_exports.useRef)();
+  (0, react_exports.useEffect)(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
 
-var Item = styled_components_1.default.div.attrs(function (_ref) {
-  var width = _ref.width;
-  return {
-    style: {
-      width: (0, style_1.toPx)(width)
+// src/common/hooks/useGetXAndYFields.tsx
+var useGetXAndYFields = ({
+  shouldEvaluateDSL,
+  options,
+  context,
+  dataSources
+}) => {
+  const { dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint } = (0, react_exports.useMemo)(() => {
+    var _a, _b, _c;
+    if (!shouldEvaluateDSL) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
     }
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__Item",
-  componentId: "sc-1yhgpod-0"
-})(["position:relative;background-color:", "};"], function (props) {
-  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-}); // Use `.attrs()` for highly dynamic styles. Ref: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-
-var FixSizeItem = styled_components_1.default.div.attrs(function (_ref2) {
-  var width = _ref2.width,
-      height = _ref2.height;
-  return {
-    style: Object.assign(Object.assign({}, width && {
-      width: (0, style_1.toPx)(width)
-    }), height && {
-      height: (0, style_1.toPx)(height)
-    })
-  };
-}).withConfig({
-  displayName: "FixedSizeContainer__FixSizeItem",
-  componentId: "sc-1yhgpod-1"
-})(["position:relative;flex-direction:column;flex:1;display:flex;background-color:", "};"], function (props) {
-  return (0, colorUtils_1.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor;
-});
-var ItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__ItemContent",
-  componentId: "sc-1yhgpod-2"
-})(["position:relative;min-height:100px;width:100%;"]);
-var FixSizeItemContent = styled_components_1.default.div.withConfig({
-  displayName: "FixedSizeContainer__FixSizeItemContent",
-  componentId: "sc-1yhgpod-3"
-})(["min-height:0px;flex:1;position:relative;box-sizing:border-box;"]);
-
-var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
-  var FixedSizeContainer = function FixedSizeContainer(props) {
-    var width = props.width,
-        height = props.height,
-        backgroundColor = props.backgroundColor;
-    var cachedHandleResize = React.useCallback(function (w, h) {
-      setContainerWidth(w);
-      setContainerHeight(h);
-    }, []);
-
-    var _React$useState = React.useState(Number(props.width)),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        containerWidth = _React$useState2[0],
-        setContainerWidth = _React$useState2[1];
-
-    var _React$useState3 = React.useState(Number(props.height)),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        containerHeight = _React$useState4[0],
-        setContainerHeight = _React$useState4[1];
-
-    if (!height) {
-      return React.createElement(Item, {
-        "data-test": "item",
-        width: width,
-        backgroundColor: backgroundColor
-      }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
+    if (!((_c = (_b = (_a = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.columns) == null ? void 0 : _c.length)) {
+      return {
+        dataSourcesWithOnlyOnePoint: null,
+        dataFrameWithOnlyOnePoint: null
+      };
     }
-
-    return React.createElement(FixSizeItem, {
-      "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.4.1 - 2b7482c08",
-      width: width,
-      height: height,
-      backgroundColor: backgroundColor
-    }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, {
-      width: width,
-      height: height,
-      onResize: cachedHandleResize
-    }), React.createElement(Viz, Object.assign({}, props, {
-      width: containerWidth,
-      height: containerHeight
-    }))));
-  };
-
-  FixedSizeContainer.displayName = 'withFixedSizeContainer';
-  return FixedSizeContainer;
+    const { primary: primaryDS } = dataSources;
+    const columnsWithOnlyOnePoint = primaryDS.data.columns.map((column) => {
+      return [column[0]];
+    });
+    const filteredDataSources = {
+      primary: __spreadProps(__spreadValues({}, primaryDS), {
+        data: __spreadProps(__spreadValues({}, primaryDS.data), {
+          columns: columnsWithOnlyOnePoint
+        })
+      })
+    };
+    return {
+      dataSourcesWithOnlyOnePoint: filteredDataSources,
+      dataFrameWithOnlyOnePoint: Options_exports.Options.dataFrameFromDataSource(filteredDataSources)
+    };
+  }, [dataSources, shouldEvaluateDSL]);
+  const xAndYFieldsWithTypes = (0, react_exports.useMemo)(() => {
+    try {
+      if (!dataSourcesWithOnlyOnePoint || !dataFrameWithOnlyOnePoint) {
+        return options;
+      }
+      if (!(options == null ? void 0 : options.x) || !(options == null ? void 0 : options.y) && !(options == null ? void 0 : options.y2)) {
+        return options;
+      }
+      const optionsToEvaluate = {
+        x: options.x,
+        xField: "> x | getField()",
+        y: options.y,
+        yFields: options.y ? "> y | getField()" : void 0,
+        y2: options.y2,
+        y2Fields: options.y2 ? "> y2 | getField()" : void 0,
+        fieldTypes: "> primary | getType()"
+      };
+      const { xField = "", yFields = [], y2Fields = [], fieldTypes } = Options_exports.Options.evaluate(
+        { options: optionsToEvaluate, context },
+        dataSourcesWithOnlyOnePoint,
+        () => {
+        },
+        dataFrameWithOnlyOnePoint
+      );
+      return {
+        xField,
+        yFields: [...yFields, ...y2Fields],
+        fieldTypes
+      };
+    } catch (e) {
+      return {
+        xField: void 0,
+        yFields: [],
+        fieldTypes: []
+      };
+    }
+  }, [options, context, dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint]);
+  return xAndYFieldsWithTypes;
 };
+var useGetXAndYFields_default = useGetXAndYFields;
+
+// src/common/hooks/useDownsampleDataSources.tsx
+var downsampleVizOptionProperties = ["nullValueDisplay"];
+var useDownsampleDataSources = ({
+  dataSources,
+  options,
+  context,
+  threshold,
+  isDownsamplingEnabled
+}) => {
+  const isFirstUseEffectCall = (0, react_exports.useRef)(true);
+  const xAndYFieldsWithTypes = useGetXAndYFields_default({
+    shouldEvaluateDSL: isDownsamplingEnabled,
+    options,
+    context,
+    dataSources
+  });
+  const downsampleVizOptions = (0, react_exports.useMemo)(() => (0, lodash_exports.pick)(options, downsampleVizOptionProperties), [options]);
+  const downsampleDSOptions = (0, react_exports.useMemo)(
+    () => __spreadValues(__spreadValues({}, downsampleVizOptions), xAndYFieldsWithTypes),
+    [xAndYFieldsWithTypes, downsampleVizOptions]
+  );
+  const previousDownsampleDSOptions = usePrevious(downsampleDSOptions);
+  const previousDataSources = usePrevious(dataSources);
+  const previousThreshold = usePrevious(threshold);
+  const [downsampledDataSources, setDownsampledDataSources] = (0, react_exports.useState)(() => {
+    return isDownsamplingEnabled ? downsampleDataSources({
+      dataSources,
+      threshold,
+      options: downsampleDSOptions
+    }) : dataSources;
+  });
+  const debouncedDownsampleDataSources = (0, react_exports.useMemo)(() => {
+    return (0, lodash_exports.debounce)(
+      (downsampleOptions) => {
+        const downsampledResult = downsampleDataSources(downsampleOptions);
+        setDownsampledDataSources(downsampledResult);
+      },
+      100,
+      { trailing: true }
+    );
+  }, []);
+  (0, react_exports.useEffect)(() => {
+    if (isFirstUseEffectCall.current) {
+      isFirstUseEffectCall.current = false;
+      return;
+    }
+    if (!isDownsamplingEnabled) {
+      setDownsampledDataSources(dataSources);
+      return;
+    }
+    if ((0, lodash_exports.isEqual)(previousDownsampleDSOptions, downsampleDSOptions) && previousDataSources === dataSources && previousThreshold === threshold) {
+      return;
+    }
+    debouncedDownsampleDataSources({
+      dataSources,
+      options: downsampleDSOptions,
+      // Dont want to re-downsample everytime the options change
+      threshold
+    });
+  }, [
+    dataSources,
+    downsampleDSOptions,
+    debouncedDownsampleDataSources,
+    xAndYFieldsWithTypes,
+    threshold,
+    isDownsamplingEnabled,
+    previousDataSources,
+    previousThreshold,
+    previousDownsampleDSOptions
+  ]);
+  return downsampledDataSources;
+};
+var useDownsampleDataSources_default = useDownsampleDataSources;
 
-exports.default = withFixedSizeContainer;
-
-/***/ }),
-
-/***/ 179:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _taggedTemplateLiteral = __webpack_require__(78);
-
-var _templateObject;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// esm-externals:@splunk/visualization-context/FeatureFlags
+var FeatureFlags_exports = {};
+__export(FeatureFlags_exports, {
+  default: () => FeatureFlags_default
 });
-exports.getFontMap = exports.config = exports.themes = exports.computeVizProps = exports.FONT_SIZES = void 0;
-
-var lodash_1 = __webpack_require__(2);
-
-var types_1 = __webpack_require__(103);
-
-var React = __webpack_require__(1);
-
-var style_1 = __webpack_require__(18);
-
-var Markdown_1 = __webpack_require__(142);
-
-var styled_components_1 = __webpack_require__(4);
-
-var T = __webpack_require__(0);
-
-var themes_1 = __webpack_require__(79);
-
-var Heading_1 = __webpack_require__(144);
-
-var Paragraph_1 = __webpack_require__(131);
-
-var List_1 = __webpack_require__(434);
+var defaultImport29 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+__reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
+var FeatureFlags_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
-var Code_1 = __webpack_require__(435);
-
-var withDashboardViz_1 = __webpack_require__(54);
-
-var config_1 = __webpack_require__(436);
-
-exports.config = config_1.default; // map of valid font sizes with elements' respective pixel sizes
-
-exports.FONT_SIZES = {
-  extraSmall: {
-    h1: 18,
-    h2: 14,
-    h3: 12,
-    p: 10
-  },
-  small: {
-    h1: 20,
-    h2: 16,
-    h3: 14,
-    p: 12
-  },
-  default: {
-    h1: 24,
-    h2: 18,
-    h3: 16,
-    p: 14
-  },
-  large: {
-    h1: 32,
-    h2: 24,
-    h3: 18,
-    p: 16
-  },
-  extraLarge: {
-    h1: 48,
-    h2: 32,
-    h3: 24,
-    p: 18
+// src/common/utils/featureFlagUtils.ts
+var getFeatureFlag = (context, flagName) => {
+  if (context && Object.keys(context).find((key) => key === flagName)) {
+    return context[flagName];
   }
-}; // startsWithHeader is a prop that can be
-// falsy if the markdown text begins with text
-// or the number of heading level;
-// casting heading level below 4 to 4
-// because ReactMarkdown supports heading level 1-4
-
-var MarkdownContainer = styled_components_1.default.div.withConfig({
-  displayName: "Markdown__MarkdownContainer",
-  componentId: "sc-zd3qkg-0"
-})(["overflow:auto;position:relative;box-sizing:border-box;", ";", ";background-color:", ";transform-origin:center;transform:rotate(", "deg);& *:not(code):not(pre):not(code *):not(a){color:", ";}", ";"], function (props) {
-  return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
-}, function (props) {
-  return (0, style_1.toPadding)(props.padding);
-}, function (props) {
-  return props.backgroundColor;
-}, function (props) {
-  return props.rotation || 0;
-}, function (props) {
-  return props.fontColor;
-}, function (_ref) {
-  var startsWithHeader = _ref.startsWithHeader;
-  return startsWithHeader && "\n        h".concat(startsWithHeader >= 4 ? 4 : startsWithHeader, ":first-of-type { \n            margin-top: 0px;\n        }\n    ");
-});
-var CodeBlockContainer = styled_components_1.default.div.withConfig({
-  displayName: "Markdown__CodeBlockContainer",
-  componentId: "sc-zd3qkg-1"
-})(["padding:", ";margin:", " 0;background-color:", ";pre[data-test='code']{margin-bottom:0px;}code{font-size:", "px !important;line-height:", "px !important;}"], (0, themes_1.pick)({
-  enterprise: themes_1.variables.spacingHalf,
-  prisma: (0, styled_components_1.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["10px ", ""])), themes_1.variables.spacingLarge)
-}), (0, themes_1.pick)({
-  enterprise: themes_1.variables.spacingHalf,
-  prisma: themes_1.variables.spacingLarge
-}), (0, themes_1.pick)({
-  enterprise: {
-    light: themes_1.variables.gray96,
-    dark: themes_1.variables.gray22
-  },
-  prisma: themes_1.variables.backgroundColorSection
-}), function (props) {
-  return props.fontSize;
-}, function (props) {
-  return props.fontSize;
-});
-var CodeInlineContainer = styled_components_1.default.code.withConfig({
-  displayName: "Markdown__CodeInlineContainer",
-  componentId: "sc-zd3qkg-2"
-})(["", ";font-family:", ";background-color:", ";"], themes_1.mixins.reset('inline'), themes_1.variables.monoFontFamily, (0, themes_1.pick)({
-  enterprise: {
-    light: themes_1.variables.gray92,
-    dark: themes_1.variables.gray22
-  },
-  prisma: themes_1.variables.neutral200
-})); // retrieves the font map associated with a valid `fontSize` value. If the fontSize
-//  passed is invalid (does not exist in FONT_SIZES), the `default` value is used.
-
-var getFontMap = function getFontMap(fontSize) {
-  var font = fontSize;
-
-  if (!exports.FONT_SIZES[fontSize] && fontSize !== 'custom') {
-    console.error("'".concat(fontSize, "' is not a valid value for Markdown's fontSize option. Using the 'default' font size."));
-    font = 'default';
+  if (Object.keys(FeatureFlags_default).find((key) => key === flagName)) {
+    return FeatureFlags_default[flagName];
   }
-
-  return exports.FONT_SIZES[font];
-};
-
-exports.getFontMap = getFontMap;
-
-var handleLinkClick = function handleLinkClick(e) {
-  return e.stopPropagation();
+  return false;
 };
 
-var StyledA = styled_components_1.default.a.withConfig({
-  displayName: "Markdown__StyledA",
-  componentId: "sc-zd3qkg-3"
-})(["text-decoration:underlined;"]); // returns renderers customized with the appropriate font sizes given the provided `fontSize` value.
-
-var getMarkdownRenderer = function getMarkdownRenderer(fontFamilyStyle, fontSize, customFontSize) {
-  // defaults to customFontSize of 14px if value is invalid
-  var cleanedCustomFontSize = (0, types_1.isNumber)(customFontSize) ? customFontSize : 14;
-  var isCustomFontSize = fontSize === 'custom';
-  /* eslint-disable react/display-name, react/prop-types */
-
-  var fontMap = isCustomFontSize ? {
-    h1: cleanedCustomFontSize * 2.0,
-    h2: cleanedCustomFontSize * 1.5,
-    h3: cleanedCustomFontSize * 1.25,
-    p: cleanedCustomFontSize
-  } : getFontMap(fontSize);
-  return {
-    paragraphRenderer: function paragraphRenderer(_ref2) {
-      var children = _ref2.children;
-      return React.createElement(Paragraph_1.default, {
-        style: Object.assign({
-          fontSize: fontMap.p,
-          lineHeight: "".concat(fontMap.p, "px")
-        }, fontFamilyStyle)
-      }, children);
-    },
-    headingRenderer: function headingRenderer(_ref3) {
-      var children = _ref3.children,
-          level = _ref3.level;
-      return React.createElement(Heading_1.default, {
-        level: level,
-        style: Object.assign({
-          fontSize: fontMap["h".concat(level)],
-          lineHeight: "".concat(fontMap["h".concat(level)], "px")
-        }, fontFamilyStyle)
-      }, children);
+// src/common/withDashboardViz.tsx
+var withDashboardViz = (opts) => {
+  const {
+    ReactViz,
+    vizConfig,
+    computeVizProps: computeVizProps2 = () => {
     },
-    itemRenderer: function itemRenderer(_ref4) {
-      var children = _ref4.children,
-          nodeKey = _ref4.nodeKey;
-      return React.createElement(List_1.default.Item, {
-        style: Object.assign({
-          fontSize: fontMap.p,
-          lineHeight: "".concat(fontMap.p, "px")
-        }, fontFamilyStyle),
-        key: nodeKey
-      }, children);
-    },
-    codeBlockRenderer: function codeBlockRenderer(_ref5) {
-      var language = _ref5.language,
-          literal = _ref5.literal,
-          nodeKey = _ref5.nodeKey;
-      return React.createElement(CodeBlockContainer, {
-        fontSize: fontMap.p
-      }, React.createElement(Code_1.default, {
-        value: literal,
-        language: language,
-        key: nodeKey
-      }));
-    },
-    codeRenderer: function codeRenderer(_ref6) {
-      var literal = _ref6.literal;
-      return React.createElement(CodeInlineContainer, {
-        style: {
-          fontSize: fontMap.p
-        }
-      }, literal);
-    },
-    linkRenderer: function linkRenderer(_ref7) {
-      var href = _ref7.href,
-          children = _ref7.children;
-      return React.createElement(StyledA, {
-        href: href,
-        onClick: handleLinkClick
-      }, children);
+    disableEditModeCover,
+    useIconPlaceholder
+  } = opts;
+  const SanitizedReactViz = (0, SanitizeProps_exports.withSanitizedProps)(ReactViz);
+  const defaultOptions = (0, JSONSchemaUtils_exports.pickFieldFromJSONSchema)(vizConfig.optionsSchema, "default");
+  const DashboardViz = (props) => {
+    var _a;
+    const {
+      mode,
+      hasEventHandlers,
+      dataSources,
+      // type of { [key: string]: DataSource }
+      options,
+      context = {},
+      width,
+      height,
+      onComputedProps,
+      onEventTrigger,
+      theme,
+      onRequestParamsChange
+    } = props;
+    const { serializedTimezone } = react_exports.useContext(TimezoneContext_default);
+    if (serializedTimezone) {
+      if (!moment_default.getDefaultSplunkTimezone()) {
+        moment_default.setDefaultSplunkTimezone(serializedTimezone);
+      }
     }
-  };
-};
-
-var MarkdownVisualization = function MarkdownVisualization(_ref8) {
-  var height = _ref8.height,
-      width = _ref8.width,
-      markdown = _ref8.markdown,
-      backgroundColor = _ref8.backgroundColor,
-      fontColor = _ref8.fontColor,
-      fontFamily = _ref8.fontFamily,
-      fontSize = _ref8.fontSize,
-      customFontSize = _ref8.customFontSize,
-      rotation = _ref8.rotation,
-      hasEventHandlers = _ref8.hasEventHandlers,
-      onMarkdownClick = _ref8.onMarkdownClick;
-
-  var _a;
-
-  var _ref9 = (0, themes_1.useSplunkTheme)(),
-      defaultFontFamily = _ref9.fontFamily; // font-family style for non-code content - default font family appended to custom option value as fallback
-
-
-  var markdownContentFontFamilyStyle = {
-    fontFamily: "".concat(fontFamily, ", ").concat(defaultFontFamily)
-  }; // because DSL evaluation is not guaranteed to return string data if `markdown` is powered by DSL, we do a typecast here
-
-  var stringifiedMarkdown = "".concat(markdown);
-  var renderersForFontSize = getMarkdownRenderer(markdownContentFontFamilyStyle, fontSize, customFontSize);
-  return React.createElement(MarkdownContainer, {
-    "data-test": "markdown-container",
-    padding: [5, 5, 5, 5],
-    width: width,
-    height: height,
-    rotation: rotation,
-    backgroundColor: backgroundColor,
-    fontColor: fontColor,
-    startsWithHeader: (_a = stringifiedMarkdown.trim().match(/^#+/)) === null || _a === void 0 ? void 0 : _a[0].length
-  }, React.createElement(Markdown_1.default, Object.assign({
-    text: stringifiedMarkdown
-  }, renderersForFontSize, {
-    style: {
-      height: '100%',
-      cursor: hasEventHandlers ? 'pointer' : 'inherit'
-    },
-    onClick: onMarkdownClick
-  })));
-};
-
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  markdown: T.string,
-  backgroundColor: T.string,
-  fontColor: T.string,
-  fontFamily: T.string,
-  fontSize: T.string,
-  customFontSize: T.number,
-  rotation: T.number,
-  hasEventHandlers: T.bool,
-  onMarkdownClick: T.func
-};
-var defaultProps = {
-  width: '100%',
-  height: undefined,
-  markdown: '',
-  backgroundColor: 'transparent',
-  fontColor: 'rgba(255, 255, 255, 0.7)',
-  fontFamily: 'Splunk Platform Sans',
-  fontSize: 'default',
-  customFontSize: 14,
-  rotation: 0,
-  hasEventHandlers: false,
-  onMarkdownClick: function onMarkdownClick() {}
-};
-MarkdownVisualization.propTypes = propTypes;
-MarkdownVisualization.defaultProps = defaultProps;
-
-var computeVizProps = function computeVizProps(props) {
-  return props;
-};
-
-exports.computeVizProps = computeVizProps;
-var Markdown = (0, withDashboardViz_1.default)({
-  ReactViz: MarkdownVisualization,
-  vizConfig: config_1.default,
-  computeVizProps: exports.computeVizProps
-});
-var themes = config_1.default.themes;
-exports.themes = themes;
-exports.default = Markdown;
-
-/***/ }),
-
-/***/ 18:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/style");
-
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash");
-
-/***/ }),
-
-/***/ 20:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validOutputModes = exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
-exports.validOutputModes = ['json_cols', 'json'];
-
-/***/ }),
-
-/***/ 21:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(8);
-
-var _createClass = __webpack_require__(24);
-
-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");
-
-/***/ }),
-
-/***/ 25:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
-
-/***/ }),
-
-/***/ 26:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(6);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceConfig = exports.enhanceOptionsSchemaWithDynamicOptions = void 0;
-
-var lodash_1 = __webpack_require__(2); // included for backwards compatibility
-
-
-var visualization_schemas_1 = __webpack_require__(9);
-
-Object.defineProperty(exports, "enhanceOptionsSchemaWithDynamicOptions", {
-  enumerable: true,
-  get: function get() {
-    return visualization_schemas_1.enhanceOptionsSchemaWithDynamicOptions;
-  }
-});
-/**
- * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
- * this function also collapse all editor panels
- * @param vizConfig a Visualization Config
- * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
- * and containing `open: false` for all editor panels in editorConfig
- */
-
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = Object.assign({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: config.open || false
-    });
-  });
-  return enhancedConfig;
-}
-
-exports.enhanceConfig = enhanceConfig;
-/**
- * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
- * Created for editor unit tests
- * @param vizConfig a Visualization Config
- * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
- */
-
-function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
-  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: true
-    });
-  });
-  return editorPanelUncollapsedConfig;
-}
-
-exports.uncollapseEditorConfig = uncollapseEditorConfig;
-
-function isDynamicOption(option) {
-  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
-}
-
-exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
-// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
-
-/**
- * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
- * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
- * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
- * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
- *
- * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
- */
-
-function hasCompatibleContexts(vizContext, presetContext) {
-  var presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(function (contextKey) {
-    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
-  });
-}
-/**
- * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
- */
-
-
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  var presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(function (optionKey) {
-    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
-  });
-}
-/**
- * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
- * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
- *
- * @param {Object} vizContext - the current vizContext definition
- * @param {Object} vizOptions - the current vizOptions definition
- * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
- */
-
-
-function getInitialPreset(vizContext, vizOptions, presets) {
-  return presets.find(function (preset) {
-    var presetContext = (0, lodash_1.get)(preset, ['value', 'context'], {});
-    var presetOptions = (0, lodash_1.get)(preset, ['value', 'options'], {});
-    var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
-    // if not, then the preset is invalid in config.ts
-
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
-
-exports.getInitialPreset = getInitialPreset;
-/**
- * generates number precision values for a Select editor
- *
- * @param {Number} numPrecisionValues - number of integer precision values to generate
- * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
- */
-
-function generatePrecisionValues(numPrecisionValues) {
-  return (0, lodash_1.range)(0, numPrecisionValues + 1).map(function (i) {
-    return {
-      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
-      value: i
-    };
-  });
-}
-
-exports.generatePrecisionValues = generatePrecisionValues;
-/**
- * insert layout in layout array, return a new layout array instead of updating the original
- *
- * @param {EditorLayoutConfig[][]} layout - editor layout
- * @param {Number} index - the index to insert layout item(s)
- * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
- * @returns {EditorLayoutConfig[][]} new editor layout with insertion
- */
-
-var insertLayout = function insertLayout(layout, index) {
-  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    layoutItems[_key - 2] = arguments[_key];
-  }
-
-  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
-};
-
-exports.insertLayout = insertLayout;
-
-/***/ }),
-
-/***/ 27:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/FeatureFlagContext");
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/i18n");
-
-/***/ }),
-
-/***/ 30:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ }),
-
-/***/ 31:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/TimezoneContext");
-
-/***/ }),
-
-/***/ 32:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var react_1 = __webpack_require__(1);
-
-function usePrevious(value) {
-  var ref = (0, react_1.useRef)();
-  (0, react_1.useEffect)(function () {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
-exports.default = usePrevious;
-
-/***/ }),
-
-/***/ 33:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/hocUtils");
-
-/***/ }),
-
-/***/ 34:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
-
-/***/ }),
-
-/***/ 36:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-var i18n_1 = __webpack_require__(3);
-
-var Message_1 = __webpack_require__(11);
-
-var FixedSizeContainer_1 = __webpack_require__(17);
-/**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
- */
-
-
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = (0, lodash_1.get)(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = (0, lodash_1.get)(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
-
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
-/**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
- */
-
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
-
-  if (icon) {
-    return React.createElement(icon, {
-      style: {
-        left: '50%',
-        top: '50%',
-        color: iconColor,
-        opacity: 0.15,
-        position: 'absolute',
-        transform: 'translate(-50%, -50%)'
-      },
-      width: '50%',
-      height: '50%',
-      'data-test': 'icon-placeholder'
-    });
-  }
-
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: (0, i18n_1._)('No DataSource Connected')
-  });
-};
-
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
-
-/***/ }),
-
-/***/ 37:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _defineProperty = __webpack_require__(12);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSortingParams = exports.SortParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-var DataSource_1 = __webpack_require__(20);
-
-exports.SortParamsPropTypes = T.shape({
-  currentSortKey: T.string,
-  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
-  onSort: T.func
-});
-
-var getSortingParams = function getSortingParams(_ref) {
-  var requestParams = _ref.requestParams,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var currentSortKey;
-  var currentSortDir;
-  var nextSortDirMap = {
-    asc: 'desc',
-    desc: 'asc',
-    none: 'asc'
-  };
-  var onSort;
-
-  if (typeof onRequestParamsChange === 'function') {
-    if (requestParams && (0, lodash_1.has)(requestParams, 'sort')) {
-      currentSortKey = Object.keys(requestParams.sort).shift();
-      currentSortDir = requestParams.sort[currentSortKey];
-    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
-
-
-    onSort = function onSort(e, _ref2) {
-      var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
-
-      if (typeof sortKey === 'string') {
-        var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
-        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
-          offset: 0,
-          sort: _defineProperty({}, sortKey, nextSortDir)
-        }));
-      } else {
-        onRequestParamsChange(requestParams);
-      }
-    };
-  }
-
-  return {
-    currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
-  };
-};
-
-exports.getSortingParams = getSortingParams;
-
-/***/ }),
-
-/***/ 38:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-exports.PaginatorParamsPropTypes = T.shape({
-  isPaging: T.bool,
-  current: T.number,
-  totalPages: T.number,
-  onChange: T.func
-});
-
-var getPaginationParams = function getPaginationParams(_ref) {
-  var requestParams = _ref.requestParams,
-      meta = _ref.meta,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var totalCount = meta && meta.totalCount || 0;
-  var offset = requestParams && requestParams.offset || 0;
-  var count = requestParams && requestParams.count;
-  var totalPages = typeof count === 'number' && count > 0 ? Math.ceil(totalCount / count) : 0;
-  var current = typeof count === 'number' && count > 0 ? Math.floor(offset / count) + 1 : 0;
-  var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
-
-  var onChangeHandler = function onChangeHandler(e, _ref2) {
-    var page = _ref2.page,
-        countArg = _ref2.count;
-    var newParams = (0, lodash_1.cloneDeep)(requestParams);
-
-    if (typeof countArg === 'number') {
-      newParams.count = countArg;
-      newParams.offset = 0;
-    }
-
-    var pageCount = typeof newParams.count === 'number' ? newParams.count : 10;
-
-    if (typeof page === 'number' && page > 0) {
-      newParams.count = pageCount;
-      newParams.offset = (page - 1) * pageCount;
-    }
-
-    onRequestParamsChange(newParams);
-  };
-
-  return {
-    isPaging: isPaging,
-    current: current,
-    totalPages: totalPages,
-    onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
-  };
-};
-
-exports.getPaginationParams = getPaginationParams;
-
-/***/ }),
-
-/***/ 39:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function get() {
-        return m[k];
-      }
-    };
-  }
-
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
-};
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-__exportStar(__webpack_require__(40), exports);
-
-__exportStar(__webpack_require__(41), exports);
-
-__exportStar(__webpack_require__(20), exports);
-
-__exportStar(__webpack_require__(42), exports);
-
-__exportStar(__webpack_require__(43), exports);
-
-__exportStar(__webpack_require__(44), exports);
-
-__exportStar(__webpack_require__(45), exports);
-
-__exportStar(__webpack_require__(46), exports);
-
-__exportStar(__webpack_require__(47), exports);
-
-__exportStar(__webpack_require__(21), exports);
-
-__exportStar(__webpack_require__(7), exports);
-
-__exportStar(__webpack_require__(22), exports);
-
-__exportStar(__webpack_require__(48), exports);
-
-__exportStar(__webpack_require__(49), exports);
-
-__exportStar(__webpack_require__(50), exports);
-
-__exportStar(__webpack_require__(51), exports);
-
-__exportStar(__webpack_require__(52), exports);
-
-__exportStar(__webpack_require__(53), exports);
-
-/***/ }),
-
-/***/ 4:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 40:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 41:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- *  A data structure used at runtime to wire up a visualization.
- */
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 42:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 43:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 433:
-/***/ (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__(179), exports);
-
-var Markdown_1 = __webpack_require__(179);
-
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return Markdown_1.default;
-  }
-});
-
-/***/ }),
-
-/***/ 434:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/List");
-
-/***/ }),
-
-/***/ 435:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Code");
-
-/***/ }),
-
-/***/ 436:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(6);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var themes_1 = __webpack_require__(79);
-
-var i18n_1 = __webpack_require__(3);
-
-var visualization_schemas_1 = __webpack_require__(9);
-
-var VizBehavior_1 = __webpack_require__(7);
-
-var VizCategory_1 = __webpack_require__(22);
-
-var configUtils_1 = __webpack_require__(26);
-
-var BackgroundColor_1 = __webpack_require__(72);
-
-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 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: visualization_schemas_1.markdownOptionsSchema,
-  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);
-
-/***/ }),
-
-/***/ 44:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 45:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 46:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 47:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 48:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 49:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/***/ }),
-
-/***/ 5:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/slicedToArray");
-
-/***/ }),
-
-/***/ 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";
-
-
-var _slicedToArray = __webpack_require__(5);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(1);
-
-var lodash_1 = __webpack_require__(2);
-
-var getSettingsFromThemedProps_1 = __webpack_require__(55);
-
-var Options_1 = __webpack_require__(16);
-
-var SanitizeProps_1 = __webpack_require__(56);
-
-var TimezoneContext_1 = __webpack_require__(31);
-
-var moment_1 = __webpack_require__(57);
-
-var FeatureFlagContext_1 = __webpack_require__(27);
-
-var styled_components_1 = __webpack_require__(4);
-
-var hocUtils_1 = __webpack_require__(33);
-
-var JSONSchemaUtils_1 = __webpack_require__(34);
-
-var async_dynamic_options_evaluator_1 = __webpack_require__(58);
-
-var id_1 = __webpack_require__(30);
-
-var SplunkVisualization_1 = __webpack_require__(59);
-
-var VizBehavior_1 = __webpack_require__(7);
-
-var getSorting_1 = __webpack_require__(37);
-
-var getPagination_1 = __webpack_require__(38);
-
-var useDeepMemo_1 = __webpack_require__(60);
-
-var MissingPropsMessage_1 = __webpack_require__(61);
-
-var withEditModeCover_1 = __webpack_require__(62);
-
-var withPlaceholder_1 = __webpack_require__(63);
-
-var useDownsampleDataSources_1 = __webpack_require__(64);
-
-var dataUtils_1 = __webpack_require__(14);
-
-var featureFlagUtils_1 = __webpack_require__(66);
-/**
- * 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), {
-      themeFunc: themeFunc
-    }));
-    /**
-     * PAGE_AND_SORT behavior
-     *
-     * Some visualizations, like table, requires metadata about the datasource,
-     * like total number of results, current count, offset, and sort, for rendering
-     * paginator and sorting direction. In this approach, the visualization
-     * allow users to set 'paginateDataSourceKey' to select which datasource
-     * should the visualization extract the metadata from. It defaults to 'primary' datasource.
-     * The visualization config should set the PAGE_AND_SORT behavior to receive
-     * 'requestParams', 'meta' and onRequestParams callback as props.
-     *
-     * In future, we could automatically detect which all datasources are being used
-     * and bind those magically to pagination/sorting behavior.
-     */
-
-    var dataSourceMetadata = {};
-    var OptionKey = 'paginateDataSourceKey';
-    var paginateDataSourceKey = (0, lodash_1.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || 'primary';
-
-    if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.PAGE_AND_SORT) > -1 && (0, lodash_1.has)(dataSources, paginateDataSourceKey)) {
-      var requestParams = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'requestParams'], {});
-      var meta = (0, lodash_1.get)(dataSources, [paginateDataSourceKey, 'meta'], {});
-
-      var handleRequestParamsChange = function handleRequestParamsChange(payload) {
-        return onRequestParamsChange(paginateDataSourceKey, payload);
-      };
-
-      var sortParams = (0, getSorting_1.getSortingParams)({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      var paginatorParams = (0, getPagination_1.getPaginationParams)({
-        requestParams: requestParams,
-        meta: meta,
-        onRequestParamsChange: handleRequestParamsChange
-      });
-      dataSourceMetadata = {
-        sortParams: sortParams,
-        paginatorParams: paginatorParams
-      };
-    } // if were using webworkers and this is the first render we dont want to show a viz with missing data so we return null
-
-
-    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
-      return null;
-    }
-
-    return React.createElement(SanitizedReactViz, Object.assign({
-      mode: mode,
-      width: width,
-      height: height
-    }, downsamplingProps, evaluatedOptionsToUse, computedVizProps, eventCallbackProps, dataSourceMetadata));
-  };
-
-  DashboardViz.propTypes = Object.assign(Object.assign({}, SplunkVisualization_1.default.propTypes), ReactViz.propTypes);
-  DashboardViz.defaultProps = Object.assign(Object.assign(Object.assign({}, SplunkVisualization_1.default.defaultProps), ReactViz.defaultProps), {
-    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
-    theme: {}
-  }); // attach viz config
-
-  DashboardViz.config = vizConfig; // @ts-ignore: TODO fix sc upgrade TS issues
-
-  return (0, styled_components_1.withTheme)((0, withPlaceholder_1.default)((0, withEditModeCover_1.default)(DashboardViz, disableEditModeCover), useIconPlaceholder));
-};
-
-exports.default = withDashboardViz;
-
-/***/ }),
-
-/***/ 55:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
-
-/***/ }),
-
-/***/ 56:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/SanitizeProps");
-
-/***/ }),
-
-/***/ 57:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/moment");
-
-/***/ }),
-
-/***/ 58:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/async-dynamic-options-evaluator");
-
-/***/ }),
-
-/***/ 59:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _classCallCheck = __webpack_require__(8);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
-/* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
-
-var T = __webpack_require__(0);
-
-var lodash_1 = __webpack_require__(2);
-
-var VizActionHandler_1 = __webpack_require__(21); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
-
-
-exports.INITIAL_WIDTH = 250;
-exports.INITIAL_HEIGHT = 250;
-/**
- * A Splunk visualization
- */
-
-var SplunkVisualization = function SplunkVisualization() {
-  _classCallCheck(this, SplunkVisualization);
-};
-
-SplunkVisualization.propTypes = {
-  /**
-   * display mode
-   */
-  mode: T.oneOf(['view', 'edit', 'export']).isRequired,
-
-  /**
-   * width in pixel or string, defaults to 100%
-   */
-  width: T.oneOfType([T.string, T.number]).isRequired,
-
-  /**
-   * height in pixel or string
-   */
-  height: T.oneOfType([T.string, T.number]).isRequired,
-
-  /**
-   * visualization context used for dynamic option evaluation
-   */
-  context: T.object,
-
-  /**
-   * visualization formatting options
-   */
-  options: T.object,
-
-  /**
-   * A callback to update formatting options
-   */
-  onOptionsChange: T.func,
-
-  /**
-   * datasource state which include data and request params, object key indicate the datasource type.
-   */
-  dataSources: T.objectOf(T.shape({
-    /**
-     * current request params
-     */
-    requestParams: T.object,
-
-    /**
-     * current dataset
-     */
-    data: T.shape({
-      fields: T.array,
-      columns: T.array
-    }),
-
-    /**
-     * error
-     */
-    error: T.shape({
-      level: T.string,
-      message: T.string
-    }),
-
-    /**
-     * meta data that came with the dataset
-     */
-    meta: T.object
-  })),
-
-  /**
-   * A callback to trigger event
-   */
-  onEventTrigger: T.func,
-
-  /**
-   * Inform viz if there are handlers listening to events
-   */
-  hasEventHandlers: T.bool,
-
-  /**
-   * A callback to communicate computed props to a consumer
-   */
-  onComputedProps: T.func,
-
-  /**
-   * A callback to obtain visualization api
-   */
-  vizActionHandlerRef: T.func,
-  loading: T.bool,
-  theme: T.object,
-
-  /**
-   * A callback to request new data with updated request params
-   */
-  onRequestParamsChange: T.func
-};
-/**
- *
- */
-
-SplunkVisualization.defaultProps = {
-  // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
-  width: '100%',
-  height: exports.INITIAL_HEIGHT,
-  dataSources: {},
-  onEventTrigger: function onEventTrigger() {
-    return {};
-  },
-  mode: 'view',
-  hasEventHandlers: false,
-  options: {},
-  context: {},
-  onOptionsChange: function onOptionsChange() {
-    return {};
-  },
-  vizActionHandlerRef: function vizActionHandlerRef() {
-    return new VizActionHandler_1.DefaultVizActionHandler();
-  },
-  onComputedProps: function onComputedProps() {
-    return {};
-  },
-  loading: false,
-  onRequestParamsChange: lodash_1.noop
-};
-exports.default = SplunkVisualization;
-
-/***/ }),
-
-/***/ 6:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
-
-/***/ }),
-
-/***/ 60:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDeepMemo = void 0;
-
-var react_1 = __webpack_require__(1);
-
-var lodash_1 = __webpack_require__(2);
-/**
- * This hook evaluates and stores the result of a passed function and only
- * re-evaluates the function when passed dependencies change.
- *
- * It is different from the internal React useMemo in the following aspects:
- * - it only stores the last evaluated result
- * - it uses a deep equality check to determine if dependencies have changed
- *
- * Inspired by apollo-client's useDeepMemo
- *
- * @param fn the function to be executed and
- * @param dependencies an array of dependencies
- */
-
-
-var useDeepMemo = function useDeepMemo(fn, dependencies) {
-  var ref = (0, react_1.useRef)();
-
-  if (!ref.current || !(0, lodash_1.isEqual)(dependencies, ref.current.dependencies)) {
-    ref.current = {
-      dependencies: dependencies,
-      value: fn()
-    };
-  }
-
-  return ref.current.value;
-};
-
-exports.useDeepMemo = useDeepMemo;
-
-/***/ }),
-
-/***/ 61:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var i18n_1 = __webpack_require__(3);
-
-var Message_1 = __webpack_require__(11);
-
-var FixedSizeContainer_1 = __webpack_require__(17);
-/**
- * @method isMissing
- * @param {any} v
- * @returns {boolean} true if the input value === null or undefined
- */
-
-
-var isMissing = function isMissing(v) {
-  return v === null || v === undefined;
-};
-
-exports.isMissing = isMissing;
-/**
- * @method misskingKeys
- * @param {string[]} keys
- * @param {object} target
- * @returns {string[]} the keys of missing required props
- */
-
-var missingKeys = function missingKeys(keys, target) {
-  return keys.filter(function (k) {
-    return (0, exports.isMissing)(target[k]);
-  });
-};
-
-exports.missingKeys = missingKeys;
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  missingProps: T.arrayOf(T.string)
-};
-/**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
- */
-
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
-    width: width,
-    height: height,
-    message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
-  });
-};
-
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage);
-
-/***/ }),
-
-/***/ 62:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(1);
-
-var styled_components_1 = __webpack_require__(4);
-
-var hocUtils_1 = __webpack_require__(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.4.1 - 2b7482c08"
-}).withConfig({
-  displayName: "withEditModeCover__Blocker",
-  componentId: "sc-1gsbnxb-1"
-})(["position:relative;width:100%;height:100%;"]);
-/**
- * HOC that renders a cover layer in edit mode
- * @method withEditModeCover
- * @param {ExtendedDashViz} Visualization
- * @returns {ExtendedDashViz} Wrapper
- */
-
-var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
-  var Wrapper = function Wrapper(props) {
-    var mode = props.mode;
-    var showEditCover = mode === 'edit' && !disableEditModeCover;
-    return React.createElement(Blocker, null, React.createElement(Visualization, Object.assign({}, props)), showEditCover && React.createElement(Cover, {
-      "data-test": "edit-mode-cover"
-    }));
-  };
-
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
-
-exports.default = withEditModeCover;
-
-/***/ }),
-
-/***/ 63:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var React = __webpack_require__(1);
-
-var colorUtils_1 = __webpack_require__(15);
-
-var variables_1 = __webpack_require__(13);
-
-var IconPlaceholder_1 = __webpack_require__(36);
-
-var VizBehavior_1 = __webpack_require__(7);
-
-var hocUtils_1 = __webpack_require__(23);
-
-var withPlaceholder = function withPlaceholder(Visualization) {
-  var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
-  var config = Visualization.config;
-  var themes = config.themes;
-
-  var Wrapper = function Wrapper(props) {
-    var _a, _b;
-
-    var dataSources = props.dataSources,
-        loading = props.loading,
-        options = props.options,
-        height = props.height,
-        width = props.width;
-    var showPlaceholder = useIconPlaceholder(dataSources, loading, options);
-    var bgColorFromTheme = (0, colorUtils_1.isColor)(options === null || options === void 0 ? void 0 : options.backgroundColor) ? options === null || options === void 0 ? void 0 : options.backgroundColor : (_a = themes === null || themes === void 0 ? void 0 : themes.defaultBackgroundColor) === null || _a === void 0 ? void 0 : _a.call(themes, props);
-    var icon = (_b = config.placeholderIcon) !== null && _b !== void 0 ? _b : config.icon;
-    var iconColor = variables_1.default.contentColorActive(props);
-
-    if (config.supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && showPlaceholder) {
-      return React.createElement(IconPlaceholder_1.default, {
-        "data-test": "icon-placeholder",
-        icon: icon,
-        width: width,
-        height: height,
-        backgroundColor: bgColorFromTheme,
-        iconColor: iconColor
-      });
-    }
-
-    return React.createElement(Visualization, Object.assign({}, props));
-  };
-
-  (0, hocUtils_1.extendStaticWrapperProps)({
-    Wrapper: Wrapper,
-    Visualization: Visualization
-  });
-  return Wrapper;
-};
-
-exports.default = withPlaceholder;
-
-/***/ }),
-
-/***/ 64:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _slicedToArray = __webpack_require__(5);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var react_1 = __webpack_require__(1);
-
-var lodash_1 = __webpack_require__(2);
-
-var dataUtils_1 = __webpack_require__(14);
-
-var usePrevious_1 = __webpack_require__(32);
-
-var useGetXAndYFields_1 = __webpack_require__(65); // Options properties which impact/require re-downsample on change.
-
-
-var downsampleVizOptionProperties = ['nullValueDisplay'];
-
-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
-  }); // Extract viz options that impact downsampling.
-
-  var downsampleVizOptions = (0, react_1.useMemo)(function () {
-    return (0, lodash_1.pick)(options, downsampleVizOptionProperties);
-  }, [options]);
-  var downsampleDSOptions = (0, react_1.useMemo)(function () {
-    return Object.assign(Object.assign({}, downsampleVizOptions), xAndYFieldsWithTypes);
-  }, [xAndYFieldsWithTypes, downsampleVizOptions]);
-  var previousDownsampleDSOptions = (0, usePrevious_1.default)(downsampleDSOptions);
-  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: downsampleDSOptions
-    }) : 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)(previousDownsampleDSOptions, downsampleDSOptions) && 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: downsampleDSOptions,
-      threshold: threshold
-    }); // need to detect if this runs as part of the initial render
-  }, [dataSources, downsampleDSOptions, debouncedDownsampleDataSources, xAndYFieldsWithTypes, threshold, isDownsamplingEnabled, previousDataSources, previousThreshold, previousDownsampleDSOptions]);
-  return downsampledDataSources;
-};
-
-exports.default = useDownsampleDataSources;
-
-/***/ }),
-
-/***/ 65:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _toConsumableArray = __webpack_require__(6);
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var react_1 = __webpack_require__(1);
-
-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)
+    const themeFunc = (themeVar) => {
+      var _a2, _b;
+      return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
     };
-  }, [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;
+    const bgColorFromTheme = themeFunc("defaultBackgroundColor");
+    const {
+      family: currentThemeFamily,
+      colorScheme: currentThemeColorScheme,
+      density: currentThemeDensity
+    } = getSettingsFromThemedProps_default({ theme });
+    let evaluatedOptions = {};
+    const [evaluatedOptionsAsync, setEvaluatedOptionsAsync] = react_exports.useState({});
+    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+    const [visualizationID] = react_exports.useState(`${vizConfig.name} - ${(0, id_exports.createGUID)()}`);
+    const [dataSourcesInState, setDataSourcesInState] = react_exports.useState({});
+    const [dataFramesInState, setDataFramesInState] = react_exports.useState();
+    const [useAsyncEvaluatedOptions, setUseAsyncEvaluatedOptions] = react_exports.useState(
+      Boolean(getFeatureFlag(featureFlagContext, "visualizations_useWebWorkersForDSL"))
+    );
+    const isDownsamplingEnabledByFeatureFlag = Boolean(
+      featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
+    );
+    const isMounted = react_exports.useRef(true);
+    const optionsToEvaluate = react_exports.useMemo(
+      () => ({
+        context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
+        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
+      }),
+      [options, context]
+    );
+    const [threshold, setThreshold] = react_exports.useState(Number(width));
+    const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
+      setThreshold(newThreshold);
+    }, []);
+    const isDownsamplingEnabled = react_exports.useMemo(() => {
+      return isDownsamplingEnabledByFeatureFlag && isDownsamplingEnabledForViz({ vizConfig });
+    }, [isDownsamplingEnabledByFeatureFlag]);
+    const downsamplingProps = react_exports.useMemo(() => {
+      if (!isDownsamplingEnabled) {
+        return {};
       }
-
-      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
+        onDownsamplingThresholdChange,
+        originalDataSources: dataSources
       };
-    } catch (e) {
-      return {
-        xField: undefined,
-        yFields: [],
-        fieldTypes: []
+    }, [dataSources, isDownsamplingEnabled, onDownsamplingThresholdChange]);
+    const downsampledDataSources = useDownsampleDataSources_default({
+      options: optionsToEvaluate.options,
+      context: optionsToEvaluate.context,
+      dataSources,
+      threshold,
+      isDownsamplingEnabled
+    });
+    evaluatedOptions = useDeepMemo(() => {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          const asyncDynamicOptionsEvaluatorParams = {
+            visualizationID,
+            props,
+            options: optionsToEvaluate,
+            dataSources: downsampledDataSources,
+            theme: vizConfig.themes,
+            bypassCloneDeepOptionScope: Boolean(
+              getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+            ),
+            lazyLoadingDataFrame: Boolean(
+              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+            )
+          };
+          async_dynamic_options_evaluator_default.evaluate(asyncDynamicOptionsEvaluatorParams).then((results) => {
+            setEvaluatedOptionsAsync(results.results);
+          }).catch(() => {
+            if (isMounted.current) {
+              setUseAsyncEvaluatedOptions(false);
+            }
+          });
+        } else {
+          let dataFrames = dataFramesInState;
+          if (downsampledDataSources !== dataSourcesInState) {
+            setDataSourcesInState(downsampledDataSources);
+            dataFrames = Options_exports.Options.dataFrameFromDataSource(
+              downsampledDataSources,
+              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+            );
+            setDataFramesInState(dataFrames);
+          }
+          const result = Options_exports.Options.evaluate(
+            optionsToEvaluate,
+            downsampledDataSources,
+            themeFunc,
+            dataFrames,
+            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+          );
+          return result;
+        }
+      } catch (e) {
+        console.error(`unexpected error evaluating options: ${e.message}`);
+        return {};
+      }
+      return {};
+    }, [
+      currentThemeFamily,
+      currentThemeColorScheme,
+      currentThemeDensity,
+      optionsToEvaluate,
+      downsampledDataSources,
+      serializedTimezone,
+      useAsyncEvaluatedOptions
+    ]);
+    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    const isTrellisFeatureFlagOn = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    let clonedEvaluatedOptions = evaluatedOptionsToUse;
+    if (isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.splitByLayout) === "trellis" /* TRELLIS */) {
+      clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
+        backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
+      });
+    }
+    react_exports.useEffect(() => {
+      onComputedProps(clonedEvaluatedOptions);
+    });
+    react_exports.useEffect(() => {
+      return () => {
+        if (useAsyncEvaluatedOptions) {
+          isMounted.current = false;
+          async_dynamic_options_evaluator_default.reset(visualizationID);
+        }
+      };
+    }, []);
+    const { requiredProps = [], supports } = vizConfig;
+    const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
+    if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
+      return /* @__PURE__ */ react_exports.createElement(
+        MissingPropsMessage_default,
+        {
+          "data-test": "missing-props-message",
+          width,
+          height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        }
+      );
+    }
+    const eventCallbackProps = {};
+    if (hasEventHandlers && mode === "view" && vizConfig.supports.indexOf("events" /* EVENTS */) > -1) {
+      const supportedEvents = vizConfig.events;
+      Object.keys(supportedEvents).forEach((eventName) => {
+        const { parentKeys, payloadKeys } = supportedEvents[eventName];
+        const eventCallbackPropName = (0, lodash_exports.camelCase)(`on.${eventName}`);
+        let payload = {};
+        if (Array.isArray(payloadKeys) && payloadKeys.length) {
+          payloadKeys.forEach((p) => {
+            payload[p] = evaluatedOptionsToUse[p];
+          });
+        }
+        eventCallbackProps[eventCallbackPropName] = (ev) => {
+          if (ev && ev.payload) {
+            payload = ev.payload;
+          }
+          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+        };
+        if (parentKeys) {
+          for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
+            const newObject = {};
+            newObject[parentKeys[i]] = eventCallbackProps[eventCallbackPropName];
+            eventCallbackProps[eventCallbackPropName] = newObject;
+          }
+        }
+      });
+    }
+    const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), eventCallbackProps), {
+      themeFunc
+    }));
+    let dataSourceMetadata = {};
+    const OptionKey = "paginateDataSourceKey";
+    const paginateDataSourceKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey] || "primary";
+    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) > -1 && (0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+      const requestParams = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "requestParams"], {});
+      const meta = (0, lodash_exports.get)(dataSources, [paginateDataSourceKey, "meta"], {});
+      const handleRequestParamsChange = (payload) => onRequestParamsChange(paginateDataSourceKey, payload);
+      const sortParams = getSortingParams({
+        requestParams,
+        meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      const paginatorParams = getPaginationParams({
+        requestParams,
+        meta,
+        onRequestParamsChange: handleRequestParamsChange
+      });
+      dataSourceMetadata = {
+        sortParams,
+        paginatorParams
       };
     }
-  }, [options, context, dataSourcesWithOnlyOnePoint, dataFrameWithOnlyOnePoint]);
-  return xAndYFieldsWithTypes;
+    if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ react_exports.createElement(
+      SanitizedReactViz,
+      __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+        mode,
+        width,
+        height
+      }, downsamplingProps), evaluatedOptionsToUse), computedVizProps), eventCallbackProps), dataSourceMetadata)
+    );
+  };
+  DashboardViz.propTypes = __spreadValues(__spreadValues({}, SplunkVisualization_default.propTypes), ReactViz.propTypes);
+  DashboardViz.defaultProps = __spreadProps(__spreadValues(__spreadValues({}, SplunkVisualization_default.defaultProps), ReactViz.defaultProps), {
+    // using withTheme requires component to receive theme prop. In case the consumer did not provide ThemeProvider, a default empty object will prevent warnings.
+    theme: {}
+  });
+  DashboardViz.config = vizConfig;
+  return (0, styled_components_exports.withTheme)(
+    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  );
 };
+var withDashboardViz_default = withDashboardViz;
 
-exports.default = useGetXAndYFields;
-
-/***/ }),
-
-/***/ 66:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+// esm-externals:@splunk/visualization-schemas
+var visualization_schemas_exports = {};
+__export(visualization_schemas_exports, {
+  default: () => visualization_schemas_default
 });
-exports.getFeatureFlag = void 0;
-
-var FeatureFlags_1 = __webpack_require__(67);
-
-var getFeatureFlag = function getFeatureFlag(context, flagName) {
-  // look for feature flag in context first
-  if (context && Object.keys(context).find(function (key) {
-    return key === flagName;
-  })) {
-    return context[flagName];
-  } // fall back to defaults
-
+var defaultImport30 = __toESM(require("@splunk/visualization-schemas"));
+__reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
+var visualization_schemas_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+
+// esm-externals:@splunk/visualizations-shared/configUtils
+var configUtils_exports = {};
+__export(configUtils_exports, {
+  default: () => configUtils_default
+});
+var defaultImport31 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+__reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
+var configUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
-  if (Object.keys(FeatureFlags_1.default).find(function (key) {
-    return key === flagName;
-  })) {
-    return FeatureFlags_1.default[flagName];
-  } // fall back to false
+// src/common/utils/configUtils.ts
+function enhanceConfig(vizConfig) {
+  const enhancedConfig = __spreadValues({}, vizConfig);
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
+    (config2) => {
+      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
+    }
+  );
+  return enhancedConfig;
+}
 
+// src/common/editorConfig/BackgroundColor.ts
+var background = ({
+  label,
+  themes: themes3,
+  labelPosition
+}) => [
+  {
+    label: (0, i18n_exports._)(label || "Background color"),
+    option: "backgroundColor",
+    editor: "editor.color",
+    editorProps: {
+      labelPosition: labelPosition || "top",
+      themes: themes3
+    }
+  }
+];
+var BackgroundColor_default = background;
 
-  return false;
+// src/Markdown/config.ts
+var FONT_OPTIONS = /* @__PURE__ */ 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: 1e4 }
+  }
 };
-
-exports.getFeatureFlag = getFeatureFlag;
-
-/***/ }),
-
-/***/ 67:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-context/FeatureFlags");
-
-/***/ }),
-
-/***/ 7:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VizBehavior = void 0;
-var VizBehavior;
-
-(function (VizBehavior) {
+var size = {
+  initialWidth: 300,
+  initialHeight: 300
+};
+var defaultContext = {};
+var themes = {
+  defaultFontColor: (props) => (0, themes_exports.pick)({
+    enterprise: {
+      dark: themes_exports.variables.textColor(props),
+      light: themes_exports.variables.textColor(props)
+    },
+    prisma: themes_exports.variables.contentColorDefault(props)
+  })(props)
+};
+var editorConfig = [
+  {
+    label: (0, i18n_exports._)("Color and style"),
+    layout: [
+      [
+        {
+          label: (0, i18n_exports._)("Font"),
+          option: "fontColor",
+          editor: "editor.color",
+          editorProps: {
+            labelPosition: "top",
+            themes
+          }
+        },
+        ...BackgroundColor_default({ label: "Background", themes })
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("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_exports._)("Font size"),
+          option: "fontSize",
+          editor: "editor.select",
+          editorProps: {
+            values: [
+              { label: (0, i18n_exports._)("Extra Small"), value: "extraSmall" },
+              { label: (0, i18n_exports._)("Small"), value: "small" },
+              { label: (0, i18n_exports._)("Default"), value: "default" },
+              { label: (0, i18n_exports._)("Large"), value: "large" },
+              { label: (0, i18n_exports._)("Extra Large"), value: "extraLarge" },
+              { label: (0, i18n_exports._)("Custom"), value: "custom" }
+            ]
+          }
+        },
+        {
+          label: (0, i18n_exports._)("Custom font size (px)"),
+          option: "customFontSize",
+          editor: "editor.number",
+          editorProps: {
+            min: 0,
+            labelPosition: "top"
+          },
+          showEditor: ({ options }) => options.fontSize && !FONT_OPTIONS.has(options.fontSize)
+        }
+      ],
+      [
+        {
+          label: (0, i18n_exports._)("Rotation (degrees)"),
+          option: "rotation",
+          editor: "editor.number",
+          editorProps: {
+            min: -360,
+            max: 360
+          }
+        }
+      ]
+    ]
+  },
+  {
+    label: (0, i18n_exports._)("Markdown content"),
+    open: true,
+    layout: [
+      [
+        {
+          label: "",
+          option: "markdown",
+          editor: "editor.markdown"
+        }
+      ]
+    ]
+  }
+];
+var config = {
   /**
-   * 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
-   *
+   * unique viz key
    */
-  VizBehavior["DYNAMIC_OPTIONS"] = "dynamic-options";
-  VizBehavior["EVENTS"] = "events";
-  VizBehavior["DOWNSAMPLING"] = "downsampling";
+  key: "splunk.markdown",
   /**
-   * Placeholder behavior: visualization will display a placeholder rather than fail if any of the `requiredProps` is
-   * missing.
-   * @type {string}
+   * viz name
    */
-
-  VizBehavior["PLACEHOLDER"] = "placeholder";
-  VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
-  VizBehavior["TRELLIS"] = "trellis";
-})(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
-
-/***/ }),
-
-/***/ 72:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var i18n_1 = __webpack_require__(3);
-
-var background = function background(_ref) {
-  var label = _ref.label,
-      themes = _ref.themes,
-      labelPosition = _ref.labelPosition;
-  return [{
-    label: (0, i18n_1._)(label || 'Background color'),
-    option: 'backgroundColor',
-    editor: 'editor.color',
-    editorProps: {
-      labelPosition: labelPosition || 'top',
-      themes: themes
+  name: (0, i18n_exports._)("Markdown"),
+  category: "Comparisons" /* COMPARISONS */,
+  /**
+   * viz icon
+   */
+  icon: null,
+  dataContract,
+  size,
+  defaultContext,
+  optionsSchema: visualization_schemas_exports.markdownOptionsSchema,
+  editorConfig,
+  events: {
+    "markdown.click": {
+      description: "triggered when user clicks on markdown area not formatted as a link"
     }
-  }];
+  },
+  supports: ["dynamic-options" /* DYNAMIC_OPTIONS */, "events" /* EVENTS */],
+  themes
 };
+var config_default = enhanceConfig(config);
 
-exports.default = background;
-
-/***/ }),
-
-/***/ 78:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/taggedTemplateLiteral");
-
-/***/ }),
-
-/***/ 79:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
-/***/ 8:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/classCallCheck");
-
-/***/ }),
-
-/***/ 9:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-schemas");
+// src/Markdown/Markdown.tsx
+var FONT_SIZES = {
+  extraSmall: {
+    h1: 18,
+    h2: 14,
+    h3: 12,
+    p: 10
+  },
+  small: {
+    h1: 20,
+    h2: 16,
+    h3: 14,
+    p: 12
+  },
+  default: {
+    h1: 24,
+    h2: 18,
+    h3: 16,
+    p: 14
+  },
+  large: {
+    h1: 32,
+    h2: 24,
+    h3: 18,
+    p: 16
+  },
+  extraLarge: {
+    h1: 48,
+    h2: 32,
+    h3: 24,
+    p: 18
+  }
+};
+var MarkdownContainer = styled_components_default.div`
+    overflow: auto;
+    position: relative;
+    box-sizing: border-box;
+    ${(props) => (0, style_exports.toDimension)((0, lodash_exports.pick)(props, ["width", "height"]))};
+    ${(props) => (0, style_exports.toPadding)(props.padding)};
+    background-color: ${(props) => props.backgroundColor};
+    transform-origin: center;
+    transform: rotate(${(props) => props.rotation || 0}deg);
+    & *:not(code):not(pre):not(code *):not(a) {
+        color: ${(props) => props.fontColor};
+    }
+    ${({ startsWithHeader }) => startsWithHeader && `
+        h${startsWithHeader >= 4 ? 4 : startsWithHeader}:first-of-type { 
+            margin-top: 0px;
+        }
+    `};
+`;
+var CodeBlockContainer = styled_components_default.div`
+    // from: https://cd.splunkdev.com/devplat/splunk-ui/-/blob/develop/packages/react-ui/src/Markdown/MarkdownStyles.ts
+    padding: ${(0, themes_exports.pick)({
+  enterprise: themes_exports.variables.spacingHalf,
+  prisma: styled_components_exports.css`10px ${themes_exports.variables.spacingLarge}`
+})};
+    margin: ${(0, themes_exports.pick)({
+  enterprise: themes_exports.variables.spacingHalf,
+  prisma: themes_exports.variables.spacingLarge
+})}
+        0;
+    background-color: ${(0, themes_exports.pick)({
+  enterprise: {
+    light: themes_exports.variables.gray96,
+    dark: themes_exports.variables.gray22
+  },
+  prisma: themes_exports.variables.backgroundColorSection
+})};
 
-/***/ })
+    // remove extraneous bottom margin
+    pre[data-test='code'] {
+        margin-bottom: 0px;
+    }
 
-/******/ });
-//# sourceMappingURL=Markdown.js.map
+    // add font-size, as span elements did not inherit <code /> font size in SSC testing
+    code {
+        font-size: ${(props) => props.fontSize}px !important;
+        line-height: ${(props) => props.fontSize}px !important;
+    }
+`;
+var CodeInlineContainer = styled_components_default.code`
+    // from: https://cd.splunkdev.com/devplat/splunk-ui/-/blob/develop/packages/react-ui/src/Markdown/MarkdownStyles.ts
+    ${themes_exports.mixins.reset("inline")};
+    font-family: ${themes_exports.variables.monoFontFamily};
+    background-color: ${(0, themes_exports.pick)({
+  enterprise: {
+    light: themes_exports.variables.gray92,
+    dark: themes_exports.variables.gray22
+  },
+  prisma: themes_exports.variables.neutral200
+})};
+`;
+var getFontMap = (fontSize) => {
+  let font = fontSize;
+  if (!FONT_SIZES[fontSize] && fontSize !== "custom") {
+    console.error(
+      `'${fontSize}' is not a valid value for Markdown's fontSize option. Using the 'default' font size.`
+    );
+    font = "default";
+  }
+  return FONT_SIZES[font];
+};
+var handleLinkClick = (e) => e.stopPropagation();
+var StyledA = styled_components_default.a`
+    text-decoration: underlined;
+`;
+var getMarkdownRenderer = (fontFamilyStyle, fontSize, customFontSize) => {
+  const cleanedCustomFontSize = (0, types_exports.isNumber)(customFontSize) ? customFontSize : 14;
+  const isCustomFontSize = fontSize === "custom";
+  const fontMap = isCustomFontSize ? {
+    h1: cleanedCustomFontSize * 2,
+    h2: cleanedCustomFontSize * 1.5,
+    h3: cleanedCustomFontSize * 1.25,
+    p: cleanedCustomFontSize
+  } : getFontMap(fontSize);
+  return {
+    paragraphRenderer: ({ children }) => {
+      return /* @__PURE__ */ react_exports.createElement(Paragraph_default, { style: __spreadValues({ fontSize: fontMap.p, lineHeight: `${fontMap.p}px` }, fontFamilyStyle) }, children);
+    },
+    headingRenderer: ({ children, level }) => {
+      return /* @__PURE__ */ react_exports.createElement(
+        Heading_default,
+        {
+          level,
+          style: __spreadValues({
+            fontSize: fontMap[`h${level}`],
+            lineHeight: `${fontMap[`h${level}`]}px`
+          }, fontFamilyStyle)
+        },
+        children
+      );
+    },
+    itemRenderer: ({ children, nodeKey }) => {
+      return /* @__PURE__ */ react_exports.createElement(
+        List_default.Item,
+        {
+          style: __spreadValues({ fontSize: fontMap.p, lineHeight: `${fontMap.p}px` }, fontFamilyStyle),
+          key: nodeKey
+        },
+        children
+      );
+    },
+    codeBlockRenderer: ({ language, literal, nodeKey }) => {
+      return /* @__PURE__ */ react_exports.createElement(CodeBlockContainer, { fontSize: fontMap.p }, /* @__PURE__ */ react_exports.createElement(Code_default, { value: literal, language, key: nodeKey }));
+    },
+    codeRenderer: ({ literal }) => {
+      return /* @__PURE__ */ react_exports.createElement(CodeInlineContainer, { style: { fontSize: fontMap.p } }, literal);
+    },
+    linkRenderer: ({ href, children }) => {
+      return /* @__PURE__ */ react_exports.createElement(StyledA, { href, onClick: handleLinkClick }, children);
+    }
+  };
+};
+var MarkdownVisualization = ({
+  height,
+  width,
+  markdown,
+  backgroundColor,
+  fontColor,
+  fontFamily,
+  fontSize,
+  customFontSize,
+  rotation,
+  hasEventHandlers,
+  onMarkdownClick
+}) => {
+  var _a;
+  const { fontFamily: defaultFontFamily } = (0, themes_exports.useSplunkTheme)();
+  const markdownContentFontFamilyStyle = {
+    fontFamily: `${fontFamily}, ${defaultFontFamily}`
+  };
+  const stringifiedMarkdown = `${markdown}`;
+  const renderersForFontSize = getMarkdownRenderer(
+    markdownContentFontFamilyStyle,
+    fontSize,
+    customFontSize
+  );
+  return /* @__PURE__ */ react_exports.createElement(
+    MarkdownContainer,
+    {
+      "data-test": "markdown-container",
+      padding: [5, 5, 5, 5],
+      width,
+      height,
+      rotation,
+      backgroundColor,
+      fontColor,
+      startsWithHeader: (_a = stringifiedMarkdown.trim().match(/^#+/)) == null ? void 0 : _a[0].length
+    },
+    /* @__PURE__ */ react_exports.createElement(
+      Markdown_default,
+      __spreadProps(__spreadValues({
+        text: stringifiedMarkdown
+      }, renderersForFontSize), {
+        style: { height: "100%", cursor: hasEventHandlers ? "pointer" : "inherit" },
+        onClick: onMarkdownClick
+      })
+    )
+  );
+};
+var propTypes3 = {
+  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  markdown: prop_types_exports.string,
+  backgroundColor: prop_types_exports.string,
+  fontColor: prop_types_exports.string,
+  fontFamily: prop_types_exports.string,
+  fontSize: prop_types_exports.string,
+  customFontSize: prop_types_exports.number,
+  rotation: prop_types_exports.number,
+  hasEventHandlers: prop_types_exports.bool,
+  onMarkdownClick: prop_types_exports.func
+};
+var defaultProps = {
+  width: "100%",
+  height: void 0,
+  markdown: "",
+  backgroundColor: "transparent",
+  fontColor: "rgba(255, 255, 255, 0.7)",
+  fontFamily: "Splunk Platform Sans",
+  fontSize: "default",
+  customFontSize: 14,
+  rotation: 0,
+  hasEventHandlers: false,
+  onMarkdownClick: () => {
+  }
+};
+MarkdownVisualization.propTypes = propTypes3;
+MarkdownVisualization.defaultProps = defaultProps;
+var computeVizProps = (props) => {
+  return props;
+};
+var Markdown = withDashboardViz_default({
+  ReactViz: MarkdownVisualization,
+  vizConfig: config_default,
+  computeVizProps
+});
+var { themes: themes2 } = config_default;
+var Markdown_default2 = Markdown;
+//# sourceMappingURL=Markdown.js.map