-
Notifications
You must be signed in to change notification settings - Fork 5
/
index3.html
113 lines (98 loc) · 3.67 KB
/
index3.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
<DOCTYPE html>
<html lang="en">
<head>
<title>JSAV</title>
<!-- JQuery and JQuery-UI -->
<link href="external/jquery.css" rel="stylesheet" />
<script type='text/javascript' src='external/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='external/jquery-ui-1.10.4.custom.min.js'></script>
<!-- JSAV -->
<link href="JSAV.css" rel="stylesheet" />
<script type='text/javascript' src='JSAV.js'></script>
<!-- If using tooltipster -->
<link href="external/tooltipster-master/css/tooltipster.css" rel="stylesheet" />
<script type='text/javascript' src='external/tooltipster-master/js/jquery.tooltipster.min.js'></script>
<script>
function enableTooltipster()
{
$(document).ready(function() {
$('.tooltip').tooltipster();
});
}
enableTooltipster();
</script>
<!-- END -->
</head>
<body>
<script type='text/javascript'>
var MySeqs = [];
MySeqs.push({ id :"id1b1.L", sequence :"SASSSVNYMYACREFGHIKLMNPTRSTVWY"});
MySeqs.push({ id :"id1a.L", sequence :"SASSSTNYMYACDEFGHIKLMNPQRSTVWY"});
MySeqs.push({ id :"id2b1.L", sequence :"SASSTCNYMTACDEEGHIKLMNP-RSTCWY"});
MySeqs.push({ id :"id2a.L", sequence :"SASSSCNYMTLCDEHGHIKLMNP-RSTCWY"});
MySeqs.push({ id :"id2a1.L", sequence :"SASSSCNYMTLCDEHGHIKLMNPQRSTCWY"});
MySeqs.push({ id :"id1.L", sequence :"SASSSVNYMYACDEFGHIKLMNPQRSTVWY"});
MySeqs.push({ id :"id1b.L", sequence :"SASSSVNYMYACREFGHIKLMNPQRSTVWY"});
MySeqs.push({ id :"id1a1.L", sequence :"SASSSTNYMYLCDEFGHIKLMNPQRSTVWY"});
MySeqs.push({ id :"id2.L", sequence :"SASSSCNYMTACDEHGHIKLMNP-RSTCWY"});
MySeqs.push({ id :"id2b.L", sequence :"SASSTCNYMTACDEHGHIKLMNP-RSTCWY"});
</script>
<h1>JavaScript Sequence Alignment Viewer (JSAV)</h1>
<p>JSAV is a JavaScript program to display and sort a sequence
alignment. The sorting method chooses a representative sequence (one
which is most similar to all the other sequences) placing that first
in the list. To add to the sorted list, it iteratively chooses the
sequences that are most similar to the last one in the list and, of
those chooses the sequence most similar to the representative
sequence.</p>
<p>Sequences are:</p>
<script type='text/javascript'>
function myAction(divId, sequences)
{
var seqString = "";
for(var i=0; i<sequences.length; i++)
{
seqString += ">" + sequences[i].id + "\n";
seqString += sequences[i].sequence + "\n";
}
alert(seqString);
}
var MyOptions = Array();
MyOptions.sortable = true;
MyOptions.selectable = true;
MyOptions.deletable = true;
MyOptions.border = false;
MyOptions.highlight = [3,5,10,14];
MyOptions.submit = "http://www.bioinf.org.uk/cgi-bin/echo.pl";
MyOptions.submitLabel = "Submit";
MyOptions.action = "myAction";
MyOptions.actionLabel = "Process";
MyOptions.toggleDotify = true;
MyOptions.toggleDotifyLabel = "Dotify";
MyOptions.toggleNocolour = true;
MyOptions.toggleNocolourLabel = "Nocolour";
MyOptions.fasta = true;
MyOptions.fastaLabel = "Export";
MyOptions.consensus = true;
MyOptions.colourScheme = "zappo";
MyOptions.selectColour = true;
MyOptions.callback = "enableTooltipster";
MyOptions.colourChoices = ["Taylor", "Clustal", "Zappo", "HPhob"];
MyOptions.idSubmit = "http://www.bioinf.org.uk/cgi-bin/echo.pl?seq=";
MyOptions.idSubmitClean = true;
printJSAV('sequenceDisplay', MySeqs, MyOptions);
</script>
<p>Input to the JavaScript is simply an array of sequences in
the form:</p>
<pre>
sequences[0] = { id :"id1b1.L", sequence :"SASSSVNYMYACREFGHIKLMNPTRSTVWY"};
</pre>
<p>and the display and sorter is created with</p>
<pre>
printJSAV('sequenceDisplay', sequences, options);
sequenceDisplay - div in which to display the viewer
sequences - array of sequence objects
options - an object describing options
</pre>
</body>
</html>