diff --git a/css/index.css b/css/index.css index 78a8e7a5..461b7463 100644 --- a/css/index.css +++ b/css/index.css @@ -32,12 +32,6 @@ .header-icon>* { margin-right:1em; } -.d-flex { - display: flex; -} -.flex-column{ - flex-direction: column; -} .loader-wrapper{ width: 100%; height: 100%; @@ -72,22 +66,24 @@ 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{ - word-break: break-word; +.edam-details table .details td, +.edam-details table .details td a{ + overflow-wrap: anywhere; + word-break: normal; white-space: normal; } @@ -143,13 +139,18 @@ a:before { margin-bottom: 1em; } .tree-controls .tree-control-element, +.tree-controls button.btn:active, +.tree-controls button.btn:focus:active, .tree-controls button.btn{ + padding: 6px 12px; + border-radius: 4px; border-width: 0; color: white; background: #000000c3; min-width:3em; border-bottom-right-radius: 0; border-top-right-radius: 0; + display: inline-block; } .tree-controls .tree-controls-group>*:not(:first-child) button.no-on-controls-hover, .tree-controls .tree-controls-group>*:not(:first-child) button:not(:hover){ @@ -173,6 +174,20 @@ a:before { .tree-controls .tree-control-element a:hover { color: #5c9ad1; } +.tree-control-element input[type="checkbox"]{ + display:none; +} +.tree-control-element input[type="checkbox"]:checked+span:before{ + content: "\f205"; +} +.tree-control-element input[type="checkbox"]+span:before{ + content: "\f204"; + font-family: 'Font Awesome 5 Free'; +} +.tree-control-element label{ + cursor: pointer; + margin-bottom:0; +} body { overflow-x: hidden; } @@ -190,4 +205,14 @@ body { display:none; } } +/*boostrap 4 like classes*/ +.p-0{ + padding:0 !important; +} +.d-flex { + display: flex; +} +.flex-column{ + flex-direction: column; +} /*end of file*/ diff --git a/css/tree-reusable-d3.css b/css/tree-reusable-d3.css index 20b466f3..62a957ec 100644 --- a/css/tree-reusable-d3.css +++ b/css/tree-reusable-d3.css @@ -34,7 +34,8 @@ path.link.selected { div.tooltip { position: absolute; - width:300px; + width: 20vw; + min-width:300px; } .node text{ stroke: #FFFA; diff --git a/index.html b/index.html index addba5ba..3ce391dc 100644 --- a/index.html +++ b/index.html @@ -182,6 +182,28 @@

EDAM ontology

onclick="toggleFullscreen();" >Exit Full Screen +
+
+
+ Settings
 + + + +
+
+
@@ -194,6 +216,7 @@

EDAM ontology

Data File
+
diff --git a/js/tree-edam-stand-alone.js b/js/tree-edam-stand-alone.js index 23660369..71563715 100644 --- a/js/tree-edam-stand-alone.js +++ b/js/tree-edam-stand-alone.js @@ -203,12 +203,21 @@ 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 += '
'; + details += '
'; details += '
'; details += '
'; details += '

'; - details += 'Details of term "" '; + details += (collapsed?'Details of term "':''); + details += ''; + details += (collapsed?'" ':''); // details += ''+branch_of_term+''; details += ''; details += ''; @@ -216,13 +225,17 @@ function interactive_edam_browser(){ details += ''; details += '

'; details += '
'; - details += '
'; + details += '
'; details += '
'; details += '
'; details += '
'; details += '
'; 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,30 @@ function interactive_edam_browser(){ return id; } + function tooltipBuilder(d, tooltipContainer){ + tooltipContainer.node().innerHTML = ''; + if ($("#tree-and-controls:not(:fullscreen)").length && + $("input[name='show-tooltip-only-full-screen']:checked").length) + return; + 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); + if ($("input[name='show-detail']:checked").length) + fill_detail_panel(d, uri, branch_of_term, identifier, details); + else + details.find("tbody.details").parent().remove(); + if ($("input[name='show-community-usage']:checked").length) + fill_community_panel(d, uri, branch_of_term, identifier, details); + else + details.find("tbody.community").parent().remove(); + details.find(".panel-body:empty").remove(); + $(tooltipContainer.node()).append(details); + } + function metaInformationHandler(meta){ if (typeof meta == "undefined"){ $("#version").html("n/a"); @@ -630,6 +673,8 @@ function interactive_edam_browser(){ .use_shift_to_add(false) .use_control_to_add(false) .use_alt_to_add(false) + .tooltipEnabled(true) + .tooltipBuilder(tooltipBuilder) ; /** diff --git a/js/tree-reusable-d3.js b/js/tree-reusable-d3.js index 2141edbd..d1e2b18f 100644 --- a/js/tree-reusable-d3.js +++ b/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 "
"+ + tooltipBuilder=function(d, tooltipContainer) { + var c = "
"+ textAccessor(d)+ "
"+ "
"+ "Identifier: "+identifierAccessor(d)+ "
"; + tooltipContainer.html(c); }, preTreatmentOfLoadedTree=function(tree){return tree;}, tooltipEnabled=false, @@ -86,10 +87,13 @@ function interactive_tree() { .call(zoom); var vis = svg.append("svg:g"); - var tooltip = d3.select("body").append("div") + var body = d3.select("body"); + var tooltip = (body.select("div.tooltip").empty() ? body.append("div") : 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 +104,7 @@ function interactive_tree() { .style("opacity", 0); tooltip.transition() .delay(200) - .style("top", "-200px"); + .style("top", "-2000px"); }); reset = function(){ @@ -177,14 +181,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 +199,7 @@ function interactive_tree() { tooltip .transition() .delay(200) - .style("top", "-200px"); + .style("top", "-2000px"); }); // UPDATE