gradiant legend

ippisite/ippidb/static/css/targetcentric.css

@@ -194,3 +194,16 @@ a.infobulle:hover span, a.infobulle:focus span{
   transform:scale(1) rotate(0);
   opacity:1;
 }
+
+table.gradiant{
+  width:inherit;
+  table-layout: fixed;
+  height:50px;
+}
+
+table.gradiant td{
+  overflow: visible;
+  border-right: none;
+  white-space: nowrap;
+  text-align: left;
+}
\ No newline at end of file

ippisite/ippidb/static/js/targetcentric.js

@@ -410,7 +410,7 @@ function loadNGL(url, callback){
 
                     hasinteract = 1;
                     var labelsliderinterac = createElement("label", {}, {}, "", {'for':'isolevel' + chain.pdb_chain_id});
-                    labelsliderinterac.innerHTML = 'Adjust predictive interactibility surface on ' + chain.pdb_chain_id;
+                    labelsliderinterac.innerHTML = 'Adjust predictive interactibility surface on chain ' + chain.pdb_chain_id;
                     divchain.appendChild(labelsliderinterac);
                     divchain.appendChild(createElement('br'));
                     var divdropdowninterac = createElement("div",{},{},"dropdown");
@@ -491,7 +491,7 @@ function loadNGL(url, callback){
                     
                     
                     var labelslider = createElement("label", {}, {}, "", {'for':'isolevel' + chain.pdb_chain_id});
-                    labelslider.innerHTML = 'Adjust predictive surface druggable on ' + chain.pdb_chain_id;
+                    labelslider.innerHTML = 'Adjust predictive surface druggable on chain ' + chain.pdb_chain_id;
                     var divvalueslider = createElement("div", {}, {}, "",  {'id': 'valueisolevel' + chain.pdb_chain_id});
                     divvalueslider.innerHTML = 'current value: 0.7'
                     divchainmrc.appendChild(labelslider);

ippisite/ippidb/templates/targetcentric.html

 {% extends "base.html" %}
+{% load humanize %}
 {% load customtags %}
 {% load static %}
 {% block title %}Target Centric view{% endblock %}
@@ -142,19 +143,41 @@
                     </div>
                 </div>
                 <div class="card">
-                    <div class="card-title text-center">
-                        <a class="infobulle" href='#'>
-                            <i class="fas fa-question-circle fa-2x"></i>
-                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ornare hendrerit. 
-                                Phasellus urna neque, vehicula in eleifend ut, aliquam quis nunc. Nam dapibus lobortis nulla id faucibus. 
-                                Morbi rhoncus libero at lectus iaculis sagittis. Phasellus egestas enim odio, porta lobortis neque sodales 
-                                vitae. Fusce molestie posuere ultricies. Sed interdum ipsum vel metus condimentum, ac vehicula enim molestie. 
-                                Nunc pharetra tortor ullamcorper lacinia viverra. Pellentesque in tempor mauris. Integer convallis urna a 
-                                ligula ultricies venenatis. Duis ut congue magna. </span>
-                        </a>
-                        <strong>Cavities</strong>
-                        <small>For information, a Zscore is given when you mouseover a cavity name. If its value is greater than {{ avg_std|get_zscore_threshold }} (-2 x the standard deviation), it should be interpreted with caution.</small>
-
+                    <div class="card-title">
+                        <div class="row text-center mt-3">
+                            <div class="col-12">
+                                <a class="infobulle" href='#'>
+                                    <i class="fas fa-question-circle fa-2x"></i>
+                                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ornare hendrerit. 
+                                        Phasellus urna neque, vehicula in eleifend ut, aliquam quis nunc. Nam dapibus lobortis nulla id faucibus. 
+                                        Morbi rhoncus libero at lectus iaculis sagittis. Phasellus egestas enim odio, porta lobortis neque sodales 
+                                        vitae. Fusce molestie posuere ultricies. Sed interdum ipsum vel metus condimentum, ac vehicula enim molestie. 
+                                        Nunc pharetra tortor ullamcorper lacinia viverra. Pellentesque in tempor mauris. Integer convallis urna a 
+                                        ligula ultricies venenatis. Duis ut congue magna. </span>
+                                </a>
+                                <strong> Cavities </strong>
+                            </div>
+                    </div>
+                        <div class="row text-justify ml-3 mr-3">
+                            <div class="col-8 text-wrap">
+                            Gradient colors for table is based on maximum and minimum zscore in the matrix. Zscore is given when you mouseover a cavity name. Be carefull, if its value is greater 
+                            than {{ avg_std|get_zscore_threshold|floatformat:2|intcomma }} (-2 x the standard deviation), 
+                            it should be interpreted with caution.
+                            </div>
+                            <div class="col-4">
+                            <table class="gradiant"><tbody><tr>
+                            {% for td in avg_std|make_list %}
+                                {% if forloop.first %}
+                            <td style="background-color:rgb({{ td|get_color:avg_std }})" title="{{ td|get_zscore:avg_std }}">{{ td|get_zscore:avg_std|floatformat:2|intcomma }}</td>
+                                {% elif forloop.last %}
+                            <td style="direction: rtl;background-color:rgb({{ td|get_color:avg_std }})" title="{{ td|get_zscore:avg_std }}">{{ td|get_zscore:avg_std|floatformat:2|intcomma }}</td>
+                                {% else %}
+                            <td style="background-color:rgb({{ td|get_color:avg_std }})" title="{{ td|get_zscore:avg_std }}"> </td>
+                                {% endif %}
+                            {% endfor %}
+                            </tr></tbody></table>
+                            </div>
+                        </div>
                     </div>
                     <div class="card-body">
                      <table id="cavitiestable" class="table table-hover shadow table-responsive table-sm zui-table table-header-rotated">

ippisite/ippidb/templatetags/customtags.py

@@ -255,3 +255,9 @@ def get_color(distance, avg_std):
 @register.filter
 def get_zscore_threshold(avg_std):
     return -2 * avg_std.std
+
+
+@register.filter
+def make_list(avg_std):
+    step = (avg_std.maximum - avg_std.minimum) / 25
+    return np.arange(avg_std.minimum, avg_std.maximum + step, step)

ippisite/ippisite/settings.py

@@ -43,6 +43,7 @@ INSTALLED_APPS = [
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "django.contrib.sitemaps",
+    "django.contrib.humanize",
     "django_extensions",
     "django_celery_results",
     "crispy_forms",

ippisite/ippisite/settings.template.py

@@ -46,6 +46,7 @@ INSTALLED_APPS = [
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "django.contrib.sitemaps",
+    "django.contrib.humanize",
     "django_extensions",
     "django_celery_results",
     "crispy_forms",