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

Efficiency plot - Add caption box

parent b03ff67d
Pipeline #28879 passed with stages
in 13 minutes and 40 seconds
......@@ -224,30 +224,40 @@ Description: IPPI-DB Theme
.compound_header_title {
position: sticky;
top:0;
top: 0;
background-color: #ffffff;
margin-bottom: 18px;
border-radius: 3px;
margin-bottom: 18px;
border-radius: 3px;
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
.bg_warning{
.bg_warning {
background-color: #fbbf839e;
border-radius: 3px;
}
.info_point {
color: #b6bfc7;
font-size: 17px;
cursor: pointer;
}
.info_point:hover {
color: #8e969c;
}
.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;
padding: .0px;
vertical-align: top;
border-top: 1px solid #dee2e6;
text-align: center;
}
.legend_table tr,th {
.legend_table tr, th {
font-family: "BrandonGrotesqueBld";
}
\ No newline at end of file
{% extends "about.html" %}
{% block title %}inhibitors of Protein-Protein Interaction Database{% endblock %}
{% block pagetitle %}Efficiencies: iPPI-DB biplot LE versus LLE{% endblock%}
{% block pagetitle %}Efficiency plot: Ligand efficiency (LE) versus Lipophilic Efficiency (LLE) <span class="info_point"
onclick="showLegend('show_legend_LLE')"> <i class="fas fa-info-circle fa-sm"></i></span>{% endblock%}
{% block view_content %}
{% if le_lle_biplot_data %}
<div class="row">
<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);
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>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<canvas id="le_lle_biplot"></canvas>
</div>
<div class="col-md-12">
<p>
iPPI-DB biplot of Ligand Efficiency (LE = 1.37 x pXC50 / No heavy atoms) versus Lipophilic Ligand Efficiency (LLE = pXC50 - AlogP) where pXC50 is any of the following: pKd, pKi, pIC50 or pEC50. Each iPPI is colored according to their corresponding target.
iPPI-DB biplot of Ligand Efficiency (LE = 1.37 x pXC50 / No heavy atoms) versus Lipophilic Ligand Efficiency
(LLE = pXC50 - AlogP) where pXC50 is any of the following: pKd, pKi, pIC50 or pEC50. Each iPPI is colored
according to their corresponding target.
</p>
</div>
</div>
<script>
drawCompoundsBiplotChart('le_lle_biplot', preparePerFamilyBiplotData({{ le_lle_biplot_data | safe }}), 'pharmacology', {'legend':{'position':'right'}});
drawCompoundsBiplotChart('le_lle_biplot', preparePerFamilyBiplotData({{ le_lle_biplot_data | safe }}), 'pharmacology', { 'legend': { 'position': 'right' } });
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>
{% else %}
<div class="alert alert-danger" role="alert">
<div class="alert alert-danger" role="alert">
The LE-LLE data are not currently available
</div>
</div>
{% endif %}
{% endblock %}
{% endblock %}
\ No newline at end of file
......@@ -61,8 +61,7 @@
<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 style="color:#b6bfc7; font-size: 17px;
cursor: pointer;" 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);
......@@ -226,8 +225,7 @@
</table>
</div>
<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 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);
......
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