@splunk/visualizations 26.0.0 → 26.1.1

package/Sankey.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.
  */
@@ -127,28 +127,47 @@ module.exports = require("@splunk/themes/variables");
 
 
 var _toConsumableArray = __webpack_require__(8);
+
 var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DEFAULT_LINK_VALUE_INDEX = exports.DEFAULT_TARGET_INDEX = exports.DEFAULT_SOURCE_INDEX = exports.DEFAULT_CHART_HEIGHT = exports.DEFAULT_CHART_WIDTH = exports.CHART_MIN_HEIGHT = exports.CHART_MIN_WIDTH = exports.INACTIVE_OPACITY = exports.DEFAULT_NODE_OPACITY = exports.DEFAULT_LINK_OPACITY = exports.DEFAULT_SERIES_COLOR = exports.DEFAULT_LINK_COLOR = exports.DEFAULT_NODE_COLOR = exports.DEFAULT_FONT_FAMILY = exports.NODE_TEXT_FONT_SIZE = exports.DEFAULT_COLORS = void 0;
+
 var React = __webpack_require__(1);
+
 var react_1 = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var lodash_1 = __webpack_require__(3);
+
 var styled_components_1 = __webpack_require__(4);
+
 var Message_1 = __webpack_require__(10);
+
 var i18n_1 = __webpack_require__(2);
+
 var SizeAwareWrapper_1 = __webpack_require__(19);
+
 var style_1 = __webpack_require__(14);
-var visualization_color_palettes_1 = __webpack_require__(51);
-// eslint-disable-next-line camelcase
+
+var visualization_color_palettes_1 = __webpack_require__(51); // eslint-disable-next-line camelcase
+
+
 var sankey_1 = __webpack_require__(458);
+
 var VizStyleWrapper_1 = __webpack_require__(73);
+
 var SankeyUtils_1 = __webpack_require__(134);
+
 var SankeyNode_1 = __webpack_require__(459);
+
 var SankeyLink_1 = __webpack_require__(460);
+
 var SankeyTooltip_1 = __webpack_require__(461);
+
 exports.DEFAULT_COLORS = {
   backgroundColor: '#ffffff',
   nodeTextColor: '#2c2c2c',
@@ -179,73 +198,116 @@ var SankeyContainer = styled_components_1.default.div.withConfig({
 })(["overflow:hidden;", ";"], function (props) {
   return (0, style_1.toDimension)((0, lodash_1.pick)(props, ['width', 'height']));
 });
+
 var PureSankey = function PureSankey(props) {
   var width = props.width,
-    height = props.height,
-    columns = props.columns,
-    colorMode = props.colorMode,
-    nodeWidth = props.nodeWidth,
-    nodePadding = props.nodePadding,
-    resultLimit = props.resultLimit,
-    seriesColors = props.seriesColors,
-    linkColors = props.linkColors,
-    linkOpacity = props.linkOpacity,
-    linkValueField = props.linkValueField,
-    backgroundColor = props.backgroundColor,
-    nodeTextColor = props.nodeTextColor,
-    tooltipRowColor = props.tooltipRowColor,
-    tooltipLinkHeaderColor = props.tooltipLinkHeaderColor,
-    tooltipHeaderColor = props.tooltipHeaderColor;
+      height = props.height,
+      columns = props.columns,
+      columnsFromDataSource = props.columnsFromDataSource,
+      fields = props.fields,
+      colorMode = props.colorMode,
+      nodeWidth = props.nodeWidth,
+      nodePadding = props.nodePadding,
+      resultLimit = props.resultLimit,
+      seriesColors = props.seriesColors,
+      linkColors = props.linkColors,
+      linkOpacity = props.linkOpacity,
+      linkValueField = props.linkValueField,
+      backgroundColor = props.backgroundColor,
+      nodeTextColor = props.nodeTextColor,
+      tooltipRowColor = props.tooltipRowColor,
+      tooltipLinkHeaderColor = props.tooltipLinkHeaderColor,
+      tooltipHeaderColor = props.tooltipHeaderColor,
+      onNodeClick = props.onNodeClick,
+      onLinkClick = props.onLinkClick;
   var margin = {
     top: 17,
     right: 25,
     bottom: 17,
     left: 30
-  };
-  // This is to translate the svg's root g based on margin
+  }; // This is to translate the svg's root g based on margin
   // The y position is same as margin top & bottom
   // The x position is an avg of margin right & left
+
   var translatePos = {
     x: 28,
     y: 17
   };
+
   var _ref = (0, react_1.useState)([]),
-    _ref2 = _slicedToArray(_ref, 2),
-    activeLinks = _ref2[0],
-    setActiveLinks = _ref2[1];
+      _ref2 = _slicedToArray(_ref, 2),
+      activeLinks = _ref2[0],
+      setActiveLinks = _ref2[1];
+
   var _ref3 = (0, react_1.useState)([]),
-    _ref4 = _slicedToArray(_ref3, 2),
-    activeNodes = _ref4[0],
-    setActiveNodes = _ref4[1];
+      _ref4 = _slicedToArray(_ref3, 2),
+      activeNodes = _ref4[0],
+      setActiveNodes = _ref4[1];
+
   var _ref5 = (0, react_1.useState)(null),
-    _ref6 = _slicedToArray(_ref5, 2),
-    nodeHovered = _ref6[0],
-    setNodeHovered = _ref6[1];
+      _ref6 = _slicedToArray(_ref5, 2),
+      nodeHovered = _ref6[0],
+      setNodeHovered = _ref6[1];
+
   var _ref7 = (0, react_1.useState)(null),
-    _ref8 = _slicedToArray(_ref7, 2),
-    hoveredNodeElement = _ref8[0],
-    setHoveredNodeElement = _ref8[1];
+      _ref8 = _slicedToArray(_ref7, 2),
+      hoveredNodeElement = _ref8[0],
+      setHoveredNodeElement = _ref8[1];
+
   var _ref9 = (0, react_1.useState)(false),
-    _ref10 = _slicedToArray(_ref9, 2),
-    openNodeToolTip = _ref10[0],
-    setOpenNodeToolTip = _ref10[1];
+      _ref10 = _slicedToArray(_ref9, 2),
+      openNodeToolTip = _ref10[0],
+      setOpenNodeToolTip = _ref10[1];
+
   var _ref11 = (0, react_1.useState)(null),
-    _ref12 = _slicedToArray(_ref11, 2),
-    hoveredLinkElement = _ref12[0],
-    setHoveredLinkElement = _ref12[1];
+      _ref12 = _slicedToArray(_ref11, 2),
+      hoveredLinkElement = _ref12[0],
+      setHoveredLinkElement = _ref12[1];
+
   var _ref13 = (0, react_1.useState)(false),
-    _ref14 = _slicedToArray(_ref13, 2),
-    openLinkToolTip = _ref14[0],
-    setOpenLinkToolTip = _ref14[1];
+      _ref14 = _slicedToArray(_ref13, 2),
+      openLinkToolTip = _ref14[0],
+      setOpenLinkToolTip = _ref14[1];
+
   var sankeyContainerElement = (0, react_1.useRef)(null);
+
   var _ref15 = (0, react_1.useState)(exports.DEFAULT_CHART_WIDTH - margin.left - margin.right),
-    _ref16 = _slicedToArray(_ref15, 2),
-    sankeyWidth = _ref16[0],
-    setSankeyWidth = _ref16[1];
+      _ref16 = _slicedToArray(_ref15, 2),
+      sankeyWidth = _ref16[0],
+      setSankeyWidth = _ref16[1];
+
   var _ref17 = (0, react_1.useState)(exports.DEFAULT_CHART_HEIGHT - margin.top - margin.bottom),
-    _ref18 = _slicedToArray(_ref17, 2),
-    sankeyHeight = _ref18[0],
-    setSankeyHeight = _ref18[1];
+      _ref18 = _slicedToArray(_ref17, 2),
+      sankeyHeight = _ref18[0],
+      setSankeyHeight = _ref18[1];
+
+  var handleNodeClick = (0, react_1.useCallback)(function (node) {
+    if (node) {
+      onNodeClick({
+        type: 'node.click',
+        payload: {
+          nodeValue: node.value,
+          nodeName: node.name
+        }
+      });
+    }
+  }, []);
+  var handleLinkClick = (0, react_1.useCallback)(function (link) {
+    if (link) {
+      var payload = {
+        name: linkValueField,
+        value: link.value
+      };
+      fields.forEach(function (field, idx) {
+        var rowToken = "row.".concat(field, ".value");
+        payload[rowToken] = columns[idx][link.index];
+      });
+      onLinkClick({
+        type: 'link.click',
+        payload: payload
+      });
+    }
+  }, [fields, columns, linkValueField]);
   (0, react_1.useEffect)(function () {
     if (sankeyContainerElement && sankeyContainerElement.current) {
       var w = sankeyContainerElement.current.getBoundingClientRect().width;
@@ -256,8 +318,9 @@ var PureSankey = function PureSankey(props) {
       setSankeyHeight(sHeight - margin.top - margin.bottom);
     }
   }, [width, height]);
-  var sankeyData = (0, SankeyUtils_1.convertInputToSankeyDataFormat)(columns, exports.DEFAULT_SOURCE_INDEX, exports.DEFAULT_TARGET_INDEX, exports.DEFAULT_LINK_VALUE_INDEX, resultLimit);
-  if (!sankeyData || !columns || !Array.isArray(columns) || columns.length < 3) {
+  var sankeyData = (0, SankeyUtils_1.convertInputToSankeyDataFormat)(columnsFromDataSource, exports.DEFAULT_SOURCE_INDEX, exports.DEFAULT_TARGET_INDEX, exports.DEFAULT_LINK_VALUE_INDEX, resultLimit);
+
+  if (!sankeyData || !columnsFromDataSource || !Array.isArray(columnsFromDataSource) || columnsFromDataSource.length < 3) {
     return React.createElement(Message_1.default, {
       width: width,
       height: height,
@@ -265,6 +328,7 @@ var PureSankey = function PureSankey(props) {
       level: "info"
     });
   }
+
   var sortAndAssignLinkIds = function sortAndAssignLinkIds(links) {
     links.sort(function (a, b) {
       return a.dy - b.dy;
@@ -274,6 +338,7 @@ var PureSankey = function PureSankey(props) {
       link.id = "link-".concat(link.source.index, "-").concat(link.target.index);
     });
   };
+
   var d3sankey = (0, sankey_1.d3_sankey)().nodeWidth(nodeWidth).nodePadding(nodePadding).size([sankeyWidth, sankeyHeight]);
   var path = d3sankey.reversibleLink();
   d3sankey.nodes(sankeyData.nodes).links(sankeyData.links).layout(500);
@@ -286,6 +351,7 @@ var PureSankey = function PureSankey(props) {
     seriesColors: seriesColors,
     linkColors: linkColors
   });
+
   var resetStates = function resetStates() {
     setActiveLinks([]);
     setActiveNodes([]);
@@ -295,9 +361,11 @@ var PureSankey = function PureSankey(props) {
     setOpenLinkToolTip(false);
     setOpenNodeToolTip(false);
   };
+
   var renderVisualization = function renderVisualization(_ref19) {
     var containerWidth = _ref19.width,
-      containerHeight = _ref19.height;
+        containerHeight = _ref19.height;
+
     if (containerWidth < exports.CHART_MIN_WIDTH || containerHeight < exports.CHART_MIN_HEIGHT) {
       return React.createElement(Message_1.default, {
         width: containerWidth,
@@ -306,6 +374,7 @@ var PureSankey = function PureSankey(props) {
         level: "info"
       });
     }
+
     var renderLinks = function renderLinks(links) {
       return links.map(function (link) {
         return React.createElement(SankeyLink_1.default, {
@@ -326,10 +395,12 @@ var PureSankey = function PureSankey(props) {
           },
           handleMouseLeave: function handleMouseLeave() {
             resetStates();
-          }
+          },
+          handleLinkClick: handleLinkClick
         });
       });
     };
+
     var renderNodes = function renderNodes(nodes) {
       var chartWidth = typeof width === 'number' ? width : Number.parseInt(width, 10);
       return nodes.map(function (node) {
@@ -353,10 +424,12 @@ var PureSankey = function PureSankey(props) {
           },
           handleMouseLeave: function handleMouseLeave() {
             return resetStates();
-          }
+          },
+          handleNodeClick: handleNodeClick
         });
       });
     };
+
     return React.createElement(VizStyleWrapper_1.default, {
       backgroundColor: backgroundColor,
       dataTestKey: "SankeyWrapper",
@@ -409,6 +482,7 @@ var PureSankey = function PureSankey(props) {
       tooltipHeaderColor: tooltipHeaderColor
     })))));
   };
+
   return React.createElement(SankeyContainer, {
     height: height,
     width: width,
@@ -417,8 +491,11 @@ var PureSankey = function PureSankey(props) {
     return renderVisualization(containerDimension);
   }));
 };
+
 PureSankey.propTypes = {
   columns: T.array,
+  columnsFromDataSource: T.array,
+  fields: T.array,
   width: T.oneOfType([T.string, T.number]),
   height: T.oneOfType([T.string, T.number]),
   // need this to satisfy props interface
@@ -439,7 +516,9 @@ PureSankey.propTypes = {
   tooltipHeaderColor: T.string
 };
 PureSankey.defaultProps = {
+  columnsFromDataSource: [],
   columns: [],
+  fields: [],
   width: exports.DEFAULT_CHART_WIDTH,
   height: exports.DEFAULT_CHART_HEIGHT,
   mode: 'view',
@@ -455,7 +534,9 @@ PureSankey.defaultProps = {
   nodeTextColor: 'rgba(255, 255, 255, 0.98)',
   tooltipRowColor: 'rgba(255, 255, 255, 0.98)',
   tooltipLinkHeaderColor: 'rgba(255, 255, 255, 0.98)',
-  tooltipHeaderColor: 'rgba(255, 255, 255, 0.5)'
+  tooltipHeaderColor: 'rgba(255, 255, 255, 0.5)',
+  onNodeClick: lodash_1.noop,
+  onLinkClick: lodash_1.noop
 };
 exports.default = PureSankey;
 
@@ -477,11 +558,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 {
@@ -494,11 +581,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)
@@ -520,11 +607,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",
@@ -532,24 +621,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;
 
 /***/ }),
@@ -565,16 +657,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.truncateSVGTextWithEllipsis = exports.checkDigitsOnly = exports.computeAllConnectedLinksToNodes = exports.getAllConnectedLinks = exports.extractLinkMidPoint = exports.getAllNodeNames = exports.getLinkId = exports.getNodeId = exports.convertInputToSankeyDataFormat = exports.getColorCategoryMapping = exports.getNodesIndex = void 0;
 /* eslint-disable no-param-reassign */
-var d3_scale_1 = __webpack_require__(92);
-var types_1 = __webpack_require__(94);
+
+var d3_scale_1 = __webpack_require__(93);
+
+var types_1 = __webpack_require__(83);
+
 var insertNodeIfNotExist = function insertNodeIfNotExist(sankeyData, nodeName) {
   var nodes = sankeyData.nodes;
   nodes = nodes || [];
+
   if (typeof nodeName !== 'string') {
     console.error('Node not created, invalid nodename:', nodeName);
     return;
   }
+
   nodeName = nodeName.trim();
+
   if (!nodes.find(function (node) {
     return node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase();
   })) {
@@ -583,6 +681,7 @@ var insertNodeIfNotExist = function insertNodeIfNotExist(sankeyData, nodeName) {
     });
   }
 };
+
 var insertLink = function insertLink(sankeyData, sourceFieldIdx, targetFieldIdx, linkValue, index) {
   var links = sankeyData.links;
   links = links || [];
@@ -593,49 +692,60 @@ var insertLink = function insertLink(sankeyData, sourceFieldIdx, targetFieldIdx,
     index: index
   });
 };
+
 var getNodesIndex = function getNodesIndex(sankeyData, nodeName) {
   if (!sankeyData || !sankeyData.nodes || !sankeyData.nodes.length) {
     return -1;
   }
+
   return sankeyData.nodes.findIndex(function (node) {
     return node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase();
   });
 };
+
 exports.getNodesIndex = getNodesIndex;
+
 var getColorCategoryMapping = function getColorCategoryMapping(_ref) {
   var category = _ref.category,
-    colorMode = _ref.colorMode,
-    seriesColors = _ref.seriesColors,
-    linkColors = _ref.linkColors;
+      colorMode = _ref.colorMode,
+      seriesColors = _ref.seriesColors,
+      linkColors = _ref.linkColors;
+
   if (colorMode !== 'categorical') {
     return linkColors;
   }
+
   return seriesColors ? (0, d3_scale_1.scaleOrdinal)().domain(category).range(seriesColors).unknown(seriesColors[0]) : null;
 };
+
 exports.getColorCategoryMapping = getColorCategoryMapping;
+
 var convertInputToSankeyDataFormat = function convertInputToSankeyDataFormat(columns, sourceFieldIdx, targetFieldIdx, linkValueFieldIdx, resultLimit) {
   if (!columns || !Array.isArray(columns) || !columns.length || !columns[sourceFieldIdx] || !columns[targetFieldIdx] || !columns[linkValueFieldIdx] || columns.length < 3 || !Array.isArray(columns[sourceFieldIdx]) || !Array.isArray(columns[targetFieldIdx]) || !Array.isArray(columns[linkValueFieldIdx]) || !columns[sourceFieldIdx] || typeof columns[sourceFieldIdx][0] !== 'string' || !columns[targetFieldIdx] || typeof columns[targetFieldIdx][0] !== 'string') {
     return null;
   }
+
   var sankeyData = {
     nodes: [],
     links: []
   };
   var maxlen = Math.min(columns[sourceFieldIdx].length, columns[targetFieldIdx].length, columns[linkValueFieldIdx].length, resultLimit);
+
   for (var i = 0; i < maxlen; i += 1) {
     if (typeof columns[sourceFieldIdx][i] === 'string' && typeof columns[targetFieldIdx][i] === 'string' && (0, types_1.isNumber)(columns[linkValueFieldIdx][i])) {
       (function () {
         var sourceNodeName = columns[sourceFieldIdx][i].trim();
         var targetNodeName = columns[targetFieldIdx][i].trim();
         insertNodeIfNotExist(sankeyData, sourceNodeName);
-        insertNodeIfNotExist(sankeyData, targetNodeName);
-        // If same link exists then sum up the value and donot insert new link
+        insertNodeIfNotExist(sankeyData, targetNodeName); // If same link exists then sum up the value and donot insert new link
+
         var sourceNodeIdx = (0, exports.getNodesIndex)(sankeyData, sourceNodeName);
         var targetNodeIdx = (0, exports.getNodesIndex)(sankeyData, targetNodeName);
         var linkExist = sankeyData.links.find(function (link) {
           return link.source === sourceNodeIdx && link.target === targetNodeIdx;
         });
         var linkValue = +columns[linkValueFieldIdx][i];
+
         if (linkExist) {
           linkExist.value += linkValue;
         } else {
@@ -646,53 +756,70 @@ var convertInputToSankeyDataFormat = function convertInputToSankeyDataFormat(col
       console.error('Link excluded. Invalid type in column input, row :- ', i, "[".concat(columns[sourceFieldIdx][i], ", ").concat(columns[targetFieldIdx][i], ", ").concat(columns[linkValueFieldIdx][i], "]"));
     }
   }
+
   return sankeyData;
 };
+
 exports.convertInputToSankeyDataFormat = convertInputToSankeyDataFormat;
+
 var getNodeId = function getNodeId(node) {
   if (!node) {
     return '';
   }
+
   return "node-".concat(node.index);
 };
+
 exports.getNodeId = getNodeId;
+
 var getLinkId = function getLinkId(link) {
   if (!link) {
     return '';
   }
+
   return "link-".concat(link.id);
 };
+
 exports.getLinkId = getLinkId;
+
 var getAllNodeNames = function getAllNodeNames(sankeyData) {
   if (!sankeyData || !sankeyData.nodes || !sankeyData.nodes.length) {
     return [];
   }
+
   return sankeyData.nodes.map(function (node) {
     return node.name;
   });
 };
+
 exports.getAllNodeNames = getAllNodeNames;
+
 var extractLinkMidPoint = function extractLinkMidPoint(pathStr) {
   if (!pathStr) {
     return null;
   }
+
   var mIndex = pathStr.indexOf('M');
   var cIndexFirst = pathStr.indexOf('C');
   var lIndex = pathStr.indexOf('L');
   var cIndexLast = pathStr.lastIndexOf('C');
   var zIndex = pathStr.lastIndexOf('Z');
+
   if (mIndex < 0 || cIndexLast < 0 || cIndexLast < 0 || zIndex < 0) {
     console.error('Extract link midpoint error. Invalid path -', pathStr);
     return null;
   }
+
   var section1 = pathStr.slice(mIndex + 1, cIndexFirst).trim();
   var section2 = pathStr.slice(cIndexFirst + 1, lIndex).trim();
   var section3 = pathStr.slice(lIndex + 1, cIndexLast).trim();
   var section4 = pathStr.slice(cIndexLast + 1, zIndex).trim();
+
   if (!section1.length || !section2.length || !section3.length || !section4.length) {
     console.error('Extract link midpoint error. Invalid path -', pathStr);
     return null;
   }
+
   var points = [];
   points.push(section1.split(',').map(function (i) {
     return Number.parseFloat(i);
@@ -717,33 +844,42 @@ var extractLinkMidPoint = function extractLinkMidPoint(pathStr) {
     y: y
   };
 };
+
 exports.extractLinkMidPoint = extractLinkMidPoint;
+
 var getAllConnectedLinks = function getAllConnectedLinks(links, nodeIdx) {
   var result = {
     links: [],
     sourceNodes: [],
     targetNodes: []
   };
+
   if (!links || !links.length) {
     return result;
   }
+
   links.forEach(function (link) {
     if (link.source.index === nodeIdx || link.target.index === nodeIdx) {
       var linkAdded = result.links.find(function (l) {
         return l.id === link.id;
       });
+
       if (!linkAdded) {
         result.links.push(link);
       }
+
       var sourceNodeAdded = result.sourceNodes.find(function (n) {
         return n.index === link.source.index;
       });
+
       if (!sourceNodeAdded) {
         result.sourceNodes.push(link.source);
       }
+
       var targetNodeAdded = result.targetNodes.find(function (n) {
         return n.index === link.target.index;
       });
+
       if (!targetNodeAdded) {
         result.targetNodes.push(link.target);
       }
@@ -751,28 +887,35 @@ var getAllConnectedLinks = function getAllConnectedLinks(links, nodeIdx) {
   });
   return result;
 };
+
 exports.getAllConnectedLinks = getAllConnectedLinks;
+
 var computeAllConnectedLinksToNodes = function computeAllConnectedLinksToNodes(nodes, links) {
   var connectionsMap = {};
+
   if (!nodes || !links) {
     return connectionsMap;
   }
+
   nodes.forEach(function (node) {
     var connections = (0, exports.getAllConnectedLinks)(links, node.index);
     connectionsMap[node.index] = connections;
   });
   return connectionsMap;
 };
+
 exports.computeAllConnectedLinksToNodes = computeAllConnectedLinksToNodes;
+
 var checkDigitsOnly = function checkDigitsOnly(input) {
   return /^\d+$/.test(input);
 };
-exports.checkDigitsOnly = checkDigitsOnly;
-// Truncate the node text and show ellipsis at the end if text string width exceeds the max limit
+
+exports.checkDigitsOnly = checkDigitsOnly; // Truncate the node text and show ellipsis at the end if text string width exceeds the max limit
+
 var truncateSVGTextWithEllipsis = function truncateSVGTextWithEllipsis(textElement, textString, width) {
   if (textElement && textElement.getSubStringLength !== undefined) {
-    textElement.textContent = textString;
-    // ellipsis is needed
+    textElement.textContent = textString; // ellipsis is needed
+
     if (textElement.getSubStringLength(0, textString.length) >= width) {
       for (var x = textString.length - 3; x > 0; x -= 3) {
         if (textElement.getSubStringLength(0, x) <= width) {
@@ -780,6 +923,7 @@ var truncateSVGTextWithEllipsis = function truncateSVGTextWithEllipsis(textEleme
           return;
         }
       }
+
       textElement.textContent = '...'; // can't place at all
     }
   }
@@ -826,9 +970,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]) {
@@ -837,6 +982,7 @@ var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
     }
   });
 };
+
 exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
 /***/ }),
@@ -848,86 +994,122 @@ module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
 /***/ }),
 
-/***/ 166:
+/***/ 167:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var _typeof = __webpack_require__(82);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PureSankey = exports.config = exports.themes = exports.computeVizProps = exports.showPlaceHolderIcon = void 0;
+
 var lodash_1 = __webpack_require__(3);
+
 var dataSourceUtils_1 = __webpack_require__(97);
+
 var colorUtils_1 = __webpack_require__(12);
-var withDashboardViz_1 = __webpack_require__(36);
+
+var withDashboardViz_1 = __webpack_require__(37);
+
 var PureSankey_1 = __webpack_require__(111);
+
 exports.PureSankey = PureSankey_1.default;
+
 var config_1 = __webpack_require__(462);
+
 exports.config = config_1.default;
 /**
  * @method showPlaceHolderIcon
  * @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(_ref) {
   var themeFunc = _ref.themeFunc,
-    dataSources = _ref.dataSources,
-    linkValues = _ref.linkValues,
-    seriesColors = _ref.seriesColors,
-    linkColors = _ref.linkColors;
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-  // Compute all themeColor variables needed for PureSankey
+      dataSources = _ref.dataSources,
+      linkValues = _ref.linkValues,
+      seriesColors = _ref.seriesColors,
+      linkColors = _ref.linkColors,
+      onNodeClick = _ref.onNodeClick,
+      onLinkClick = _ref.onLinkClick;
+
+  var _a, _b, _c, _d, _e; // Compute all themeColor variables needed for PureSankey
+
+
   var themeColorVariables = ['defaultBackgroundColor', 'nodeTextColor', 'tooltipRowColor', 'tooltipLinkHeaderColor', 'tooltipHeaderColor'];
   var themeColors = {};
   themeColorVariables.forEach(function (variable) {
     themeColors[variable] = themeFunc(variable);
-  });
-  // Sanitize linkColors prop
+  }); // Sanitize linkColors prop
   // eslint-disable-next-line no-param-reassign
-  linkColors = (0, colorUtils_1.sanitizeArrayOfColors)(linkColors);
-  // Sanitize seriesColors prop
+
+  linkColors = (0, colorUtils_1.sanitizeArrayOfColors)(linkColors); // Sanitize seriesColors prop
   // (Note:- This is handled outside SanitizeProps because it would impact seriesColors option used in splunk-charting viz as the types are different.
   // The type used in splunk-charting viz expects a string of comma separated colors, but here the type is an array of string)
   // eslint-disable-next-line no-param-reassign
-  seriesColors = (0, colorUtils_1.isArrayOfColors)(seriesColors) ? seriesColors : undefined;
-  // Compute the columns props and linkValueField props for pure Sankey
+
+  seriesColors = (0, colorUtils_1.isArrayOfColors)(seriesColors) ? seriesColors : undefined; // Compute the columns props and linkValueField props for pure Sankey
   // The columns props is computed as [primary.data.columns[0], primary.data.columns[1], linkValues].
   // The source and target columns are the default as columns[0] and columns[1] respectively
   // The linkValueField props is the fieldName which is set as the source of linkValues
+
+  var _dataSources$primary$ = dataSources.primary.data,
+      columns = _dataSources$primary$.columns,
+      fields = _dataSources$primary$.fields;
   var columnsFromDataSource = [];
   var linkValueField = '';
+  var fieldNames = [];
+
   if (((_b = (_a = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.columns) && ((_e = (_d = (_c = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.columns) === null || _e === void 0 ? void 0 : _e.length) >= 2 && Array.isArray(linkValues)) {
-    var columns = dataSources.primary.data.columns;
     columnsFromDataSource = columns ? [columns[0], columns[1], linkValues] : null;
     var linkIndex = columns.findIndex(function (col) {
       return (0, lodash_1.isEqual)(col, linkValues);
     });
-    if ((_g = (_f = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.fields) {
-      var linkField = (_j = (_h = dataSources === null || dataSources === void 0 ? void 0 : dataSources.primary) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.fields[linkIndex];
-      if (_typeof(linkField) === 'object' && linkField !== null) {
-        linkValueField = linkField.name;
-      } else {
-        linkValueField = linkField !== null && linkField !== void 0 ? linkField : '';
-      }
+
+    if (fields) {
+      fields.forEach(function (field, idx) {
+        var fieldName = '';
+
+        if (_typeof(field) === 'object' && field !== null) {
+          fieldName = field.name;
+        } else {
+          fieldName = field !== null && field !== void 0 ? field : '';
+        }
+
+        if (idx === linkIndex) {
+          linkValueField = fieldName;
+        }
+
+        fieldNames.push(fieldName);
+      });
     }
   }
+
   return Object.assign(Object.assign({}, themeColors), {
-    columns: columnsFromDataSource,
+    columns: columns,
+    fields: fieldNames,
+    columnsFromDataSource: columnsFromDataSource,
     linkValueField: linkValueField,
     seriesColors: seriesColors,
-    linkColors: linkColors
+    linkColors: linkColors,
+    onNodeClick: onNodeClick,
+    onLinkClick: onLinkClick
   });
 };
+
 exports.computeVizProps = computeVizProps;
 var Sankey = (0, withDashboardViz_1.default)({
   ReactViz: PureSankey_1.default,
@@ -978,24 +1160,33 @@ module.exports = require("@splunk/ui-utils/i18n");
 
 
 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
@@ -1005,20 +1196,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 && {
@@ -1032,12 +1225,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) {
@@ -1055,6 +1250,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
@@ -1063,11 +1259,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
@@ -1075,6 +1274,7 @@ function enhanceConfig(vizConfig) {
   });
   return enhancedConfig;
 }
+
 exports.enhanceConfig = enhanceConfig;
 /**
  * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
@@ -1082,6 +1282,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) {
@@ -1091,13 +1292,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
@@ -1106,6 +1310,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) {
@@ -1115,6 +1320,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) {
@@ -1129,18 +1336,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
@@ -1148,6 +1358,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 {
@@ -1156,6 +1367,7 @@ function generatePrecisionValues(numPrecisionValues) {
     };
   });
 }
+
 exports.generatePrecisionValues = generatePrecisionValues;
 /**
  * insert layout in layout array, return a new layout array instead of updating the original
@@ -1165,12 +1377,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;
 
 /***/ }),
@@ -1248,11 +1463,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
@@ -1260,6 +1481,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);
@@ -1268,6 +1491,7 @@ var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources)
   var noFields = fields === undefined;
   return loading || noData || noFields;
 };
+
 exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
 var propTypes = {
   icon: T.func,
@@ -1282,11 +1506,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: {
@@ -1298,9 +1524,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,
@@ -1308,6 +1536,7 @@ var IconPlaceholder = function IconPlaceholder(props) {
     message: (0, i18n_1._)('No DataSource Connected')
   });
 };
+
 IconPlaceholder.propTypes = propTypes;
 IconPlaceholder.defaultProps = {
   width: '100%',
@@ -1324,21 +1553,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 = {
@@ -1347,15 +1582,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), {
@@ -1367,12 +1605,14 @@ var getSortingParams = function getSortingParams(_ref) {
       }
     };
   }
+
   return {
     currentSortKey: currentSortKey,
     currentSortDir: currentSortDir,
     onSort: onSort
   };
 };
+
 exports.getSortingParams = getSortingParams;
 
 /***/ }),
@@ -1383,43 +1623,69 @@ 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,
@@ -1427,11 +1693,12 @@ 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";
@@ -1442,6 +1709,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizCategory = void 0;
 var VizCategory;
+
 (function (VizCategory) {
   VizCategory["SINGLE_VALUE"] = "Single Value";
   VizCategory["TRENDS"] = "Trends";
@@ -1459,67 +1727,96 @@ var 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.
@@ -1533,38 +1830,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 {
@@ -1589,11 +1899,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)
@@ -1604,21 +1916,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);
     });
@@ -1628,53 +1943,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
     }));
@@ -1692,15 +2022,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,
@@ -1715,115 +2049,132 @@ 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:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/moment");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+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.
    */
@@ -1832,6 +2183,7 @@ SplunkVisualization.propTypes = {
      * current request params
      */
     requestParams: T.object,
+
     /**
      * current dataset
      */
@@ -1839,6 +2191,7 @@ SplunkVisualization.propTypes = {
       fields: T.array,
       columns: T.array
     }),
+
     /**
      * error
      */
@@ -1846,29 +2199,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
    */
@@ -1877,6 +2236,7 @@ SplunkVisualization.propTypes = {
 /**
  *
  */
+
 SplunkVisualization.defaultProps = {
   // BaseVisualization in dashboard-visualizations uses 100% for width but 250 for height
   width: '100%',
@@ -1905,26 +2265,29 @@ 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",
@@ -1932,23 +2295,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;
 
 /***/ }),
 
@@ -1962,7 +2313,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
@@ -1977,16 +2330,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;
 
 /***/ }),
@@ -2001,19 +2359,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
@@ -2021,11 +2387,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]),
@@ -2039,10 +2407,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,
@@ -2050,6 +2419,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 = {
@@ -2069,6 +2439,7 @@ exports.default = (0, FixedSizeContainer_1.default)(exports.MissingPropsMessage)
 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,
@@ -2077,22 +2448,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__(166), exports);
-var Sankey_1 = __webpack_require__(166);
+
+__exportStar(__webpack_require__(167), exports);
+
+var Sankey_1 = __webpack_require__(167);
+
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -2115,43 +2492,50 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var d3_collection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(141);
 /* harmony import */ var d3_collection__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(d3_collection__WEBPACK_IMPORTED_MODULE_2__);
 // reference link :- https://github.com/csaladenes/sankey
+
 /* eslint-disable */
 
 
 
 var d3_sankey = function d3_sankey() {
   var sankey = {},
-    nodeWidth = 24,
-    nodePadding = 8,
-    size = [1, 1],
-    nodes = [],
-    links = [],
-    components = [];
+      nodeWidth = 24,
+      nodePadding = 8,
+      size = [1, 1],
+      nodes = [],
+      links = [],
+      components = [];
+
   sankey.nodeWidth = function (_) {
     if (!arguments.length) return nodeWidth;
     nodeWidth = +_;
     return sankey;
   };
+
   sankey.nodePadding = function (_) {
     if (!arguments.length) return nodePadding;
     nodePadding = +_;
     return sankey;
   };
+
   sankey.nodes = function (_) {
     if (!arguments.length) return nodes;
     nodes = _;
     return sankey;
   };
+
   sankey.links = function (_) {
     if (!arguments.length) return links;
     links = _;
     return sankey;
   };
+
   sankey.size = function (_) {
     if (!arguments.length) return size;
     size = _;
     return sankey;
   };
+
   sankey.layout = function (iterations) {
     computeNodeLinks();
     computeNodeValues();
@@ -2161,12 +2545,11 @@ var d3_sankey = function d3_sankey() {
     computeLinkDepths();
     return sankey;
   };
+
   sankey.relayout = function () {
     computeLinkDepths();
     return sankey;
-  };
-
-  // A more involved path generator that requires 3 elements to render --
+  }; // A more involved path generator that requires 3 elements to render --
   // It draws a starting element, intermediate and end element that are useful
   // while drawing reverse links to get an appropriate fill.
   //
@@ -2189,32 +2572,34 @@ var d3_sankey = function d3_sankey() {
   //      .attr("d", path(i))
   //      .attr("fill", ...)
   //  }
-  sankey.reversibleLink = function () {
-    var curvature = 0.5;
 
-    // Used when source is behind target, the first and last paths are simple
+
+  sankey.reversibleLink = function () {
+    var curvature = 0.5; // Used when source is behind target, the first and last paths are simple
     // lines at the start and end node while the second path is the spline
+
     function forwardLink(part, d) {
       var x0 = d.source.x + d.source.dx,
-        x1 = d.target.x,
-        xi = Object(d3_interpolate__WEBPACK_IMPORTED_MODULE_0__["interpolateNumber"])(x0, x1),
-        x2 = xi(curvature),
-        x3 = xi(1 - curvature),
-        y0 = d.source.y + d.sy,
-        y1 = d.target.y + d.ty,
-        y2 = d.source.y + d.sy + d.dy,
-        y3 = d.target.y + d.ty + d.dy;
+          x1 = d.target.x,
+          xi = Object(d3_interpolate__WEBPACK_IMPORTED_MODULE_0__["interpolateNumber"])(x0, x1),
+          x2 = xi(curvature),
+          x3 = xi(1 - curvature),
+          y0 = d.source.y + d.sy,
+          y1 = d.target.y + d.ty,
+          y2 = d.source.y + d.sy + d.dy,
+          y3 = d.target.y + d.ty + d.dy;
+
       switch (part) {
         case 0:
           return 'M' + x0 + ',' + y0 + 'L' + x0 + ',' + (y0 + d.dy);
+
         case 1:
           return 'M' + x0 + ',' + y0 + 'C' + x2 + ',' + y0 + ' ' + x3 + ',' + y1 + ' ' + x1 + ',' + y1 + 'L' + x1 + ',' + y3 + 'C' + x3 + ',' + y3 + ' ' + x2 + ',' + y2 + ' ' + x0 + ',' + y2 + 'Z';
+
         case 2:
           return 'M' + x1 + ',' + y1 + 'L' + x1 + ',' + (y1 + d.dy);
       }
-    }
-
-    // Used for self loops and when the source is actually in front of the
+    } // Used for self loops and when the source is actually in front of the
     // target; the first element is a turning path from the source to the
     // destination, the second element connects the two twists and the last
     // twists into the target element.
@@ -2224,29 +2609,38 @@ var d3_sankey = function d3_sankey() {
     //  \----------------------\
     //                 Source--/
     //
+
+
     function backwardLink(part, d) {
       var curveExtension = 30;
       var curveDepth = 15;
+
       function getDir(d) {
         return d.source.y + d.sy > d.target.y + d.ty ? -1 : 1;
       }
+
       function p(x, y) {
         return x + ',' + y + ' ';
       }
+
       var dt = getDir(d) * curveDepth,
-        x0 = d.source.x + d.source.dx,
-        y0 = d.source.y + d.sy,
-        x1 = d.target.x,
-        y1 = d.target.y + d.ty;
+          x0 = d.source.x + d.source.dx,
+          y0 = d.source.y + d.sy,
+          x1 = d.target.x,
+          y1 = d.target.y + d.ty;
+
       switch (part) {
         case 0:
           return 'M' + p(x0, y0) + 'C' + p(x0, y0) + p(x0 + curveExtension, y0) + p(x0 + curveExtension, y0 + dt) + 'L' + p(x0 + curveExtension, y0 + dt + d.dy) + 'C' + p(x0 + curveExtension, y0 + d.dy) + p(x0, y0 + d.dy) + p(x0, y0 + d.dy) + 'Z';
+
         case 1:
           return 'M' + p(x0 + curveExtension, y0 + dt) + 'C' + p(x0 + curveExtension, y0 + 3 * dt) + p(x1 - curveExtension, y1 - 3 * dt) + p(x1 - curveExtension, y1 - dt) + 'L' + p(x1 - curveExtension, y1 - dt + d.dy) + 'C' + p(x1 - curveExtension, y1 - 3 * dt + d.dy) + p(x0 + curveExtension, y0 + 3 * dt + d.dy) + p(x0 + curveExtension, y0 + dt + d.dy) + 'Z';
+
         case 2:
           return 'M' + p(x1 - curveExtension, y1 - dt) + 'C' + p(x1 - curveExtension, y1) + p(x1, y1) + p(x1, y1) + 'L' + p(x1, y1 + d.dy) + 'C' + p(x1, y1 + d.dy) + p(x1 - curveExtension, y1 + d.dy) + p(x1 - curveExtension, y1 + d.dy - dt) + 'Z';
       }
     }
+
     return function (part) {
       return function (d) {
         if (d.source.x < d.target.x) {
@@ -2256,32 +2650,35 @@ var d3_sankey = function d3_sankey() {
         }
       };
     };
-  };
-
-  // The standard link path using a constant width spline that needs a
+  }; // The standard link path using a constant width spline that needs a
   // single path element.
+
+
   sankey.link = function () {
     var curvature = 0.5;
+
     function link(d) {
       var x0 = d.source.x + d.source.dx,
-        x1 = d.target.x,
-        xi = Object(d3_interpolate__WEBPACK_IMPORTED_MODULE_0__["interpolateNumber"])(x0, x1),
-        x2 = xi(curvature),
-        x3 = xi(1 - curvature),
-        y0 = d.source.y + d.sy + d.dy / 2,
-        y1 = d.target.y + d.ty + d.dy / 2;
+          x1 = d.target.x,
+          xi = Object(d3_interpolate__WEBPACK_IMPORTED_MODULE_0__["interpolateNumber"])(x0, x1),
+          x2 = xi(curvature),
+          x3 = xi(1 - curvature),
+          y0 = d.source.y + d.sy + d.dy / 2,
+          y1 = d.target.y + d.ty + d.dy / 2;
       return 'M' + x0 + ',' + y0 + 'C' + x2 + ',' + y0 + ' ' + x3 + ',' + y1 + ' ' + x1 + ',' + y1;
     }
+
     link.curvature = function (_) {
       if (!arguments.length) return curvature;
       curvature = +_;
       return link;
     };
-    return link;
-  };
 
-  // Populate the sourceLinks and targetLinks for each node.
+    return link;
+  }; // Populate the sourceLinks and targetLinks for each node.
   // Also, if the source and target are not objects, assume they are indices.
+
+
   function computeNodeLinks() {
     nodes.forEach(function (node) {
       node.sourceLinks = [];
@@ -2289,44 +2686,46 @@ var d3_sankey = function d3_sankey() {
     });
     links.forEach(function (link) {
       var source = link.source,
-        target = link.target;
+          target = link.target;
       if (typeof source === 'number') source = link.source = nodes[link.source];
       if (typeof target === 'number') target = link.target = nodes[link.target];
       source.sourceLinks.push(link);
       target.targetLinks.push(link);
     });
-  }
+  } // Compute the value (size) of each node by summing the associated links.
+
 
-  // Compute the value (size) of each node by summing the associated links.
   function computeNodeValues() {
     nodes.forEach(function (node) {
-      if (!node.value)
-        //if not already given
+      if (!node.value) //if not already given
         node.value = Math.max(Object(d3_array__WEBPACK_IMPORTED_MODULE_1__["sum"])(node.sourceLinks, value), Object(d3_array__WEBPACK_IMPORTED_MODULE_1__["sum"])(node.targetLinks, value));
     });
-  }
-
-  // Take the list of nodes and create a DAG of supervertices, each consisting
+  } // Take the list of nodes and create a DAG of supervertices, each consisting
   // of a strongly connected component of the graph
   //
   // Based off:
   // http://en.wikipedia.org/wiki/Tarjan's_strongly_connected_components_algorithm
+
+
   function computeNodeStructure() {
     var nodeStack = [],
-      index = 0;
+        index = 0;
     nodes.forEach(function (node) {
       if (!node.index) {
         connect(node);
       }
     });
+
     function connect(node) {
       node.index = index++;
       node.lowIndex = node.index;
       node.onStack = true;
       nodeStack.push(node);
+
       if (node.sourceLinks) {
         node.sourceLinks.forEach(function (sourceLink) {
           var target = sourceLink.target;
+
           if (!target.hasOwnProperty('index')) {
             connect(target);
             node.lowIndex = Math.min(node.lowIndex, target.lowIndex);
@@ -2334,14 +2733,17 @@ var d3_sankey = function d3_sankey() {
             node.lowIndex = Math.min(node.lowIndex, target.index);
           }
         });
+
         if (node.lowIndex === node.index) {
           var component = [],
-            currentNode;
+              currentNode;
+
           do {
             currentNode = nodeStack.pop();
             currentNode.onStack = false;
             component.push(currentNode);
           } while (currentNode != node);
+
           components.push({
             root: node,
             scc: component
@@ -2349,16 +2751,17 @@ var d3_sankey = function d3_sankey() {
         }
       }
     }
+
     components.forEach(function (component, i) {
       component.index = i;
       component.scc.forEach(function (node) {
         node.component = i;
       });
     });
-  }
-
-  // Assign the breadth (x-position) for each strongly connected component,
+  } // Assign the breadth (x-position) for each strongly connected component,
   // followed by assigning breadth within the component.
+
+
   function computeNodeBreadths() {
     layerComponents();
     components.forEach(function (component, i) {
@@ -2378,7 +2781,7 @@ var d3_sankey = function d3_sankey() {
       return d.values;
     });
     var max = -1,
-      nextMax = -1;
+        nextMax = -1;
     componentsByBreadth.forEach(function (c) {
       c.forEach(function (component) {
         component.x = max + 1;
@@ -2398,14 +2801,17 @@ var d3_sankey = function d3_sankey() {
       node.x = node.layer ? node.x : max;
     });
     scaleNodeBreadths((size[0] - nodeWidth) / Math.max(max, 1));
+
     function flatten(a) {
       return [].concat.apply([], a);
     }
+
     function layerComponents() {
       var remainingComponents = components,
-        nextComponents,
-        visitedIndex,
-        x = 0;
+          nextComponents,
+          visitedIndex,
+          x = 0;
+
       while (remainingComponents.length) {
         nextComponents = [];
         visitedIndex = {};
@@ -2424,14 +2830,17 @@ var d3_sankey = function d3_sankey() {
         ++x;
       }
     }
+
     function bfs(node, extractTargets) {
       var queue = [node],
-        currentCount = 1,
-        nextCount = 0;
+          currentCount = 1,
+          nextCount = 0;
       var x = 0;
+
       while (currentCount > 0) {
         var currentNode = queue.shift();
         currentCount--;
+
         if (!currentNode.hasOwnProperty('x')) {
           currentNode.x = x;
           currentNode.dx = nodeWidth;
@@ -2439,6 +2848,7 @@ var d3_sankey = function d3_sankey() {
           queue = queue.concat(targets);
           nextCount += targets.length;
         }
+
         if (currentCount == 0) {
           // level change
           x++;
@@ -2446,9 +2856,8 @@ var d3_sankey = function d3_sankey() {
           nextCount = 0;
         }
       }
-    }
+    } //extra code for fixed layout - x part
 
-    //extra code for fixed layout - x part
     /*
     if (fixedlayout && fixedlayout.length > 0) {
     sankey.nodes().forEach(function (d, i) {
@@ -2456,6 +2865,7 @@ var d3_sankey = function d3_sankey() {
     });
     }
     */
+
   }
 
   function moveSourcesRight() {
@@ -2467,6 +2877,7 @@ var d3_sankey = function d3_sankey() {
       }
     });
   }
+
   function moveSinksRight(x) {
     nodes.forEach(function (node) {
       if (!node.sourceLinks.length) {
@@ -2474,11 +2885,13 @@ var d3_sankey = function d3_sankey() {
       }
     });
   }
+
   function scaleNodeBreadths(kx) {
     nodes.forEach(function (node) {
       node.x *= kx;
     });
   }
+
   function computeNodeDepths(iterations) {
     var nodesByBreadth = Object(d3_collection__WEBPACK_IMPORTED_MODULE_2__["nest"])().key(function (d) {
       return d.x;
@@ -2487,12 +2900,14 @@ var d3_sankey = function d3_sankey() {
     });
     initializeNodeDepth();
     resolveCollisions();
+
     for (var alpha = 1; iterations > 0; --iterations) {
       relaxRightToLeft(alpha *= 0.99);
       resolveCollisions();
       relaxLeftToRight(alpha);
       resolveCollisions();
     }
+
     function initializeNodeDepth() {
       var ky = Object(d3_array__WEBPACK_IMPORTED_MODULE_1__["min"])(nodesByBreadth, function (nodes) {
         return (size[1] - (nodes.length - 1) * nodePadding) / Object(d3_array__WEBPACK_IMPORTED_MODULE_1__["sum"])(nodes, value);
@@ -2507,6 +2922,7 @@ var d3_sankey = function d3_sankey() {
         link.dy = link.value * ky;
       });
     }
+
     function relaxLeftToRight(alpha) {
       nodesByBreadth.forEach(function (nodes, breadth) {
         nodes.forEach(function (node) {
@@ -2516,10 +2932,12 @@ var d3_sankey = function d3_sankey() {
           }
         });
       });
+
       function weightedSource(link) {
         return center(link.source) * link.value;
       }
     }
+
     function relaxRightToLeft(alpha) {
       nodesByBreadth.slice().reverse().forEach(function (nodes) {
         nodes.forEach(function (node) {
@@ -2529,35 +2947,38 @@ var d3_sankey = function d3_sankey() {
           }
         });
       });
+
       function weightedTarget(link) {
         return center(link.target) * link.value;
       }
     }
+
     function resolveCollisions() {
       nodesByBreadth.forEach(function (nodes) {
         var node,
-          dy,
-          y0 = 0,
-          n = nodes.length,
-          i;
+            dy,
+            y0 = 0,
+            n = nodes.length,
+            i; // Push any overlapping nodes down.
 
-        // Push any overlapping nodes down.
         nodes.sort(ascendingDepth);
+
         for (i = 0; i < n; ++i) {
           node = nodes[i];
+
           if (node) {
             dy = y0 - node.y;
             if (dy > 0) node.y += dy;
             y0 = node.y + node.dy + nodePadding;
           }
-        }
+        } // If the bottommost node goes outside the bounds, push it back up.
+
 
-        // If the bottommost node goes outside the bounds, push it back up.
         dy = y0 - nodePadding - size[1];
+
         if (node && dy > 0) {
-          y0 = node.y -= dy;
+          y0 = node.y -= dy; // Push any overlapping nodes back up.
 
-          // Push any overlapping nodes back up.
           for (i = n - 2; i >= 0; --i) {
             node = nodes[i];
             dy = node.y + node.dy + nodePadding - y0;
@@ -2567,11 +2988,11 @@ var d3_sankey = function d3_sankey() {
         }
       });
     }
+
     function ascendingDepth(a, b) {
       return a.y - b.y;
-    }
+    } //extra code for fixed layout - y part
 
-    //extra code for fixed layout - y part
     /*
     if (fixedlayout.length > 0) {
     sankey.nodes().forEach(function (d, i) {
@@ -2579,17 +3000,20 @@ var d3_sankey = function d3_sankey() {
     });
     }
     */
+
   }
 
   function computeLinkDepths() {
     nodes.forEach(function (node) {
       var parallelrendering = false;
+
       if (parallelrendering) {} else node.sourceLinks.sort(ascendingTargetDepth);
+
       node.targetLinks.sort(ascendingSourceDepth);
     });
     nodes.forEach(function (node) {
       var sy = 0,
-        ty = 0;
+          ty = 0;
       node.sourceLinks.forEach(function (link) {
         link.sy = sy;
         sy += link.dy;
@@ -2599,19 +3023,24 @@ var d3_sankey = function d3_sankey() {
         ty += link.dy;
       });
     });
+
     function ascendingSourceDepth(a, b) {
       return a.source.y - b.source.y;
     }
+
     function ascendingTargetDepth(a, b) {
       return a.target.y - b.target.y;
     }
   }
+
   function center(node) {
     return node.y + node.dy / 2;
   }
+
   function value(link) {
     return link.value;
   }
+
   return sankey;
 };
 
@@ -2626,29 +3055,40 @@ var d3_sankey = function d3_sankey() {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var styled_components_1 = __webpack_require__(4);
+
 var react_1 = __webpack_require__(1);
+
 var PureSankey_1 = __webpack_require__(111);
+
 var SankeyUtils_1 = __webpack_require__(134);
+
 var MAX_NODE_TEXT_WIDTH = 150;
+
 var getNodeOpacity = function getNodeOpacity(nodeIndex, activeNodes) {
   if (!activeNodes || !activeNodes.length) {
     return PureSankey_1.DEFAULT_NODE_OPACITY;
   }
+
   var isActiveNode = activeNodes.find(function (node) {
     return node.index === nodeIndex;
   });
   return isActiveNode ? PureSankey_1.DEFAULT_NODE_OPACITY : PureSankey_1.INACTIVE_OPACITY;
 };
+
 var getNodeHeight = function getNodeHeight(node) {
   return node.dy < 0 ? 1 : node.dy;
 };
+
 var NodeGroup = styled_components_1.default.g.withConfig({
   displayName: "SankeyNode__NodeGroup",
   componentId: "sc-1a3nkch-0"
-})(["opacity:", ";"], function (props) {
+})(["opacity:", ";&:hover{cursor:pointer;}"], function (props) {
   return getNodeOpacity(props.node.index, props.activeNodes);
 });
 NodeGroup.displayName = 'NodeGroup';
@@ -2666,26 +3106,32 @@ var NodeText = styled_components_1.default.text.withConfig({
 }, PureSankey_1.DEFAULT_FONT_FAMILY, function (props) {
   return props.nodeTextColor;
 });
+
 var SankeyNode = function SankeyNode(props) {
   var node = props.node,
-    activeNodes = props.activeNodes,
-    nodeWidth = props.nodeWidth,
-    chartWidth = props.chartWidth,
-    handleMouseOver = props.handleMouseOver,
-    handleMouseLeave = props.handleMouseLeave,
-    colorCategoryMapping = props.colorCategoryMapping,
-    nodeTextColor = props.nodeTextColor;
+      activeNodes = props.activeNodes,
+      nodeWidth = props.nodeWidth,
+      chartWidth = props.chartWidth,
+      handleMouseOver = props.handleMouseOver,
+      handleMouseLeave = props.handleMouseLeave,
+      handleNodeClick = props.handleNodeClick,
+      colorCategoryMapping = props.colorCategoryMapping,
+      nodeTextColor = props.nodeTextColor;
   var nodeTextRef = (0, react_1.useRef)();
   (0, react_1.useEffect)(function () {
     (0, SankeyUtils_1.truncateSVGTextWithEllipsis)(nodeTextRef.current, node.name, MAX_NODE_TEXT_WIDTH);
   });
+  var nodeClickHandler = (0, react_1.useCallback)(function () {
+    return handleNodeClick(node);
+  }, [node]);
   return React.createElement(NodeGroup, {
     node: node,
     activeNodes: activeNodes,
     className: "node",
     key: "node-".concat(node.index),
     "data-test": "node-".concat(node.index),
-    transform: "translate(".concat(node.x, ",").concat(node.y, ")")
+    transform: "translate(".concat(node.x, ",").concat(node.y, ")"),
+    onClick: nodeClickHandler
   }, React.createElement(React.Fragment, null, React.createElement(NodeRect, {
     node: node,
     height: getNodeHeight(node),
@@ -2707,6 +3153,7 @@ var SankeyNode = function SankeyNode(props) {
     nodeTextColor: nodeTextColor
   }, node.name)));
 };
+
 SankeyNode.propTypes = {
   node: T.object,
   activeNodes: T.arrayOf(T.object),
@@ -2734,15 +3181,19 @@ exports.default = SankeyNode;
 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"
@@ -2753,6 +3204,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;
@@ -2761,12 +3213,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;
 
 /***/ }),
@@ -2780,52 +3234,76 @@ exports.default = withEditModeCover;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
+var react_1 = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
+var styled_components_1 = __webpack_require__(4);
+
 var PureSankey_1 = __webpack_require__(111);
+
 var SankeyUtils_1 = __webpack_require__(134);
+
 var getLinkFill = function getLinkFill(link, colorCategoryMapping, colorMode) {
   if (colorMode === 'categorical') {
     return colorCategoryMapping ? colorCategoryMapping(link.source.name) : PureSankey_1.DEFAULT_LINK_COLOR;
   }
+
   return colorCategoryMapping && colorCategoryMapping[link.index] ? colorCategoryMapping[link.index] : PureSankey_1.DEFAULT_LINK_COLOR;
 };
+
 var getLinkOpacity = function getLinkOpacity(link, activeLinks, linkOpacity) {
   if (!activeLinks || !activeLinks.length) {
     return linkOpacity;
   }
+
   var isActiveLink = activeLinks.find(function (l) {
     return l.id === link.id;
   });
   return isActiveLink ? linkOpacity : PureSankey_1.INACTIVE_OPACITY;
 };
+
+var StyledSankeyLink = styled_components_1.default.g.withConfig({
+  displayName: "SankeyLink__StyledSankeyLink",
+  componentId: "sc-1w9ez3l-0"
+})(["&:hover{cursor:pointer;}"]);
+
 var SankeyLink = function SankeyLink(props) {
   var link = props.link,
-    colorCategoryMapping = props.colorCategoryMapping,
-    activeLinks = props.activeLinks,
-    linkOpacity = props.linkOpacity,
-    colorMode = props.colorMode,
-    path = props.path,
-    handleMouseOver = props.handleMouseOver,
-    handleMouseLeave = props.handleMouseLeave; // This is to draw an invisible circle added to the link's path midpoint,
+      colorCategoryMapping = props.colorCategoryMapping,
+      activeLinks = props.activeLinks,
+      linkOpacity = props.linkOpacity,
+      colorMode = props.colorMode,
+      path = props.path,
+      handleMouseOver = props.handleMouseOver,
+      handleMouseLeave = props.handleMouseLeave,
+      handleLinkClick = props.handleLinkClick; // This is to draw an invisible circle added to the link's path midpoint,
   // which acts as an anchor for the link tooltip
+
   var circlePoints = (0, SankeyUtils_1.extractLinkMidPoint)(path(1)(link));
-  return React.createElement("g", {
+  var linkClickHandler = (0, react_1.useCallback)(function () {
+    return handleLinkClick(link);
+  }, [link]);
+  return React.createElement(StyledSankeyLink, {
     className: "link",
     key: link.id,
     id: link.id,
     "data-test": link.id,
     fill: getLinkFill(link, colorCategoryMapping, colorMode),
     opacity: getLinkOpacity(link, activeLinks, linkOpacity),
+    onClick: linkClickHandler,
     onMouseOver: function onMouseOver(ev) {
       handleMouseOver(ev);
     },
     onMouseLeave: function onMouseLeave(ev) {
       var relatedTarget = ev.relatedTarget;
-      var isRelatedTargetPopover = false;
-      // This is to verify if the mouseLeave is being triggered because of mouseover on a the popover itself.
+      var isRelatedTargetPopover = false; // This is to verify if the mouseLeave is being triggered because of mouseover on a the popover itself.
       // In that case the relatedTarget will have the popover elements and this logic will check on the class name used.
       // If detects the relatedTarget is a popover, then mouseLeave event handler wont be triggered.
+
       if (relatedTarget && relatedTarget.classList) {
         var classList = relatedTarget.classList;
         classList.forEach(function (name) {
@@ -2834,6 +3312,7 @@ var SankeyLink = function SankeyLink(props) {
           }
         });
       }
+
       if (!isRelatedTargetPopover) {
         handleMouseLeave(ev);
       }
@@ -2851,6 +3330,7 @@ var SankeyLink = function SankeyLink(props) {
     fill: "transparent"
   }));
 };
+
 SankeyLink.propTypes = {
   link: T.object,
   activeLinks: T.arrayOf(T.object),
@@ -2877,12 +3357,19 @@ exports.default = SankeyLink;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var React = __webpack_require__(1);
+
 var T = __webpack_require__(0);
+
 var Popover_1 = __webpack_require__(62);
+
 var styled_components_1 = __webpack_require__(4);
+
 var numberUtils_1 = __webpack_require__(31);
+
 var PureSankey_1 = __webpack_require__(111);
+
 var DEFAULT_PLACEMENT = 'below';
 var StyledTooltipContainer = styled_components_1.default.div.withConfig({
   displayName: "SankeyTooltip__StyledTooltipContainer",
@@ -2928,50 +3415,59 @@ var NodeValue = styled_components_1.default.div.withConfig({
   displayName: "SankeyTooltip__NodeValue",
   componentId: "x563qp-8"
 })(["margin-left:8px;max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;"]);
+
 var SankeyTooltip = function SankeyTooltip(props) {
   var mode = props.mode,
-    node = props.node,
-    link = props.link,
-    open = props.open,
-    connectionsMap = props.connectionsMap,
-    anchor = props.anchor,
-    linkValue = props.linkValue,
-    colorCategoryMapping = props.colorCategoryMapping,
-    width = props.width,
-    tooltipRowColor = props.tooltipRowColor,
-    tooltipLinkHeaderColor = props.tooltipLinkHeaderColor,
-    tooltipHeaderColor = props.tooltipHeaderColor,
-    handleTooltipRequestClose = props.handleTooltipRequestClose;
+      node = props.node,
+      link = props.link,
+      open = props.open,
+      connectionsMap = props.connectionsMap,
+      anchor = props.anchor,
+      linkValue = props.linkValue,
+      colorCategoryMapping = props.colorCategoryMapping,
+      width = props.width,
+      tooltipRowColor = props.tooltipRowColor,
+      tooltipLinkHeaderColor = props.tooltipLinkHeaderColor,
+      tooltipHeaderColor = props.tooltipHeaderColor,
+      handleTooltipRequestClose = props.handleTooltipRequestClose;
+
   var showSection = function showSection(connection, nodeData, section) {
     if (!connection) {
       return false;
     }
+
     var connectionNodes = section === 'source' ? connection.sourceNodes : connection.targetNodes;
     var filteredNodes = connectionNodes.filter(function (cNode) {
       return cNode.index !== nodeData.index;
     });
     return filteredNodes.length > 0;
   };
+
   var getPopoverPlacement = function getPopoverPlacement(anchorElement) {
     if (!anchorElement) {
       return DEFAULT_PLACEMENT;
     }
-    var bBox = anchorElement.getBoundingClientRect();
-    // TODO: Depending on the testing result in dashboard reg tooltip position, might need further optimization
+
+    var bBox = anchorElement.getBoundingClientRect(); // TODO: Depending on the testing result in dashboard reg tooltip position, might need further optimization
     // If anchorElement is too close to the left border of the chart, place it to the right side of anchorElement
+
     if (bBox.x <= 15) {
       return 'right';
     }
+
     if (bBox.x >= width - 15) {
       // If anchorElement is too close to the right border of the chart, place it to the right side of anchorElement
       return 'left';
     }
+
     return DEFAULT_PLACEMENT;
   };
+
   var renderNodeToolTip = function renderNodeToolTip() {
     if (!node) {
       return null;
     }
+
     var connections = connectionsMap[node.index];
     return React.createElement(Popover_1.default, {
       open: open,
@@ -2998,6 +3494,7 @@ var SankeyTooltip = function SankeyTooltip(props) {
       headerColor: tooltipHeaderColor
     }, React.createElement(StyledTooltipLeftCell, null, "Source"), React.createElement(StyledTooltipRightCell, null, linkValue)), React.createElement(StyledTooltipSection, null, connections && connections.sourceNodes.map(function (sNode, idx) {
       var _a, _b;
+
       if ((sNode === null || sNode === void 0 ? void 0 : sNode.index) !== (node === null || node === void 0 ? void 0 : node.index) || ((_a = connections.sourceNodes[idx]) === null || _a === void 0 ? void 0 : _a.index) === ((_b = connections.targetNodes[idx]) === null || _b === void 0 ? void 0 : _b.index)) {
         return React.createElement(StyledTooltipRow, {
           key: sNode.index,
@@ -3014,11 +3511,13 @@ var SankeyTooltip = function SankeyTooltip(props) {
           useTrendUnits: true
         })));
       }
+
       return null;
     })), showSection(connections, node, 'target') && React.createElement(StyledTooltipHeader, {
       headerColor: tooltipHeaderColor
     }, React.createElement(StyledTooltipLeftCell, null, "Target"), React.createElement(StyledTooltipRightCell, null, linkValue)), React.createElement(StyledTooltipSection, null, connections && connections.targetNodes.map(function (tNode, idx) {
       var _a, _b;
+
       if ((tNode === null || tNode === void 0 ? void 0 : tNode.index) !== (node === null || node === void 0 ? void 0 : node.index) || ((_a = connections.sourceNodes[idx]) === null || _a === void 0 ? void 0 : _a.index) === ((_b = connections.targetNodes[idx]) === null || _b === void 0 ? void 0 : _b.index)) {
         return React.createElement(StyledTooltipRow, {
           key: tNode.index,
@@ -3035,14 +3534,18 @@ var SankeyTooltip = function SankeyTooltip(props) {
           useTrendUnits: true
         })));
       }
+
       return null;
     }))));
   };
+
   var renderLinkToolTip = function renderLinkToolTip() {
     var _a, _b, _c, _d;
+
     if (!link) {
       return null;
     }
+
     return React.createElement(Popover_1.default, {
       open: open,
       anchor: anchor,
@@ -3090,8 +3593,10 @@ var SankeyTooltip = function SankeyTooltip(props) {
       useTrendUnits: true
     }))))));
   };
+
   return mode === 'node' ? renderNodeToolTip() : renderLinkToolTip();
 };
+
 SankeyTooltip.propTypes = {
   mode: T.string,
   node: T.object,
@@ -3123,18 +3628,31 @@ exports.default = SankeyTooltip;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
 var visualization_icons_1 = __webpack_require__(52);
+
 var placeholders_1 = __webpack_require__(50);
+
 var visualization_color_palettes_1 = __webpack_require__(51);
+
 var schemaUtils_1 = __webpack_require__(16);
+
 var PresetPalettes_1 = __webpack_require__(61);
+
 var themes_1 = __webpack_require__(60);
+
 var i18n_1 = __webpack_require__(2);
+
 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 DynamicLinkColorsEditor_1 = __webpack_require__(463);
+
 var BackgroundColor_1 = __webpack_require__(53);
+
 var defaultContext = {
   linkColorRangeConfig: [{
     to: 20,
@@ -3312,17 +3830,20 @@ var editorConfig = [{
 /**
  * visualization configuration
  */
+
 var config = {
   /**
    * unique viz key
    */
   key: 'splunk.sankey',
+
   /**
    * viz name
    */
   name: (0, i18n_1._)('Sankey'),
   category: VizCategory_1.VizCategory.FLOW,
   status: 'preview',
+
   /**
    * viz icon
    */
@@ -3333,7 +3854,14 @@ var config = {
   defaultContext: defaultContext,
   optionsSchema: optionsSchema,
   editorConfig: editorConfig,
-  events: {},
+  events: {
+    'node.click': {
+      description: 'Triggered when user clicks on a node'
+    },
+    'link.click': {
+      description: 'Triggered when user clicks on a link'
+    }
+  },
   supports: [VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS, VizBehavior_1.VizBehavior.EVENTS, VizBehavior_1.VizBehavior.PLACEHOLDER],
   themes: themes,
   requiredProps: []
@@ -3356,7 +3884,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var getDynamicLinkColorsEditor = function getDynamicLinkColorsEditor(_ref) {
   var defaultContext = _ref.defaultContext,
-    defaultPalettesConfig = _ref.defaultPalettesConfig;
+      defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
     label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Link'),
     option: 'linkColors',
@@ -3402,27 +3930,37 @@ var getDynamicLinkColorsEditor = function getDynamicLinkColorsEditor(_ref) {
 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",
@@ -3433,14 +3971,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;
 
 /***/ }),
@@ -3475,11 +4016,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',
@@ -3490,6 +4033,7 @@ var background = function background(_ref) {
     }
   }];
 };
+
 exports.default = background;
 
 /***/ }),
@@ -3505,6 +4049,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VizBehavior = void 0;
 var VizBehavior;
+
 (function (VizBehavior) {
   /**
    * Dynamic Options Behavior.
@@ -3524,6 +4069,7 @@ var VizBehavior;
    * missing.
    * @type {string}
    */
+
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
   VizBehavior["TRELLIS"] = "trellis";
@@ -3605,24 +4151,24 @@ module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
 
-/***/ 9:
+/***/ 83:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/classCallCheck");
+module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
 
-/***/ 92:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("d3-scale");
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 94:
+/***/ 93:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/utils/types");
+module.exports = require("d3-scale");
 
 /***/ }),