change behavior of select node, add button to reset. Relates to #73

WestHealth · Apr 30, 2021 · a81c755 · a81c755
1 parent 1a90dc0
commit a81c755
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/pyvis/lib/bindings/utils.js b/pyvis/lib/bindings/utils.js
@@ -1,4 +1,6 @@
 function neighbourhoodHighlight(params) {
+  console.log("in nieghborhoodhighlight");
+  console.log(params);
   allNodes = nodes.get({ returnType: "Object" });
   // originalNodes = JSON.parse(JSON.stringify(allNodes));
   // if something is selected:
@@ -98,6 +100,6 @@ function neighbourhoodHighlight(params) {
 
 function selectNode(node) {
   network.selectNodes([node]);
-  network.focus(node, { scale: 2 });
+  neighbourhoodHighlight({ nodes: [node] });
   return node;
 }
diff --git a/pyvis/templates/template.html b/pyvis/templates/template.html
@@ -154,20 +154,27 @@ <h1>{{heading}}</h1>
     <div class="card" style="width: 100%">
       {% if select_menu %}
       <div class="card-header">
-        <select
-          class="form-select"
-          aria-label="Default select example"
-          onchange="selectNode(value);"
-          searchable="Search here"
-        >
-          <option selected>Select a Node by ID</option>
-          {% for node in nodes %}
-          <option value="{{ node.id }}">{{node.id}}</option>
-          {% endfor %} {#
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-          #}
-        </select>
+        <div class="row no-gutters">
+          <div class="col-10 pb-2">
+            <select
+              class="form-select"
+              aria-label="Default select example"
+              onchange="selectNode(value);"
+              searchable="Search here"
+            >
+              <option selected>Select a Node by ID</option>
+              {% for node in nodes %}
+              <option value="{{ node.id }}">{{node.id}}</option>
+              {% endfor %} {#
+              <option value="2">Two</option>
+              <option value="3">Three</option>
+              #}
+            </select>
+          </div>
+          <div class="col-2 pb-2">
+            <button type="button" class="btn btn-primary btn-block" onclick="neighbourhoodHighlight({nodes: []});">Reset Selection</button>
+          <div>
+        </div>
       </div>
       {% endif %}
       <div id="mynetwork" class="card-body"></div>
@@ -248,6 +255,10 @@ <h1>{{heading}}</h1>
             network.on("click", neighbourhoodHighlight);
           {% endif %}
 
+          {% if select_menu %}
+            network.on("selectNode", neighbourhoodHighlight);
+          {% endif %}
+
           {% if tooltip_link %}
           // make a custom popup
           var popup = document.createElement("div");