Skip to content

Commit

Permalink
Merge pull request #175 from edamontology/floating-detail-panel
Browse files Browse the repository at this point in the history 
Floating detail panel
  • Loading branch information
@bryan-brancotte
bryan-brancotte authored May 6, 2021
2 parents 106d5f9 + 2d8d8fb commit 5e65111
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 23 deletions.
47 changes: 36 additions & 11 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,6 @@
.header-icon>* {
margin-right:1em;
}
.d-flex {
display: flex;
}
.flex-column{
flex-direction: column;
}
.loader-wrapper{
width: 100%;
height: 100%;
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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){
Expand All @@ -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;
}
Expand All @@ -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*/
3 changes: 2 additions & 1 deletion css/tree-reusable-d3.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ path.link.selected {

div.tooltip {
position: absolute;
width:300px;
width: 20vw;
min-width:300px;
}
.node text{
stroke: #FFFA;
Expand Down
23 changes: 23 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,28 @@ <h1 id="pageTitle">EDAM ontology</h1>
onclick="toggleFullscreen();" ><i class="fas fa-compress" aria-hidden="true"></i><span class="on-controls-hover" >Exit Full Screen</span>
</button>
</div>
<div class="tree-controls-group">
<div>
<div class="tree-control-element text-left">
<i class="fas fa-cogs"></i><span class="on-controls-hover p-0"><b> Settings</b><br/></span>
<label class="on-controls-hover p-0">
<input type="checkbox" name="show-tooltip-only-full-screen" checked="checked"/>
<span></span>
<span title="Always show tooltips otherwise">Show tooltips only in full screen</span><br/>
</label>
<label class="on-controls-hover p-0">
<input type="checkbox" name="show-detail" checked="checked"/>
<span></span>
Show details in tooltip<br/>
</label>
<label class="on-controls-hover p-0">
<input type="checkbox" name="show-community-usage"/>
<span></span>
Show community usage in tooltip<br/>
</label>
</div>
</div>
</div>
</div>
<div class="tree-controls tree-controls-right-bottom">
<div class="tree-control-element meta-info">
Expand All @@ -194,6 +216,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">
Expand Down
51 changes: 48 additions & 3 deletions js/tree-edam-stand-alone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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()){
Expand Down Expand Up @@ -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){
Expand Down Expand Up @@ -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("<i>n/a</i>");
Expand Down Expand Up @@ -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)
;

/**
Expand Down
21 changes: 13 additions & 8 deletions js/tree-reusable-d3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -100,7 +104,7 @@ function interactive_tree() {
.style("opacity", 0);
tooltip.transition()
.delay(200)
.style("top", "-200px");
.style("top", "-2000px");
});

reset = function(){
Expand Down Expand Up @@ -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
Expand All @@ -194,7 +199,7 @@ function interactive_tree() {
tooltip
.transition()
.delay(200)
.style("top", "-200px");
.style("top", "-2000px");
});

// UPDATE
Expand Down

0 comments on commit 5e65111

Please sign in to comment.