@splunk/visualizations 26.0.0 → 26.1.1

package/Events.js

@@ -1,5 +1,5 @@
 /*!
- * Copyright © 2018 Splunk Inc.
+ * 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.
  */
@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 202);
+/******/ 	return __webpack_require__(__webpack_require__.s = 203);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -133,6 +133,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
+
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -152,6 +153,7 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
+
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";
@@ -203,11 +205,17 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var style_1 = __webpack_require__(14);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var Item = styled_components_1.default.div.attrs(function (_ref) {
   var width = _ref.width;
   return {
@@ -220,11 +228,11 @@ var Item = styled_components_1.default.div.attrs(function (_ref) {
   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
+}); // 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;
+      height = _ref2.height;
   return {
     style: Object.assign(Object.assign({}, width && {
       width: (0, style_1.toPx)(width)
@@ -246,11 +254,13 @@ 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;
+        height = props.height,
+        backgroundColor = props.backgroundColor;
+
     if (!height) {
       return React.createElement(Item, {
         "data-test": "item",
@@ -258,24 +268,27 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
         backgroundColor: backgroundColor
       }, React.createElement(ItemContent, null, React.createElement(Viz, Object.assign({}, props))));
     }
+
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "26.0.0 - 2f7458907",
+      "data-splunk-visualization-version": "26.1.1 - b6df0a015",
       width: width,
       height: height,
       backgroundColor: backgroundColor
     }, React.createElement(FixSizeItemContent, null, React.createElement(SizeAwareWrapper_1.default, null, function (_ref3) {
       var newWidth = _ref3.width,
-        newHeight = _ref3.height;
+          newHeight = _ref3.height;
       return React.createElement(Viz, Object.assign({}, props, {
         width: newWidth,
         height: newHeight
       }));
     })));
   };
+
   FixedSizeContainer.displayName = 'withFixedSizeContainer';
   return FixedSizeContainer;
 };
+
 exports.default = withFixedSizeContainer;
 
 /***/ }),
@@ -301,9 +314,10 @@ exports.extendStaticWrapperProps = void 0;
  * @param {DashboardVizType} props.Wrapper
  * @param {DashboardVizType} props.Visualization
  */
+
 var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
   var Wrapper = _ref.Wrapper,
-    Visualization = _ref.Visualization;
+      Visualization = _ref.Visualization;
   var extendProperties = ['propTypes', 'defaultProps', 'config'];
   extendProperties.forEach(function (prop) {
     if (Visualization[prop]) {
@@ -312,6 +326,7 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
     }
   });
 };
+
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
@@ -346,24 +361,33 @@ module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var _defineProperty = __webpack_require__(7);
+
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var dynamicOptionsDSLType = {
   type: 'string',
   pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
@@ -373,20 +397,22 @@ var dynamicOptionsDSLType = {
  * @param optionsSchema a visualization's options schema
  * @returns an updated options schema that additionally allows strings starting with > for each option
  */
+
 function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   var enhancedOptionsSchema = {};
   Object.keys(optionsSchema).forEach(function (key) {
     var _a = optionsSchema[key],
-      title = _a.title,
-      description = _a.description,
-      readOnly = _a.readOnly,
-      writeOnly = _a.writeOnly,
-      examples = _a.examples,
-      defaultValue = _a.default,
-      type = _a.type,
-      properties = _a.properties,
-      patternProperties = _a.patternProperties,
-      remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+
     var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
       title: title
     }), description !== undefined && {
@@ -400,12 +426,14 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
     }), defaultValue !== undefined && {
       default: defaultValue
     });
+
     if (type === 'object') {
       enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
         type: type
       }), properties && {
         properties: enhanceOptionsSchemaWithDynamicOptions(properties)
       });
+
       if (patternProperties) {
         var enhancedPatternProperties = {};
         Object.keys(patternProperties).forEach(function (opt) {
@@ -423,6 +451,7 @@ function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
   });
   return enhancedOptionsSchema;
 }
+
 exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
  * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
@@ -431,11 +460,14 @@ exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamic
  * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
  * and containing `open: false` for all editor panels in editorConfig
  */
+
 function enhanceConfig(vizConfig) {
   var enhancedConfig = Object.assign({}, vizConfig);
+
   if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
     enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
+
   enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
     return Object.assign(Object.assign({}, config), {
       open: config.open || false
@@ -443,6 +475,7 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
+
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -450,6 +483,7 @@ exports.enhanceConfig = enhanceConfig;
  * @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) {
@@ -459,13 +493,16 @@ function uncollapseEditorConfig(vizConfig) {
   });
   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
+
+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
@@ -474,6 +511,7 @@ exports.isDynamicOption = isDynamicOption;
  *
  * 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) {
@@ -483,6 +521,8 @@ function hasCompatibleContexts(vizContext, presetContext) {
 /**
  * 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) {
@@ -497,18 +537,21 @@ function hasCompatibleOptions(vizOptions, presetOptions) {
  * @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)
+    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
@@ -516,6 +559,7 @@ exports.getInitialPreset = getInitialPreset;
  * @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 {
@@ -524,6 +568,7 @@ function generatePrecisionValues(numPrecisionValues) {
     };
   });
 }
+
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -533,12 +578,15 @@ exports.generatePrecisionValues = generatePrecisionValues;
  * @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;
 
 /***/ }),
@@ -603,11 +651,17 @@ 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__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @method shouldShowIconPlaceholder
@@ -615,6 +669,8 @@ var FixedSizeContainer_1 = __webpack_require__(13);
  * @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);
@@ -623,6 +679,7 @@ var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources)
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
+
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -637,11 +694,13 @@ var propTypes = {
  * @param {IconPlaceholderProps} props
  * @returns {React.ReactElement}
  */
+
 var IconPlaceholder = function IconPlaceholder(props) {
   var width = props.width,
-    height = props.height,
-    icon = props.icon,
-    iconColor = props.iconColor;
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
   if (icon) {
     return React.createElement(icon, {
       style: {
@@ -653,9 +712,11 @@ var IconPlaceholder = function IconPlaceholder(props) {
         transform: 'translate(-50%, -50%)'
       },
       width: '50%',
-      height: '50%'
+      height: '50%',
+      'data-test': 'icon-placeholder'
     });
   }
+
   return React.createElement(Message_1.default, {
     width: width,
     height: height,
@@ -663,6 +724,7 @@ var IconPlaceholder = function IconPlaceholder(props) {
     message: (0, i18n_1._)('No DataSource Connected')
   });
 };
+
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
@@ -678,21 +740,27 @@ exports.default = (0, FixedSizeContainer_1.default)(IconPlaceholder);
 
 
 var _defineProperty = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
-var DataSource_1 = __webpack_require__(43);
+
+var DataSource_1 = __webpack_require__(34);
+
 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;
+      onRequestParamsChange = _ref.onRequestParamsChange;
   var currentSortKey;
   var currentSortDir;
   var nextSortDirMap = {
@@ -701,15 +769,18 @@ var getSortingParams = function getSortingParams(_ref) {
     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
+    } // 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;
+          sortDir = _ref2.sortDir;
+
       if (typeof sortKey === 'string') {
         var nextSortDir = (0, lodash_1.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
         onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
@@ -721,12 +792,14 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
+
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
+
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
@@ -736,43 +809,68 @@ exports.getSortingParams = getSortingParams;
 "use strict";
 
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validOutputModes = exports.validSegmentationModes = exports.validSortDirs = void 0;
+exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.validSegmentationModes = ['none', 'inner'];
+exports.validOutputModes = ['json_cols', 'json'];
+
+/***/ }),
+/* 35 */
+/***/ (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__(3);
+
 exports.PaginatorParamsPropTypes = T.shape({
   isPaging: T.bool,
   current: T.number,
   totalPages: T.number,
   onChange: T.func
 });
+
 var getPaginationParams = function getPaginationParams(_ref) {
   var requestParams = _ref.requestParams,
-    meta = _ref.meta,
-    onRequestParamsChange = _ref.onRequestParamsChange;
+      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;
+        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,
@@ -780,10 +878,11 @@ var getPaginationParams = function getPaginationParams(_ref) {
     onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
+
 exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
-/* 35 */
+/* 36 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -794,6 +893,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
+
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -810,67 +910,96 @@ var VizCategory;
 })(VizCategory = exports.VizCategory || (exports.VizCategory = {}));
 
 /***/ }),
-/* 36 */
+/* 37 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
-var getSettingsFromThemedProps_1 = __webpack_require__(37);
+
+var getSettingsFromThemedProps_1 = __webpack_require__(38);
+
 var Options_1 = __webpack_require__(30);
-var SanitizeProps_1 = __webpack_require__(38);
+
+var SanitizeProps_1 = __webpack_require__(39);
+
 var TimezoneContext_1 = __webpack_require__(26);
-var moment_1 = __webpack_require__(39);
+
+var moment_1 = __webpack_require__(40);
+
 var FeatureFlagContext_1 = __webpack_require__(21);
+
 var styled_components_1 = __webpack_require__(4);
+
 var hocUtils_1 = __webpack_require__(27);
+
 var JSONSchemaUtils_1 = __webpack_require__(28);
-var async_dynamic_options_evaluator_1 = __webpack_require__(40);
+
+var async_dynamic_options_evaluator_1 = __webpack_require__(41);
+
 var id_1 = __webpack_require__(25);
-var SplunkVisualization_1 = __webpack_require__(41);
+
+var SplunkVisualization_1 = __webpack_require__(42);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var getSorting_1 = __webpack_require__(33);
-var getPagination_1 = __webpack_require__(34);
+
+var getPagination_1 = __webpack_require__(35);
+
 var useDeepMemo_1 = __webpack_require__(44);
+
 var MissingPropsMessage_1 = __webpack_require__(45);
+
 var withEditModeCover_1 = __webpack_require__(46);
+
 var withPlaceholder_1 = __webpack_require__(47);
 /**
  * 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.
+      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;
+        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;
+        serializedTimezone = _React$useContext.serializedTimezone;
+
     if (serializedTimezone) {
       /*
           @splunk/moment currently does not allow us to customize the timezone on a per visualization basis.
@@ -884,38 +1013,51 @@ var withDashboardViz = function withDashboardViz(opts) {
         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;
+      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
+        _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];
+        _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];
+        _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];
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        dataFramesInState = _React$useState8[0],
+        setDataFramesInState = _React$useState8[1];
+
     var _React$useState9 = React.useState(Boolean(featureFlagContext === null || featureFlagContext === void 0 ? void 0 : featureFlagContext.visualizations_useWebWorkersForDSL)),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      useAsyncEvaluatedOptions = _React$useState10[0],
-      setUseAsyncEvaluatedOptions = _React$useState10[1];
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        useAsyncEvaluatedOptions = _React$useState10[0],
+        setUseAsyncEvaluatedOptions = _React$useState10[1];
+
     var isMounted = React.useRef(true);
     evaluatedOptions = (0, useDeepMemo_1.useDeepMemo)(function () {
       try {
@@ -940,11 +1082,13 @@ var withDashboardViz = function withDashboardViz(opts) {
           });
         } else {
           var dataFrames = dataFramesInState;
+
           if (dataSources !== dataSourcesInState) {
             setDataSourcesInState(dataSources);
             dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
             setDataFramesInState(dataFrames);
           }
+
           return Options_1.Options.evaluate({
             context: (0, lodash_1.defaultsDeep)({}, context, vizConfig.defaultContext),
             options: (0, hocUtils_1.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
@@ -955,21 +1099,24 @@ var withDashboardViz = function withDashboardViz(opts) {
         console.error("unexpected error evaluating options: ".concat(e.message));
         return {};
       }
+
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    // trellis specific backgroundColor update for onComputedProps
+    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
+    } // 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);
     });
@@ -979,53 +1126,68 @@ var withDashboardViz = function withDashboardViz(opts) {
           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
+      }; // 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;
+        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
+        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 eventCallbackPropName = (0, lodash_1.camelCase)("on.".concat(eventName));
-        eventCallbackProps[eventCallbackPropName] = null;
-        // todo: refactor single value and single value icon to send payload from viz
+        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 payloadKeys = supportedEvents[eventName].payloadKeys;
+
         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
+    } // 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
     }));
@@ -1043,15 +1205,19 @@ var withDashboardViz = function withDashboardViz(opts) {
      * 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,
@@ -1066,103 +1232,120 @@ var withDashboardViz = function withDashboardViz(opts) {
         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 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
     }, 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
+  }); // 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;
 
 /***/ }),
-/* 37 */
+/* 38 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
-/* 38 */
+/* 39 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/visualizations-shared/SanitizeProps");
 
 /***/ }),
-/* 39 */
+/* 40 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/moment");
 
 /***/ }),
-/* 40 */
+/* 41 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/async-dynamic-options-evaluator");
 
 /***/ }),
-/* 41 */
+/* 42 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _classCallCheck = __webpack_require__(9);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.INITIAL_HEIGHT = exports.INITIAL_WIDTH = void 0;
 /* eslint-disable react/no-unused-prop-types,react/prefer-stateless-function */
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
-var VizActionHandler_1 = __webpack_require__(42);
-// this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+var VizActionHandler_1 = __webpack_require__(43); // this is identical to the initial height and width we use in BaseVisualization in dashboard-visualizations
+
+
 exports.INITIAL_WIDTH = 250;
 exports.INITIAL_HEIGHT = 250;
 /**
  * A Splunk visualization
  */
+
 var SplunkVisualization = function SplunkVisualization() {
   _classCallCheck(this, SplunkVisualization);
 };
+
 SplunkVisualization.propTypes = {
   /**
    * display mode
    */
   mode: T.oneOf(['view', 'edit', 'export']).isRequired,
+
   /**
    * width in pixel or string, defaults to 100%
    */
   width: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * height in pixel or string
    */
   height: T.oneOfType([T.string, T.number]).isRequired,
+
   /**
    * visualization context used for dynamic option evaluation
    */
   context: T.object,
+
   /**
    * visualization formatting options
    */
   options: T.object,
+
   /**
    * A callback to update formatting options
    */
   onOptionsChange: T.func,
+
   /**
    * datasource state which include data and request params, object key indicate the datasource type.
    */
@@ -1171,6 +1354,7 @@ SplunkVisualization.propTypes = {
      * current request params
      */
     requestParams: T.object,
+
     /**
      * current dataset
      */
@@ -1178,6 +1362,7 @@ SplunkVisualization.propTypes = {
       fields: T.array,
       columns: T.array
     }),
+
     /**
      * error
      */
@@ -1185,29 +1370,35 @@ SplunkVisualization.propTypes = {
       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
    */
@@ -1216,6 +1407,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
+
 SplunkVisualization.defaultProps = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: '100%',
@@ -1243,26 +1435,29 @@ SplunkVisualization.defaultProps = {
 exports.default = SplunkVisualization;
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _classCallCheck = __webpack_require__(9);
+
 var _createClass = __webpack_require__(18);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultVizActionHandler = void 0;
+
 var DefaultVizActionHandler = /*#__PURE__*/function () {
   function DefaultVizActionHandler() {
     _classCallCheck(this, DefaultVizActionHandler);
   }
+
   _createClass(DefaultVizActionHandler, [{
     key: "focus",
-    value: function focus() {
-      // noop
+    value: function focus() {// noop
     }
   }, {
     key: "snapshot",
@@ -1270,22 +1465,11 @@ var DefaultVizActionHandler = /*#__PURE__*/function () {
       return null; // noop
     }
   }]);
+
   return DefaultVizActionHandler;
 }();
-exports.DefaultVizActionHandler = DefaultVizActionHandler;
-
-/***/ }),
-/* 43 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.validSortDirs = void 0;
-exports.validSortDirs = ['asc', 'desc', 'none'];
+exports.DefaultVizActionHandler = DefaultVizActionHandler;
 
 /***/ }),
 /* 44 */
@@ -1298,7 +1482,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDeepMemo = void 0;
+
 var react_1 = __webpack_require__(1);
+
 var lodash_1 = __webpack_require__(3);
 /**
  * This hook evaluates and stores the result of a passed function and only
@@ -1313,16 +1499,21 @@ var lodash_1 = __webpack_require__(3);
  * @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;
 
 /***/ }),
@@ -1336,19 +1527,27 @@ 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__(2);
+
 var Message_1 = __webpack_require__(10);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
 /**
  * @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
@@ -1356,11 +1555,13 @@ exports.isMissing = isMissing;
  * @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]),
@@ -1374,10 +1575,11 @@ var propTypes = {
  * @param {MissingPropsProps} props
  * @returns {React.ReactElement}
  */
+
 var MissingPropsMessage = function MissingPropsMessage(props) {
   var width = props.width,
-    height = props.height,
-    missingProps = props.missingProps;
+      height = props.height,
+      missingProps = props.missingProps;
   return React.createElement(Message_1.default, {
     "data-test": "message",
     width: width,
@@ -1385,6 +1587,7 @@ var MissingPropsMessage = function MissingPropsMessage(props) {
     message: (0, i18n_1._)("Missing property: ".concat(missingProps.join(', ')))
   });
 };
+
 exports.MissingPropsMessage = MissingPropsMessage;
 exports.MissingPropsMessage.propTypes = propTypes;
 exports.MissingPropsMessage.defaultProps = {
@@ -1403,15 +1606,19 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var styled_components_1 = __webpack_require__(4);
+
 var hocUtils_1 = __webpack_require__(15);
+
 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.0.0 - 2f7458907"
+  'data-splunk-visualization-version': "26.1.1 - b6df0a015"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1422,6 +1629,7 @@ var Blocker = styled_components_1.default.div.attrs({
  * @param {ExtendedDashViz} Visualization
  * @returns {ExtendedDashViz} Wrapper
  */
+
 var withEditModeCover = function withEditModeCover(Visualization, disableEditModeCover) {
   var Wrapper = function Wrapper(props) {
     var mode = props.mode;
@@ -1430,12 +1638,14 @@ var withEditModeCover = function withEditModeCover(Visualization, disableEditMod
       "data-test": "edit-mode-cover"
     }));
   };
+
   (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withEditModeCover;
 
 /***/ }),
@@ -1448,27 +1658,37 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var variables_1 = __webpack_require__(11);
+
 var IconPlaceholder_1 = __webpack_require__(32);
+
 var VizBehavior_1 = __webpack_require__(6);
+
 var hocUtils_1 = __webpack_require__(15);
+
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
   var config = Visualization.config;
   var themes = config.themes;
+
   var Wrapper = function Wrapper(props) {
     var _a, _b;
+
     var dataSources = props.dataSources,
-      loading = props.loading,
-      options = props.options,
-      height = props.height,
-      width = props.width;
+        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",
@@ -1479,14 +1699,17 @@ var withPlaceholder = function withPlaceholder(Visualization) {
         iconColor: iconColor
       });
     }
+
     return React.createElement(Visualization, Object.assign({}, props));
   };
+
   (0, hocUtils_1.extendStaticWrapperProps)({
     Wrapper: Wrapper,
     Visualization: Visualization
   });
   return Wrapper;
 };
+
 exports.default = withPlaceholder;
 
 /***/ }),
@@ -1514,11 +1737,13 @@ module.exports = require("@splunk/visualization-icons");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var i18n_1 = __webpack_require__(2);
+
 var background = function background(_ref) {
   var label = _ref.label,
-    themes = _ref.themes,
-    labelPosition = _ref.labelPosition;
+      themes = _ref.themes,
+      labelPosition = _ref.labelPosition;
   return [{
     label: (0, i18n_1._)(label || 'Background'),
     option: 'backgroundColor',
@@ -1529,6 +1754,7 @@ var background = function background(_ref) {
     }
   }];
 };
+
 exports.default = background;
 
 /***/ }),
@@ -1635,17 +1861,25 @@ module.exports = require("@splunk/react-ui/Menu");
 
 
 var _typeof = __webpack_require__(82);
+
 var _slicedToArray = __webpack_require__(17);
+
 var _toConsumableArray = __webpack_require__(8);
+
 var _defineProperty = __webpack_require__(7);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.truncateString = exports.getCustomTimeInterval = exports.getPredefinedTimeInterval = exports.getEpochTime = exports.generateTokenReplacementMap = exports.replaceTokens = exports.mergeFieldActions = exports.mergeEventActions = exports.getFieldSummaryMapping = exports.convertToPayloadFormat = void 0;
-var time_1 = __webpack_require__(206);
+exports.combineHighlighted = exports.convertToHighlightValuesByFieldMap = exports.truncateString = exports.getCustomTimeInterval = exports.getPredefinedTimeInterval = exports.getEpochTime = exports.generateTokenReplacementMap = exports.replaceTokens = exports.mergeFieldActions = exports.mergeEventActions = exports.getFieldSummaryMapping = exports.convertToPayloadFormat = void 0;
+
+var time_1 = __webpack_require__(207);
+
 var lodash_1 = __webpack_require__(3);
-var dataUtils_1 = __webpack_require__(121);
-// util to convert a field-value map into an object with row.<fieldname>.value keys for payloads
+
+var dataUtils_1 = __webpack_require__(121); // util to convert a field-value map into an object with row.<fieldname>.value keys for payloads
+
+
 var convertToPayloadFormat = function convertToPayloadFormat(obj) {
   var initialValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   if (!obj) return {};
@@ -1654,11 +1888,13 @@ var convertToPayloadFormat = function convertToPayloadFormat(obj) {
     return Object.assign(Object.assign({}, acc), _defineProperty({}, key, obj[curr]));
   }, initialValue);
 };
+
 exports.convertToPayloadFormat = convertToPayloadFormat;
+
 var getFieldSummaryMapping = function getFieldSummaryMapping(columns, fields) {
   // convert the `fieldsummary` payload to an array of objects
-  var arr = (0, dataUtils_1.convertToArrOfObjects)(columns, fields);
-  // forms an array of FieldData elements expected by the @splunk/react-field-summary component
+  var arr = (0, dataUtils_1.convertToArrOfObjects)(columns, fields); // forms an array of FieldData elements expected by the @splunk/react-field-summary component
+
   var fieldSummaryData = arr.map(function (d) {
     return {
       name: d.field,
@@ -1671,13 +1907,14 @@ var getFieldSummaryMapping = function getFieldSummaryMapping(columns, fields) {
       stdev: d.stdev === null ? null : +d.stdev,
       modes: JSON.parse(d.values)
     };
-  });
-  // creates a map of field name to its data for O(1) retrieval in the tooltip component
+  }); // creates a map of field name to its data for O(1) retrieval in the tooltip component
+
   var fieldSummaryMapping = fieldSummaryData.reduce(function (map, fieldData) {
     return Object.assign(Object.assign({}, map), _defineProperty({}, fieldData.name, fieldData));
   }, {});
   return fieldSummaryMapping;
 };
+
 exports.getFieldSummaryMapping = getFieldSummaryMapping;
 /**
  * Helper to merge event actions into one array of event actions.
@@ -1686,9 +1923,11 @@ exports.getFieldSummaryMapping = getFieldSummaryMapping;
  * @param {EventAction[]} eventActions2
  * @returns {EventAction[]} merged event actions
  */
+
 var mergeEventActions = function mergeEventActions(eventActions1, eventActions2) {
   return eventActions1.concat(eventActions2);
 };
+
 exports.mergeEventActions = mergeEventActions;
 /**
  * Helper to merge field actions. If same key exists in both field actions,
@@ -1703,21 +1942,27 @@ exports.mergeEventActions = mergeEventActions;
  * @param {FieldActions} fieldActions2
  * @returns {FieldActions} merged field actions
  */
+
 var mergeFieldActions = function mergeFieldActions(fieldActions1, fieldActions2) {
   var fieldActions1WithoutDefault = Object.assign({}, fieldActions1);
+
   if ('default' in fieldActions1WithoutDefault) {
     fieldActions1WithoutDefault['*'] = '*' in fieldActions1WithoutDefault ? [].concat(_toConsumableArray(fieldActions1WithoutDefault['*']), _toConsumableArray(fieldActions1WithoutDefault.default)) : fieldActions1WithoutDefault.default;
     delete fieldActions1WithoutDefault.default;
   }
+
   var fieldActions2WithoutDefault = Object.assign({}, fieldActions2);
+
   if ('default' in fieldActions2WithoutDefault) {
     fieldActions2WithoutDefault['*'] = '*' in fieldActions2WithoutDefault ? [].concat(_toConsumableArray(fieldActions2WithoutDefault['*']), _toConsumableArray(fieldActions2WithoutDefault.default)) : fieldActions2WithoutDefault.default;
     delete fieldActions2WithoutDefault.default;
   }
+
   return (0, lodash_1.mergeWith)(fieldActions1WithoutDefault, fieldActions2WithoutDefault, function (fieldAction1value, fieldAction2value) {
     return Array.isArray(fieldAction1value) && Array.isArray(fieldAction2value) ? (0, lodash_1.union)(fieldAction1value, fieldAction2value) : undefined;
   });
 };
+
 exports.mergeFieldActions = mergeFieldActions;
 /**
  * Helper to replace all tokens from the tokenReplacementMap in text with their corresponding values.
@@ -1732,77 +1977,92 @@ exports.mergeFieldActions = mergeFieldActions;
  * @param {boolean} allowFieldValuesEscape
  * @returns {string} text with replaced tokens
  */
+
 var replaceTokens = function replaceTokens(_ref) {
   var text = _ref.text,
-    tokenReplacementMap = _ref.tokenReplacementMap,
-    allowSpecialParametersEscape = _ref.allowSpecialParametersEscape,
-    allowFieldValuesEscape = _ref.allowFieldValuesEscape;
-  var replacedText = text;
-  // replace special parameters
+      tokenReplacementMap = _ref.tokenReplacementMap,
+      allowSpecialParametersEscape = _ref.allowSpecialParametersEscape,
+      allowFieldValuesEscape = _ref.allowFieldValuesEscape;
+  var replacedText = text; // replace special parameters
+
   Object.entries(tokenReplacementMap.specialParameters).forEach(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
-      tokenName = _ref3[0],
-      tokenValue = _ref3[1];
+        tokenName = _ref3[0],
+        tokenValue = _ref3[1];
+
     var maybeEscapedTokenValue = allowSpecialParametersEscape ? encodeURIComponent(tokenValue) : tokenValue;
     replacedText = replacedText.split("$".concat(tokenName, "$")).join(maybeEscapedTokenValue);
-  });
-  // replace field values
+  }); // replace field values
+
   Object.entries(tokenReplacementMap.fields).forEach(function (_ref4) {
     var _ref5 = _slicedToArray(_ref4, 2),
-      tokenName = _ref5[0],
-      tokenValue = _ref5[1];
+        tokenName = _ref5[0],
+        tokenValue = _ref5[1];
+
     // when allowFieldValuesEscape is true, replace field with escaped value
     var maybeEscapedTokenValue = allowFieldValuesEscape ? encodeURIComponent(tokenValue) : tokenValue;
-    replacedText = replacedText.split("$".concat(tokenName, "$")).join(maybeEscapedTokenValue);
-    // If field starts with `!`, always replace with the unescaped value
+    replacedText = replacedText.split("$".concat(tokenName, "$")).join(maybeEscapedTokenValue); // If field starts with `!`, always replace with the unescaped value
+
     replacedText = replacedText.split("$!".concat(tokenName, "$")).join(tokenValue);
   });
   return replacedText;
 };
+
 exports.replaceTokens = replaceTokens;
 /**
  * Generate a token replacement map taking into account Special Parameters and field replacements.
  */
+
 var generateTokenReplacementMap = function generateTokenReplacementMap(_ref6) {
   var dataSources = _ref6.dataSources,
-    rowIndex = _ref6.rowIndex,
-    pageNumber = _ref6.pageNumber,
-    field = _ref6.field,
-    value = _ref6.value,
-    _ref6$event = _ref6.event,
-    event = _ref6$event === void 0 ? {} : _ref6$event;
+      rowIndex = _ref6.rowIndex,
+      pageNumber = _ref6.pageNumber,
+      field = _ref6.field,
+      value = _ref6.value,
+      _ref6$event = _ref6.event,
+      event = _ref6$event === void 0 ? {} : _ref6$event;
+
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+
   var tokenReplacementMap = {
     specialParameters: {},
     fields: {}
-  };
-  // Map special parameters for workflow actions with values
+  }; // Map special parameters for workflow actions with values
   // Note that @latest_time will not be supported since it does not work in sxml
   // https://dev.splunk.com/enterprise/docs/devtools/customworkflowactions/#Special-parameters
+
   var count = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.requestParams) === null || _b === void 0 ? void 0 : _b.count;
   var offset = rowIndex !== undefined && pageNumber !== undefined && count !== undefined ? rowIndex + count * (pageNumber - 1) : undefined;
+
   if (offset !== undefined) {
     tokenReplacementMap.specialParameters['@offset'] = String(offset);
   }
+
   if ((_d = (_c = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.sid) {
     tokenReplacementMap.specialParameters['@sid'] = (_f = (_e = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.sid;
   }
+
   if ((_h = (_g = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.app) {
     tokenReplacementMap.specialParameters['@namespace'] = (_k = (_j = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _j === void 0 ? void 0 : _j.meta) === null || _k === void 0 ? void 0 : _k.app;
   }
+
   if (field) {
     tokenReplacementMap.specialParameters['@field_name'] = field;
   }
+
   if (value) {
     tokenReplacementMap.specialParameters['@field_value'] = value;
-  }
-  // Map fields with field values
+  } // Map fields with field values
+
+
   Object.entries(event).forEach(function (_ref7) {
     var _ref8 = _slicedToArray(_ref7, 2),
-      fieldName = _ref8[0],
-      fieldValue = _ref8[1];
+        fieldName = _ref8[0],
+        fieldValue = _ref8[1];
+
     // handling of _raw and _time fields matches SXML behaviour. Implementation is based on fieldSubstitute() from splunkcore-web-ui
     var replacedValue;
+
     if (fieldName === '_time' && typeof fieldValue === 'string') {
       var splunkTime = (0, time_1.getISOWithTimeZone)(fieldValue);
       var epochTime = (0, exports.getEpochTime)(splunkTime);
@@ -1813,21 +2073,25 @@ var generateTokenReplacementMap = function generateTokenReplacementMap(_ref6) {
     } else {
       replacedValue = typeof fieldValue === 'string' ? fieldValue : JSON.stringify(fieldValue);
     }
+
     tokenReplacementMap.fields["".concat(fieldName)] = replacedValue;
   });
   return tokenReplacementMap;
 };
-exports.generateTokenReplacementMap = generateTokenReplacementMap;
-// return epoch unix timestamp in seconds
+
+exports.generateTokenReplacementMap = generateTokenReplacementMap; // return epoch unix timestamp in seconds
+
 var getEpochTime = function getEpochTime(time) {
   // if not a valid time string, then indicate an error and return NaN.
   if (!(0, time_1.isISO)(time)) {
     console.error("'".concat(time, "' is not a valid time string."));
     return NaN;
-  }
-  // retrieves the epoch time in milliseconds, and divides by 1000
+  } // retrieves the epoch time in milliseconds, and divides by 1000
+
+
   return new Date(time).getTime() / 1000;
 };
+
 exports.getEpochTime = getEpochTime;
 /**
  * Helper to calculate the start (`earliest`) and end (`latest`) times when user clicks a predefined control in the Time Controls Popover
@@ -1840,25 +2104,30 @@ exports.getEpochTime = getEpochTime;
  * @param {('before'|'after'|'at')} when
  * @returns {TimeInterval} interval with `earliest` and `latest` defined in epoch time
  */
+
 var getPredefinedTimeInterval = function getPredefinedTimeInterval(_ref9) {
   var time = _ref9.time,
-    when = _ref9.when;
+      when = _ref9.when;
   var epochTime = (0, exports.getEpochTime)(time);
+
   switch (when) {
     case 'before':
       return {
         latest: epochTime + 0.001
       };
+
     case 'after':
       return {
         earliest: epochTime,
         latest: 'now'
       };
+
     case 'at':
       return {
         earliest: epochTime,
         latest: epochTime + 0.001
       };
+
     default:
       // returns 'at' interval by default
       return {
@@ -1867,6 +2136,7 @@ var getPredefinedTimeInterval = function getPredefinedTimeInterval(_ref9) {
       };
   }
 };
+
 exports.getPredefinedTimeInterval = getPredefinedTimeInterval;
 /**
  * Helper to calculate the start (`earliest`) and end (`latest`) times when user clicks `Apply` in the Time Controls Popover.
@@ -1881,13 +2151,15 @@ exports.getPredefinedTimeInterval = getPredefinedTimeInterval;
  * @param {string} rangeUnit
  * @returns {TimeInterval} interval with `earliest` and `latest` defined in epoch time
  */
+
 var getCustomTimeInterval = function getCustomTimeInterval(_ref10) {
   var time = _ref10.time,
-    rangeType = _ref10.rangeType,
-    rangeAmount = _ref10.rangeAmount,
-    rangeUnit = _ref10.rangeUnit;
+      rangeType = _ref10.rangeType,
+      rangeAmount = _ref10.rangeAmount,
+      rangeUnit = _ref10.rangeUnit;
   var timeRange = (0, time_1.getAcceleratedTimeRange)(time, rangeAmount, rangeUnit);
   var timeInterval;
+
   if (rangeType === 'plusminus') {
     timeInterval = Object.assign({}, timeRange);
   } else if (rangeType === 'plus') {
@@ -1898,13 +2170,15 @@ var getCustomTimeInterval = function getCustomTimeInterval(_ref10) {
     timeInterval = Object.assign(Object.assign({}, timeRange), {
       latest: time
     });
-  }
-  // converts to use epoch time in the interval, and adds 0.001 to `latest` per spec
+  } // converts to use epoch time in the interval, and adds 0.001 to `latest` per spec
+
+
   return {
     earliest: (0, exports.getEpochTime)(timeInterval.earliest),
     latest: (0, exports.getEpochTime)(timeInterval.latest) + 0.001
   };
 };
+
 exports.getCustomTimeInterval = getCustomTimeInterval;
 /**
  * Helper to truncate strings to a maximum length.
@@ -1913,17 +2187,51 @@ exports.getCustomTimeInterval = getCustomTimeInterval;
  * @param {string} stringToTruncate
  * @returns {string} truncated string
  */
+
 var truncateString = function truncateString(stringToTruncate) {
   var MAX_LENGTH = 100;
   var LEAD_AND_TRAIL_LENGTH = 50;
   var truncatedString = stringToTruncate;
+
   if (truncatedString.length > MAX_LENGTH) {
     truncatedString = "".concat(truncatedString.substring(0, LEAD_AND_TRAIL_LENGTH), "...").concat(truncatedString.substring(truncatedString.length - LEAD_AND_TRAIL_LENGTH));
   }
+
   return truncatedString;
 };
+
 exports.truncateString = truncateString;
 
+var convertToHighlightValuesByFieldMap = function convertToHighlightValuesByFieldMap(highlighted) {
+  var highlightConfig = {};
+  Object.keys(highlighted).forEach(function (field) {
+    // convert from {field: {value1: true, value2: false}} to {field: [value1]}
+    // this way we can pass it to the Eventsviewer with the highlightValuesByField option.
+    var valuesToHighlight = Object.keys(highlighted[field]).filter(function (value) {
+      return highlighted[field][value];
+    });
+    if (valuesToHighlight.length > 0) highlightConfig[field] = valuesToHighlight;
+  });
+  return highlightConfig;
+};
+
+exports.convertToHighlightValuesByFieldMap = convertToHighlightValuesByFieldMap;
+
+var combineHighlighted = function combineHighlighted(highlightedSource, highlightValuesByField) {
+  var highlightMap = (0, exports.convertToHighlightValuesByFieldMap)(highlightedSource); // deep merge with the highlight obj passed from viz options
+
+  Object.keys(highlightValuesByField).forEach(function (field) {
+    var value = highlightValuesByField[field];
+    var valueArray = typeof value === 'string' ? [value] : value; // merge arrays and dedup
+
+    var combinedValue = highlightMap[field] ? _toConsumableArray(new Set([].concat(_toConsumableArray(highlightMap[field]), _toConsumableArray(valueArray)))) : valueArray;
+    highlightMap[field] = combinedValue;
+  });
+  return highlightMap;
+};
+
+exports.combineHighlighted = combineHighlighted;
+
 /***/ }),
 /* 121 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1934,15 +2242,17 @@ exports.truncateString = truncateString;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertToArrOfObjects = void 0;
-// TODO: utilize this fn in ParallelCoordinates
+exports.convertToArrOfObjects = void 0; // TODO: utilize this fn in ParallelCoordinates
+
 var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
   if (!columns || !columns[0] || !columns[0].length) return [];
   var data = [];
+
   var _loop = function _loop(i) {
     var newObj = {};
     fields.forEach(function (field, index) {
       var fieldName = typeof field === 'string' ? field : field.name;
+
       if (columns[index][i] === '') {
         newObj[fieldName] = null;
       } else {
@@ -1951,11 +2261,14 @@ var convertToArrOfObjects = function convertToArrOfObjects(columns, fields) {
     });
     data.push(newObj);
   };
+
   for (var i = 0; i < columns[0].length; i += 1) {
     _loop(i);
   }
+
   return data;
 };
+
 exports.convertToArrOfObjects = convertToArrOfObjects;
 
 /***/ }),
@@ -2015,27 +2328,40 @@ module.exports = require("@splunk/react-ui/Heading");
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
+
   for (var p in s) {
     if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.replaceTokens = exports.PureEvents = exports.config = exports.themes = exports.computeVizProps = exports.showPlaceHolderIcon = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var dataSourceUtils_1 = __webpack_require__(97);
-var withDashboardViz_1 = __webpack_require__(36);
+
+var withDashboardViz_1 = __webpack_require__(37);
+
 var constants_1 = __webpack_require__(151);
-var config_1 = __webpack_require__(203);
+
+var config_1 = __webpack_require__(204);
+
 exports.config = config_1.default;
-var PureEvents_1 = __webpack_require__(204);
+
+var PureEvents_1 = __webpack_require__(205);
+
 exports.PureEvents = PureEvents_1.default;
+
 var EventUtils_1 = __webpack_require__(120);
+
 Object.defineProperty(exports, "replaceTokens", {
   enumerable: true,
   get: function get() {
@@ -2047,23 +2373,29 @@ Object.defineProperty(exports, "replaceTokens", {
  * @param {Object} dataSources
  * @returns {Boolean} return true if loading, error, non existent state or without columns in dataSources
  */
+
 var showPlaceHolderIcon = function showPlaceHolderIcon(dataSources) {
   var columns = (0, lodash_1.get)(dataSources, 'primary.data.columns', undefined);
   var noColumns = columns === undefined;
   var dataSourceState = (0, dataSourceUtils_1.getDataSourceStateInfo)(dataSources);
   return dataSourceState === dataSourceUtils_1.DataSourceState.ERROR || dataSourceState === dataSourceUtils_1.DataSourceState.LOADING || dataSourceState === dataSourceUtils_1.DataSourceState.NONEXISTENT || noColumns;
 };
+
 exports.showPlaceHolderIcon = showPlaceHolderIcon;
+
 var computeVizProps = function computeVizProps(_a) {
   // for specific changes to view type (List -> Raw, etc.), can create handling function here that calls onOptionsChange
   var _b;
-  var props = __rest(_a, []);
-  // defaults to an empty datasource if one isn't provided, which shows the No Results Found UI:
+
+  var props = __rest(_a, []); // defaults to an empty datasource if one isn't provided, which shows the No Results Found UI:
+
+
   var dataSources = (_b = props === null || props === void 0 ? void 0 : props.dataSources) !== null && _b !== void 0 ? _b : constants_1.EMPTY_DATASOURCE;
   return Object.assign(Object.assign({}, props), {
     dataSources: dataSources
   });
 };
+
 exports.computeVizProps = computeVizProps;
 var Events = (0, withDashboardViz_1.default)({
   ReactViz: PureEvents_1.default,
@@ -2091,8 +2423,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "EMPTY_DATASOURCE", function() { return EMPTY_DATASOURCE; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FIELDSUMMARY_DS_STORYBOOK", function() { return FIELDSUMMARY_DS_STORYBOOK; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FIELDSUMMARY_DS_DOC_HUB", function() { return FIELDSUMMARY_DS_DOC_HUB; });
-/* harmony import */ var _splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(169);
-/* harmony import */ var _splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _splunk_datasource_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(170);
+/* harmony import */ var _splunk_datasource_utils__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_datasource_utils__WEBPACK_IMPORTED_MODULE_0__);
 // TODO: convert this file to .ts - created as .js as copied from SUI EventsViewer repo
 
 var rawEventPayload = {
@@ -2480,20 +2812,17 @@ var rawEventPayload = {
     }
   }
 };
-var rawMultiLineEvent = "10/19/2023 10:29:00 -0700, search_name=KOM_Dashboard_Sear dropped_events=0, search_startup_time=48, dash_epoch=1697737969, search_spl=\"| rest splunk_server=local /services/server/status/installed-file-integrity\n| fields check_failures.*\n| untable splunk_server file_path check_result\n| replace \"check_failures.*\" WITH \"*\" IN file_path\n| fields file_path check_result\n| rename file_path AS \"File path\" check_result AS \"Check result\", shc_member=standalone, rawdata_cache_miss=0, matching_events=0, events_in_matching_bkts=0, total_run_time_sec=\"0.09\", scanned_events=0, bloomfilter_eliminated_bkts=0, sid_search_name=search2, slices_in_matching_bkts=0, savedsearch_name=search2, search_type=dashboard, search_user=gmattia";
+var rawMultiLineEvent = "10/19/2023 10:29:00 -0700, search_name=KOM_Dashboard_Sear dropped_events=0, search_startup_time=48, dash_epoch=1697737969, search_spl=\"| rest splunk_server=local /services/server/status/installed-file-integrity\n| fields check_failures.*\n| untable splunk_server file_path check_result\n| replace \"check_failures.*\" WITH \"*\" IN file_path\n| fields file_path check_result\n| rename file_path AS \"File path\" check_result AS \"Check result\", shc_member=standalone, rawdata_cache_miss=0, matching_events=0, events_in_matching_bkts=0, total_run_time_sec=\"0.09\", scanned_events=0, bloomfilter_eliminated_bkts=0, sid_search_name=search2, slices_in_matching_bkts=0, savedsearch_name=search2, search_type=dashboard, search_user=gmattia"; // Datasource utilized in example on @splunk/react-events-viewer docs
 
-// Datasource utilized in example on @splunk/react-events-viewer docs
-var originalDataSourceData = _splunk_datasource_utils_DataSet__WEBPACK_IMPORTED_MODULE_0___default.a.fromJSONArray(rawEventPayload.fields, rawEventPayload.results);
+var originalDataSourceData = _splunk_datasource_utils__WEBPACK_IMPORTED_MODULE_0__["DataSet"].fromJSONArray(rawEventPayload.fields, rawEventPayload.results); // Replaces _raw object with the value of the `value` key - this is the string expected in Dashboard Studio payload
 
-// Replaces _raw object with the value of the `value` key - this is the string expected in Dashboard Studio payload
 originalDataSourceData.columns[5] = originalDataSourceData.columns[5].map(function (_raw) {
   return _raw.value;
-});
-
-// Exports payload with expected shape of Dashboard Studio payload - fields as an array of strings, and columns
+}); // Exports payload with expected shape of Dashboard Studio payload - fields as an array of strings, and columns
 //  as arrays of data primitives like strings and numbers
 // Component works with either [{ name: `field` }, ...] or [`field`,...] format - leaving as array as objects as
 //  expected in Dashboard Studio payload
+
 var dataSourceData = {
   fields: rawEventPayload.fields,
   columns: originalDataSourceData.columns
@@ -2597,13 +2926,13 @@ module.exports = require("@splunk/visualization-context/EventsContext");
 /* 166 */,
 /* 167 */,
 /* 168 */,
-/* 169 */
+/* 169 */,
+/* 170 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/datasource-utils/DataSet");
+module.exports = require("@splunk/datasource-utils");
 
 /***/ }),
-/* 170 */,
 /* 171 */,
 /* 172 */,
 /* 173 */,
@@ -2635,7 +2964,8 @@ module.exports = require("@splunk/datasource-utils/DataSet");
 /* 199 */,
 /* 200 */,
 /* 201 */,
-/* 202 */
+/* 202 */,
+/* 203 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2644,6 +2974,7 @@ module.exports = require("@splunk/datasource-utils/DataSet");
 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,
@@ -2652,22 +2983,28 @@ var __createBinding = this && this.__createBinding || (Object.create ? function
       }
     };
   }
+
   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__(150), exports);
+
 var Events_1 = __webpack_require__(150);
+
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -2676,7 +3013,7 @@ Object.defineProperty(exports, "default", {
 });
 
 /***/ }),
-/* 203 */
+/* 204 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2685,15 +3022,27 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var visualization_icons_1 = __webpack_require__(52);
+
 var placeholders_1 = __webpack_require__(50);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var themes_1 = __webpack_require__(60);
+
 var i18n_1 = __webpack_require__(2);
+
+var DataSource_1 = __webpack_require__(34);
+
 var VizBehavior_1 = __webpack_require__(6);
-var VizCategory_1 = __webpack_require__(35);
+
+var VizCategory_1 = __webpack_require__(36);
+
 var configUtils_1 = __webpack_require__(20);
+
 var BackgroundColor_1 = __webpack_require__(53);
+
 var defaultContext = {};
 var dataContract = {
   requiredDataSources: [{
@@ -2707,10 +3056,16 @@ var dataContract = {
   initialRequestParams: {
     primary: function primary() {
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var _a;
+
       return {
         offset: 0,
         count: options.count ? options.count : 10,
-        requestTotalCount: true
+        requestTotalCount: true,
+        // this is needed for search-based event highlighting
+        output_mode: 'json',
+        segmentation: (_a = options.highlightFromSource) !== null && _a !== void 0 ? _a : 'none'
       };
     }
   }
@@ -2820,9 +3175,15 @@ var optionsSchema = {
     default: []
   },
   highlightValuesByField: {
-    description: 'Specify the field-value pairs to highlight. For example, `{"source": "$srcToken$", "dest": "12.21.1.11", "tag": ["tag1", "tag2"]}`',
+    description: 'Specify the field and value pairs for manual highlighting. For example, `{"source": "$srcToken$", "dest": "12.21.1.11", "tag": ["tag1", "tag2"]}`.',
     type: 'object'
   },
+  highlightFromSource: {
+    description: 'Specify a segmentation mode to use for search based highlighting. Specifying "none" will turn search based highlighting off. For more about segmentation, search for "event segmentation" in the Getting Data In manual in the Splunk Docs.',
+    type: 'string',
+    pattern: (0, schemaUtils_1.getPattern)(DataSource_1.validSegmentationModes),
+    default: 'none'
+  },
   showFieldSummary: {
     description: 'Specify that a field summary popup appears when a field is selected. To show field summaries for a search, configure an additional datasource called `fieldsummary` using the original search followed by the `... | fieldsummary maxvals=10` SPL command.',
     type: 'boolean',
@@ -2859,17 +3220,20 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
+
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.events',
+
   /**
    * viz name
    */
   name: (0, i18n_1._)('Events'),
   category: VizCategory_1.VizCategory.TABLE,
   status: 'preview',
+
   /**
    * viz icon
    */
@@ -2904,35 +3268,55 @@ var config = {
 exports.default = (0, configUtils_1.enhanceConfig)(config);
 
 /***/ }),
-/* 204 */
+/* 205 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _typeof = __webpack_require__(82);
+
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var react_1 = __webpack_require__(1);
+
 var T = __webpack_require__(0);
-var EventsViewer_1 = __webpack_require__(205);
+
+var EventsViewer_1 = __webpack_require__(206);
+
 var styled_components_1 = __webpack_require__(4);
+
 var pick_1 = __webpack_require__(23);
+
 var variables_1 = __webpack_require__(11);
+
 var colorUtils_1 = __webpack_require__(12);
+
 var style_1 = __webpack_require__(14);
+
 var EventsContext_1 = __webpack_require__(152);
+
 var lodash_1 = __webpack_require__(3);
+
 var Menu_1 = __webpack_require__(119);
+
 var constants_1 = __webpack_require__(151);
+
 var FixedSizeContainer_1 = __webpack_require__(13);
+
 var EventUtils_1 = __webpack_require__(120);
-var FieldSummaryTooltip_1 = __webpack_require__(207);
-var TimeControlsPopover_1 = __webpack_require__(209);
-// Inspired by VizTableContainer in PureTable.tsx
+
+var FieldSummaryTooltip_1 = __webpack_require__(208);
+
+var TimeControlsPopover_1 = __webpack_require__(210); // Inspired by VizTableContainer in PureTable.tsx
+
+
 var EventsContainer = styled_components_1.default.div.withConfig({
   displayName: "PureEvents__EventsContainer",
   componentId: "iniqvm-0"
@@ -2948,15 +3332,15 @@ var EventsContainer = styled_components_1.default.div.withConfig({
 }, (0, pick_1.default)({
   enterprise: variables_1.default.backgroundColorPage,
   prisma: variables_1.default.backgroundColorPage
-}));
-// Inspired by SUITableContainer in PureTable.tsx
+})); // Inspired by SUITableContainer in PureTable.tsx
+
 var SUIEventsViewerContainer = styled_components_1.default.div.withConfig({
   displayName: "PureEvents__SUIEventsViewerContainer",
   componentId: "iniqvm-1"
 })(["box-sizing:border-box;flex-grow:1;overflow:hidden;", ";"], function (_ref) {
   var width = _ref.width,
-    height = _ref.height,
-    theme = _ref.theme;
+      height = _ref.height,
+      theme = _ref.theme;
   var padding = (0, pick_1.default)({
     enterprise: variables_1.default.spacingHalf({
       theme: theme
@@ -2972,30 +3356,40 @@ var SUIEventsViewerContainer = styled_components_1.default.div.withConfig({
     width: width - paddingOffset,
     height: height - paddingOffset
   });
-});
-// Effectively the pure visualization component for Events, passing through the necessary state and callbacks.
+}); // Effectively the pure visualization component for Events, passing through the necessary state and callbacks.
+
 var PureEvents = function PureEvents(props) {
   var width = props.width,
-    height = props.height,
-    backgroundColor = props.backgroundColor,
-    _props$dataSources = props.dataSources,
-    dataSources = _props$dataSources === void 0 ? {} : _props$dataSources,
-    _props$eventActions = props.eventActions,
-    eventActionsProps = _props$eventActions === void 0 ? [] : _props$eventActions,
-    _props$fieldActions = props.fieldActions,
-    fieldActionsProps = _props$fieldActions === void 0 ? {} : _props$fieldActions,
-    showFieldSummary = props.showFieldSummary,
-    footerFields = props.footerFields,
-    highlightValuesByField = props.highlightValuesByField,
-    onOptionsChange = props.onOptionsChange,
-    onRequestParamsChange = props.onRequestParamsChange,
-    onEventTrigger = props.onEventTrigger;
+      height = props.height,
+      backgroundColor = props.backgroundColor,
+      _props$dataSources = props.dataSources,
+      dataSources = _props$dataSources === void 0 ? {} : _props$dataSources,
+      _props$eventActions = props.eventActions,
+      eventActionsProps = _props$eventActions === void 0 ? [] : _props$eventActions,
+      _props$fieldActions = props.fieldActions,
+      fieldActionsProps = _props$fieldActions === void 0 ? {} : _props$fieldActions,
+      showFieldSummary = props.showFieldSummary,
+      footerFields = props.footerFields,
+      highlightValuesByField = props.highlightValuesByField,
+      onOptionsChange = props.onOptionsChange,
+      onRequestParamsChange = props.onRequestParamsChange,
+      onEventTrigger = props.onEventTrigger;
+  var highlightValuesByFieldCombined = React.useMemo(function () {
+    var _a, _b, _c; // get highlighted values from datasource
+    // remove type casting by adding highlighted and tags to DataSourceMeta in dashboard-types package
+
+
+    var highlightedSource = (_c = (_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.highlighted) !== null && _c !== void 0 ? _c : {};
+    return (0, EventUtils_1.combineHighlighted)(highlightedSource, highlightValuesByField);
+  }, [dataSources, highlightValuesByField]);
   var fieldSummaryMap = React.useMemo(function () {
-    var _a, _b, _c, _d;
-    // if the `fieldsummary` datasource isn't configured, no field summary can be shown
+    var _a, _b, _c, _d; // if the `fieldsummary` datasource isn't configured, no field summary can be shown
+
+
     if (!showFieldSummary || !(0, lodash_1.get)(dataSources, 'fieldsummary')) {
       return {};
     }
+
     try {
       var fieldSummaryMapping = (0, EventUtils_1.getFieldSummaryMapping)((_b = (_a = dataSources.fieldsummary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns, (_d = (_c = dataSources.fieldsummary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.fields);
       return fieldSummaryMapping;
@@ -3004,39 +3398,48 @@ var PureEvents = function PureEvents(props) {
       return {};
     }
   }, [dataSources, showFieldSummary]);
+
   var _ref2 = (0, react_1.useContext)(EventsContext_1.default),
-    _ref2$eventActions = _ref2.eventActions,
-    eventActionsContext = _ref2$eventActions === void 0 ? [] : _ref2$eventActions,
-    _ref2$fieldActions = _ref2.fieldActions,
-    fieldActionsContext = _ref2$fieldActions === void 0 ? {} : _ref2$fieldActions;
+      _ref2$eventActions = _ref2.eventActions,
+      eventActionsContext = _ref2$eventActions === void 0 ? [] : _ref2$eventActions,
+      _ref2$fieldActions = _ref2.fieldActions,
+      fieldActionsContext = _ref2$fieldActions === void 0 ? {} : _ref2$fieldActions;
+
   var eventActions = (0, EventUtils_1.mergeEventActions)(eventActionsProps, eventActionsContext);
   var fieldActions = (0, EventUtils_1.mergeFieldActions)(fieldActionsProps, fieldActionsContext);
+
   var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    fieldSummaryField = _React$useState2[0],
-    setFieldSummaryField = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      fieldSummaryField = _React$useState2[0],
+      setFieldSummaryField = _React$useState2[1];
+
   var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    fieldSummaryAnchor = _React$useState4[0],
-    setFieldSummaryAnchor = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      fieldSummaryAnchor = _React$useState4[0],
+      setFieldSummaryAnchor = _React$useState4[1];
+
   var _React$useState5 = React.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    timeValue = _React$useState6[0],
-    setTimeValue = _React$useState6[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      timeValue = _React$useState6[0],
+      setTimeValue = _React$useState6[1];
+
   var _React$useState7 = React.useState(null),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    timeFieldAnchor = _React$useState8[0],
-    setTimeFieldAnchor = _React$useState8[1]; // An array of objects with eventtypeValues for filtering by eventtype, fieldFilters for filtering by fields,
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      timeFieldAnchor = _React$useState8[0],
+      setTimeFieldAnchor = _React$useState8[1]; // An array of objects with eventtypeValues for filtering by eventtype, fieldFilters for filtering by fields,
   // and eventActionComponent (needs to be Menu.Item and will be rendered inside a Menu component)
   // to display in the Event Actions dropdown
+
+
   var renderEventActions = React.useMemo(function () {
     return !Array.isArray(eventActions) ? [] : eventActions.map(function (_ref3) {
       var eventType = _ref3.eventType,
-        label = _ref3.label,
-        _ref3$eventtypeValues = _ref3.eventtypeValues,
-        eventtypeValues = _ref3$eventtypeValues === void 0 ? [] : _ref3$eventtypeValues,
-        _ref3$fieldFilters = _ref3.fieldFilters,
-        fieldFilters = _ref3$fieldFilters === void 0 ? [] : _ref3$fieldFilters;
+          label = _ref3.label,
+          _ref3$eventtypeValues = _ref3.eventtypeValues,
+          eventtypeValues = _ref3$eventtypeValues === void 0 ? [] : _ref3$eventtypeValues,
+          _ref3$fieldFilters = _ref3.fieldFilters,
+          fieldFilters = _ref3$fieldFilters === void 0 ? [] : _ref3$fieldFilters;
+
       var onMenuItemClick = function onMenuItemClick(e, eventActionProps, tokenReplacementMap) {
         var payload = (0, EventUtils_1.convertToPayloadFormat)(eventActionProps.event, {
           tokenReplacementMap: tokenReplacementMap
@@ -3047,10 +3450,11 @@ var PureEvents = function PureEvents(props) {
           payload: payload
         });
       };
+
       var eventActionComponent = function eventActionComponent(eventActionProps) {
         var rowIndex = eventActionProps.rowIndex,
-          pageNumber = eventActionProps.pageNumber,
-          event = eventActionProps.event;
+            pageNumber = eventActionProps.pageNumber,
+            event = eventActionProps.event;
         var tokenReplacementMap = (0, EventUtils_1.generateTokenReplacementMap)({
           dataSources: dataSources,
           rowIndex: rowIndex,
@@ -3071,28 +3475,31 @@ var PureEvents = function PureEvents(props) {
           }
         }, truncatedLabel);
       };
+
       return {
         eventtypeValues: eventtypeValues,
         fieldFilters: fieldFilters,
         eventActionComponent: eventActionComponent
       };
     });
-  }, [eventActions]);
-  // A map of fields, each associated with an array of objects with eventtypeValues for filtering by eventtype,
+  }, [eventActions]); // A map of fields, each associated with an array of objects with eventtypeValues for filtering by eventtype,
   // and fieldActionComponent (needs to be Menu.Item and will be rendered inside a Menu component)
   // to display in its respective dropdown in the Actions column
+
   var renderFieldActions = React.useMemo(function () {
     if (_typeof(fieldActions) !== 'object') return {};
     var fieldActionsMap = {};
     Object.entries(fieldActions).forEach(function (_ref4) {
       var _ref5 = _slicedToArray(_ref4, 2),
-        currentFieldName = _ref5[0],
-        currentFieldActions = _ref5[1];
+          currentFieldName = _ref5[0],
+          currentFieldActions = _ref5[1];
+
       fieldActionsMap[currentFieldName] = currentFieldActions.map(function (_ref6) {
         var eventType = _ref6.eventType,
-          label = _ref6.label,
-          _ref6$eventtypeValues = _ref6.eventtypeValues,
-          eventtypeValues = _ref6$eventtypeValues === void 0 ? [] : _ref6$eventtypeValues;
+            label = _ref6.label,
+            _ref6$eventtypeValues = _ref6.eventtypeValues,
+            eventtypeValues = _ref6$eventtypeValues === void 0 ? [] : _ref6$eventtypeValues;
+
         var onMenuItemClick = function onMenuItemClick(e, fieldActionProps, tokenReplacementMap) {
           var payload = (0, EventUtils_1.convertToPayloadFormat)(fieldActionProps.event, {
             name: fieldActionProps.field,
@@ -3105,12 +3512,13 @@ var PureEvents = function PureEvents(props) {
             payload: payload
           });
         };
+
         var fieldActionComponent = function fieldActionComponent(fieldActionProps) {
           var field = fieldActionProps.field,
-            value = fieldActionProps.value,
-            rowIndex = fieldActionProps.rowIndex,
-            pageNumber = fieldActionProps.pageNumber,
-            event = fieldActionProps.event;
+              value = fieldActionProps.value,
+              rowIndex = fieldActionProps.rowIndex,
+              pageNumber = fieldActionProps.pageNumber,
+              event = fieldActionProps.event;
           var tokenReplacementMap = (0, EventUtils_1.generateTokenReplacementMap)({
             dataSources: dataSources,
             rowIndex: rowIndex,
@@ -3133,6 +3541,7 @@ var PureEvents = function PureEvents(props) {
             }
           }, truncatedLabel);
         };
+
         return {
           eventtypeValues: eventtypeValues,
           fieldActionComponent: fieldActionComponent
@@ -3140,27 +3549,30 @@ var PureEvents = function PureEvents(props) {
       });
     });
     return fieldActionsMap;
-  }, [fieldActions]);
-  // formulate the options object required by the SUI EventsViewer component
+  }, [fieldActions]); // formulate the options object required by the SUI EventsViewer component
+
   var suiEventsViewerOptions = {
     renderEventActions: renderEventActions,
     renderFieldActions: renderFieldActions,
     footerFields: footerFields,
-    fieldValueHighlightMap: highlightValuesByField
+    fieldValueHighlightMap: highlightValuesByFieldCombined
   };
+
   var handleFieldClicked = showFieldSummary && function (e, _ref7) {
     var field = _ref7.field;
     setFieldSummaryField(field);
     setFieldSummaryAnchor(e.currentTarget.parentElement);
   };
+
   var handleTimeClicked = function handleTimeClicked(e, _ref8) {
     var time = _ref8.time;
     setTimeValue(time);
     setTimeFieldAnchor(e.currentTarget);
   };
+
   var handleValueClicked = function handleValueClicked(e, _ref9) {
     var field = _ref9.field,
-      value = _ref9.value;
+        value = _ref9.value;
     onEventTrigger({
       originalEvent: e,
       type: 'value.click',
@@ -3170,9 +3582,10 @@ var PureEvents = function PureEvents(props) {
       }
     });
   };
+
   var handleTagClicked = function handleTagClicked(e, _ref10) {
     var field = _ref10.field,
-      value = _ref10.value;
+        value = _ref10.value;
     onEventTrigger({
       originalEvent: e,
       type: 'tag.click',
@@ -3182,6 +3595,7 @@ var PureEvents = function PureEvents(props) {
       }
     });
   };
+
   var handleTimeDrilldown = function handleTimeDrilldown(e, timeInterval) {
     onEventTrigger({
       originalEvent: e,
@@ -3194,9 +3608,10 @@ var PureEvents = function PureEvents(props) {
       }
     });
   };
+
   var handleActionClicked = function handleActionClicked(event, data) {
     var actionType = data.action,
-      field = data.field;
+        field = data.field;
     onEventTrigger({
       originalEvent: event,
       type: "events.search.".concat(actionType),
@@ -3205,6 +3620,7 @@ var PureEvents = function PureEvents(props) {
       }
     });
   };
+
   return React.createElement(EventsContainer, {
     backgroundColor: backgroundColor,
     width: width,
@@ -3243,6 +3659,7 @@ var PureEvents = function PureEvents(props) {
     }
   })));
 };
+
 PureEvents.propTypes = {
   width: T.oneOfType([T.string, T.number]),
   height: T.oneOfType([T.string, T.number]),
@@ -3290,46 +3707,59 @@ PureEvents.defaultProps = {
 exports.default = (0, FixedSizeContainer_1.default)(PureEvents);
 
 /***/ }),
-/* 205 */
+/* 206 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-events-viewer/components/EventsViewer");
 
 /***/ }),
-/* 206 */
+/* 207 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/time-range-utils/time");
 
 /***/ }),
-/* 207 */
+/* 208 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _taggedTemplateLiteral = __webpack_require__(59);
+
 var _templateObject;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var react_1 = __webpack_require__(1);
+
 var Popover_1 = __webpack_require__(62);
+
 var Markdown_1 = __webpack_require__(122);
-var FieldSummary_1 = __webpack_require__(208);
+
+var FieldSummary_1 = __webpack_require__(209);
+
 var lodash_1 = __webpack_require__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var styled_components_1 = __webpack_require__(4);
+
 var EventsContext_1 = __webpack_require__(152);
+
 var popoverContainerStyle = {
   padding: '20px',
   width: 500
 };
 var StyledMarkdown = (0, styled_components_1.default)(Markdown_1.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /* removes unnecessary margin on the internal paragraph component */\n    p {\n        margin: 0;\n    }\n"])));
+
 var actionsForField = function actionsForField(field) {
-  var actions = [];
-  // this logic is used in determining whether to display numeric stats in ui-platform (FieldStats.tsx)
+  var actions = []; // this logic is used in determining whether to display numeric stats in ui-platform (FieldStats.tsx)
+
   if (typeof field.mean === 'number') {
     actions.push({
       name: 'avgByTime',
@@ -3344,6 +3774,7 @@ var actionsForField = function actionsForField(field) {
       label: (0, i18n_1._)('Min value over time')
     });
   }
+
   actions.push({
     name: 'topValues',
     label: (0, i18n_1._)('Top values')
@@ -3362,22 +3793,25 @@ var actionsForField = function actionsForField(field) {
   });
   return actions;
 };
+
 var FieldSummaryTooltip = function FieldSummaryTooltip(props) {
   var open = props.open,
-    anchor = props.anchor,
-    handleTooltipClose = props.handleTooltipClose,
-    fieldName = props.fieldName,
-    fieldSummaryMap = props.fieldSummaryMap,
-    onActionClicked = props.onActionClicked,
-    onFieldValueClicked = props.onFieldValueClicked;
+      anchor = props.anchor,
+      handleTooltipClose = props.handleTooltipClose,
+      fieldName = props.fieldName,
+      fieldSummaryMap = props.fieldSummaryMap,
+      onActionClicked = props.onActionClicked,
+      onFieldValueClicked = props.onFieldValueClicked;
+
   var _ref = (0, react_1.useContext)(EventsContext_1.default),
-    isSplunkWebAvailable = _ref.isSplunkWebAvailable;
+      isSplunkWebAvailable = _ref.isSplunkWebAvailable;
+
   var getActionsForField = (0, react_1.useCallback)(function (field) {
     return isSplunkWebAvailable ? actionsForField(field) : [];
-  }, [isSplunkWebAvailable]);
-  // if the anchor is null or no field has been clicked, do not render the tooltip
-  if (!open) return null;
-  // retrieve the field summary for this field. if there is no field data, show fallback messaging
+  }, [isSplunkWebAvailable]); // if the anchor is null or no field has been clicked, do not render the tooltip
+
+  if (!open) return null; // retrieve the field summary for this field. if there is no field data, show fallback messaging
+
   var field = fieldSummaryMap[fieldName];
   var fieldSummaryExists = !!field;
   var fallbackText = (0, i18n_1._)("Please configure an additional datasource called `fieldsummary` using the `... | fieldsummary maxvals=10` SPL command for field summaries to be shown.");
@@ -3399,6 +3833,7 @@ var FieldSummaryTooltip = function FieldSummaryTooltip(props) {
     text: fallbackText
   })));
 };
+
 FieldSummaryTooltip.defaultProps = {
   open: false,
   anchor: null,
@@ -3411,40 +3846,59 @@ FieldSummaryTooltip.defaultProps = {
 exports.default = FieldSummaryTooltip;
 
 /***/ }),
-/* 208 */
+/* 209 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-field-summary/components/FieldSummary");
 
 /***/ }),
-/* 209 */
+/* 210 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _slicedToArray = __webpack_require__(17);
+
 var _taggedTemplateLiteral = __webpack_require__(59);
+
 var _templateObject;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var Popover_1 = __webpack_require__(62);
-var ControlGroup_1 = __webpack_require__(210);
+
+var ControlGroup_1 = __webpack_require__(211);
+
 var Button_1 = __webpack_require__(123);
-var Text_1 = __webpack_require__(211);
+
+var Text_1 = __webpack_require__(212);
+
 var Message_1 = __webpack_require__(124);
-var Select_1 = __webpack_require__(212);
-var Link_1 = __webpack_require__(213);
+
+var Select_1 = __webpack_require__(213);
+
+var Link_1 = __webpack_require__(214);
+
 var Heading_1 = __webpack_require__(125);
+
 var lodash_1 = __webpack_require__(3);
+
 var i18n_1 = __webpack_require__(2);
+
 var styled_components_1 = __webpack_require__(4);
+
 var numberUtils_1 = __webpack_require__(31);
+
 var pick_1 = __webpack_require__(23);
-var EventUtils_1 = __webpack_require__(120);
-// custom popover sizing for Enterprise vs. Prisma themes - additional px for Prisma theme to fit controls
+
+var EventUtils_1 = __webpack_require__(120); // custom popover sizing for Enterprise vs. Prisma themes - additional px for Prisma theme to fit controls
+
+
 var TimePopoverContainer = styled_components_1.default.div.withConfig({
   displayName: "TimeControlsPopover__TimePopoverContainer",
   componentId: "fj32ze-0"
@@ -3482,48 +3936,61 @@ var rangeUnitInputStyle = {
 var applyButtonStyle = {
   marginLeft: 10
 };
+
 var TimeControlsPopover = function TimeControlsPopover(props) {
   var open = props.open,
-    anchor = props.anchor,
-    time = props.time,
-    handleTooltipClose = props.handleTooltipClose,
-    onTimeDrilldown = props.onTimeDrilldown; // nearby events controls default to +/- 5 second(s)
+      anchor = props.anchor,
+      time = props.time,
+      handleTooltipClose = props.handleTooltipClose,
+      onTimeDrilldown = props.onTimeDrilldown; // nearby events controls default to +/- 5 second(s)
+
   var _React$useState = React.useState('plusminus'),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    rangeType = _React$useState2[0],
-    setRangeType = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rangeType = _React$useState2[0],
+      setRangeType = _React$useState2[1];
+
   var _React$useState3 = React.useState('5'),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    rangeAmount = _React$useState4[0],
-    setRangeAmount = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      rangeAmount = _React$useState4[0],
+      setRangeAmount = _React$useState4[1];
+
   var _React$useState5 = React.useState('s'),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    rangeUnit = _React$useState6[0],
-    setRangeUnit = _React$useState6[1]; // if validation fails, this triggers the error state on the controls to show
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      rangeUnit = _React$useState6[0],
+      setRangeUnit = _React$useState6[1]; // if validation fails, this triggers the error state on the controls to show
+
+
   var _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    isInvalidInput = _React$useState8[0],
-    setInvalidInput = _React$useState8[1];
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isInvalidInput = _React$useState8[0],
+      setInvalidInput = _React$useState8[1];
+
   var errorMessage = (0, i18n_1._)('Value must be an integer greater than 0');
+
   var handleRangeTypeChange = function handleRangeTypeChange(e, _ref) {
     var value = _ref.value;
     setRangeType(value);
   };
+
   var handleRangeAmountChange = function handleRangeAmountChange(e, _ref2) {
     var value = _ref2.value;
     setRangeAmount(value);
   };
+
   var handleRangeUnitChange = function handleRangeUnitChange(e, _ref3) {
     var value = _ref3.value;
     setRangeUnit(value);
   };
+
   var handleSubmit = function handleSubmit(e) {
     // if the entered range amount is not a number, is not greater than 0, or is not an integer, then it is invalid
     var parsedIntervalAmount = (0, numberUtils_1.parseNumber)(rangeAmount);
+
     if (Number.isNaN(parsedIntervalAmount) || parsedIntervalAmount <= 0 || !Number.isInteger(parsedIntervalAmount)) {
       setInvalidInput(true);
       return;
     }
+
     setInvalidInput(false);
     var timeInterval = (0, EventUtils_1.getCustomTimeInterval)({
       time: time,
@@ -3533,6 +4000,7 @@ var TimeControlsPopover = function TimeControlsPopover(props) {
     });
     onTimeDrilldown(e, timeInterval);
   };
+
   var handleEventIntervalClick = function handleEventIntervalClick(e, when) {
     e.preventDefault();
     var timeInterval = (0, EventUtils_1.getPredefinedTimeInterval)({
@@ -3541,6 +4009,7 @@ var TimeControlsPopover = function TimeControlsPopover(props) {
     });
     onTimeDrilldown(e, timeInterval);
   };
+
   return React.createElement(Popover_1.default, {
     open: open,
     defaultPlacement: "below",
@@ -3643,6 +4112,7 @@ var TimeControlsPopover = function TimeControlsPopover(props) {
     "data-test": "apply-custom-time"
   }))));
 };
+
 TimeControlsPopover.defaultProps = {
   open: false,
   anchor: null,
@@ -3653,25 +4123,25 @@ TimeControlsPopover.defaultProps = {
 exports.default = TimeControlsPopover;
 
 /***/ }),
-/* 210 */
+/* 211 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ControlGroup");
 
 /***/ }),
-/* 211 */
+/* 212 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Text");
 
 /***/ }),
-/* 212 */
+/* 213 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Select");
 
 /***/ }),
-/* 213 */
+/* 214 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Link");