Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Floating detail panel #175

Merged
merged 20 commits into from
May 6, 2021
Merged

Floating detail panel #175

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
0551467
use an edam-details css class instead of html id
bryan-brancotte May 5, 2021
afd2ed8
Provide the html element instead of returning html content
bryan-brancotte May 5, 2021
6199214
split standAloneSelectedElementHandler in multiple function in order …
bryan-brancotte May 5, 2021
fb4e286
get or create div.tooltip, place it inside tree-and-controls WIP #167
bryan-brancotte May 5, 2021
e46becb
bugfix, prevent re-appearing of the tooltip when move up failed, WIP …
bryan-brancotte May 5, 2021
cf9f9c2
bugfix: prevent transition collision between showing and hiding, WIP …
bryan-brancotte May 5, 2021
e8b11b9
enable tooltip, use detail panel, WIP #167
bryan-brancotte May 5, 2021
5a8e4b0
allows line break before '?' and add comments to prevent misunderstan…
bryan-brancotte May 5, 2021
19b3ff3
bugfix, forgotten closing >
bryan-brancotte May 6, 2021
e2af173
show tooltip only when requested on in full screen
bryan-brancotte May 6, 2021
6939fb5
configurable content of the tooltip, WIP #167
bryan-brancotte May 6, 2021
5283338
enlarge tooltip when possible as it has more content, WIP #167
bryan-brancotte May 6, 2021
f7aa48e
regroup bootstrap css class, add p-0 bootstrap class
bryan-brancotte May 6, 2021
aa280bf
set padding and border as it is defined in .btn
bryan-brancotte May 6, 2021
360c0b0
bugfix when btn was right-click css did not applied
bryan-brancotte May 6, 2021
3ab74db
configurable tooltip in tree controls, WIP #167
bryan-brancotte May 6, 2021
68ce87a
fixing jshint
bryan-brancotte May 6, 2021
12b6e59
fixing UI glitch
bryan-brancotte May 6, 2021
d4100de
break not only links as other fields can have json-ld content (cf neu…
bryan-brancotte May 6, 2021
2d8d8fb
get or create div.tooltip, improving readability
bryan-brancotte May 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 32 additions & 10 deletions css/index.css
View file
Open in desktop
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,21 +66,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;
}
Expand Down Expand Up @@ -143,7 +137,11 @@ 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;
Expand Down Expand Up @@ -173,6 +171,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 +202,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
Open in desktop
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;
bryan-brancotte marked this conversation as resolved.
Show resolved Hide resolved
min-width:300px;
}
.node text{
stroke: #FFFA;
Expand Down
23 changes: 23 additions & 0 deletions index.html
View file
Open in desktop
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
Open in desktop
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
24 changes: 16 additions & 8 deletions js/tree-reusable-d3.js
View file
Open in desktop
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,16 @@ function interactive_tree() {
.call(zoom);
var vis = svg.append("svg:g");

var tooltip = d3.select("body").append("div")
/* jshint -W014 */
var tooltip = (d3.select("body").select("div.tooltip").empty() /* if no div.tooltip*/
?d3.select("body").append("div") /* then create one */
:d3.select("body").select("div.tooltip") /* otherwise use existing 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 +107,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 +184,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 +202,7 @@ function interactive_tree() {
tooltip
.transition()
.delay(200)
.style("top", "-200px");
.style("top", "-2000px");
});

// UPDATE
Expand Down