diff --git a/ippisite/ippidb/templates/compound_card.html b/ippisite/ippidb/templates/compound_card.html
index 583dce7e99dacff9836049a6a525b6938be810b0..a2a98987519467e27a43461dc5b11ca5cf1e3a07 100644
--- a/ippisite/ippidb/templates/compound_card.html
+++ b/ippisite/ippidb/templates/compound_card.html
@@ -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 %}