|
0
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
5 <title>DREME</title>
|
|
|
6 <style type="text/css">
|
|
|
7
|
|
|
8 /* START INCLUDED FILE "meme.css" */
|
|
|
9 /* The following is the content of meme.css */
|
|
|
10 body { background-color:white; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;}
|
|
|
11
|
|
|
12 div.help {
|
|
|
13 display: inline-block;
|
|
|
14 margin: 0px;
|
|
|
15 padding: 0px;
|
|
|
16 width: 12px;
|
|
|
17 height: 13px;
|
|
|
18 cursor: pointer;
|
|
|
19 background-image: url("help.gif");
|
|
|
20 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAANAQMAAACn5x0BAAAAAXNSR0IArs4c6QAAAAZQTFRFAAAAnp6eqp814gAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2gMJBQgGYqhNZQAAACZJREFUCNdj+P+BoUGAoV+AYeYEEGoWYGgTYGgRAAm2gRGQ8f8DAOnhC2lYnqs6AAAAAElFTkSuQmCC");
|
|
|
21 }
|
|
|
22
|
|
|
23 div.help2 {
|
|
|
24 color: #999;
|
|
|
25 display: inline-block;
|
|
|
26 width: 12px;
|
|
|
27 height: 12px;
|
|
|
28 border: 1px solid #999;
|
|
|
29 font-size: 13px;
|
|
|
30 line-height:12px;
|
|
|
31 font-family: Helvetica, sans-serif;
|
|
|
32 font-weight: bold;
|
|
|
33 font-style: normal;
|
|
|
34 cursor: pointer;
|
|
|
35 }
|
|
|
36 div.help2:hover {
|
|
|
37 color: #000;
|
|
|
38 border-color: #000;
|
|
|
39 }
|
|
|
40
|
|
|
41 p.spaced { line-height: 1.8em;}
|
|
|
42
|
|
|
43 span.citation { font-family: "Book Antiqua", "Palatino Linotype", serif; color: #004a4d;}
|
|
|
44
|
|
|
45 p.pad { padding-left: 30px; padding-top: 5px; padding-bottom: 10px;}
|
|
|
46
|
|
|
47 td.jump { font-size: 13px; color: #ffffff; background-color: #00666a;
|
|
|
48 font-family: Georgia, "Times New Roman", Times, serif;}
|
|
|
49
|
|
|
50 a.jump { margin: 15px 0 0; font-style: normal; font-variant: small-caps;
|
|
|
51 font-weight: bolder; font-family: Georgia, "Times New Roman", Times, serif;}
|
|
|
52
|
|
|
53 h2.mainh {font-size: 1.5em; font-style: normal; margin: 15px 0 0;
|
|
|
54 font-variant: small-caps; font-family: Georgia, "Times New Roman", Times, serif;}
|
|
|
55
|
|
|
56 h2.line {border-bottom: 1px solid #CCCCCC; font-size: 1.5em; font-style: normal;
|
|
|
57 margin: 15px 0 0; padding-bottom: 3px; font-variant: small-caps;
|
|
|
58 font-family: Georgia, "Times New Roman", Times, serif;}
|
|
|
59
|
|
|
60 h4 {border-bottom: 1px solid #CCCCCC; font-size: 1.2em; font-style: normal;
|
|
|
61 margin: 10px 0 0; padding-bottom: 3px; font-family: Georgia, "Times New Roman", Times, serif;}
|
|
|
62
|
|
|
63 h5 {margin: 0px}
|
|
|
64
|
|
|
65 a.help { font-size: 9px; font-style: normal; text-transform: uppercase;
|
|
|
66 font-family: Georgia, "Times New Roman", Times, serif;}
|
|
|
67
|
|
|
68 div.pad { padding-left: 30px; padding-top: 5px; padding-bottom: 10px;}
|
|
|
69
|
|
|
70 div.pad1 { margin: 10px 5px;}
|
|
|
71
|
|
|
72 div.pad2 { margin: 25px 5px 5px;}
|
|
|
73 h2.pad2 { padding: 25px 5px 5px;}
|
|
|
74
|
|
|
75 div.pad3 { padding: 5px 0px 10px 30px;}
|
|
|
76
|
|
|
77 div.box { border: 2px solid #CCCCCC; padding:10px;}
|
|
|
78
|
|
|
79 div.bar { border-left: 7px solid #00666a; padding:5px; margin-top:25px; }
|
|
|
80
|
|
|
81 div.subsection {margin:25px 0px;}
|
|
|
82
|
|
|
83 img {border:0px none;}
|
|
|
84
|
|
|
85 th.majorth {text-align:left;}
|
|
|
86 th.minorth {font-weight:normal; text-align:left; width:8em; padding: 3px 0px;}
|
|
|
87 th.actionth {font-weight:normal; text-align:left;}
|
|
|
88
|
|
|
89 .strand_name {text-align:left;}
|
|
|
90 .strand_side {padding:0px 10px;}
|
|
|
91 .strand_start {padding:0px 10px;}
|
|
|
92 .strand_pvalue {text-align:center; padding:0px 10px;}
|
|
|
93 .strand_lflank {text-align:right; padding-right:5px; font-weight:bold; font-size:large; font-family: 'Courier New', Courier, monospace; color:gray;}
|
|
|
94 .strand_seq {text-align:center; font-weight:bold; font-size:large; font-family: 'Courier New', Courier, monospace;}
|
|
|
95 .strand_rflank {text-align:left; padding-left:5px; font-weight:bold; font-size:large; font-family: 'Courier New', Courier, monospace; color:gray;}
|
|
|
96
|
|
|
97 .block_td {height:25px;}
|
|
|
98 .block_container {position:relative; width:99%; height:25px; padding:0px; margin:0px;}
|
|
|
99 .block_motif {position:absolute; z-index:3; height:12px; top:0px; text-align:center; vertical-align:middle; background-color:cyan;}
|
|
|
100 .block_rule {position:absolute; z-index:2; width:100%; height:1px; top:12px; left:0px; background-color:gray;}
|
|
|
101 .block_plus_sym {position:absolute; z-index:4; width:12px; height:12px; top:0px; left:0px; color:gray;}
|
|
|
102 .block_minus_sym {position:absolute; z-index:4; width:12px; height:12px; top:13px; left:0px; color:gray;}
|
|
|
103
|
|
|
104 .tic_major {position:absolute; border-left:2px solid blue; height:0.5em; top:0em;}
|
|
|
105 .tic_minor {position:absolute; border-left:1px solid blue; height:0.2em; top:0em;}
|
|
|
106 .tic_label {position:absolute; top:0.5em; height: 1em; text-align:center; vertical-align:middle}
|
|
|
107
|
|
|
108 .explain h5 {font-size:1em; margin-left: 1em;}
|
|
|
109
|
|
|
110 div.doc {margin-left: 2em; margin-bottom: 3em;}
|
|
|
111
|
|
|
112 div.tabArea {
|
|
|
113 font-size: 80%;
|
|
|
114 font-weight: bold;
|
|
|
115 }
|
|
|
116
|
|
|
117 a.tab {
|
|
|
118 background-color: #ddddff;
|
|
|
119 border: 1px solid #000000;
|
|
|
120 padding: 2px 1em 2px 1em;
|
|
|
121 text-decoration: none;
|
|
|
122 }
|
|
|
123 div.tabArea.base a.tab {
|
|
|
124 border-top-width: 0px;
|
|
|
125 }
|
|
|
126 div.tabArea.top a.tab {
|
|
|
127 border-bottom-width: 0px;
|
|
|
128 }
|
|
|
129
|
|
|
130 a.tab, a.tab:visited {
|
|
|
131 color: #808080;
|
|
|
132 }
|
|
|
133
|
|
|
134 a.tab:hover {
|
|
|
135 background-color: #d0d0d0;
|
|
|
136 color: #606060;
|
|
|
137 }
|
|
|
138 a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
|
|
|
139 background-color: #f0f0f0;
|
|
|
140 color: #000000;
|
|
|
141 }
|
|
|
142 div.tabMain {
|
|
|
143 border: 1px solid #000000;
|
|
|
144 background-color: #ffffff;
|
|
|
145 padding: 5px;
|
|
|
146 margin-right: 5px;
|
|
|
147 }
|
|
|
148 th.trainingset {
|
|
|
149 border-bottom: thin dashed black;
|
|
|
150 font-weight:normal;
|
|
|
151 padding:0px 10px;
|
|
|
152 }
|
|
|
153 .dnaseq {
|
|
|
154 font-weight: bold;
|
|
|
155 font-size: large;
|
|
|
156 font-family: 'Courier New', Courier, monospace;
|
|
|
157 }
|
|
|
158 .dna_A {
|
|
|
159 color: rgb(204,0,0);
|
|
|
160 }
|
|
|
161 .dna_C {
|
|
|
162 color: rgb(0,0,204);
|
|
|
163 }
|
|
|
164 .dna_G {
|
|
|
165 color: rgb(255,179,0);
|
|
|
166 }
|
|
|
167 .dna_T {
|
|
|
168 color: rgb(0,128,0);
|
|
|
169 }
|
|
|
170 /* END INCLUDED FILE "meme.css" */
|
|
|
171
|
|
|
172
|
|
|
173
|
|
|
174 /* START INCLUDED FILE "dreme-to-html.css" */
|
|
|
175 table.dreme_motifs tr th, table.dreme_motifs tr td {
|
|
|
176 padding: 0px 10px;
|
|
|
177 }
|
|
|
178
|
|
|
179 div.popup_wrapper {
|
|
|
180 position:fixed;
|
|
|
181 z-index:2;
|
|
|
182 width:100%;
|
|
|
183 height:0;
|
|
|
184 top:50%;
|
|
|
185 left:0;
|
|
|
186 }
|
|
|
187
|
|
|
188 div.popup {
|
|
|
189 width: 400px;
|
|
|
190 z-index:2;
|
|
|
191 margin-left: auto;
|
|
|
192 margin-right: auto;
|
|
|
193 padding: 5px;
|
|
|
194 background: #FFF;
|
|
|
195 border-style: double;
|
|
|
196 border-width: 5px;
|
|
|
197 border-color: #00666a;
|
|
|
198 position:relative;
|
|
|
199 }
|
|
|
200
|
|
|
201 div.grey_background {
|
|
|
202 position:fixed;
|
|
|
203 z-index: 1;
|
|
|
204 background-color: #000;
|
|
|
205 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
|
|
206 filter: alpha(opacity=50);
|
|
|
207 opacity: 0.5;
|
|
|
208 left: 0;
|
|
|
209 top: 0;
|
|
|
210 width: 100%;
|
|
|
211 height: 100%;
|
|
|
212
|
|
|
213 }
|
|
|
214 td.symaction {
|
|
|
215 text-align: center;
|
|
|
216 }
|
|
|
217 *.symaction {
|
|
|
218 font-size: 20px;
|
|
|
219 }
|
|
|
220
|
|
|
221 div.close {
|
|
|
222 cursor: pointer;
|
|
|
223 border: 1px solid black;
|
|
|
224 width:15px;
|
|
|
225 height:15px;
|
|
|
226 line-height:15px; /* this causes vertical centering */
|
|
|
227 text-align:center;
|
|
|
228 background-color:#FFF;
|
|
|
229 color:#000;
|
|
|
230 font-size:15px;
|
|
|
231 font-family:monospace;
|
|
|
232 }
|
|
|
233
|
|
|
234 div.close:hover {
|
|
|
235 color:#FFF;
|
|
|
236 background-color:#000;
|
|
|
237 }
|
|
|
238
|
|
|
239 div.navnum {
|
|
|
240 width:100%;
|
|
|
241 height:20px;
|
|
|
242 line-height:20px;
|
|
|
243 text-align:center;
|
|
|
244 font-size:medium;
|
|
|
245 }
|
|
|
246
|
|
|
247 a.navarrow {
|
|
|
248 font-size: 30px;
|
|
|
249 text-decoration:none;
|
|
|
250 }
|
|
|
251
|
|
|
252 a.inactive {
|
|
|
253 color:#CCC;
|
|
|
254 }
|
|
|
255
|
|
|
256 div.actionbutton {
|
|
|
257 cursor: pointer;
|
|
|
258 font-size: 18px;
|
|
|
259 line-height:20px;
|
|
|
260 padding: 5px;
|
|
|
261 margin: 10px 0;
|
|
|
262 border: 1px solid black;
|
|
|
263 }
|
|
|
264
|
|
|
265 div.actionbutton:hover {
|
|
|
266 color:#FFF;
|
|
|
267 background-color:#000;
|
|
|
268 }
|
|
|
269
|
|
|
270 div.pop_content {
|
|
|
271 position:absolute;
|
|
|
272 z-index:1;
|
|
|
273 width:300px;
|
|
|
274 padding: 5px;
|
|
|
275 background: #E4ECEC;
|
|
|
276 font-size: 12px;
|
|
|
277 font-family: Arial;
|
|
|
278 border-style: double;
|
|
|
279 border-width: 3px;
|
|
|
280 border-color: #AA2244;
|
|
|
281 display:none;
|
|
|
282 }
|
|
|
283 span.sort_dir {
|
|
|
284 text-decoration: none;
|
|
|
285 }
|
|
|
286
|
|
|
287 div.section_title {
|
|
|
288 font-weight: bold;
|
|
|
289 cursor: pointer;
|
|
|
290 }
|
|
|
291
|
|
|
292 div.section_title.inactive {
|
|
|
293 color: #000;
|
|
|
294 }
|
|
|
295
|
|
|
296 div.section_title.inactive:hover {
|
|
|
297 color: #000;
|
|
|
298 text-decoration:underline;
|
|
|
299 }
|
|
|
300
|
|
|
301 div.section_title label {
|
|
|
302 cursor: pointer;
|
|
|
303 }
|
|
|
304
|
|
|
305 span.ellipsis {
|
|
|
306 display: inline-block;
|
|
|
307 border: 1px solid black;
|
|
|
308 padding: 0 2px;
|
|
|
309 margin: 0 2px;
|
|
|
310 }
|
|
|
311
|
|
|
312 div.section_title.inactive:hover span.ellipsis {
|
|
|
313 color: #FFF;
|
|
|
314 background-color: #000;
|
|
|
315 }
|
|
|
316
|
|
|
317 div.section_title.inactive span.toggle {
|
|
|
318 color: #000;
|
|
|
319 }
|
|
|
320
|
|
|
321 div.section_data {
|
|
|
322 margin-left: 20px;
|
|
|
323 }
|
|
|
324 tr.rule td, tr.rule th {
|
|
|
325 border-bottom: 1px solid #CCC;
|
|
|
326 }
|
|
|
327
|
|
|
328 h1.compact, h2.compact, h3.compact, h4.compact, h5.compact, h6.compact {
|
|
|
329 margin:0;
|
|
|
330 padding:0;
|
|
|
331 }
|
|
|
332
|
|
|
333 ul.programs {
|
|
|
334 margin-top: 0;
|
|
|
335 padding-top: 0;
|
|
|
336 margin-bottom: 0;
|
|
|
337 padding-bottom: 0;
|
|
|
338 margin-left: 0;
|
|
|
339 padding-left: 0;
|
|
|
340 list-style: none;
|
|
|
341 border-bottom: 1px solid black;
|
|
|
342 }
|
|
|
343
|
|
|
344 ul.programs li {
|
|
|
345 border: 1px solid black;
|
|
|
346 border-bottom-width: 0;
|
|
|
347 background-color: #EFE;
|
|
|
348 cursor: default;
|
|
|
349 }
|
|
|
350
|
|
|
351 ul.programs li.active {
|
|
|
352 background-color: #CFC;
|
|
|
353 }
|
|
|
354
|
|
|
355 ul.programs li.selected {
|
|
|
356 background-color: #262;
|
|
|
357 color: #FFF;
|
|
|
358 }
|
|
|
359
|
|
|
360 div.programs_scroll {
|
|
|
361 width: 100%;
|
|
|
362 height: 90px;
|
|
|
363 overflow-y: auto;
|
|
|
364 overflow-x: hidden;
|
|
|
365 margin: 0 auto;
|
|
|
366 }
|
|
|
367 /* END INCLUDED FILE "dreme-to-html.css" */
|
|
|
368
|
|
|
369 </style>
|
|
|
370 <script type="text/javascript">
|
|
|
371 var pos_count = 3;
|
|
|
372 var neg_count = 3;
|
|
|
373 var motif_seqs = [];
|
|
|
374
|
|
|
375
|
|
|
376 /* START INCLUDED FILE "delay_draw.js" */
|
|
|
377 //
|
|
|
378 // Functions to measure the position of page elements relative to the size of the page
|
|
|
379 //
|
|
|
380
|
|
|
381 // gets the offset of the top of the page due to scrolling
|
|
|
382 // from: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
|
|
|
383 function get_scroll_xy() {
|
|
|
384 var scrOfX = 0, scrOfY = 0;
|
|
|
385 if( typeof( window.pageYOffset ) == 'number' ) {
|
|
|
386 //Netscape compliant
|
|
|
387 scrOfY = window.pageYOffset;
|
|
|
388 scrOfX = window.pageXOffset;
|
|
|
389 } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
|
|
|
390 //DOM compliant
|
|
|
391 scrOfY = document.body.scrollTop;
|
|
|
392 scrOfX = document.body.scrollLeft;
|
|
|
393 } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
|
|
|
394 //IE6 standards compliant mode
|
|
|
395 scrOfY = document.documentElement.scrollTop;
|
|
|
396 scrOfX = document.documentElement.scrollLeft;
|
|
|
397 }
|
|
|
398 return [ scrOfX, scrOfY ];
|
|
|
399 }
|
|
|
400
|
|
|
401 // gets the width and height of the visible page
|
|
|
402 // from: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
|
|
|
403 function get_page_size() {
|
|
|
404 var myWidth = 0, myHeight = 0;
|
|
|
405 if( typeof( window.innerWidth ) == 'number' ) {
|
|
|
406 //Non-IE
|
|
|
407 myWidth = window.innerWidth;
|
|
|
408 myHeight = window.innerHeight;
|
|
|
409 } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
|
|
|
410 //IE 6+ in 'standards compliant mode'
|
|
|
411 myWidth = document.documentElement.clientWidth;
|
|
|
412 myHeight = document.documentElement.clientHeight;
|
|
|
413 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
|
|
|
414 //IE 4 compatible
|
|
|
415 myWidth = document.body.clientWidth;
|
|
|
416 myHeight = document.body.clientHeight;
|
|
|
417 }
|
|
|
418 return [myWidth, myHeight];
|
|
|
419 }
|
|
|
420
|
|
|
421 // gets the x and y offset of an element
|
|
|
422 // from http://www.quirksmode.org/js/findpos.html
|
|
|
423 function get_elem_xy(elem) {
|
|
|
424 var myX = myY = 0;
|
|
|
425 if (elem.offsetParent) {
|
|
|
426 do {
|
|
|
427 myX += elem.offsetLeft;
|
|
|
428 myY += elem.offsetTop;
|
|
|
429 } while (elem = elem.offsetParent);
|
|
|
430 }
|
|
|
431 return [myX, myY];
|
|
|
432 }
|
|
|
433
|
|
|
434 //
|
|
|
435 // Functions to delay a drawing task until it is required or it would not lag the display to do so
|
|
|
436 //
|
|
|
437
|
|
|
438 // a list of items still to be drawn
|
|
|
439 var drawable_list = [];
|
|
|
440 // the delay between drawing objects that are not currently visible
|
|
|
441 var draw_delay = 1;
|
|
|
442 // the delay after a user interaction
|
|
|
443 var user_delay = 300;
|
|
|
444 // the delay after a user has stopped scrolling and is viewing the stuff drawn on the current page
|
|
|
445 var stop_delay = 2000;
|
|
|
446 // the timer handle; allows resetting of the timer after user interactions
|
|
|
447 var draw_timer = null;
|
|
|
448
|
|
|
449 //
|
|
|
450 // Drawable
|
|
|
451 //
|
|
|
452 // elem - a page element which defines the position on the page that drawing is to be done
|
|
|
453 // task - an object with the method run which takes care of painting the object
|
|
|
454 //
|
|
|
455 function Drawable(elem, task) {
|
|
|
456 this.elem = elem;
|
|
|
457 this.task = task;
|
|
|
458 this.is_visible = Drawable_is_visible;
|
|
|
459 }
|
|
|
460
|
|
|
461 //
|
|
|
462 // Drawable_is_visible
|
|
|
463 //
|
|
|
464 // Determines if the drawable object is in the visible part of the page.
|
|
|
465 //
|
|
|
466 // page_top - the distance to the top of the page for the visible region
|
|
|
467 // page_height - the height of the visible region
|
|
|
468 function Drawable_is_visible(page_top, page_height) {
|
|
|
469 var elem_top = get_elem_xy(this.elem)[1];
|
|
|
470 var elem_height = this.elem.height;
|
|
|
471 if (typeof (elem_height) != 'number') elem_height = 1;
|
|
|
472 return ((elem_top + elem_height) >= page_top && elem_top <= (page_top + page_height));
|
|
|
473 }
|
|
|
474
|
|
|
475 //
|
|
|
476 // draw_on_screen
|
|
|
477 //
|
|
|
478 // Checks each drawable object and draws those on screen.
|
|
|
479 //
|
|
|
480 function draw_on_screen() {
|
|
|
481 var found = false;
|
|
|
482 var page_top = get_scroll_xy()[1];
|
|
|
483 var page_height = get_page_size()[1];
|
|
|
484 for (var i = 0; i < drawable_list.length; i++) {
|
|
|
485 var drawable = drawable_list[i];
|
|
|
486 if (drawable.is_visible(page_top, page_height)) {
|
|
|
487 drawable.task.run();
|
|
|
488 drawable_list.splice(i--, 1);
|
|
|
489 found = true;
|
|
|
490 }
|
|
|
491 }
|
|
|
492 return found;
|
|
|
493 }
|
|
|
494
|
|
|
495 //
|
|
|
496 // process_draw_tasks
|
|
|
497 //
|
|
|
498 // Called on a delay to process the next avaliable
|
|
|
499 // draw task.
|
|
|
500 //
|
|
|
501 function process_draw_tasks() {
|
|
|
502 var delay = draw_delay;
|
|
|
503 draw_timer = null;
|
|
|
504 if (drawable_list.length == 0) return; //no more tasks
|
|
|
505 if (draw_on_screen()) {
|
|
|
506 delay = stop_delay; //give the user a chance to scroll
|
|
|
507 } else {
|
|
|
508 //get next task
|
|
|
509 var drawable = drawable_list.shift();
|
|
|
510 drawable.task.run();
|
|
|
511 }
|
|
|
512 //allow UI updates between tasks
|
|
|
513 draw_timer = window.setTimeout("process_draw_tasks()", draw_delay);
|
|
|
514 }
|
|
|
515
|
|
|
516 //
|
|
|
517 // delayed_process_draw_tasks
|
|
|
518 //
|
|
|
519 // Call process_draw_tasks after a short delay.
|
|
|
520 // The delay serves to group multiple redundant events.
|
|
|
521 // Should be set as event handler for onscroll and onresize.
|
|
|
522 //
|
|
|
523 function delayed_process_draw_tasks() {
|
|
|
524 //reset the timer
|
|
|
525 if (drawable_list.length > 0) {
|
|
|
526 if (draw_timer != null) clearTimeout(draw_timer);
|
|
|
527 draw_timer = window.setTimeout("process_draw_tasks()", user_delay);
|
|
|
528 }
|
|
|
529 }
|
|
|
530
|
|
|
531 //
|
|
|
532 // add_draw_task
|
|
|
533 //
|
|
|
534 // Add a drawing task to be called immediately if it is
|
|
|
535 // visible, or to be called on a delay to reduce stuttering
|
|
|
536 // effect on the web browser.
|
|
|
537 function add_draw_task(elem, task) {
|
|
|
538 var page_top = get_scroll_xy()[1];
|
|
|
539 var page_height = get_page_size()[1];
|
|
|
540 drawable = new Drawable(elem, task);
|
|
|
541 if (drawable.is_visible(page_top, page_height)) {
|
|
|
542 task.run();
|
|
|
543 } else {
|
|
|
544 drawable_list.push(drawable);
|
|
|
545 //reset timer
|
|
|
546 if (draw_timer != null) clearTimeout(draw_timer);
|
|
|
547 draw_timer = window.setTimeout("process_draw_tasks()", user_delay);
|
|
|
548 }
|
|
|
549 }
|
|
|
550
|
|
|
551 /* END INCLUDED FILE "delay_draw.js" */
|
|
|
552
|
|
|
553
|
|
|
554
|
|
|
555 /* START INCLUDED FILE "motif_logo.js" */
|
|
|
556 //======================================================================
|
|
|
557 // start Alphabet object
|
|
|
558 //======================================================================
|
|
|
559 function Alphabet(alphabet, bg) {
|
|
|
560 //variable prototype
|
|
|
561 this.freqs = new Array();
|
|
|
562 this.alphabet = new Array();
|
|
|
563 this.letter_count = 0;
|
|
|
564 //method prototype
|
|
|
565 this.get_ic = Alphabet_get_ic;
|
|
|
566 this.get_size = Alphabet_get_size;
|
|
|
567 this.get_index = Alphabet_get_index;
|
|
|
568 this.get_letter = Alphabet_get_letter;
|
|
|
569 this.get_colour = Alphabet_get_colour;
|
|
|
570 this.get_bg_freq = Alphabet_get_bg_freq;
|
|
|
571 this.is_nucleotide = Alphabet_is_nucleotide;
|
|
|
572 this.is_ambig = Alphabet_is_ambig;
|
|
|
573 this.toString = Alphabet_to_string;
|
|
|
574 //construct
|
|
|
575 var is_letter = /^\w$/;
|
|
|
576 var is_prob = /^((1(\.0+)?)|(0(\.\d+)?))$/;
|
|
|
577 for (var pos = 0; pos < alphabet.length; pos++) {
|
|
|
578 var letter = alphabet.charAt(pos);
|
|
|
579 if (is_letter.test(letter)) {
|
|
|
580 this.alphabet[this.letter_count] = letter.toUpperCase();
|
|
|
581 this.freqs[this.letter_count] = -1;
|
|
|
582 this.letter_count++;
|
|
|
583 }
|
|
|
584 }
|
|
|
585 if (!(bg === undefined)) {
|
|
|
586 var parts = bg.split(/\s+/);
|
|
|
587 for (var i = 0, pos = 0; (i + 1) < parts.length; i += 2) {
|
|
|
588 var letter = parts[i];
|
|
|
589 var freq = parts[i+1];
|
|
|
590 if (is_letter.test(letter) && is_prob.test(freq)) {
|
|
|
591 letter = letter.toUpperCase(); //find the letter it matches
|
|
|
592 for (;pos < this.letter_count; pos++) {
|
|
|
593 if (this.alphabet[pos] == letter) break;
|
|
|
594 }
|
|
|
595 if (pos >= this.letter_count) throw "NOT_IN_ALPHABET";
|
|
|
596 this.freqs[pos] = (+freq);
|
|
|
597 }
|
|
|
598 }
|
|
|
599 } else {
|
|
|
600 //assume uniform background
|
|
|
601 var freq = 1.0 / this.letter_count;
|
|
|
602 for (var pos = 0; pos < this.letter_count; pos++) {
|
|
|
603 this.freqs[pos] = freq;
|
|
|
604 }
|
|
|
605 }
|
|
|
606 }
|
|
|
607
|
|
|
608
|
|
|
609 function Alphabet_get_ic() {
|
|
|
610 if (this.is_nucleotide()) {
|
|
|
611 return 2;
|
|
|
612 } else {
|
|
|
613 return Math.log(20) / Math.LN2;
|
|
|
614 }
|
|
|
615 }
|
|
|
616
|
|
|
617 function Alphabet_get_size() {
|
|
|
618 return this.letter_count;
|
|
|
619 }
|
|
|
620
|
|
|
621 function Alphabet_get_letter(alph_index) {
|
|
|
622 if (alph_index < 0 || alph_index >= this.letter_count) {
|
|
|
623 throw "BAD_ALPHABET_INDEX";
|
|
|
624 }
|
|
|
625 return this.alphabet[alph_index];
|
|
|
626 }
|
|
|
627
|
|
|
628 function Alphabet_get_bg_freq(alph_index) {
|
|
|
629 if (alph_index < 0 || alph_index >= this.letter_count) {
|
|
|
630 throw "BAD_ALPHABET_INDEX";
|
|
|
631 }
|
|
|
632 if (this.freqs[alph_index] == -1) throw "BG_FREQ_NOT_SET";
|
|
|
633 return this.freqs[alph_index];
|
|
|
634 }
|
|
|
635
|
|
|
636 function Alphabet_get_colour(alph_index) {
|
|
|
637 var red = "rgb(204,0,0)";
|
|
|
638 var blue = "rgb(0,0,204)";
|
|
|
639 var orange = "rgb(255,179,0)";
|
|
|
640 var green = "rgb(0,128,0)";
|
|
|
641 var yellow = "rgb(255,255,0)";
|
|
|
642 var purple = "rgb(204,0,204)";
|
|
|
643 var magenta = "rgb(255,0,255)";
|
|
|
644 var pink = "rgb(255,204,204)";
|
|
|
645 var turquoise = "rgb(51,230,204)";
|
|
|
646 if (alph_index < 0 || alph_index >= this.letter_count) {
|
|
|
647 throw "BAD_ALPHABET_INDEX";
|
|
|
648 }
|
|
|
649 if (this.is_nucleotide()) {
|
|
|
650 switch (this.alphabet[alph_index]) {
|
|
|
651 case "A":
|
|
|
652 return red;
|
|
|
653 case "C":
|
|
|
654 return blue;
|
|
|
655 case "G":
|
|
|
656 return orange;
|
|
|
657 case "T":
|
|
|
658 return green;
|
|
|
659 }
|
|
|
660 } else {
|
|
|
661 switch (this.alphabet[alph_index]) {
|
|
|
662 case "A":
|
|
|
663 case "C":
|
|
|
664 case "F":
|
|
|
665 case "I":
|
|
|
666 case "L":
|
|
|
667 case "V":
|
|
|
668 case "W":
|
|
|
669 case "M":
|
|
|
670 return blue;
|
|
|
671 case "N":
|
|
|
672 case "Q":
|
|
|
673 case "S":
|
|
|
674 case "T":
|
|
|
675 return green;
|
|
|
676 case "D":
|
|
|
677 case "E":
|
|
|
678 return magenta;
|
|
|
679 case "K":
|
|
|
680 case "R":
|
|
|
681 return red;
|
|
|
682 case "H":
|
|
|
683 return pink;
|
|
|
684 case "G":
|
|
|
685 return orange;
|
|
|
686 case "P":
|
|
|
687 return yellow;
|
|
|
688 case "Y":
|
|
|
689 return turquoise;
|
|
|
690 }
|
|
|
691 }
|
|
|
692 return "black";
|
|
|
693 }
|
|
|
694
|
|
|
695 function Alphabet_is_ambig(alph_index) {
|
|
|
696 if (alph_index < 0 || alph_index >= this.letter_count) {
|
|
|
697 throw "BAD_ALPHABET_INDEX";
|
|
|
698 }
|
|
|
699 if (this.is_nucleotide()) {
|
|
|
700 return ("ACGT".indexOf(this.alphabet[alph_index]) == -1);
|
|
|
701 } else {
|
|
|
702 return ("ACDEFGHIKLMNPQRSTVWY".indexOf(this.alphabet[alph_index]) == -1);
|
|
|
703 }
|
|
|
704 }
|
|
|
705
|
|
|
706 function Alphabet_get_index(letter) {
|
|
|
707 for (i = 0; i < this.letter_count; i++) {
|
|
|
708 if (this.alphabet[i] == letter.toUpperCase()) return i;
|
|
|
709 }
|
|
|
710 throw "UNKNOWN_LETTER";
|
|
|
711 }
|
|
|
712
|
|
|
713 function Alphabet_is_nucleotide() {
|
|
|
714 //TODO basic method, make better
|
|
|
715 if (this.letter_count < 20) return true;
|
|
|
716 return false;
|
|
|
717 }
|
|
|
718
|
|
|
719 function Alphabet_to_string() {
|
|
|
720 return (this.is_nucleotide() ? "Nucleotide" : "Protein") + " Alphabet " + (this.alphabet.join(""));
|
|
|
721 }
|
|
|
722
|
|
|
723 //======================================================================
|
|
|
724 // end Alphabet object
|
|
|
725 //======================================================================
|
|
|
726
|
|
|
727 //======================================================================
|
|
|
728 // start Symbol object
|
|
|
729 //======================================================================
|
|
|
730 function Symbol(alph_index, scale, alphabet) {
|
|
|
731 //variable prototype
|
|
|
732 this.symbol = alphabet.get_letter(alph_index);
|
|
|
733 this.scale = scale;
|
|
|
734 this.colour = alphabet.get_colour(alph_index);
|
|
|
735 //function prototype
|
|
|
736 this.get_symbol = Symbol_get_symbol;
|
|
|
737 this.get_scale = Symbol_get_scale;
|
|
|
738 this.get_colour = Symbol_get_colour;
|
|
|
739 this.toString = Symbol_to_string;
|
|
|
740 }
|
|
|
741
|
|
|
742 function Symbol_get_symbol() {
|
|
|
743 return this.symbol;
|
|
|
744 }
|
|
|
745
|
|
|
746 function Symbol_get_scale() {
|
|
|
747 return this.scale;
|
|
|
748 }
|
|
|
749
|
|
|
750 function Symbol_get_colour() {
|
|
|
751 return this.colour;
|
|
|
752 }
|
|
|
753
|
|
|
754 function Symbol_to_string() {
|
|
|
755 return this.symbol + " " + (Math.round(this.scale*1000)/10) + "%";
|
|
|
756 }
|
|
|
757
|
|
|
758 function compare_symbol(sym1, sym2) {
|
|
|
759 if (sym1.get_scale() < sym2.get_scale()) {
|
|
|
760 return -1;
|
|
|
761 } else if (sym1.get_scale() > sym2.get_scale()) {
|
|
|
762 return 1;
|
|
|
763 } else {
|
|
|
764 return 0;
|
|
|
765 }
|
|
|
766 }
|
|
|
767 //======================================================================
|
|
|
768 // end Symbol object
|
|
|
769 //======================================================================
|
|
|
770
|
|
|
771 //======================================================================
|
|
|
772 // start Pspm object
|
|
|
773 //======================================================================
|
|
|
774 function Pspm(pspm, name, ltrim, rtrim, nsites, evalue) {
|
|
|
775 if (ltrim === undefined) ltrim = 0;
|
|
|
776 if (rtrim === undefined) rtrim = 0;
|
|
|
777 if (nsites === undefined) nsites = 0;
|
|
|
778 if (evalue === undefined) evalue = 0;
|
|
|
779 //variable prototype
|
|
|
780 this.alph_length = 0;
|
|
|
781 this.motif_length = 0;
|
|
|
782 this.pspm = null;
|
|
|
783 this.name = (typeof name == "string" ? name : "");
|
|
|
784 this.nsites = nsites;
|
|
|
785 this.evalue = evalue;
|
|
|
786 this.ltrim = ltrim;
|
|
|
787 this.rtrim = rtrim;
|
|
|
788 //function prototype
|
|
|
789 this.copy = Pspm_copy;
|
|
|
790 this.reverse_complement = Pspm_reverse_complement;
|
|
|
791 this.get_stack = Pspm_get_stack;
|
|
|
792 this.get_stack_ic = Pspm_get_stack_ic;
|
|
|
793 this.get_motif_length = Pspm_get_motif_length;
|
|
|
794 this.get_alph_length = Pspm_get_alph_length;
|
|
|
795 this.get_left_trim = Pspm_get_left_trim;
|
|
|
796 this.get_right_trim = Pspm_get_right_trim;
|
|
|
797 this.as_pspm = Pspm_as_pspm;
|
|
|
798 this.as_pssm = Pspm_as_pssm;
|
|
|
799 this.toString = Pspm_to_string;
|
|
|
800 //construct
|
|
|
801 if (typeof pspm == "string") {
|
|
|
802 var pspm_header = /letter-probability matrix:\s+alength=\s+(\d+)\s+w=\s+(\d+)(\s+nsites=\s+(\S+))?(\s+E=\s+(\S+))?\s*/;
|
|
|
803 var lines = pspm.split(/\n/);
|
|
|
804 var read_pspm = false;
|
|
|
805 var line_num = 0;
|
|
|
806 var col_num = 0;
|
|
|
807 this.pspm = new Array();
|
|
|
808 for (line_index in lines) {
|
|
|
809 //exclude inherited properties and undefined properties
|
|
|
810 if (!lines.hasOwnProperty(line_index) || lines[line_index] === undefined) continue;
|
|
|
811
|
|
|
812 var line = trim(lines[line_index]);
|
|
|
813 if (line == '') {
|
|
|
814 continue;
|
|
|
815 }
|
|
|
816 if (!read_pspm) {
|
|
|
817 var header_match = pspm_header.exec(line);
|
|
|
818 if (header_match != null) {
|
|
|
819 read_pspm = true;
|
|
|
820 this.alph_length = (+header_match[1]);
|
|
|
821 this.motif_length = (+header_match[2]);
|
|
|
822 if (header_match[4]) this.nsites = parseFloat(header_match[4]);//not always an integer
|
|
|
823 if (header_match[6]) this.evalue = parseFloat(header_match[6]);
|
|
|
824 this.pspm = new Array(this.motif_length);
|
|
|
825 }
|
|
|
826 continue;
|
|
|
827 }
|
|
|
828 if (line_num >= this.motif_length) {
|
|
|
829 throw "TOO_MANY_ROWS";
|
|
|
830 }
|
|
|
831 this.pspm[line_num] = new Array(this.alph_length);
|
|
|
832 col_num = 0;
|
|
|
833 var parts = line.split(/\s+/);
|
|
|
834 for (part_index in parts) {
|
|
|
835 //exclude inherited properties and undefined properties
|
|
|
836 if (!parts.hasOwnProperty(part_index) || parts[part_index] === undefined) continue;
|
|
|
837
|
|
|
838 var prob = parts[part_index];
|
|
|
839 if (col_num >= this.alph_length) {
|
|
|
840 throw "TOO_MANY_COLS";
|
|
|
841 }
|
|
|
842 this.pspm[line_num][col_num] = (+prob);
|
|
|
843 //check the probability is within bounds
|
|
|
844 if (this.pspm[line_num][col_num] > 1 || this.pspm[line_num][col_num] < 0) {
|
|
|
845 throw "NUM_NOT_PROB";
|
|
|
846 }
|
|
|
847 col_num++;
|
|
|
848 }
|
|
|
849 if (col_num != this.alph_length) {
|
|
|
850 throw "TOO_FEW_COLS";
|
|
|
851 }
|
|
|
852 line_num++;
|
|
|
853 }
|
|
|
854 if (line_num != this.motif_length) {
|
|
|
855 throw "TOO_FEW_ROWS";
|
|
|
856 }
|
|
|
857 } else {
|
|
|
858 // assume pspm is a nested array
|
|
|
859 this.motif_length = pspm.length;
|
|
|
860 this.alpha_length = (pspm.length > 0 ? pspm[0].length : 0);
|
|
|
861 this.pspm = new Array(this.motif_length);
|
|
|
862 // copy pspm and check
|
|
|
863 for (var row = 0; row < this.motif_length; row++) {
|
|
|
864 if (this.alpha_length != pspm[row].length) throw "COLUMN_MISMATCH";
|
|
|
865 this.pspm[row] = new Array(this.alpha_length);
|
|
|
866 var row_sum = 0;
|
|
|
867 for (var col = 0; col < this.alpha_length; col++) {
|
|
|
868 row_sum += this.pspm[row][col];
|
|
|
869 this.pspm[row][col] = 0 + pspm[row][col];
|
|
|
870 }
|
|
|
871 var delta = 0.1
|
|
|
872 if ((row_sum > 1 && (row_sum - 1) > delta) ||
|
|
|
873 (row_sum < 1 && (1 - row_sum) > delta)) {
|
|
|
874 throw "INVALID_SUM";
|
|
|
875 }
|
|
|
876 }
|
|
|
877 }
|
|
|
878 }
|
|
|
879
|
|
|
880 function Clone() {}
|
|
|
881
|
|
|
882 function Pspm_copy() {
|
|
|
883 Clone.prototype = this;
|
|
|
884 var clone = new Clone();
|
|
|
885 //so far only a shallow copy, need to copy everything
|
|
|
886 clone.alph_length = (0+this.alph_length);
|
|
|
887 clone.motif_length = (0+this.motif_length);
|
|
|
888 clone.name = (""+this.name);
|
|
|
889 clone.nsites = (0+this.nsites);
|
|
|
890 clone.evalue = (0+this.evalue);
|
|
|
891 clone.ltrim = (0+this.ltrim);
|
|
|
892 clone.rtrim = (0+this.rtrim);
|
|
|
893 clone.pspm = new Array(this.motif_length);
|
|
|
894 for (row = 0; row < this.motif_length; row++) {
|
|
|
895 clone.pspm[row] = new Array(this.alph_length);
|
|
|
896 for (col = 0; col < this.alph_length; col++) {
|
|
|
897 clone.pspm[row][col] = (0+this.pspm[row][col]);
|
|
|
898 }
|
|
|
899 }
|
|
|
900 return clone;
|
|
|
901 }
|
|
|
902
|
|
|
903 function Pspm_reverse_complement(alphabet) {
|
|
|
904 if (this.alph_length != alphabet.get_size()) {
|
|
|
905 throw "ALPHABET_MISMATCH";
|
|
|
906 }
|
|
|
907 if (!alphabet.is_nucleotide()) {
|
|
|
908 throw "NO_PROTEIN_RC";
|
|
|
909 }
|
|
|
910 //reverse
|
|
|
911 var x = 0;
|
|
|
912 var y = this.motif_length-1;
|
|
|
913 while (x < y) {
|
|
|
914 var temp = this.pspm[x];
|
|
|
915 this.pspm[x] = this.pspm[y];
|
|
|
916 this.pspm[y] = temp;
|
|
|
917 x++;
|
|
|
918 y--;
|
|
|
919 }
|
|
|
920 //complement
|
|
|
921 var a_index = alphabet.get_index("A");
|
|
|
922 var c_index = alphabet.get_index("C");
|
|
|
923 var g_index = alphabet.get_index("G");
|
|
|
924 var t_index = alphabet.get_index("T");
|
|
|
925 for (i = 0; i < this.motif_length; i++) {
|
|
|
926 var row = this.pspm[i];
|
|
|
927 //swap A and T
|
|
|
928 var temp = row[a_index];
|
|
|
929 row[a_index] = row[t_index];
|
|
|
930 row[t_index] = temp;
|
|
|
931 //swap C and G
|
|
|
932 temp = row[c_index];
|
|
|
933 row[c_index] = row[g_index];
|
|
|
934 row[g_index] = temp;
|
|
|
935 }
|
|
|
936 //swap triming
|
|
|
937 var temp_trim = this.ltrim;
|
|
|
938 this.ltrim = this.rtrim;
|
|
|
939 this.rtrim = temp_trim;
|
|
|
940 //note that ambigs are ignored because they don't effect motifs
|
|
|
941 return this; //allow function chaining...
|
|
|
942 }
|
|
|
943
|
|
|
944 function Pspm_get_stack(position, alphabet) {
|
|
|
945 if (this.alph_length != alphabet.get_size()) {
|
|
|
946 throw "ALPHABET_MISMATCH";
|
|
|
947 }
|
|
|
948 var row = this.pspm[position];
|
|
|
949 var stack_ic = this.get_stack_ic(position, alphabet);
|
|
|
950 var alphabet_ic = alphabet.get_ic();
|
|
|
951 var stack = new Array();
|
|
|
952 for (i = 0; i < this.alph_length; i++) {
|
|
|
953 if (alphabet.is_ambig(i)) continue;
|
|
|
954 var sym = new Symbol(i, row[i]*stack_ic/alphabet_ic, alphabet);
|
|
|
955 if (sym.get_scale() <= 0) continue;
|
|
|
956 stack.push(sym);
|
|
|
957 }
|
|
|
958 stack.sort(compare_symbol);
|
|
|
959 return stack;
|
|
|
960 }
|
|
|
961
|
|
|
962 function Pspm_get_stack_ic(position, alphabet) {
|
|
|
963 if (this.alph_length != alphabet.get_size()) {
|
|
|
964 throw "ALPHABET_MISMATCH";
|
|
|
965 }
|
|
|
966 var row = this.pspm[position];
|
|
|
967 var H = 0;
|
|
|
968 for (var i = 0; i < this.alph_length; i++) {
|
|
|
969 if (alphabet.is_ambig(i)) continue;
|
|
|
970 if (row[i] == 0) continue;
|
|
|
971 H -= (row[i] * (Math.log(row[i]) / Math.LN2));
|
|
|
972 }
|
|
|
973 return alphabet.get_ic() - H;
|
|
|
974 }
|
|
|
975
|
|
|
976 function Pspm_get_error(alphabet) {
|
|
|
977 var asize;
|
|
|
978 if (this.nsites == 0) return 0;
|
|
|
979 if (alphabet.is_nucleotide()) {
|
|
|
980 asize = 4;
|
|
|
981 } else {
|
|
|
982 asize = 20;
|
|
|
983 }
|
|
|
984 return (asize-1) / (2 * Math.log(2)*this.nsites);
|
|
|
985 }
|
|
|
986
|
|
|
987 function Pspm_get_motif_length() {
|
|
|
988 return this.motif_length;
|
|
|
989 }
|
|
|
990
|
|
|
991 function Pspm_get_alph_length() {
|
|
|
992 return this.alph_length;
|
|
|
993 }
|
|
|
994
|
|
|
995 function Pspm_get_left_trim() {
|
|
|
996 return this.ltrim;
|
|
|
997 }
|
|
|
998
|
|
|
999 function Pspm_get_right_trim() {
|
|
|
1000 return this.rtrim;
|
|
|
1001 }
|
|
|
1002
|
|
|
1003 function Pspm_as_pspm() {
|
|
|
1004 var out = "letter-probability matrix: alength= " + this.alph_length +
|
|
|
1005 " w= " + this.motif_length + " nsites= " + this.nsites +
|
|
|
1006 " E= " + this.evalue.toExponential() + "\n";
|
|
|
1007 for (var row = 0; row < this.motif_length; row++) {
|
|
|
1008 for (var col = 0; col < this.alph_length; col++) {
|
|
|
1009 if (col != 0) out += " ";
|
|
|
1010 out += this.pspm[row][col].toFixed(6);
|
|
|
1011 }
|
|
|
1012 out += "\n";
|
|
|
1013 }
|
|
|
1014 return out;
|
|
|
1015 }
|
|
|
1016
|
|
|
1017 function Pspm_as_pssm(alphabet, pseudo) {
|
|
|
1018 if (typeof pseudo != "number") pseudo = 0.1;
|
|
|
1019 var out = "log-odds matrix: alength= " + this.alph_length +
|
|
|
1020 " w= " + this.motif_length +
|
|
|
1021 " E= " + this.evalue.toExponential() + "\n";
|
|
|
1022 var log2 = Math.log(2);
|
|
|
1023 var total = this.nsites + pseudo;
|
|
|
1024 for (var row = 0; row < this.motif_length; row++) {
|
|
|
1025 for (var col = 0; col < this.alph_length; col++) {
|
|
|
1026 if (col != 0) out += " ";
|
|
|
1027 var p = this.pspm[row][col];
|
|
|
1028 // to avoid log of zero we add a pseudo count
|
|
|
1029 var bg = alphabet.get_bg_freq(col);
|
|
|
1030 var p2 = (p * this.nsites + bg * pseudo) / total;
|
|
|
1031 // now calculate the score
|
|
|
1032 var score = -10000;
|
|
|
1033 if (p2 > 0) {
|
|
|
1034 score = Math.round((Math.log(p2 / bg) / log2) * 100)
|
|
|
1035 }
|
|
|
1036 out += score;
|
|
|
1037 }
|
|
|
1038 out += "\n";
|
|
|
1039 }
|
|
|
1040 return out;
|
|
|
1041 }
|
|
|
1042
|
|
|
1043 function Pspm_to_string() {
|
|
|
1044 var str = "";
|
|
|
1045 for (row_index in this.pspm) {
|
|
|
1046 //exclude inherited properties and undefined properties
|
|
|
1047 if (!this.pspm.hasOwnProperty(row_index) || this.pspm[row_index] === undefined) continue;
|
|
|
1048
|
|
|
1049 var row = this.pspm[row_index];
|
|
|
1050 str += row.join("\t") + "\n";
|
|
|
1051 }
|
|
|
1052 return str;
|
|
|
1053 }
|
|
|
1054 //======================================================================
|
|
|
1055 // end Pspm object
|
|
|
1056 //======================================================================
|
|
|
1057
|
|
|
1058 //======================================================================
|
|
|
1059 // start Logo object
|
|
|
1060 //======================================================================
|
|
|
1061 function Logo(alphabet, fine_text) {
|
|
|
1062 this.alphabet = alphabet;
|
|
|
1063 this.fine_text = fine_text;
|
|
|
1064 this.pspm_list = [];
|
|
|
1065 this.pspm_column = [];
|
|
|
1066 this.rows = 0;
|
|
|
1067 this.columns = 0;
|
|
|
1068
|
|
|
1069 //functions
|
|
|
1070 this.add_pspm = Logo_add_pspm;
|
|
|
1071 this.get_columns = Logo_get_columns;
|
|
|
1072 this.get_rows = Logo_get_rows;
|
|
|
1073 this.get_pspm = Logo_get_pspm;
|
|
|
1074 this.get_offset = Logo_get_offset;
|
|
|
1075 }
|
|
|
1076
|
|
|
1077 function Logo_add_pspm(pspm, column) {
|
|
|
1078 if (column === undefined) column = 0;
|
|
|
1079 else if (column < 0) throw "COLUMN_OUT_OF_BOUNDS";
|
|
|
1080 this.pspm_list[this.rows] = pspm;
|
|
|
1081 this.pspm_column[this.rows] = column;
|
|
|
1082 this.rows++;
|
|
|
1083 var col = column + pspm.get_motif_length();
|
|
|
1084 if (col > this.columns) this.columns = col;
|
|
|
1085 }
|
|
|
1086
|
|
|
1087 function Logo_get_columns() {
|
|
|
1088 return this.columns;
|
|
|
1089 }
|
|
|
1090
|
|
|
1091 function Logo_get_rows() {
|
|
|
1092 return this.rows;
|
|
|
1093 }
|
|
|
1094
|
|
|
1095 function Logo_get_pspm(row_index) {
|
|
|
1096 if (row_index < 0 || row_index >= this.rows) throw "INDEX_OUT_OF_BOUNDS";
|
|
|
1097 return this.pspm_list[row_index];
|
|
|
1098 }
|
|
|
1099
|
|
|
1100 function Logo_get_offset(row_index) {
|
|
|
1101 if (row_index < 0 || row_index >= this.rows) throw "INDEX_OUT_OF_BOUNDS";
|
|
|
1102 return this.pspm_column[row_index];
|
|
|
1103 }
|
|
|
1104
|
|
|
1105 //======================================================================
|
|
|
1106 // end Logo object
|
|
|
1107 //======================================================================
|
|
|
1108
|
|
|
1109 //======================================================================
|
|
|
1110 // start RasterizedAlphabet
|
|
|
1111 //======================================================================
|
|
|
1112
|
|
|
1113 // Rasterize Alphabet
|
|
|
1114 // 1) Measure width of text at default font for all symbols in alphabet
|
|
|
1115 // 2) sort in width ascending
|
|
|
1116 // 3) Drop the top and bottom 10% (designed to ignore outliers like 'W' and 'I')
|
|
|
1117 // 4) Calculate the average as the maximum scaling factor (designed to stop I becoming a rectangular blob).
|
|
|
1118 // 5) Assume scale of zero would result in width of zero, interpolate scale required to make perfect width font
|
|
|
1119 // 6) Draw text onto temp canvas at calculated scale
|
|
|
1120 // 7) Find bounds of drawn text
|
|
|
1121 // 8) Paint on to another canvas at the desired height (but only scaling width to fit if larger).
|
|
|
1122 function RasterizedAlphabet(alphabet, font, target_width) {
|
|
|
1123 //variable prototypes
|
|
|
1124 this.lookup = []; //a map of letter to index
|
|
|
1125 this.rasters = []; //a list of rasters
|
|
|
1126 this.dimensions = []; //a list of dimensions
|
|
|
1127
|
|
|
1128 //function prototypes
|
|
|
1129 this.draw = RasterizedAlphabet_draw;
|
|
|
1130
|
|
|
1131 //construct
|
|
|
1132 var default_size = 60; // size of square to assume as the default width
|
|
|
1133 var safety_pad = 20; // pixels to pad around so we don't miss the edges
|
|
|
1134 // create a canvas to do our rasterizing on
|
|
|
1135 var canvas = document.createElement("canvas");
|
|
|
1136 // assume the default font would fit in a canvas of 100 by 100
|
|
|
1137 canvas.width = default_size + 2 * safety_pad;
|
|
|
1138 canvas.height = default_size + 2 * safety_pad;
|
|
|
1139 // check for canvas support before attempting anything
|
|
|
1140 if (!canvas.getContext) throw "NO_CANVAS_SUPPORT";
|
|
|
1141 var ctx = canvas.getContext('2d');
|
|
|
1142 // check for html5 text drawing support
|
|
|
1143 if (!supports_text(ctx)) throw "NO_CANVAS_TEXT_SUPPORT";
|
|
|
1144 // calculate the middle
|
|
|
1145 var middle = Math.round(canvas.width / 2);
|
|
|
1146 // calculate the baseline
|
|
|
1147 var baseline = Math.round(canvas.height - safety_pad);
|
|
|
1148 // list of widths
|
|
|
1149 var widths = [];
|
|
|
1150 var count = 0;
|
|
|
1151 var letters = [];
|
|
|
1152 //now measure each letter in the alphabet
|
|
|
1153 for (var i = 0; i < alphabet.get_size(); ++i) {
|
|
|
1154 if (alphabet.is_ambig(i)) continue; //skip ambigs as they're never rendered
|
|
|
1155 var letter = alphabet.get_letter(i);
|
|
|
1156 letters.push(letter);
|
|
|
1157 var pos = count++;
|
|
|
1158 this.lookup[letter] = pos;
|
|
|
1159 //clear the canvas
|
|
|
1160 canvas.width = canvas.width;
|
|
|
1161 // get the context and prepare to draw our width test
|
|
|
1162 var ctx = canvas.getContext('2d');
|
|
|
1163 ctx.font = font;
|
|
|
1164 ctx.fillStyle = alphabet.get_colour(i);
|
|
|
1165 ctx.textAlign = "center";
|
|
|
1166 ctx.translate(middle, baseline);
|
|
|
1167 // draw the test text
|
|
|
1168 ctx.fillText(letter, 0, 0);
|
|
|
1169 //measure
|
|
|
1170 var size = RasterizedAlphabet_measure(ctx, canvas.width, canvas.height);
|
|
|
1171 if (size.width == 0) throw "INVISIBLE_LETTER"; //maybe the fill was white on white?
|
|
|
1172 widths.push(size.width);
|
|
|
1173 this.dimensions[pos] = size;
|
|
|
1174 }
|
|
|
1175 //sort the widths
|
|
|
1176 widths.sort(function(a,b) {return a - b;});
|
|
|
1177 //drop 10% of the items off each end
|
|
|
1178 var tenpercent = Math.floor(widths.length / 10);
|
|
|
1179 for (var i = 0; i < tenpercent; ++i) {
|
|
|
1180 widths.pop();
|
|
|
1181 widths.shift();
|
|
|
1182 }
|
|
|
1183 //calculate average width
|
|
|
1184 var avg_width = 0;
|
|
|
1185 for (var i = 0; i < widths.length; ++i) avg_width += widths[i];
|
|
|
1186 avg_width /= widths.length;
|
|
|
1187 // calculate scales
|
|
|
1188 for (var i = 0; i < this.dimensions.length; ++i) {
|
|
|
1189 var size = this.dimensions[i];
|
|
|
1190 // calculate scale
|
|
|
1191 var scale = target_width / Math.max(avg_width, size.width);
|
|
|
1192 // estimate scaled height
|
|
|
1193 var target_height = size.height * scale;
|
|
|
1194 // create an approprately sized canvas
|
|
|
1195 var raster = document.createElement("canvas");
|
|
|
1196 raster.width = target_width; // if it goes over the edge too bad...
|
|
|
1197 raster.height = target_height + safety_pad * 2;
|
|
|
1198 // calculate the middle
|
|
|
1199 middle = Math.round(raster.width / 2);
|
|
|
1200 // calculate the baseline
|
|
|
1201 baseline = Math.round(raster.height - safety_pad);
|
|
|
1202 // get the context and prepare to draw the rasterized text
|
|
|
1203 ctx = raster.getContext('2d');
|
|
|
1204 ctx.font = font;
|
|
|
1205 ctx.fillStyle = alphabet.get_colour(i);
|
|
|
1206 ctx.textAlign = "center";
|
|
|
1207 ctx.translate(middle, baseline);
|
|
|
1208 ctx.save();
|
|
|
1209 ctx.scale(scale, scale);
|
|
|
1210 // draw the rasterized text
|
|
|
1211 ctx.fillText(letters[i], 0, 0);
|
|
|
1212 ctx.restore();
|
|
|
1213 this.rasters[i] = raster;
|
|
|
1214 this.dimensions[i] = RasterizedAlphabet_measure(ctx, raster.width, raster.height);
|
|
|
1215 }
|
|
|
1216 }
|
|
|
1217
|
|
|
1218 function RasterizedAlphabet_measure(ctx, cwidth, cheight) {
|
|
|
1219 var data = ctx.getImageData(0, 0, cwidth, cheight).data;
|
|
|
1220 var r = 0, c = 0;// r: row, c: column
|
|
|
1221 var top_line = -1, bottom_line = -1, left_line = -1, right_line = -1;
|
|
|
1222 var txt_width = 0, txt_height = 0;
|
|
|
1223 // Find the top-most line with a non-white pixel
|
|
|
1224 for (r = 0; r < cheight; r++) {
|
|
|
1225 for (c = 0; c < cwidth; c++) {
|
|
|
1226 if (data[r * cwidth * 4 + c * 4 + 3]) {
|
|
|
1227 top_line = r;
|
|
|
1228 break;
|
|
|
1229 }
|
|
|
1230 }
|
|
|
1231 if (top_line != -1) break;
|
|
|
1232 }
|
|
|
1233
|
|
|
1234 //find the last line with a non-white pixel
|
|
|
1235 if (top_line != -1) {
|
|
|
1236 for (r = cheight-1; r >= top_line; r--) {
|
|
|
1237 for(c = 0; c < cwidth; c++) {
|
|
|
1238 if(data[r * cwidth * 4 + c * 4 + 3]) {
|
|
|
1239 bottom_line = r;
|
|
|
1240 break;
|
|
|
1241 }
|
|
|
1242 }
|
|
|
1243 if (bottom_line != -1) break;
|
|
|
1244 }
|
|
|
1245 txt_height = bottom_line - top_line + 1;
|
|
|
1246 }
|
|
|
1247
|
|
|
1248 // Find the left-most line with a non-white pixel
|
|
|
1249 for (c = 0; c < cwidth; c++) {
|
|
|
1250 for (r = 0; r < cheight; r++) {
|
|
|
1251 if (data[r * cwidth * 4 + c * 4 + 3]) {
|
|
|
1252 left_line = c;
|
|
|
1253 break;
|
|
|
1254 }
|
|
|
1255 }
|
|
|
1256 if (left_line != -1) break;
|
|
|
1257 }
|
|
|
1258
|
|
|
1259 //find the right most line with a non-white pixel
|
|
|
1260 if (left_line != -1) {
|
|
|
1261 for (c = cwidth-1; c >= left_line; c--) {
|
|
|
1262 for(r = 0; r < cheight; r++) {
|
|
|
1263 if(data[r * cwidth * 4 + c * 4 + 3]) {
|
|
|
1264 right_line = c;
|
|
|
1265 break;
|
|
|
1266 }
|
|
|
1267 }
|
|
|
1268 if (right_line != -1) break;
|
|
|
1269 }
|
|
|
1270 txt_width = right_line - left_line + 1;
|
|
|
1271 }
|
|
|
1272
|
|
|
1273 //return the bounds
|
|
|
1274 return {bound_top: top_line, bound_bottom: bottom_line, bound_left: left_line, bound_right: right_line, width: txt_width, height: txt_height};
|
|
|
1275 }
|
|
|
1276
|
|
|
1277 function RasterizedAlphabet_draw(ctx, letter, dx, dy, dWidth, dHeight) {
|
|
|
1278 var index = this.lookup[letter];
|
|
|
1279 var raster = this.rasters[index];
|
|
|
1280 var size = this.dimensions[index];
|
|
|
1281 ctx.drawImage(raster, 0, size.bound_top -1, raster.width, size.height+1, dx, dy, dWidth, dHeight);
|
|
|
1282 }
|
|
|
1283
|
|
|
1284 //======================================================================
|
|
|
1285 // end RasterizedAlphabet
|
|
|
1286 //======================================================================
|
|
|
1287
|
|
|
1288 //======================================================================
|
|
|
1289 // start LogoMetrics object
|
|
|
1290 //======================================================================
|
|
|
1291
|
|
|
1292 function LogoMetrics(ctx, canvas_width, canvas_height, logo_columns, logo_rows, allow_space_for_names) {
|
|
|
1293 if (allow_space_for_names === undefined) allow_space_for_names = false;
|
|
|
1294 //variable prototypes
|
|
|
1295 this.canvas_width = canvas_width;
|
|
|
1296 this.canvas_height = canvas_height;
|
|
|
1297 this.scale_x = 1;
|
|
|
1298 this.scale_y = 1;
|
|
|
1299 this.pad_top = 5;
|
|
|
1300 this.pad_left = 10;
|
|
|
1301 this.pad_right = 5;
|
|
|
1302 this.pad_bottom = 0;
|
|
|
1303 this.pad_middle = 20;
|
|
|
1304 this.name_height = 14;
|
|
|
1305 this.name_font = "bold " + this.name_height + "px Times, sans-serif";
|
|
|
1306 this.name_spacer = 0;
|
|
|
1307 this.y_label = "bits"
|
|
|
1308 this.y_label_height = 12;
|
|
|
1309 this.y_label_font = "bold " + this.y_label_height + "px Helvetica, sans-serif";
|
|
|
1310 this.y_label_spacer = 3;
|
|
|
1311 this.y_num_height = 12;
|
|
|
1312 this.y_num_width = 0;
|
|
|
1313 this.y_num_font = "bold " + this.y_num_height + "px Helvetica, sans-serif";
|
|
|
1314 this.y_tic_width = 5;
|
|
|
1315 this.stack_pad_left = 0;
|
|
|
1316 this.stack_font = "bold 25px Helvetica, sans-serif";
|
|
|
1317 this.stack_height = 90;
|
|
|
1318 this.stack_width = 26;
|
|
|
1319 this.stacks_pad_right = 5;
|
|
|
1320 this.x_num_above = 2;
|
|
|
1321 this.x_num_height = 12;
|
|
|
1322 this.x_num_width = 0;
|
|
|
1323 this.x_num_font = "bold " + this.x_num_height + "px Helvetica, sans-serif";
|
|
|
1324 this.fine_txt_height = 6;
|
|
|
1325 this.fine_txt_above = 2;
|
|
|
1326 this.fine_txt_font = "normal " + this.fine_txt_height + "px Helvetica, sans-serif";
|
|
|
1327 this.letter_metrics = new Array();
|
|
|
1328 this.summed_width = 0;
|
|
|
1329 this.summed_height = 0;
|
|
|
1330 //function prototypes
|
|
|
1331 //none
|
|
|
1332 //calculate the width of the y axis numbers
|
|
|
1333 ctx.font = this.y_num_font;
|
|
|
1334 for (var i = 0; i <= 2; i++) {
|
|
|
1335 this.y_num_width = Math.max(this.y_num_width, ctx.measureText("" + i).width);
|
|
|
1336 }
|
|
|
1337 //calculate the width of the x axis numbers (but they are rotated so it becomes height)
|
|
|
1338 ctx.font = this.x_num_font;
|
|
|
1339 for (var i = 1; i <= logo_columns; i++) {
|
|
|
1340 this.x_num_width = Math.max(this.x_num_width, ctx.measureText("" + i).width);
|
|
|
1341 }
|
|
|
1342
|
|
|
1343 //calculate how much vertical space we want to draw this
|
|
|
1344 //first we add the padding at the top and bottom since that's always there
|
|
|
1345 this.summed_height += this.pad_top + this.pad_bottom;
|
|
|
1346 //all except the last row have the same amount of space allocated to them
|
|
|
1347 if (logo_rows > 1) {
|
|
|
1348 var row_height = this.stack_height + this.pad_middle;
|
|
|
1349 if (allow_space_for_names) {
|
|
|
1350 row_height += this.name_height;
|
|
|
1351 //the label is allowed to overlap into the spacer
|
|
|
1352 row_height += Math.max(this.y_num_height/2, this.name_spacer);
|
|
|
1353 //the label is allowed to overlap the space used by the other label
|
|
|
1354 row_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above);
|
|
|
1355 } else {
|
|
|
1356 row_height += this.y_num_height/2;
|
|
|
1357 //the label is allowed to overlap the space used by the other label
|
|
|
1358 row_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above);
|
|
|
1359 }
|
|
|
1360 this.summed_height += row_height * (logo_rows - 1);
|
|
|
1361 }
|
|
|
1362 //the last row has the name and fine text below it but no padding
|
|
|
1363 this.summed_height += this.stack_height + this.y_num_height/2;
|
|
|
1364 if (allow_space_for_names) {
|
|
|
1365 this.summed_height += this.fine_txt_height + this.fine_txt_above + this.name_height;
|
|
|
1366 this.summed_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above + this.name_spacer);
|
|
|
1367 } else {
|
|
|
1368 this.summed_height += Math.max(this.y_num_height/2, this.x_num_height + this.x_num_above + this.fine_txt_height + this.fine_txt_above);
|
|
|
1369 }
|
|
|
1370
|
|
|
1371 //calculate how much horizontal space we want to draw this
|
|
|
1372 //first add the padding at the left and right since that's always there
|
|
|
1373 this.summed_width += this.pad_left + this.pad_right;
|
|
|
1374 //add on the space for the y-axis label
|
|
|
1375 this.summed_width += this.y_label_height + this.y_label_spacer;
|
|
|
1376 //add on the space for the y-axis
|
|
|
1377 this.summed_width += this.y_num_width + this.y_tic_width;
|
|
|
1378 //add on the space for the stacks
|
|
|
1379 this.summed_width += (this.stack_pad_left + this.stack_width) * logo_columns;
|
|
|
1380 //add on the padding after the stacks (an offset from the fine text)
|
|
|
1381 this.summed_width += this.stacks_pad_right;
|
|
|
1382
|
|
|
1383 //calculate scaling factors
|
|
|
1384 this.scale_y = this.canvas_height / this.summed_height;
|
|
|
1385 this.scale_x = this.canvas_width / this.summed_width;
|
|
|
1386
|
|
|
1387 //maintain aspect ratio
|
|
|
1388 if (this.scale_y > this.scale_x) {
|
|
|
1389 this.scale_y = this.scale_x;
|
|
|
1390 } else {
|
|
|
1391 this.scale_x = this.scale_y;
|
|
|
1392 }
|
|
|
1393
|
|
|
1394
|
|
|
1395 }
|
|
|
1396
|
|
|
1397 //======================================================================
|
|
|
1398 // end LogoMetrics object
|
|
|
1399 //======================================================================
|
|
|
1400
|
|
|
1401
|
|
|
1402 //found this trick at http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm
|
|
|
1403 function image_ok(img) {
|
|
|
1404 // During the onload event, IE correctly identifies any images that
|
|
|
1405 // weren't downloaded as not complete. Others should too. Gecko-based
|
|
|
1406 // browsers act like NS4 in that they report this incorrectly.
|
|
|
1407 if (!img.complete) {
|
|
|
1408 return false;
|
|
|
1409 }
|
|
|
1410 // However, they do have two very useful properties: naturalWidth and
|
|
|
1411 // naturalHeight. These give the true size of the image. If it failed
|
|
|
1412 // to load, either of these should be zero.
|
|
|
1413 if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
|
|
|
1414 return false;
|
|
|
1415 }
|
|
|
1416 // No other way of checking: assume it's ok.
|
|
|
1417 return true;
|
|
|
1418 }
|
|
|
1419
|
|
|
1420 function supports_text(ctx) {
|
|
|
1421 if (!ctx.fillText) return false;
|
|
|
1422 if (!ctx.measureText) return false;
|
|
|
1423 return true;
|
|
|
1424 }
|
|
|
1425
|
|
|
1426 //draws the scale, returns the width
|
|
|
1427 function draw_scale(ctx, metrics, alphabet_ic) {
|
|
|
1428 var tic_height = metrics.stack_height / alphabet_ic;
|
|
|
1429 ctx.save();
|
|
|
1430 ctx.lineWidth = 1.5;
|
|
|
1431 ctx.translate(metrics.y_label_height, metrics.y_num_height/2);
|
|
|
1432 //draw the axis label
|
|
|
1433 ctx.save();
|
|
|
1434 ctx.font = metrics.y_label_font;
|
|
|
1435 ctx.translate(0, metrics.stack_height/2);
|
|
|
1436 ctx.save();
|
|
|
1437 ctx.rotate(-(Math.PI / 2));
|
|
|
1438 ctx.textAlign = "center";
|
|
|
1439 ctx.fillText("bits", 0, 0);
|
|
|
1440 ctx.restore();
|
|
|
1441 ctx.restore();
|
|
|
1442
|
|
|
1443 ctx.translate(metrics.y_label_spacer + metrics.y_num_width, 0);
|
|
|
1444
|
|
|
1445 //draw the axis tics
|
|
|
1446 ctx.save();
|
|
|
1447 ctx.translate(0, metrics.stack_height);
|
|
|
1448 ctx.font = metrics.y_num_font;
|
|
|
1449 ctx.textAlign = "right";
|
|
|
1450 ctx.textBaseline = "middle";
|
|
|
1451 for (var i = 0; i <= alphabet_ic; i++) {
|
|
|
1452 //draw the number
|
|
|
1453 ctx.fillText("" + i, 0, 0);
|
|
|
1454 //draw the tic
|
|
|
1455 ctx.beginPath();
|
|
|
1456 ctx.moveTo(0, 0);
|
|
|
1457 ctx.lineTo(metrics.y_tic_width, 0);
|
|
|
1458 ctx.stroke();
|
|
|
1459 //prepare for next tic
|
|
|
1460 ctx.translate(0, -tic_height);
|
|
|
1461 }
|
|
|
1462 ctx.restore();
|
|
|
1463
|
|
|
1464 ctx.translate(metrics.y_tic_width, 0);
|
|
|
1465
|
|
|
1466 ctx.beginPath();
|
|
|
1467 ctx.moveTo(0, 0);
|
|
|
1468 ctx.lineTo(0, metrics.stack_height);
|
|
|
1469 ctx.stroke();
|
|
|
1470
|
|
|
1471 ctx.restore();
|
|
|
1472 }
|
|
|
1473
|
|
|
1474 function draw_stack_num(ctx, metrics, row_index) {
|
|
|
1475 ctx.save();
|
|
|
1476 ctx.font = metrics.x_num_font;
|
|
|
1477 ctx.translate(metrics.stack_width / 2, metrics.stack_height + metrics.x_num_above);
|
|
|
1478 ctx.save();
|
|
|
1479 ctx.rotate(-(Math.PI / 2));
|
|
|
1480 ctx.textBaseline = "middle"
|
|
|
1481 ctx.textAlign = "right"
|
|
|
1482 ctx.fillText("" + (row_index + 1), 0, 0);
|
|
|
1483 ctx.restore();
|
|
|
1484 ctx.restore();
|
|
|
1485 }
|
|
|
1486
|
|
|
1487 function draw_stack(ctx, metrics, symbols, raster) {
|
|
|
1488 var preferred_pad = 0;
|
|
|
1489 var sym_min = 5;
|
|
|
1490
|
|
|
1491 ctx.save();//1
|
|
|
1492 ctx.translate(0, metrics.stack_height);
|
|
|
1493 for (var i in symbols) {
|
|
|
1494 //exclude inherited properties and undefined properties
|
|
|
1495 if (!symbols.hasOwnProperty(i) || symbols[i] === undefined) continue;
|
|
|
1496
|
|
|
1497 var sym = symbols[i];
|
|
|
1498 var sym_height = metrics.stack_height * sym.get_scale();
|
|
|
1499
|
|
|
1500 var pad = preferred_pad;
|
|
|
1501 if (sym_height - pad < sym_min) {
|
|
|
1502 pad = Math.min(pad, Math.max(0, sym_height - sym_min));
|
|
|
1503 }
|
|
|
1504 sym_height -= pad;
|
|
|
1505
|
|
|
1506 //translate to the correct position
|
|
|
1507 ctx.translate(0, -(pad/2 + sym_height));
|
|
|
1508 //draw
|
|
|
1509 raster.draw(ctx, sym.get_symbol(), 0, 0, metrics.stack_width, sym_height);
|
|
|
1510 //translate past the padding
|
|
|
1511 ctx.translate(0, -(pad/2));
|
|
|
1512 }
|
|
|
1513 ctx.restore();//1
|
|
|
1514 }
|
|
|
1515
|
|
|
1516 //draws a stack of symbols
|
|
|
1517 function draw_stack_old(ctx, metrics, symbols) {
|
|
|
1518 var lpad = 2;
|
|
|
1519 var sym_min = 5;
|
|
|
1520 var pos = metrics.stack_height;
|
|
|
1521 for (var i in symbols) {
|
|
|
1522 //exclude inherited properties and undefined properties
|
|
|
1523 if (!symbols.hasOwnProperty(i) || symbols[i] === undefined) continue;
|
|
|
1524
|
|
|
1525 var sym = symbols[i];
|
|
|
1526 var sym_height = metrics.stack_height*sym.get_scale();
|
|
|
1527 var letter = metrics.get_letter_metrics(sym.get_symbol());
|
|
|
1528 //attempting to draw something smaller than a pixel causes display corruption
|
|
|
1529 if (sym_height >= 1) {
|
|
|
1530 //it's better to see the letter than to pad it
|
|
|
1531 var pad = lpad;
|
|
|
1532 if (sym_height - pad < sym_min) {
|
|
|
1533 pad = Math.min(pad, Math.max(0, sym_height - sym_min));
|
|
|
1534 }
|
|
|
1535 //move to the correct drawing position
|
|
|
1536 ctx.save();//s1
|
|
|
1537 ctx.translate(0, pos);
|
|
|
1538 //create a clipping rectangle to ensure the letter doesn't overlap when it's distorted
|
|
|
1539 ctx.save();//s2
|
|
|
1540 //ctx.beginPath(); //disabled clipping because after the improvements in the text metrics it looks better without
|
|
|
1541 //ctx.moveTo(-metrics.stack_width/2,0);
|
|
|
1542 //ctx.lineTo(metrics.stack_width/2, 0);
|
|
|
1543 //ctx.lineTo(metrics.stack_width/2, -sym_height);
|
|
|
1544 //ctx.lineTo(-metrics.stack_width/2, -sym_height);
|
|
|
1545 //ctx.lineTo(-metrics.stack_width/2,0);
|
|
|
1546 //ctx.clip();
|
|
|
1547 //now draw
|
|
|
1548 ctx.translate(0, -(pad/2));
|
|
|
1549 ctx.translate(0, -letter.get_descent(sym_height - pad));
|
|
|
1550 ctx.fillStyle = sym.get_colour();
|
|
|
1551 ctx.textAlign = "center";
|
|
|
1552 ctx.save();//s3
|
|
|
1553 ctx.scale(letter.wscale, letter.get_hscale(sym_height - pad));
|
|
|
1554 ctx.fillText(sym.get_symbol(), 0, 0);
|
|
|
1555 ctx.restore();//s3
|
|
|
1556
|
|
|
1557 ctx.restore();//s2
|
|
|
1558 ctx.restore();//s1
|
|
|
1559 }
|
|
|
1560
|
|
|
1561 pos = pos - sym_height;
|
|
|
1562 }
|
|
|
1563 }
|
|
|
1564
|
|
|
1565 function draw_dashed_line(ctx, pattern, start, x1, y1, x2, y2) {
|
|
|
1566 var x, y, len, i;
|
|
|
1567 var dx = x2 - x1;
|
|
|
1568 var dy = y2 - y1;
|
|
|
1569 var tlen = Math.pow(dx*dx + dy*dy, 0.5);
|
|
|
1570 var theta = Math.atan2(dy,dx);
|
|
|
1571 var mulx = Math.cos(theta);
|
|
|
1572 var muly = Math.sin(theta);
|
|
|
1573 var lx = [];
|
|
|
1574 var ly = [];
|
|
|
1575 for (i = 0; i < pattern; ++i) {
|
|
|
1576 lx.push(pattern[i] * mulx);
|
|
|
1577 ly.push(pattern[i] * muly);
|
|
|
1578 }
|
|
|
1579 i = start;
|
|
|
1580 x = x1;
|
|
|
1581 y = y1;
|
|
|
1582 len = 0;
|
|
|
1583 ctx.beginPath();
|
|
|
1584 while (len + pattern[i] < tlen) {
|
|
|
1585 ctx.moveTo(x, y);
|
|
|
1586 x += lx[i];
|
|
|
1587 y += ly[i];
|
|
|
1588 ctx.lineTo(x, y);
|
|
|
1589 len += pattern[i];
|
|
|
1590 i = (i + 1) % pattern.length;
|
|
|
1591 x += lx[i];
|
|
|
1592 y += ly[i];
|
|
|
1593 len += pattern[i];
|
|
|
1594 i = (i + 1) % pattern.length;
|
|
|
1595 }
|
|
|
1596 if (len < tlen) {
|
|
|
1597 ctx.moveTo(x, y);
|
|
|
1598 x += mulx * (tlen - len);
|
|
|
1599 y += muly * (tlen - len);
|
|
|
1600 ctx.lineTo(x, y);
|
|
|
1601 }
|
|
|
1602 ctx.stroke();
|
|
|
1603 }
|
|
|
1604
|
|
|
1605 function draw_trim_background(ctx, metrics, pspm, offset) {
|
|
|
1606 var lwidth = metrics.stack_width * pspm.get_left_trim();
|
|
|
1607 var rwidth = metrics.stack_width * pspm.get_right_trim();
|
|
|
1608 var mwidth = metrics.stack_width * pspm.get_motif_length();
|
|
|
1609 var rstart = mwidth - rwidth;
|
|
|
1610 ctx.save();//s8
|
|
|
1611 ctx.translate(offset * metrics.stack_width, 0);
|
|
|
1612 ctx.fillStyle = "rgb(240, 240, 240)";
|
|
|
1613 if (pspm.get_left_trim() > 0) ctx.fillRect(0, 0, lwidth, metrics.stack_height);
|
|
|
1614 if (pspm.get_right_trim() > 0) ctx.fillRect(rstart, 0, rwidth, metrics.stack_height);
|
|
|
1615 ctx.fillStyle = "rgb(51, 51, 51)";
|
|
|
1616 if (pspm.get_left_trim() > 0) draw_dashed_line(ctx, [3], 0, lwidth-0.5, 0, lwidth-0.5, metrics.stack_height);
|
|
|
1617 if (pspm.get_right_trim() > 0) draw_dashed_line(ctx, [3], 0, rstart+0.5, 0, rstart+0.5, metrics.stack_height);
|
|
|
1618 ctx.restore();//s8
|
|
|
1619 }
|
|
|
1620
|
|
|
1621 function draw_logo_on_canvas(logo, canvas, show_names, scale) {
|
|
|
1622 var draw_name = (typeof show_names == "boolean" ? show_names : (logo.get_rows() > 1));
|
|
|
1623 var cwidth = canvas.width;
|
|
|
1624 var cheight = canvas.height;
|
|
|
1625 //need a minimum 46 x 120 canvas to draw the font size checks on
|
|
|
1626 if (canvas.width < 46) canvas.width = 46;
|
|
|
1627 if (canvas.height < 120) canvas.height = 120;
|
|
|
1628 var ctx = canvas.getContext('2d');
|
|
|
1629 //assume that the user wants the canvas scaled equally so calculate what the best width for this image should be
|
|
|
1630 var metrics = new LogoMetrics(ctx, canvas.width, canvas.height, logo.get_columns(), logo.get_rows(), draw_name);
|
|
|
1631 ctx.save();//s1
|
|
|
1632 if (typeof scale == "number") {
|
|
|
1633 //resize the canvas to fit the scaled logo
|
|
|
1634 cwidth = metrics.summed_width * scale;
|
|
|
1635 cheight = metrics.summed_height * scale;
|
|
|
1636 } else {
|
|
|
1637 if (cwidth == 0 && cheight == 0) {
|
|
|
1638 throw "CANVAS_MUST_HAVE_DIMENSIONS";
|
|
|
1639 } else if (cwidth == 0) {
|
|
|
1640 scale = cheight / metrics.summed_height;
|
|
|
1641 cwidth = metrics.summed_width * scale;
|
|
|
1642 } else if (cheight == 0) {
|
|
|
1643 scale = cwidth / metrics.summed_width;
|
|
|
1644 cheight = metrics.summed_height * scale;
|
|
|
1645 } else {
|
|
|
1646 scale = Math.min(cwidth / metrics.summed_width, cheight / metrics.summed_height);
|
|
|
1647 }
|
|
|
1648 }
|
|
|
1649 var raster = new RasterizedAlphabet(logo.alphabet, metrics.stack_font, metrics.stack_width * scale * 2);
|
|
|
1650 if (cwidth != canvas.width || cheight != canvas.height) {
|
|
|
1651 canvas.width = cwidth;
|
|
|
1652 canvas.height = cheight;
|
|
|
1653 //as the canvas has been resized the context is now out of date
|
|
|
1654 ctx = canvas.getContext('2d');
|
|
|
1655 }
|
|
|
1656 ctx.scale(scale, scale);
|
|
|
1657 ctx.save();//s2
|
|
|
1658 ctx.save();//s7
|
|
|
1659 //create margin
|
|
|
1660 ctx.translate(metrics.pad_left, metrics.pad_top);
|
|
|
1661 for (var pspm_i = 0; pspm_i < logo.get_rows(); ++pspm_i) {
|
|
|
1662 var pspm = logo.get_pspm(pspm_i);
|
|
|
1663 var offset = logo.get_offset(pspm_i);
|
|
|
1664 //optionally draw name if this isn't the last row or is the only row
|
|
|
1665 if (draw_name && (logo.get_rows() == 1 || pspm_i != (logo.get_rows()-1))) {
|
|
|
1666 ctx.save();//s4
|
|
|
1667 ctx.translate(metrics.summed_width/2, metrics.name_height);
|
|
|
1668 ctx.font = metrics.name_font;
|
|
|
1669 ctx.textAlign = "center";
|
|
|
1670 ctx.fillText(pspm.name, 0, 0);
|
|
|
1671 ctx.restore();//s4
|
|
|
1672 ctx.translate(0, metrics.name_height + Math.min(0, metrics.name_spacer - metrics.y_num_height/2));
|
|
|
1673 }
|
|
|
1674 //draw scale
|
|
|
1675 draw_scale(ctx, metrics, logo.alphabet.get_ic());
|
|
|
1676 ctx.save();//s5
|
|
|
1677 //translate across past the scale
|
|
|
1678 ctx.translate(metrics.y_label_height + metrics.y_label_spacer +
|
|
|
1679 metrics.y_num_width + metrics.y_tic_width, 0);
|
|
|
1680 //draw the trimming background
|
|
|
1681 if (pspm.get_left_trim() > 0 || pspm.get_right_trim() > 0) {
|
|
|
1682 draw_trim_background(ctx, metrics, pspm, offset);
|
|
|
1683 }
|
|
|
1684 //draw letters
|
|
|
1685 ctx.translate(0, metrics.y_num_height / 2);
|
|
|
1686 for (var col_index = 0; col_index < logo.get_columns(); col_index++) {
|
|
|
1687 ctx.translate(metrics.stack_pad_left,0);
|
|
|
1688 if (col_index >= offset && col_index < (offset + pspm.get_motif_length())) {
|
|
|
1689 var motif_position = col_index - offset;
|
|
|
1690 draw_stack_num(ctx, metrics, motif_position);
|
|
|
1691 draw_stack(ctx, metrics, pspm.get_stack(motif_position, logo.alphabet), raster);
|
|
|
1692 }
|
|
|
1693 ctx.translate(metrics.stack_width, 0);
|
|
|
1694 }
|
|
|
1695 ctx.restore();//s5
|
|
|
1696 ////optionally draw name if this is the last row but isn't the only row
|
|
|
1697 if (draw_name && (logo.get_rows() != 1 && pspm_i == (logo.get_rows()-1))) {
|
|
|
1698 //translate vertically past the stack and axis's
|
|
|
1699 ctx.translate(0, metrics.y_num_height/2 + metrics.stack_height +
|
|
|
1700 Math.max(metrics.y_num_height/2, metrics.x_num_above + metrics.x_num_width + metrics.name_spacer));
|
|
|
1701
|
|
|
1702 ctx.save();//s6
|
|
|
1703 ctx.translate(metrics.summed_width/2, metrics.name_height);
|
|
|
1704 ctx.font = metrics.name_font;
|
|
|
1705 ctx.textAlign = "center";
|
|
|
1706 ctx.fillText(pspm.name, 0, 0);
|
|
|
1707 ctx.restore();//s6
|
|
|
1708 ctx.translate(0, metrics.name_height);
|
|
|
1709 } else {
|
|
|
1710 //translate vertically past the stack and axis's
|
|
|
1711 ctx.translate(0, metrics.y_num_height/2 + metrics.stack_height + Math.max(metrics.y_num_height/2, metrics.x_num_above + metrics.x_num_width));
|
|
|
1712 }
|
|
|
1713 //if not the last row then add middle padding
|
|
|
1714 if (pspm_i != (logo.get_rows() -1)) {
|
|
|
1715 ctx.translate(0, metrics.pad_middle);
|
|
|
1716 }
|
|
|
1717 }
|
|
|
1718 ctx.restore();//s7
|
|
|
1719 ctx.translate(metrics.summed_width - metrics.pad_right, metrics.summed_height - metrics.pad_bottom);
|
|
|
1720 ctx.font = metrics.fine_txt_font;
|
|
|
1721 ctx.textAlign = "right";
|
|
|
1722 ctx.fillText(logo.fine_text, 0,0);
|
|
|
1723 ctx.restore();//s2
|
|
|
1724 ctx.restore();//s1
|
|
|
1725 }
|
|
|
1726
|
|
|
1727 function create_canvas(c_width, c_height, c_id, c_title, c_display) {
|
|
|
1728 var canvas = document.createElement("canvas");
|
|
|
1729 //check for canvas support before attempting anything
|
|
|
1730 if (!canvas.getContext) return null;
|
|
|
1731 var ctx = canvas.getContext('2d');
|
|
|
1732 //check for html5 text drawing support
|
|
|
1733 if (!supports_text(ctx)) return null;
|
|
|
1734 //size the canvas
|
|
|
1735 canvas.width = c_width;
|
|
|
1736 canvas.height = c_height;
|
|
|
1737 canvas.id = c_id;
|
|
|
1738 canvas.title = c_title;
|
|
|
1739 canvas.style.display = c_display;
|
|
|
1740 return canvas;
|
|
|
1741 }
|
|
|
1742
|
|
|
1743 function logo_1(alphabet, fine_text, pspm) {
|
|
|
1744 var logo = new Logo(alphabet, fine_text);
|
|
|
1745 logo.add_pspm(pspm);
|
|
|
1746 return logo;
|
|
|
1747 }
|
|
|
1748
|
|
|
1749 function logo_2(alphabet, fine_text, target, query, query_offset) {
|
|
|
1750 var logo = new Logo(alphabet, fine_text);
|
|
|
1751 if (query_offset < 0) {
|
|
|
1752 logo.add_pspm(target, -query_offset);
|
|
|
1753 logo.add_pspm(query);
|
|
|
1754 } else {
|
|
|
1755 logo.add_pspm(target);
|
|
|
1756 logo.add_pspm(query, query_offset);
|
|
|
1757 }
|
|
|
1758 return logo;
|
|
|
1759 }
|
|
|
1760
|
|
|
1761 /*
|
|
|
1762 * Specifies an alternate source for an image.
|
|
|
1763 * If the image with the image_id specified has
|
|
|
1764 * not loaded then a generated logo will be used
|
|
|
1765 * to replace it.
|
|
|
1766 *
|
|
|
1767 * Note that the image must either have dimensions
|
|
|
1768 * or a scale must be set.
|
|
|
1769 */
|
|
|
1770 function alternate_logo(logo, image_id, scale) {
|
|
|
1771 var image = document.getElementById(image_id);
|
|
|
1772 if (!image) {
|
|
|
1773 alert("Can't find specified image id (" + image_id + ")");
|
|
|
1774 return;
|
|
|
1775 }
|
|
|
1776 //if the image has loaded then there is no reason to use the canvas
|
|
|
1777 if (image_ok(image)) return;
|
|
|
1778 //the image has failed to load so replace it with a canvas if we can.
|
|
|
1779 var canvas = create_canvas(image.width, image.height, image_id, image.title, image.style.display);
|
|
|
1780 if (canvas == null) return;
|
|
|
1781 //draw the logo on the canvas
|
|
|
1782 draw_logo_on_canvas(logo, canvas, undefined, scale);
|
|
|
1783 //replace the image with the canvas
|
|
|
1784 image.parentNode.replaceChild(canvas, image);
|
|
|
1785 }
|
|
|
1786
|
|
|
1787 /*
|
|
|
1788 * Specifes that the element with the specified id
|
|
|
1789 * should be replaced with a generated logo.
|
|
|
1790 */
|
|
|
1791 function replace_logo(logo, replace_id, scale, title_txt, display_style) {
|
|
|
1792 var element = document.getElementById(replace_id);
|
|
|
1793 if (!replace_id) {
|
|
|
1794 alert("Can't find specified id (" + replace_id + ")");
|
|
|
1795 return;
|
|
|
1796 }
|
|
|
1797 //found the element!
|
|
|
1798 var canvas = create_canvas(50, 120, replace_id, title_txt, display_style);
|
|
|
1799 if (canvas == null) return;
|
|
|
1800 //draw the logo on the canvas
|
|
|
1801 draw_logo_on_canvas(logo, canvas, undefined, scale);
|
|
|
1802 //replace the element with the canvas
|
|
|
1803 element.parentNode.replaceChild(canvas, element);
|
|
|
1804 }
|
|
|
1805
|
|
|
1806 /*
|
|
|
1807 * Fast string trimming implementation found at
|
|
|
1808 * http://blog.stevenlevithan.com/archives/faster-trim-javascript
|
|
|
1809 *
|
|
|
1810 * Note that regex is good at removing leading space but
|
|
|
1811 * bad at removing trailing space as it has to first go through
|
|
|
1812 * the whole string.
|
|
|
1813 */
|
|
|
1814 function trim (str) {
|
|
|
1815 str = str.replace(/^\s\s*/, '');
|
|
|
1816 var ws = /\s/, i = str.length;
|
|
|
1817 while (ws.test(str.charAt(--i)));
|
|
|
1818 return str.slice(0, i + 1);
|
|
|
1819 }
|
|
|
1820 /* END INCLUDED FILE "motif_logo.js" */
|
|
|
1821
|
|
|
1822
|
|
|
1823
|
|
|
1824 /* START INCLUDED FILE "dreme-to-html.js" */
|
|
|
1825 var expansion_lookup = [];
|
|
|
1826
|
|
|
1827 /*
|
|
|
1828 * show_hidden
|
|
|
1829 *
|
|
|
1830 * Looks for specially named elements and switches to the shown view
|
|
|
1831 */
|
|
|
1832 function show_hidden(prefix) {
|
|
|
1833 document.getElementById(prefix + '_activator').style.display = 'none';
|
|
|
1834 document.getElementById(prefix + '_deactivator').style.display = 'block';
|
|
|
1835 document.getElementById(prefix + '_data').style.display = 'block';
|
|
|
1836 }
|
|
|
1837 /*
|
|
|
1838 * hide_shown
|
|
|
1839 *
|
|
|
1840 * Looks for specially named elements and switches to the hidden view
|
|
|
1841 */
|
|
|
1842 function hide_shown(prefix) {
|
|
|
1843 document.getElementById(prefix + '_activator').style.display = 'block';
|
|
|
1844 document.getElementById(prefix + '_deactivator').style.display = 'none';
|
|
|
1845 document.getElementById(prefix + '_data').style.display = 'none';
|
|
|
1846 }
|
|
|
1847
|
|
|
1848 function click_download_tab(tab) {
|
|
|
1849 document.getElementById("download_tab_num").value = tab;
|
|
|
1850 for (var i = 1; i <= 3; i++) {
|
|
|
1851 document.getElementById('download_tab_'+i).className = "tab" + (i==tab ? " activeTab" : "");
|
|
|
1852 document.getElementById('download_pnl_'+i).style.display = (i==tab ? "block" : "none");
|
|
|
1853 }
|
|
|
1854 document.getElementById('download_button').style.visibility = (tab==3 ? "visible" : "hidden");
|
|
|
1855 }
|
|
|
1856
|
|
|
1857
|
|
|
1858 /*
|
|
|
1859 * searches child nodes in depth first order and returns the
|
|
|
1860 * first it finds with the className specified.
|
|
|
1861 */
|
|
|
1862 function find_child_element_by_class(node, className) {
|
|
|
1863 var patt = new RegExp("\\b" + className + "\\b");
|
|
|
1864
|
|
|
1865 if (node.nodeType == Node.ELEMENT_NODE &&
|
|
|
1866 patt.test(node.className)) {
|
|
|
1867 return node;
|
|
|
1868 } else {
|
|
|
1869 var result = null;
|
|
|
1870 for (var i = 0; i < node.childNodes.length; i++) {
|
|
|
1871 result = find_child_element_by_class(node.childNodes[i], className);
|
|
|
1872 if (result != null) break;
|
|
|
1873 }
|
|
|
1874 return result;
|
|
|
1875 }
|
|
|
1876 }
|
|
|
1877
|
|
|
1878 function find_parent_element_by_class(node, className) {
|
|
|
1879 var patt = new RegExp("\\b" + className + "\\b");
|
|
|
1880 if (node.nodeType == Node.ELEMENT_NODE &&
|
|
|
1881 patt.test(node.className)) {
|
|
|
1882 return node;
|
|
|
1883 } else if (node.parentNode != null) {
|
|
|
1884 return find_parent_element_by_class(node.parentNode, className);
|
|
|
1885 }
|
|
|
1886 return null;
|
|
|
1887 }
|
|
|
1888
|
|
|
1889 /*
|
|
|
1890 * expand
|
|
|
1891 *
|
|
|
1892 * Expand the extra data section for a motif.
|
|
|
1893 */
|
|
|
1894 function expand(num) {
|
|
|
1895 // get motif data
|
|
|
1896 var motif_info = motif_seqs[num];
|
|
|
1897 var motif_id = motif_info[0];
|
|
|
1898 var seq = motif_info[1];
|
|
|
1899 var rcseq = motif_info[2];
|
|
|
1900 var length = motif_info[3];
|
|
|
1901 var nsites = motif_info[4];
|
|
|
1902 var p_hits = motif_info[5];
|
|
|
1903 var n_hits = motif_info[6];
|
|
|
1904 var pvalue = motif_info[7];
|
|
|
1905 var evalue = motif_info[8];
|
|
|
1906 var uevalue = motif_info[9];
|
|
|
1907 var matches = motif_info[10];
|
|
|
1908 // find the location to insert the expanded motif data
|
|
|
1909 var table = document.getElementById('dreme_motifs');
|
|
|
1910 var motif_row = document.getElementById('motif_row_' + num);
|
|
|
1911 var exp_row = table.insertRow(motif_row.rowIndex + 1);
|
|
|
1912 exp_row.id = 'exp_row_' + num;
|
|
|
1913 var cell = exp_row.insertCell(0);
|
|
|
1914 cell.colSpan = 9;
|
|
|
1915 // create the DOM to insert
|
|
|
1916 var exp = document.getElementById('expanded_motif').firstChild.cloneNode(true);
|
|
|
1917 // update fields
|
|
|
1918 set_content_to_text(find_child_element_by_class(exp, 'name'), seq);
|
|
|
1919 set_content_to_text(find_child_element_by_class(exp, 'num'), num);
|
|
|
1920 var img = find_child_element_by_class(exp, 'img_nc');
|
|
|
1921 img.src = motif_id + "nc_" + seq + ".png";
|
|
|
1922 var imgrc = find_child_element_by_class(exp, 'img_rc');
|
|
|
1923 imgrc.src = motif_id + "rc_" + rcseq + ".png";
|
|
|
1924 // fill in the details
|
|
|
1925 var details = find_child_element_by_class(exp, 'details');
|
|
|
1926 set_content_to_text(find_child_element_by_class(details, 'positives'), p_hits);
|
|
|
1927 set_content_to_text(find_child_element_by_class(details, 'negatives'), n_hits);
|
|
|
1928 set_content_to_text(find_child_element_by_class(details, 'pvalue'), pvalue);
|
|
|
1929 set_content_to_text(find_child_element_by_class(details, 'evalue'), evalue);
|
|
|
1930 set_content_to_text(find_child_element_by_class(details, 'uevalue'), uevalue);
|
|
|
1931
|
|
|
1932 // fill in match table
|
|
|
1933 var match_row = find_child_element_by_class(exp, 'match');
|
|
|
1934 var tbody = match_row.parentNode;
|
|
|
1935 for (var i = 0; i < matches.length; i++) {
|
|
|
1936 var match = matches[i];
|
|
|
1937 var cseq = match[0];
|
|
|
1938 var cpos = match[1];
|
|
|
1939 var cneg = match[2];
|
|
|
1940 var cpval = match[3].toExponential(1);
|
|
|
1941 var ceval = match[4].toExponential(1);
|
|
|
1942 var row = match_row.cloneNode(true);
|
|
|
1943 var td_cseq = find_child_element_by_class(row, 'dnaseq');
|
|
|
1944 set_content_to_text(td_cseq, cseq);
|
|
|
1945 colour_dna_seq(td_cseq);
|
|
|
1946 set_content_to_text(find_child_element_by_class(row, 'positives'), cpos);
|
|
|
1947 set_content_to_text(find_child_element_by_class(row, 'negatives'), cneg);
|
|
|
1948 set_content_to_text(find_child_element_by_class(row, 'pvalue'), cpval);
|
|
|
1949 set_content_to_text(find_child_element_by_class(row, 'evalue'), ceval);
|
|
|
1950 tbody.appendChild(row);
|
|
|
1951 }
|
|
|
1952 tbody.removeChild(match_row);
|
|
|
1953 // append the expanded information
|
|
|
1954 cell.appendChild(exp);
|
|
|
1955 // hide the old row
|
|
|
1956 motif_row.style.display = 'none';
|
|
|
1957 update_headers();
|
|
|
1958 }
|
|
|
1959
|
|
|
1960 function expanded_num(elem) {
|
|
|
1961 var exp = find_parent_element_by_class(elem, 'expanded_motif');
|
|
|
1962 var num = parseInt(nodes_text(text_nodes(find_child_element_by_class(exp, 'num'))));
|
|
|
1963 return num;
|
|
|
1964 }
|
|
|
1965
|
|
|
1966 function contract(contained_node) {
|
|
|
1967 var table = document.getElementById('dreme_motifs');
|
|
|
1968 var num = expanded_num(contained_node);
|
|
|
1969 var motif_row = document.getElementById('motif_row_' + num);
|
|
|
1970 var exp_row = document.getElementById('exp_row_' + num);
|
|
|
1971
|
|
|
1972 motif_row.style.display = 'table-row';
|
|
|
1973 table.deleteRow(exp_row.rowIndex);
|
|
|
1974 update_headers();
|
|
|
1975 }
|
|
|
1976
|
|
|
1977 function update_headers() {
|
|
|
1978 var motif_row_patt = new RegExp("\\bmotif_row\\b");
|
|
|
1979 var motif_head_patt = new RegExp("\\bmotif_head\\b");
|
|
|
1980 var table = document.getElementById('dreme_motifs');
|
|
|
1981 var header = table.tHead.getElementsByTagName('tr')[0];
|
|
|
1982 header.style.display = 'none';
|
|
|
1983 var trs = table.tBodies[0].getElementsByTagName('tr');
|
|
|
1984 var needHeader = true;
|
|
|
1985 for (var i = 0; i < trs.length; i++) {
|
|
|
1986 var row = trs[i];
|
|
|
1987 if (row.style.display == 'none') continue;
|
|
|
1988 if (motif_row_patt.test(row.className)) {
|
|
|
1989 if (needHeader) {
|
|
|
1990 var dupHeader = header.cloneNode(true);
|
|
|
1991 dupHeader.style.display = 'table-row';
|
|
|
1992 row.parentNode.insertBefore(dupHeader, row);
|
|
|
1993 needHeader = false;
|
|
|
1994 i++;
|
|
|
1995 }
|
|
|
1996 } else if (motif_head_patt.test(row.className)) {
|
|
|
1997 table.deleteRow(row.rowIndex);
|
|
|
1998 i--;
|
|
|
1999 } else {
|
|
|
2000 needHeader = true;
|
|
|
2001 }
|
|
|
2002 }
|
|
|
2003 }
|
|
|
2004
|
|
|
2005 function set_content_to_text(ele, text) {
|
|
|
2006 while(ele.hasChildNodes()) {
|
|
|
2007 ele.removeChild(ele.firstChild);
|
|
|
2008 }
|
|
|
2009 ele.appendChild(document.createTextNode(text));
|
|
|
2010 }
|
|
|
2011
|
|
|
2012 function both_setup(pos) {
|
|
|
2013 // get the total number of motifs
|
|
|
2014 var nmotifs = parseInt(document.getElementById('nmotifs').value, 10);
|
|
|
2015 // set the motif that we're submitting
|
|
|
2016 document.getElementById('submit_motif').value = (pos == 0 ? 'all' : pos);
|
|
|
2017 document.getElementById('send_to_selector').style.display = (pos == 0 ? 'none' : 'block');
|
|
|
2018 document.getElementById('send_to_title_1').style.display = (pos == 0 ? 'none' : 'block');
|
|
|
2019 document.getElementById('send_to_title_2').style.display = (pos == 0 ? 'block' : 'none');
|
|
|
2020
|
|
|
2021 if (pos != 0) {
|
|
|
2022 // get the information for the position
|
|
|
2023 var motif_seq = motif_seqs[pos];
|
|
|
2024 var motif_id = motif_seq[0];
|
|
|
2025 var seq = motif_seq[1];
|
|
|
2026 var rcseq = motif_seq[2];
|
|
|
2027 // set the motif number
|
|
|
2028 // set the titles of both popups
|
|
|
2029 set_content_to_text(document.getElementById('send_to_name'), seq);
|
|
|
2030 set_content_to_text(document.getElementById('download_name'), seq);
|
|
|
2031 // set the images
|
|
|
2032 var nc_img = "" + motif_id + "nc_" + seq + ".png";
|
|
|
2033 var rc_img = "" + motif_id + "rc_" + rcseq + ".png";
|
|
|
2034 var img;
|
|
|
2035 img = document.getElementById('send_to_img');
|
|
|
2036 img.src = nc_img;
|
|
|
2037 img.style.display = "inline";
|
|
|
2038 img = document.getElementById('send_to_rcimg');
|
|
|
2039 img.src = rc_img;
|
|
|
2040 img.style.display = "inline";
|
|
|
2041 img = document.getElementById('download_img');
|
|
|
2042 img.src = nc_img;
|
|
|
2043 img.style.display = "inline";
|
|
|
2044 img = document.getElementById('download_rcimg');
|
|
|
2045 img.src = rc_img;
|
|
|
2046 img.style.display = "inline";
|
|
|
2047 // hide the canvas
|
|
|
2048 document.getElementById('send_to_can').style.display = "none";
|
|
|
2049 document.getElementById('send_to_rccan').style.display = "none";
|
|
|
2050 document.getElementById('download_can').style.display = "none";
|
|
|
2051 document.getElementById('download_rccan').style.display = "none";
|
|
|
2052 // get some motif details
|
|
|
2053 var pspm_text = document.getElementById("pspm"+ pos).value;
|
|
|
2054 var pspm = new Pspm(pspm_text);
|
|
|
2055 var alpha = new Alphabet(document.getElementById("alphabet").value,
|
|
|
2056 document.getElementById("bgfreq").value);
|
|
|
2057 document.getElementById('download_pspm').value = pspm.as_pspm();
|
|
|
2058 document.getElementById('download_pssm').value = pspm.as_pssm(alpha);
|
|
|
2059 // set the width and height defaults
|
|
|
2060 document.getElementById('logo_width').value = pspm.get_motif_length();
|
|
|
2061 document.getElementById('logo_height').value = 7.5;
|
|
|
2062 // hide and show the arrows
|
|
|
2063 var prevclass = (pos == 1 ? "navarrow inactive" : "navarrow");
|
|
|
2064 var nextclass = (pos == nmotifs ? "navarrow inactive" : "navarrow");
|
|
|
2065 document.getElementById('prev_arrow_1').className = prevclass;
|
|
|
2066 document.getElementById('prev_arrow_2').className = prevclass;
|
|
|
2067 document.getElementById('next_arrow_1').className = nextclass;
|
|
|
2068 document.getElementById('next_arrow_2').className = nextclass;
|
|
|
2069 set_content_to_text(document.getElementById('pop_num_1'), pos);
|
|
|
2070 set_content_to_text(document.getElementById('pop_num_2'), pos);
|
|
|
2071 }
|
|
|
2072 }
|
|
|
2073
|
|
|
2074 function both_change(inc) {
|
|
|
2075 var motif_num = parseInt(document.getElementById('submit_motif').value, 10);
|
|
|
2076 var nmotifs = parseInt(document.getElementById('nmotifs').value, 10);
|
|
|
2077 var orig = motif_num;
|
|
|
2078 motif_num += inc;
|
|
|
2079 if (motif_num > nmotifs) motif_num = nmotifs;
|
|
|
2080 else if (motif_num < 1) motif_num = 1;
|
|
|
2081 if (orig != motif_num) both_setup(motif_num);
|
|
|
2082 }
|
|
|
2083
|
|
|
2084 function both_hide() {
|
|
|
2085 document.getElementById('grey_out_page').style.display = 'none';
|
|
|
2086 document.getElementById('download').style.display = 'none';
|
|
|
2087 document.getElementById('send_to').style.display = 'none';
|
|
|
2088 }
|
|
|
2089
|
|
|
2090 /*
|
|
|
2091 * lookup the information on a motif and prepare the
|
|
|
2092 * popup for sending it to another program
|
|
|
2093 */
|
|
|
2094 function send_to_popup(pos) {
|
|
|
2095 both_setup(pos);
|
|
|
2096 var program = find_child_element_by_class(document.getElementById('programs'), 'selected').id;
|
|
|
2097 var task = highlight_submit_task(null, submit_programs[program]);
|
|
|
2098 highlight_submit_program(program, submit_tasks[task]);
|
|
|
2099 update_submit_text(task, program);
|
|
|
2100 // show the send to page
|
|
|
2101 var grey_out = document.getElementById('grey_out_page');
|
|
|
2102 grey_out.style.display = 'block';
|
|
|
2103 var send_to_pop = document.getElementById('send_to');
|
|
|
2104 send_to_pop.style.display = 'block';
|
|
|
2105 }
|
|
|
2106
|
|
|
2107 function send_to_popup2(elem) {
|
|
|
2108 send_to_popup(expanded_num(elem));
|
|
|
2109 }
|
|
|
2110
|
|
|
2111 function send_to_submit() {
|
|
|
2112 var program = find_child_element_by_class(document.getElementById('programs'), 'selected').id;
|
|
|
2113 // set the hidden fields on the form
|
|
|
2114 document.getElementById('submit_program').value = program;
|
|
|
2115 // send the form
|
|
|
2116 document.getElementById('submit_form').submit();
|
|
|
2117 both_hide();
|
|
|
2118 }
|
|
|
2119
|
|
|
2120 function download_popup(pos) {
|
|
|
2121 both_setup(pos);
|
|
|
2122 click_download_tab(document.getElementById("download_tab_num").value);
|
|
|
2123 document.getElementById('submit_program').value = "LOGO";
|
|
|
2124 // show the download page
|
|
|
2125 var grey_out = document.getElementById('grey_out_page');
|
|
|
2126 grey_out.style.display = 'block';
|
|
|
2127 var download_pop = document.getElementById('download');
|
|
|
2128 download_pop.style.display = 'block';
|
|
|
2129 }
|
|
|
2130
|
|
|
2131 function download_popup2(elem) {
|
|
|
2132 download_popup(expanded_num(elem));
|
|
|
2133 }
|
|
|
2134
|
|
|
2135 function download_submit() {
|
|
|
2136 var format = document.getElementById('logo_format').value;
|
|
|
2137 var orient = document.getElementById('logo_rc').value;
|
|
|
2138 var ssc = document.getElementById('logo_ssc').value;
|
|
|
2139 var width = document.getElementById('logo_width').value;
|
|
|
2140 var height = document.getElementById('logo_height').value;
|
|
|
2141 document.getElementById('submit_format').value = format;
|
|
|
2142 document.getElementById('submit_rc').value = orient;
|
|
|
2143 document.getElementById('submit_ssc').value = ssc;
|
|
|
2144 document.getElementById('submit_width').value = width;
|
|
|
2145 document.getElementById('submit_height').value = height;
|
|
|
2146 document.getElementById('submit_form').submit();
|
|
|
2147 both_hide();
|
|
|
2148 }
|
|
|
2149
|
|
|
2150 function FixLogoTask(num, rc) {
|
|
|
2151 this.num = num;
|
|
|
2152 this.rc = rc;
|
|
|
2153 this.run = FixLogoTask_run;
|
|
|
2154 }
|
|
|
2155
|
|
|
2156 function FixLogoTask_run() {
|
|
|
2157 var pspm_text = document.getElementById("pspm" + this.num).value;
|
|
|
2158 var alpha = new Alphabet("ACGT");
|
|
|
2159 var pspm = new Pspm(pspm_text);
|
|
|
2160 if (this.rc) pspm = pspm.reverse_complement(alpha);
|
|
|
2161 var imgid = "small_" + (this.rc ? "rc_" : "") + "logo_" + this.num;
|
|
|
2162
|
|
|
2163 var image = document.getElementById(imgid);
|
|
|
2164
|
|
|
2165 var canvas = create_canvas(pspm.get_motif_length() *15, 50, image.id,
|
|
|
2166 image.title, image.style.display);
|
|
|
2167 if (canvas == null) return;
|
|
|
2168
|
|
|
2169 var logo = logo_1(alpha, "DREME", pspm);
|
|
|
2170 draw_logo_on_canvas(logo, canvas);
|
|
|
2171 image.parentNode.replaceChild(canvas, image);
|
|
|
2172 }
|
|
|
2173
|
|
|
2174 function fix_popup_logo(image, canvasid, rc) {
|
|
|
2175 var motif_num = parseInt(document.getElementById('submit_motif').value, 10);
|
|
|
2176 var pspm_text = document.getElementById("pspm" + motif_num).value;
|
|
|
2177 var alpha = new Alphabet("ACGT");
|
|
|
2178 var pspm = new Pspm(pspm_text);
|
|
|
2179 if (rc) pspm = pspm.reverse_complement(alpha);
|
|
|
2180 image.style.display = "none";
|
|
|
2181 //check for canvas support before attempting anything
|
|
|
2182 var canvas = document.getElementById(canvasid);
|
|
|
2183 if (!canvas.getContext) return;
|
|
|
2184 if (!supports_text(canvas.getContext('2d'))) return;
|
|
|
2185 canvas.height = 90;
|
|
|
2186 canvas.width = 170;
|
|
|
2187 canvas.style.display = "inline";
|
|
|
2188 var logo = logo_1(alpha, "DREME", pspm);
|
|
|
2189 draw_logo_on_canvas(logo, canvas, false);
|
|
|
2190 }
|
|
|
2191
|
|
|
2192 function fix_expanded_logo(image, rc) {
|
|
|
2193 var motif_num = expanded_num(image);
|
|
|
2194 var pspm_text = document.getElementById("pspm" + motif_num).value;
|
|
|
2195 var alpha = new Alphabet("ACGT");
|
|
|
2196 var pspm = new Pspm(pspm_text);
|
|
|
2197 if (rc) pspm = pspm.reverse_complement(alpha);
|
|
|
2198 //check for canvas support before attempting anything
|
|
|
2199 var canvas = document.createElement('canvas');
|
|
|
2200 if (!canvas.getContext) return;
|
|
|
2201 if (!supports_text(canvas.getContext('2d'))) return;
|
|
|
2202 canvas.height = 150;
|
|
|
2203 canvas.width = 0;
|
|
|
2204 draw_logo_on_canvas(logo_1(alpha, "DREME", pspm), canvas, false);
|
|
|
2205 image.parentNode.replaceChild(canvas, image);
|
|
|
2206 }
|
|
|
2207
|
|
|
2208 function text_nodes(container) {
|
|
|
2209 var textNodes = [];
|
|
|
2210 var stack = [container];
|
|
|
2211 // depth first search to maintain ordering when flattened
|
|
|
2212 while (stack.length > 0) {
|
|
|
2213 var node = stack.pop();
|
|
|
2214 if (node.nodeType == Node.TEXT_NODE) {
|
|
|
2215 textNodes.push(node);
|
|
|
2216 } else {
|
|
|
2217 for (var i = node.childNodes.length-1; i >= 0; i--) {
|
|
|
2218 stack.push(node.childNodes[i]);
|
|
|
2219 }
|
|
|
2220 }
|
|
|
2221 }
|
|
|
2222 return textNodes;
|
|
|
2223 }
|
|
|
2224
|
|
|
2225 function node_text(node) {
|
|
|
2226 if (node === undefined) {
|
|
|
2227 return '';
|
|
|
2228 } else if (node.textContent) {
|
|
|
2229 return node.textContent;
|
|
|
2230 } else if (node.innerText) {
|
|
|
2231 return node.innerText;
|
|
|
2232 } else {
|
|
|
2233 return '';
|
|
|
2234 }
|
|
|
2235 }
|
|
|
2236
|
|
|
2237 function nodes_text(nodes, separator) {
|
|
|
2238 if (separator === undefined) separator = '';
|
|
|
2239 var text = '';
|
|
|
2240 if (nodes.length > 0) {
|
|
|
2241 text += node_text(nodes[0]);
|
|
|
2242 }
|
|
|
2243 for (var i = 1; i < nodes.length; i++) {
|
|
|
2244 text += separator + node_text(nodes[i]);
|
|
|
2245 }
|
|
|
2246 return text;
|
|
|
2247 }
|
|
|
2248
|
|
|
2249 function colour_dna_seq(container) {
|
|
|
2250 var textnodes = text_nodes(container);
|
|
|
2251 for (var i = 0; i < textnodes.length; i++) {
|
|
|
2252 var node = textnodes[i];
|
|
|
2253 container.replaceChild(create_dna_seq(node_text(node)), node);
|
|
|
2254 }
|
|
|
2255 }
|
|
|
2256
|
|
|
2257 function create_dna_seq(seq) {
|
|
|
2258 var out = document.createElement('span');
|
|
|
2259 var last = 0;
|
|
|
2260 for (var i = 0; i < seq.length; i++) {
|
|
|
2261 var letter = seq.charAt(i);
|
|
|
2262 if (letter == 'A' || letter == 'C' || letter == 'G' || letter == 'T') {
|
|
|
2263 if (last < i) {
|
|
|
2264 out.appendChild(document.createTextNode(seq.substring(last, i)));
|
|
|
2265 }
|
|
|
2266 var coloured_letter = document.createElement('span');
|
|
|
2267 coloured_letter.className = "dna_" + letter;
|
|
|
2268 coloured_letter.appendChild(document.createTextNode(letter));
|
|
|
2269 out.appendChild(coloured_letter);
|
|
|
2270 last = i + 1;
|
|
|
2271 }
|
|
|
2272 }
|
|
|
2273 if (last < seq.length) {
|
|
|
2274 out.appendChild(document.createTextNode(seq.substring(last)));
|
|
|
2275 }
|
|
|
2276 return out;
|
|
|
2277 }
|
|
|
2278
|
|
|
2279 function sort_table(colEle, compare_function) {
|
|
|
2280 //find the parent of colEle that is either a td or th
|
|
|
2281 var cell = colEle;
|
|
|
2282 while (true) {
|
|
|
2283 if (cell == null) return;
|
|
|
2284 if (cell.nodeType == Node.ELEMENT_NODE &&
|
|
|
2285 (cell.tagName.toLowerCase() == "td" || cell.tagName.toLowerCase() == "th")) {
|
|
|
2286 break;
|
|
|
2287 }
|
|
|
2288 cell = cell.parentNode;
|
|
|
2289 }
|
|
|
2290 //find the parent of cell that is a tr
|
|
|
2291 var row = cell;
|
|
|
2292 while (true) {
|
|
|
2293 if (row == null) return;
|
|
|
2294 if (row.nodeType == Node.ELEMENT_NODE && row.tagName.toLowerCase() == "tr") {
|
|
|
2295 break;
|
|
|
2296 }
|
|
|
2297 row = row.parentNode;
|
|
|
2298 }
|
|
|
2299 //find the parent of row that is a table
|
|
|
2300 var table = row;
|
|
|
2301 while (true) {
|
|
|
2302 if (table == null) return;
|
|
|
2303 if (table.nodeType == Node.ELEMENT_NODE && table.tagName.toLowerCase() == "table") {
|
|
|
2304 break;
|
|
|
2305 }
|
|
|
2306 table = table.parentNode;
|
|
|
2307 }
|
|
|
2308 var column_index = cell.cellIndex;
|
|
|
2309 // do a bubble sort, because the tables are so small it doesn't matter
|
|
|
2310 var change;
|
|
|
2311 var trs = table.tBodies[0].getElementsByTagName('tr');
|
|
|
2312 var already_sorted = true;
|
|
|
2313 var reverse = false;
|
|
|
2314 while (true) {
|
|
|
2315 do {
|
|
|
2316 change = false;
|
|
|
2317 for (var i = 0; i < trs.length -1; i++) {
|
|
|
2318 var v1 = nodes_text(text_nodes(trs[i].cells[column_index]));
|
|
|
2319 var v2 = nodes_text(text_nodes(trs[i+1].cells[column_index]));
|
|
|
2320 if (reverse) {
|
|
|
2321 var tmp = v1;
|
|
|
2322 v1 = v2;
|
|
|
2323 v2 = tmp;
|
|
|
2324 }
|
|
|
2325 if (compare_function(v1, v2) > 0) {
|
|
|
2326 exchange(trs[i], trs[i+1], table);
|
|
|
2327 change = true;
|
|
|
2328 already_sorted = false;
|
|
|
2329 trs = table.tBodies[0].getElementsByTagName('tr');
|
|
|
2330 }
|
|
|
2331 }
|
|
|
2332 } while (change);
|
|
|
2333 if (reverse) break;// we've sorted twice so exit
|
|
|
2334 if (!already_sorted) break;// sort did something so exit
|
|
|
2335 // when it's sorted one way already then sort the opposite way
|
|
|
2336 reverse = true;
|
|
|
2337 }
|
|
|
2338 update_sort_arrows(row, column_index, reverse);
|
|
|
2339 }
|
|
|
2340
|
|
|
2341 function update_sort_arrows(row, column_index, reverse) {
|
|
|
2342 var ascending = "\u25BC";
|
|
|
2343 var descending = "\u25B2";
|
|
|
2344 var dir = (reverse ? descending : ascending);
|
|
|
2345 for (var i = 0; i < row.cells.length; i++) {
|
|
|
2346 var arrow = find_child_element_by_class(row.cells[i], "sort_dir");
|
|
|
2347 if (arrow == null) continue;
|
|
|
2348 if (i == column_index) {
|
|
|
2349 set_content_to_text(arrow, dir);
|
|
|
2350 } else {
|
|
|
2351 set_content_to_text(arrow, "");
|
|
|
2352 }
|
|
|
2353 }
|
|
|
2354 }
|
|
|
2355
|
|
|
2356 function exchange(oRowI, oRowJ, oTable) {
|
|
|
2357 var i = oRowI.rowIndex;
|
|
|
2358 var j = oRowJ.rowIndex;
|
|
|
2359 if (i == j+1) {
|
|
|
2360 oTable.tBodies[0].insertBefore(oRowI, oRowJ);
|
|
|
2361 } if (j == i+1) {
|
|
|
2362 oTable.tBodies[0].insertBefore(oRowJ, oRowI);
|
|
|
2363 } else {
|
|
|
2364 var tmpNode = oTable.tBodies[0].replaceChild(oRowI, oRowJ);
|
|
|
2365 if(typeof(oRowI) != "undefined") {
|
|
|
2366 oTable.tBodies[0].insertBefore(tmpNode, oRowI);
|
|
|
2367 } else {
|
|
|
2368 oTable.appendChild(tmpNode);
|
|
|
2369 }
|
|
|
2370 }
|
|
|
2371 }
|
|
|
2372
|
|
|
2373 function compare_numbers(v1, v2) {
|
|
|
2374 var f1 = parseFloat(v1);
|
|
|
2375 var f2 = parseFloat(v2);
|
|
|
2376 if (f1 < f2) {
|
|
|
2377 return -1;
|
|
|
2378 } else if (f1 > f2) {
|
|
|
2379 return 1;
|
|
|
2380 } else {
|
|
|
2381 return 0;
|
|
|
2382 }
|
|
|
2383 }
|
|
|
2384
|
|
|
2385 function compare_counts(v1, v2) {
|
|
|
2386 var re = /(\d+)\/\d+/;
|
|
|
2387 var m1 = re.exec(v1);
|
|
|
2388 var m2 = re.exec(v2);
|
|
|
2389 if (m1 == null && m2 == null) return 0;
|
|
|
2390 if (m1 == null) return -1;
|
|
|
2391 if (m2 == null) return 1;
|
|
|
2392 return compare_numbers(m1[1], m2[1]);
|
|
|
2393 }
|
|
|
2394
|
|
|
2395 function compare_strings(v1, v2) {
|
|
|
2396 return v1.localeCompare(v2);
|
|
|
2397 }
|
|
|
2398 /*
|
|
|
2399 * help
|
|
|
2400 *
|
|
|
2401 * Moves around help pop-ups so they appear
|
|
|
2402 * below an activator.
|
|
|
2403 */
|
|
|
2404 function help(activator, popup_id) {
|
|
|
2405 if (help.popup === undefined) {
|
|
|
2406 help.popup = null;
|
|
|
2407 }
|
|
|
2408 if (help.activator === undefined) {
|
|
|
2409 help.activator = null;
|
|
|
2410 }
|
|
|
2411
|
|
|
2412 if (typeof(activator) == 'undefined') { // no activator so hide
|
|
|
2413 help.popup.style.display = 'none';
|
|
|
2414 help.popup = null;
|
|
|
2415 return;
|
|
|
2416 }
|
|
|
2417 var pop = document.getElementById(popup_id);
|
|
|
2418 if (pop == help.popup) {
|
|
|
2419 if (activator == help.activator) {
|
|
|
2420 //hide popup (as we've already shown it for the current help button)
|
|
|
2421 help.popup.style.display = 'none';
|
|
|
2422 help.popup = null;
|
|
|
2423 return; // toggling complete!
|
|
|
2424 }
|
|
|
2425 } else if (help.popup != null) {
|
|
|
2426 //activating different popup so hide current one
|
|
|
2427 help.popup.style.display = 'none';
|
|
|
2428 }
|
|
|
2429 help.popup = pop;
|
|
|
2430 help.activator = activator;
|
|
|
2431
|
|
|
2432 //must make the popup visible to measure it or it has zero width
|
|
|
2433 pop.style.display = 'block';
|
|
|
2434 var xy = get_elem_xy(activator);
|
|
|
2435 var padding = 10;
|
|
|
2436 var edge_padding = 15;
|
|
|
2437 var scroll_padding = 15;
|
|
|
2438
|
|
|
2439 var pop_left = (xy[0] + (activator.offsetWidth / 2) - (pop.offsetWidth / 2));
|
|
|
2440 var pop_top = (xy[1] + activator.offsetHeight + padding);
|
|
|
2441
|
|
|
2442 // ensure the box is not past the top or left of the page
|
|
|
2443 if (pop_left < 0) pop_left = edge_padding;
|
|
|
2444 if (pop_top < 0) pop_top = edge_padding;
|
|
|
2445 // ensure the box does not cause horizontal scroll bars
|
|
|
2446 var page_width = null;
|
|
|
2447 if (window.innerWidth) {
|
|
|
2448 page_width = window.innerWidth;
|
|
|
2449 } else if (document.body) {
|
|
|
2450 page_width = document.body.clientWidth;
|
|
|
2451 }
|
|
|
2452 if (page_width) {
|
|
|
2453 if (pop_left + pop.offsetWidth > page_width) {
|
|
|
2454 pop_left = page_width - pop.offsetWidth - edge_padding - scroll_padding; //account for scrollbars
|
|
|
2455 }
|
|
|
2456 }
|
|
|
2457
|
|
|
2458 pop.style.left = pop_left + "px";
|
|
|
2459 pop.style.top = pop_top + "px";
|
|
|
2460 }
|
|
|
2461
|
|
|
2462 var submit_tasks = [];
|
|
|
2463 submit_tasks['search_motifs'] = ['TOMTOM'];
|
|
|
2464 submit_tasks['search_sequences'] = ['FIMO'];
|
|
|
2465 submit_tasks['rank_sequences'] = ['MAST'];
|
|
|
2466 submit_tasks['predict_go'] = ['GOMO'];
|
|
|
2467 submit_tasks['infer_tf'] = ['SPAMO'];
|
|
|
2468 var submit_programs = [];
|
|
|
2469 submit_programs['TOMTOM'] = ['search_motifs'];
|
|
|
2470 submit_programs['FIMO'] = ['search_sequences'];
|
|
|
2471 submit_programs['MAST'] = ['rank_sequences'];
|
|
|
2472 submit_programs['GOMO'] = ['predict_go'];
|
|
|
2473 submit_programs['SPAMO'] = ['infer_tf'];
|
|
|
2474 var submit_descriptions = [];
|
|
|
2475 submit_descriptions['TOMTOM'] = "Find similar motifs in published " +
|
|
|
2476 "libraries or a library you supply.";
|
|
|
2477 submit_descriptions['FIMO'] = "Find motif occurences in sequence data.";
|
|
|
2478 submit_descriptions['MAST'] = "Rank sequences by affinity to groups " +
|
|
|
2479 "of motifs.";
|
|
|
2480 submit_descriptions['GOMO'] = "Identify possible roles (Gene Ontology " +
|
|
|
2481 "terms) for motifs.";
|
|
|
2482 submit_descriptions['SPAMO'] = "Find other motifs that are enriched at " +
|
|
|
2483 "specific close spacings which might imply the existance of a complex.";
|
|
|
2484
|
|
|
2485
|
|
|
2486 function click_submit_task(ele) {
|
|
|
2487 var task = ele.id;
|
|
|
2488 var program = highlight_submit_program(null, submit_tasks[task]);
|
|
|
2489 highlight_submit_task(task, submit_programs[program]);
|
|
|
2490 update_submit_text(task, program);
|
|
|
2491 }
|
|
|
2492
|
|
|
2493 function click_submit_program(ele) {
|
|
|
2494 var program = ele.id;
|
|
|
2495 var task = highlight_submit_task(null, submit_programs[program]);
|
|
|
2496 highlight_submit_program(program, submit_tasks[task]);
|
|
|
2497 update_submit_text(task, program);
|
|
|
2498 }
|
|
|
2499
|
|
|
2500 function update_submit_text(task, program) {
|
|
|
2501 var task_ele = document.getElementById(task);
|
|
|
2502 var program_ele = document.getElementById(program);
|
|
|
2503 set_content_to_text(document.getElementById('program_action'),
|
|
|
2504 nodes_text(text_nodes(task_ele)));
|
|
|
2505 set_content_to_text(document.getElementById('program_name'),
|
|
|
2506 nodes_text(text_nodes(program_ele)));
|
|
|
2507 set_content_to_text(document.getElementById('program_desc'),
|
|
|
2508 submit_descriptions[program]);
|
|
|
2509 }
|
|
|
2510
|
|
|
2511 function highlight_submit_task(select, highlights) {
|
|
|
2512 var tasks_ul = document.getElementById('tasks');
|
|
|
2513 var all_tasks = tasks_ul.getElementsByTagName('li');
|
|
|
2514 var li;
|
|
|
2515 var originally_selected = null;
|
|
|
2516 // deselect everything in the tasks list
|
|
|
2517 for (var i = 0; i < all_tasks.length; i++) {
|
|
|
2518 li = all_tasks[i];
|
|
|
2519 if (li.className == "selected") {
|
|
|
2520 originally_selected = li;
|
|
|
2521 }
|
|
|
2522 li.className = "";
|
|
|
2523 }
|
|
|
2524 // highlight everything in the highlights list
|
|
|
2525 for (var i = 0; i < highlights.length; i++) {
|
|
|
2526 var li = document.getElementById(highlights[i]);
|
|
|
2527 li.className = "active";
|
|
|
2528 }
|
|
|
2529 // check if we're setting the selected item specifically
|
|
|
2530 if (select != null) {
|
|
|
2531 li = document.getElementById(select);
|
|
|
2532 li.className = "selected";
|
|
|
2533 return select;
|
|
|
2534 } else {
|
|
|
2535 // if the originally selected item is allowed then keep it
|
|
|
2536 // otherwise move to the first element of the highlight list
|
|
|
2537 if (originally_selected != null &&
|
|
|
2538 originally_selected.className == "active") {
|
|
|
2539 originally_selected.className = "selected";
|
|
|
2540 return originally_selected.id;
|
|
|
2541 } else if (highlights.length > 0) {
|
|
|
2542 li = document.getElementById(highlights[0]);
|
|
|
2543 li.className = "selected";
|
|
|
2544 return highlights[0];
|
|
|
2545 }
|
|
|
2546 return null;
|
|
|
2547 }
|
|
|
2548 }
|
|
|
2549
|
|
|
2550
|
|
|
2551 function highlight_submit_program(select, highlights) {
|
|
|
2552 var programs_ul = document.getElementById('programs');
|
|
|
2553 var all_programs = programs_ul.getElementsByTagName('li');
|
|
|
2554 var li;
|
|
|
2555 var originally_selected = null;
|
|
|
2556 // deselect everything in the programs list
|
|
|
2557 for (var i = 0; i < all_programs.length; i++) {
|
|
|
2558 li = all_programs[i];
|
|
|
2559 if (li.className == "selected") {
|
|
|
2560 originally_selected = li;
|
|
|
2561 }
|
|
|
2562 li.className = "";
|
|
|
2563 }
|
|
|
2564 // highlight everything in the highlights list
|
|
|
2565 for (var i = 0; i < highlights.length; i++) {
|
|
|
2566 var li = document.getElementById(highlights[i]);
|
|
|
2567 li.className = "active";
|
|
|
2568 }
|
|
|
2569 // check if we're setting the selected item specifically
|
|
|
2570 if (select != null) {
|
|
|
2571 li = document.getElementById(select);
|
|
|
2572 li.className = "selected";
|
|
|
2573 return select;
|
|
|
2574 } else {
|
|
|
2575 // if the originally selected item is allowed then keep it
|
|
|
2576 // otherwise move to the first element of the highlight list
|
|
|
2577 if (originally_selected != null &&
|
|
|
2578 originally_selected.className == "active") {
|
|
|
2579 originally_selected.className = "selected";
|
|
|
2580 return originally_selected.id;
|
|
|
2581 } else if (highlights.length > 0) {
|
|
|
2582 li = document.getElementById(highlights[0]);
|
|
|
2583 li.className = "selected";
|
|
|
2584 return highlights[0];
|
|
|
2585 }
|
|
|
2586 return null;
|
|
|
2587 }
|
|
|
2588 }
|
|
|
2589 /* END INCLUDED FILE "dreme-to-html.js" */
|
|
|
2590
|
|
|
2591 </script>
|
|
|
2592 </head>
|
|
|
2593 <body>
|
|
|
2594 <form id="submit_form" method="post" action="http://Sharplab-G4-1.local/meme/cgi-bin/meme_request.cgi" target="_blank">
|
|
|
2595 <!--+++++++++++++++START DATA+++++++++++++++-->
|
|
|
2596 <input type="hidden" name="version" value="MEME version 4.7.0">
|
|
|
2597 <input type="hidden" name="alphabet" id="alphabet" value="ACGT">
|
|
|
2598 <input type="hidden" name="strands" value="+ -">
|
|
|
2599 <input type="hidden" name="bgsrc" value="dataset">
|
|
|
2600 <input type="hidden" name="bgfreq" id="bgfreq" value="A 0.243 C 0.270 G 0.243 T 0.243">
|
|
|
2601 <input type="hidden" name="name" value="test">
|
|
|
2602 <input type="hidden" name="nmotifs" id="nmotifs" value="0">
|
|
|
2603 <!--+++++++++++++++FINISHED DATA++++++++++++-->
|
|
|
2604 <input type="hidden" name="program" id="submit_program" value="TOMTOM"><input type="hidden" name="motif" id="submit_motif" value="all"><input type="hidden" name="logoformat" id="submit_format" value="png"><input type="hidden" name="logorc" id="submit_rc" value="false"><input type="hidden" name="logossc" id="submit_ssc" value="false"><input type="hidden" name="logowidth" id="submit_width" value=""><input type="hidden" name="logoheight" id="submit_height" value="7.5">
|
|
|
2605 </form>
|
|
|
2606 <div class="pop_content" id="pop_motifs_name">
|
|
|
2607 <p>
|
|
|
2608 The name of the motif uses the IUPAC codes for nucleotides which has
|
|
|
2609 a different letter to represent each of the 15 possible combinations.
|
|
|
2610 </p>
|
|
|
2611 <p>
|
|
|
2612 The name is itself a representation of the motif though the position
|
|
|
2613 weight matrix is not directly equalivant as it is generated from the
|
|
|
2614 sites found that matched the letters given in the name.
|
|
|
2615 </p>
|
|
|
2616 <p><a href="http://meme.nbcr.net/meme/doc/alphabets.html">
|
|
|
2617 Read more about the MEME suite's use of the IUPAC alphabets.
|
|
|
2618 </a></p>
|
|
|
2619 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2620 </div>
|
|
|
2621 <div class="pop_content" id="pop_motifs_logo">
|
|
|
2622 <p>The logo of the motif.</p>
|
|
|
2623 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2624 </div>
|
|
|
2625 <div class="pop_content" id="pop_motifs_rc_logo">
|
|
|
2626 <p>The logo of the reverse complement motif.</p>
|
|
|
2627 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2628 </div>
|
|
|
2629 <div class="pop_content" id="pop_motifs_evalue">
|
|
|
2630 <p>The E-value is the enrichment p-value times the number of candidate
|
|
|
2631 motifs tested.</p>
|
|
|
2632 <p>The enrichment p-value is calculated using the Fisher Exact Test for
|
|
|
2633 enrichment of the motif in the positive sequences.</p>
|
|
|
2634 <p>Note that the counts used in the Fisher Exact Test are made after
|
|
|
2635 erasing sites that match previously found motifs.</p>
|
|
|
2636 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2637 </div>
|
|
|
2638 <div class="pop_content" id="pop_motifs_uevalue">
|
|
|
2639 <p>The E-value of the motif calculated without erasing the sites of
|
|
|
2640 previously found motifs.</p>
|
|
|
2641 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2642 </div>
|
|
|
2643 <div class="pop_content" id="pop_more">
|
|
|
2644 <p>Show more information on the motif.</p>
|
|
|
2645 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2646 </div>
|
|
|
2647 <div class="pop_content" id="pop_submit">
|
|
|
2648 <p>Submit your motif to another MEME Suite program.</p>
|
|
|
2649 <h5>Supported Programs</h5>
|
|
|
2650 <dl>
|
|
|
2651 <dt>Tomtom</dt>
|
|
|
2652 <dd>Tomtom is a tool for searching for similar known motifs.
|
|
|
2653 [<a href="http://meme.nbcr.net/meme/tomtom-intro.html">manual</a>]</dd>
|
|
|
2654 <dt>MAST</dt>
|
|
|
2655 <dd>MAST is a tool for searching biological sequence databases for
|
|
|
2656 sequences that contain one or more of a group of known motifs.
|
|
|
2657 [<a href="http://meme.nbcr.net/meme/mast-intro.html">manual</a>]</dd>
|
|
|
2658 <dt>FIMO</dt>
|
|
|
2659 <dd>FIMO is a tool for searching biological sequence databases for
|
|
|
2660 sequences that contain one or more known motifs.
|
|
|
2661 [<a href="http://meme.nbcr.net/meme/fimo-intro.html">manual</a>]</dd>
|
|
|
2662 <dt>GOMO</dt>
|
|
|
2663 <dd>GOMO is a tool for identifying possible roles (Gene Ontology
|
|
|
2664 terms) for DNA binding motifs.
|
|
|
2665 [<a href="http://meme.nbcr.net/meme/gomo-intro.html">manual</a>]</dd>
|
|
|
2666 <dt>SpaMo</dt>
|
|
|
2667 <dd>SpaMo is a tool for inferring possible transcription factor
|
|
|
2668 complexes by finding motifs with enriched spacings.
|
|
|
2669 [<a href="http://meme.nbcr.net/meme/spamo-intro.html">manual</a>]</dd>
|
|
|
2670 </dl>
|
|
|
2671 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2672 </div>
|
|
|
2673 <div class="pop_content" id="pop_download">
|
|
|
2674 <p>Download your motif as a position weight matrix or a custom logo.</p>
|
|
|
2675 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2676 </div>
|
|
|
2677 <div class="pop_content" id="pop_motif_positives">
|
|
|
2678 <p># positive sequences matching the motif / # positive sequences.</p>
|
|
|
2679 <p>Note these counts are made after erasing sites that match previously
|
|
|
2680 found motifs.</p>
|
|
|
2681 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2682 </div>
|
|
|
2683 <div class="pop_content" id="pop_motif_negatives">
|
|
|
2684 <p># negative sequences matching the motif / # negative sequences.</p>
|
|
|
2685 <p>Note these counts are made after erasing sites that match previously
|
|
|
2686 found motifs.</p>
|
|
|
2687 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2688 </div>
|
|
|
2689 <div class="pop_content" id="pop_motif_pvalue">
|
|
|
2690 <p>The p-value of the Fisher Exact Test for enrichment of the motif in
|
|
|
2691 the positive sequences.</p>
|
|
|
2692 <p>Note that the counts used in the Fisher Exact Test are made after
|
|
|
2693 erasing sites that match previously found motifs.</p>
|
|
|
2694 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2695 </div>
|
|
|
2696 <div class="pop_content" id="pop_motif_evalue">
|
|
|
2697 <p>The E-value is the motif p-value times the number of candidate motifs
|
|
|
2698 tested.</p>
|
|
|
2699 <p>Note that the p-value was calculated with counts made after
|
|
|
2700 erasing sites that match previously found motifs.</p>
|
|
|
2701 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2702 </div>
|
|
|
2703 <div class="pop_content" id="pop_motif_uevalue">
|
|
|
2704 <p>The E-value of the motif calculated without erasing the sites of
|
|
|
2705 previously found motifs.</p>
|
|
|
2706 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2707 </div>
|
|
|
2708 <div class="pop_content" id="pop_match_word">
|
|
|
2709 <p>All words matching the motif whose uncorrected p-value is less than
|
|
|
2710 0.01.</p>
|
|
|
2711 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2712 </div>
|
|
|
2713 <div class="pop_content" id="pop_match_pos">
|
|
|
2714 <p># positive sequences with matches to the word / # positive sequences.</p>
|
|
|
2715 <p>Note these counts are made after erasing sites that match previously
|
|
|
2716 found motifs.</p>
|
|
|
2717 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2718 </div>
|
|
|
2719 <div class="pop_content" id="pop_match_neg">
|
|
|
2720 <p># negative sequences with matches to the word / # negative sequences.</p>
|
|
|
2721 <p>Note these counts are made after erasing sites that match previously
|
|
|
2722 found motifs.</p>
|
|
|
2723 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2724 </div>
|
|
|
2725 <div class="pop_content" id="pop_match_pval">
|
|
|
2726 <p>The p-value of the Fisher Exact Test for enrichment of the word in
|
|
|
2727 the positive sequences.</p>
|
|
|
2728 <p>Note that the counts used in the Fisher Exact Test are made after
|
|
|
2729 erasing sites that match previously found motifs.</p>
|
|
|
2730 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2731 </div>
|
|
|
2732 <div class="pop_content" id="pop_match_eval">
|
|
|
2733 <p>The word p-value times the number of candidates tested.</p>
|
|
|
2734 <p>Note that the p-value was calculated with counts made after
|
|
|
2735 erasing sites that match previously found motifs.</p>
|
|
|
2736 <div style="float:right; bottom:0px;">[<a href="javascript:help()">close</a> ]</div>
|
|
|
2737 </div>
|
|
|
2738 <div id="expanded_motif" style="display:none"><div class="box expanded_motif" style="margin-bottom:5px;">
|
|
|
2739 <div>
|
|
|
2740 <div style="float:left"><h2 class="mainh" style="margin:0; padding:0;">
|
|
|
2741 <span class="num"></span>.
|
|
|
2742 <span class="name"></span>
|
|
|
2743 </h2></div>
|
|
|
2744 <div style="float:right; "><div class="close" onclick="contract(this);" title="Show less information.">↥</div></div>
|
|
|
2745 <div style="clear:both"></div>
|
|
|
2746 </div>
|
|
|
2747 <div style="padding:0 5px;">
|
|
|
2748 <div style="float:left;">
|
|
|
2749 <img class="img_nc" onerror="fix_expanded_logo(this, false)"><img class="img_rc" onerror="fix_expanded_logo(this, true)">
|
|
|
2750 </div>
|
|
|
2751 <div style="float:right; height:100px;">
|
|
|
2752 <div onclick="send_to_popup2(this);" class="actionbutton" title="Submit this motif to another MEME Suite program.">
|
|
|
2753 <div style="float:left; margin-right:1em;">Submit</div>
|
|
|
2754 <div style="float:right">⇢</div>
|
|
|
2755 <div style="clear:both;"></div>
|
|
|
2756 </div>
|
|
|
2757 <div onclick="download_popup2(this);" class="actionbutton" title="Download this motif as a position weight matrix or a custom logo.">
|
|
|
2758 <div style="float:left; margin-right:1em;">Download</div>
|
|
|
2759 <div style="float:right">⟱</div>
|
|
|
2760 <div style="clear:both;"></div>
|
|
|
2761 </div>
|
|
|
2762 </div>
|
|
|
2763 <div style="clear:both;"></div>
|
|
|
2764 </div>
|
|
|
2765 <h4>Details</h4>
|
|
|
2766 <table class="details">
|
|
|
2767 <thead><tr>
|
|
|
2768 <th>Positives <div class="help2" onclick="help(this,'pop_motif_positives')">?</div>
|
|
|
2769 </th>
|
|
|
2770 <th>Negatives <div class="help2" onclick="help(this,'pop_motif_negatives')">?</div>
|
|
|
2771 </th>
|
|
|
2772 <th>P-value <div class="help2" onclick="help(this,'pop_motif_pvalue')">?</div>
|
|
|
2773 </th>
|
|
|
2774 <th>E-value <div class="help2" onclick="help(this,'pop_motif_evalue')">?</div>
|
|
|
2775 </th>
|
|
|
2776 <th>Unerased E-value <div class="help2" onclick="help(this,'pop_motif_uevalue')">?</div>
|
|
|
2777 </th>
|
|
|
2778 </tr></thead>
|
|
|
2779 <tbody><tr>
|
|
|
2780 <td>
|
|
|
2781 <span class="positives"></span>/3</td>
|
|
|
2782 <td>
|
|
|
2783 <span class="negatives"></span>/3</td>
|
|
|
2784 <td class="pvalue"></td>
|
|
|
2785 <td class="evalue"></td>
|
|
|
2786 <td class="uevalue"></td>
|
|
|
2787 </tr></tbody>
|
|
|
2788 </table>
|
|
|
2789 <h4>Enriched Matching Words</h4>
|
|
|
2790 <table>
|
|
|
2791 <thead><tr>
|
|
|
2792 <th>
|
|
|
2793 <a href="javascript:;" onclick="sort_table(this, compare_strings)"><span class="sort_dir"></span>Word</a>
|
|
|
2794 <div class="help2" onclick="help(this,'pop_match_word')">?</div>
|
|
|
2795 </th>
|
|
|
2796 <th>
|
|
|
2797 <a href="javascript:;" onclick="sort_table(this, compare_counts)"><span class="sort_dir"></span>Positives</a>
|
|
|
2798 <div class="help2" onclick="help(this,'pop_match_pos')">?</div>
|
|
|
2799 </th>
|
|
|
2800 <th>
|
|
|
2801 <a href="javascript:;" onclick="sort_table(this, compare_counts)"><span class="sort_dir"></span>Negatives</a>
|
|
|
2802 <div class="help2" onclick="help(this,'pop_match_neg')">?</div>
|
|
|
2803 </th>
|
|
|
2804 <th>
|
|
|
2805 <a href="javascript:;" onclick="sort_table(this, compare_numbers)"><span class="sort_dir"></span>P-value</a>
|
|
|
2806 <div class="help2" onclick="help(this,'pop_match_pval')">?</div>
|
|
|
2807 </th>
|
|
|
2808 <th>
|
|
|
2809 <a href="javascript:;" onclick="sort_table(this, compare_numbers)"><span class="sort_dir">▼</span>E-value</a>
|
|
|
2810 <div class="help2" onclick="help(this,'pop_match_eval')">?</div>
|
|
|
2811 </th>
|
|
|
2812 </tr></thead>
|
|
|
2813 <tbody><tr class="match">
|
|
|
2814 <td class="dnaseq"></td>
|
|
|
2815 <td>
|
|
|
2816 <span class="positives"></span>/3</td>
|
|
|
2817 <td>
|
|
|
2818 <span class="negatives"></span>/3</td>
|
|
|
2819 <td class="pvalue"></td>
|
|
|
2820 <td class="evalue"></td>
|
|
|
2821 </tr></tbody>
|
|
|
2822 </table>
|
|
|
2823 </div></div>
|
|
|
2824 <div id="grey_out_page" class="grey_background" style="display:none;"></div>
|
|
|
2825 <div class="popup_wrapper"><div id="send_to" class="popup" style="top:-150px; display:none">
|
|
|
2826 <div>
|
|
|
2827 <div style="float:left" id="send_to_title_1"><h2 class="mainh compact">Submit "<span id="send_to_name"></span>"</h2></div>
|
|
|
2828 <div style="float:left" id="send_to_title_2"><h2 class="mainh compact">Submit All Motifs</h2></div>
|
|
|
2829 <div style="float:right; "><div class="close" onclick="both_hide();">x</div></div>
|
|
|
2830 <div style="clear:both"></div>
|
|
|
2831 </div>
|
|
|
2832 <div style="padding:0 5px 5px 5px;">
|
|
|
2833 <div id="send_to_selector" style="height:100px;">
|
|
|
2834 <img id="send_to_img" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'send_to_can', false)"><canvas id="send_to_can" width="10" height="100" style="display:none;"></canvas><img id="send_to_rcimg" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'send_to_rccan', true);"><canvas id="send_to_rccan" width="10" height="100" style="display:none"></canvas><div style="float:right;">
|
|
|
2835 <a id="prev_arrow_2" href="javascript:both_change(-1)" class="navarrow">⇧</a><div id="pop_num_2" class="navnum"></div>
|
|
|
2836 <a id="next_arrow_2" href="javascript:both_change(1)" class="navarrow">⇩</a>
|
|
|
2837 </div>
|
|
|
2838 </div>
|
|
|
2839 <form>
|
|
|
2840 <div style="">
|
|
|
2841 <div style="float:left;">
|
|
|
2842 <h4 class="compact">Select what you want to do</h4>
|
|
|
2843 <div class="programs_scroll"><ul id="tasks" class="programs">
|
|
|
2844 <li id="search_motifs" onclick="click_submit_task(this)" class="selected">Search Motifs</li>
|
|
|
2845 <li id="search_sequences" onclick="click_submit_task(this)">Search Sequences</li>
|
|
|
2846 <li id="rank_sequences" onclick="click_submit_task(this)">Rank Sequences</li>
|
|
|
2847 <li id="predict_go" onclick="click_submit_task(this)">Predict Gene Ontology terms</li>
|
|
|
2848 <li id="infer_tf" onclick="click_submit_task(this)">Infer TF Complexes</li>
|
|
|
2849 </ul></div>
|
|
|
2850 </div>
|
|
|
2851 <div style="float:right;">
|
|
|
2852 <h4 class="compact">Select a program</h4>
|
|
|
2853 <div class="programs_scroll"><ul id="programs" class="programs">
|
|
|
2854 <li id="TOMTOM" onclick="click_submit_program(this)" class="selected">Tomtom</li>
|
|
|
2855 <li id="FIMO" onclick="click_submit_program(this)">FIMO</li>
|
|
|
2856 <li id="MAST" onclick="click_submit_program(this)">MAST</li>
|
|
|
2857 <li id="GOMO" onclick="click_submit_program(this)">GOMO</li>
|
|
|
2858 <li id="SPAMO" onclick="click_submit_program(this)">SpaMo</li>
|
|
|
2859 </ul></div>
|
|
|
2860 </div>
|
|
|
2861 <div style="font-weight:bold; display:inline-block; text-align:center; width:60px; height:100px; line-height:100px">Or</div>
|
|
|
2862 <div style="clear:both;"></div>
|
|
|
2863 </div>
|
|
|
2864 <h4>
|
|
|
2865 <span id="program_action">Search Motifs</span> with <span id="program_name">Tomtom</span>
|
|
|
2866 </h4>
|
|
|
2867 <p><span id="program_desc">Find similar motifs in published
|
|
|
2868 libraries or a library you supply.</span></p>
|
|
|
2869 <div style="margin-top:10px; height: 2em;">
|
|
|
2870 <div style="float:left;"><input type="button" value="Send" onclick="javascript:send_to_submit()"></div>
|
|
|
2871 <div style="float:right;"><input type="button" value="Cancel" onclick="javascript:both_hide()"></div>
|
|
|
2872 </div>
|
|
|
2873 </form>
|
|
|
2874 </div>
|
|
|
2875 </div></div>
|
|
|
2876 <div class="popup_wrapper"><div id="download" class="popup" style="top:-150px; display:none">
|
|
|
2877 <div>
|
|
|
2878 <div style="float:left"><h2 class="mainh" style="margin:0; padding:0;">Download "<span id="download_name"></span>"</h2></div>
|
|
|
2879 <div style="float:right; "><div class="close" onclick="both_hide();">x</div></div>
|
|
|
2880 <div style="clear:both"></div>
|
|
|
2881 </div>
|
|
|
2882 <div style="padding:0 5px 5px 5px;">
|
|
|
2883 <div style="height:100px">
|
|
|
2884 <img id="download_img" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'download_can', false)"><canvas id="download_can" width="10" height="100" style="display:none;"></canvas><img id="download_rcimg" height="90" style="max-width:170px;" onerror="fix_popup_logo(this, 'download_rccan', true)"><canvas id="download_rccan" width="10" height="100" style="display:none;"></canvas><div style="float:right;">
|
|
|
2885 <a id="prev_arrow_1" href="javascript:both_change(-1)" class="navarrow">⇧</a><div id="pop_num_1" class="navnum"></div>
|
|
|
2886 <a id="next_arrow_1" href="javascript:both_change(1)" class="navarrow">⇩</a>
|
|
|
2887 </div>
|
|
|
2888 </div>
|
|
|
2889 <form>
|
|
|
2890 <input type="hidden" id="download_tab_num" value="1"><div style="padding:5px 0;">
|
|
|
2891 <div class="tabArea top">
|
|
|
2892 <a id="download_tab_1" href="javascript:click_download_tab(1)" class="tab activeTab">PSPM Format</a><a id="download_tab_2" href="javascript:click_download_tab(2)" class="tab">PSSM Format</a><a id="download_tab_3" href="javascript:click_download_tab(3)" class="tab">Logo</a>
|
|
|
2893 </div>
|
|
|
2894 <div class="tabMain">
|
|
|
2895 <div id="download_pnl_1"><textarea id="download_pspm" style="width:99%" rows="10" readonly></textarea></div>
|
|
|
2896 <div id="download_pnl_2"><textarea id="download_pssm" style="width:99%" rows="10" readonly></textarea></div>
|
|
|
2897 <div id="download_pnl_3"><table>
|
|
|
2898 <tr>
|
|
|
2899 <td><label for="logo_format">Format:</label></td>
|
|
|
2900 <td><select id="logo_format"><option value="png">PNG (for web)</option>
|
|
|
2901 <option value="eps">EPS (for publication)</option></select></td>
|
|
|
2902 </tr>
|
|
|
2903 <tr>
|
|
|
2904 <td><label for="logo_rc">Orientation:</label></td>
|
|
|
2905 <td><select id="logo_rc"><option value="false">Normal</option>
|
|
|
2906 <option value="true">Reverse Complement</option></select></td>
|
|
|
2907 </tr>
|
|
|
2908 <tr>
|
|
|
2909 <td><label for="logo_ssc">Small Sample Correction:</label></td>
|
|
|
2910 <td><select id="logo_ssc"><option value="false">Off</option>
|
|
|
2911 <option value="true">On</option></select></td>
|
|
|
2912 </tr>
|
|
|
2913 <tr>
|
|
|
2914 <td><label for="logo_width">Width:</label></td>
|
|
|
2915 <td>
|
|
|
2916 <input type="text" id="logo_width" size="4"> cm
|
|
|
2917 </td>
|
|
|
2918 </tr>
|
|
|
2919 <tr>
|
|
|
2920 <td><label for="logo_height">Height:</label></td>
|
|
|
2921 <td>
|
|
|
2922 <input type="text" id="logo_height" size="4"> cm
|
|
|
2923 </td>
|
|
|
2924 </tr>
|
|
|
2925 </table></div>
|
|
|
2926 <div style="margin-top:10px;">
|
|
|
2927 <div style="float:left;"><input type="button" id="download_button" value="Download" style="visibility:hidden;" onclick="javascript:download_submit()"></div>
|
|
|
2928 <div style="float:right;"><input type="button" value="Cancel" onclick="javascript:both_hide()"></div>
|
|
|
2929 <div style="clear:both;"></div>
|
|
|
2930 </div>
|
|
|
2931 </div>
|
|
|
2932 </div>
|
|
|
2933 </form>
|
|
|
2934 </div>
|
|
|
2935 </div></div>
|
|
|
2936 <a name="top"></a><div class="pad1">
|
|
|
2937 <h1><img src="http://Sharplab-G4-1.local/meme/doc/images/dreme_logo.png" alt="Discriminative Regular Expression Motif Elicitation (DREME)"></h1>
|
|
|
2938 <p class="spaced">
|
|
|
2939 For further information on how to interpret these results or to get a
|
|
|
2940 copy of the MEME software please access
|
|
|
2941 <a href="http://meme.nbcr.net/">http://meme.nbcr.net</a>.
|
|
|
2942 </p>
|
|
|
2943 <p>
|
|
|
2944 If you use DREME in your research please cite the following paper:<br><span class="citation">
|
|
|
2945 Timothy L. Bailey, "DREME: Motif discovery in transcription factor ChIP-seq data", <i>Bioinformatics</i>, <b>27</b>(12):1653-1659, 2011.
|
|
|
2946 </span></p>
|
|
|
2947 </div>
|
|
|
2948 <div class="pad2">
|
|
|
2949 <a class="jump" href="#description">Description</a> | <a class="jump" href="#motifs">Discovered motifs</a> | <a class="jump" href="#program">Program information</a>
|
|
|
2950 </div>
|
|
|
2951 <a name="description"></a><table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#FFFFFF"><tr>
|
|
|
2952 <td><h2 class="mainh">Description</h2></td>
|
|
|
2953 <td align="right" valign="bottom">
|
|
|
2954 <a href="#motifs">Next</a> <a href="#top">Top</a>
|
|
|
2955 </td>
|
|
|
2956 </tr></table>
|
|
|
2957 <div class="box"><p>xxxx</p></div>
|
|
|
2958 <a name="motifs"></a><table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#FFFFFF"><tr>
|
|
|
2959 <td><h2 class="mainh">Discovered Motifs</h2></td>
|
|
|
2960 <td align="right" valign="bottom">
|
|
|
2961 <a href="#description">Previous</a> <a href="#program">Next</a> <a href="#top">Top</a>
|
|
|
2962 </td>
|
|
|
2963 </tr></table>
|
|
|
2964 <div class="box">
|
|
|
2965 <p><b>Click on the ↧</b> under the <b>More</b> column to show more
|
|
|
2966 information about the motif.<br><b>Click on the ⇢</b> under the <b>Submit</b> column to send the
|
|
|
2967 motif to another MEME suite program. Eg. Tomtom<br><b>Click on the ⟱</b> under the <b>Download</b> column to get
|
|
|
2968 the position weight matrix of a motif or to download the logo image with
|
|
|
2969 your chosen options.
|
|
|
2970 </p>
|
|
|
2971 <table id="dreme_motifs" class="dreme_motifs">
|
|
|
2972 <thead><tr class="motif_head">
|
|
|
2973 <td> </td>
|
|
|
2974 <th>Motif <div class="help2" onclick="help(this,'pop_motifs_name')">?</div>
|
|
|
2975 </th>
|
|
|
2976 <th>Logo <div class="help2" onclick="help(this,'pop_motifs_logo')">?</div>
|
|
|
2977 </th>
|
|
|
2978 <th>RC Logo <div class="help2" onclick="help(this,'pop_motifs_rc_logo')">?</div>
|
|
|
2979 </th>
|
|
|
2980 <th>E-value <div class="help2" onclick="help(this,'pop_motifs_evalue')">?</div>
|
|
|
2981 </th>
|
|
|
2982 <th>Unerased E-value <div class="help2" onclick="help(this,'pop_motifs_uevalue')">?</div>
|
|
|
2983 </th>
|
|
|
2984 <th>More <div class="help2" onclick="help(this,'pop_more')">?</div>
|
|
|
2985 </th>
|
|
|
2986 <th>Submit <div class="help2" onclick="help(this,'pop_submit')">?</div>
|
|
|
2987 </th>
|
|
|
2988 <th>Download <div class="help2" onclick="help(this,'pop_download')">?</div>
|
|
|
2989 </th>
|
|
|
2990 </tr></thead>
|
|
|
2991 <tbody></tbody>
|
|
|
2992 <tfoot><tr class="rule">
|
|
|
2993 <td> </td>
|
|
|
2994 <td> </td>
|
|
|
2995 <td> </td>
|
|
|
2996 <td> </td>
|
|
|
2997 <td> </td>
|
|
|
2998 <td> </td>
|
|
|
2999 <td> </td>
|
|
|
3000 <td> </td>
|
|
|
3001 <td> </td>
|
|
|
3002 </tr></tfoot>
|
|
|
3003 </table>
|
|
|
3004 <div style="float:left"><div onclick="send_to_popup(0);" class="actionbutton" title="Submit all motifs to another program.">
|
|
|
3005 <div style="float:left; margin-right:1em;">Submit All</div>
|
|
|
3006 <div style="float:right">⇢</div>
|
|
|
3007 <div style="clear:both;"></div>
|
|
|
3008 </div></div>
|
|
|
3009 <div style="clear:both;"></div>
|
|
|
3010 </div>
|
|
|
3011 <a name="program"></a><div class="bar">
|
|
|
3012 <div style="text-align:right;">
|
|
|
3013 <a href="#motifs">Previous</a> <a href="#top">Top</a>
|
|
|
3014 </div>
|
|
|
3015 <div class="subsection">
|
|
|
3016 <a name="version"></a><h5>DREME version</h5>4.7.0 (Release date: Wed Sep 28 17:30:10 EST 2011)
|
|
|
3017 </div>
|
|
|
3018 <div class="subsection">
|
|
|
3019 <a name="reference"></a><h5>Reference</h5>
|
|
|
3020 <span class="citation">
|
|
|
3021 Timothy L. Bailey, "DREME: Motif discovery in transcription factor ChIP-seq data", <i>Bioinformatics</i>, <b>27</b>(12):1653-1659, 2011.
|
|
|
3022 </span>
|
|
|
3023 </div>
|
|
|
3024 <div class="subsection">
|
|
|
3025 <a name="command"></a><h5>Command line summary</h5>
|
|
|
3026 <textarea rows="1" style="width:100%;" readonly>dreme -p test.fa -desc xxxx</textarea><br>Result calculation took 0.01 seconds<br>
|
|
|
3027 </div>
|
|
|
3028 <a href="javascript:show_hidden('model')" id="model_activator">show model parameters...</a><div class="subsection" id="model_data" style="display:none;">
|
|
|
3029 <h5>Model parameters</h5>
|
|
|
3030 <textarea style="width:100%;" rows="10" readonly>
|
|
|
3031 positives = name: "test", count: "3", file: "test.fa", last_mod_date: "Sat Dec 10 12:52:18 EST 2011"
|
|
|
3032 negatives = name: "shuffled positive sequences", count: "3", from: "shuffled"
|
|
|
3033 background = type: "dna", A: "0.243", C: "0.270", G: "0.243", T: "0.243", from: "dataset"
|
|
|
3034 stop = evalue: "0.05"
|
|
|
3035 ngen = 100
|
|
|
3036 add_pv_thresh = 0.01
|
|
|
3037 seed = 1
|
|
|
3038 host = SHARPLAB.MIT.EDU
|
|
|
3039 when = Sun Dec 11 09:26:43 EST 2011
|
|
|
3040 </textarea>
|
|
|
3041 </div>
|
|
|
3042 <a href="javascript:hide_shown('model')" style="display:none;" id="model_deactivator">hide model parameters...</a>
|
|
|
3043 </div>
|
|
|
3044 </body>
|
|
|
3045 </html>
|
