@splunk/visualizations 25.6.0 → 25.7.1

package/Sankey.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 446);
+/******/ 	return __webpack_require__(__webpack_require__.s = 453);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -95,329 +95,418 @@ module.exports =
 /***/ 0:
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react");
 
 /***/ }),
 
 /***/ 1:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("prop-types");
 
 /***/ }),
 
 /***/ 10:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/Message");
-
-/***/ }),
-
-/***/ 11:
-/***/ (function(module, exports) {
-
-module.exports = require("@babel/runtime/helpers/classCallCheck");
-
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualizations-shared/colorUtils");
+module.exports = require("@splunk/themes/variables");
 
 /***/ }),
 
-/***/ 124:
+/***/ 106:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _toConsumableArray = __webpack_require__(7);
+
+var _slicedToArray = __webpack_require__(17);
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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__(83);
+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 types_1 = __webpack_require__(85);
+var React = __webpack_require__(0);
 
-var insertNodeIfNotExist = function insertNodeIfNotExist(sankeyData, nodeName) {
-  var nodes = sankeyData.nodes;
-  nodes = nodes || [];
+var react_1 = __webpack_require__(0);
 
-  if (typeof nodeName !== 'string') {
-    console.error('Node not created, invalid nodename:', nodeName);
-    return;
-  }
+var T = __webpack_require__(1);
 
-  nodeName = nodeName.trim();
+var lodash_1 = __webpack_require__(3);
 
-  if (!nodes.find(function (node) {
-    return node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase();
-  })) {
-    nodes.push({
-      name: nodeName
-    });
-  }
-};
+var styled_components_1 = __webpack_require__(4);
 
-var insertLink = function insertLink(sankeyData, sourceFieldIdx, targetFieldIdx, linkValue, index) {
-  var links = sankeyData.links;
-  links = links || [];
-  links.push({
-    source: sourceFieldIdx,
-    target: targetFieldIdx,
-    value: linkValue,
-    index: index
-  });
-};
+var Message_1 = __webpack_require__(9);
 
-var getNodesIndex = function getNodesIndex(sankeyData, nodeName) {
-  if (!sankeyData || !sankeyData.nodes || !sankeyData.nodes.length) {
-    return -1;
-  }
+var i18n_1 = __webpack_require__(2);
 
-  return sankeyData.nodes.findIndex(function (node) {
-    return node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase();
-  });
-};
+var SizeAwareWrapper_1 = __webpack_require__(18);
 
-exports.getNodesIndex = getNodesIndex;
+var style_1 = __webpack_require__(14);
 
-var getColorCategoryMapping = function getColorCategoryMapping(_ref) {
-  var category = _ref.category,
-      colorMode = _ref.colorMode,
-      seriesColors = _ref.seriesColors,
-      linkColors = _ref.linkColors;
+var visualization_color_palettes_1 = __webpack_require__(50); // eslint-disable-next-line camelcase
 
-  if (colorMode !== 'categorical') {
-    return linkColors;
-  }
 
-  return seriesColors ? d3_scale_1.scaleOrdinal().domain(category).range(seriesColors).unknown(seriesColors[0]) : null;
-};
+var sankey_1 = __webpack_require__(454);
 
-exports.getColorCategoryMapping = getColorCategoryMapping;
+var VizStyleWrapper_1 = __webpack_require__(68);
 
-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 SankeyUtils_1 = __webpack_require__(132);
 
-  var sankeyData = {
-    nodes: [],
-    links: []
-  };
-  var maxlen = Math.min(columns[sourceFieldIdx].length, columns[targetFieldIdx].length, columns[linkValueFieldIdx].length, resultLimit);
+var SankeyNode_1 = __webpack_require__(455);
 
-  for (var i = 0; i < maxlen; i += 1) {
-    if (typeof columns[sourceFieldIdx][i] === 'string' && typeof columns[targetFieldIdx][i] === 'string' && 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
+var SankeyLink_1 = __webpack_require__(456);
 
-        var sourceNodeIdx = exports.getNodesIndex(sankeyData, sourceNodeName);
-        var targetNodeIdx = exports.getNodesIndex(sankeyData, targetNodeName);
-        var linkExist = sankeyData.links.find(function (link) {
-          return link.source === sourceNodeIdx && link.target === targetNodeIdx;
-        });
-        var linkValue = +columns[linkValueFieldIdx][i];
+var SankeyTooltip_1 = __webpack_require__(457);
 
-        if (linkExist) {
-          linkExist.value += linkValue;
-        } else {
-          insertLink(sankeyData, sourceNodeIdx, targetNodeIdx, linkValue, i);
-        }
-      })();
-    } else {
-      console.error('Link excluded. Invalid type in column input, row :- ', i, "[".concat(columns[sourceFieldIdx][i], ", ").concat(columns[targetFieldIdx][i], ", ").concat(columns[linkValueFieldIdx][i], "]"));
-    }
+exports.DEFAULT_COLORS = {
+  backgroundColor: '#ffffff',
+  nodeTextColor: '#2c2c2c',
+  tooltip: {
+    headerColor: 'rgba(0, 0, 0, 0.54)',
+    linkHeaderColor: '#2c2c2c',
+    rowColor: '#2c2c2c'
   }
-
-  return sankeyData;
 };
+exports.NODE_TEXT_FONT_SIZE = 10;
+exports.DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
+exports.DEFAULT_NODE_COLOR = '#909090';
+exports.DEFAULT_LINK_COLOR = '#909090';
+exports.DEFAULT_SERIES_COLOR = visualization_color_palettes_1.VIZ_CATEGORICAL;
+exports.DEFAULT_LINK_OPACITY = 0.5;
+exports.DEFAULT_NODE_OPACITY = 1;
+exports.INACTIVE_OPACITY = 0.05;
+exports.CHART_MIN_WIDTH = 300;
+exports.CHART_MIN_HEIGHT = 200;
+exports.DEFAULT_CHART_WIDTH = 600;
+exports.DEFAULT_CHART_HEIGHT = 300;
+exports.DEFAULT_SOURCE_INDEX = 0;
+exports.DEFAULT_TARGET_INDEX = 1;
+exports.DEFAULT_LINK_VALUE_INDEX = 2;
+var SankeyContainer = styled_components_1.default.div.withConfig({
+  displayName: "PureSankey__SankeyContainer",
+  componentId: "sc-1r333qx-0"
+})(["overflow:hidden;", ";"], function (props) {
+  return style_1.toDimension(lodash_1.pick(props, ['width', 'height']));
+});
 
-exports.convertInputToSankeyDataFormat = convertInputToSankeyDataFormat;
+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;
+  var margin = {
+    top: 17,
+    right: 25,
+    bottom: 17,
+    left: 30
+  }; // 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 getNodeId = function getNodeId(node) {
-  if (!node) {
-    return '';
-  }
+  var translatePos = {
+    x: 28,
+    y: 17
+  };
 
-  return "node-".concat(node.index);
-};
+  var _react_1$useState = react_1.useState([]),
+      _react_1$useState2 = _slicedToArray(_react_1$useState, 2),
+      activeLinks = _react_1$useState2[0],
+      setActiveLinks = _react_1$useState2[1];
 
-exports.getNodeId = getNodeId;
+  var _react_1$useState3 = react_1.useState([]),
+      _react_1$useState4 = _slicedToArray(_react_1$useState3, 2),
+      activeNodes = _react_1$useState4[0],
+      setActiveNodes = _react_1$useState4[1];
 
-var getLinkId = function getLinkId(link) {
-  if (!link) {
-    return '';
-  }
+  var _react_1$useState5 = react_1.useState(null),
+      _react_1$useState6 = _slicedToArray(_react_1$useState5, 2),
+      nodeHovered = _react_1$useState6[0],
+      setNodeHovered = _react_1$useState6[1];
 
-  return "link-".concat(link.id);
-};
+  var _react_1$useState7 = react_1.useState(null),
+      _react_1$useState8 = _slicedToArray(_react_1$useState7, 2),
+      hoveredNodeElement = _react_1$useState8[0],
+      setHoveredNodeElement = _react_1$useState8[1];
 
-exports.getLinkId = getLinkId;
+  var _react_1$useState9 = react_1.useState(false),
+      _react_1$useState10 = _slicedToArray(_react_1$useState9, 2),
+      openNodeToolTip = _react_1$useState10[0],
+      setOpenNodeToolTip = _react_1$useState10[1];
 
-var getAllNodeNames = function getAllNodeNames(sankeyData) {
-  if (!sankeyData || !sankeyData.nodes || !sankeyData.nodes.length) {
-    return [];
-  }
+  var _react_1$useState11 = react_1.useState(null),
+      _react_1$useState12 = _slicedToArray(_react_1$useState11, 2),
+      hoveredLinkElement = _react_1$useState12[0],
+      setHoveredLinkElement = _react_1$useState12[1];
 
-  return sankeyData.nodes.map(function (node) {
-    return node.name;
-  });
-};
+  var _react_1$useState13 = react_1.useState(false),
+      _react_1$useState14 = _slicedToArray(_react_1$useState13, 2),
+      openLinkToolTip = _react_1$useState14[0],
+      setOpenLinkToolTip = _react_1$useState14[1];
 
-exports.getAllNodeNames = getAllNodeNames;
+  var sankeyContainerElement = react_1.useRef(null);
 
-var extractLinkMidPoint = function extractLinkMidPoint(pathStr) {
-  if (!pathStr) {
-    return null;
-  }
+  var _react_1$useState15 = react_1.useState(exports.DEFAULT_CHART_WIDTH - margin.left - margin.right),
+      _react_1$useState16 = _slicedToArray(_react_1$useState15, 2),
+      sankeyWidth = _react_1$useState16[0],
+      setSankeyWidth = _react_1$useState16[1];
 
-  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');
+  var _react_1$useState17 = react_1.useState(exports.DEFAULT_CHART_HEIGHT - margin.top - margin.bottom),
+      _react_1$useState18 = _slicedToArray(_react_1$useState17, 2),
+      sankeyHeight = _react_1$useState18[0],
+      setSankeyHeight = _react_1$useState18[1];
 
-  if (mIndex < 0 || cIndexLast < 0 || cIndexLast < 0 || zIndex < 0) {
-    console.error('Extract link midpoint error. Invalid path -', pathStr);
-    return null;
-  }
+  react_1.useEffect(function () {
+    if (sankeyContainerElement && sankeyContainerElement.current) {
+      var w = sankeyContainerElement.current.getBoundingClientRect().width;
+      var h = sankeyContainerElement.current.getBoundingClientRect().height;
+      var sWidth = SankeyUtils_1.checkDigitsOnly(width) ? parseInt(width, 10) : w;
+      var sHeight = SankeyUtils_1.checkDigitsOnly(height) ? parseInt(height, 10) : h;
+      setSankeyWidth(sWidth - margin.left - margin.right);
+      setSankeyHeight(sHeight - margin.top - margin.bottom);
+    }
+  }, [width, height]);
+  var sankeyData = SankeyUtils_1.convertInputToSankeyDataFormat(columns, exports.DEFAULT_SOURCE_INDEX, exports.DEFAULT_TARGET_INDEX, exports.DEFAULT_LINK_VALUE_INDEX, resultLimit);
 
-  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;
+  if (!sankeyData || !columns || !Array.isArray(columns) || columns.length < 3) {
+    return React.createElement(Message_1.default, {
+      width: width,
+      height: height,
+      message: i18n_1._('Invalid data to render'),
+      level: "info"
+    });
   }
 
-  var points = [];
-  points.push(section1.split(',').map(function (i) {
-    return Number.parseFloat(i);
-  }));
-  var point2Arr = section2.split(' ');
-  points.push(point2Arr[point2Arr.length - 1].split(',').map(function (i) {
-    return Number.parseFloat(i);
-  }));
-  points.push(section3.split(',').map(function (i) {
-    return Number.parseFloat(i);
-  }));
-  var point4Arr = section4.split(' ');
-  points.push(point4Arr[point4Arr.length - 1].split(',').map(function (i) {
-    return Number.parseFloat(i);
-  }));
-  var width = Math.abs(points[0][0] - points[1][0]) / 2;
-  var x = Math.min(points[0][0], points[1][0]) + width;
-  var height = Math.abs(points[0][1] - points[2][1]) / 2;
-  var y = Math.min(points[0][1], points[2][1]) + height;
-  return {
-    x: x,
-    y: y
+  var sortAndAssignLinkIds = function sortAndAssignLinkIds(links) {
+    links.sort(function (a, b) {
+      return a.dy - b.dy;
+    });
+    links.forEach(function (link) {
+      // eslint-disable-next-line no-param-reassign
+      link.id = "link-".concat(link.source.index, "-").concat(link.target.index);
+    });
   };
-};
 
-exports.extractLinkMidPoint = extractLinkMidPoint;
+  var d3sankey = sankey_1.d3_sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).size([sankeyWidth, sankeyHeight]);
+  var path = d3sankey.reversibleLink();
+  d3sankey.nodes(sankeyData.nodes).links(sankeyData.links).layout(500);
+  sortAndAssignLinkIds(sankeyData.links);
+  var nodeConnectionsMap = SankeyUtils_1.computeAllConnectedLinksToNodes(sankeyData.nodes, sankeyData.links);
+  var uniqCategory = SankeyUtils_1.getAllNodeNames(sankeyData);
+  var colorCategoryMapping = SankeyUtils_1.getColorCategoryMapping({
+    category: uniqCategory,
+    colorMode: colorMode,
+    seriesColors: seriesColors,
+    linkColors: linkColors
+  });
 
-var getAllConnectedLinks = function getAllConnectedLinks(links, nodeIdx) {
-  var result = {
-    links: [],
-    sourceNodes: [],
-    targetNodes: []
+  var resetStates = function resetStates() {
+    setActiveLinks([]);
+    setActiveNodes([]);
+    setHoveredLinkElement(null);
+    setHoveredNodeElement(null);
+    setNodeHovered(null);
+    setOpenLinkToolTip(false);
+    setOpenNodeToolTip(false);
   };
 
-  if (!links || !links.length) {
-    return result;
-  }
+  var renderVisualization = function renderVisualization(_ref) {
+    var containerWidth = _ref.width,
+        containerHeight = _ref.height;
 
-  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 (containerWidth < exports.CHART_MIN_WIDTH || containerHeight < exports.CHART_MIN_HEIGHT) {
+      return React.createElement(Message_1.default, {
+        width: containerWidth,
+        height: containerHeight,
+        message: i18n_1._('Too small to render content'),
+        level: "info"
       });
+    }
 
-      if (!linkAdded) {
-        result.links.push(link);
-      }
+    var renderLinks = function renderLinks(links) {
+      return links.map(function (link) {
+        return React.createElement(SankeyLink_1.default, {
+          link: link,
+          activeLinks: activeLinks,
+          linkOpacity: linkOpacity,
+          path: path,
+          key: SankeyUtils_1.getLinkId(link),
+          "data-test": SankeyUtils_1.getLinkId(link),
+          colorCategoryMapping: colorCategoryMapping,
+          colorMode: colorMode,
+          handleMouseOver: function handleMouseOver(ev) {
+            setActiveLinks([link]);
+            setActiveNodes([link.source, link.target]);
+            setHoveredLinkElement(ev.currentTarget.querySelector('circle'));
+            setOpenNodeToolTip(false);
+            setOpenLinkToolTip(true);
+          },
+          handleMouseLeave: function handleMouseLeave() {
+            resetStates();
+          }
+        });
+      });
+    };
 
-      var sourceNodeAdded = result.sourceNodes.find(function (n) {
-        return n.index === link.source.index;
+    var renderNodes = function renderNodes(nodes) {
+      var chartWidth = typeof width === 'number' ? width : Number.parseInt(width, 10);
+      return nodes.map(function (node) {
+        return React.createElement(SankeyNode_1.default, {
+          node: node,
+          key: SankeyUtils_1.getNodeId(node),
+          "data-test": SankeyUtils_1.getNodeId(node),
+          activeNodes: activeNodes,
+          nodeWidth: nodeWidth,
+          chartWidth: chartWidth,
+          colorCategoryMapping: colorCategoryMapping,
+          nodeTextColor: nodeTextColor,
+          handleMouseOver: function handleMouseOver(ev) {
+            var connections = nodeConnectionsMap[node.index];
+            setActiveLinks(connections.links);
+            setNodeHovered(node);
+            setActiveNodes([].concat(_toConsumableArray(connections.sourceNodes), _toConsumableArray(connections.targetNodes)));
+            setHoveredNodeElement(ev.currentTarget);
+            setOpenLinkToolTip(false);
+            setOpenNodeToolTip(true);
+          },
+          handleMouseLeave: function handleMouseLeave() {
+            return resetStates();
+          }
+        });
       });
+    };
 
-      if (!sourceNodeAdded) {
-        result.sourceNodes.push(link.source);
+    return React.createElement(VizStyleWrapper_1.default, {
+      backgroundColor: backgroundColor,
+      dataTestKey: "SankeyWrapper",
+      onMouseLeave: function onMouseLeave() {
+        return resetStates();
       }
+    }, React.createElement("svg", {
+      height: "100%",
+      width: "100%",
+      "data-test": "sankey-svg"
+    }, React.createElement("g", {
+      transform: "translate(".concat(translatePos.x, ",").concat(translatePos.y, ")")
+    }, React.createElement("g", {
+      className: "link-group",
+      "data-test": "link-group"
+    }, renderLinks(sankeyData.links), openLinkToolTip && React.createElement(SankeyTooltip_1.default, {
+      mode: "link",
+      open: openLinkToolTip,
+      handleTooltipRequestClose: function handleTooltipRequestClose() {
+        return resetStates();
+      },
+      linkValue: linkValueField,
+      connectionsMap: nodeConnectionsMap,
+      anchor: hoveredLinkElement,
+      link: activeLinks[0],
+      height: sankeyHeight,
+      width: sankeyWidth,
+      colorCategoryMapping: colorCategoryMapping,
+      tooltipRowColor: tooltipRowColor,
+      tooltipLinkHeaderColor: tooltipLinkHeaderColor,
+      tooltipHeaderColor: tooltipHeaderColor
+    })), React.createElement("g", {
+      className: "node-group",
+      "data-test": "node-group"
+    }, renderNodes(sankeyData.nodes), openNodeToolTip && React.createElement(SankeyTooltip_1.default, {
+      mode: "node",
+      open: openNodeToolTip,
+      handleTooltipRequestClose: function handleTooltipRequestClose() {
+        return resetStates();
+      },
+      linkValue: linkValueField,
+      connectionsMap: nodeConnectionsMap,
+      anchor: hoveredNodeElement,
+      node: nodeHovered,
+      height: sankeyHeight,
+      width: sankeyWidth,
+      colorCategoryMapping: colorCategoryMapping,
+      tooltipRowColor: tooltipRowColor,
+      tooltipLinkHeaderColor: tooltipLinkHeaderColor,
+      tooltipHeaderColor: tooltipHeaderColor
+    })))));
+  };
 
-      var targetNodeAdded = result.targetNodes.find(function (n) {
-        return n.index === link.target.index;
-      });
+  return React.createElement(SankeyContainer, {
+    height: height,
+    width: width,
+    ref: sankeyContainerElement
+  }, React.createElement(SizeAwareWrapper_1.default, null, function (containerDimension) {
+    return renderVisualization(containerDimension);
+  }));
+};
 
-      if (!targetNodeAdded) {
-        result.targetNodes.push(link.target);
-      }
-    }
-  });
-  return result;
+PureSankey.propTypes = {
+  columns: T.array,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // need this to satisfy props interface
+  // eslint-disable-next-line react/no-unused-prop-types
+  mode: T.string,
+  colorMode: T.string,
+  nodeWidth: T.number,
+  nodePadding: T.number,
+  resultLimit: T.number,
+  seriesColors: T.arrayOf(T.string),
+  linkColors: T.arrayOf(T.string),
+  linkOpacity: T.number,
+  linkValueField: T.string,
+  backgroundColor: T.string,
+  nodeTextColor: T.string,
+  tooltipRowColor: T.string,
+  tooltipLinkHeaderColor: T.string,
+  tooltipHeaderColor: T.string
+};
+PureSankey.defaultProps = {
+  columns: [],
+  width: exports.DEFAULT_CHART_WIDTH,
+  height: exports.DEFAULT_CHART_HEIGHT,
+  mode: 'view',
+  colorMode: 'categorical',
+  nodeWidth: 12,
+  nodePadding: 18,
+  resultLimit: 1000,
+  seriesColors: exports.DEFAULT_SERIES_COLOR,
+  linkColors: [],
+  linkOpacity: exports.DEFAULT_LINK_OPACITY,
+  linkValueField: 'value',
+  backgroundColor: '#0b0c0e',
+  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)'
 };
+exports.default = PureSankey;
 
-exports.getAllConnectedLinks = getAllConnectedLinks;
+/***/ }),
 
-var computeAllConnectedLinksToNodes = function computeAllConnectedLinksToNodes(nodes, links) {
-  var connectionsMap = {};
+/***/ 11:
+/***/ (function(module, exports) {
 
-  if (!nodes || !links) {
-    return connectionsMap;
-  }
-
-  nodes.forEach(function (node) {
-    var connections = 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
-
-var truncateSVGTextWithEllipsis = function truncateSVGTextWithEllipsis(textElement, textString, width) {
-  if (textElement && textElement.getSubStringLength !== undefined) {
-    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) {
-          textElement.textContent = "".concat(textString.substring(0, x), "...");
-          return;
-        }
-      }
-
-      textElement.textContent = '...'; // can't place at all
-    }
-  }
-};
-
-exports.truncateSVGTextWithEllipsis = truncateSVGTextWithEllipsis;
+module.exports = require("@babel/runtime/helpers/classCallCheck");
 
 /***/ }),
 
-/***/ 129:
+/***/ 12:
 /***/ (function(module, exports) {
 
-module.exports = require("d3-interpolate");
+module.exports = require("@splunk/visualizations-shared/colorUtils");
 
 /***/ }),
 
@@ -431,13 +520,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var SizeAwareWrapper_1 = __webpack_require__(21);
+var SizeAwareWrapper_1 = __webpack_require__(18);
 
-var style_1 = __webpack_require__(15);
+var style_1 = __webpack_require__(14);
 
 var colorUtils_1 = __webpack_require__(12);
 
@@ -496,7 +585,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.6.0 - f5eb3abf9",
+      "data-splunk-visualization-version": "25.7.1 - 6a77c5530",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -518,14 +607,7 @@ exports.default = withFixedSizeContainer;
 
 /***/ }),
 
-/***/ 130:
-/***/ (function(module, exports) {
-
-module.exports = require("d3-collection");
-
-/***/ }),
-
-/***/ 14:
+/***/ 132:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -534,644 +616,952 @@ module.exports = require("d3-collection");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extendStaticWrapperProps = void 0;
-/**
- * @method extendStaticWrapperProps
- * @param {Object} props
- * @param {DashboardVizType} props.Wrapper
- * @param {DashboardVizType} props.Visualization
- */
+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 extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
-  var Wrapper = _ref.Wrapper,
-      Visualization = _ref.Visualization;
-  var extendProperties = ['propTypes', 'defaultProps', 'config'];
-  extendProperties.forEach(function (prop) {
-    if (Visualization[prop]) {
-      // eslint-disable-next-line no-param-reassign
-      Wrapper[prop] = Visualization[prop];
-    }
-  });
-};
+var d3_scale_1 = __webpack_require__(86);
 
-exports.extendStaticWrapperProps = extendStaticWrapperProps;
+var types_1 = __webpack_require__(90);
 
-/***/ }),
+var insertNodeIfNotExist = function insertNodeIfNotExist(sankeyData, nodeName) {
+  var nodes = sankeyData.nodes;
+  nodes = nodes || [];
 
-/***/ 15:
-/***/ (function(module, exports) {
+  if (typeof nodeName !== 'string') {
+    console.error('Node not created, invalid nodename:', nodeName);
+    return;
+  }
 
-module.exports = require("@splunk/visualizations-shared/style");
+  nodeName = nodeName.trim();
 
-/***/ }),
+  if (!nodes.find(function (node) {
+    return node.name.toLocaleLowerCase() === nodeName.toLocaleLowerCase();
+  })) {
+    nodes.push({
+      name: nodeName
+    });
+  }
+};
 
-/***/ 155:
-/***/ (function(module, exports, __webpack_require__) {
+var insertLink = function insertLink(sankeyData, sourceFieldIdx, targetFieldIdx, linkValue, index) {
+  var links = sankeyData.links;
+  links = links || [];
+  links.push({
+    source: sourceFieldIdx,
+    target: targetFieldIdx,
+    value: linkValue,
+    index: index
+  });
+};
 
-"use strict";
+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();
+  });
+};
 
-var _typeof = __webpack_require__(87);
+exports.getNodesIndex = getNodesIndex;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PureSankey = exports.config = exports.themes = exports.computeVizProps = exports.showPlaceHolderIcon = void 0;
+var getColorCategoryMapping = function getColorCategoryMapping(_ref) {
+  var category = _ref.category,
+      colorMode = _ref.colorMode,
+      seriesColors = _ref.seriesColors,
+      linkColors = _ref.linkColors;
 
-var lodash_1 = __webpack_require__(3);
+  if (colorMode !== 'categorical') {
+    return linkColors;
+  }
 
-var dataSourceUtils_1 = __webpack_require__(86);
+  return seriesColors ? d3_scale_1.scaleOrdinal().domain(category).range(seriesColors).unknown(seriesColors[0]) : null;
+};
 
-var colorUtils_1 = __webpack_require__(12);
+exports.getColorCategoryMapping = getColorCategoryMapping;
 
-var withDashboardViz_1 = __webpack_require__(35);
+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 PureSankey_1 = __webpack_require__(99);
+  var sankeyData = {
+    nodes: [],
+    links: []
+  };
+  var maxlen = Math.min(columns[sourceFieldIdx].length, columns[targetFieldIdx].length, columns[linkValueFieldIdx].length, resultLimit);
 
-exports.PureSankey = PureSankey_1.default;
+  for (var i = 0; i < maxlen; i += 1) {
+    if (typeof columns[sourceFieldIdx][i] === 'string' && typeof columns[targetFieldIdx][i] === 'string' && 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
 
-var config_1 = __webpack_require__(451);
+        var sourceNodeIdx = exports.getNodesIndex(sankeyData, sourceNodeName);
+        var targetNodeIdx = exports.getNodesIndex(sankeyData, targetNodeName);
+        var linkExist = sankeyData.links.find(function (link) {
+          return link.source === sourceNodeIdx && link.target === targetNodeIdx;
+        });
+        var linkValue = +columns[linkValueFieldIdx][i];
 
-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
- */
+        if (linkExist) {
+          linkExist.value += linkValue;
+        } else {
+          insertLink(sankeyData, sourceNodeIdx, targetNodeIdx, linkValue, i);
+        }
+      })();
+    } else {
+      console.error('Link excluded. Invalid type in column input, row :- ', i, "[".concat(columns[sourceFieldIdx][i], ", ").concat(columns[targetFieldIdx][i], ", ").concat(columns[linkValueFieldIdx][i], "]"));
+    }
+  }
 
-var showPlaceHolderIcon = function showPlaceHolderIcon(dataSources) {
-  var columns = lodash_1.get(dataSources, 'primary.data.columns', undefined);
-  var noColumns = columns === undefined;
-  var dataSourceState = dataSourceUtils_1.getDataSourceStateInfo(dataSources);
-  return dataSourceState === dataSourceUtils_1.DataSourceState.ERROR || dataSourceState === dataSourceUtils_1.DataSourceState.LOADING || dataSourceState === dataSourceUtils_1.DataSourceState.NONEXISTENT || noColumns;
+  return sankeyData;
 };
 
-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
-
+exports.convertInputToSankeyDataFormat = convertInputToSankeyDataFormat;
 
-  var themeColorVariables = ['defaultBackgroundColor', 'nodeTextColor', 'tooltipRowColor', 'tooltipLinkHeaderColor', 'tooltipHeaderColor'];
-  var themeColors = {};
-  themeColorVariables.forEach(function (variable) {
-    themeColors[variable] = themeFunc(variable);
-  }); // Sanitize linkColors prop
-  // eslint-disable-next-line no-param-reassign
+var getNodeId = function getNodeId(node) {
+  if (!node) {
+    return '';
+  }
 
-  linkColors = 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
+  return "node-".concat(node.index);
+};
 
-  seriesColors = 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
+exports.getNodeId = getNodeId;
 
-  var columnsFromDataSource = [];
-  var linkValueField = '';
+var getLinkId = function getLinkId(link) {
+  if (!link) {
+    return '';
+  }
 
-  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 lodash_1.isEqual(col, linkValues);
-    });
+  return "link-".concat(link.id);
+};
 
-    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];
+exports.getLinkId = getLinkId;
 
-      if (_typeof(linkField) === 'object' && linkField !== null) {
-        linkValueField = linkField.name;
-      } else {
-        linkValueField = linkField !== null && linkField !== void 0 ? linkField : '';
-      }
-    }
+var getAllNodeNames = function getAllNodeNames(sankeyData) {
+  if (!sankeyData || !sankeyData.nodes || !sankeyData.nodes.length) {
+    return [];
   }
 
-  return Object.assign(Object.assign({}, themeColors), {
-    columns: columnsFromDataSource,
-    linkValueField: linkValueField,
-    seriesColors: seriesColors,
-    linkColors: linkColors
+  return sankeyData.nodes.map(function (node) {
+    return node.name;
   });
 };
 
-exports.computeVizProps = computeVizProps;
-var Sankey = withDashboardViz_1.default({
-  ReactViz: PureSankey_1.default,
-  vizConfig: config_1.default,
-  computeVizProps: exports.computeVizProps,
-  useIconPlaceholder: function useIconPlaceholder(dataSources) {
-    return exports.showPlaceHolderIcon(dataSources);
+exports.getAllNodeNames = getAllNodeNames;
+
+var extractLinkMidPoint = function extractLinkMidPoint(pathStr) {
+  if (!pathStr) {
+    return null;
   }
-});
-var themes = config_1.default.themes;
-exports.themes = themes;
-exports.default = Sankey;
 
-/***/ }),
+  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');
 
-/***/ 16:
-/***/ (function(module, exports) {
+  if (mIndex < 0 || cIndexLast < 0 || cIndexLast < 0 || zIndex < 0) {
+    console.error('Extract link midpoint error. Invalid path -', pathStr);
+    return null;
+  }
 
-module.exports = require("@splunk/visualizations-shared/schemaUtils");
+  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;
+  }
 
-/***/ 17:
-/***/ (function(module, exports) {
+  var points = [];
+  points.push(section1.split(',').map(function (i) {
+    return Number.parseFloat(i);
+  }));
+  var point2Arr = section2.split(' ');
+  points.push(point2Arr[point2Arr.length - 1].split(',').map(function (i) {
+    return Number.parseFloat(i);
+  }));
+  points.push(section3.split(',').map(function (i) {
+    return Number.parseFloat(i);
+  }));
+  var point4Arr = section4.split(' ');
+  points.push(point4Arr[point4Arr.length - 1].split(',').map(function (i) {
+    return Number.parseFloat(i);
+  }));
+  var width = Math.abs(points[0][0] - points[1][0]) / 2;
+  var x = Math.min(points[0][0], points[1][0]) + width;
+  var height = Math.abs(points[0][1] - points[2][1]) / 2;
+  var y = Math.min(points[0][1], points[2][1]) + height;
+  return {
+    x: x,
+    y: y
+  };
+};
 
-module.exports = require("@babel/runtime/helpers/slicedToArray");
+exports.extractLinkMidPoint = extractLinkMidPoint;
 
-/***/ }),
+var getAllConnectedLinks = function getAllConnectedLinks(links, nodeIdx) {
+  var result = {
+    links: [],
+    sourceNodes: [],
+    targetNodes: []
+  };
 
-/***/ 18:
-/***/ (function(module, exports, __webpack_require__) {
+  if (!links || !links.length) {
+    return result;
+  }
 
-"use strict";
+  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 _toConsumableArray = __webpack_require__(8);
+      var sourceNodeAdded = result.sourceNodes.find(function (n) {
+        return n.index === link.source.index;
+      });
 
-var _defineProperty = __webpack_require__(7);
+      if (!sourceNodeAdded) {
+        result.sourceNodes.push(link.source);
+      }
 
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
+      var targetNodeAdded = result.targetNodes.find(function (n) {
+        return n.index === link.target.index;
+      });
 
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
+      if (!targetNodeAdded) {
+        result.targetNodes.push(link.target);
+      }
+    }
+  });
+  return result;
+};
 
-  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]];
+exports.getAllConnectedLinks = getAllConnectedLinks;
+
+var computeAllConnectedLinksToNodes = function computeAllConnectedLinksToNodes(nodes, links) {
+  var connectionsMap = {};
+
+  if (!nodes || !links) {
+    return connectionsMap;
   }
-  return t;
+
+  nodes.forEach(function (node) {
+    var connections = exports.getAllConnectedLinks(links, node.index);
+    connectionsMap[node.index] = connections;
+  });
+  return connectionsMap;
 };
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
+exports.computeAllConnectedLinksToNodes = computeAllConnectedLinksToNodes;
 
-var lodash_1 = __webpack_require__(3);
+var checkDigitsOnly = function checkDigitsOnly(input) {
+  return /^\d+$/.test(input);
+};
 
-var schemaUtils_1 = __webpack_require__(16);
+exports.checkDigitsOnly = checkDigitsOnly; // Truncate the node text and show ellipsis at the end if text string width exceeds the max limit
 
-var VizBehavior_1 = __webpack_require__(6);
+var truncateSVGTextWithEllipsis = function truncateSVGTextWithEllipsis(textElement, textString, width) {
+  if (textElement && textElement.getSubStringLength !== undefined) {
+    textElement.textContent = textString; // ellipsis is needed
 
-var dynamicOptionsDSLType = {
-  type: 'string',
-  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
+    if (textElement.getSubStringLength(0, textString.length) >= width) {
+      for (var x = textString.length - 3; x > 0; x -= 3) {
+        if (textElement.getSubStringLength(0, x) <= width) {
+          textElement.textContent = "".concat(textString.substring(0, x), "...");
+          return;
+        }
+      }
+
+      textElement.textContent = '...'; // can't place at all
+    }
+  }
 };
-/**
- * Helper function to extend an options schema with dynamic options DSL
- * @param optionsSchema a visualization's options schema
- * @returns an updated options schema that additionally allows strings starting with > for each option
- */
 
-function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
-  var enhancedOptionsSchema = {};
-  Object.keys(optionsSchema).forEach(function (key) {
-    var _a = optionsSchema[key],
-        title = _a.title,
-        description = _a.description,
-        readOnly = _a.readOnly,
-        writeOnly = _a.writeOnly,
-        examples = _a.examples,
-        defaultValue = _a.default,
-        type = _a.type,
-        properties = _a.properties,
-        patternProperties = _a.patternProperties,
-        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
+exports.truncateSVGTextWithEllipsis = truncateSVGTextWithEllipsis;
 
-    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
-      title: title
-    }), description !== undefined && {
-      description: description
-    }), readOnly !== undefined && {
-      readOnly: readOnly
-    }), writeOnly !== undefined && {
-      writeOnly: writeOnly
-    }), examples !== undefined && {
-      examples: examples
-    }), defaultValue !== undefined && {
-      default: defaultValue
-    });
+/***/ }),
 
-    if (type === 'object') {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign(Object.assign(Object.assign({}, remainingSchemaEntry), annotations), {
-        type: type
-      }), properties && {
-        properties: enhanceOptionsSchemaWithDynamicOptions(properties)
-      });
+/***/ 137:
+/***/ (function(module, exports) {
 
-      if (patternProperties) {
-        var enhancedPatternProperties = {};
-        Object.keys(patternProperties).forEach(function (opt) {
-          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
-        });
-        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
-      }
-    } else {
-      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
-        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
-          type: type
-        }), remainingSchemaEntry), dynamicOptionsDSLType]
-      });
-    }
-  });
-  return enhancedOptionsSchema;
-}
+module.exports = require("d3-interpolate");
 
-exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
-/**
- * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
- * this function also collapse all editor panels
- * @param vizConfig a Visualization Config
- * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
- * and containing `open: false` for all editor panels in editorConfig
- */
+/***/ }),
 
-function enhanceConfig(vizConfig) {
-  var enhancedConfig = Object.assign({}, vizConfig);
+/***/ 138:
+/***/ (function(module, exports) {
 
-  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
-    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
-  }
+module.exports = require("d3-collection");
 
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: config.open || false
-    });
-  });
-  return enhancedConfig;
-}
+/***/ }),
 
-exports.enhanceConfig = enhanceConfig;
-/**
- * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
- * Created for editor unit tests
- * @param vizConfig a Visualization Config
- * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
- */
+/***/ 14:
+/***/ (function(module, exports) {
 
-function uncollapseEditorConfig(vizConfig) {
-  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
-  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
-    return Object.assign(Object.assign({}, config), {
-      open: true
-    });
-  });
-  return editorPanelUncollapsedConfig;
-}
+module.exports = require("@splunk/visualizations-shared/style");
 
-exports.uncollapseEditorConfig = uncollapseEditorConfig;
+/***/ }),
 
-function isDynamicOption(option) {
-  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
-}
+/***/ 15:
+/***/ (function(module, exports, __webpack_require__) {
 
-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
+"use strict";
 
-/**
- * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
- * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
- * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
- * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
- *
- * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
- */
 
-function hasCompatibleContexts(vizContext, presetContext) {
-  var presetContextKeys = Object.keys(presetContext);
-  return presetContextKeys.every(function (contextKey) {
-    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
-  });
-}
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extendStaticWrapperProps = void 0;
 /**
- * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
+ * @method extendStaticWrapperProps
+ * @param {Object} props
+ * @param {DashboardVizType} props.Wrapper
+ * @param {DashboardVizType} props.Visualization
  */
 
-
-function hasCompatibleOptions(vizOptions, presetOptions) {
-  var presetOptionKeys = Object.keys(presetOptions);
-  return presetOptionKeys.every(function (optionKey) {
-    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
+var extendStaticWrapperProps = function extendStaticWrapperProps(_ref) {
+  var Wrapper = _ref.Wrapper,
+      Visualization = _ref.Visualization;
+  var extendProperties = ['propTypes', 'defaultProps', 'config'];
+  extendProperties.forEach(function (prop) {
+    if (Visualization[prop]) {
+      // eslint-disable-next-line no-param-reassign
+      Wrapper[prop] = Visualization[prop];
+    }
   });
-}
-/**
- * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
- * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
- *
- * @param {Object} vizContext - the current vizContext definition
- * @param {Object} vizOptions - the current vizOptions definition
- * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
- */
-
+};
 
-function getInitialPreset(vizContext, vizOptions, presets) {
-  return presets.find(function (preset) {
-    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
-    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
-    var presetContextKeys = Object.keys(presetContext);
-    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
-    // if not, then the preset is invalid in config.ts
+exports.extendStaticWrapperProps = extendStaticWrapperProps;
 
-    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
-    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
-  });
-}
+/***/ }),
 
-exports.getInitialPreset = getInitialPreset;
-/**
- * generates number precision values for a Select editor
- *
- * @param {Number} numPrecisionValues - number of integer precision values to generate
- * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
- */
+/***/ 16:
+/***/ (function(module, exports) {
 
-function generatePrecisionValues(numPrecisionValues) {
-  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
-    return {
-      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
-      value: i
-    };
-  });
-}
+module.exports = require("@splunk/visualizations-shared/schemaUtils");
 
-exports.generatePrecisionValues = generatePrecisionValues;
-/**
- * insert layout in layout array, return a new layout array instead of updating the original
- *
- * @param {EditorLayoutConfig[][]} layout - editor layout
- * @param {Number} index - the index to insert layout item(s)
- * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
- * @returns {EditorLayoutConfig[][]} new editor layout with insertion
- */
+/***/ }),
 
-var insertLayout = function insertLayout(layout, index) {
-  for (var _len = arguments.length, layoutItems = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    layoutItems[_key - 2] = arguments[_key];
-  }
+/***/ 162:
+/***/ (function(module, exports, __webpack_require__) {
 
-  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
-};
+"use strict";
 
-exports.insertLayout = insertLayout;
 
-/***/ }),
+var _typeof = __webpack_require__(88);
 
-/***/ 19:
-/***/ (function(module, exports) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PureSankey = exports.config = exports.themes = exports.computeVizProps = exports.showPlaceHolderIcon = void 0;
 
-module.exports = require("@splunk/visualizations-shared/configUtils");
+var lodash_1 = __webpack_require__(3);
 
-/***/ }),
+var dataSourceUtils_1 = __webpack_require__(91);
 
-/***/ 2:
-/***/ (function(module, exports) {
+var colorUtils_1 = __webpack_require__(12);
 
-module.exports = require("@splunk/ui-utils/i18n");
+var withDashboardViz_1 = __webpack_require__(36);
 
-/***/ }),
+var PureSankey_1 = __webpack_require__(106);
 
-/***/ 20:
-/***/ (function(module, exports) {
+exports.PureSankey = PureSankey_1.default;
 
-module.exports = require("@babel/runtime/helpers/createClass");
+var config_1 = __webpack_require__(458);
 
-/***/ }),
+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
+ */
 
-/***/ 21:
-/***/ (function(module, exports) {
+var showPlaceHolderIcon = function showPlaceHolderIcon(dataSources) {
+  var columns = lodash_1.get(dataSources, 'primary.data.columns', undefined);
+  var noColumns = columns === undefined;
+  var dataSourceState = dataSourceUtils_1.getDataSourceStateInfo(dataSources);
+  return dataSourceState === dataSourceUtils_1.DataSourceState.ERROR || dataSourceState === dataSourceUtils_1.DataSourceState.LOADING || dataSourceState === dataSourceUtils_1.DataSourceState.NONEXISTENT || noColumns;
+};
 
-module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
+exports.showPlaceHolderIcon = showPlaceHolderIcon;
 
-/***/ }),
+var computeVizProps = function computeVizProps(_ref) {
+  var themeFunc = _ref.themeFunc,
+      dataSources = _ref.dataSources,
+      linkValues = _ref.linkValues,
+      seriesColors = _ref.seriesColors,
+      linkColors = _ref.linkColors;
 
-/***/ 24:
-/***/ (function(module, exports) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j; // Compute all themeColor variables needed for PureSankey
 
-module.exports = require("@splunk/visualization-context/TimezoneContext");
 
-/***/ }),
+  var themeColorVariables = ['defaultBackgroundColor', 'nodeTextColor', 'tooltipRowColor', 'tooltipLinkHeaderColor', 'tooltipHeaderColor'];
+  var themeColors = {};
+  themeColorVariables.forEach(function (variable) {
+    themeColors[variable] = themeFunc(variable);
+  }); // Sanitize linkColors prop
+  // eslint-disable-next-line no-param-reassign
 
-/***/ 26:
-/***/ (function(module, exports) {
+  linkColors = 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
 
-module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+  seriesColors = 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 columnsFromDataSource = [];
+  var linkValueField = '';
 
-/***/ 27:
-/***/ (function(module, exports) {
+  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 lodash_1.isEqual(col, linkValues);
+    });
 
-module.exports = require("@splunk/visualizations-shared/hocUtils");
+    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 : '';
+      }
+    }
+  }
 
-/***/ 28:
-/***/ (function(module, exports) {
+  return Object.assign(Object.assign({}, themeColors), {
+    columns: columnsFromDataSource,
+    linkValueField: linkValueField,
+    seriesColors: seriesColors,
+    linkColors: linkColors
+  });
+};
 
-module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+exports.computeVizProps = computeVizProps;
+var Sankey = withDashboardViz_1.default({
+  ReactViz: PureSankey_1.default,
+  vizConfig: config_1.default,
+  computeVizProps: exports.computeVizProps,
+  useIconPlaceholder: function useIconPlaceholder(dataSources) {
+    return exports.showPlaceHolderIcon(dataSources);
+  }
+});
+var themes = config_1.default.themes;
+exports.themes = themes;
+exports.default = Sankey;
 
 /***/ }),
 
-/***/ 29:
+/***/ 17:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/numberUtils");
+module.exports = require("@babel/runtime/helpers/slicedToArray");
 
 /***/ }),
 
-/***/ 3:
+/***/ 18:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/visualizations-shared/SizeAwareWrapper");
 
 /***/ }),
 
-/***/ 30:
+/***/ 19:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
+var _toConsumableArray = __webpack_require__(7);
+
+var _defineProperty = __webpack_require__(8);
+
+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.shouldShowIconPlaceholder = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
+exports.insertLayout = exports.isDynamicOption = exports.uncollapseEditorConfig = exports.generatePrecisionValues = exports.getInitialPreset = exports.enhanceOptionsSchemaWithDynamicOptions = exports.enhanceConfig = void 0;
 
 var lodash_1 = __webpack_require__(3);
 
-var i18n_1 = __webpack_require__(2);
+var schemaUtils_1 = __webpack_require__(16);
 
-var Message_1 = __webpack_require__(10);
+var VizBehavior_1 = __webpack_require__(6);
 
-var FixedSizeContainer_1 = __webpack_require__(13);
+var dynamicOptionsDSLType = {
+  type: 'string',
+  pattern: schemaUtils_1.DYNAMIC_OPTIONS_DSL_PATTERN
+};
 /**
- * @method shouldShowIconPlaceholder
- * @param {object} dataSources
- * @param {boolean} loading
- * @returns {boolean}
+ * Helper function to extend an options schema with dynamic options DSL
+ * @param optionsSchema a visualization's options schema
+ * @returns an updated options schema that additionally allows strings starting with > for each option
  */
 
+function enhanceOptionsSchemaWithDynamicOptions(optionsSchema) {
+  var enhancedOptionsSchema = {};
+  Object.keys(optionsSchema).forEach(function (key) {
+    var _a = optionsSchema[key],
+        title = _a.title,
+        description = _a.description,
+        readOnly = _a.readOnly,
+        writeOnly = _a.writeOnly,
+        examples = _a.examples,
+        defaultValue = _a.default,
+        type = _a.type,
+        properties = _a.properties,
+        patternProperties = _a.patternProperties,
+        remainingSchemaEntry = __rest(_a, ["title", "description", "readOnly", "writeOnly", "examples", "default", "type", "properties", "patternProperties"]);
 
-var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
-  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
-  var noData = data === undefined;
-  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
-  var noFields = fields === undefined;
-  return loading || noData || noFields;
-};
+    var annotations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, title !== undefined && {
+      title: title
+    }), description !== undefined && {
+      description: description
+    }), readOnly !== undefined && {
+      readOnly: readOnly
+    }), writeOnly !== undefined && {
+      writeOnly: writeOnly
+    }), examples !== undefined && {
+      examples: examples
+    }), defaultValue !== undefined && {
+      default: defaultValue
+    });
 
-exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
-var propTypes = {
-  icon: T.func,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  iconColor: T.string
-};
+    if (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) {
+          enhancedPatternProperties = Object.assign(Object.assign({}, enhancedPatternProperties), enhanceOptionsSchemaWithDynamicOptions(_defineProperty({}, opt, patternProperties[opt])));
+        });
+        enhancedOptionsSchema[key].patternProperties = enhancedPatternProperties;
+      }
+    } else {
+      enhancedOptionsSchema[key] = Object.assign(Object.assign({}, annotations), {
+        anyOf: [Object.assign(Object.assign({}, type !== undefined && {
+          type: type
+        }), remainingSchemaEntry), dynamicOptionsDSLType]
+      });
+    }
+  });
+  return enhancedOptionsSchema;
+}
+
+exports.enhanceOptionsSchemaWithDynamicOptions = enhanceOptionsSchemaWithDynamicOptions;
 /**
- * @method IconPlaceholder
- * @param {IconPlaceholderProps} props
- * @returns {React.ReactElement}
+ * Helper function to enhance a Visualization Config as needed based on behaviors specified in supports block
+ * this function also collapse all editor panels
+ * @param vizConfig a Visualization Config
+ * @returns an enhanced Visualization Config containing updated config entries based on behaviors it supports
+ * and containing `open: false` for all editor panels in editorConfig
  */
 
-var IconPlaceholder = function IconPlaceholder(props) {
-  var width = props.width,
-      height = props.height,
-      icon = props.icon,
-      iconColor = props.iconColor;
+function enhanceConfig(vizConfig) {
+  var enhancedConfig = Object.assign({}, vizConfig);
 
-  if (icon) {
-    return React.createElement(icon, {
-      style: {
-        left: '50%',
-        top: '50%',
-        color: iconColor,
-        opacity: 0.15,
-        position: 'absolute',
-        transform: 'translate(-50%, -50%)'
-      },
-      width: '50%',
-      height: '50%'
-    });
+  if (vizConfig.supports.indexOf(VizBehavior_1.VizBehavior.DYNAMIC_OPTIONS) !== -1) {
+    enhancedConfig.optionsSchema = enhanceOptionsSchemaWithDynamicOptions(vizConfig.optionsSchema);
   }
 
-  return React.createElement(Message_1.default, {
-    width: width,
-    height: height,
-    level: "warning",
-    message: i18n_1._('No DataSource Connected')
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: config.open || false
+    });
   });
-};
-
-IconPlaceholder.propTypes = propTypes;
-IconPlaceholder.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(IconPlaceholder);
-
-/***/ }),
-
-/***/ 31:
-/***/ (function(module, exports) {
+  return enhancedConfig;
+}
 
-module.exports = require("@splunk/ui-utils/id");
+exports.enhanceConfig = enhanceConfig;
+/**
+ * Helper function to uncollapse all editor panels by adding `open: true` to the editorConfig
+ * Created for editor unit tests
+ * @param vizConfig a Visualization Config
+ * @returns a Visualization Config containing `open: true` for all editor panels in editorConfig
+ */
 
-/***/ }),
+function uncollapseEditorConfig(vizConfig) {
+  var editorPanelUncollapsedConfig = Object.assign({}, vizConfig);
+  editorPanelUncollapsedConfig.editorConfig = vizConfig.editorConfig.map(function (config) {
+    return Object.assign(Object.assign({}, config), {
+      open: true
+    });
+  });
+  return editorPanelUncollapsedConfig;
+}
 
-/***/ 32:
-/***/ (function(module, exports, __webpack_require__) {
+exports.uncollapseEditorConfig = uncollapseEditorConfig;
 
-"use strict";
+function isDynamicOption(option) {
+  return option && typeof option === 'string' && option.trim().startsWith('>') || false;
+}
 
+exports.isDynamicOption = isDynamicOption; // private helpers to improve readability of getInitialPreset
+// this shouldn't be tested since this util isn't something that we expect to use outside of getInitialPreset
 
-var _defineProperty = __webpack_require__(7);
+/**
+ * this checks to make sure that all values within vizContext are compatible with the given preset's context to determine the initialPreset
+ * if a preset has explicitly specified a key as being undefined, the vizContext must also has that key as undefined, or else this CANNOT be the initialPreset
+ * the inverse is true; if a preset has key is NOT undefined, it must also be NOT undefined in the corresponding vizContext
+ * the internal config contents are irrelevant (as the user could customize them in source), just as long as the presence of `undefined`s match up
+ *
+ * Since the presetConfigs have explicit undefined keys to override the existing config, we need to explicitly check the undefined values
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+function hasCompatibleContexts(vizContext, presetContext) {
+  var presetContextKeys = Object.keys(presetContext);
+  return presetContextKeys.every(function (contextKey) {
+    return presetContext[contextKey] === undefined && vizContext[contextKey] === undefined || presetContext[contextKey] !== undefined && vizContext[contextKey] !== undefined;
+  });
+}
+/**
+ * Checks to make sure that dynamic (non-dynamic) options in a given preset are also dynamic (non-dynamic) in the vizOptions
+ */
 
-var T = __webpack_require__(0);
 
-var lodash_1 = __webpack_require__(3);
+function hasCompatibleOptions(vizOptions, presetOptions) {
+  var presetOptionKeys = Object.keys(presetOptions);
+  return presetOptionKeys.every(function (optionKey) {
+    return isDynamicOption(presetOptions[optionKey]) === isDynamicOption(vizOptions[optionKey]);
+  });
+}
+/**
+ * Evaluates whether there is an initialPreset that fits the current state of vizContext + vizOptions
+ * This function ignores extraneous vizOptions or vizContext keys, as they could be outside the scope of what the preset is intended to configure
+ *
+ * @param {Object} vizContext - the current vizContext definition
+ * @param {Object} vizOptions - the current vizOptions definition
+ * @param {PresetEntry[]} presets - the list of presets, one of which can be considered an initialPreset
+ */
 
-var DataSource_1 = __webpack_require__(43);
 
-exports.SortParamsPropTypes = T.shape({
-  currentSortKey: T.string,
-  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
-  onSort: T.func
-});
+function getInitialPreset(vizContext, vizOptions, presets) {
+  return presets.find(function (preset) {
+    var presetContext = lodash_1.get(preset, ['value', 'context'], {});
+    var presetOptions = lodash_1.get(preset, ['value', 'options'], {});
+    var presetContextKeys = Object.keys(presetContext);
+    var presetOptionKeys = Object.keys(presetOptions); // all presets have to explicitly specify which options to reset (i.e. need explicitly undefined keys)
+    // if not, then the preset is invalid in config.ts
 
-var getSortingParams = function getSortingParams(_ref) {
-  var requestParams = _ref.requestParams,
-      onRequestParamsChange = _ref.onRequestParamsChange;
-  var currentSortKey;
-  var currentSortDir;
-  var nextSortDirMap = {
-    asc: 'desc',
-    desc: 'asc',
-    none: 'asc'
-  };
-  var onSort;
+    if (presetContextKeys.length === 0 || presetOptionKeys.length === 0) return false;
+    return hasCompatibleContexts(vizContext, presetContext) && hasCompatibleOptions(vizOptions, presetOptions);
+  });
+}
 
-  if (lodash_1.isFunction(onRequestParamsChange)) {
-    if (requestParams && 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
+exports.getInitialPreset = getInitialPreset;
+/**
+ * generates number precision values for a Select editor
+ *
+ * @param {Number} numPrecisionValues - number of integer precision values to generate
+ * @returns {{ label: string; value; string  }[]} array of { label, value } tuples
+ */
 
+function generatePrecisionValues(numPrecisionValues) {
+  return lodash_1.range(0, numPrecisionValues + 1).map(function (i) {
+    return {
+      label: "".concat(i, " (0").concat(i > 0 ? '.' : '').concat('0'.repeat(i), ")"),
+      value: i
+    };
+  });
+}
 
-    onSort = function onSort(e, _ref2) {
-      var sortKey = _ref2.sortKey,
-          sortDir = _ref2.sortDir;
+exports.generatePrecisionValues = generatePrecisionValues;
+/**
+ * insert layout in layout array, return a new layout array instead of updating the original
+ *
+ * @param {EditorLayoutConfig[][]} layout - editor layout
+ * @param {Number} index - the index to insert layout item(s)
+ * @param {EditorLayoutConfig[][]} layoutItems - the item(s) to insert
+ * @returns {EditorLayoutConfig[][]} new editor layout with insertion
+ */
 
-      if (typeof sortKey === 'string') {
-        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
-        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
-          offset: 0,
-          sort: _defineProperty({}, sortKey, nextSortDir)
-        }));
-      } else {
-        onRequestParamsChange(requestParams);
-      }
-    };
+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 {
-    currentSortKey: currentSortKey,
-    currentSortDir: currentSortDir,
-    onSort: onSort
-  };
+  return [].concat(_toConsumableArray(layout.slice(0, index)), layoutItems, _toConsumableArray(layout.slice(index)));
 };
 
-exports.getSortingParams = getSortingParams;
+exports.insertLayout = insertLayout;
 
 /***/ }),
 
-/***/ 33:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/i18n");
+
+/***/ }),
+
+/***/ 20:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/FeatureFlagContext");
+
+/***/ }),
+
+/***/ 21:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/configUtils");
+
+/***/ }),
+
+/***/ 22:
+/***/ (function(module, exports) {
+
+module.exports = require("@babel/runtime/helpers/createClass");
+
+/***/ }),
+
+/***/ 25:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-context/TimezoneContext");
+
+/***/ }),
+
+/***/ 26:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/hocUtils");
+
+/***/ }),
+
+/***/ 27:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/JSONSchemaUtils");
+
+/***/ }),
+
+/***/ 29:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-encoding/Options");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 30:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualizations-shared/numberUtils");
+
+/***/ }),
+
+/***/ 31:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldShowIconPlaceholder = void 0;
+
+var React = __webpack_require__(0);
+
+var T = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(3);
+
+var i18n_1 = __webpack_require__(2);
+
+var Message_1 = __webpack_require__(9);
+
+var FixedSizeContainer_1 = __webpack_require__(13);
+/**
+ * @method shouldShowIconPlaceholder
+ * @param {object} dataSources
+ * @param {boolean} loading
+ * @returns {boolean}
+ */
+
+
+var shouldShowIconPlaceholder = function shouldShowIconPlaceholder(dataSources) {
+  var loading = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var data = lodash_1.get(dataSources, 'primary.data.columns[0]', undefined);
+  var noData = data === undefined;
+  var fields = lodash_1.get(dataSources, 'primary.data.fields[0]', undefined);
+  var noFields = fields === undefined;
+  return loading || noData || noFields;
+};
+
+exports.shouldShowIconPlaceholder = shouldShowIconPlaceholder;
+var propTypes = {
+  icon: T.func,
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  iconColor: T.string
+};
+/**
+ * @method IconPlaceholder
+ * @param {IconPlaceholderProps} props
+ * @returns {React.ReactElement}
+ */
+
+var IconPlaceholder = function IconPlaceholder(props) {
+  var width = props.width,
+      height = props.height,
+      icon = props.icon,
+      iconColor = props.iconColor;
+
+  if (icon) {
+    return React.createElement(icon, {
+      style: {
+        left: '50%',
+        top: '50%',
+        color: iconColor,
+        opacity: 0.15,
+        position: 'absolute',
+        transform: 'translate(-50%, -50%)'
+      },
+      width: '50%',
+      height: '50%'
+    });
+  }
+
+  return React.createElement(Message_1.default, {
+    width: width,
+    height: height,
+    level: "warning",
+    message: i18n_1._('No DataSource Connected')
+  });
+};
+
+IconPlaceholder.propTypes = propTypes;
+IconPlaceholder.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(IconPlaceholder);
+
+/***/ }),
+
+/***/ 32:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
+/***/ }),
+
+/***/ 33:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _defineProperty = __webpack_require__(8);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSortingParams = exports.SortParamsPropTypes = void 0;
+
+var T = __webpack_require__(1);
+
+var lodash_1 = __webpack_require__(3);
+
+var DataSource_1 = __webpack_require__(43);
+
+exports.SortParamsPropTypes = T.shape({
+  currentSortKey: T.string,
+  currentSortDir: T.oneOf(DataSource_1.validSortDirs),
+  onSort: T.func
+});
+
+var getSortingParams = function getSortingParams(_ref) {
+  var requestParams = _ref.requestParams,
+      onRequestParamsChange = _ref.onRequestParamsChange;
+  var currentSortKey;
+  var currentSortDir;
+  var nextSortDirMap = {
+    asc: 'desc',
+    desc: 'asc',
+    none: 'asc'
+  };
+  var onSort;
+
+  if (typeof onRequestParamsChange === 'function') {
+    if (requestParams && lodash_1.has(requestParams, 'sort')) {
+      currentSortKey = Object.keys(requestParams.sort).shift();
+      currentSortDir = requestParams.sort[currentSortKey];
+    } // undid memoization since there is a dependency on requestParams, which is a deeply nested object
+
+
+    onSort = function onSort(e, _ref2) {
+      var sortKey = _ref2.sortKey,
+          sortDir = _ref2.sortDir;
+
+      if (typeof sortKey === 'string') {
+        var nextSortDir = lodash_1.has(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : 'none';
+        onRequestParamsChange(Object.assign(Object.assign({}, requestParams), {
+          offset: 0,
+          sort: _defineProperty({}, sortKey, nextSortDir)
+        }));
+      } else {
+        onRequestParamsChange(requestParams);
+      }
+    };
+  }
+
+  return {
+    currentSortKey: currentSortKey,
+    currentSortDir: currentSortDir,
+    onSort: onSort
+  };
+};
+
+exports.getSortingParams = getSortingParams;
+
+/***/ }),
+
+/***/ 34:
+/***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
@@ -1181,7 +1571,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getPaginationParams = exports.PaginatorParamsPropTypes = void 0;
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1201,7 +1591,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
   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 && lodash_1.isFunction(onRequestParamsChange);
+  var isPaging = totalPages > 1 && typeof onRequestParamsChange === 'function';
 
   var onChangeHandler = function onChangeHandler(e, _ref2) {
     var page = _ref2.page,
@@ -1227,7 +1617,7 @@ var getPaginationParams = function getPaginationParams(_ref) {
     isPaging: isPaging,
     current: current,
     totalPages: totalPages,
-    onChange: lodash_1.isFunction(onRequestParamsChange) ? onChangeHandler : lodash_1.noop
+    onChange: typeof onRequestParamsChange === 'function' ? onChangeHandler : lodash_1.noop
   };
 };
 
@@ -1235,7 +1625,7 @@ exports.getPaginationParams = getPaginationParams;
 
 /***/ }),
 
-/***/ 34:
+/***/ 35:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1264,7 +1654,7 @@ var VizCategory;
 
 /***/ }),
 
-/***/ 35:
+/***/ 36:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -1276,39 +1666,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 
-var getSettingsFromThemedProps_1 = __webpack_require__(36);
+var getSettingsFromThemedProps_1 = __webpack_require__(37);
 
-var Options_1 = __webpack_require__(37);
+var Options_1 = __webpack_require__(29);
 
 var SanitizeProps_1 = __webpack_require__(38);
 
-var TimezoneContext_1 = __webpack_require__(24);
+var TimezoneContext_1 = __webpack_require__(25);
 
 var moment_1 = __webpack_require__(39);
 
-var FeatureFlagContext_1 = __webpack_require__(26);
+var FeatureFlagContext_1 = __webpack_require__(20);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(27);
+var hocUtils_1 = __webpack_require__(26);
 
-var JSONSchemaUtils_1 = __webpack_require__(28);
+var JSONSchemaUtils_1 = __webpack_require__(27);
 
 var async_dynamic_options_evaluator_1 = __webpack_require__(40);
 
-var id_1 = __webpack_require__(31);
+var id_1 = __webpack_require__(32);
 
 var SplunkVisualization_1 = __webpack_require__(41);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var getSorting_1 = __webpack_require__(32);
+var getSorting_1 = __webpack_require__(33);
 
-var getPagination_1 = __webpack_require__(33);
+var getPagination_1 = __webpack_require__(34);
 
 var useDeepMemo_1 = __webpack_require__(44);
 
@@ -1337,6 +1727,8 @@ var withDashboardViz = function withDashboardViz(opts) {
   var defaultOptions = JSONSchemaUtils_1.pickFieldFromJSONSchema(vizConfig.optionsSchema, 'default');
 
   var DashboardViz = function DashboardViz(props) {
+    var _a;
+
     var mode = props.mode,
         hasEventHandlers = props.hasEventHandlers,
         dataSources = props.dataSources,
@@ -1396,7 +1788,7 @@ var withDashboardViz = function withDashboardViz(opts) {
         _React$useState4 = _slicedToArray(_React$useState3, 1),
         visualizationID = _React$useState4[0];
 
-    var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext['visualizations.useWebWorkersForDSL'] && typeof Worker !== 'undefined')),
+    var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
         _React$useState6 = _slicedToArray(_React$useState5, 2),
         useAsyncEvaluatedOptions = _React$useState6[0],
         setUseAsyncEvaluatedOptions = _React$useState6[1];
@@ -1436,11 +1828,21 @@ var withDashboardViz = function withDashboardViz(opts) {
 
       return {};
     }, [currentThemeFamily, currentThemeColorScheme, currentThemeDensity, options, context, dataSources, serializedTimezone, useAsyncEvaluatedOptions]);
-    var evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync; // useEffect hook needs to be initialized before any early returns
+    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 = lodash_1.cloneDeep(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.backgroundColor = clonedEvaluatedOptions === null || clonedEvaluatedOptions === void 0 ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor;
+    } // useEffect hook needs to be initialized before any early returns
     // this is in accordance with the order of hook calls being the same on each render https://reactjs.org/docs/hooks-rules.html#explanation
 
+
     React.useEffect(function () {
-      onComputedProps(evaluatedOptionsToUse);
+      onComputedProps(clonedEvaluatedOptions);
     });
     React.useEffect(function () {
       return function () {
@@ -1455,15 +1857,16 @@ var withDashboardViz = function withDashboardViz(opts) {
         supports = vizConfig.supports;
     var missing = MissingPropsMessage_1.missingKeys(requiredProps, evaluatedOptionsToUse);
 
-    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER)) {
-      return React.createElement(MissingPropsMessage_1.default, {
-        "data-test": "missing-props-message",
-        width: width,
-        height: height,
-        missingProps: missing,
-        backgroundColor: bgColorFromTheme
-      });
-    } // events
+    if (missing.length > 0 && supports.includes(VizBehavior_1.VizBehavior.PLACEHOLDER) && vizConfig.key !== 'splunk.singlevalue' // For SV missing props msg is not displayed if required props majorValue is missing, instead this will be handled from the component, instead handled within component
+    ) {
+        return React.createElement(MissingPropsMessage_1.default, {
+          "data-test": "missing-props-message",
+          width: width,
+          height: height,
+          missingProps: missing,
+          backgroundColor: bgColorFromTheme
+        });
+      } // events
 
 
     var eventCallbackProps = {};
@@ -1567,17 +1970,10 @@ exports.default = withDashboardViz;
 
 /***/ }),
 
-/***/ 36:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes/getSettingsFromThemedProps");
-
-/***/ }),
-
 /***/ 37:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/Options");
+module.exports = require("@splunk/themes/getSettingsFromThemedProps");
 
 /***/ }),
 
@@ -1623,7 +2019,7 @@ Object.defineProperty(exports, "__esModule", {
 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 T = __webpack_require__(1);
 
 var lodash_1 = __webpack_require__(3);
 
@@ -1769,7 +2165,7 @@ exports.default = SplunkVisualization;
 
 var _classCallCheck = __webpack_require__(11);
 
-var _createClass = __webpack_require__(20);
+var _createClass = __webpack_require__(22);
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -1824,7 +2220,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDeepMemo = void 0;
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
 var lodash_1 = __webpack_require__(3);
 /**
@@ -1859,14 +2255,95 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
-/***/ 446:
+/***/ 45:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
+
+var React = __webpack_require__(0);
+
+var T = __webpack_require__(1);
+
+var i18n_1 = __webpack_require__(2);
+
+var Message_1 = __webpack_require__(9);
+
+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
+ * @param {string[]} keys
+ * @param {object} target
+ * @returns {string[]} the keys of missing required props
+ */
+
+var missingKeys = function missingKeys(keys, target) {
+  return keys.filter(function (k) {
+    return exports.isMissing(target[k]);
+  });
+};
+
+exports.missingKeys = missingKeys;
+var propTypes = {
+  width: T.oneOfType([T.string, T.number]),
+  height: T.oneOfType([T.string, T.number]),
+  // eslint-disable-next-line react/no-unused-prop-types
+  backgroundColor: T.string,
+  missingProps: T.arrayOf(T.string)
+};
+/**
+ * @method MissingPropsMessage
+ * @param {MissingPropsProps} props
+ * @returns {React.ReactElement}
+ */
+
+var MissingPropsMessage = function MissingPropsMessage(props) {
+  var width = props.width,
+      height = props.height,
+      missingProps = props.missingProps;
+  return React.createElement(Message_1.default, {
+    "data-test": "message",
+    width: width,
+    height: height,
+    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
+  });
+};
+
+exports.MissingPropsMessage = MissingPropsMessage;
+exports.MissingPropsMessage.propTypes = propTypes;
+exports.MissingPropsMessage.defaultProps = {
+  width: '100%',
+  height: 250
+};
+exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
+
+/***/ }),
+
+/***/ 453:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
   Object.defineProperty(o, k2, {
     enumerable: true,
     get: function get() {
@@ -1889,9 +2366,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-__exportStar(__webpack_require__(155), exports);
+__exportStar(__webpack_require__(162), exports);
 
-var Sankey_1 = __webpack_require__(155);
+var Sankey_1 = __webpack_require__(162);
 
 Object.defineProperty(exports, "default", {
   enumerable: true,
@@ -1902,17 +2379,17 @@ Object.defineProperty(exports, "default", {
 
 /***/ }),
 
-/***/ 447:
+/***/ 454:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d3_sankey", function() { return d3_sankey; });
-/* harmony import */ var d3_interpolate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(129);
+/* harmony import */ var d3_interpolate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(137);
 /* harmony import */ var d3_interpolate__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(d3_interpolate__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var d3_array__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(58);
+/* harmony import */ var d3_array__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(61);
 /* harmony import */ var d3_array__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(d3_array__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var d3_collection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(130);
+/* harmony import */ var d3_collection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(138);
 /* 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
 
@@ -2469,7 +2946,7 @@ var d3_sankey = function d3_sankey() {
 
 /***/ }),
 
-/***/ 448:
+/***/ 455:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2479,17 +2956,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
 var styled_components_1 = __webpack_require__(4);
 
-var react_1 = __webpack_require__(1);
+var react_1 = __webpack_require__(0);
 
-var PureSankey_1 = __webpack_require__(99);
+var PureSankey_1 = __webpack_require__(106);
 
-var SankeyUtils_1 = __webpack_require__(124);
+var SankeyUtils_1 = __webpack_require__(132);
 
 var MAX_NODE_TEXT_WIDTH = 150;
 
@@ -2590,7 +3067,7 @@ exports.default = SankeyNode;
 
 /***/ }),
 
-/***/ 449:
+/***/ 456:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2600,13 +3077,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
-var PureSankey_1 = __webpack_require__(99);
+var PureSankey_1 = __webpack_require__(106);
 
-var SankeyUtils_1 = __webpack_require__(124);
+var SankeyUtils_1 = __webpack_require__(132);
 
 var getLinkFill = function getLinkFill(link, colorCategoryMapping, colorMode) {
   if (colorMode === 'categorical') {
@@ -2699,88 +3176,7 @@ exports.default = SankeyLink;
 
 /***/ }),
 
-/***/ 45:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MissingPropsMessage = exports.missingKeys = exports.isMissing = void 0;
-
-var React = __webpack_require__(1);
-
-var T = __webpack_require__(0);
-
-var i18n_1 = __webpack_require__(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
- * @param {string[]} keys
- * @param {object} target
- * @returns {string[]} the keys of missing required props
- */
-
-var missingKeys = function missingKeys(keys, target) {
-  return keys.filter(function (k) {
-    return exports.isMissing(target[k]);
-  });
-};
-
-exports.missingKeys = missingKeys;
-var propTypes = {
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // eslint-disable-next-line react/no-unused-prop-types
-  backgroundColor: T.string,
-  missingProps: T.arrayOf(T.string)
-};
-/**
- * @method MissingPropsMessage
- * @param {MissingPropsProps} props
- * @returns {React.ReactElement}
- */
-
-var MissingPropsMessage = function MissingPropsMessage(props) {
-  var width = props.width,
-      height = props.height,
-      missingProps = props.missingProps;
-  return React.createElement(Message_1.default, {
-    "data-test": "message",
-    width: width,
-    height: height,
-    message: i18n_1._("Missing property: ".concat(missingProps.join(', ')))
-  });
-};
-
-exports.MissingPropsMessage = MissingPropsMessage;
-exports.MissingPropsMessage.propTypes = propTypes;
-exports.MissingPropsMessage.defaultProps = {
-  width: '100%',
-  height: 250
-};
-exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
-
-/***/ }),
-
-/***/ 450:
+/***/ 457:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2790,17 +3186,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
-var T = __webpack_require__(0);
+var T = __webpack_require__(1);
 
-var Popover_1 = __webpack_require__(84);
+var Popover_1 = __webpack_require__(89);
 
 var styled_components_1 = __webpack_require__(4);
 
-var numberUtils_1 = __webpack_require__(29);
+var numberUtils_1 = __webpack_require__(30);
 
-var PureSankey_1 = __webpack_require__(99);
+var PureSankey_1 = __webpack_require__(106);
 
 var DEFAULT_PLACEMENT = 'below';
 var StyledTooltipContainer = styled_components_1.default.div.withConfig({
@@ -3051,7 +3447,7 @@ exports.default = SankeyTooltip;
 
 /***/ }),
 
-/***/ 451:
+/***/ 458:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -3069,19 +3465,19 @@ var visualization_color_palettes_1 = __webpack_require__(50);
 
 var schemaUtils_1 = __webpack_require__(16);
 
-var PresetPalettes_1 = __webpack_require__(57);
+var PresetPalettes_1 = __webpack_require__(60);
 
-var themes_1 = __webpack_require__(72);
+var themes_1 = __webpack_require__(59);
 
 var i18n_1 = __webpack_require__(2);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var VizCategory_1 = __webpack_require__(34);
+var VizCategory_1 = __webpack_require__(35);
 
-var configUtils_1 = __webpack_require__(18);
+var configUtils_1 = __webpack_require__(19);
 
-var DynamicLinkColorsEditor_1 = __webpack_require__(452);
+var DynamicLinkColorsEditor_1 = __webpack_require__(459);
 
 var BackgroundColor_1 = __webpack_require__(53);
 
@@ -3295,7 +3691,7 @@ exports.default = configUtils_1.enhanceConfig(config);
 
 /***/ }),
 
-/***/ 452:
+/***/ 459:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3303,7 +3699,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDynamicLinkColorsEditor", function() { return getDynamicLinkColorsEditor; });
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(19);
+/* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21);
 /* harmony import */ var _splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__);
 
 
@@ -3311,7 +3707,7 @@ var getDynamicLinkColorsEditor = function getDynamicLinkColorsEditor(_ref) {
   var defaultContext = _ref.defaultContext,
       defaultPalettesConfig = _ref.defaultPalettesConfig;
   return {
-    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic link'),
+    label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Link'),
     option: 'linkColors',
     context: 'linkColorRangeConfig',
     editor: 'editor.dynamicColor',
@@ -3320,7 +3716,7 @@ var getDynamicLinkColorsEditor = function getDynamicLinkColorsEditor(_ref) {
       return Object(_splunk_visualizations_shared_configUtils__WEBPACK_IMPORTED_MODULE_1__["isDynamicOption"])(options.linkColors);
     },
     editorProps: {
-      labelPosition: 'left',
+      labelPosition: 'top',
       flyoutTitle: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Dynamic coloring: link'),
       formatters: [{
         label: Object(_splunk_ui_utils_i18n__WEBPACK_IMPORTED_MODULE_0__["_"])('Ranges'),
@@ -3356,18 +3752,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var styled_components_1 = __webpack_require__(4);
 
-var hocUtils_1 = __webpack_require__(14);
+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': "25.6.0 - f5eb3abf9"
+  'data-splunk-visualization-version': "25.7.1 - 6a77c5530"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -3409,17 +3805,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var React = __webpack_require__(1);
+var React = __webpack_require__(0);
 
 var colorUtils_1 = __webpack_require__(12);
 
-var variables_1 = __webpack_require__(9);
+var variables_1 = __webpack_require__(10);
 
-var IconPlaceholder_1 = __webpack_require__(30);
+var IconPlaceholder_1 = __webpack_require__(31);
 
 var VizBehavior_1 = __webpack_require__(6);
 
-var hocUtils_1 = __webpack_require__(14);
+var hocUtils_1 = __webpack_require__(15);
 
 var withPlaceholder = function withPlaceholder(Visualization) {
   var useIconPlaceholder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : IconPlaceholder_1.shouldShowIconPlaceholder;
@@ -3516,17 +3912,10 @@ exports.default = background;
 
 /***/ }),
 
-/***/ 57:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
-
-/***/ }),
-
-/***/ 58:
+/***/ 59:
 /***/ (function(module, exports) {
 
-module.exports = require("d3-array");
+module.exports = require("@splunk/themes");
 
 /***/ }),
 
@@ -3564,11 +3953,26 @@ var VizBehavior;
 
   VizBehavior["PLACEHOLDER"] = "placeholder";
   VizBehavior["PAGE_AND_SORT"] = "page-and-sort";
+  VizBehavior["TRELLIS"] = "trellis";
 })(VizBehavior = exports.VizBehavior || (exports.VizBehavior = {}));
 
 /***/ }),
 
-/***/ 66:
+/***/ 60:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/visualization-color-palettes/editors/PresetPalettes");
+
+/***/ }),
+
+/***/ 61:
+/***/ (function(module, exports) {
+
+module.exports = require("d3-array");
+
+/***/ }),
+
+/***/ 68:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -3595,446 +3999,56 @@ VizStyleWrapper.displayName = 'VizStyleWrapper';
 /***/ 7:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/defineProperty");
-
-/***/ }),
-
-/***/ 72:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
+module.exports = require("@babel/runtime/helpers/toConsumableArray");
 
 /***/ }),
 
 /***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/toConsumableArray");
+module.exports = require("@babel/runtime/helpers/defineProperty");
 
 /***/ }),
 
-/***/ 83:
+/***/ 86:
 /***/ (function(module, exports) {
 
 module.exports = require("d3-scale");
 
 /***/ }),
 
-/***/ 84:
+/***/ 88:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Popover");
+module.exports = require("@babel/runtime/helpers/typeof");
 
 /***/ }),
 
-/***/ 85:
+/***/ 89:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualization-encoding/utils/types");
+module.exports = require("@splunk/react-ui/Popover");
 
 /***/ }),
 
-/***/ 86:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
+module.exports = require("@splunk/visualizations-shared/Message");
 
 /***/ }),
 
-/***/ 87:
+/***/ 90:
 /***/ (function(module, exports) {
 
-module.exports = require("@babel/runtime/helpers/typeof");
+module.exports = require("@splunk/visualization-encoding/utils/types");
 
 /***/ }),
 
-/***/ 9:
+/***/ 91:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/variables");
-
-/***/ }),
-
-/***/ 99:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-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__(21);
-
-var style_1 = __webpack_require__(15);
-
-var visualization_color_palettes_1 = __webpack_require__(50); // eslint-disable-next-line camelcase
-
-
-var sankey_1 = __webpack_require__(447);
-
-var VizStyleWrapper_1 = __webpack_require__(66);
-
-var SankeyUtils_1 = __webpack_require__(124);
-
-var SankeyNode_1 = __webpack_require__(448);
-
-var SankeyLink_1 = __webpack_require__(449);
-
-var SankeyTooltip_1 = __webpack_require__(450);
-
-exports.DEFAULT_COLORS = {
-  backgroundColor: '#ffffff',
-  nodeTextColor: '#2c2c2c',
-  tooltip: {
-    headerColor: 'rgba(0, 0, 0, 0.54)',
-    linkHeaderColor: '#2c2c2c',
-    rowColor: '#2c2c2c'
-  }
-};
-exports.NODE_TEXT_FONT_SIZE = 10;
-exports.DEFAULT_FONT_FAMILY = '"Splunk Platform Sans", "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif';
-exports.DEFAULT_NODE_COLOR = '#909090';
-exports.DEFAULT_LINK_COLOR = '#909090';
-exports.DEFAULT_SERIES_COLOR = visualization_color_palettes_1.VIZ_CATEGORICAL;
-exports.DEFAULT_LINK_OPACITY = 0.5;
-exports.DEFAULT_NODE_OPACITY = 1;
-exports.INACTIVE_OPACITY = 0.05;
-exports.CHART_MIN_WIDTH = 300;
-exports.CHART_MIN_HEIGHT = 200;
-exports.DEFAULT_CHART_WIDTH = 600;
-exports.DEFAULT_CHART_HEIGHT = 300;
-exports.DEFAULT_SOURCE_INDEX = 0;
-exports.DEFAULT_TARGET_INDEX = 1;
-exports.DEFAULT_LINK_VALUE_INDEX = 2;
-var SankeyContainer = styled_components_1.default.div.withConfig({
-  displayName: "PureSankey__SankeyContainer",
-  componentId: "sc-1r333qx-0"
-})(["overflow:hidden;", ";"], function (props) {
-  return style_1.toDimension(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;
-  var margin = {
-    top: 17,
-    right: 25,
-    bottom: 17,
-    left: 30
-  }; // 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 _react_1$useState = react_1.useState([]),
-      _react_1$useState2 = _slicedToArray(_react_1$useState, 2),
-      activeLinks = _react_1$useState2[0],
-      setActiveLinks = _react_1$useState2[1];
-
-  var _react_1$useState3 = react_1.useState([]),
-      _react_1$useState4 = _slicedToArray(_react_1$useState3, 2),
-      activeNodes = _react_1$useState4[0],
-      setActiveNodes = _react_1$useState4[1];
-
-  var _react_1$useState5 = react_1.useState(null),
-      _react_1$useState6 = _slicedToArray(_react_1$useState5, 2),
-      nodeHovered = _react_1$useState6[0],
-      setNodeHovered = _react_1$useState6[1];
-
-  var _react_1$useState7 = react_1.useState(null),
-      _react_1$useState8 = _slicedToArray(_react_1$useState7, 2),
-      hoveredNodeElement = _react_1$useState8[0],
-      setHoveredNodeElement = _react_1$useState8[1];
-
-  var _react_1$useState9 = react_1.useState(false),
-      _react_1$useState10 = _slicedToArray(_react_1$useState9, 2),
-      openNodeToolTip = _react_1$useState10[0],
-      setOpenNodeToolTip = _react_1$useState10[1];
-
-  var _react_1$useState11 = react_1.useState(null),
-      _react_1$useState12 = _slicedToArray(_react_1$useState11, 2),
-      hoveredLinkElement = _react_1$useState12[0],
-      setHoveredLinkElement = _react_1$useState12[1];
-
-  var _react_1$useState13 = react_1.useState(false),
-      _react_1$useState14 = _slicedToArray(_react_1$useState13, 2),
-      openLinkToolTip = _react_1$useState14[0],
-      setOpenLinkToolTip = _react_1$useState14[1];
-
-  var sankeyContainerElement = react_1.useRef(null);
-
-  var _react_1$useState15 = react_1.useState(exports.DEFAULT_CHART_WIDTH - margin.left - margin.right),
-      _react_1$useState16 = _slicedToArray(_react_1$useState15, 2),
-      sankeyWidth = _react_1$useState16[0],
-      setSankeyWidth = _react_1$useState16[1];
-
-  var _react_1$useState17 = react_1.useState(exports.DEFAULT_CHART_HEIGHT - margin.top - margin.bottom),
-      _react_1$useState18 = _slicedToArray(_react_1$useState17, 2),
-      sankeyHeight = _react_1$useState18[0],
-      setSankeyHeight = _react_1$useState18[1];
-
-  react_1.useEffect(function () {
-    if (sankeyContainerElement && sankeyContainerElement.current) {
-      var w = sankeyContainerElement.current.getBoundingClientRect().width;
-      var h = sankeyContainerElement.current.getBoundingClientRect().height;
-      var sWidth = SankeyUtils_1.checkDigitsOnly(width) ? parseInt(width, 10) : w;
-      var sHeight = SankeyUtils_1.checkDigitsOnly(height) ? parseInt(height, 10) : h;
-      setSankeyWidth(sWidth - margin.left - margin.right);
-      setSankeyHeight(sHeight - margin.top - margin.bottom);
-    }
-  }, [width, height]);
-  var sankeyData = 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) {
-    return React.createElement(Message_1.default, {
-      width: width,
-      height: height,
-      message: i18n_1._('Invalid data to render'),
-      level: "info"
-    });
-  }
-
-  var sortAndAssignLinkIds = function sortAndAssignLinkIds(links) {
-    links.sort(function (a, b) {
-      return a.dy - b.dy;
-    });
-    links.forEach(function (link) {
-      // eslint-disable-next-line no-param-reassign
-      link.id = "link-".concat(link.source.index, "-").concat(link.target.index);
-    });
-  };
-
-  var d3sankey = sankey_1.d3_sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).size([sankeyWidth, sankeyHeight]);
-  var path = d3sankey.reversibleLink();
-  d3sankey.nodes(sankeyData.nodes).links(sankeyData.links).layout(500);
-  sortAndAssignLinkIds(sankeyData.links);
-  var nodeConnectionsMap = SankeyUtils_1.computeAllConnectedLinksToNodes(sankeyData.nodes, sankeyData.links);
-  var uniqCategory = SankeyUtils_1.getAllNodeNames(sankeyData);
-  var colorCategoryMapping = SankeyUtils_1.getColorCategoryMapping({
-    category: uniqCategory,
-    colorMode: colorMode,
-    seriesColors: seriesColors,
-    linkColors: linkColors
-  });
-
-  var resetStates = function resetStates() {
-    setActiveLinks([]);
-    setActiveNodes([]);
-    setHoveredLinkElement(null);
-    setHoveredNodeElement(null);
-    setNodeHovered(null);
-    setOpenLinkToolTip(false);
-    setOpenNodeToolTip(false);
-  };
-
-  var renderVisualization = function renderVisualization(_ref) {
-    var containerWidth = _ref.width,
-        containerHeight = _ref.height;
-
-    if (containerWidth < exports.CHART_MIN_WIDTH || containerHeight < exports.CHART_MIN_HEIGHT) {
-      return React.createElement(Message_1.default, {
-        width: containerWidth,
-        height: containerHeight,
-        message: i18n_1._('Too small to render content'),
-        level: "info"
-      });
-    }
-
-    var renderLinks = function renderLinks(links) {
-      return links.map(function (link) {
-        return React.createElement(SankeyLink_1.default, {
-          link: link,
-          activeLinks: activeLinks,
-          linkOpacity: linkOpacity,
-          path: path,
-          key: SankeyUtils_1.getLinkId(link),
-          "data-test": SankeyUtils_1.getLinkId(link),
-          colorCategoryMapping: colorCategoryMapping,
-          colorMode: colorMode,
-          handleMouseOver: function handleMouseOver(ev) {
-            setActiveLinks([link]);
-            setActiveNodes([link.source, link.target]);
-            setHoveredLinkElement(ev.currentTarget.querySelector('circle'));
-            setOpenNodeToolTip(false);
-            setOpenLinkToolTip(true);
-          },
-          handleMouseLeave: function handleMouseLeave() {
-            resetStates();
-          }
-        });
-      });
-    };
-
-    var renderNodes = function renderNodes(nodes) {
-      var chartWidth = typeof width === 'number' ? width : Number.parseInt(width, 10);
-      return nodes.map(function (node) {
-        return React.createElement(SankeyNode_1.default, {
-          node: node,
-          key: SankeyUtils_1.getNodeId(node),
-          "data-test": SankeyUtils_1.getNodeId(node),
-          activeNodes: activeNodes,
-          nodeWidth: nodeWidth,
-          chartWidth: chartWidth,
-          colorCategoryMapping: colorCategoryMapping,
-          nodeTextColor: nodeTextColor,
-          handleMouseOver: function handleMouseOver(ev) {
-            var connections = nodeConnectionsMap[node.index];
-            setActiveLinks(connections.links);
-            setNodeHovered(node);
-            setActiveNodes([].concat(_toConsumableArray(connections.sourceNodes), _toConsumableArray(connections.targetNodes)));
-            setHoveredNodeElement(ev.currentTarget);
-            setOpenLinkToolTip(false);
-            setOpenNodeToolTip(true);
-          },
-          handleMouseLeave: function handleMouseLeave() {
-            return resetStates();
-          }
-        });
-      });
-    };
-
-    return React.createElement(VizStyleWrapper_1.default, {
-      backgroundColor: backgroundColor,
-      dataTestKey: "SankeyWrapper",
-      onMouseLeave: function onMouseLeave() {
-        return resetStates();
-      }
-    }, React.createElement("svg", {
-      height: "100%",
-      width: "100%",
-      "data-test": "sankey-svg"
-    }, React.createElement("g", {
-      transform: "translate(".concat(translatePos.x, ",").concat(translatePos.y, ")")
-    }, React.createElement("g", {
-      className: "link-group",
-      "data-test": "link-group"
-    }, renderLinks(sankeyData.links), openLinkToolTip && React.createElement(SankeyTooltip_1.default, {
-      mode: "link",
-      open: openLinkToolTip,
-      handleTooltipRequestClose: function handleTooltipRequestClose() {
-        return resetStates();
-      },
-      linkValue: linkValueField,
-      connectionsMap: nodeConnectionsMap,
-      anchor: hoveredLinkElement,
-      link: activeLinks[0],
-      height: sankeyHeight,
-      width: sankeyWidth,
-      colorCategoryMapping: colorCategoryMapping,
-      tooltipRowColor: tooltipRowColor,
-      tooltipLinkHeaderColor: tooltipLinkHeaderColor,
-      tooltipHeaderColor: tooltipHeaderColor
-    })), React.createElement("g", {
-      className: "node-group",
-      "data-test": "node-group"
-    }, renderNodes(sankeyData.nodes), openNodeToolTip && React.createElement(SankeyTooltip_1.default, {
-      mode: "node",
-      open: openNodeToolTip,
-      handleTooltipRequestClose: function handleTooltipRequestClose() {
-        return resetStates();
-      },
-      linkValue: linkValueField,
-      connectionsMap: nodeConnectionsMap,
-      anchor: hoveredNodeElement,
-      node: nodeHovered,
-      height: sankeyHeight,
-      width: sankeyWidth,
-      colorCategoryMapping: colorCategoryMapping,
-      tooltipRowColor: tooltipRowColor,
-      tooltipLinkHeaderColor: tooltipLinkHeaderColor,
-      tooltipHeaderColor: tooltipHeaderColor
-    })))));
-  };
-
-  return React.createElement(SankeyContainer, {
-    height: height,
-    width: width,
-    ref: sankeyContainerElement
-  }, React.createElement(SizeAwareWrapper_1.default, null, function (containerDimension) {
-    return renderVisualization(containerDimension);
-  }));
-};
-
-PureSankey.propTypes = {
-  columns: T.array,
-  width: T.oneOfType([T.string, T.number]),
-  height: T.oneOfType([T.string, T.number]),
-  // need this to satisfy props interface
-  // eslint-disable-next-line react/no-unused-prop-types
-  mode: T.string,
-  colorMode: T.string,
-  nodeWidth: T.number,
-  nodePadding: T.number,
-  resultLimit: T.number,
-  seriesColors: T.arrayOf(T.string),
-  linkColors: T.arrayOf(T.string),
-  linkOpacity: T.number,
-  linkValueField: T.string,
-  backgroundColor: T.string,
-  nodeTextColor: T.string,
-  tooltipRowColor: T.string,
-  tooltipLinkHeaderColor: T.string,
-  tooltipHeaderColor: T.string
-};
-PureSankey.defaultProps = {
-  columns: [],
-  width: exports.DEFAULT_CHART_WIDTH,
-  height: exports.DEFAULT_CHART_HEIGHT,
-  mode: 'view',
-  colorMode: 'categorical',
-  nodeWidth: 12,
-  nodePadding: 18,
-  resultLimit: 1000,
-  seriesColors: exports.DEFAULT_SERIES_COLOR,
-  linkColors: [],
-  linkOpacity: exports.DEFAULT_LINK_OPACITY,
-  linkValueField: 'value',
-  backgroundColor: '#0b0c0e',
-  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)'
-};
-exports.default = PureSankey;
+module.exports = require("@splunk/visualizations-shared/dataSourceUtils");
 
 /***/ })