Mercurial > repos > jankanis > blast2html

comparison blast2html.html.jinja @ 22:efce16c98650

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