Mercurial > repos > jankanis > blast2html

comparison blast_html.html.jinja @ 16:db7e4ee3be03

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix validation, reindent
author Jan Kanis <jan.code@jankanis.nl>
date Tue, 13 May 2014 12:22:35 +0200
parents c2d63adb83db
children 8e61627a87f1
comparison
equal deleted inserted replaced
15:648b3b7437da 16:db7e4ee3be03
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 5
6 <title>Blast output</title> 6 <title>Blast output</title>
7 7
8 <style> 8 <style>
9 body { 9 body {
10 color: #33333; 10 color: #333333;
11 font-family: Arial,Sans-Serif; 11 font-family: Arial,Sans-Serif;
12 } 12 }
13 13
14 :link { 14 :link {
15 color: #336699; 15 color: #336699;
84 float: left; 84 float: left;
85 } 85 }
86 86
87 87
88 88
89 .graphics .grey {
90 text-align: center;
91 }
92
89 .graphic { 93 .graphic {
90 background-color: white; 94 background-color: white;
91 border: 2px solid black; 95 border: 2px solid black;
92 padding: .5em 1.5em; 96 padding: .5em 1.5em;
93 align: center;
94 margin: auto; 97 margin: auto;
95 } 98 }
96 99
97 #graphics .grey {
98 text-align: center;
99 }
100
101 .centered, #defline, div.legend, div.tablewrapper { 100 .centered, #defline, div.legend, div.tablewrapper {
102 align: center;
103 margin-left: auto; 101 margin-left: auto;
104 margin-right: auto; 102 margin-right: auto;
105 } 103 }
106 104
107 #defline { 105 #defline {
248 div.linkheader .right a { 246 div.linkheader .right a {
249 text-decoration: none; 247 text-decoration: none;
250 } 248 }
251 249
252 .title .hittitle { 250 .title .hittitle {
253 color: #22222; 251 color: #222222;
254 margin-bottom: .3em; 252 margin-bottom: .3em;
255 } 253 }
256 .title .titleinfo { 254 .title .titleinfo {
257 font-size: 80%; 255 font-size: 80%;
258 margin-top: 0; 256 margin-top: 0;
329 327
330 </style> 328 </style>
331 329
332 <script type="text/javascript"> 330 <script type="text/javascript">
333 function toggle_visibility(id) { 331 function toggle_visibility(id) {
334 var e = document.getElementById(id); 332 var e = document.getElementById(id);
335 if(e.style.display != 'block') 333 if(e.style.display != 'block')
336 e.style.display = 'block'; 334 e.style.display = 'block';
337 else 335 else
338 e.style.display = 'none'; 336 e.style.display = 'none';
339 } 337 }
340 </script> 338 </script>
341 339
342 </head> 340 </head>
343 341
344 342
345 <body> 343 <body>
346 <div id=content> 344 <div id=content>
347 <h1>Nucleotide Sequence ({{length}} letters)</h1> 345 <h1>Nucleotide Sequence ({{length}} letters)</h1>
348 346
349 <div id=header> 347 <div class=header>
350 348
351 <table class=headerdata> 349 <table class=headerdata>
352 {% for param, value in params %} 350 {% for param, value in params %}
353 <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr> 351 <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr>
354 {% endfor %} 352 {% endfor %}
355 </table> 353 </table>
356 354
357 </div> 355 </div>
358 356
359 {% if not (blast.BlastOutput_iterations.findall('Iteration') and 357 {% if not (blast.BlastOutput_iterations.findall('Iteration') and
360 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %} 358 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %}
361 <div id=nodata> 359 <div class=nodata>
362 <h2>No Results</h2> 360 <h2>No Results</h2>
363 <div class=grey> 361 <div class=grey>
364 No Matches 362 No Matches
365 </div> 363 </div>
366 </div> 364 </div>
367 {% else %} 365 {% else %}
368 366
369 367
370 368
371 <div id=graphics> 369 <div class=graphics>
372 <h2>Graphic Summary</h2> 370 <h2>Graphic Summary</h2>
373 371
374 <div class=grey> 372 <div class=grey>
375 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3> 373 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3>
376 374
377 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div> 375 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div>
378 376
379 <div class=graphic> 377 <div class=graphic>
380 <h4 class=darkHeader>Color key for alignment scores</h4> 378 <h4 class=darkHeader>Color key for alignment scores</h4>
381 <div class=legend><div class=graphicrow> 379 <div class=legend><div class=graphicrow>
382 <div class=graphicitem style="background-color: {{colors[0]}}">&lt;40</div> 380 <div class=graphicitem style="background-color: {{colors[0]}}">&lt;40</div>
383 <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div> 381 <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div>
384 <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div> 382 <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div>
385 <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div> 383 <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div>
386 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div> 384 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div>
387 </div></div> 385 </div></div>
388 <div style="clear: left"></div> 386 <div style="clear: left"></div>
389 387
390 <div class=tablewrapper> 388 <div class=tablewrapper>
391 389
392 <div class=scale> 390 <div class=scale>
393 <div>query:</div> 391 <div>query:</div>
394 <div class=graphicrow> 392 <div class=graphicrow>
395 {% for s in queryscale %} 393 {% for s in queryscale %}
396 <div class=graphicitem 394 <div class=graphicitem style="width: {{s.width}}%">
397 style="width: {{s.width|safe}}%"> 395 <div>{{s.label}}</div>
398 <div>{{s.label|safe}}</div> 396 </div>
399 </div> 397 {% endfor %}
400 {% endfor %} 398 </div>
401 </div> 399 <div style="clear: left"></div>
402 <div style="clear: left"></div>
403 </div> 400 </div>
404 401
405 {% for line in match_colors %} 402 {% for line in match_colors %}
406 <a class=matchresult 403 <a class=matchresult
407 href="{{line.link}}" 404 href="{{line.link}}"
408 onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"' 405 onmouseover='document.getElementById("defline").innerHTML="{{line.defline|js_string_escape}}"'
409 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"' 406 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"'
410 title="{{line.defline}}"> 407 title="{{line.defline}}">
411 <div class="matchrow graphicrow"> 408 <div class="matchrow graphicrow">
412 {% for match in line.colors %} 409 {% for match in line.colors %}
413 <div class="matchitem graphicitem" 410 <div class="matchitem graphicitem"
414 style="background-color: {{match[1]}}; width: {{match[0]}}%"></div> 411 style="background-color: {{match[1]}}; width: {{match[0]}}%"></div>
415 {% endfor %} 412 {% endfor %}
416 </div> 413 </div>
417 </a> 414 </a>
418 415
419 {% endfor %} 416 {% endfor %}
420 </div> 417 </div>
429 426
430 <div class=grey><div class=white> 427 <div class=grey><div class=white>
431 <h4 class=darkHeader>Sequences producing significant alignments:</h4> 428 <h4 class=darkHeader>Sequences producing significant alignments:</h4>
432 429
433 <table class=descriptiontable> 430 <table class=descriptiontable>
434 <col/><col/><col/><col/><col/><col/><col/> 431 <col/><col/><col/><col/><col/><col/><col/>
435 <tr> 432 <tr>
436 <th>Description</th> 433 <th>Description</th>
437 <th>Max score</th> 434 <th>Max score</th>
438 <th>Total score</th> 435 <th>Total score</th>
439 <th>Query cover</th> 436 <th>Query cover</th>
442 <th>Accession</th> 439 <th>Accession</th>
443 </tr> 440 </tr>
444 {% for hit in hit_info %} 441 {% for hit in hit_info %}
445 <tr> 442 <tr>
446 <td><div><a href="#hit{{hit.link_id}}" 443 <td><div><a href="#hit{{hit.link_id}}"
447 title="{{hit.title}}" 444 title="{{hit.title}}"
448 name=description{{hit.link_id}}> 445 id="description{{hit.link_id}}">
449 {{hit.title}} 446 {{hit.title}}
450 </a></div></td> 447 </a></div></td>
451 <td>{{hit.maxscore}}</td> 448 <td>{{hit.maxscore}}</td>
452 <td>{{hit.totalscore}}</td> 449 <td>{{hit.totalscore}}</td>
453 <td>{{hit.cover}}</td> 450 <td>{{hit.cover}}</td>
454 <td>{{hit.e_value}}</td> 451 <td>{{hit.e_value}}</td>
455 <td>{{hit.ident}}</td> 452 <td>{{hit.ident}}</td>
462 </div> 459 </div>
463 460
464 461
465 462
466 <div id=alignments> 463 <div id=alignments>
467 <h2>Alignments</h2> 464 <h2>Alignments</h2>
468 465
469 <div class=grey><div class=white> 466 <div class=grey><div class=white>
470 {% for hit in hits %} 467 {% for hit in hits %}
471 <div class=alignment id=hit{{hit.Hit_num}}> 468 <div class=alignment id=hit{{hit.Hit_num}}>
472 469
473 <div class=linkheader> 470 <div class=linkheader>
474 <div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div> 471 <div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div>
475 <a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a> 472 <a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a>
476 <a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a> 473 <a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a>
477 </div> 474 </div>
478 475
479 <div class=title> 476 <div class=title>
480 <p class=hittitle>{{hit|firsttitle}}</p> 477 <p class=hittitle>{{hit|firsttitle}}</p>
481 <p class=titleinfo> 478 <p class=titleinfo>
482 <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a> 479 <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a>
483 <span class=b>Length:</span> {{hit.Hit_len}} 480 <span class=b>Length:</span> {{hit.Hit_len}}
484 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} 481 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}}
485 </p> 482 </p>
486 </div> 483 </div>
487 484
488 {% if hit|othertitles|length %} 485 {% if hit|othertitles|length %}
489 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''> 486 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num|js_string_escape}}'); return false;" href=''>
490 See {{hit|othertitles|length}} more title(s) 487 See {{hit|othertitles|length}} more title(s)
491 </a> 488 </a>
492 489
493 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none"> 490 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none">
494 {% for title in hit|othertitles %} 491 {% for title in hit|othertitles %}
495 <div class=title> 492 <div class=title>
496 <p class=hittitle>{{title.title}}</p> 493 <p class=hittitle>{{title.title}}</p>
497 <p class=titleinfo> 494 <p class=titleinfo>
498 <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a> 495 <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a>
499 </p> 496 </p>
500 </div> 497 </div>
501 {% endfor %} 498 {% endfor %}
502 </div> 499 </div>
503 {% endif %} 500 {% endif %}
504 501
505 {% for hsp in hit.Hit_hsps.Hsp %} 502 {% for hsp in hit.Hit_hsps.Hsp %}
506 <div class=hotspot> 503 <div class=hotspot>
507 <p class=range> 504 <p class=range>
508 <span class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</span> 505 <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> 506 <a class=range href="{{genelink(hit|hitid, 'genbank', hsp)}}">GenBank</a>
510 <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a> 507 <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a>
511 </p> 508 </p>
512 509
513 <table class=hotspotstable> 510 <table class=hotspotstable>
514 <tr> 511 <tr>
515 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> 512 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th>
516 </tr> 513 </tr>
517 <tr> 514 <tr>
518 <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td> 515 <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td>
519 <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td> 516 <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td>
520 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{ 517 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{
521 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td> 518 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td>
522 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len 519 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len
523 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td> 520 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td>
524 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td> 521 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td>
525 </tr> 522 </tr>
526 </table> 523 </table>
527 524
528 <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre> 525 <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre>
529 </div> 526 </div>
530 {% endfor %} 527 {% endfor %}
531 528
532 </div> 529 </div>
533 530
534 {% endfor %} 531 {% endfor %}
535 </div></div> 532 </div></div>
536 </div> 533 </div>
537 534
538 {% endif %} 535 {% endif %}
539 </div> 536 </div>
540 </body> 537 </body>
541 </html> 538 </html>
542 539
540 {#
541 Local Variables:
542 tab-width: 2
543 indent-tabs-mode: nil
544 End:
545 #}