diff --git a/ippisite/ippidb/static/css/compounds_list.css b/ippisite/ippidb/static/css/compounds_list.css
index 140313c976cc480c265436e88f78cf5093aeecf5..5ceca4eaee501d0e449024362c692560381392ff 100644
--- a/ippisite/ippidb/static/css/compounds_list.css
+++ b/ippisite/ippidb/static/css/compounds_list.css
@@ -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
diff --git a/ippisite/ippidb/static/images/Other/formLE_petit.png b/ippisite/ippidb/static/images/Other/formLE_petit.png
new file mode 100644
index 0000000000000000000000000000000000000000..1986920c50052d13554b0f74b2a0cdbb1c90bd20
Binary files /dev/null and b/ippisite/ippidb/static/images/Other/formLE_petit.png differ
diff --git a/ippisite/ippidb/static/images/Other/formLLE_petit.png b/ippisite/ippidb/static/images/Other/formLLE_petit.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9bad03d5e135995bcffa607e52298dc27f43153
Binary files /dev/null and b/ippisite/ippidb/static/images/Other/formLLE_petit.png differ
diff --git a/ippisite/ippidb/templates/about-le-lle.html b/ippisite/ippidb/templates/about-le-lle.html
index 5527f56dd4e222567342a704995b95421384ac8b..a32727a40805d859beef5ac4a859215950d4192f 100644
--- a/ippisite/ippidb/templates/about-le-lle.html
+++ b/ippisite/ippidb/templates/about-le-lle.html
@@ -1,29 +1,66 @@
{% 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
diff --git a/ippisite/ippidb/templates/compound_card.html b/ippisite/ippidb/templates/compound_card.html
index 0e27af0b6ee788d590204adb55c89c32451bdc0f..6232af374203bc44ca79c3b9f3add397d7903884 100644
--- a/ippisite/ippidb/templates/compound_card.html
+++ b/ippisite/ippidb/templates/compound_card.html
@@ -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);