Option to render line weight to reflect bio.tools usage

[joncison]

I first heard this idea from @hmenager I think.

It would be worth experimenting with (an option to render) line weights according to the bio.tools term usage, i.e. the weight of a line from termA to termB would reflect the usage of termA and all it's kids.

The use-case here is using EDAM-Browser to optimise EDAM during refactorings, i.e. we'd benefit greatly from a visually immediately obvious rendering of term usage.

[bryan-brancotte]

need #20 first

[bryan-brancotte]

Now that we have options buttons on the right of the tree, if this function is implemented, it should be optional and save into storage

[bryan-brancotte]

Here is a way it could be done, line are weigthed only with the term usage, not its descendant, so not very usefull, anyway the goal of this comment if to show how it could have been done

diff --git a/css/tree-reusable-d3.css b/css/tree-reusable-d3.css
index 62a957e..563bca4 100644
--- a/css/tree-reusable-d3.css
+++ b/css/tree-reusable-d3.css
@@ -23,13 +23,11 @@ text.selected{
 path.link {
     fill: none;
     stroke: #ccc;
-    stroke-width: 1.5px;
 }
 
 path.link.selected {
     fill: none;
     stroke: #494;
-    stroke-width: 3px;
 }
 
 div.tooltip {
diff --git a/js/tree-edam-stand-alone.js b/js/tree-edam-stand-alone.js
index 776d4cb..8e20011 100644
--- a/js/tree-edam-stand-alone.js
+++ b/js/tree-edam-stand-alone.js
@@ -417,6 +417,7 @@ function interactive_edam_browser(){
                      '</span>').appendTo(elt);
                     if(has_descendants){
                         caller_b.count_with_descendants(function (count){
+                            browser.interactive_tree().cmd().refresh();
                             $('#details-'+identifier+' .'+id_b+'-dsc-i .hit').text(count.input.total);
                             $('#details-'+identifier+' .'+id_b+'-dsc-i.dscd').attr("title",count.input.total+" times with its "+(count.input.descendants-1)+" descendants");
                             $('#details-'+identifier+' .'+id_b+'-dsc-o .hit').text(count.output.total);
@@ -428,6 +429,7 @@ function interactive_edam_browser(){
                     if(has_descendants){
                         $('<span class="'+id_b+'-descendants dscd" title="loading"> (<i class="far fa-plus-square"></i> <span class="hit">?</span>)</span>').appendTo(elt);
                         caller_b.count_with_descendants(function (count){
+                            browser.interactive_tree().cmd().refresh();
                             $('#details-'+identifier+' .'+id_b+'-descendants .hit').text(count.total);
                             $('#details-'+identifier+' .'+id_b+'-descendants.dscd').attr("title",count.total+" times with its "+(count.descendants-1)+" descendants");
                         });
diff --git a/js/tree-reusable-d3.js b/js/tree-reusable-d3.js
index dd0a1c1..3b8e9fa 100644
--- a/js/tree-reusable-d3.js
+++ b/js/tree-reusable-d3.js
@@ -300,7 +300,10 @@ var interactive_tree = function() {
 
                 // Update the links…
                 var link = vis.selectAll("path.link")
-                    .data(links, function(d) { return d.__d3js_id; });
+                    .data(links, function(d) { return d.__d3js_id; })
+                    .attr("stroke-width", function(d) {
+                        return (Math.min(10,Math.max(1.5,Math.log(Math.sqrt(d.__biotool_api_count)))) || 1.5)+"px";
+                    });
 
                 // Transition exiting nodes to the parent's new position.
 
@@ -770,6 +773,15 @@ var interactive_tree = function() {
       cmd.moveElementsIntoView = function (elements) {
         moveElementsIntoView(elements);
     };
+    /**
+     * Force refresh of all the tree starting from the node passed in arguments
+     * @param {string} identifier - the element identifier to refresh from. if not the root node is used
+     * @return cmd() itself
+     */
+    cmd.refresh = function (identifier, status, andExpand) {
+        update(identifierToElement[identifier] || root);
+        return cmd;
+    };
 
     // getter and setter functions. See Mike Bostocks post "Towards Reusable Charts" for a tutorial on how this works.
     chart.cmd = cmd;