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]}}">&lt;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]}}">&lt;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 {#