Skip to content
GitLab
Commit 0b76f8ac authored by Hervé MENAGER's avatar Hervé MENAGER
Browse files

fix HTML and reformat in compound card template

parent 7f97c101
Hide whitespace changes
Inline Side-by-side
ippisite/ippidb/templates/compound_card.html
View file @ 0b76f8ac
......@@ -6,7 +6,8 @@
<script src="/static/js/ippidb-charts.js" type="text/javascript"></script>
{% endblock %}
{% block title %}compound {{ compound.id }} detail{% if compound.common_name %} ({{compound.common_name}}){% endif %}{% endblock %}
{% block title %}compound {{ compound.id }} detail{% if compound.common_name %}
({{compound.common_name}}){% endif %}{% endblock %}
{% block content %}
<div id="mainnav">
......@@ -61,7 +62,8 @@
<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 <span class="info_point" onclick="showLegend('show_legend_physico')"><i class="fas fa-info-circle"></i></span>
<h5 class="card_title">Physicochemical filters <span class="info_point"
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);
......@@ -212,7 +214,7 @@
<td class="text-center {% status_class compound.veber_tpsa %}" title="TPSA <= 140">
</td>
<td class="text-center {% status_class compound.pfizer_tpsa %}" title="TPSA >= 75">
</tr>
</tr>
<tr>
<th scope="row">RB</th>
<td>{{ compound.nb_rotatable_bonds | default_if_none:"not available"}}</td>
......@@ -224,94 +226,95 @@
</tbody>
</table>
</div>
<div class="col" style="margin: 10px;">
<h5 class="card_title">Radar chart<span class="info_point" 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 class="col-sm-12 col-md-9" style="margin: 10px;">
<h5 class="card_title">Radar chart<span class="info_point" 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 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>
<script>
$('a.second_nav').on('shown.bs.tab', function (e) {
drawCompoundDescriptorRadarChart('radar', {{ compound.molecular_weight }}, {{ compound.a_log_p }}, {{ compound.nb_donor_h }}, {{ compound.nb_acceptor_h }}, {{ compound.tpsa }}, {{ compound.nb_rotatable_bonds }}, {{ compound.nb_benzene_like_rings }}, {{ compound.fsp3 }}, {{ compound.nb_chiral_centers }});
});
</script>
{% else %}
<p class="text-secondary">Compound properties unavailable</p>
{% endif %}
<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>
<script>
$('a.second_nav').on('shown.bs.tab', function (e) {
drawCompoundDescriptorRadarChart('radar', {{ compound.molecular_weight }}, {{ compound.a_log_p }}, {{ compound.nb_donor_h }}, {{ compound.nb_acceptor_h }}, {{ compound.tpsa }}, {{ compound.nb_rotatable_bonds }}, {{ compound.nb_benzene_like_rings }}, {{ compound.fsp3 }}, {{ compound.nb_chiral_centers }});
});
</script>
{% else %}
<p class="text-secondary">Compound properties unavailable</p>
{% endif %}
</div>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-sm-12 col-md-9" style="margin: 10px;">
<div class="col-sm-12 col-md-9">
<h5 class="card_title">PCA : iPPI-DB chemical space</h5>
<div class="card_border">
......@@ -321,7 +324,7 @@
</script>
</div>
</div>
<div class="col-sm-12 col-md-7" style="margin: 10px;">
<div class="col-sm-12 col-md-7">
<h5 class="card_title">PCA : Correlation circle</h5>
<div class="card_border">
<img src="data:image/png;base64,{{ pca_biplot_cc }}" style="width: 100%; height:auto" \>
......@@ -333,34 +336,34 @@
<div class="row d-flex justify-content-center">
<div class="col-sm-12 col-md-9" style="margin: 10px;">
<h5 class="card_title">Efficiencies: iPPI-DB biplot LE versus LLE <span class="info_point"
onclick="showLegend('show_legend_LLE')"> <i class="fas fa-info-circle fa-sm"></i></span></h5>
onclick="showLegend('show_legend_LLE')"> <i class="fas fa-info-circle fa-sm"></i></span></h5>
<div id="show_legend_LLE" style="display: none; padding:8px; margin-left: auto;
margin-right: auto;">
<div class="row d-flex justify-content-center" style="box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);
<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-12" style="margin-bottom: 10px;">
<div style="border: 1px solid #f2f2f2;">
<div style=" background-color: #f2f2f2;text-align: center; font-family:'BrandonGrotesqueBld';">
Caption
</div>
<div style="padding: 5px;">
<ul>
<li>LE: Ligand Efficiency</li>
<img src="/static/images/Other/formLE_petit.png">
<li>LLE: Lipophilic Efficiency</li>
<img src="/static/images/Other/formLLE_petit.png">
</ul>
<p>
For the calculation of the efficiencies, we select a reference activity such that Ki and Kd
are favored over IC50 and EC50 and biochemical assays over cellular assays.
</p>
<div class="col-12" style="margin-bottom: 10px;">
<div style="border: 1px solid #f2f2f2;">
<div style=" background-color: #f2f2f2;text-align: center; font-family:'BrandonGrotesqueBld';">
Caption
</div>
<div style="padding: 5px;">
<ul>
<li>LE: Ligand Efficiency</li>
<img src="/static/images/Other/formLE_petit.png">
<li>LLE: Lipophilic Efficiency</li>
<img src="/static/images/Other/formLLE_petit.png">
</ul>
<p>
For the calculation of the efficiencies, we select a reference activity such that Ki and Kd
are favored over IC50 and EC50 and biochemical assays over cellular assays.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_border">
<canvas id="le_lle_biplot"></canvas>
<script>
......@@ -455,7 +458,8 @@
<tbody style="text-align: center;">
{% for ccr in compound.compoundcytotoxicityresult_set.all %}
<tr>
<td>{% include "biblio_simplelink.html" with bibliography=ccr.test_cytotoxicity_description.biblio %}
<td>
{% include "biblio_simplelink.html" with bibliography=ccr.test_cytotoxicity_description.biblio %}
</td>
{% for rcb in ccr.test_cytotoxicity_description.biblio.refcompoundbiblio_set.all %}
{% if rcb.compound == compound %}
......
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