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

update interface + typo

parent d25dd8ec
Pipeline #51329 failed with stages
in 15 minutes and 42 seconds
......@@ -124,6 +124,7 @@ class ChainSerializer(serializers.ModelSerializer):
"default_isolevel",
"interactfile_set",
)
ordering = ["pdb_chain_id"]
class LigandSerializer(serializers.ModelSerializer):
......
......@@ -134,7 +134,10 @@ Description: IPPI-DB targetcentric Theme
.dropbtn {
font-size: 14px;
color: #007bff
color: #2D96FA;
border-radius: 5px;
border-color: #97ADB5;
background-color: #eff3f5;
}
.dropdown {
......@@ -145,12 +148,16 @@ Description: IPPI-DB targetcentric Theme
.dropdown-content {
display: none;
position: absolute;
bottom: 24px;
left: 14px;
background-color: #f1f1f1;
bottom: 22px;
left: 12px;
background-color: #eff3f5;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
z-index: 3;
border-radius: 5px;
border-color: #97adb5 !important;
border: 2px;
border-style: solid;
}
.dropdown-content a {
......@@ -161,11 +168,18 @@ Description: IPPI-DB targetcentric Theme
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown-content a:hover {
background-color: #d3dee2;
color: black;
border-radius: 5px;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ddd;}
.dropdown:hover .dropbtn {
background-color: #d3dee2;
color: black;
}
.infobulle span{
position:absolute;
......
......@@ -378,14 +378,14 @@ 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 = "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)."
spaninfodrug.innerHTML = "Druggability has been determined by our Deep Learning tool InDeep learning on protein/ligand complexes/interactions. They are represented as isolevel probabilities, which you can adjust with the slider (0,1)."
divslider.appendChild(spaninfodrug);
titledruggable = createElement("strong", {}, {}, '');
titledruggable.innerHTML = "Predicted druggablility";
titledruggable.innerHTML = "Predicted druggability";
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 = "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)."
spaninfoint.innerHTML = "Interactability has been determined by our Deep Learning tool InDeep learning on heterodimers complexes/interactions. They are represented as isolevel probabilities, which you can adjust with the slider (0,1)."
divsliderinteractibility.appendChild(spaninfoint);
titleinteractible = createElement("strong", {}, {}, '');
titleinteractible.innerHTML = "Predicted Interactability";
......@@ -428,7 +428,7 @@ function loadNGL(url, callback){
"data-toggle":"dropdown",
"aria-haspopup":"true",
"aria-expanded":"false"});
buttondorpdowninterac.append("Select interactibility model, chain ".concat(chain.pdb_chain_id ));
buttondorpdowninterac.append("Select interactability model, chain ".concat(chain.pdb_chain_id ));
divdropdowninterac.appendChild(buttondorpdowninterac);
var dropdowninteracmenu = createElement("div",{},{},"dropdown-menu",{'aria-labelledby': componentname + "_interact"});
divdropdowninterac.appendChild(dropdowninteracmenu);
......@@ -624,7 +624,7 @@ function loadNGL(url, callback){
};
if (hasinteract == 0) {
var labelsliderinteractibility = createElement("label", {}, {}, "", {});
labelsliderinteractibility.innerHTML = 'No interactible surface predict';
labelsliderinteractibility.innerHTML = 'No interactable surface predict';
divsliderinteractibility.appendChild(labelsliderinteractibility);
};
pdb.ligand_set.forEach(function(ligand){
......
......@@ -127,18 +127,32 @@ $.ajax({
color: 'DarkSlateGrey'}, opacity: opacity[1]}};
Plotly.restyle('myDiv', update_PL, 0);
Plotly.restyle('myDiv', update_HD, 1);
});
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var cavity = urlParams.get('search');
if (cavity) {
if (cavity in nodes_coords) {
console.log(cavity);
currentlayout = ippidb_plot.layout;
currentlayout.xaxis['autorange'] = false;
currentlayout.yaxis['autorange'] = false;
currentlayout.xaxis['range'] = [nodes_coords[cavity][0]-0.01, nodes_coords[cavity][0]+0.01];
currentlayout.yaxis['range'] = [nodes_coords[cavity][1]-0.01, nodes_coords[cavity][1]+0.01];
Plotly.relayout('myDiv', currentlayout);
};
}
$('.search-button').click(function() {
var cavity = $("#id_search").val();
currentlayout = ippidb_plot.layout;
window.open(window.location.pathname+"?search="+cavity, '_self');
/*currentlayout = ippidb_plot.layout;
currentlayout.xaxis['autorange'] = false;
currentlayout.yaxis['autorange'] = false;
currentlayout.xaxis['range'] = [nodes_coords[cavity][0]-0.01, nodes_coords[cavity][0]+0.01];
currentlayout.yaxis['range'] = [nodes_coords[cavity][1]-0.01, nodes_coords[cavity][1]+0.01];
Plotly.relayout('myDiv', currentlayout);
Plotly.relayout('myDiv', currentlayout);*/
});
autocomplete(document.getElementById("id_search"), Object.keys(nodes_coords));
......
......@@ -303,7 +303,7 @@
Navigate the PPI pocketome
</div>
<div class="choices_description">Explore the iPPI-DB
heterodimer pocketome by navigating
pocketome by navigating
within an interactive network.
</div>
</div>
......
......@@ -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="3 letter code ligands">
<input id="id_ligandcode" name="ligandcode" class="form-control" type="text" placeholder="3 characters code ligands">
</div>
<div class="col">
<input id="id_organism" name="organism" class="form-control" type="text" placeholder="Organism name">
......@@ -129,7 +129,7 @@
</div>
<div class="card-body text-nowrap">
{% for chain in pdb.chain_set.all reversed %}
{% if forloop.counter > 1 %}With {% else %}On {% endif %}Chain {{ chain.pdb_chain_id }} <a class="submithref" href="{% url 'cavities' %}?uniprotid={{ chain.protein.uniprot_id }}">{{ chain.protein.uniprot_id }}</a>
Chain {{ chain.pdb_chain_id }} <a class="submithref" href="{% url 'cavities' %}?uniprotid={{ chain.protein.uniprot_id }}">{{ chain.protein.uniprot_id }}</a>
<a class="submithref" href="{% url 'cavities' %}?organism={{ chain.protein.organism.name }}">{{ chain.protein.organism.name }}</a>
</br>
{% endfor %}
......@@ -177,6 +177,8 @@
PSI is given when you mouseover a pocket name. </p>
<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.
Pocket name is built with : pdb id / pocket's chain id / pocket number --
(PL for a protein ligand complex or HD for a heterodimer / partner ligand id or chain id)
</p>
</div>
<div class="col-4">
......@@ -198,7 +200,7 @@
<table id="cavitiestable" class="table table-hover shadow table-responsive table-sm zui-table table-header-rotated">
<thead class="thead-light">
<tr>
<th class="zui-sticky-col" title="PDB / Chain / Partner / Pocket" scope="col"><div><span>Pockets</span></div></th>
<th class="zui-sticky-col" title="PDB ID / Chain ID / Pocket -- (Type / Partner ID)" scope="col"><div><span>Pockets</span></div></th>
<th class="rotate-45" title="Volume in Aˆ3" scope="col"><div><span>Volume</span></div></th>
<th class="rotate-45" title="Normalized Moment of Inertia PMX/PMZ" scope="col"><div><span>NPR1</span></div></th>
<th class="rotate-45" title="Normalized Moment of Inertia PMY/PMZ" scope="col"><div><span>NPR2</span></div></th>
......@@ -239,15 +241,25 @@
/
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="uniprot: {{ cavity.chain.protein.uniprot_id }}">
{{ cavity.chain.pdb_chain_id }} / {{ cavity.chain.protein.short_name }}
{{ cavity.chain.pdb_chain_id }}<!-- / {{ cavity.chain.protein.short_name }} -->
</button>
<div class="dropdown-content">
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?uniprotid={{ cavity.chain.protein.uniprot_id }}">Query UniprotID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?uniprot_id={{ cavity.chain.protein.uniprot_id }}">Query UniprotID as iPPI-DB target</a>
</div>
</span>
{% if cavity.partner.ligand %}
/
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown">
{{ cavity.cavity_number }}
</button>
<div class="dropdown-content">
<a target="_blank" rel="noopener noreferrer" href="{% url 'networks' %}?search={{ cavity|build_name }}"> Query pocket in pocketome</a>
</div>
</span>
--
{% if cavity.partner.ligand %}
(PL /
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="smiles: {{ cavity.partner.ligand.canonical_smile }}">
{{ cavity.partner.ligand.pdb_ligand_id }}_{{ cavity.partner.ligand.supplementary_id }}
......@@ -256,9 +268,9 @@
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?ligandcode={{ cavity.partner.ligand.pdb_ligand_id }}">Query ligand ID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?similar_to=ECFP4:{{ cavity.partner.ligand.canonical_smile|urlencode }}">Query SMILES in iPPI-DB compounds</a>
</div>
</span>
</span>)
{% else %}
/
(HD /
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="uniprot: {{ cavity.partner.chain.protein.uniprot_id }}">
{{ cavity.partner.chain.pdb_chain_id }}
......@@ -267,9 +279,8 @@
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?uniprotid={{ cavity.partner.chain.protein.uniprot_id }}">Query UniprotID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?uniprot_id={{ cavity.partner.chain.protein.uniprot_id }}">Query UniprotID as iPPI-DB target</a>
</div>
</span>
</span>)
{% endif %}
/ {{ cavity.cavity_number }}
</th>
<td>{{ cavity.volume|floatformat:0 }}</td>
<td>{{ cavity.npr1|floatformat:2 }}</td>
......@@ -306,15 +317,25 @@
/
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="uniprot: {{ distance.cavity2.chain.protein.uniprot_id }}">
{{ distance.cavity2.chain.pdb_chain_id }} / {{ distance.cavity2.chain.protein.short_name }}
{{ distance.cavity2.chain.pdb_chain_id }}<!-- / {{ distance.cavity2.chain.protein.short_name }} -->
</button>
<div class="dropdown-content">
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?uniprotid={{ distance.cavity2.chain.protein.uniprot_id }}">Query UniprotID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?uniprot_id={{ distance.cavity2.chain.protein.uniprot_id }}">Query UniprotID as iPPI-DB target</a>
</div>
</span>
{% if distance.cavity2.partner.ligand %}
/
/
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown">
{{ distance.cavity2.cavity_number }}
</button>
<div class="dropdown-content">
<a target="_blank" rel="noopener noreferrer" href="{% url 'networks' %}?search={{ distance.cavity2|build_name }}"> Query pocket in pocketome</a>
</div>
</span>
--
{% if distance.cavity2.partner.ligand %}
(PL /
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="smiles: {{ distance.cavity2.partner.ligand.canonical_smile }}">
{{ distance.cavity2.partner.ligand.pdb_ligand_id }}_{{ distance.cavity2.partner.ligand.supplementary_id }}
......@@ -323,9 +344,9 @@
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?ligandcode={{ distance.cavity2.partner.ligand.pdb_ligand_id }}">Query ligand ID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?similar_to=ECFP4:{{ distance.cavity2.partner.ligand.canonical_smile|urlencode }}">Query SMILES in iPPI-DB compounds</a>
</div>
</span>
</span>)
{% else %}
/
(HD /
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="uniprot: {{ distance.cavity2.partner.chain.protein.uniprot_id }}">
{{ distance.cavity2.partner.chain.pdb_chain_id }}
......@@ -334,9 +355,8 @@
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?uniprotid={{ distance.cavity2.partner.chain.protein.uniprot_id }}">Query UniprotID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?uniprot_id={{ distance.cavity2.partner.chain.protein.uniprot_id }}">Query UniprotID as iPPI-DB target</a>
</div>
</span>
</span>)
{% endif %}
/ {{ distance.cavity2.cavity_number }}
</th>
<td>{{ distance.cavity2.volume|floatformat:0 }}</td>
<td>{{ distance.cavity2.npr1|floatformat:2 }}</td>
......@@ -371,26 +391,36 @@
/
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="uniprot: {{ distance.cavity1.chain.protein.uniprot_id }}">
{{ distance.cavity1.chain.pdb_chain_id }} / {{ distance.cavity1.chain.protein.short_name }}
{{ distance.cavity1.chain.pdb_chain_id }}<!-- / {{ distance.cavity1.chain.protein.short_name }} -->
</button>
<div class="dropdown-content">
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?uniprotid={{ distance.cavity1.chain.protein.uniprot_id }}">Query UniprotID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?uniprot_id={{ distance.cavity1.chain.protein.uniprot_id }}">Query UniprotID as iPPI-DB target</a>
</div>
</span>
{% if distance.cavity1.partner.ligand %}
/
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown">
{{ distance.cavity1.cavity_number }}
</button>
<div class="dropdown-content">
<a target="_blank" rel="noopener noreferrer" href="{% url 'networks' %}?search={{ distance.cavity1|build_name }}"> Query pocket in pocketome</a>
</div>
</span>
--
{% if distance.cavity1.partner.ligand %}
(PL /
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="smiles: {{ distance.cavity1.partner.ligand.canonical_smile }}">
{{ distance.cavity1.partner.ligand.pdb_ligand_id }}_{{ distance.cavity1.partner.ligand.supplementary_id }}
{{ distance.cavity1.partner.ligand.pdb_ligand_id }}_{{ distance.cavity1.partner.ligand.supplementary_id }})
</button>
<div class="dropdown-content">
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?ligandcode={{ distance.cavity1.partner.ligand.pdb_ligand_id }}">Query ligand ID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?similar_to=ECFP4:{{ distance.cavity1.partner.ligand.canonical_smile|urlencode }}">Query SMILES in iPPI-DB compounds</a>
</div>
</span>
</span>)
{% else %}
/
(HD /
<span class="dropdown">
<button class="dropbtn btn-outline-secondary" data-toggle="dropdown" title="uniprot: {{ distance.cavity1.partner.chain.protein.uniprot_id }}">
{{ distance.cavity1.partner.chain.pdb_chain_id }}
......@@ -399,9 +429,8 @@
<a target="_blank" rel="noopener noreferrer" href="{% url 'cavities' %}?uniprotid={{ distance.cavity1.partner.chain.protein.uniprot_id }}">Query UniprotID in pockets</a>
<a target="_blank" rel="noopener noreferrer" href="{% url 'compound_list' %}?uniprot_id={{ distance.cavity1.partner.chain.protein.uniprot_id }}">Query UniprotID as iPPI-DB target</a>
</div>
</span>
</span>)
{% endif %}
/ {{ distance.cavity1.cavity_number }}
</th>
<td>{{ distance.cavity1.volume|floatformat:0 }}</td>
<td>{{ distance.cavity1.npr1|floatformat:2 }}</td>
......
......@@ -282,3 +282,32 @@ def get_color(ratio):
def make_list(avg_std):
step = 1 / 25
return np.arange(0, 1 + step, step)
@register.filter
def to_minus(value):
return value.replace("_", "-")
@register.filter
def build_name(cavity):
if cavity.partner.is_ligand:
return "{}-{}-{}-{}-{}-within{}_CAVITY_N{}".format(
cavity.chain.pdb.code,
cavity.chain.pdb_chain_id,
cavity.chain.protein.uniprot_id,
cavity.partner.ligand.pdb_ligand_id,
cavity.partner.ligand.supplementary_id,
cavity.chain.pdb_chain_id,
cavity.cavity_number,
)
else:
return "{}-{}{}-{}-{}-within{}_CAVITY_N{}".format(
cavity.chain.pdb.code,
cavity.chain.pdb_chain_id,
cavity.partner.chain.pdb_chain_id,
cavity.chain.protein.uniprot_id,
cavity.partner.chain.protein.uniprot_id,
cavity.chain.pdb_chain_id,
cavity.cavity_number,
)
\ No newline at end of file
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