diff --git a/ippisite/ippidb/static/css/targetcentric.css b/ippisite/ippidb/static/css/targetcentric.css
index 013d9cd99095247272836a2c4c837a5f1a70ff3f..0c0cf389f6bef19b043fa1afc32f249d7c9431f5 100644
--- a/ippisite/ippidb/static/css/targetcentric.css
+++ b/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
diff --git a/ippisite/ippidb/static/js/targetcentric.js b/ippisite/ippidb/static/js/targetcentric.js
index 5395a107e2b3dc4ca311fc273b7f3ee2d70e83ec..a496000b2d4063dec970ca98616bb4d6db3b8834 100644
--- a/ippisite/ippidb/static/js/targetcentric.js
+++ b/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);
diff --git a/ippisite/ippidb/templates/targetcentric.html b/ippisite/ippidb/templates/targetcentric.html
index 6915e5f50362db1b304fd7238092d41fe74e8977..28cd0e9dc78ac637e41ef6d76963b6edbadfc79b 100644
--- a/ippisite/ippidb/templates/targetcentric.html
+++ b/ippisite/ippidb/templates/targetcentric.html
@@ -1,4 +1,5 @@
{% 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">
diff --git a/ippisite/ippidb/templatetags/customtags.py b/ippisite/ippidb/templatetags/customtags.py
index 830662f8046cda1491e81f4fc49a8b0ba489ca2b..65df143b70bb8fe5d762f22ce53e0bbf80a7b837 100644
--- a/ippisite/ippidb/templatetags/customtags.py
+++ b/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)
diff --git a/ippisite/ippisite/settings.py b/ippisite/ippisite/settings.py
index eba17e7adbf26a50e0ee19c4a1c06194758c43d3..361ed493a77814266757148e64b7e59936e3edb5 100644
--- a/ippisite/ippisite/settings.py
+++ b/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",
diff --git a/ippisite/ippisite/settings.template.py b/ippisite/ippisite/settings.template.py
index bf31edfcc038d87e59da4b4daabd28b05464628e..a09b37484a706d851a1e21931a8c8fe430fd5dec 100644
--- a/ippisite/ippisite/settings.template.py
+++ b/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",