From 3676fe038ca1ff9345a7621445ea46bc03d51cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20P=C5=99=C3=ADhoda?= <david.prihoda1@merck.com>
Date: Sat, 7 Aug 2021 14:44:22 +0200
Subject: [PATCH] Minor UI improvements, use dots for identical residues in
 Designer

---
 biophi/common/web/templates/index.html        | 13 +++++------
 .../humanization/web/static/humanization.css  | 18 ++++++++++-----
 .../humanization/designer_detail.html         | 22 +++++++++----------
 .../humanization/humanize_detail.html         |  2 +-
 .../humanization/humanize_results.html        |  6 ++---
 biophi/humanization/web/views.py              |  3 ++-
 6 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/biophi/common/web/templates/index.html b/biophi/common/web/templates/index.html
index 7521864..684321c 100644
--- a/biophi/common/web/templates/index.html
+++ b/biophi/common/web/templates/index.html
@@ -2,7 +2,7 @@
 
 {% block header %}
   {% if not oasis_enabled %}
-    <div class="bg-warning text-dark p-2">OASis DB path is not configured, OASis peptide humanness evaluation will not be available.</div>
+    <div class="bg-warning text-dark p-2">OASIS_DB_PATH is not configured, OASis peptide humanness evaluation will not be available.</div>
   {% endif %}
   <div id="header">
     <div class="container">
@@ -47,7 +47,7 @@ <h5 class="card-title">Designer</h5>
 <div class="container">
   <div class="row gx-5 mb-5">
     <div class="col-lg-7 col-md-8">
-      <h1 class="display-6 mb-3">News</h1>
+      <h1 class="fs-2 fw-light mb-3">News</h1>
       <div class="list-group list-group-flush" id="news">
         {% for item in news[:5] %}
         <div class="list-group-item">
@@ -59,7 +59,7 @@ <h5 class="mb-1">{{ item.title }}</h5>
         </div>
         {% endfor %}
       </div>
-      <h1 class="display-6 mb-3 mt-3">Acknowledgements</h1>
+      <h1 class="fs-2 fw-light mb-3 mt-3">Acknowledgements</h1>
       <p>If you use BioPhi, please cite:</p>
       <p>TBD</p>
       <p>BioPhi is based on antibody repertoires from the <a href="http://opig.stats.ox.ac.uk/webapps/oas/" target="_blank">Observed Antibody Space</a> database.</p>
@@ -68,15 +68,14 @@ <h1 class="display-6 mb-3 mt-3">Acknowledgements</h1>
     </div>
 
     <div class="col-lg-5 col-md-4">
-      <h1 class="display-6 mb-3">Contributing</h1>
+      <h1 class="fs-2 fw-light mb-3">Contributing</h1>
       <p>
         BioPhi is an open-source platform,
         please feel free to <a target="_blank" href="https://github.com/Merck/BioPhi/issues">submit a ticket</a> to report any issues or to propose new features.
       </p>
       <p>Developers are welcome to contribute directly to BioPhi code, learn more in our <a target="_blank" href="https://github.com/Merck/BioPhi/issues">GitHub repository</a>.</p>
-      <div class="text-end">
-        <a href="https://twitter.com/BioPhi?ref_src=twsrc%5Etfw" class="invisible twitter-follow-button" data-dnt="true" data-show-count="false">Follow @BioPhi</a>
-      </div>
+      <p>Follow BioPhi on Twitter to get the latest news:</p>
+      <a href="https://twitter.com/BioPhi?ref_src=twsrc%5Etfw" class="invisible twitter-follow-button" data-dnt="true" data-show-count="false">Follow @BioPhi</a>
       <a class="invisible twitter-timeline" data-height="600" data-dnt="true" href="https://twitter.com/BioPhi?ref_src=twsrc%5Etfw">Tweets by BioPhi</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
     </div>
diff --git a/biophi/humanization/web/static/humanization.css b/biophi/humanization/web/static/humanization.css
index 9e99215..88a1715 100644
--- a/biophi/humanization/web/static/humanization.css
+++ b/biophi/humanization/web/static/humanization.css
@@ -92,12 +92,20 @@
     cursor: default;
 }
 
-.designer-line a:not([href]) {
-    cursor: default;
-}
 
-.designer-line:not(.designer-parental-line) a:not(:hover):not(.aa-match) {
-    background: white !important;
+.designer-line a, .designer-line span {
+    position: relative;
+    display: inline-block;
+    height: 21px;
+    line-height: 20px;
+    font-size: 13.5px;
+    width: 8.5px;
+    box-sizing: content-box;
+    vertical-align: top;
+    text-align: center;
+    text-decoration: none;
+    color: #000000;
+    position: relative;
 }
 
 .designer-line a[href]:hover, .designer-line.designer-result-line span:hover, .designer-line .active {
diff --git a/biophi/humanization/web/templates/humanization/designer_detail.html b/biophi/humanization/web/templates/humanization/designer_detail.html
index b4cebd2..968eb4d 100644
--- a/biophi/humanization/web/templates/humanization/designer_detail.html
+++ b/biophi/humanization/web/templates/humanization/designer_detail.html
@@ -155,7 +155,8 @@ <h4 class="fw-light mt-3">Light chain</h4>
     %}<span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" data-tooltip-classes="tooltip-medium" data-result-pos="{{ pos }}"
             class="{% if aa != parental_humanness.chain[pos] %}designer-mut{% endif %} {% if not freqs or freqs.get(aa, 0) < RARE_FAMILY_FREQ %}oasis-seq-aa-rare{% endif %}"
              title="Result {{ pos_tooltip(pos) }}<br>{{ aa_name(aa) }}<br>Click to enter mutation"
-            style="background-color: rgb(255, {{ 255 - num_non_human**0.80 * 30 }}, {{ 255 - num_non_human**0.65 * 40 }});">{{ aa }}</span>{%
+            style="background-color: rgb(255, {{ 255 - num_non_human**0.80 * 30 }}, {{ 255 - num_non_human**0.65 * 40 }});"
+          >{{ aa }}</span>{%
     endfor %}
     Result
   </div>
@@ -186,18 +187,17 @@ <h4 class="fw-light mt-3">Light chain</h4>
     <div class="tab-pane {% if not tab or tab == 'sapiens' %}show active{% endif %}" id="pills-sapiens-{{ id }}" role="tabpanel" aria-labelledby="pills-sapiens-tab-{{ id }}">
       <div class="mb-2 font-monospace text-nowrap fs-smaller">
         {% for scores in humanization.get_top_scores(5, next=True) %}
-          <div class="hum-designer-scores designer-line">
+          <div class="suggested-mutations designer-line">
             {% for pos, aa, score in scores
             %}{% if score > MIN_SAPIENS_SCORE %}<a
                   {% if aa != humanized_humanness.chain[pos] %} href="{{ url_for_arg(pos=pos, aa=aa, tab='sapiens', relative=True) }}" data-pos="{{ pos }}" {% endif %}
                   data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"
                   title="{{ mutation_tooltip(pos, humanized_humanness.chain[pos], aa) }}
                   <br>{{ '{:.0%}'.format(score) }} Sapiens score"
-                   {% if humanized_humanness.chain[pos] == aa %}class="aa-match"{% endif %}
                   style="background: rgb({{255-score**0.5*100}},{{255-score**0.5*150}},{{255}});"
-            >{{aa}}</a>{% else %}<span></span>{% endif %}{%
+            >{{ aa if humanized_humanness.chain[pos] != aa else '·' }}</a>{% else %}<span></span>{% endif %}{%
             endfor %}
-            #{{ loop.index }} Sapiens score
+            Top #{{ loop.index }} score
           </div>
         {% endfor %}
       </div>
@@ -205,17 +205,17 @@ <h4 class="fw-light mt-3">Light chain</h4>
     <div class="tab-pane {% if tab == 'freq' %}show active{% endif %}" id="pills-freq-{{ id }}" role="tabpanel" aria-labelledby="pills-freq-tab-{{ id }}">
       <div class="mb-2 font-monospace text-nowrap fs-smaller">
         {% for freqs in humanized_humanness.get_top_freqs(5) %}
-          <div class="hum-designer-scores designer-line">
+          <div class="suggested-mutations designer-line">
             {% for pos, aa, freq in freqs
             %}{% if freq > MIN_FAMILY_FREQ %}<a
                   {% if aa != humanized_humanness.chain[pos] %} href="{{ url_for_arg(pos=pos, aa=aa, tab='freq', relative=True) }}" data-pos="{{ pos }}" {% endif %}
                   data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"
                   title="{{ mutation_tooltip(pos, humanized_humanness.chain[pos], aa) }}
                   <br>{{ '{:.0%}'.format(freq) }} frequency in {{ humanized_humanness.v_germline_family }}"
-                   {% if humanized_humanness.chain[pos] == aa %}class="aa-match"{% endif %}
-                  style="background: rgb({{255-freq**0.5*255}},{{255-freq**0.5*100}},{{255-freq**0.5*100}});">{{ aa }}</a>{% else %}<span></span>{% endif %}{%
+                  style="background: rgb({{255-freq**0.5*255}},{{255-freq**0.5*100}},{{255-freq**0.5*100}});"
+                >{{ aa if humanized_humanness.chain[pos] != aa else '·' }}</a>{% else %}<span></span>{% endif %}{%
             endfor %}
-            #{{ loop.index }} at germline position
+            Top #{{ loop.index }} frequency
           </div>
         {% endfor %}
       </div>
@@ -230,8 +230,8 @@ <h4 class="fw-light mt-3">Light chain</h4>
               %}{% set germline_aa = v_germlines[i][imgt_pos] or j_germlines[i][imgt_pos] or '-' %}<a
                     data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" title="{{ mutation_tooltip(pos, seq_aa, germline_aa) }}"
                     {% if germline_aa != "-" and germline_aa != seq_aa %} href="{{ url_for_arg(pos=pos, aa=germline_aa, tab='germline', relative=True) }}" data-pos="{{ pos }}"{% endif %}
-                    {% if seq_aa == germline_aa %}class="aa-match"{% endif %}
-                    style="background: #b3f7b3; {% if pos.is_in_cdr() %}opacity: 0.6;{% endif %}">{{ germline_aa }}</a>{%
+                    style="background:rgb(200, 255, 200); {% if pos.is_in_cdr() %}opacity: 0.6;{% endif %}"
+                >{{ germline_aa if humanized_humanness.chain[pos] != germline_aa else '·' }}</a>{%
               endfor %}
               {{ v_germlines[i].name }}, {{ j_germlines[i].name }}
             </div>
diff --git a/biophi/humanization/web/templates/humanization/humanize_detail.html b/biophi/humanization/web/templates/humanization/humanize_detail.html
index 61301cf..0888ab0 100644
--- a/biophi/humanization/web/templates/humanization/humanize_detail.html
+++ b/biophi/humanization/web/templates/humanization/humanize_detail.html
@@ -23,7 +23,7 @@
     <div class="mb-3 text-end dropdown">
       <div class="d-inline-block">
         <a class="btn btn-light" href="{{ url_for('biophi_humanization.humanize_get', humanize_task_id=task_id, index=result_index) }}">
-          {{ icon('arrow-repeat') }} Re-run
+          {{ icon('arrow-repeat') }} Change settings
         </a>
       </div>
       <div class="d-inline-block">
diff --git a/biophi/humanization/web/templates/humanization/humanize_results.html b/biophi/humanization/web/templates/humanization/humanize_results.html
index 571c948..6a19270 100644
--- a/biophi/humanization/web/templates/humanization/humanize_results.html
+++ b/biophi/humanization/web/templates/humanization/humanize_results.html
@@ -12,13 +12,13 @@
 {% block main %}
 
 <div class="mb-3 mt-3 row">
-  <div class="col-8">
+  <div class="col-3">
     <a class="btn btn-light" href="{{ url_for('biophi_humanization.humanize_get') }}">
       {{ icon('chevron-left') }} Input
     </a>
   </div>
 
-  <div class="col-4 text-end">
+  <div class="col-9 text-end">
     {% if show == 'alignments' %}
         <a class="btn btn-light" href="{{ url_for_arg(show='table') }}">{{ icon('table') }} Show table</a>
     {% else %}
@@ -26,7 +26,7 @@
     {% endif %}
     <div class="d-inline-block">
       <a class="btn btn-light" href="{{ url_for('biophi_humanization.humanize_get', humanize_task_id=task_id) }}">
-        {{ icon('arrow-repeat') }} Re-run
+        {{ icon('arrow-repeat') }} Change settings
       </a>
     </div>
     <div class="dropdown d-inline-block">
diff --git a/biophi/humanization/web/views.py b/biophi/humanization/web/views.py
index 68e55a4..9b0cf29 100644
--- a/biophi/humanization/web/views.py
+++ b/biophi/humanization/web/views.py
@@ -294,7 +294,8 @@ def designer_detail_get(task_id):
     aa = request.args.get('aa')
 
     try:
-        result: HumanizeAntibodyTaskResult = scheduler.get_result(task_id, timeout=15)
+        timeout = 15 if pos and aa else 5
+        result: HumanizeAntibodyTaskResult = scheduler.get_result(task_id, timeout=timeout)
     except TimeoutError:
         return render_template('loading.html', active_nav='designer')