add ability to d3 vis to live-update min-intersection requirement (#231)

if `include_min_intersection_selector=True` is passed to 
mapper.visualize,
then a number input is included at the top of the d3 vis which permits
changing the min_intersection req for edges (links) to be drawn.

Currently does not get saved in the downloadable config file.

Author: deargle

RELEASE.md

@@ -1,5 +1,12 @@
 # Release log
 
+
+## Unreleased
+
+### Added
+- ability to live-update the min-intersection threshold for edges on the d3 vis (#231)
+
+
 ## 2.0.1
 
 ### Fixed

kmapper/kmapper.py

@@ -578,6 +578,7 @@ def map(
             "perc_overlap": self.cover.perc_overlap,
             "clusterer": str(clusterer),
             "scaler": str(self.scaler),
+            "nerve_min_intersection": nerve.min_intersection
         }
         graph["meta_nodes"] = meta
 
@@ -639,6 +640,7 @@ def visualize(
         lens_names=None,
         nbins=10,
         include_searchbar=False,
+        include_min_intersection_selector=False
     ):
         """Generate a visualization of the simplicial complex mapper output. Turns the complex dictionary into a HTML/D3.js visualization
 
@@ -729,6 +731,10 @@ def visualize(
 
             To reset any search-induced visual alterations, submit an empty search query.
 
+        include_min_intersection_selector: bool, default False
+            Whether to include an input to dynamically change the min_intersection
+            for an edge to be drawn.
+
         Returns
         --------
         html: string
@@ -917,7 +923,7 @@ def visualize(
         )
 
         html = _render_d3_vis(
-            title, mapper_summary, histogram, mapper_data, colorscale, include_searchbar
+            title, mapper_summary, histogram, mapper_data, colorscale, include_searchbar, include_min_intersection_selector
         )
 
         if save_file:

kmapper/static/kmapper.js

@@ -206,12 +206,6 @@ function set_histogram(selection, data){
 var color_function_index = 0;
 var node_color_function_index = 0;
 
-function reset_color_functions(){
-  color_function_index = 0;
-  node_color_function_index = 0;
-  update_color_functions()
-}
-
 function update_color_functions(){
   // update_meta_content_histogram
   set_histogram(d3.select('#meta_content .histogram'), summary_histogram[node_color_function_index][color_function_index])
@@ -282,7 +276,7 @@ function start() {
   simulation.force('link').links(links);
   simulation.alpha(1).restart()
 
-  reset_color_functions()
+  update_color_functions()
 }
 
 init();
@@ -620,6 +614,89 @@ d3.select('#searchbar')
 
   })
 
+
+//https://stackoverflow.com/questions/51319147/map-default-value
+class MapWithDefault extends Map {
+  get(key) {
+    if (!this.has(key)) {
+      this.set(key, this.default())
+    };
+    return super.get(key);
+  }
+
+  constructor(defaultFunction, entries) {
+    super(entries);
+    this.default = defaultFunction;
+  }
+}
+
+d3.select('#min_intersction_selector')
+  .on('submit', function(event){
+    // replicates the logic in kmapper.nerve.GraphNerve.compute
+    event.preventDefault()
+
+    let result = new MapWithDefault(() => []);
+
+    // loop over all combinations of nodes
+    // https://stackoverflow.com/a/43241295/1396649
+    let candidates = []
+    let num_nodes = graph.nodes.length;
+    for (let i = 0; i < num_nodes - 1; i++){
+      for (let j = i + 1; j < num_nodes; j++) {
+        candidates.push([i, j]);
+      }
+    }
+
+    candidates.forEach(function(candidate) {
+      let node1_idx = candidate[0];
+      let node2_idx = candidate[1];
+      let node1 = graph.nodes[node1_idx];
+      let node2 = graph.nodes[node2_idx];
+      let intersection = node1.tooltip.custom_tooltips.filter(x => node2.tooltip.custom_tooltips.includes(x));
+      if (intersection.length >= Number(min_intersction_selector_input.property('value')) ) {
+        result.get(node1_idx).push(node2_idx)
+      }
+    })
+
+    let edges = []
+    result.forEach(function(value, key) {
+      let _edges = value.map(function(end) {
+        return [key, end]
+      })
+      edges.push(_edges);
+    })
+
+    edges = edges.flat().map(function(edge) {
+      return {
+        'source': edge[0],
+        'target': edge[1],
+        'width': 1
+      }
+    })
+
+    graph.links = edges;
+    restart()
+  })
+
+
+// Dynamically size the min_intersection_selector input
+let min_intersction_selector_input = d3.select('#min_intersction_selector input');
+
+min_intersction_selector_input
+  .on('input', function(event){
+    resizeInput.call(this)
+  })
+
+function resizeInput() {
+  this.style.width = ( this.value.length + 3 ) + "ch";
+}
+
+// Only trigger if input is present
+if (min_intersction_selector_input.size()) {
+  resizeInput.call(min_intersction_selector_input.node())
+}
+
+
 // Key press events
 let searchbar = d3.select('#searchbar input');
 
@@ -628,6 +705,7 @@ d3.select(window).on("keydown", function (event) {
     return; // Do nothing if the event was already processed
   }
 
+  // if searchbar is present and has focus
   if (searchbar.size() && searchbar.node().matches(':focus')){
       return; // let them use the search bar.
   }

kmapper/templates/toolbar.html

@@ -65,4 +65,15 @@ <h3>Node Color Function
     </div>
     {% endif %}
 
+    {% if include_min_intersection_selector %}
+    <div id='min_intersction_selector' class="tool_item">
+      <form>
+        <h3>Min Intersection Selector
+        <input type="number" min="1" value="{{ mapper_summary.custom_meta.nerve_min_intersection }}">
+        <button class='btn' type='submit'>Update</button>
+        </h3>
+      </form>
+    </div>
+    {% endif %}
+
 </div>

kmapper/visuals.py

@@ -550,7 +550,7 @@ def _format_tooltip(
 
 
 def _render_d3_vis(
-    title, mapper_summary, histogram, mapper_data, colorscale, include_searchbar
+    title, mapper_summary, histogram, mapper_data, colorscale, include_searchbar, include_min_intersection_selector
 ):
     # Find the module absolute path and locate templates
     module_root = os.path.join(os.path.dirname(__file__), "templates")
@@ -589,6 +589,7 @@ def np_encoder(object, **kwargs):
         js_text=js_text,
         css_text=css_text,
         include_searchbar=include_searchbar,
+        include_min_intersection_selector=include_min_intersection_selector
     )
 
     return html

test/test_visuals.py

@@ -393,6 +393,26 @@ def test_visualize_search_bar(self):
             include_searchbar=True,
         )
 
+    def test_visualize_min_intersection_selector(self):
+        """ convenience test for generating a vis with a min_intersection_selector
+        (and also with multiple color_values _and_ multiple node_color_values)"""
+        mapper = KeplerMapper()
+        data, labels = make_circles(1000, random_state=0)
+        lens = mapper.fit_transform(data, projection=[0])
+        graph = mapper.map(lens, data)
+        color_values = lens[:, 0]
+
+        cv1 = np.array(lens)
+        cv2 = np.flip(cv1)
+        cv = np.column_stack([cv1, cv2])
+        mapper.visualize(
+            graph,
+            color_values=cv,
+            node_color_function=["mean", "std"],
+            color_function_name=["hotdog", "hotdiggitydog"],
+            include_min_intersection_selector=True,
+        )
+
     def test_visualize_graph_with_cluster_stats_above_below(self):
         mapper = KeplerMapper()
         X = np.ones((1000, 3))