Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
ippisite/ippidb/static/css/targetcentric.css
View file @ 612a138c
......@@ -167,19 +167,10 @@ Description: IPPI-DB targetcentric Theme
.dropdown:hover .dropbtn {background-color: #ddd;}
a.infobulle{
color:#ccc;
}
a.infobulle:hover, a.infobulle:focus{
color:#17a2b8;
}
a.infobulle span{
.infobulle span{
position:absolute;
color:white;
margin-top:23px;
margin-left:0px;
color:white;
bottom: 100%;
background:rgba(0,0,0,.9);
padding:15px;
border-radius:3px;
......@@ -190,7 +181,7 @@ a.infobulle span{
z-index: 3;
}
a.infobulle:hover span, a.infobulle:focus span{
.infobulle:hover span, .infobulle:focus span{
transform:scale(1) rotate(0);
opacity:1;
}
......
ippisite/ippidb/static/js/targetcentric.js
View file @ 612a138c
......@@ -366,18 +366,27 @@ function loadNGL(url, callback){
// Handle window resizing
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 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);
var divmultiButtoncenter = createElement("div",{},{}, "btn-group-vertical align-self-start");
var divmultiButtonleft = createElement("div", {}, {}, "btn-group align-self-start");
divflex.appendChild(divmultiButtonright);
divflex.appendChild(divmultiButtoncenter);
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.innerHTML = "Predictive Druggability";
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.innerHTML = "Predictive Interactibility";
divsliderinteractibility.appendChild(titleinteractible);
......@@ -701,5 +710,4 @@ function loadNGL(url, callback){
addElement(stage, divflex)
}
});
};
};
\ No newline at end of file
ippisite/ippidb/static/js/targetcentrict_networks.js
View file @ 612a138c
......@@ -103,9 +103,10 @@ $.ajax({
$(".loader").remove();
ippidb_plot.on('plotly_click', function(datapoints){
if (datapoints.event.button == 0) {
if (datapoints.event.ctrlKey) {
window.open(base_url + "/?pdbsearch=" + datapoints.points[0].text.split("-")[0], '_blank');
} else {
window.open(base_url + "/?pdbsearch=" + datapoints.points[0].text.split("-")[0], '_blank');
};
});
ippidb_plot.on('plotly_hover', function(datapoints){
var curvenumber = datapoints.points[0].curveNumber - 1;
var pointnumber = datapoints.points[0].pointNumber;
var colors = [repeatElement("#4e79a7", connect_ippidb[0].length),
......@@ -126,8 +127,6 @@ $.ajax({
color: 'DarkSlateGrey'}, opacity: opacity[1]}};
Plotly.restyle('myDiv', update_PL, 1);
Plotly.restyle('myDiv', update_HD, 2);
};
};
});
......
ippisite/ippidb/templates/index.html
View file @ 612a138c
......@@ -65,7 +65,8 @@
<a class="next" onclick='plusSlides(1)'>&#10095;</a>
</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="choices_background flip-card">
......@@ -165,7 +166,6 @@
</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">
......@@ -202,6 +202,70 @@
</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 class="aklgmt_title">
Aknowledgments
......
ippisite/ippidb/templates/targetcentric.html
View file @ 612a138c
......@@ -39,10 +39,19 @@
{% block breadcrumb %} <a href="{% url 'cavities' %}" class="breadNav-link">Query pockets</a> > Pocket {% endblock %}
</div>
</nav>
<div>
<a href="{% url 'networks' %}"><strong>Explore the PPI pocketome</strong></a>
</div>
<div class="card">
<div class="card mb-3">
<div class="card-header">
<strong>Navigate the PPI pocketome</strong>
</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 class="card">
<div class="card-title" id="headingOne">
......@@ -103,9 +112,14 @@
</div>
</div>
</div>
</div>
{% if pdb_list %}
Search Pattern : {{ searchfield }}, {{ pdb_list.count }} result(s)
<div class="card-body">
<div class="card">
<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">
{% for pdb in pdb_list %}
<div class="col-md-auto">
......@@ -124,6 +138,7 @@
</div>
{% endfor %}
</div>
<p>First pdb is loaded below</p>
<div class="mt-3 h5">
<strong>{{ pdb_list.0.code }}</strong>
</br>
......@@ -158,8 +173,11 @@
</div>
<div class="row text-justify ml-3 mr-3">
<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.
PSI is given when you mouseover a pocket name.
<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. </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 class="col-4">
<table class="gradiant"><tbody><tr>
......
ippisite/ippidb/templates/targetcentric_networks.html
View file @ 612a138c
......@@ -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.
The purpose is this network is to highlight unforeseen vicinities within the PPI pocketome.
<br> <br>
mouse left-click pocket to show closest pockets
mouse hover pocket to show closest pockets
<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>
</a>
</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