Mercurial > repos > jankanis > blast2html

comparison blast_html.html.jinja @ 13:c2d63adb83db

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
renamed files
author Jan Kanis <jan.code@jankanis.nl>
date Mon, 12 May 2014 17:13:49 +0200
parents visualise.html.jinja@a459c754cdb5
children db7e4ee3be03
comparison
equal deleted inserted replaced
12:a459c754cdb5 13:c2d63adb83db
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5
6 <title>Blast output</title>
7
8 <style>
9 body {
10 color: #33333;
11 font-family: Arial,Sans-Serif;
12 }
13
14 :link {
15 color: #336699;
16 }
17
18 .right {
19 float: right;
20 }
21
22 #content {
23 margin: 0 2em;
24 padding: 0.5em;
25 border: 1px solid #888888;
26 background-color: #d3dff5;
27 }
28
29 h1, h2, h3, h4, h5, h6 {
30 color: #2A6979;
31 font-family: arial,verdana,sans-serif;
32 letter-spacing: -1px;
33 margin: 1.2em 0 0.3em;
34 }
35
36 h1 {
37 border-bottom: 1px solid #CCCCCC;
38 font-size: 150%;
39 padding-bottom: 0.1em;
40 }
41
42 h2 {
43 font-size: 120%;
44 font-weight: bold;
45 }
46
47 h4.darkHeader {
48 color: #4D4D4D;
49 letter-spacing: 0;
50 font-weight: bold;
51 }
52
53 #nodata {
54 font-weight: bold;
55 }
56
57 .headerdata {
58 font-size: 90%;
59 }
60 .headerdata .param {
61 font-weight: bold;
62 text-align: right;
63 padding: 0 1em;
64 }
65
66 .grey {
67 background-color: #eeeeee;
68 border: 1px solid #cccccc;
69 padding: 1em;
70 }
71
72 .white {
73 background-color: white;
74 border: 1px solid #cccccc;
75 padding: 1.5em 2%;
76 }
77
78 .graphicrow {
79 clear: left;
80 width: 100%;
81 }
82
83 .graphicitem {
84 float: left;
85 }
86
87
88
89 .graphic {
90 background-color: white;
91 border: 2px solid black;
92 padding: .5em 1.5em;
93 align: center;
94 margin: auto;
95 }
96
97 #graphics .grey {
98 text-align: center;
99 }
100
101 .centered, #defline, div.legend, div.tablewrapper {
102 align: center;
103 margin-left: auto;
104 margin-right: auto;
105 }
106
107 #defline {
108 background-color: white;
109 border: 1px solid black;
110 margin: .5em auto;
111 padding-left: .2em;
112 padding-right: .2em;
113 max-width: 50em;
114 text-align: left;
115 height: 2.8em;
116 overflow-y: hidden;
117 }
118
119 div.legend {
120 max-width: 40em;
121 }
122 div.legend div {
123 width: 100%;
124 color: white;
125 font-weight: bold;
126 border-spacing: 0;
127 }
128 div.legend div .graphicitem {
129 width: 20%;
130 padding: 0;
131 margin: 0;
132 border: none;
133 }
134
135 div.tablewrapper {
136 width: 50%;
137 min-width: 60em;
138 }
139
140 /* For small widths we give the graphic 100% */
141 @media (max-width: 72.5em) {
142 div.tablewrapper {
143 width: 100%;
144 min-width: 0px;
145 }
146 }
147
148 .scale {
149 width: 100%;
150 margin: .5em 0;
151 font-weight: bold;
152 }
153 .scale div {
154 color: red;
155 text-align: left;
156 }
157 .scale .graphicrow {
158 margin: .5em 0 .5em 0;
159 color: white;
160 }
161 .scale .graphicitem div {
162 margin: 0 1px;
163 padding: 0 2px;
164 text-align: right;
165 background-color: red;
166 color: white;
167 }
168 .scale .graphicitem:first-child div {
169 margin-left: 0px;
170 }
171 .scale .graphicitem:last-child div {
172 margin-right: 0px;
173 }
174
175 a.matchresult {
176 display: block;
177 margin: 0;
178 padding: 0;
179 }
180 div.matchrow {
181 margin-top: 4px;
182 }
183 div.matchrow, div.matchitem {
184 height: 4px;
185 }
186
187
188
189 div#descriptions {
190 }
191
192 table.descriptiontable {
193 font-size: 85%;
194 border: 1px solid #97b0c8;
195 border-spacing: 0;
196 color: #222222;
197 line-height: 1.3em;
198 background-color: white;
199 }
200 table.descriptiontable col:first-child {
201 width: 100%;
202 }
203 table.descriptiontable tr:hover {
204 background-color: #D5DEE3;
205 }
206 table.descriptiontable th {
207 color: #14376C;
208 font-weight: normal;
209 background-color: #F0F0F0;
210 background: linear-gradient(#FFFFFF, #F0F0F0);
211 border-bottom: 1px solid #D4DFE9;
212 border-right: 1px solid #CFCFCF;
213 border-left: 0px solid black;
214 border-top: 0px solid black;
215 }
216 table.descriptiontable td {
217 overflow: hidden;
218 text-align: center;
219 padding: .4em .8em;
220 }
221 table.descriptiontable td div {
222 width: 1em;
223 overflow: visible;
224 white-space: nowrap;
225 text-align: left;
226 }
227
228
229
230 #alignments .white {
231 padding: 1.5em 1em;
232 }
233
234 .alignment {
235 border-top: 1px solid black;
236 padding-left: 1em;
237 padding-right: 1em;
238 }
239
240 div.linkheader {
241 padding-top: .2em;
242 font-size: 85%;
243 color: #14376C;
244 }
245 div.linkheader a.linkheader {
246 margin-right: 1em;
247 }
248 div.linkheader .right a {
249 text-decoration: none;
250 }
251
252 .title .hittitle {
253 color: #22222;
254 margin-bottom: .3em;
255 }
256 .title .titleinfo {
257 font-size: 80%;
258 margin-top: 0;
259 margin-bottom: .3em;
260 }
261 .title .titleinfo .b {
262 color: #606060;
263 font-weight: bold;
264 font-size: 90%;
265 }
266
267 .moretitles {
268 margin: 1.2em;
269 }
270 .moretitles .titleinfo {
271 margin: 0;
272 padding: 0;
273 }
274 .moretitles .hittitle {
275 margin: .4em 0 .2em 0;
276 padding: 0;
277 }
278
279 a.showmoretitles {
280 font-size: 75%;
281 color: #336699;
282 font-weight: bold;
283 margin-top: 0;
284 }
285 a.showmoretitles:hover {
286 }
287
288 .hotspot {
289 color: #606060;
290 font-family: verdana, arial, sans-serif;
291 margin-bottom: 2.5em;
292 }
293
294 .hotspot p.range {
295 font-size: 70%;
296 margin-top: 0;
297 margin-top: 1em;
298 margin-bottom: .2em;
299 }
300 .hotspot p.range span.range {
301 font-weight: bold;
302 }
303 .hotspot p.range a.range {
304 margin-left: .5em;
305 }
306
307 table.hotspotstable {
308 border-top: 1px solid;
309 border-bottom: 1px solid;
310 text-align: left;
311 border-collapse: collapse;
312 }
313 table.hotspotstable th, table.hotspotstable td {
314 padding: .1em 1em;
315 }
316 table.hotspotstable th {
317 font-size: 70%;
318 }
319 table.hotspotstable td {
320 min-width: 7em;
321 color: #222222;
322 font-size: 80%;
323 }
324
325 pre.alignmentgraphic {
326 color: #222222;
327 }
328
329
330 </style>
331
332 <script type="text/javascript">
333 function toggle_visibility(id) {
334 var e = document.getElementById(id);
335 if(e.style.display != 'block')
336 e.style.display = 'block';
337 else
338 e.style.display = 'none';
339 }
340 </script>
341
342 </head>
343
344
345 <body>
346 <div id=content>
347 <h1>Nucleotide Sequence ({{length}} letters)</h1>
348
349 <div id=header>
350
351 <table class=headerdata>
352 {% for param, value in params %}
353 <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr>
354 {% endfor %}
355 </table>
356
357 </div>
358
359 {% if not (blast.BlastOutput_iterations.findall('Iteration') and
360 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %}
361 <div id=nodata>
362 <h2>No Results</h2>
363 <div class=grey>
364 No Matches
365 </div>
366 </div>
367 {% else %}
368
369
370
371 <div id=graphics>
372 <h2>Graphic Summary</h2>
373
374 <div class=grey>
375 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3>
376
377 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div>
378
379 <div class=graphic>
380 <h4 class=darkHeader>Color key for alignment scores</h4>
381 <div class=legend><div class=graphicrow>
382 <div class=graphicitem style="background-color: {{colors[0]}}">&lt;40</div>
383 <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div>
384 <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div>
385 <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div>
386 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div>
387 </div></div>
388 <div style="clear: left"></div>
389
390 <div class=tablewrapper>
391
392 <div class=scale>
393 <div>query:</div>
394 <div class=graphicrow>
395 {% for s in queryscale %}
396 <div class=graphicitem
397 style="width: {{s.width|safe}}%">
398 <div>{{s.label|safe}}</div>
399 </div>
400 {% endfor %}
401 </div>
402 <div style="clear: left"></div>
403 </div>
404
405 {% for line in match_colors %}
406 <a class=matchresult
407 href="{{line.link}}"
408 onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"'
409 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"'
410 title="{{line.defline}}">
411 <div class="matchrow graphicrow">
412 {% for match in line.colors %}
413 <div class="matchitem graphicitem"
414 style="background-color: {{match[1]}}; width: {{match[0]}}%"></div>
415 {% endfor %}
416 </div>
417 </a>
418
419 {% endfor %}
420 </div>
421 </div>
422 </div>
423 </div>
424
425
426
427 <div id=descriptions>
428 <h2>Descriptions</h2>
429
430 <div class=grey><div class=white>
431 <h4 class=darkHeader>Sequences producing significant alignments:</h4>
432
433 <table class=descriptiontable>
434 <col/><col/><col/><col/><col/><col/><col/>
435 <tr>
436 <th>Description</th>
437 <th>Max score</th>
438 <th>Total score</th>
439 <th>Query cover</th>
440 <th>E value</th>
441 <th>Ident</th>
442 <th>Accession</th>
443 </tr>
444 {% for hit in hit_info %}
445 <tr>
446 <td><div><a href="#hit{{hit.link_id}}"
447 title="{{hit.title}}"
448 name=description{{hit.link_id}}>
449 {{hit.title}}
450 </a></div></td>
451 <td>{{hit.maxscore}}</td>
452 <td>{{hit.totalscore}}</td>
453 <td>{{hit.cover}}</td>
454 <td>{{hit.e_value}}</td>
455 <td>{{hit.ident}}</td>
456 <td><a href="{{genelink(hit.hit|hitid)}}">{{hit.accession}}</a></td>
457 </tr>
458 {% endfor %}
459 </table>
460
461 </div></div>
462 </div>
463
464
465
466 <div id=alignments>
467 <h2>Alignments</h2>
468
469 <div class=grey><div class=white>
470 {% for hit in hits %}
471 <div class=alignment id=hit{{hit.Hit_num}}>
472
473 <div class=linkheader>
474 <div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div>
475 <a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a>
476 <a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a>
477 </div>
478
479 <div class=title>
480 <p class=hittitle>{{hit|firsttitle}}</p>
481 <p class=titleinfo>
482 <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a>
483 <span class=b>Length:</span> {{hit.Hit_len}}
484 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}}
485 </p>
486 </div>
487
488 {% if hit|othertitles|length %}
489 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''>
490 See {{hit|othertitles|length}} more title(s)
491 </a>
492
493 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none">
494 {% for title in hit|othertitles %}
495 <div class=title>
496 <p class=hittitle>{{title.title}}</p>
497 <p class=titleinfo>
498 <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a>
499 </p>
500 </div>
501 {% endfor %}
502 </div>
503 {% endif %}
504
505 {% for hsp in hit.Hit_hsps.Hsp %}
506 <div class=hotspot>
507 <p class=range>
508 <span class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</span>
509 <a class=range href="{{genelink(hit|hitid, 'genbank', hsp)}}">GenBank</a>
510 <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a>
511 </p>
512
513 <table class=hotspotstable>
514 <tr>
515 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th>
516 </tr>
517 <tr>
518 <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td>
519 <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td>
520 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{
521 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td>
522 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len
523 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td>
524 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td>
525 </tr>
526 </table>
527
528 <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre>
529 </div>
530 {% endfor %}
531
532 </div>
533
534 {% endfor %}
535 </div></div>
536 </div>
537
538 {% endif %}
539 </div>
540 </body>
541 </html>
542