From 4f52d3db90627e005483e70fd10cceb3d4f823ac Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 22:58:41 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 .../layout/hierarchicalLayoutUserdefined.html | 143 ++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 js/dos/ext/vis/examples/network/layout/hierarchicalLayoutUserdefined.html
diff --git a/js/dos/ext/vis/examples/network/layout/hierarchicalLayoutUserdefined.html b/js/dos/ext/vis/examples/network/layout/hierarchicalLayoutUserdefined.html
new file mode 100644
index 0000000..166f8e6
--- /dev/null
+++ b/js/dos/ext/vis/examples/network/layout/hierarchicalLayoutUserdefined.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Hierarchical Layout, userDefined</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+    var directionInput = document.getElementById("direction");
+
+    function destroy() {
+        if (network !== null) {
+            network.destroy();
+            network = null;
+        }
+    }
+
+    function draw() {
+      destroy();
+      nodes = [];
+      edges = [];
+      var connectionCount = [];
+
+      // randomly create some nodes and edges
+      for (var i = 0; i < 15; i++) {
+          nodes.push({id: i,label: String(i)});
+      }
+      edges.push({from: 0, to: 1 });
+      edges.push({from: 0, to: 6 });
+      edges.push({from: 0, to: 13});
+      edges.push({from: 0, to: 11});
+      edges.push({from: 1, to: 2 });
+      edges.push({from: 2, to: 3 });
+      edges.push({from: 2, to: 4 });
+      edges.push({from: 3, to: 5 });
+      edges.push({from: 1, to: 10});
+      edges.push({from: 1, to: 7 });
+      edges.push({from: 2, to: 8 });
+      edges.push({from: 2, to: 9 });
+      edges.push({from: 3, to: 14});
+      edges.push({from: 1, to: 12});
+      nodes[0]["level"] = 0;
+      nodes[1]["level"] = 1;
+      nodes[2]["level"] = 3;
+      nodes[3]["level"] = 4;
+      nodes[4]["level"] = 4;
+      nodes[5]["level"] = 5;
+      nodes[6]["level"] = 1;
+      nodes[7]["level"] = 2;
+      nodes[8]["level"] = 4;
+      nodes[9]["level"] = 4;
+      nodes[10]["level"] = 2;
+      nodes[11]["level"] = 1;
+      nodes[12]["level"] = 2;
+      nodes[13]["level"] = 1;
+      nodes[14]["level"] = 5;
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+
+    var options = {
+        edges: {
+            smooth: true
+        },
+        layout: {
+            hierarchical:{
+                direction: directionInput.value
+            }
+        }
+    };
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+    }
+
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw();">
+<h2>Hierarchical Layout - User-defined</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
+    If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
+</div>
+<p>
+  <input type="button" id="btn-UD" value="Up-Down">
+  <input type="button" id="btn-DU" value="Down-Up">
+  <input type="button" id="btn-LR" value="Left-Right">
+  <input type="button" id="btn-RL" value="Right-Left">
+  <input type="hidden" id='direction' value="UD">
+</p>
+
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+<script language="JavaScript">
+    var directionInput = document.getElementById("direction");
+    var btnUD = document.getElementById("btn-UD");
+    btnUD.onclick = function() {
+        directionInput.value = "UD";
+        draw();
+    };
+    var btnDU = document.getElementById("btn-DU");
+    btnDU.onclick = function() {
+        directionInput.value = "DU";
+        draw();
+    };
+    var btnLR = document.getElementById("btn-LR");
+    btnLR.onclick = function() {
+        directionInput.value = "LR";
+        draw();
+    };
+    var btnRL = document.getElementById("btn-RL");
+    btnRL.onclick = function() {
+        directionInput.value = "RL";
+        draw();
+    };
+</script>
+</body>
+</html>
