-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
100 lines (85 loc) · 3.34 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
<html>
<head>
<title>Interactive demo for Needleman–Wunsch algorithm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="HandheldFriendly" content="True">
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="GridBuilder.js"></script>
</head>
<script>
function restart(){
clear();
GridBuilder.highlightOptimal();
}
function clear(){
var cont = $('#cont');
var resultContainer = $('#result');
var matchScore = parseInt($('#matchScore').val());
var mismatchScore = parseInt($('#mismatchScore').val());
var gapScore = parseInt($('#gapScore').val());
var seqSide = $('#seq_1').val();
var seqTop = $('#seq_2').val();
GridBuilder.rebuildTable(cont, resultContainer, matchScore, mismatchScore, gapScore, seqSide, seqTop);
}
$(document).ready(function(){
restart();
/*
var ids = ["9_9", "9_8", "9_7", "8_6", "7_6", "6_5", "5_4", "5_3", "4_2", "3_2", "2_2", "1_1"];
var ids = ["9_10", "9_9", "8_8", "7_7", "6_6", "5_5", "4_4", "3_4", "2_3", "1_2"];
var ids = ["9_9", "9_8", "8_7", "7_6", "6_5", "5_4", "4_3", "3_3", "2_2", "1_1"];
for(idx in ids){
$('#' + ids[idx]).click();
}
*/
$('.seq').keyup(function(){
restart();
});
$('.params').change(function(){
restart();
});
$('.btn-clear').click(function(){
clear();
});
$('.btn-compute').click(function(){
restart();
});
$('.btn-custom').click(function(){
GridBuilder.startCustomPath();
});
});
</script>
<h2>Interactive demo for Needleman-Wunsch algorithm</h2>
<p>
The motivation behind this demo is that I had some difficulty understanding the algorithm, so to gain better understanding I decided to implement it. This is not meant for serious use, What I tried to do here is to illustrate visually how the matrix is constructed and how the algorithm works. Also I wanted to allow some freedom for the user to construct a custom path along the matrix and see how paths translate into alignment "or mis-alignments". The code is available on <a href="https://github.com/drdrsh/Needleman-Wunsch">github</a> and is released under GNU/GPL3. If you wish to contact me send me an email to [email protected].
</p>
<table>
<tr>
<td><label>Sequence 1</label></td>
<td colspan="4"><input id="seq_1" class='seq' value="GATTACA" maxlength="20" /></label></td>
<td rowspan="10" id="result"></td>
</tr>
<tr>
<td><label>Sequence 2</label></td>
<td colspan="4"><input id="seq_2" class='seq' value="GTCGACG" maxlength="20" /></td>
</tr>
<tr colspan="4">
<th><label>Match Score</label></th>
<th><label>Mismatch Score</label></th>
<th><label>Gap Score</label></th>
</tr>
<tr>
<td><input class="params" id="matchScore" type="number" value="1" /></td>
<td><input class="params" id="mismatchScore" type="number" value="-1" /></td>
<td><input class="params" id="gapScore" type="number" value="-2" /></td>
</tr>
<tr>
<td colspan="4">
<button class="btn-compute">Compute Optimal Alignment</button>
<button class="btn-clear">Clear Path</button>
<button class="btn-custom">Custom Path</button>
</tr>
</table>
<div id="cont"></div>
</body>
</html>