@splunk/visualizations 25.9.1 → 25.10.0

package/LinkGraph.js

@@ -265,7 +265,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     }
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.9.1 - 5ba41e723",
+      "data-splunk-visualization-version": "25.10.0 - 8d01deb08",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -1409,7 +1409,7 @@ var Cover = styled_components_1.default.div.withConfig({
   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.9.1 - 5ba41e723"
+  'data-splunk-visualization-version': "25.10.0 - 8d01deb08"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"
@@ -1630,8 +1630,6 @@ module.exports = require("@splunk/react-ui/Button");
 
 
 var _toConsumableArray = __webpack_require__(7);
-var _classCallCheck = __webpack_require__(11);
-var _createClass = __webpack_require__(22);
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -1639,13 +1637,18 @@ exports.getSecondaryColumnByField = exports.sortGraphColumn = exports.getNodesTo
 var lodash_1 = __webpack_require__(3);
 var hashString = function hashString() {
   var stringIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return stringIn.toString().split('').map(function (v) {
+  var returnStringArray = stringIn.toString().split('').map(function (v) {
     return v.charCodeAt(0);
-  })
+  });
+  if (returnStringArray.length === 0) {
+    return '-1';
+  }
+  var returnValue =
   // eslint-disable-next-line no-bitwise
-  .reduce(function (a, v) {
+  returnStringArray.reduce(function (a, v) {
     return a + ((a << 7) + (a << 3)) ^ v;
   }).toString(16);
+  return returnValue;
 };
 exports.hashString = hashString;
 var createNode = function createNode(graphDataModelIn, nodesIn, column, field, fieldIndex, nodeWidth, nodeHeight, nodeSpacingX, nodeSpacingY, shouldAddToGraphDataModel) {
@@ -1672,6 +1675,9 @@ var createNode = function createNode(graphDataModelIn, nodesIn, column, field, f
   } else {
     node.data.count += 1;
   }
+  if (column.toString().length === 0) {
+    node.data.isHidden = true;
+  }
   var key = "".concat(fieldIndex, "-").concat(fieldHash, "-").concat(columnHash);
   if (shouldAddToGraphDataModel && !graphDataModel.nodes[key]) {
     nodes[columnHash] = node;
@@ -1693,7 +1699,7 @@ var createEdge = function createEdge(graphDataModelIn, nodesIn, edgesIn, nodeIn,
   var fieldHash = exports.hashString(field);
   var columnHash = exports.hashString(column);
   var graphDataModel = graphDataModelIn;
-  if (columns[fieldIndex + 1] && columns[fieldIndex + 1][columnIndex]) {
+  if (columns[fieldIndex + 1]) {
     var sourceNode = "".concat(fieldIndex, "-").concat(fieldHash, "-").concat(columnHash);
     var nextColumnOverContent = columns[fieldIndex + 1][columnIndex];
     var targetNode = "".concat(fieldIndex + 1, "-").concat(exports.hashString(fields[fieldIndex + 1]), "-").concat(exports.hashString(nextColumnOverContent));
@@ -1771,83 +1777,103 @@ var createLinkGraphFromTable = function createLinkGraphFromTable(fieldsIn, colum
     });
   });
   graphDataModel.edges = Object.values(edges);
+  graphDataModel.columns = columns;
+  // hide all edges that go to or from a hidden node
+  var edgeTemp;
+  graphDataModel.edges.forEach(function (edge) {
+    var _a, _b, _c, _d;
+    if (((_b = (_a = graphDataModel.nodes[edge.sourceNode]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.isHidden) || ((_d = (_c = graphDataModel.nodes[edge.targetNode]) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.isHidden)) {
+      edgeTemp = edge;
+      edgeTemp.isHidden = true;
+      // show all paths from hidden nodes across the real data
+      getAllPathsFromNodeID(graphDataModel, graphDataModel.nodes[edge.sourceNode]).edges.forEach(function (edgeToShowTemp) {
+        var edgeToShow = edgeToShowTemp;
+        edgeToShow.isHidden = false;
+      });
+    }
+  });
   return graphDataModel;
 };
 exports.createLinkGraphFromTable = createLinkGraphFromTable;
-var Edges = /*#__PURE__*/function () {
-  function Edges() {
-    _classCallCheck(this, Edges);
-    this.store = {};
+/* getAllPathsFromNodeID gets paths from a node via the data and not the graph
+
+Given
+
+a, b, c
+a,  , c
+ ,  , d
+
+ From a graph context a connects to d ( a to '', '' to d)
+ From a data ROW context a does not connect to d
+
+ getAllPathsFromNodeID(graph, a) would return nodes a,b,'',c and edges a-b, b-c, a-'', ''-c
+*/
+var getAllPathsFromNodeID = function getAllPathsFromNodeID(graphDataModel, node) {
+  var newEdges = [];
+  var nodes = [];
+  if (!node) {
+    return {
+      nodes: [],
+      edges: []
+    };
   }
-  _createClass(Edges, [{
-    key: "constuctor",
-    value: function constuctor() {
-      this.store = {};
-    }
-  }, {
-    key: "addEdge",
-    value: function addEdge(source, target) {
-      if (!this.store[source]) {
-        this.store[source] = {};
+  graphDataModel.columns[node.data.fieldIndex].forEach(function (value, index) {
+    if (value === node.data.value) {
+      var row = graphDataModel.columns.map(function (column) {
+        return column[index];
+      });
+      // remove blank spaces from the start of the array
+      var offset = 0;
+      while (row[0] === '') {
+        row.shift();
+        offset += 1;
       }
-      this.store[source][target] = true;
-    }
-  }, {
-    key: "getNeighbors",
-    value: function getNeighbors(source) {
-      if (!this.store[source]) {
-        return {};
+      // remove blank spaces from the end of the array
+      while (row[row.length - 1] === '') {
+        row.pop();
+      }
+      for (var i = 0; i < row.length - 1; i += 1) {
+        if (graphDataModel.fields[i + 1]) {
+          var fieldIndexStart = offset + i; // this is field.index not i
+          var fieldHashStart = exports.hashString(graphDataModel.fields[offset + i].value);
+          var columnHashStart = exports.hashString(row[i]);
+          var fieldIndexEnd = offset + i + 1;
+          var fieldHashEnd = exports.hashString(graphDataModel.fields[offset + i + 1].value);
+          var columnHashEnd = exports.hashString(row[i + 1]);
+          newEdges.push({
+            sourceNode: "".concat(fieldIndexStart, "-").concat(fieldHashStart, "-").concat(columnHashStart),
+            targetNode: "".concat(fieldIndexEnd, "-").concat(fieldHashEnd, "-").concat(columnHashEnd)
+          });
+        }
       }
-      return this.store[source];
     }
-  }]);
-  return Edges;
-}();
-var getNodesToHighlight = function getNodesToHighlight(graph, sourceNodeID) {
-  var edges = {
-    reverse: new Edges(),
-    forward: new Edges()
-  };
-  graph.edges.forEach(function (edge) {
-    edges.forward.addEdge(edge.sourceNode, edge.targetNode);
-    edges.reverse.addEdge(edge.targetNode, edge.sourceNode);
   });
-  var vs = Object.assign(Object.assign({}, traverse(edges.reverse, sourceNodeID)), traverse(edges.forward, sourceNodeID));
-  var vertices = new Set(Object.keys(vs));
-  var result = {
-    vertices: [],
-    edges: []
-  };
-  result.vertices = _toConsumableArray(vertices);
-  result.edges = _toConsumableArray(vertices).flatMap(function (v) {
-    return Object.keys(edges.forward.getNeighbors(v)).filter(function (u) {
-      return vertices.has(u);
-    }).map(function (u) {
-      return "".concat(v, "-").concat(u);
+  var edges = [];
+  newEdges.forEach(function (newEdge) {
+    graphDataModel.edges.forEach(function (liveEdge) {
+      if (liveEdge.sourceNode === newEdge.sourceNode && liveEdge.targetNode === newEdge.targetNode) {
+        edges.push(liveEdge);
+        nodes.push(newEdge.sourceNode);
+        nodes.push(newEdge.targetNode);
+      }
     });
   });
-  return result;
+  return {
+    nodes: _toConsumableArray(new Set(nodes)),
+    edges: edges
+  };
 };
-exports.getNodesToHighlight = getNodesToHighlight;
-var traverse = function traverse(edges, sourceNodeID) {
-  var visited = {};
-  var currentNodesToTraverse = [sourceNodeID];
-  var _loop = function _loop() {
-    var nextNodesToTraverse = [];
-    currentNodesToTraverse.forEach(function (node) {
-      visited[node] = true;
-      var neighbors = edges.getNeighbors(node);
-      Object.keys(neighbors).forEach(function (n) {
-        return nextNodesToTraverse.push(n);
-      });
-    });
-    currentNodesToTraverse = nextNodesToTraverse;
+var getNodesToHighlight = function getNodesToHighlight(graph, sourceNodeID) {
+  var paths = getAllPathsFromNodeID(graph, graph.nodes[sourceNodeID]);
+  var newEdges = paths.edges.map(function (edge) {
+    return "".concat(edge.sourceNode, "-").concat(edge.targetNode);
+  });
+  return {
+    nodes: paths.nodes,
+    edges: newEdges
   };
-  while (currentNodesToTraverse.length) {
-    _loop();
-  }
-  return visited;
 };
+exports.getNodesToHighlight = getNodesToHighlight;
 // TODO: write tests once all sorting options are supported
 var sortGraphColumn = function sortGraphColumn(graph, field, sortKey, nodeHeight, nodeSpacingY) {
   var nodesToSort = Object.values(graph.nodes).filter(function (node) {
@@ -2415,13 +2441,13 @@ var Graph = /*#__PURE__*/function (_React$Component) {
       var _this3 = this;
       this.unhighlightAllEdges();
       var _PureLinkGraphUtils_ = PureLinkGraphUtils_1.getNodesToHighlight(this.props.graphDataModel, nodeID),
-        vertices = _PureLinkGraphUtils_.vertices,
+        nodes = _PureLinkGraphUtils_.nodes,
         edges = _PureLinkGraphUtils_.edges;
       edges.forEach(function (e) {
         var element = _this3.viewport.querySelector("[data-test=\"edge-".concat(e, "\"]"));
         element.classList.add('hovering');
       });
-      vertices.forEach(function (uuid) {
+      nodes.forEach(function (uuid) {
         var element = _this3.viewport.querySelector("[data-test=\"node-".concat(uuid, "\"]"));
         element.classList.add('hovering');
       });
@@ -2475,16 +2501,16 @@ var Graph = /*#__PURE__*/function (_React$Component) {
         value: value,
         state: selectedOption
       };
-      var _PureLinkGraphUtils_2 = PureLinkGraphUtils_1.getNodesToHighlight(this.props.graphDataModel, key),
-        vertices = _PureLinkGraphUtils_2.vertices;
-      vertices.map(function (k) {
+      PureLinkGraphUtils_1.getNodesToHighlight(this.props.graphDataModel, key).nodes.map(function (k) {
         return nodes[k];
       }).forEach(function (node) {
-        var row = "row.".concat(node.data.field, ".value");
-        if (!payload[row]) {
-          payload[row] = [];
+        if (node.data.isHidden !== true) {
+          var row = "row.".concat(node.data.field, ".value");
+          if (!payload[row]) {
+            payload[row] = [];
+          }
+          payload[row].push(node.data.value);
         }
-        payload[row].push(node.data.value);
       });
       onNodeClick({
         payload: payload
@@ -2587,7 +2613,7 @@ var Graph = /*#__PURE__*/function (_React$Component) {
             };
             middle.currentX = start.currentX + start.currentW + (end.currentX - (start.currentX + start.currentW)) / 2;
             middle.currentY = start.currentY + start.currentH / 2 + (end.currentY - start.currentY - start.currentH / 2) / 2;
-            var svgData = "\n                            M".concat(start.currentX + start.currentW, ",").concat(start.currentY + start.currentH / 2, "\n                            L").concat(start.currentX + start.currentW, ",").concat(start.currentY + start.currentH / 2, "\n                            C").concat(middle.currentX, ",").concat(start.currentY + start.currentH / 2, "\n                            ").concat(middle.currentX, ",").concat(end.currentY + end.currentH / 2, "\n                            ").concat(end.currentX, ",").concat(end.currentY + end.currentH / 2, "\n                            L").concat(end.currentX, ",").concat(end.currentY + end.currentH / 2);
+            var svgData = "\n                            M".concat(start.currentX + start.currentW, ",").concat(start.currentY + start.currentH / 2, "\n                            L").concat(start.currentX + start.currentW, ",").concat(start.currentY + start.currentH / 2, "\n                            C").concat(middle.currentX, ",").concat(start.currentY + start.currentH / 2, "\n                            ").concat(middle.currentX, ",").concat(end.currentY + end.currentH / 2, "\n                            ").concat(end.currentX, ",").concat(end.currentY + end.currentH / 2, "\n                            L").concat(end.currentX, ",").concat(end.currentY + end.currentH / 2, "\n                            L").concat(end.currentX + wIn, ",").concat(end.currentY + end.currentH / 2);
             edgeElement.setAttribute('d', svgData);
           }
         }
@@ -2622,7 +2648,10 @@ var Graph = /*#__PURE__*/function (_React$Component) {
         ref: function ref(c) {
           _this8.viewport = c;
         }
-      }, React.createElement(Nodes_1.default, {
+      }, React.createElement(Edges_1.default, {
+        edges: newEdges,
+        linkWidth: linkWidth
+      }), React.createElement(Nodes_1.default, {
         nodes: nodes,
         onNodeClick: function onNodeClick(k) {
           return _this8.handleMouseClick(k);
@@ -2637,9 +2666,6 @@ var Graph = /*#__PURE__*/function (_React$Component) {
         showValueCounts: showValueCounts,
         metadataFields: metadataFields,
         metadataColumns: metadataColumns
-      }), React.createElement(Edges_1.default, {
-        edges: newEdges,
-        linkWidth: linkWidth
       }));
     }
   }], [{
@@ -2707,6 +2733,9 @@ var Edges = function Edges(props) {
   }, edges.map(function (edge) {
     key = "edge-".concat(edge.sourceNode, "-").concat(edge.targetNode);
     return [React.createElement(GraphStyles_1.StyledEdgesPath, {
+      style: {
+        visibility: edge.isHidden ? 'hidden' : 'visible'
+      },
       className: "edge",
       key: key,
       "data-test": key,
@@ -2740,6 +2769,9 @@ var Nodes = function Nodes(props) {
       "data-test": "node-".concat(key),
       "data-test-y-index": props.nodes[key].yIndex,
       key: key,
+      style: {
+        visibility: props.nodes[key].data.isHidden ? 'hidden' : 'visible'
+      },
       onClick: function onClick() {
         return props.onNodeClick(key);
       },