Mercurial > repos > jankanis > blast2html
diff blast2html.html.jinja @ 22:efce16c98650
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/blast2html.html.jinja Thu May 15 10:48:09 2014 +0200 @@ -0,0 +1,600 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <meta name=generator content="blast2html; see ..."> + + <title>Blast output</title> + + <style> + body { + color: #333333; + font-family: Arial,Sans-Serif; + } + + :link { + color: #336699; + } + + .right { + float: right; + } + + #content { + margin: 0 2em; + padding: 0.5em; + border: 1px solid #888888; + background-color: #d3dff5; + } + + h1, h2, h3, h4, h5, h6 { + color: #2A6979; + font-family: arial,verdana,sans-serif; + letter-spacing: -1px; + margin: 1.2em 0 0.3em; + } + + h1 { + border-bottom: 1px solid #CCCCCC; + font-size: 150%; + padding-bottom: 0.1em; + } + + h2 { + font-size: 120%; + font-weight: bold; + } + + h4.darkHeader { + color: #4D4D4D; + letter-spacing: 0; + font-weight: bold; + } + + #nodata { + font-weight: bold; + } + + .index { + margin-bottom: 3em; + } + .index div.indexentry { + margin: 1.2em 1.6em; + font-weight: bold; + font-size: 100%; + } + + .headerdata { + font-size: 90%; + } + .headerdata .param { + font-weight: bold; + text-align: right; + padding: 0 1em; + } + + .grey { + background-color: #eeeeee; + border: 1px solid #cccccc; + padding: 1em; + } + + .white { + background-color: white; + border: 1px solid #cccccc; + padding: 1.5em 2%; + } + + .graphicrow { + clear: left; + width: 100%; + } + + .graphicitem { + float: left; + } + + + + .graphics .grey { + text-align: center; + } + + .graphic { + background-color: white; + border: 2px solid black; + padding: 1.5em; + margin: auto; + } + + .centered, .defline, div.legend, div.tablewrapper { + margin-left: auto; + margin-right: auto; + } + + .defline { + background-color: white; + border: 1px solid black; + margin: .5em auto; + padding-left: .2em; + padding-right: .2em; + max-width: 50em; + text-align: left; + height: 2.8em; + overflow-y: hidden; + } + + div.legend { + max-width: 40em; + } + div.legend div { + width: 100%; + color: white; + font-weight: bold; + border-spacing: 0; + } + div.legend div .graphicitem { + width: 20%; + padding: 0; + margin: 0; + border: none; + } + + div.tablewrapper { + width: 50%; + min-width: 60em; + } + + /* For small widths we give the graphic 100% */ + @media (max-width: 72.5em) { + div.tablewrapper { + width: 100%; + min-width: 0px; + } + } + + .scale { + width: 100%; + margin: .5em 0; + font-weight: bold; + } + .scale div { + color: red; + text-align: left; + } + .scale .graphicrow { + margin: .5em 0 .5em 0; + color: white; + } + .scale .graphicitem { + position: relative; + } + .scale .graphicitem div { + margin: 0 1px; + padding: 0 2px; + text-align: right; + background-color: red; + color: white; + } + .scale .graphicitem:first-child div { + margin-left: 0px; + } + .scale .graphicitem:last-child div { + margin-right: 0px; + } + .scale .graphicitem .lastlabel { + position: absolute; + top: 0px; + left: 100%; + background-color: transparent; + color: red; + } + + a.matchresult { + display: block; + margin: 0; + padding: 0; + } + div.matchrow { + margin-top: 4px; + } + div.matchrow, div.matchitem { + height: 4px; + } + + + table.descriptiontable { + font-size: 85%; + border: 1px solid #97b0c8; + border-spacing: 0; + color: #222222; + line-height: 1.3em; + background-color: white; + } + table.descriptiontable col:first-child { + width: 100%; + } + table.descriptiontable tr:hover { + background-color: #D5DEE3; + } + table.descriptiontable th { + color: #14376C; + font-weight: normal; + background-color: #F0F0F0; + background: linear-gradient(#FFFFFF, #F0F0F0); + border-bottom: 1px solid #D4DFE9; + border-right: 1px solid #CFCFCF; + border-left: 0px solid black; + border-top: 0px solid black; + } + table.descriptiontable td { + overflow: hidden; + text-align: center; + padding: .4em .8em; + } + table.descriptiontable td div { + width: 1em; + overflow: visible; + white-space: nowrap; + text-align: left; + } + + + + .alignments .white { + padding: 1.5em 1em; + } + + .alignment { + border-top: 1px solid black; + padding-left: 1em; + padding-right: 1em; + } + + div.linkheader { + padding-top: .2em; + font-size: 85%; + color: #14376C; + } + div.linkheader a.linkheader { + margin-right: 1em; + } + div.linkheader .right a { + text-decoration: none; + } + + .title .hittitle { + color: #222222; + margin-bottom: .3em; + } + .title .titleinfo { + font-size: 80%; + margin-top: 0; + margin-bottom: .3em; + } + .title .titleinfo .b { + color: #606060; + font-weight: bold; + font-size: 90%; + } + + .moretitles { + margin: 1.2em; + } + .moretitles .titleinfo { + margin: 0; + padding: 0; + } + .moretitles .hittitle { + margin: .4em 0 .2em 0; + padding: 0; + } + + a.showmoretitles { + font-size: 75%; + color: #336699; + font-weight: bold; + margin-top: 0; + } + a.showmoretitles:hover { + } + + .hotspot { + color: #606060; + font-family: verdana, arial, sans-serif; + margin-bottom: 2.5em; + } + + .hotspot p.range { + font-size: 70%; + margin-top: 0; + margin-top: 1em; + margin-bottom: .2em; + } + .hotspot p.range span.range { + font-weight: bold; + } + .hotspot p.range a.range { + margin-left: .5em; + } + + table.hotspotstable { + border-top: 1px solid; + border-bottom: 1px solid; + text-align: left; + border-collapse: collapse; + } + table.hotspotstable th, table.hotspotstable td { + padding: .1em 1em; + } + table.hotspotstable th { + font-size: 70%; + } + table.hotspotstable td { + min-width: 7em; + color: #222222; + font-size: 80%; + } + + pre.alignmentgraphic { + color: #222222; + } + + + </style> + + <script type="text/javascript"> + function toggle_visibility(id) { + var e = document.getElementById(id); + if(e.style.display != 'block') + e.style.display = 'block'; + else + e.style.display = 'none'; + } + </script> + + </head> + + + <body> + <div id=content> + + {% if not blast.BlastOutput_iterations.findall('Iteration') %} + <section class=nodata> + <h1>No data</h1> + <div class=grey> + No matches + </div> + </section> + + {% else %} + + {% if blast.BlastOutput_iterations.findall('Iteration') | length > 1 %} + <section class=index> + <h1>Queries</h1> + + {% for result in blast.BlastOutput_iterations.Iteration %} + <div class=indexentry><a href="#match{{result['Iteration_iter-num']}}"> + {% set hits = result|hits %} + {{result['Iteration_query-ID']}}: {{result['Iteration_query-def']}} + ({{result|len}} letters, {{hits|length}} hits) + </a></div> + {% endfor %} + + </section> + {% endif %} + + {% for result in blast.BlastOutput_iterations.Iteration %} + + <section class=match id=match{{result['Iteration_iter-num']}}> + + <h1>Nucleotide Sequence ({{result|len}} letters)</h1> + + <section class=header> + + <table class=headerdata> + {% for param, value in params %} + <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr> + {% endfor %} + </table> + + </section> + + {% set hits = result|hits %} + {% if not hits %} + <section> + <h2>No Hits</h2> + <div class=grey> + This query did not match anywhere + </div> + </section> + {% else %} + + <section class=graphics> + <h2>Graphic Summary</h2> + + <div class=grey> + <h3 class=centered>Distribution of {{result|length}} Blast Hits on the Query Sequence</h3> + + <div class=defline id=defline{{result['Iteration_iter-num']}}> + Mouse-over to show defline and scores, click to show alignments + </div> + + <div class=graphic> + <h4 class=darkHeader>Color key for alignment scores</h4> + <div class=legend><div class=graphicrow> + <div class=graphicitem style="background-color: {{colors[0]}}"><40</div> + <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div> + <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div> + <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div> + <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div> + </div></div> + <div style="clear: left"></div> + + <div class=tablewrapper> + + <div class=scale> + <div>query:</div> + <div class=graphicrow> + <div> + {% for s in result|queryscale %} + <div class=graphicitem style="width: {{s.width}}%"> + {% if s.width > 3.0 %} + <div>{{s.label}}</div> + {% else %} + <div> </div> + <div class=lastlabel>{{s.label}}</div> + {% endif %} + </div> + {% endfor %} + </div> + </div> + <div style="clear: left"></div> + </div> + + {% for line in result|match_colors %} + <a class=matchresult + href="{{line.link}}" + onmouseover='document.getElementById("defline{{result['Iteration_iter-num']}}").innerHTML="{{line.defline|js_string_escape}}"' + onmouseout='document.getElementById("defline{{result['Iteration_iter-num']}}").innerHTML="Mouse-over to show defline and scores, click to show alignments"' + title="{{line.defline}}"> + <div class="matchrow graphicrow"> + {% for hit in line.colors %} + <div class="matchitem graphicitem" + style="background-color: {{hit[1]}}; width: {{hit[0]}}%"></div> + {% endfor %} + </div> + </a> + + {% endfor %} + </div> + </div> + </div> + </section> + + + + <section class=descriptions> + <h2>Descriptions</h2> + + <div class=grey><div class=white> + <h4 class=darkHeader>Sequences producing significant alignments:</h4> + + <table class=descriptiontable> + <col/><col/><col/><col/><col/><col/><col/> + <tr> + <th>Description</th> + <th>Max score</th> + <th>Total score</th> + <th>Query cover</th> + <th>E value</th> + <th>Ident</th> + <th>Accession</th> + </tr> + {% for hit in result|hit_info %} + <tr> + <td><div><a href="#hit{{hit.link_id}}" + title="{{hit.title}}" + id="description{{hit.link_id}}"> + {{hit.title}} + </a></div></td> + <td>{{hit.maxscore}}</td> + <td>{{hit.totalscore}}</td> + <td>{{hit.cover}}</td> + <td>{{hit.e_value}}</td> + <td>{{hit.ident}}</td> + <td><a href="{{genelink(hit.hit|hitid)}}">{{hit.accession}}</a></td> + </tr> + {% endfor %} + </table> + + </div></div> + </section> + + + + <section class=alignments> + <h2>Alignments</h2> + + <div class=grey><div class=white> + {% for hit in hits %} + <div class=alignment id=hit{{hit.Hit_num}}> + + <div class=linkheader> + <div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div> + <a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a> + <a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a> + </div> + + <div class=title> + <p class=hittitle>{{hit|firsttitle}}</p> + <p class=titleinfo> + <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a> + <span class=b>Length:</span> {{hit.Hit_len}} + <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} + </p> + </div> + + {% if hit|othertitles|length %} + <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num|js_string_escape}}'); return false;" href=''> + See {{hit|othertitles|length}} more title(s) + </a> + + <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none"> + {% for title in hit|othertitles %} + <div class=title> + <p class=hittitle>{{title.title}}</p> + <p class=titleinfo> + <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a> + </p> + </div> + {% endfor %} + </div> + {% endif %} + + {% for hsp in hit.Hit_hsps.Hsp %} + <div class=hotspot> + <p class=range> + <span class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</span> + <a class=range href="{{genelink(hit|hitid, 'genbank', hsp)}}">GenBank</a> + <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a> + </p> + + <table class=hotspotstable> + <tr> + <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> + </tr> + <tr> + <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td> + <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td> + <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{ + (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td> + <td>{{ hsp.Hsp_gaps }}/{{ hsp|len + }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td> + <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td> + </tr> + </table> + + <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre> + </div> + {% endfor %} + + </div> + + {% endfor %} + </div></div> + </section> + {% endif %} + + {% endfor %} + {% endif %} + </div> + </body> +</html> + +{# +Local Variables: +tab-width: 2 +indent-tabs-mode: nil +End: +#}