fix(layout-engine): invalid hierarchical layout (#77)

* test(layout-engine): add failing test for this issue

* fix(layout-engine): generate valid hierarchical layouts

TODO: This is very slow at the moment, it needs to be optimized for
better performance in production.

* chore(dist): update

* fix(layout-engine): position directed hierarchy to the bottom

This mostly minimizes the amount of levels edges span between two nodes.

* chore(dist): update

* chore(layout-engine): remove unused code

* perf(layout-engine): improve level determination perf

In my tests up to 2500 % improvement in performance depending on the
size and structure of the graph.

* perf(layout-engine): use faster cycle detection

Cycles are detected as the levels are being filled. This get's rid of
the incredibly slow O(V²*E) cycle detection. Still uses the same
fallback logic for cyclic “hierarchies”.

* chore(dist): update

* test(layout-engine): add one more test case

* fix(layout-engine): ignore circular edges in hierarchical layout

* test(layout-engine): randomize edge order

* style(layout-engine): refomat new files

* chore(dist): update

* chore(dist): update

dist/types/network/modules/layout-engine/index.d.ts

@@ -0,0 +1,23 @@
+declare type Levels = Record<string | number, number>;
+interface Edge {
+    connected: boolean;
+    from: Node;
+    fromId: string | number;
+    to: Node;
+    toId: string | number;
+}
+interface Node {
+    id: string | number;
+    edges: Edge[];
+}
+/**
+ * Assign levels to nodes according to their positions in the hierarchy.
+ *
+ * @param nodes - Nodes of the graph.
+ * @param levels - If present levels will be added to it, if not a new object will be created.
+ *
+ * @returns Populated node levels.
+ */
+export declare function fillLevelsByDirection(nodes: Node[], levels?: Levels): Levels;
+export {};
+//# sourceMappingURL=index.d.ts.map

dist/vis-network.css

@@ -1,3 +1,18 @@
+.vis .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /* Must be displayed above for example selected Timeline items */
+  z-index: 10;
+}
+
+.vis-active {
+  box-shadow: 0 0 10px #86d5f8;
+}
+
 div.vis-configuration {
     position:relative;
     display:block;
@@ -286,21 +301,6 @@ input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
     border-width: 12px;
     margin-top: -12px;
 }
-.vis .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  /* Must be displayed above for example selected Timeline items */
-  z-index: 10;
-}
-
-.vis-active {
-  box-shadow: 0 0 10px #86d5f8;
-}
-
 div.vis-network div.vis-manipulation {
   box-sizing: content-box;
 

dist/vis-network.esm.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 0.0.0-no-version
- * @date    2019-09-10T10:15:21Z
+ * @date    2019-10-01T08:44:23Z
  *
  * @copyright (c) 2011-2017 Almende B.V, http://almende.com
  * @copyright (c) 2018-2019 visjs contributors, https://github.com/visjs
@@ -39891,6 +39891,7 @@ var timsort = createCommonjsModule$2(function (module, exports) {
 unwrapExports(timsort);
 
 var timsort$1 = timsort;
+var timsort_1 = timsort$1.sort;
 
 /**
  * Interface definition for direction strategy classes.
@@ -40121,7 +40122,7 @@ function (_DirectionInterface) {
   }, {
     key: "sort",
     value: function sort(nodeArray) {
-      timsort$1.sort(nodeArray, function (a, b) {
+      timsort_1(nodeArray, function (a, b) {
         return a.x - b.x;
       });
     }
@@ -40217,7 +40218,7 @@ function (_DirectionInterface2) {
   }, {
     key: "sort",
     value: function sort(nodeArray) {
-      timsort$1.sort(nodeArray, function (a, b) {
+      timsort_1(nodeArray, function (a, b) {
         return a.y - b.y;
       });
     }
@@ -40241,6 +40242,148 @@ function (_DirectionInterface2) {
   return HorizontalStrategy;
 }(DirectionInterface);
 
+/**
+ * Try to assign levels to nodes according to their positions in the cyclic “hierarchy”.
+ *
+ * @param nodes - Nodes of the graph.
+ * @param levels - If present levels will be added to it, if not a new object will be created.
+ *
+ * @returns Populated node levels.
+ */
+function fillLevelsByDirectionCyclic(nodes, levels) {
+  var edges = new Set();
+  nodes.forEach(function (node) {
+    node.edges.forEach(function (edge) {
+      if (edge.connected) {
+        edges.add(edge);
+      }
+    });
+  });
+  edges.forEach(function (edge) {
+    var fromId = edge.from.id;
+    var toId = edge.to.id;
+
+    if (levels[fromId] == null) {
+      levels[fromId] = 0;
+    }
+
+    if (levels[toId] == null || levels[fromId] >= levels[toId]) {
+      levels[toId] = levels[fromId] + 1;
+    }
+  });
+  return levels;
+}
+/**
+ * Assign levels to nodes according to their positions in the hierarchy.
+ *
+ * @param nodes - Nodes of the graph.
+ * @param levels - If present levels will be added to it, if not a new object will be created.
+ *
+ * @returns Populated node levels.
+ */
+
+
+function fillLevelsByDirection(nodes) {
+  var levels = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Object.create(null);
+  var limit = nodes.length;
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    var _loop = function _loop() {
+      var leaf = _step.value;
+
+      if (!leaf.edges.every(function (edge) {
+        return edge.to === leaf;
+      })) {
+        // Not a leaf.
+        return "continue";
+      }
+
+      levels[leaf.id] = 0;
+      var stack = [leaf];
+      var done = 0;
+      var node = void 0;
+
+      while (node = stack.pop()) {
+        var edges = node.edges;
+        var newLevel = levels[node.id] - 1;
+        var _iteratorNormalCompletion2 = true;
+        var _didIteratorError2 = false;
+        var _iteratorError2 = undefined;
+
+        try {
+          for (var _iterator2 = edges[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+            var edge = _step2.value;
+
+            if (!edge.connected || edge.to !== node || edge.to === edge.from) {
+              continue;
+            }
+
+            var fromId = edge.fromId;
+            var oldLevel = levels[fromId];
+
+            if (oldLevel == null || oldLevel > newLevel) {
+              levels[fromId] = newLevel;
+              stack.push(edge.from);
+            }
+          }
+        } catch (err) {
+          _didIteratorError2 = true;
+          _iteratorError2 = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+              _iterator2.return();
+            }
+          } finally {
+            if (_didIteratorError2) {
+              throw _iteratorError2;
+            }
+          }
+        }
+
+        if (done > limit) {
+          // This would run forever on a cyclic graph.
+          return {
+            v: fillLevelsByDirectionCyclic(nodes, levels)
+          };
+        } else {
+          ++done;
+        }
+      }
+    };
+
+    for (var _iterator = nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var _ret = _loop();
+
+      switch (_ret) {
+        case "continue":
+          continue;
+
+        default:
+          if (_typeof_1$1(_ret) === "object") return _ret.v;
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+
+  return levels;
+}
+
 /**
  * There's a mix-up with terms in the code. Following are the formal definitions:
  *
@@ -41919,43 +42062,9 @@ function () {
     value: function _determineLevelsDirected() {
       var _this8 = this;
 
-      var minLevel = 10000;
-      /**
-       * Check if there is an edge going the opposite direction for given edge
-       *
-       * @param {Edge} edge  edge to check
-       * @returns {boolean} true if there's another edge going into the opposite direction
-       */
-
-      var isBidirectional = function isBidirectional(edge) {
-        util.forEach(_this8.body.edges, function (otherEdge) {
-          if (otherEdge.toId === edge.fromId && otherEdge.fromId === edge.toId) {
-            return true;
-          }
-        });
-        return false;
-      };
-
-      var levelByDirection = function levelByDirection(nodeA, nodeB, edge) {
-        var levelA = _this8.hierarchical.levels[nodeA.id];
-        var levelB = _this8.hierarchical.levels[nodeB.id];
-
-        if (isBidirectional(edge)  ) ; // set initial level
-
-
-        if (levelA === undefined) {
-          levelA = _this8.hierarchical.levels[nodeA.id] = minLevel;
-        }
-
-        if (edge.toId == nodeB.id) {
-          _this8.hierarchical.levels[nodeB.id] = levelA + 1;
-        } else {
-          _this8.hierarchical.levels[nodeB.id] = levelA - 1;
-        }
-      };
-
-      this._crawlNetwork(levelByDirection);
-
+      this.hierarchical.levels = fillLevelsByDirection(this.body.nodeIndices.map(function (id) {
+        return _this8.body.nodes[id];
+      }), this.hierarchical.levels);
       this.hierarchical.setMinLevelToZero(this.body.nodes);
     }
     /**