Commit 612a138c authored by Fabien  MAREUIL's avatar Fabien MAREUIL
Browse files

help and ergonomy update

parent e5f16122
Pipeline #50606 passed with stages
in 24 minutes and 25 seconds
...@@ -167,19 +167,10 @@ Description: IPPI-DB targetcentric Theme ...@@ -167,19 +167,10 @@ Description: IPPI-DB targetcentric Theme
.dropdown:hover .dropbtn {background-color: #ddd;} .dropdown:hover .dropbtn {background-color: #ddd;}
a.infobulle{ .infobulle span{
color:#ccc;
}
a.infobulle:hover, a.infobulle:focus{
color:#17a2b8;
}
a.infobulle span{
position:absolute; position:absolute;
color:white; color:white;
margin-top:23px; bottom: 100%;
margin-left:0px;
background:rgba(0,0,0,.9); background:rgba(0,0,0,.9);
padding:15px; padding:15px;
border-radius:3px; border-radius:3px;
...@@ -190,7 +181,7 @@ a.infobulle span{ ...@@ -190,7 +181,7 @@ a.infobulle span{
z-index: 3; z-index: 3;
} }
a.infobulle:hover span, a.infobulle:focus span{ .infobulle:hover span, .infobulle:focus span{
transform:scale(1) rotate(0); transform:scale(1) rotate(0);
opacity:1; opacity:1;
} }
......
...@@ -366,18 +366,27 @@ function loadNGL(url, callback){ ...@@ -366,18 +366,27 @@ function loadNGL(url, callback){
// Handle window resizing // Handle window resizing
var divflex = createElement("div",{},{},"d-flex justify-content-between flex-row-reverse bd-highlight"); var divflex = createElement("div",{},{},"d-flex justify-content-between flex-row-reverse bd-highlight");
var divmultiButtonright = createElement("div",{role: "group"},{},"d-flex align-items-end flex-column"); var divmultiButtonright = createElement("div",{role: "group"},{},"d-flex align-items-end flex-column");
var divcavitiesButton = createElement("div",{role: "group"},{},"btn-group-vertical btn-group-sm btn-group-toggle p-2"); var divcavitiesButton = createElement("div",{role: "group"},{},"infobulle btn-group-vertical btn-group-sm btn-group-toggle p-2");
var spaninfocav = createElement("span", {}, {}, '');
spaninfocav.innerHTML = "Load a pocket detected with Volsite.";
divcavitiesButton.appendChild(spaninfocav);
divmultiButtonright.appendChild(divcavitiesButton); divmultiButtonright.appendChild(divcavitiesButton);
var divmultiButtoncenter = createElement("div",{},{}, "btn-group-vertical align-self-start"); var divmultiButtoncenter = createElement("div",{},{}, "btn-group-vertical align-self-start");
var divmultiButtonleft = createElement("div", {}, {}, "btn-group align-self-start"); var divmultiButtonleft = createElement("div", {}, {}, "btn-group align-self-start");
divflex.appendChild(divmultiButtonright); divflex.appendChild(divmultiButtonright);
divflex.appendChild(divmultiButtoncenter); divflex.appendChild(divmultiButtoncenter);
divflex.appendChild(divmultiButtonleft); divflex.appendChild(divmultiButtonleft);
var divslider = createElement("div", {}, {}, 'form-group border border-info rounded p-2'); var divslider = createElement("div", {}, {}, 'infobulle form-group border border-info rounded p-2');
var spaninfodrug = createElement("span", {}, {}, '');
spaninfodrug.innerHTML = "Predictive druggability have been determine by machine learning and are represented as volume. You can adjust with the slider the degrees of confidence in the predicted volume"
divslider.appendChild(spaninfodrug);
titledruggable = createElement("strong", {}, {}, ''); titledruggable = createElement("strong", {}, {}, '');
titledruggable.innerHTML = "Predictive Druggability"; titledruggable.innerHTML = "Predictive Druggability";
divslider.appendChild(titledruggable); divslider.appendChild(titledruggable);
var divsliderinteractibility = createElement("div", {}, {}, 'form-group border border-info rounded p-2 mr-2'); var divsliderinteractibility = createElement("div", {}, {}, 'infobulle form-group border border-info rounded p-2 mr-2');
var spaninfoint = createElement("span", {}, {"right":"50%"}, '');
spaninfoint.innerHTML = "Predictive interactibility have been determine by machine learning and are represented as volume. You can adjust with the slider the degrees of confidence in the predicted volume"
divsliderinteractibility.appendChild(spaninfoint);
titleinteractible = createElement("strong", {}, {}, ''); titleinteractible = createElement("strong", {}, {}, '');
titleinteractible.innerHTML = "Predictive Interactibility"; titleinteractible.innerHTML = "Predictive Interactibility";
divsliderinteractibility.appendChild(titleinteractible); divsliderinteractibility.appendChild(titleinteractible);
...@@ -701,5 +710,4 @@ function loadNGL(url, callback){ ...@@ -701,5 +710,4 @@ function loadNGL(url, callback){
addElement(stage, divflex) addElement(stage, divflex)
} }
}); });
}; };
\ No newline at end of file
...@@ -103,9 +103,10 @@ $.ajax({ ...@@ -103,9 +103,10 @@ $.ajax({
$(".loader").remove(); $(".loader").remove();
ippidb_plot.on('plotly_click', function(datapoints){ ippidb_plot.on('plotly_click', function(datapoints){
if (datapoints.event.button == 0) { if (datapoints.event.button == 0) {
if (datapoints.event.ctrlKey) { window.open(base_url + "/?pdbsearch=" + datapoints.points[0].text.split("-")[0], '_blank');
window.open(base_url + "/?pdbsearch=" + datapoints.points[0].text.split("-")[0], '_blank'); };
} else { });
ippidb_plot.on('plotly_hover', function(datapoints){
var curvenumber = datapoints.points[0].curveNumber - 1; var curvenumber = datapoints.points[0].curveNumber - 1;
var pointnumber = datapoints.points[0].pointNumber; var pointnumber = datapoints.points[0].pointNumber;
var colors = [repeatElement("#4e79a7", connect_ippidb[0].length), var colors = [repeatElement("#4e79a7", connect_ippidb[0].length),
...@@ -126,8 +127,6 @@ $.ajax({ ...@@ -126,8 +127,6 @@ $.ajax({
color: 'DarkSlateGrey'}, opacity: opacity[1]}}; color: 'DarkSlateGrey'}, opacity: opacity[1]}};
Plotly.restyle('myDiv', update_PL, 1); Plotly.restyle('myDiv', update_PL, 1);
Plotly.restyle('myDiv', update_HD, 2); Plotly.restyle('myDiv', update_HD, 2);
};
};
}); });
......
...@@ -65,7 +65,8 @@ ...@@ -65,7 +65,8 @@
<a class="next" onclick='plusSlides(1)'>&#10095;</a> <a class="next" onclick='plusSlides(1)'>&#10095;</a>
</div> </div>
</div> </div>
<div class="row background_choices" style="height:300px;"> <div class="background_choices">
<div class="row justify-content-center ml-2 mr-2" style="height:300px;">
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;"> <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card"> <div class="choices_background flip-card">
...@@ -165,7 +166,6 @@ ...@@ -165,7 +166,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;"> <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card"> <div class="choices_background flip-card">
<div class="flip-card-inner"> <div class="flip-card-inner">
...@@ -202,6 +202,70 @@ ...@@ -202,6 +202,70 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row justify-content-center ml-2 mr-2" style="height:300px;">
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="{% url 'cavities' %}">
<div style="top:30%; left:15%; position:absolute;">
<i class="fas fa-search fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Interrogate pockets database</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="{% url 'cavities' %}">
<div style="padding-top: 3.5em;">
<div class="choices_title">
Interrogate pockets database
</div>
<div class="choices_description">
Interrogate pockets database and explore pockets
descriptors, predictive interactibility and
druggability, tridimensional structures...
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3" style="padding: 10px;">
<div class="choices_background flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<a href="{% url 'networks' %}">
<div style="top:30%; left:15%; position:absolute;">
<i class="far fa-compass fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Navigate the PPI pocketome</p>
</div>
</a>
</div>
<div class="flip-card-back">
<a href="{% url 'networks' %}">
<div style="padding-top: 3.5em;">
<div class="choices_title">
Navigate the PPI pocketome
</div>
<div class="choices_description">Explore iPPI-DB
pocketome by navigating
within an interactive network.
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div> <div>
<div class="aklgmt_title"> <div class="aklgmt_title">
Aknowledgments Aknowledgments
......
...@@ -39,10 +39,19 @@ ...@@ -39,10 +39,19 @@
{% block breadcrumb %} <a href="{% url 'cavities' %}" class="breadNav-link">Query pockets</a> > Pocket {% endblock %} {% block breadcrumb %} <a href="{% url 'cavities' %}" class="breadNav-link">Query pockets</a> > Pocket {% endblock %}
</div> </div>
</nav> </nav>
<div> <div class="card mb-3">
<a href="{% url 'networks' %}"><strong>Explore the PPI pocketome</strong></a> <div class="card-header">
</div> <strong>Navigate the PPI pocketome</strong>
<div class="card"> </a>
</div>
<div class="card-body">
<p>Explore iPPI-DB pocketome by navigating within an interactive network.</p>
<a href="{% url 'networks' %}" class="btn btn-info">Go pocketome</a>
</div>
</div>
<div class="card mb-3">
<div class="card-header"><strong>Interrogate pockets database</strong></div>
<div class="card-body">
<div id="accordion"> <div id="accordion">
<div class="card"> <div class="card">
<div class="card-title" id="headingOne"> <div class="card-title" id="headingOne">
...@@ -103,9 +112,14 @@ ...@@ -103,9 +112,14 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{% if pdb_list %} {% if pdb_list %}
Search Pattern : {{ searchfield }}, {{ pdb_list.count }} result(s) <div class="card">
<div class="card-body"> <div class="card-header"><strong>Search results</strong></div>
<div class="card-body">
<div class="card-title">
<p>Search Pattern : {{ searchfield }}, {{ pdb_list.count }} result(s)</p>
</div>
<div class="row flex-row flex-nowrap" style="overflow-y: auto"> <div class="row flex-row flex-nowrap" style="overflow-y: auto">
{% for pdb in pdb_list %} {% for pdb in pdb_list %}
<div class="col-md-auto"> <div class="col-md-auto">
...@@ -124,6 +138,7 @@ ...@@ -124,6 +138,7 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<p>First pdb is loaded below</p>
<div class="mt-3 h5"> <div class="mt-3 h5">
<strong>{{ pdb_list.0.code }}</strong> <strong>{{ pdb_list.0.code }}</strong>
</br> </br>
...@@ -158,8 +173,11 @@ ...@@ -158,8 +173,11 @@
</div> </div>
<div class="row text-justify ml-3 mr-3"> <div class="row text-justify ml-3 mr-3">
<div class="col-8 text-wrap"> <div class="col-8 text-wrap">
The color gradient for the table is based on maximum and minimum PSI (Pocket Similarity Index) in the matrix. <p>The color gradient for the table is based on maximum and minimum PSI (Pocket Similarity Index) in the matrix.
PSI is given when you mouseover a pocket name. PSI is given when you mouseover a pocket name. </p>
<p>Table of descriptors for each pocket, detected by Volsite.
Click on <i class="far fa-plus-square"></i> icon to see closest pockets, based on the Pocket Similarity Index.
</p>
</div> </div>
<div class="col-4"> <div class="col-4">
<table class="gradiant"><tbody><tr> <table class="gradiant"><tbody><tr>
......
...@@ -36,9 +36,10 @@ ...@@ -36,9 +36,10 @@
<br><br>Vicinity network of PPI pockets (non-redundant): Same as above but by only considering similar pockets within proteins having a different Uniprot ID. <br><br>Vicinity network of PPI pockets (non-redundant): Same as above but by only considering similar pockets within proteins having a different Uniprot ID.
The purpose is this network is to highlight unforeseen vicinities within the PPI pocketome. The purpose is this network is to highlight unforeseen vicinities within the PPI pocketome.
<br> <br> <br> <br>
mouse left-click pocket to show closest pockets mouse hover pocket to show closest pockets
<br> <br>
mouse left-click + ctrl key on pocket to load details on protein (pockets, 3d structure, pockets descriptors...) mouse left-click on pocket to load details on protein (pockets, 3d structure, pockets descriptors...)
</span> </span>
</a> </a>
</p> </p>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment