Floating detail panel

css/index.css

@@ -72,21 +72,21 @@ input:disabled+.text-for-disabled-input{
 .panel-group+#history-separator{
     display:initial;
 }
-#edamAccordion table    .label{
+.edam-details table    .label{
     font-size:inherit;
 }
-#edamAccordion ul{
+.edam-details ul{
     margin-bottom:0px;
     line-height:2;
 }
-#edamAccordion tbody.details th *[data-toggle="tooltip"]{
+.edam-details tbody.details th *[data-toggle="tooltip"]{
     cursor:default;
 }
 #tree {
     height:100%;
 }
 
-#edamAccordion table .details td a{
+.edam-details table .details td a{
     word-break: break-word;
     white-space: normal;
 }

index.html

@@ -194,6 +194,7 @@ <h1 id="pageTitle">EDAM ontology</h1>
                         <span class="on-controls-hover"><b for="meta_data_file">Data File<br/></b><span id="meta_data_file"></span></span>
                     </div>
                 </div>
+                <div class="tooltip"></div>
             </div>
         </div>
         <div class="col-xs-12 col-lg-4" id="edamAccordion">

js/tree-edam-stand-alone.js

@@ -203,26 +203,39 @@ function interactive_edam_browser(){
             setUrlParameters("");
         }
         $("#details-"+identifier).remove();
+        var details = build_detail_panel(d, uri, branch_of_term, identifier, true);
+        fill_detail_panel(d, uri, branch_of_term, identifier, details);
+        fill_community_panel(d, uri, branch_of_term, identifier, details);
+        append_detail_panel_to_edam_accordion(d, uri, branch_of_term, identifier, details);
+    }
+
+    function build_detail_panel (d, uri, branch_of_term, identifier, collapsed){
         details = "";
-        details += '<div class="panel-group" id="details-'+identifier+'">';
+        details += '<div class="panel-group edam-details" id="details-'+identifier+'">';
         details +=     '<div class="panel panel-default border-edam-'+branch_of_term+'">';
         details +=         '<div class="panel-heading xbg-edam-'+branch_of_term+'-light">';
         details +=             '<h4 class="panel-title">';
-        details +=                 '<a data-toggle="collapse" href="#collapse-'+identifier+'">Details of term "<span class="term-name-heading"></span>"</a> ';
+        details +=                 (collapsed?'<a data-toggle="collapse" href="#collapse-'+identifier+'">Details of term "':'');
+        details +=                 '<span class="term-name-heading"></span>';
+        details +=                 (collapsed?'"</a> ':'');
 //        details +=                 '<span class="label label-default bg-edam-'+branch_of_term+'-light border-one-solid fg-edam-'+branch_of_term+' border-edam-'+branch_of_term+'">'+branch_of_term+'</span>';
         details +=                 '<span>';
         details +=                 '<a title="edit this term" type="button" class="btn btn-default btn-xs pull-right" target="_blank" href="edit.html?term='+uri+'&branch='+current_branch+'"><span class="glyphicon glyphicon-pencil"></span></a>';
         details +=                 '<a title="add a child to this term" type="button" class="btn btn-default btn-xs pull-right" target="_blank" href="edit.html?parent='+uri+'&branch='+current_branch+'"><span class="glyphicon glyphicon-plus"></span></a>';
         details +=                 '</span>';
         details +=             '</h4>';
         details +=         '</div>';
-        details +=         '<div id="collapse-'+identifier+'" class="panel-collapse collapse">';
+        details +=         '<div id="collapse-'+identifier+'" '+(collapsed?'class="panel-collapse collapse">':'');
         details +=             '<div class="panel-body border-edam-'+branch_of_term+'"><table class="table table-condensed xborder-edam-'+branch_of_term+'"><tbody class="details"></tbody></table><table class="table table-condensed xborder-edam-'+branch_of_term+'"><tbody class="community"></tbody></table></div>';
         details +=         '</div>';
         details +=     '</div>';
         details += '</div>';
         details=$(details);
         details.find(".term-name-heading").text(d.data.text);
+        return details;
+    }
+
+    function fill_detail_panel (d, uri, branch_of_term, identifier, details){
         var table = details.find("tbody.details");
         table.children().remove();
         var table_parent = details.find("table").parent();
@@ -286,6 +299,9 @@ function interactive_edam_browser(){
             }
             }
         });
+    }
+
+    function fill_community_panel (d, uri, branch_of_term, identifier, details){
         var community = details.find("tbody.community");
         var caller_b=biotool_api().get_for(current_branch, d.data.text, uri, d);
         if (caller_b.is_enabled()){
@@ -375,6 +391,9 @@ function interactive_edam_browser(){
             community.parent().remove();
         }
         details.find('[data-toggle="tooltip"]').tooltip();
+    }
+
+    function append_detail_panel_to_edam_accordion (d, uri, branch_of_term, identifier, details){
         $("#edamAccordion").find(".panel-group").first().find(".collapse").collapse("hide");
         var length=$("#edamAccordion").find(".panel-group").length;
         if(length>0){
@@ -479,6 +498,19 @@ function interactive_edam_browser(){
         return id;
     }
 
+    function tooltipBuilder(d, tooltipContainer){
+        var uri=__my_interactive_tree.identifierAccessor()(d);
+        var branch_of_term = get_branch_of_term(uri);
+        var identifier=uri.substring(uri.lastIndexOf('/')+1)
+            .replace(/[^a-zA-Z_0-9]/g,'-')
+            .toLowerCase()
+            .replace(/[-]+/g,'-');
+        var details = build_detail_panel(d, uri, branch_of_term, identifier, false);
+        fill_detail_panel(d, uri, branch_of_term, identifier, details);
+        tooltipContainer.node().innerHTML = '';
+        $(tooltipContainer.node()).append(details);
+    }
+
     function metaInformationHandler(meta){
         if (typeof meta == "undefined"){
             $("#version").html("<i>n/a</i>");
@@ -630,6 +662,8 @@ function interactive_edam_browser(){
         .use_shift_to_add(false)
         .use_control_to_add(false)
         .use_alt_to_add(false)
+        .tooltipEnabled(true)
+        .tooltipBuilder(tooltipBuilder)
     ;
 
     /**

js/tree-reusable-d3.js

@@ -27,13 +27,14 @@ function interactive_tree() {
             return d.data.text;
         },
         elementEquality=function (e,f){return identifierAccessor(e)==identifierAccessor(f);},
-        tooltipBuilder=function(d) {
-            return  "<div class=\"panel panel-default card\"><div class=\"panel-heading\">"+
+        tooltipBuilder=function(d, tooltipContainer) {
+            var c = "<div class=\"panel panel-default card\"><div class=\"panel-heading\">"+
                     textAccessor(d)+
                     "</div>"+
                     "<div class=\"panel-body\">"+
                     "Identifier: "+identifierAccessor(d)+
                     "</div></div>";
+            tooltipContainer.html(c);
         },
         preTreatmentOfLoadedTree=function(tree){return  tree;},
         tooltipEnabled=false,
@@ -86,10 +87,15 @@ function interactive_tree() {
                 .call(zoom);
             var vis = svg.append("svg:g");
 
-            var tooltip = d3.select("body").append("div")
+            var tooltip = (d3.select("body").select("div.tooltip").empty()
+                            ?d3.select("body").append("div")
+                            :d3.select("body").select("div.tooltip")
+                           )
                 .attr("class", "tooltip")
                 .style("opacity", 0)
                 .on("mouseover", function(d) {
+                    if(tooltip.style("opacity")==0)
+                        return;
                     tooltip.transition()
                         .duration(200)
                         .style("opacity", 1);
@@ -100,7 +106,7 @@ function interactive_tree() {
                     .style("opacity", 0);
                     tooltip.transition()
                     .delay(200)
-                    .style("top",  "-200px");
+                    .style("top",  "-2000px");
                 });
 
             reset = function(){
@@ -177,14 +183,15 @@ function interactive_tree() {
                     })
                     .on("mouseover", function(d) {
                         if (!tooltipEnabled) return;
+                        tooltipBuilder(d, tooltip);
                         tooltip
+                            .interrupt()
                             .transition()
                             .duration(200)
                             .style("opacity", 1);
                         tooltip
-                            .html(tooltipBuilder(d))
-                            .style("left", (d3.event.pageX+20) + "px")
-                            .style("top", (d3.event.pageY - 28) + "px");
+                            .style("left", (d3.event.layerX+20) + "px")
+                            .style("top", (d3.event.layerY-5) + "px");
                     })
                     .on("mouseout", function(d) {
                             tooltip
@@ -194,7 +201,7 @@ function interactive_tree() {
                             tooltip
                                 .transition()
                                 .delay(200)
-                                .style("top",  "-200px");
+                                .style("top",  "-2000px");
                     });
 
                 // UPDATE