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

---
 .../neighbourhoodHighlight.html               | 162 ++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 js/dos/ext/vis/examples/network/exampleApplications/neighbourhoodHighlight.html
diff --git a/js/dos/ext/vis/examples/network/exampleApplications/neighbourhoodHighlight.html b/js/dos/ext/vis/examples/network/exampleApplications/neighbourhoodHighlight.html
new file mode 100644
index 0000000..fc8e262
--- /dev/null
+++ b/js/dos/ext/vis/examples/network/exampleApplications/neighbourhoodHighlight.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
+<html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <title>Network |  Static smooth curves - World Cup Network</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
+
+  <script src="../datasources/WorldCup2014.js"></script>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<h2>Dynamic Data - Neighbourhood Highlight</h2>
+<div style="width:800px; font-size:14px;">
+  This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
+  In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
+  they are connected to the selected node. The code doing the highlighting only takes about 1ms, the rest of the time is the redrawing of the network (9200 edges..).
+  <br /><br />
+</div>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  var network;
+  var allNodes;
+  var highlightActive = false;
+
+  var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
+  var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js
+
+  function redrawAll() {
+    var container = document.getElementById('mynetwork');
+    var options = {
+      nodes: {
+        shape: 'dot',
+        scaling: {
+          min: 10,
+          max: 30,
+          label: {
+            min: 8,
+            max: 30,
+            drawThreshold: 12,
+            maxVisible: 20
+          }
+        },
+        font: {
+          size: 12,
+          face: 'Tahoma'
+        }
+      },
+      edges: {
+        width: 0.15,
+        color: {inherit: 'from'},
+        smooth: {
+          type: 'continuous'
+        }
+      },
+      physics: false,
+      interaction: {
+        tooltipDelay: 200,
+        hideEdgesOnDrag: true
+      }
+    };
+    var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./datasources/WorldCup2014.js
+
+
+    network = new vis.Network(container, data, options);
+
+    // get a JSON object
+    allNodes = nodesDataset.get({returnType:"Object"});
+
+    network.on("click",neighbourhoodHighlight);
+  }
+
+  function neighbourhoodHighlight(params) {
+    // if something is selected:
+    if (params.nodes.length > 0) {
+      highlightActive = true;
+      var i,j;
+      var selectedNode = params.nodes[0];
+      var degrees = 2;
+
+      // mark all nodes as hard to read.
+      for (var nodeId in allNodes) {
+        allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
+        if (allNodes[nodeId].hiddenLabel === undefined) {
+          allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
+          allNodes[nodeId].label = undefined;
+        }
+      }
+      var connectedNodes = network.getConnectedNodes(selectedNode);
+      var allConnectedNodes = [];
+
+      // get the second degree nodes
+      for (i = 1; i < degrees; i++) {
+        for (j = 0; j < connectedNodes.length; j++) {
+          allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
+        }
+      }
+
+      // all second degree nodes get a different color and their label back
+      for (i = 0; i < allConnectedNodes.length; i++) {
+        allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
+        if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
+          allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
+          allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
+        }
+      }
+
+      // all first degree nodes get their own color and their label back
+      for (i = 0; i < connectedNodes.length; i++) {
+        allNodes[connectedNodes[i]].color = undefined;
+        if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
+          allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
+          allNodes[connectedNodes[i]].hiddenLabel = undefined;
+        }
+      }
+
+      // the main node gets its own color and its label back.
+      allNodes[selectedNode].color = undefined;
+      if (allNodes[selectedNode].hiddenLabel !== undefined) {
+        allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
+        allNodes[selectedNode].hiddenLabel = undefined;
+      }
+    }
+    else if (highlightActive === true) {
+      // reset all nodes
+      for (var nodeId in allNodes) {
+        allNodes[nodeId].color = undefined;
+        if (allNodes[nodeId].hiddenLabel !== undefined) {
+          allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
+          allNodes[nodeId].hiddenLabel = undefined;
+        }
+      }
+      highlightActive = false
+    }
+
+    // transform the object into an array
+    var updateArray = [];
+    for (nodeId in allNodes) {
+      if (allNodes.hasOwnProperty(nodeId)) {
+        updateArray.push(allNodes[nodeId]);
+      }
+    }
+    nodesDataset.update(updateArray);
+  }
+
+  redrawAll()
+
+</script>
+
+</body></html>
