Skip to content

Commit 3676fe0

Browse files
prihodaprihoda
committed
Minor UI improvements, use dots for identical residues in Designer
1 parent 327ac82 commit 3676fe0

6 files changed

Lines changed: 36 additions & 28 deletions

File tree

‎biophi/common/web/templates/index.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
{% block header %}
44
{% if not oasis_enabled %}
5-
<div class="bg-warning text-dark p-2">OASis DB path is not configured, OASis peptide humanness evaluation will not be available.</div>
5+
<div class="bg-warning text-dark p-2">OASIS_DB_PATH is not configured, OASis peptide humanness evaluation will not be available.</div>
66
{% endif %}
77
<div id="header">
88
<div class="container">
@@ -47,7 +47,7 @@ <h5 class="card-title">Designer</h5>
4747
<div class="container">
4848
<div class="row gx-5 mb-5">
4949
<div class="col-lg-7 col-md-8">
50-
<h1 class="display-6 mb-3">News</h1>
50+
<h1 class="fs-2 fw-light mb-3">News</h1>
5151
<div class="list-group list-group-flush" id="news">
5252
{% for item in news[:5] %}
5353
<div class="list-group-item">
@@ -59,7 +59,7 @@ <h5 class="mb-1">{{ item.title }}</h5>
5959
</div>
6060
{% endfor %}
6161
</div>
62-
<h1 class="display-6 mb-3 mt-3">Acknowledgements</h1>
62+
<h1 class="fs-2 fw-light mb-3 mt-3">Acknowledgements</h1>
6363
<p>If you use BioPhi, please cite:</p>
6464
<p>TBD</p>
6565
<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>
6868
</div>
6969

7070
<div class="col-lg-5 col-md-4">
71-
<h1 class="display-6 mb-3">Contributing</h1>
71+
<h1 class="fs-2 fw-light mb-3">Contributing</h1>
7272
<p>
7373
BioPhi is an open-source platform,
7474
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.
7575
</p>
7676
<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>
77-
<div class="text-end">
78-
<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>
79-
</div>
77+
<p>Follow BioPhi on Twitter to get the latest news:</p>
78+
<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>
8079
<a class="invisible twitter-timeline" data-height="600" data-dnt="true" href="https://twitter.com/BioPhi?ref_src=twsrc%5Etfw">Tweets by BioPhi</a>
8180
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
8281
</div>

‎biophi/humanization/web/static/humanization.css‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,20 @@
9292
cursor: default;
9393
}
9494

95-
.designer-line a:not([href]) {
96-
cursor: default;
97-
}
9895

99-
.designer-line:not(.designer-parental-line) a:not(:hover):not(.aa-match) {
100-
background: white !important;
96+
.designer-line a, .designer-line span {
97+
position: relative;
98+
display: inline-block;
99+
height: 21px;
100+
line-height: 20px;
101+
font-size: 13.5px;
102+
width: 8.5px;
103+
box-sizing: content-box;
104+
vertical-align: top;
105+
text-align: center;
106+
text-decoration: none;
107+
color: #000000;
108+
position: relative;
101109
}
102110

103111
.designer-line a[href]:hover, .designer-line.designer-result-line span:hover, .designer-line .active {

‎biophi/humanization/web/templates/humanization/designer_detail.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,8 @@ <h4 class="fw-light mt-3">Light chain</h4>
155155
%}<span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" data-tooltip-classes="tooltip-medium" data-result-pos="{{ pos }}"
156156
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 %}"
157157
title="Result {{ pos_tooltip(pos) }}<br>{{ aa_name(aa) }}<br>Click to enter mutation"
158-
style="background-color: rgb(255, {{ 255 - num_non_human**0.80 * 30 }}, {{ 255 - num_non_human**0.65 * 40 }});">{{ aa }}</span>{%
158+
style="background-color: rgb(255, {{ 255 - num_non_human**0.80 * 30 }}, {{ 255 - num_non_human**0.65 * 40 }});"
159+
>{{ aa }}</span>{%
159160
endfor %}
160161
Result
161162
</div>
@@ -186,36 +187,35 @@ <h4 class="fw-light mt-3">Light chain</h4>
186187
<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 }}">
187188
<div class="mb-2 font-monospace text-nowrap fs-smaller">
188189
{% for scores in humanization.get_top_scores(5, next=True) %}
189-
<div class="hum-designer-scores designer-line">
190+
<div class="suggested-mutations designer-line">
190191
{% for pos, aa, score in scores
191192
%}{% if score > MIN_SAPIENS_SCORE %}<a
192193
{% if aa != humanized_humanness.chain[pos] %} href="{{ url_for_arg(pos=pos, aa=aa, tab='sapiens', relative=True) }}" data-pos="{{ pos }}" {% endif %}
193194
data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"
194195
title="{{ mutation_tooltip(pos, humanized_humanness.chain[pos], aa) }}
195196
<br>{{ '{:.0%}'.format(score) }} Sapiens score"
196-
{% if humanized_humanness.chain[pos] == aa %}class="aa-match"{% endif %}
197197
style="background: rgb({{255-score**0.5*100}},{{255-score**0.5*150}},{{255}});"
198-
>{{aa}}</a>{% else %}<span></span>{% endif %}{%
198+
>{{ aa if humanized_humanness.chain[pos] != aa else '·' }}</a>{% else %}<span></span>{% endif %}{%
199199
endfor %}
200-
#{{ loop.index }} Sapiens score
200+
Top #{{ loop.index }} score
201201
</div>
202202
{% endfor %}
203203
</div>
204204
</div>
205205
<div class="tab-pane {% if tab == 'freq' %}show active{% endif %}" id="pills-freq-{{ id }}" role="tabpanel" aria-labelledby="pills-freq-tab-{{ id }}">
206206
<div class="mb-2 font-monospace text-nowrap fs-smaller">
207207
{% for freqs in humanized_humanness.get_top_freqs(5) %}
208-
<div class="hum-designer-scores designer-line">
208+
<div class="suggested-mutations designer-line">
209209
{% for pos, aa, freq in freqs
210210
%}{% if freq > MIN_FAMILY_FREQ %}<a
211211
{% if aa != humanized_humanness.chain[pos] %} href="{{ url_for_arg(pos=pos, aa=aa, tab='freq', relative=True) }}" data-pos="{{ pos }}" {% endif %}
212212
data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"
213213
title="{{ mutation_tooltip(pos, humanized_humanness.chain[pos], aa) }}
214214
<br>{{ '{:.0%}'.format(freq) }} frequency in {{ humanized_humanness.v_germline_family }}"
215-
{% if humanized_humanness.chain[pos] == aa %}class="aa-match"{% endif %}
216-
style="background: rgb({{255-freq**0.5*255}},{{255-freq**0.5*100}},{{255-freq**0.5*100}});">{{ aa }}</a>{% else %}<span></span>{% endif %}{%
215+
style="background: rgb({{255-freq**0.5*255}},{{255-freq**0.5*100}},{{255-freq**0.5*100}});"
216+
>{{ aa if humanized_humanness.chain[pos] != aa else '·' }}</a>{% else %}<span></span>{% endif %}{%
217217
endfor %}
218-
#{{ loop.index }} at germline position
218+
Top #{{ loop.index }} frequency
219219
</div>
220220
{% endfor %}
221221
</div>
@@ -230,8 +230,8 @@ <h4 class="fw-light mt-3">Light chain</h4>
230230
%}{% set germline_aa = v_germlines[i][imgt_pos] or j_germlines[i][imgt_pos] or '-' %}<a
231231
data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom" title="{{ mutation_tooltip(pos, seq_aa, germline_aa) }}"
232232
{% 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 %}
233-
{% if seq_aa == germline_aa %}class="aa-match"{% endif %}
234-
style="background: #b3f7b3; {% if pos.is_in_cdr() %}opacity: 0.6;{% endif %}">{{ germline_aa }}</a>{%
233+
style="background:rgb(200, 255, 200); {% if pos.is_in_cdr() %}opacity: 0.6;{% endif %}"
234+
>{{ germline_aa if humanized_humanness.chain[pos] != germline_aa else '·' }}</a>{%
235235
endfor %}
236236
{{ v_germlines[i].name }}, {{ j_germlines[i].name }}
237237
</div>

‎biophi/humanization/web/templates/humanization/humanize_detail.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="mb-3 text-end dropdown">
2424
<div class="d-inline-block">
2525
<a class="btn btn-light" href="{{ url_for('biophi_humanization.humanize_get', humanize_task_id=task_id, index=result_index) }}">
26-
{{ icon('arrow-repeat') }} Re-run
26+
{{ icon('arrow-repeat') }} Change settings
2727
</a>
2828
</div>
2929
<div class="d-inline-block">

‎biophi/humanization/web/templates/humanization/humanize_results.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,21 @@
1212
{% block main %}
1313

1414
<div class="mb-3 mt-3 row">
15-
<div class="col-8">
15+
<div class="col-3">
1616
<a class="btn btn-light" href="{{ url_for('biophi_humanization.humanize_get') }}">
1717
{{ icon('chevron-left') }} Input
1818
</a>
1919
</div>
2020

21-
<div class="col-4 text-end">
21+
<div class="col-9 text-end">
2222
{% if show == 'alignments' %}
2323
<a class="btn btn-light" href="{{ url_for_arg(show='table') }}">{{ icon('table') }} Show table</a>
2424
{% else %}
2525
<a class="btn btn-light" href="{{ url_for_arg(show='alignments') }}">{{ icon('list-nested') }} Show alignments</a>
2626
{% endif %}
2727
<div class="d-inline-block">
2828
<a class="btn btn-light" href="{{ url_for('biophi_humanization.humanize_get', humanize_task_id=task_id) }}">
29-
{{ icon('arrow-repeat') }} Re-run
29+
{{ icon('arrow-repeat') }} Change settings
3030
</a>
3131
</div>
3232
<div class="dropdown d-inline-block">

‎biophi/humanization/web/views.py‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,8 @@ def designer_detail_get(task_id):
294294
aa = request.args.get('aa')
295295

296296
try:
297-
result: HumanizeAntibodyTaskResult = scheduler.get_result(task_id, timeout=15)
297+
timeout = 15 if pos and aa else 5
298+
result: HumanizeAntibodyTaskResult = scheduler.get_result(task_id, timeout=timeout)
298299
except TimeoutError:
299300
return render_template('loading.html', active_nav='designer')
300301

0 commit comments

Comments
 (0)