-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
746 lines (702 loc) · 31.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta
name="description"
content="AlignmentViewer is multiple sequence alignment viewer for protein families with flexible visualization, analysis tools and links to protein family databases. It is directly accessible in web browsers without the need for software installation, as it is implemented in JavaScript, and does not require an internet connection to function. It can handle protein families with tens of thousand of sequences and is particularly suitable for evolutionary coupling analysis, preparing the computation of protein 3D structures and detection of functionally constrained interactions."
/>
<meta
name="keywords"
content="alignment viewer, proteins, MSA, multiple sequence alignment, sanderlab, evolutionary couplings, families, analysis"
/>
<title>AlignmentViewer</title>
<style type="text/css">
html {
font-family: sans-serif;
margin: 1% 1% 1% 1%;
background: #fff;
background: #fff -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(100%, #e0e0e0)) fixed;
background: #fff -o-linear-gradient(#fff, #e0e0e0) fixed;
background: #fff -ms-linear-gradient(#fff, #e0e0e0) fixed;
background: #fff linear-gradient(#fff, #e0e0e0) fixed;
background: #fff -webkit-linear-gradient(#fff, #e0e0e0) fixed;
background: #fff -moz-linear-gradient(#fff, #e0e0e0) fixed;
}
a {
color: #3e3f61;
cursor: pointer;
text-decoration: none;
border-bottom: 1px dotted;
}
#progress {
display: none;
position: fixed;
left: 44%;
top: 44%;
margin-left: auto;
margin-right: auto;
padding: 3% 3% 3% 3%;
background: #a1b4cc;
border-style: dotted;
border-width: 1px;
border-color: #585989;
color: #585989;
font-family: Trebuchet MS, Verdana;
font-size: 18px;
box-shadow: 0 0 30px 5px #999;
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
.dim {
color: #a1b4cc;
}
.filectrl {
background-color: #fff;
width: 150px;
}
.tblhead {
background: grey;
}
.button {
font-family: Trebuchet MS, Verdana;
font-size: 16px;
font-weight: bold;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
border: 1px solid #a1b4cc;
}
.button2 {
height: 24px;
font-size: 10px;
vertical-align: text-top;
}
.btnPressed {
color: #3e3f61;
background: none;
border: 1px dotted #3e3f61;
}
.btnReleased {
color: white;
background: #a1b4cc;
border: 1px solid #a1b4cc;
}
.plot_border {
border: 1px dotted #7792ba;
}
.hpadding {
padding-left: 10px;
}
.title {
font-family: Trebuchet MS, Verdana;
letter-spacing: -0.08em;
font-size: 36px;
font-weight: bold;
}
.ctrlval {
color: navy;
font-weight: bold;
}
.dense {
line-height: 80%;
}
.lt {
color: grey;
}
.bgl {
background-color: #aaa;
}
.tiny {
font-family: Trebuchet MS, Verdana;
font-size: 12px;
}
.text {
font-family: Trebuchet MS, Verdana;
font-size: 14px;
font-weight: normal;
}
.textB {
font-family: Trebuchet MS, Verdana;
font-size: 14px;
font-weight: bold;
}
.title2 {
font-size: 14px;
letter-spacing: 0em;
}
.enter {
width: 8em;
}
li {
margin: 0.5em 0;
}
button {
color: #555;
}
ul {
list-style-type: none;
padding: 2em;
margin: 1em;
}
.bar {
fill: steelblue;
}
.c1 {
stroke: none;
fill: #33cc00;
}
.c2 {
stroke: none;
fill: #009900;
}
.c3 {
stroke: none;
fill: yellow;
}
.c4 {
stroke: none;
fill: #cc0000;
}
.c5 {
stroke: none;
fill: #0033ff;
}
.c6 {
stroke: none;
fill: #6600cc;
}
.c7 {
stroke: none;
fill: #0099ff;
}
.c8 {
stroke: none;
fill: #666666;
}
.c9 {
stroke: none;
fill: #999999;
}
body.clustal .c1{
color: purple;
}
body.clustal.c2{
color: yellow;
}
@import url('https://fonts.googleapis.com/css?family=Anton');
.alignmentviewer-title {
font-family: 'Anton', sans-serif;
font-size: 3em;
}
</style>
<link type="text/css" href="vendor/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="vendor/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="vendor/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="vendor/d3.v2.min.js"></script>
<script type="text/javascript" src="speclist.2012_09.js"></script>
<!-- before seqlib.js -->
<link type="text/css" href="seqlib.css" rel="stylesheet" />
<script type="text/javascript" src="seqlib.js"></script>
<script type="text/javascript" src="SequenceLogoDiagramD3.js"></script>
<script type="text/javascript" src="CouplingsLogoDiagramD3.js"></script>
<script type="text/javascript" src="KMinsClustering.js"></script>
<script type="text/javascript" src="MultipleSequenceAlignment.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-57486113-7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-57486113-7');
</script>
</head>
<body>
<!-- ______________________________________________________ site header table ___________________________________________________ -->
<table border="0">
<tr>
<td align="left" style="vertical-align:top;" nowrap>
<span class="tc1 alignmentviewer-title">ALIGNMENTVIEWER</span><br />
<span style="line-height:96%">
<span class="title title2 tc1">protein multiple sequence alignment visualization & analysis</span><br />
<span class="title title2 tc2">in-browser computationally intensive tool, Firefox or Chrome browsers prefered</span
><br />
<span class="tiny tc3">release 1.0</span><br /></span
><br />
<a class="button btnPressed" id="btn1">about</a>
<span id="buttons" style="display:none;">
<span class="tc2">|</span> <a class="button btnReleased" id="btn2">msa view</a>
<span class="tc2"> |</span> <a class="button btnReleased" id="btn4">image view</a> <span class="tc2">|</span>
<a class="button btnReleased" id="btn8">sequence space</a> <span class="tc2">|</span>
<a class="button btnReleased" id="btn3">stats view</a> <span class="tc2">|</span>
<a class="button btnReleased" id="btn5">upload annotations</a> <span class="tc2">|</span>
<a class="button btnReleased" id="btn6">load couplings</a>
<span class="tc2">
<!--|</span>-->
<!--<a class='button btnReleased' id='btn7'> Load couplings </a>--> </span
><br /><span style="font-size:3px;"><br /></span
></span>
</td>
<td align="right" valign="bottom" width="99%" nowrap></td>
<td class="textB tc0 tc4bg" align="left" valign="bottom" style="padding:15px;" nowrap>
<span style="line-height:98%">
Drag and drop to this page or load below multiple sequence<br />
alignment file in plain text, STOCKHOLM or FASTA format.<br />
Or use example alignment:
<a onclick="PullMsaExample()">1bkr:A</a>
<span style="font-size:5px;"><br /></span
></span>
<input type="file" class="filectrl" id="files" size="40" /><br />
</td>
</tr>
<tr>
<td class="tc4bg" colspan="3" height="2"></td>
</tr>
</table>
<br />
<!-- ______________________________________________________ image view ___________________________________________________ -->
<table id="IMGview" border="0" cellpadding="1" cellspacing="1" style="display:none;">
<tr>
<td class="text">
<br />
<table class="text">
<tr>
<td nowrap>
Generate msa image using
<select id="msaImgClrSelect">
<option value="1">mview</option>
<option value="2">clustal</option>
<option value="3">hydrophobicity</option>
<!--<option value="4">Mutations</option>-->
</select>
coloring :
</td>
<td style="padding-left:50px;" nowrap>
<button id="imageApply" style="height:24px; font-size:10px; vertical-align:text-top;">apply</button>
</td>
</tr>
</table>
<table>
<tr>
<td class="text lt" align="right" nowrap>residue width in pixels: <span id="imageResidW"></span></td>
<td class="text" style="padding-left:15px;">
<div id="imageResidWSlider" style="width: 200px; height:6px;"></div>
</td>
</tr>
<tr>
<td class="text lt" align="right" nowrap>residue height in pixels: <span id="imageResidH"></span></td>
<td class="text" style="padding-left:15px;">
<div id="imageResidHSlider" style="width: 200px; height:6px;"></div>
</td>
</tr>
</table>
<br /><br />
<canvas class="plot_border" id="msaImage" width="100" height="100" style="margin-top:6px;"></canvas>
<br /><br /><br /><br /><br /><br /><br /><br />
</td>
</tr>
</table>
<!-- ______________________________________________________ stats view ____________________________________________________ -->
<table id="STAview" border="0" style="display:none;">
<tr>
<td valign="top">
<span class="textB">Sequence <span class="tc2">gaps</span> & <span style="color:#f5a742">ref.seq identity</span></span
><span class="text text2"> - amount of sequences with given fraction of gaps/identity (sorted by ranking)</span>
<div id="MSAstats"></div>
</td>
<td class="text" valign="top"></td>
</tr>
<tr>
<td class="text">
<span class="textB">Pairwise identity </span><span id="pairwise_status"> </span>
<div class="plot_border tc3" id="MSApairwise" style="margin-top:6px; width:700px; height:300px;">
<div style="position:relative;top:40%;text-align:center;z-index:100;font-size: 40px">
<a id="pairwise_start_btn" style="color:#ff0000">calculate </a></div>
</div>
</td>
<td class="text" valign="top"></td>
</tr>
<tr>
<td class="text">
<div class="textB" style="margin-top:40px;">Pairwise identity 2D map</div>
<canvas class="plot_border" id="MSApairwiseMap" width="700" height="700" style="margin-top:6px;"></canvas><br />
</td>
<td class="text" valign="top">
<ul class="text" style="line-height:90%">
<li><span style="background-color:#ffffff"> </span> 0</li>
<li><span style="background-color:#d8d8ff"> </span> 0.1</li>
<li><span style="background-color:#ccccff"> </span> 0.2</li>
<li><span style="background-color:#a8a8ff"> </span> 0.3</li>
<li><span style="background-color:#9999ff"> </span> 0.4</li>
<li><span style="background-color:#7878ff"> </span> 0.5</li>
<li><span style="background-color:#6666ff"> </span> 0.6</li>
<li><span style="background-color:#4848ff"> </span> 0.7</li>
<li><span style="background-color:#3333ff"> </span> 0.8</li>
<li><span style="background-color:#1919ff"> </span> 0.9</li>
<li><span style="background-color:#0000ff"> </span> 1</li>
</ul>
</td>
</tr>
<!--<tr><td class='text'>
<div class='textB' style='margin-top:6px;'>Pairwise identity force-directed graph</div>
<div class='plot_border' id='MSApairwiseGraph' style='width:700p; height:700;'></div>
</td><td class='text' valign='top'>
<ul class='text'>
<li>lowest seq.identity to include in graph : <span id='graphSliderVal'></span></li>
<li><div id='graphSlider'></div></li>
<li><button id='graphApply'>rebuild graph</button> <button id='graphClear'>clear graph</button></li>
</ul>
</td>
</tr>-->
<tr>
<td class="text"></td>
<td class="text" valign="top"></td>
</tr>
</table>
<!-- ______________________________________________________ MSA species view _______________________________________________ -->
<table id="SPEview" border="0" cellpadding="1" cellspacing="1" style="display:none;">
<tr>
<td class="text">
<!-- <svg class='plot_border' id='specburst'></svg> -->
This function allows to load coupling scores sorted by importance to display contacts on the MSA.<br />
The 1bkr:A coupling scores can be downloaded <a href="https://alignmentviewer.org/example/1bkr_A_CouplingScores.csv" target="_blank">here</a>. <br />
Prerequisite: the file format is a comma-separated file (.csv), such as what gets outputted by <a href="evcouplings.org" target="_blank">evcouplings.org</a> when selecting the "Raw Evolutionary Couplings (EC) table" option. <br />
An example:<br />
<pre>
i,A_i,j,A_j,fn,cn,segment_i,segment_j,probability
49,V,69,M,0,0.050877,A,A,0.9985961719887426
57,S,65,D,0,0.045328,A,A,0.9918500685696678
52,R,73,V,0,0.042749,A,A,0.9835481279392891
</pre>
Once loaded, the MSA view tab will display colored ellipses.<br />
The same colored ellipse on two different residues represents a contact between the pair. <br />
A maximum of 20 ellipses will be displayed.<br />
<input type="file" class="filectrl" id="customdata2" size="40" /><br />
<br />
<div id="cdatStatus2"></div>
</td>
</tr>
</table>
<!-- ______________________________________________________ MSA custom couplings view ___________________________________________ -->
<table id="couplings" border="0" cellpadding="1" cellspacing="1" style="display:none;">
<tr>
<td class="text">
Load the couplings already sorted by strength. The residues start from the position zero.<br />
File format is tab-separated text file with two columns: the position numbers of the coupled residues (position A
contacts position B)<br />
Not all positions have to be present and only few will be displayed.<br /><br />
<input type="file" class="filectrl" id="customdata2" size="40" /><br />
<br />
<div id="cdatStatus2"></div>
</td>
</tr>
</table>
<!-- ______________________________________________________ MSA custom data view ___________________________________________ -->
<table id="DATview" border="0" cellpadding="1" cellspacing="1" style="display:none;">
<tr>
<td class="text">
Load custom sequence annotation to be shown along the alignment as sortable column.<br />
File format is tab-separated text file with two columns: sequence name as in your multiple sequence alignment
(MYG_HUMAN/1-154), annotation (numerical or text).<br />
The example for 1bkr:A can be downloaded <a href="https://alignmentviewer.org/example/1bkr_A.1-108.msa_annotations.txt" target="_blank">here</a>. <br />
Not all sequence names have to be present - can provide as few as one to move it up when sorted.<br />
Position of reference sequence is maintained in sorted msa.<br /><br />
<input type="file" class="filectrl" id="customdata" size="40" /><br />
<br />
<div id="cdatStatus"></div>
</td>
</tr>
</table>
<!-- ______________________________________________________ MSA view ______________________________________________________ -->
<table id="MSAview" border="0" cellpadding="1" cellspacing="1" style="display:none;">
<tr>
<td></td>
<td class="text" colspan="11" nowrap>
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td class="text" nowrap>
<span class="tc2">
ident1% = fraction of reference sequence identical to second sequence (gaps not counted)<br />
ident2% = fraction of second sequence identical to reference sequence (gaps not counted)<br /> </span
><span style="font-size:5px;"><br /></span>
Sequence order:
<select id="order">
<option value="orderOrig">original</option>
<option value="orderIdent1">identity1</option>
<option value="orderIdent2">identity2</option> </select
><br />
Coloring Scheme:
<select id="colorScheme">
<option value="original" style="background-color: blue">mview (default)</option>
<option value="clustal" style="background-color: green">clustal</option>
</select>
<br/>
<span style="font-size:5px;"><br /></span>
<input type="checkbox" id="CHKspecies" /> show species
<span class="lt">(kingdom code: A-archaea B-bacteria E-eukaryota V-viruses, Uniprot IDs required)</span><br />
<input type="checkbox" id="CHKinfo" /> show sequence annotation
<span class="lt">(any text after sequence name)</span><br />
<input type="checkbox" id="CHKpfam" /> link to protein Pfam domain structure page<br />
<input type="checkbox" id="CHKcustom" /> custom annotations <span class="lt">(see tab <i>custom data</i>)</span
><br />
<input type="checkbox" id="CHKconservation" /> gap & conservation bar chart<br />
<input type="checkbox" id="CHKseqlogo" /> sequence logo<br />
<span style="font-size:5px"><br /></span>
Color columns with conservation higher than: <span id="colorSliderVal"></span><br />
<table class="text">
<tr>
<td nowrap><div id="colorSlider" style="width: 300px; height:6px;"></div></td>
<td>
<button id="colorApply" style="height:24px; font-size:10px; vertical-align:text-top;">
apply
</button>
</td>
</tr>
</table>
<span style="font-size:5px"><br /></span>
<div id="pagingCtrl">
<span class="ctrlval">Currently showing sequences: <span id="sliderPageVal"></span></span><br />
<span style="font-size:5px"><br /></span>
<div
style="width: 300px; height:6px;"
id="sliderPage"
class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
>
<a class="ui-slider-handle ui-state-default ui-corner-all ui-state-focus" href="#" style="left: 0%;"></a>
</div>
</div>
</td>
<td class="text hpadding" valign="top" nowrap>
<table class="text" border="0" cellspacing="1" cellpadding="10" width="340">
<tr>
<td class="hpadding textB" bgcolor="#d0d0e0" style="color:white">Filtering</td>
</tr>
<tr>
<td class="hpadding" nowrap bgcolor="#f0f0f0">
<span style="font-size:5px"><br /></span>
Hide sequences with gaps higher than <span id="sliderFilterGapsVal"></span><br />
<span style="font-size:4px"><br /></span>
<div id="sliderFilterGaps" style="width: 250px; height:6px;"></div>
<span style="font-size:10px"><br /></span>
Hide sequences with identity1 lower than <span id="sliderFilterIdentVal"></span><br />
<span style="font-size:4px"><br /></span>
<div id="sliderFilterIdent" style="width: 250px; height:6px;"></div>
<br />
<!--
<input type="checkbox" id="CHKrfgaps">
Hide columns with gaps in reference sequence<br>
-->
</td>
</tr>
<tr>
<td class="hpadding" align="middle" nowrap bgcolor="#f0f0f0">
<span id="filterStatus"></span>
<span style="font-size:4px"><br /></span>
<button id="filterExport" style="height:24px; font-size:10px; vertical-align:text-top;">
export
</button>
<button id="filterApply" style="height:24px; font-size:10px; vertical-align:text-top;">
apply
</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="12"></td>
<td align="left" nowrap>
<div id="labeled_plot_canvas">
<span class="textB"><span class="tc3">gaps</span>/<span class="tc1">conservation</span></span>
<div id="plot_canvas" class=""></div>
</div>
</td>
</tr>
<tr>
<!-- ___ MSA logo __________ -->
<td colspan="12"></td>
<td align="left" nowrap><div id="seqlogo"></div></td>
</tr>
<tr>
<!-- ___ MSA logo __________ -->
<td colspan="12"></td>
<td align="left" nowrap><div id="couplingslogo"></div></td>
</tr>
<tr>
<td align="right" nowrap><!-- ___ MSA header/plots ___ --></td>
<td align="right" nowrap></td>
<td></td>
<td></td>
<td align="right" style="vertical-align:bottom;" nowrap>
<div class="tc2 tblheader" id="MSAcustomAH"></div>
</td>
<td align="right" style="vertical-align:bottom;" nowrap>
<div class="tc2 tblheader" id="MSAcustomBH"></div>
</td>
<td class="hpadding" style="vertical-align:bottom;">
<div class="tc2 tblheader" id="MSAspeciesH">species</div>
</td>
<td align="center" style="vertical-align:bottom;">
<div class="tc2 tblheader" id="MSApfamH">pfam</div>
</td>
<td align="right" style="vertical-align:bottom;" nowrap>
<div class="tc2 tblheader">gaps%</div>
</td>
<td align="right" style="vertical-align:bottom;" nowrap>
<div class="tc2 tblheader">ident1%</div>
</td>
<td align="right" style="vertical-align:bottom;" nowrap>
<div class="tc2 tblheader">ident2%</div>
</td>
<td width="20px"></td>
<td align="left" nowrap><div id="MSAruler" class="ali tc2"></div></td>
</tr>
<tr>
<!-- ___ MSA body ___________ -->
<td align="right" nowrap>
<div class="ali dim" id="MSArows"></div>
</td>
<td align="right" nowrap>
<div class="ali dim" id="MSArows2"></div>
</td>
<td class="hpadding" align="left" nowrap>
<div class="ali" id="MSAnames"></div>
</td>
<td align="left" nowrap>
<div class="ali" id="MSAinfo"></div>
</td>
<td align="right" nowrap>
<div class="ali tc1" id="MSAcustomA"></div>
</td>
<td align="right" nowrap>
<div class="ali tc1" id="MSAcustomB"></div>
</td>
<td class="hpadding" align="left" nowrap>
<div class="ali" id="MSAspecies"></div>
</td>
<td class="hpadding" align="left" nowrap>
<div class="ali" id="MSApfam"></div>
</td>
<td class="hpadding" align="left" nowrap>
<div class="ali tc1" id="MSAgaps" align="right"></div>
</td>
<td class="hpadding" align="left" nowrap>
<div class="ali tc1" id="MSAident1" align="right"></div>
</td>
<td class="hpadding" align="left" nowrap>
<div class="ali tc1" id="MSAident2" align="right"></div>
</td>
<td width="20px">
</td>
<td align="left" nowrap>
<div class="ali" id="MSAseqs" style="color:grey"></div>
</td>
</tr>
</table>
<!-- ______________________________________________________ UMAP view ______________________________________________________ -->
<table border="0" cellpadding="1" cellspacing="1" style="display:none;" id="UMAPview">
<tr>
<td class="text">
Sequence space view of <span id="num-umap-seqs"></span> sequences from the multiple sequence alignment.<br />
Dimensionality reduction is carried out using the UMAP algorithm (<a href="https://arxiv.org/abs/1802.03426"
>arXiv e-print</a
>) as implemented using umap-js (<a href="https://github.com/PAIR-code/umap-js">github</a>).
<br />
To visualize sequence classes, please <a id="link1">upload an annotation.</a>
<br />
<br />
</td>
</tr>
<tr>
<td class="text">
<iframe id="bb-viz-iframe"></iframe>
</td>
</tr>
</table>
<!-- ______________________________________________________ about view ____________________________________________ -->
<table border="0" cellpadding="1" cellspacing="1" style="display:block;" id="ABTview">
<tr>
<td class="text">
<br />Protein multiple sequence alignment viewer provides simple analysis plots and pairwise identity visualization.
<br />
This tool is entirely client based (runs inside your browser, Firefox or Chrome browsers prefered), there is no
communication<br />
with the server (except when pulling example alignments), so you can save local copy of this page and use it while
offline.<br /><br />
If you have any questions or requests please don't hesitate to contact us at alignmentviewer@gmail.com<br />
The source code for this tool is at:
<a href="https://github.com/sanderlab/alignmentviewer">https://github.com/sanderlab/alignmentviewer</a>.
<!--
<img style='vertical-align:text-bottom;' src='yamail.png'>
-->
<br /><br />
<hr height="2" width="300" color="#d0d0d0" align="left" />
<br /><br />
<b>Oct. 2nd 2020</b> /// Added clustal coloring on msa view and image view <br />
<b>Sept. 20th 2020</b> /// Fixed safari loading bug, allowed reloading of sequences<br />
<b>Aug. 15th 2019</b> /// Fixed bugs, removed comments, and improved modularity<br />
<b>Jul. 18th 2019</b> /// Implemented UMAP<br />
<b>Aug. 1st 2018</b> /// <a href="http://evcouplings.org" target="_blank">evcouplings.org</a> uses AlignmentViewer to view alignments<br />
<b>Jul. 1st 2018</b> /// Load external alignments via URL queries (e.g.: alignmentviewer.com/?url=https%3A%2F%2Fmyserver.org%2Falignments%2Fmy_alignment)<br />
<b>Jan. 7th 2018</b> /// Preloaded example<br />
<b>Nov. 29th 2017</b> /// Released version 1.0<br />
<b>Jul. 5th 2017</b> /// Mutation comparison added.<br />
<b>May. 20th 2017</b> /// Weight comparison functions added.<br />
<b>Mar. 17th 2014</b> /// Sequence logo display added.<br />
<b>Jan. 2nd 2013</b> /// Filtering and export supported.<br />
<b>Dec. 24th 2012</b> /// Custom sequence annotation as sortable msa column supported now, see "Custom Data" tab.<br />
<b>Dec. 13th 2012</b> /// Added MSA image rendering with mview or hydrophobicity coloring.<br />
<b>Nov. 11th 2012</b> /// Release 0.5 is out, changes: sorting by identity, conservation coloring control, Pfam links,
drag and drop your alignment file anywhere on the page to load!
<br /><br />
<hr height="2" width="300" color="#d0d0d0" align="left" />
<br />
<h4><b>Privacy Policy</b></h4>
This website makes use of google analytics to measure website visits and traffic patterns through the use of browser
cookies. There is no advertising on this site. For a full description, see
<a href="http://www.google.com/policies/privacy/partners/">www.google.com/policies/privacy/partners/</a>. <br />
Visitors who disable cookies on their browser or use private/incognito browsing should still be able to access the full
functionality of this website.<br /><br />
</td>
</tr>
</table>
<div id="progress"></div>
<script>
$(document).ready(function () {
$('body').on('change','#colorScheme', function() {
document.getElementById("seqlogo").className = this.value;
document.getElementById("MSAseqs").className = 'ali ' + this.value;
//##ROC# > This code it is because for safari and Firefox the logo did not change colors uless the tab was manually changed
//btn2: '#MSAview',
//btn3: '#STAview',
var view = '#STAview'; // button id --> view id
if ($(view).is(':visible')) {
return;
} // already active, do nothing
$('[id$=view]')
.not(view)
.hide(); // select all views except current, hide
$(view).show(); // show current
var view = '#MSAview'; // button id --> view id
if ($(view).is(':visible')) {
return;
} // already active, do nothing
$('[id$=view]')
.not(view)
.hide(); // select all views except current, hide
$(view).show(); // show current
//console.log('done logo color');
});
});
// original
// clustal
</script>
</body>
</html>