-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo2.html
131 lines (111 loc) · 19.5 KB
/
demo2.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
<!doctype html>
<html>
<head>
<title>Demonstration II</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/spectrum-viewer.css" type="text/css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="js/spectrum-viewer.js"></script>
<!-- Temp css -->
<style>
table, th, td {
border: 1px solid lightGrey;
border-collapse: collapse;
}
.scrollit {
overflow:scroll;
height:200px;
}
</style>
<script type="text/javascript">
var ss = {}
function handleclick(elt,path) {
if (elt.checked) {
if (!ss[elt.value]) {
appendSpectrum('spectra', elt.value, 1000, 300);
ss[elt.value] = true;
}
var el = document.getElementById('rows');
var checks = el.getElementsByTagName('input');
for (var i=0, len=checks.length; i<len; i++) {
if ( checks[i].type == 'checkbox' && checks[i].value == elt.value && checks[i] != elt) {
checks[i].checked = false;
}
}
elt.checked = true;
showSpectrum('spectra',elt.value,path,0.5);
} else {
elt.checked = true;
}
}
</script>
</head>
<body>
<div align="center" class="spectra"></div>
<table border="0" align="center">
<thead>
<tr><th width="100px">Index</th><th width="100px">Scan</th><th width="800px">Peptide</th><th width="100px"></th></tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="scrollit">
<table id="rows" border="0" >
<tr><td width="100px">1</td><td width="100px">291</td><td width="800px">NMoEQTVK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/1-291-NM_oEQTVK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/1-291-NM_oEQTVK.json');"/></td></tr>
<tr><td width="100px">2</td><td width="100px">292</td><td width="800px">NMoEQTVK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/2-292-NM_oEQTVK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/2-292-NM_oEQTVK.json');"/></td></tr>
<tr><td width="100px">3</td><td width="100px">293</td><td width="800px">NMoEQTVK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/3-293-NM_oEQTVK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/3-293-NM_oEQTVK.json');"/></td></tr>
<tr><td width="100px">4</td><td width="100px">294</td><td width="800px">NMoEQTVK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/4-294-NM_oEQTVK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/4-294-NM_oEQTVK.json');"/></td></tr>
<tr><td width="100px">5</td><td width="100px">295</td><td width="800px">NMoEQTVK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/5-295-NM_oEQTVK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/5-295-NM_oEQTVK.json');"/></td></tr>
<tr><td width="100px">106</td><td width="100px">705</td><td width="800px">EEQAEPDGTEVADK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/106-705-EEQAEPDGTEVADK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/106-705-EEQAEPDGTEVADK.json');"/></td></tr>
<tr><td width="100px">279</td><td width="100px">938</td><td width="800px">ELNYGPHQWR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/279-938-ELNYGPHQWR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/279-938-ELNYGPHQWR.json');"/></td></tr>
<tr><td width="100px">323</td><td width="100px">994</td><td width="800px">VAAAFPGDVDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/323-994-VAAAFPGDVDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/323-994-VAAAFPGDVDR.json');"/></td></tr>
<tr><td width="100px">326</td><td width="100px">997</td><td width="800px">VAAAFPGDVDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/326-997-VAAAFPGDVDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/326-997-VAAAFPGDVDR.json');"/></td></tr>
<tr><td width="100px">331</td><td width="100px">1004</td><td width="800px">ENQSILITGESGAGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/331-1004-ENQSILITGESGAGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/331-1004-ENQSILITGESGAGK.json');"/></td></tr>
<tr><td width="100px">333</td><td width="100px">1006</td><td width="800px">ENQSILITGESGAGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/333-1006-ENQSILITGESGAGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/333-1006-ENQSILITGESGAGK.json');"/></td></tr>
<tr><td width="100px">355</td><td width="100px">1039</td><td width="800px">NFFSASCmVPCmADQSSFPK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/355-1039-NFFSASC_mVPC_mADQSSFPK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/355-1039-NFFSASC_mVPC_mADQSSFPK.json');"/></td></tr>
<tr><td width="100px">361</td><td width="100px">1049</td><td width="800px">AIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/361-1049-AIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/361-1049-AIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">364</td><td width="100px">1052</td><td width="800px">AIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/364-1052-AIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/364-1052-AIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">367</td><td width="100px">1055</td><td width="800px">AIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/367-1055-AIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/367-1055-AIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">368</td><td width="100px">1056</td><td width="800px">AIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/368-1056-AIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/368-1056-AIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">374</td><td width="100px">1064</td><td width="800px">TNFDAFPDK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/374-1064-TNFDAFPDK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/374-1064-TNFDAFPDK.json');"/></td></tr>
<tr><td width="100px">387</td><td width="100px">1081</td><td width="800px">APLDNDIGVSEATR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/387-1081-APLDNDIGVSEATR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/387-1081-APLDNDIGVSEATR.json');"/></td></tr>
<tr><td width="100px">450</td><td width="100px">1160</td><td width="800px">TLEDQVSELK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/450-1160-TLEDQVSELK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/450-1160-TLEDQVSELK.json');"/></td></tr>
<tr><td width="100px">453</td><td width="100px">1163</td><td width="800px">TLEDQVSELK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/453-1163-TLEDQVSELK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/453-1163-TLEDQVSELK.json');"/></td></tr>
<tr><td width="100px">454</td><td width="100px">1164</td><td width="800px">TLEDQVSELK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/454-1164-TLEDQVSELK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/454-1164-TLEDQVSELK.json');"/></td></tr>
<tr><td width="100px">466</td><td width="100px">1180</td><td width="800px">VDEDQPFPAVPK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/466-1180-VDEDQPFPAVPK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/466-1180-VDEDQPFPAVPK.json');"/></td></tr>
<tr><td width="100px">481</td><td width="100px">1199</td><td width="800px">EDQVFPMNPPK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/481-1199-EDQVFPMNPPK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/481-1199-EDQVFPMNPPK.json');"/></td></tr>
<tr><td width="100px">483</td><td width="100px">1201</td><td width="800px">EDQVFPMNPPK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/483-1201-EDQVFPMNPPK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/483-1201-EDQVFPMNPPK.json');"/></td></tr>
<tr><td width="100px">484</td><td width="100px">1202</td><td width="800px">EDQVFPMNPPK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/484-1202-EDQVFPMNPPK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/484-1202-EDQVFPMNPPK.json');"/></td></tr>
<tr><td width="100px">490</td><td width="100px">1210</td><td width="800px">IDPNAWVER.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/490-1210-IDPNAWVER.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/490-1210-IDPNAWVER.json');"/></td></tr>
<tr><td width="100px">519</td><td width="100px">1255</td><td width="800px">DTQVVLAMoPYDTPVPGYR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/519-1255-DTQVVLAM_oPYDTPVPGYR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/519-1255-DTQVVLAM_oPYDTPVPGYR.json');"/></td></tr>
<tr><td width="100px">521</td><td width="100px">1257</td><td width="800px">DTQVVLAMoPYDTPVPGYR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/521-1257-DTQVVLAM_oPYDTPVPGYR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/521-1257-DTQVVLAM_oPYDTPVPGYR.json');"/></td></tr>
<tr><td width="100px">523</td><td width="100px">1259</td><td width="800px">DTQVVLAMoPYDTPVPGYR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/523-1259-DTQVVLAM_oPYDTPVPGYR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/523-1259-DTQVVLAM_oPYDTPVPGYR.json');"/></td></tr>
<tr><td width="100px">524</td><td width="100px">1260</td><td width="800px">DTQVVLAMoPYDTPVPGYR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/524-1260-DTQVVLAM_oPYDTPVPGYR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/524-1260-DTQVVLAM_oPYDTPVPGYR.json');"/></td></tr>
<tr><td width="100px">533</td><td width="100px">1275</td><td width="800px">DWENPGVTQLNR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/533-1275-DWENPGVTQLNR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/533-1275-DWENPGVTQLNR.json');"/></td></tr>
<tr><td width="100px">535</td><td width="100px">1277</td><td width="800px">DWENPGVTQLNR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/535-1277-DWENPGVTQLNR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/535-1277-DWENPGVTQLNR.json');"/></td></tr>
<tr><td width="100px">549</td><td width="100px">1297</td><td width="800px">ITAIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/549-1297-ITAIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/549-1297-ITAIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">647</td><td width="100px">1427</td><td width="800px">LYPNDNFFEGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/647-1427-LYPNDNFFEGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/647-1427-LYPNDNFFEGK.json');"/></td></tr>
<tr><td width="100px">650</td><td width="100px">1430</td><td width="800px">LYPNDNFFEGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/650-1430-LYPNDNFFEGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/650-1430-LYPNDNFFEGK.json');"/></td></tr>
<tr><td width="100px">653</td><td width="100px">1433</td><td width="800px">LYPNDNFFEGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/653-1433-LYPNDNFFEGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/653-1433-LYPNDNFFEGK.json');"/></td></tr>
<tr><td width="100px">654</td><td width="100px">1434</td><td width="800px">LYPNDNFFEGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/654-1434-LYPNDNFFEGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/654-1434-LYPNDNFFEGK.json');"/></td></tr>
<tr><td width="100px">669</td><td width="100px">1455</td><td width="800px">HADSVAELGEQIDNLQR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/669-1455-HADSVAELGEQIDNLQR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/669-1455-HADSVAELGEQIDNLQR.json');"/></td></tr>
<tr><td width="100px">671</td><td width="100px">1458</td><td width="800px">HADSVAELGEQIDNLQR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/671-1458-HADSVAELGEQIDNLQR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/671-1458-HADSVAELGEQIDNLQR.json');"/></td></tr>
<tr><td width="100px">673</td><td width="100px">1460</td><td width="800px">HADSVAELGEQIDNLQR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/673-1460-HADSVAELGEQIDNLQR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/673-1460-HADSVAELGEQIDNLQR.json');"/></td></tr>
<tr><td width="100px">706</td><td width="100px">1503</td><td width="800px">LITAIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/706-1503-LITAIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/706-1503-LITAIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">707</td><td width="100px">1504</td><td width="800px">LITAIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/707-1504-LITAIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/707-1504-LITAIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">708</td><td width="100px">1505</td><td width="800px">LITAIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/708-1505-LITAIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/708-1505-LITAIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">709</td><td width="100px">1506</td><td width="800px">LITAIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/709-1506-LITAIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/709-1506-LITAIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">710</td><td width="100px">1507</td><td width="800px">LITAIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/710-1507-LITAIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/710-1507-LITAIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">711</td><td width="100px">1508</td><td width="800px">LITAIGDVVNHDPVVGDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/711-1508-LITAIGDVVNHDPVVGDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/711-1508-LITAIGDVVNHDPVVGDR.json');"/></td></tr>
<tr><td width="100px">720</td><td width="100px">1521</td><td width="800px">VLYPNDNFFEGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/720-1521-VLYPNDNFFEGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/720-1521-VLYPNDNFFEGK.json');"/></td></tr>
<tr><td width="100px">723</td><td width="100px">1524</td><td width="800px">VLYPNDNFFEGK.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/723-1524-VLYPNDNFFEGK.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/723-1524-VLYPNDNFFEGK.json');"/></td></tr>
<tr><td width="100px">847</td><td width="100px">1717</td><td width="800px">VNWLGLGPQENYPDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/847-1717-VNWLGLGPQENYPDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/847-1717-VNWLGLGPQENYPDR.json');"/></td></tr>
<tr><td width="100px">850</td><td width="100px">1720</td><td width="800px">VNWLGLGPQENYPDR.</td><td width="100px"><input value="spectrum1" type="checkbox" onclick="handleclick(this,'data/17mix_test2/850-1720-VNWLGLGPQENYPDR.json');"/> <input value="spectrum2" type="checkbox" onclick="handleclick(this,'data/17mix_test2/850-1720-VNWLGLGPQENYPDR.json');"/></td></tr>
</table>
</div>
</td></tr>
</tbody>
</table>
</body>
</html>