Commit c38e1f80 authored by Rachel TORCHET's avatar Rachel TORCHET
Browse files

Compound page : Add caption for Physicochemical filter and radar chart

parent cc84631c
......@@ -236,3 +236,18 @@ Description: IPPI-DB Theme
background-color: #fbbf839e;
border-radius: 3px;
}
.legend_table {
border: 1px solid #dee2e6;
}
.legend_table td, .legend_table th {
padding: .0px;
vertical-align: top;
border-top: 1px solid #dee2e6;
text-align: center;
}
.legend_table tr,th {
font-family: "BrandonGrotesqueBld";
}
\ No newline at end of file
......@@ -37,10 +37,11 @@
<div style="display: flex;
align-items: center;">
{% if compound.is_validated is False %}
<h1 class="page-title-warning" style="margin: 0;">Compound {{ compound.id }} - This compound has not been validated by a curator yet, data might be incomplete or
<h1 class="page-title-warning" style="margin: 0;">Compound {{ compound.id }} - This compound has not been
validated by a curator yet, data might be incomplete or
inaccurate</h1>
{% else %}
<h1 class="page-title" style="margin: 0;">Compound {{ compound.id }}</h1>
{% else %}
<h1 class="page-title" style="margin: 0;">Compound {{ compound.id }}</h1>
{% endif %}
</div>
</div>
......@@ -60,7 +61,85 @@
<div class="tab-pane fade" id="physicochemistry" role="tabpanel" aria-labelledby="physicochemistry-tab">
<div class="row d-flex justify-content-center">
<div class="col-sm-12 col-md-9" style="margin: 10px;">
<h5 class="card_title">Physicochemical filters</h5>
<h5 class="card_title">Physicochemical filters <span style="color:#b6bfc7; font-size: 17px;
cursor: pointer;" onclick="showLegend('show_legend_physico')"><i class="fas fa-info-circle"></i></span>
</h5>
<div id="show_legend_physico" style="display: none; padding:8px;">
<div class="row d-flex justify-content-center" style=" box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);
padding-top: 9px;">
<div class="col-4">
<div style="border: 1px solid #f2f2f2;">
<div style=" background-color: #f2f2f2;text-align: center; font-family:'BrandonGrotesqueBld';">
Caption
</div>
<div style="padding: 5px;">
<p>For each descriptor:</p>
<p><i class="fas fa-square" style="color:#c3e6cb;"></i> Rule violation</p>
<p><i class="fas fa-square" style="color:#f5c6cb;"></i> Rule violation</p>
<p><i class="far fa-square" style="color:#b6bfc7;"></i> Not in the rule</p>
</div>
</div>
</div>
<div class="col-8">
<table class="table table-striped legend_table">
<thead>
<tr>
<th>Descriptor</th>
<th>Lipinski's RO5</th>
<th>Veber</th>
<th>Pfizer's 3/75</th>
</tr>
</thead>
<tbody>
<tr>
<td>MW</td>
<td>≤ 500 g/mol</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>AlogP</td>
<td>≤ 5</td>
<td>-</td>
<td>≤ 3</td>
</tr>
<tr>
<td>HBA</td>
<td>≤ 10</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>HBD</td>
<td>≤ 5</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>(HBA + HBD)</td>
<td>-</td>
<td>≤ 12</td>
<td>-</td>
</tr>
<tr>
<td>TPSA</td>
<td>-</td>
<td>≤ 140 Å<sup>2</sup></td>
<td>≥ 75 Å<sup>2</sup></td>
</tr>
<tr>
<td>RB</td>
<td>-</td>
<td>≤ 10</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<table class="table table-sm col-sm-12 col-md-6 card_border" style="text-align: center;">
<thead>
......@@ -89,7 +168,7 @@
{% endif %}</td>
<td class="text-center {% status_class compound.lipinsky_mw %}"
title="Molecular weight <= 500g/mol">
</td>
<td class="table-light"></td>
<td class="table-light"></td>
......@@ -115,14 +194,14 @@
<td>{{ compound.hba_hbd | default_if_none:"not available" }}</td>
<td class="table-light"></td>
<td class="text-center {% status_class compound.veber_hba_hbd %}" title="HBD + HBA <= 12">
</td>
</td>
<td class="table-light"></td>
</tr>
<tr>
<th scope="row">AlogP</th>
<td>{{ compound.a_log_p | default_if_none:"not available" }}</td>
<td class="text-center {% status_class compound.lipinsky_a_log_p %}" title="AlogP <= 5">
</td>
</td>
<td class="table-light"></td>
<td class="text-center {% status_class compound.pfizer_a_log_p %}" title="AlogP <= 3">
</td>
......@@ -132,20 +211,92 @@
<td>{{ compound.tpsa | default_if_none:"not available" }}</td>
<td class="table-light"></td>
<td class="text-center {% status_class compound.veber_tpsa %}" title="TPSA <= 140">
</td>
<td class="text-center default_if_none:" not available" }}</td> </tr> <tr>
</td>
<td class="text-center default_if_none:" not available" }}</td>
</tr>
<tr>
<th scope="row">RB</th>
<td>{{ compound.nb_rotatable_bonds | default_if_none:"not available"}}</td>
<td class="table-light"></td>
<td class="text-center {% status_class compound.veber_rb %}" title="RB <= 10">
</td>
</td>
<td class="table-light"></td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-12 col-md-9" style="margin: 10px;">
<h5 class="card_title">Radar chart</h5>
<div class="col" style="margin: 10px;">
<h5 class="card_title">Radar chart<span style="color:#b6bfc7; font-size: 17px;
cursor: pointer;" onclick="showLegend('show_legend_radar')"> <i class="fas fa-info-circle"></i></span>
</h5>
<div id="show_legend_radar" style="display: none; padding:8px;">
<div class="row d-flex justify-content-center" style=" box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);
padding-top: 9px;">
<div class="col-8">
<div style="border: 1px solid #f2f2f2;">
<div style=" background-color: #f2f2f2;text-align: center; font-family:'BrandonGrotesqueBld';">
Caption
</div>
<div style="padding: 5px;">
<p><i class="fas fa-draw-polygon" style="color:#ff6384;"></i> Descriptor's value for the
compound</p>
<p><i class="fas fa-draw-polygon" style="color:#36a2eb;"></i> Descriptor's threshold</p>
<p>Those thresholds correspond either to the limits of both the Lipinski's RO5 and Veber's rule,
or to the rule of thumb of Ritchie for the number of aromatic rings - Ar, and the mean values
usually observed among drugs for Fsp3 and the number of chiral centers - R/S.</p>
</div>
</div>
</div>
<div class="col-4">
<table class="table table-striped legend_table">
<thead>
<tr>
<th>Short name</th>
<th>Threshold</th>
</tr>
</thead>
<tbody>
<tr>
<td>MW</td>
<td>≤ 500 g/mol</td>
</tr>
<tr>
<td>AlogP</td>
<td>≤ 5</td>
</tr>
<tr>
<td>HBD</td>
<td>≤ 5</td>
</tr>
<tr>
<td>HBA</td>
<td>≤ 10</td>
</tr>
<tr>
<td>TPSA</td>
<td>≤ 140 Å<sup>2</sup></td>
</tr>
<tr>
<td>RB</td>
<td>≤ 10</td>
</tr>
<tr>
<td>ArRing</td>
<td>≤ 4</td>
</tr>
<tr>
<td>Fsp3</td>
<td>≥ 0.4</td>
</tr>
<tr>
<td>R/S</td>
<td>≥ 1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card_border">
{% if compound.molecular_weight is not None %}
<canvas id="radar" data-radarh="500px" data-radarw="500px"></canvas>
......@@ -211,48 +362,48 @@
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-sm-12 col-md-12" style="margin: 10px;">
<h5 class="card_title">Pharmacological data</h5>
<div class="card_border">
<table class="table table-sm col-sm-12 col-md-12">
<thead style="text-align: center;">
<tr>
<th class="card_title" scope="col">Bibliography</th>
<th class="card_title" scope="col" title="Compound name in publication">Name</th>
<th class="card_title" scope="col">Target</th>
<th class="card_title" scope="col">Competition</th>
<th class="card_title" scope="col">Assay type</th>
<th class="card_title" scope="col">Assay name</th>
<th class="card_title" scope="col">Cell line</th>
<th class="card_title" scope="col">Activity type</th>
<th class="card_title" scope="col">Activity</th>
</tr>
</thead>
<tbody style="text-align: center;">
{% for car in compound.compoundactivityresult_set.all %}
<tr {% if car.is_best %}class="table-primary" {% endif %}>
<td>{% include "biblio_simplelink.html" with bibliography=car.test_activity_description.biblio %}
</td>
{% for rcb in car.test_activity_description.biblio.refcompoundbiblio_set.all %}
{% if rcb.compound == compound %}
<td>{{ rcb.compound_name }}</td>
{% endif %}
{% endfor %}
<td>{{ car.test_activity_description.protein_domain_bound_complex.name }} <br /><a
href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}"
target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
</td>
<td>{{ car.test_activity_description.protein_domain_partner_complex.name }} <br /><a
href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}"
target="_blank">{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}</a>
</td>
<td>{{ car.test_activity_description.get_test_type_display }}</td>
<td>{{ car.test_activity_description.test_name }}</td>
<td>{{ car.test_activity_description.cell_line.name }}</td>
<td>{{ car.get_activity_type_display }}</td>
<td>{{ car.activity|floatformat:2 }}</td>
</tr>
<div class="row d-flex justify-content-center">
<div class="col-sm-12 col-md-12" style="margin: 10px;">
<h5 class="card_title">Pharmacological data</h5>
<div class="card_border">
<table class="table table-sm col-sm-12 col-md-12">
<thead style="text-align: center;">
<tr>
<th class="card_title" scope="col">Bibliography</th>
<th class="card_title" scope="col" title="Compound name in publication">Name</th>
<th class="card_title" scope="col">Target</th>
<th class="card_title" scope="col">Competition</th>
<th class="card_title" scope="col">Assay type</th>
<th class="card_title" scope="col">Assay name</th>
<th class="card_title" scope="col">Cell line</th>
<th class="card_title" scope="col">Activity type</th>
<th class="card_title" scope="col">Activity</th>
</tr>
</thead>
<tbody style="text-align: center;">
{% for car in compound.compoundactivityresult_set.all %}
<tr {% if car.is_best %}class="table-primary" {% endif %}>
<td>{% include "biblio_simplelink.html" with bibliography=car.test_activity_description.biblio %}
</td>
{% for rcb in car.test_activity_description.biblio.refcompoundbiblio_set.all %}
{% if rcb.compound == compound %}
<td>{{ rcb.compound_name }}</td>
{% endif %}
{% endfor %}
<td>{{ car.test_activity_description.protein_domain_bound_complex.name }} <br /><a
href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}"
target="_blank">{{ car.test_activity_description.protein_domain_bound_complex.protein.uniprot_id }}</a>
</td>
<td>{{ car.test_activity_description.protein_domain_partner_complex.name }} <br /><a
href="http://www.uniprot.org/uniprot/{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}"
target="_blank">{{ car.test_activity_description.protein_domain_partner_complex.protein.uniprot_id }}</a>
</td>
<td>{{ car.test_activity_description.get_test_type_display }}</td>
<td>{{ car.test_activity_description.test_name }}</td>
<td>{{ car.test_activity_description.cell_line.name }}</td>
<td>{{ car.get_activity_type_display }}</td>
<td>{{ car.activity|floatformat:2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
......@@ -308,5 +459,14 @@
}
$('[href="' + tabHash + '"]').tab('show');
});
function showLegend(legend) {
var x = document.getElementById(legend);
console.log(x)
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
{% endblock %}
\ No newline at end of file
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