Skip to content

GitLab

Commit bf42ceaf authored by Fabien MAREUIL's avatar Fabien MAREUIL
Browse files

interface update, fix typo, and new homepage

parent 339798db
Pipeline #50856 passed with stages
in 26 minutes and 15 seconds
Expand all Hide whitespace changes
Inline Side-by-side
ippisite/ippidb/static/js/ngl.js
View file @ bf42ceaf
This diff is collapsed.
ippisite/ippidb/static/js/targetcentric.js
View file @ bf42ceaf
......@@ -368,7 +368,7 @@ function loadNGL(url, callback){
var divmultiButtonright = createElement("div",{role: "group"},{},"d-flex align-items-end flex-column");
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.";
spaninfocav.innerHTML = "Load a pocket detected with Volsite (Desaphy et al., 2012).";
divcavitiesButton.appendChild(spaninfocav);
divmultiButtonright.appendChild(divcavitiesButton);
var divmultiButtoncenter = createElement("div",{},{}, "btn-group-vertical align-self-start");
......@@ -378,17 +378,17 @@ function loadNGL(url, callback){
divflex.appendChild(divmultiButtonleft);
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"
spaninfodrug.innerHTML = "Druggability has been determined by our Deep Learning tool InDeep and are represented as isolevel probabilities, which you can adjust with the slider (0,1)."
divslider.appendChild(spaninfodrug);
titledruggable = createElement("strong", {}, {}, '');
titledruggable.innerHTML = "Predictive Druggability";
titledruggable.innerHTML = "Predicted druggablility";
divslider.appendChild(titledruggable);
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"
spaninfoint.innerHTML = "Interactability has been determined by our Deep Learning tool InDeep and are represented as isolevel probabilities, which you can adjust with the slider (0,1)."
divsliderinteractibility.appendChild(spaninfoint);
titleinteractible = createElement("strong", {}, {}, '');
titleinteractible.innerHTML = "Predictive Interactibility";
titleinteractible.innerHTML = "Predicted Interactability";
divsliderinteractibility.appendChild(titleinteractible);
divmultiButtonleft.appendChild(divsliderinteractibility);
divmultiButtonleft.appendChild(divslider);
......@@ -419,7 +419,7 @@ function loadNGL(url, callback){
hasinteract = 1;
var labelsliderinterac = createElement("label", {}, {}, "", {'for':'isolevel' + chain.pdb_chain_id});
labelsliderinterac.innerHTML = 'Adjust predictive interactibility surface on chain ' + chain.pdb_chain_id;
labelsliderinterac.innerHTML = 'Adjust predicted interactability surface on chain ' + chain.pdb_chain_id;
divchain.appendChild(labelsliderinterac);
divchain.appendChild(createElement('br'));
var divdropdowninterac = createElement("div",{},{},"dropdown");
......@@ -500,7 +500,7 @@ function loadNGL(url, callback){
var labelslider = createElement("label", {}, {}, "", {'for':'isolevel' + chain.pdb_chain_id});
labelslider.innerHTML = 'Adjust predictive surface druggable on chain ' + chain.pdb_chain_id;
labelslider.innerHTML = 'Adjust predicted druggability surface on chain ' + chain.pdb_chain_id;
var divvalueslider = createElement("div", {}, {}, "", {'id': 'valueisolevel' + chain.pdb_chain_id});
divvalueslider.innerHTML = 'current value: '+ chain.default_isolevel
divchainmrc.appendChild(labelslider);
......@@ -690,7 +690,8 @@ function loadNGL(url, callback){
var backgroundcolorButton = createElement("button", {
onclick: function () {
if (stage.parameters.backgroundColor.value == 'white'){
/* old ngl version use stage.parameters.backgroundColor.value */
if (stage.parameters.backgroundColor == 'white'){
stage.setParameters({backgroundColor: 'black'});
} else {
stage.setParameters({backgroundColor: 'white'});
......
ippisite/ippidb/static/js/targetcentrict_networks.js
View file @ bf42ceaf
......@@ -17,13 +17,13 @@ var node_trace = function(nodes, edges) {
if (nodes[i].type == "PL"){
x_PL.push(nodes[i].coord[0]);
y_PL.push(nodes[i].coord[1]);
text_PL.push(nodes[i].name + " # of connections: " + nodes[i].num_connect);
text_PL.push(nodes[i].name + "</br>" + nodes[i].num_connect + " connections");
size_PL.push((Math.log10(nodes[i].num_connect)+1)*8);
colors_PL.push('#4e79a7')
} else {
x_HD.push(nodes[i].coord[0]);
y_HD.push(nodes[i].coord[1]);
text_HD.push(nodes[i].name + " # of connections: " + nodes[i].num_connect);
text_HD.push(nodes[i].name + "</br>" + nodes[i].num_connect + " connections");
size_HD.push((Math.log10(nodes[i].num_connect)+1)*8);
colors_HD.push('#de425b')
};
......@@ -68,7 +68,7 @@ var node_trace = function(nodes, edges) {
name: 'Link',
visible: 'legendonly'
};
return [trace_edges, trace_PL, trace_HD, dict_nodes, [size_PL, size_HD]]
return [trace_PL, trace_HD, trace_edges, dict_nodes, [size_PL, size_HD]]
};
var pathurl = window.location.pathname.split( '/' );
......@@ -99,7 +99,7 @@ $.ajax({
};
var ippidb_plot = document.getElementById('myDiv');
Plotly.newPlot('myDiv', [data[0], data[1], data[2]], layout, {scrollZoom: true});
Plotly.newPlot('myDiv', [data[2], data[0], data[1]], layout, {scrollZoom: true});
$(".loader").remove();
ippidb_plot.on('plotly_click', function(datapoints){
if (datapoints.event.button == 0) {
......
ippisite/ippidb/templates/index.html
View file @ bf42ceaf
......@@ -262,7 +262,7 @@
<i class="fas fa-search fa-4x"></i>
<p
style="font-family: BrandonGrotesqueReg; margin-top: 20px;">
Interrogate pockets database</p>
Query the pocket database</p>
</div>
</a>
</div>
......@@ -270,10 +270,10 @@
<a href="{% url 'cavities' %}">
<div class="back-vertical-align">
<div class="choices_title">
Interrogate pockets database
Query the pocket database
</div>
<div class="choices_description">
Interrogate pockets database and explore pockets
Query the pocket database and explore pocket
descriptors, predictive interactibility and
druggability, tridimensional structures...
</div>
......@@ -302,8 +302,8 @@
<div class="choices_title">
Navigate the PPI pocketome
</div>
<div class="choices_description">Explore iPPI-DB
pocketome by navigating
<div class="choices_description">Explore the iPPI-DB
heterodimer pocketome by navigating
within an interactive network.
</div>
</div>
......
ippisite/ippidb/templates/targetcentric.html
View file @ bf42ceaf
......@@ -46,11 +46,11 @@
</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>
<a href="{% url 'networks' %}" class="btn btn-info">Go to pocketome</a>
</div>
</div>
<div class="card mb-3">
<div class="card-header"><strong>Interrogate pockets database</strong></div>
<div class="card-header"><strong>Query the pocket database</strong></div>
<div class="card-body">
<div id="accordion">
<div class="card">
......@@ -95,7 +95,7 @@
</div>
<div class="row form-group">
<div class="col">
<input id="id_ligandcode" name="ligandcode" class="form-control" type="text" placeholder="Ligand code 3 letters">
<input id="id_ligandcode" name="ligandcode" class="form-control" type="text" placeholder="3 letter code ligands">
</div>
<div class="col">
<input id="id_organism" name="organism" class="form-control" type="text" placeholder="Organism name">
......@@ -175,7 +175,7 @@
<div class="col-8 text-wrap">
<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.
<p>Table of descriptors for each pocket, detected by Volsite (Desaphy et al., 2012).
Click on <i class="far fa-plus-square"></i> icon to see closest pockets, based on the Pocket Similarity Index.
</p>
</div>
......@@ -441,6 +441,10 @@
</div>
<!--</div>-->
</div>
<div class="link-publication ml-4 mr-4"><a href="https://doi.org/10.1021/ci300184x" target="_blank">
<i>Desaphy J, Azdimousa K, Kellenberger E, Rognan D.</i> Comparison and druggability prediction of protein-ligand binding sites from pharmacophore-annotated cavity shapes. J Chem Inf Model. 2012 Aug 27;52(8):2287-99.
</a></div>
{% endif %}
</div>
</div>
......
ippisite/ippidb/templates/targetcentric_networks.html
View file @ bf42ceaf
......@@ -32,14 +32,14 @@
<p>
<a class="infobulle" href='#'>
<i class="fas fa-question-circle fa-2x m-1 mt-3"></i>
<span>Vicinity network of the PPI pocketome: Displays pockets having a pocket similarity index (PSI) with at least one other pocket above 0.65
<span>Vicinity network of the PPI pocketome: Displays pockets having a pocket similarity index (PSI) with at least one other pocket above 0.65.
<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 hover pocket to show closest pockets
<i>mouse hover pocket to show closest pockets
<br>
mouse left-click on pocket to load details on protein (pockets, 3d structure, pockets descriptors...)
</i>
</span>
</a>
</p>
......
Markdown is supported
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