Mercurial > repos > jankanis > blast2html
comparison blast_html.html.jinja @ 19:67ddcb807b7d
make it work with multiple queries
author | Jan Kanis <jan.code@jankanis.nl> |
---|---|
date | Tue, 13 May 2014 18:06:36 +0200 |
parents | 8e61627a87f1 |
children | 53cd304c5f26 |
comparison
equal
deleted
inserted
replaced
18:4434ffab721a | 19:67ddcb807b7d |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <meta charset="UTF-8"> | 4 <meta charset="UTF-8"> |
5 <meta name=generator content="blast_html; see ..."> | |
5 | 6 |
6 <title>Blast output</title> | 7 <title>Blast output</title> |
7 | 8 |
8 <style> | 9 <style> |
9 body { | 10 body { |
95 border: 2px solid black; | 96 border: 2px solid black; |
96 padding: .5em 1.5em; | 97 padding: .5em 1.5em; |
97 margin: auto; | 98 margin: auto; |
98 } | 99 } |
99 | 100 |
100 .centered, #defline, div.legend, div.tablewrapper { | 101 .centered, .defline, div.legend, div.tablewrapper { |
101 margin-left: auto; | 102 margin-left: auto; |
102 margin-right: auto; | 103 margin-right: auto; |
103 } | 104 } |
104 | 105 |
105 #defline { | 106 .defline { |
106 background-color: white; | 107 background-color: white; |
107 border: 1px solid black; | 108 border: 1px solid black; |
108 margin: .5em auto; | 109 margin: .5em auto; |
109 padding-left: .2em; | 110 padding-left: .2em; |
110 padding-right: .2em; | 111 padding-right: .2em; |
336 </head> | 337 </head> |
337 | 338 |
338 | 339 |
339 <body> | 340 <body> |
340 <div id=content> | 341 <div id=content> |
341 <h1>Nucleotide Sequence ({{length}} letters)</h1> | 342 |
342 | 343 {% if not blast.BlastOutput_iterations.findall('Iteration') %} |
343 <section class=header> | |
344 | |
345 <table class=headerdata> | |
346 {% for param, value in params %} | |
347 <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr> | |
348 {% endfor %} | |
349 </table> | |
350 | |
351 </section> | |
352 | |
353 {% if not (blast.BlastOutput_iterations.findall('Iteration') and | |
354 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %} | |
355 <section class=nodata> | 344 <section class=nodata> |
356 <h2>No Results</h2> | 345 <h1>No data</h1> |
357 <div class=grey> | 346 <div class=grey> |
358 No Matches | 347 No matches |
359 </div> | 348 </div> |
360 </section> | 349 </section> |
350 | |
361 {% else %} | 351 {% else %} |
362 | 352 {% for result in blast.BlastOutput_iterations.Iteration %} |
363 | 353 |
364 | 354 <section class=match> |
365 <section class=graphics> | 355 |
366 <h2>Graphic Summary</h2> | 356 <h1>Nucleotide Sequence ({{result|len}} letters)</h1> |
367 | 357 |
368 <div class=grey> | 358 <section class=header> |
369 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3> | 359 |
370 | 360 <table class=headerdata> |
371 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div> | 361 {% for param, value in params %} |
372 | 362 <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr> |
373 <div class=graphic> | 363 {% endfor %} |
374 <h4 class=darkHeader>Color key for alignment scores</h4> | 364 </table> |
375 <div class=legend><div class=graphicrow> | 365 |
376 <div class=graphicitem style="background-color: {{colors[0]}}"><40</div> | 366 </section> |
377 <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div> | 367 |
378 <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div> | 368 {% set hits = result|hits %} |
379 <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div> | 369 {% if not hits %} |
380 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div> | 370 <section> |
381 </div></div> | 371 <h2>No Hits</h2> |
382 <div style="clear: left"></div> | 372 <div class=grey> |
383 | 373 This query did not match anywhere |
384 <div class=tablewrapper> | 374 </div> |
385 | 375 </section> |
386 <div class=scale> | 376 {% else %} |
387 <div>query:</div> | 377 |
388 <div class=graphicrow> | 378 <section class=graphics> |
389 {% for s in queryscale %} | 379 <h2>Graphic Summary</h2> |
390 <div class=graphicitem style="width: {{s.width}}%"> | 380 |
391 <div>{{s.label}}</div> | 381 <div class=grey> |
382 <h3 class=centered>Distribution of {{result|length}} Blast Hits on the Query Sequence</h3> | |
383 | |
384 <div class=defline id=defline{{result['Iteration_iter-num']}}> | |
385 Mouse-over to show defline and scores, click to show alignments | |
386 </div> | |
387 | |
388 <div class=graphic> | |
389 <h4 class=darkHeader>Color key for alignment scores</h4> | |
390 <div class=legend><div class=graphicrow> | |
391 <div class=graphicitem style="background-color: {{colors[0]}}"><40</div> | |
392 <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div> | |
393 <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div> | |
394 <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div> | |
395 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div> | |
396 </div></div> | |
397 <div style="clear: left"></div> | |
398 | |
399 <div class=tablewrapper> | |
400 | |
401 <div class=scale> | |
402 <div>query:</div> | |
403 <div class=graphicrow> | |
404 {% for s in result|queryscale %} | |
405 <div class=graphicitem style="width: {{s.width}}%"> | |
406 <div>{{s.label}}</div> | |
407 </div> | |
408 {% endfor %} | |
409 </div> | |
410 <div style="clear: left"></div> | |
411 </div> | |
412 | |
413 {% for line in result|match_colors %} | |
414 <a class=matchresult | |
415 href="{{line.link}}" | |
416 onmouseover='document.getElementById("defline{{result['Iteration_iter-num']}}").innerHTML="{{line.defline|js_string_escape}}"' | |
417 onmouseout='document.getElementById("defline{{result['Iteration_iter-num']}}").innerHTML="Mouse-over to show defline and scores, click to show alignments"' | |
418 title="{{line.defline}}"> | |
419 <div class="matchrow graphicrow"> | |
420 {% for hit in line.colors %} | |
421 <div class="matchitem graphicitem" | |
422 style="background-color: {{hit[1]}}; width: {{hit[0]}}%"></div> | |
423 {% endfor %} | |
424 </div> | |
425 </a> | |
426 | |
427 {% endfor %} | |
428 </div> | |
429 </div> | |
430 </div> | |
431 </section> | |
432 | |
433 | |
434 | |
435 <section class=descriptions> | |
436 <h2>Descriptions</h2> | |
437 | |
438 <div class=grey><div class=white> | |
439 <h4 class=darkHeader>Sequences producing significant alignments:</h4> | |
440 | |
441 <table class=descriptiontable> | |
442 <col/><col/><col/><col/><col/><col/><col/> | |
443 <tr> | |
444 <th>Description</th> | |
445 <th>Max score</th> | |
446 <th>Total score</th> | |
447 <th>Query cover</th> | |
448 <th>E value</th> | |
449 <th>Ident</th> | |
450 <th>Accession</th> | |
451 </tr> | |
452 {% for hit in result|hit_info %} | |
453 <tr> | |
454 <td><div><a href="#hit{{hit.link_id}}" | |
455 title="{{hit.title}}" | |
456 id="description{{hit.link_id}}"> | |
457 {{hit.title}} | |
458 </a></div></td> | |
459 <td>{{hit.maxscore}}</td> | |
460 <td>{{hit.totalscore}}</td> | |
461 <td>{{hit.cover}}</td> | |
462 <td>{{hit.e_value}}</td> | |
463 <td>{{hit.ident}}</td> | |
464 <td><a href="{{genelink(hit.hit|hitid)}}">{{hit.accession}}</a></td> | |
465 </tr> | |
466 {% endfor %} | |
467 </table> | |
468 | |
469 </div></div> | |
470 </section> | |
471 | |
472 | |
473 | |
474 <section class=alignments> | |
475 <h2>Alignments</h2> | |
476 | |
477 <div class=grey><div class=white> | |
478 {% for hit in hits %} | |
479 <div class=alignment id=hit{{hit.Hit_num}}> | |
480 | |
481 <div class=linkheader> | |
482 <div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div> | |
483 <a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a> | |
484 <a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a> | |
485 </div> | |
486 | |
487 <div class=title> | |
488 <p class=hittitle>{{hit|firsttitle}}</p> | |
489 <p class=titleinfo> | |
490 <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a> | |
491 <span class=b>Length:</span> {{hit.Hit_len}} | |
492 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} | |
493 </p> | |
494 </div> | |
495 | |
496 {% if hit|othertitles|length %} | |
497 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num|js_string_escape}}'); return false;" href=''> | |
498 See {{hit|othertitles|length}} more title(s) | |
499 </a> | |
500 | |
501 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none"> | |
502 {% for title in hit|othertitles %} | |
503 <div class=title> | |
504 <p class=hittitle>{{title.title}}</p> | |
505 <p class=titleinfo> | |
506 <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a> | |
507 </p> | |
392 </div> | 508 </div> |
393 {% endfor %} | 509 {% endfor %} |
394 </div> | 510 </div> |
395 <div style="clear: left"></div> | 511 {% endif %} |
396 </div> | 512 |
397 | 513 {% for hsp in hit.Hit_hsps.Hsp %} |
398 {% for line in match_colors %} | 514 <div class=hotspot> |
399 <a class=matchresult | 515 <p class=range> |
400 href="{{line.link}}" | 516 <span class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</span> |
401 onmouseover='document.getElementById("defline").innerHTML="{{line.defline|js_string_escape}}"' | 517 <a class=range href="{{genelink(hit|hitid, 'genbank', hsp)}}">GenBank</a> |
402 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"' | 518 <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a> |
403 title="{{line.defline}}"> | |
404 <div class="matchrow graphicrow"> | |
405 {% for match in line.colors %} | |
406 <div class="matchitem graphicitem" | |
407 style="background-color: {{match[1]}}; width: {{match[0]}}%"></div> | |
408 {% endfor %} | |
409 </div> | |
410 </a> | |
411 | |
412 {% endfor %} | |
413 </div> | |
414 </div> | |
415 </div> | |
416 </section> | |
417 | |
418 | |
419 | |
420 <section class=descriptions> | |
421 <h2>Descriptions</h2> | |
422 | |
423 <div class=grey><div class=white> | |
424 <h4 class=darkHeader>Sequences producing significant alignments:</h4> | |
425 | |
426 <table class=descriptiontable> | |
427 <col/><col/><col/><col/><col/><col/><col/> | |
428 <tr> | |
429 <th>Description</th> | |
430 <th>Max score</th> | |
431 <th>Total score</th> | |
432 <th>Query cover</th> | |
433 <th>E value</th> | |
434 <th>Ident</th> | |
435 <th>Accession</th> | |
436 </tr> | |
437 {% for hit in hit_info %} | |
438 <tr> | |
439 <td><div><a href="#hit{{hit.link_id}}" | |
440 title="{{hit.title}}" | |
441 id="description{{hit.link_id}}"> | |
442 {{hit.title}} | |
443 </a></div></td> | |
444 <td>{{hit.maxscore}}</td> | |
445 <td>{{hit.totalscore}}</td> | |
446 <td>{{hit.cover}}</td> | |
447 <td>{{hit.e_value}}</td> | |
448 <td>{{hit.ident}}</td> | |
449 <td><a href="{{genelink(hit.hit|hitid)}}">{{hit.accession}}</a></td> | |
450 </tr> | |
451 {% endfor %} | |
452 </table> | |
453 | |
454 </div></div> | |
455 </section> | |
456 | |
457 | |
458 | |
459 <section class=alignments> | |
460 <h2>Alignments</h2> | |
461 | |
462 <div class=grey><div class=white> | |
463 {% for hit in hits %} | |
464 <div class=alignment id=hit{{hit.Hit_num}}> | |
465 | |
466 <div class=linkheader> | |
467 <div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div> | |
468 <a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a> | |
469 <a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a> | |
470 </div> | |
471 | |
472 <div class=title> | |
473 <p class=hittitle>{{hit|firsttitle}}</p> | |
474 <p class=titleinfo> | |
475 <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a> | |
476 <span class=b>Length:</span> {{hit.Hit_len}} | |
477 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} | |
478 </p> | |
479 </div> | |
480 | |
481 {% if hit|othertitles|length %} | |
482 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num|js_string_escape}}'); return false;" href=''> | |
483 See {{hit|othertitles|length}} more title(s) | |
484 </a> | |
485 | |
486 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none"> | |
487 {% for title in hit|othertitles %} | |
488 <div class=title> | |
489 <p class=hittitle>{{title.title}}</p> | |
490 <p class=titleinfo> | |
491 <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a> | |
492 </p> | 519 </p> |
520 | |
521 <table class=hotspotstable> | |
522 <tr> | |
523 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> | |
524 </tr> | |
525 <tr> | |
526 <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td> | |
527 <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td> | |
528 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{ | |
529 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td> | |
530 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len | |
531 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td> | |
532 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td> | |
533 </tr> | |
534 </table> | |
535 | |
536 <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre> | |
493 </div> | 537 </div> |
494 {% endfor %} | 538 {% endfor %} |
539 | |
495 </div> | 540 </div> |
496 {% endif %} | 541 |
497 | |
498 {% for hsp in hit.Hit_hsps.Hsp %} | |
499 <div class=hotspot> | |
500 <p class=range> | |
501 <span class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</span> | |
502 <a class=range href="{{genelink(hit|hitid, 'genbank', hsp)}}">GenBank</a> | |
503 <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a> | |
504 </p> | |
505 | |
506 <table class=hotspotstable> | |
507 <tr> | |
508 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> | |
509 </tr> | |
510 <tr> | |
511 <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td> | |
512 <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td> | |
513 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{ | |
514 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td> | |
515 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len | |
516 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td> | |
517 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td> | |
518 </tr> | |
519 </table> | |
520 | |
521 <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre> | |
522 </div> | |
523 {% endfor %} | 542 {% endfor %} |
524 | 543 </div></div> |
525 </div> | 544 </section> |
526 | 545 {% endif %} |
527 {% endfor %} | 546 |
528 </div></div> | 547 {% endfor %} |
529 </section> | 548 {% endif %} |
530 | |
531 {% endif %} | |
532 </div> | 549 </div> |
533 </body> | 550 </body> |
534 </html> | 551 </html> |
535 | 552 |
536 {# | 553 {# |