Mercurial > repos > jankanis > blast2html
view visualise.html.jinja @ 8:beb83da5a6b7
div-ified graphics
author | Jan Kanis <jan.code@jankanis.nl> |
---|---|
date | Thu, 08 May 2014 17:33:41 +0200 |
parents | 9e7927673089 |
children | bbdc8fb0de2b |
line wrap: on
line source
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blast output</title> <style> body { color: #33333; font-family: Verdana,Arial,Sans-Serif; } #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.blackHeader { color: black; letter-spacing: 0; font-style: bold; } .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: 1em; } .graphicrow { clear: left; width: 100%; } .graphicitem { float: left; } .graphic { background-color: white; border: 2px solid black; padding: .5em; align: center; margin: auto; } #graphics .grey { text-align: center; } .centered, #defline, div.legend, div.tablewrapper { align: center; 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: 4em; 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: 70em) { 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 div { margin: 0 1px; padding: 0 2px; text-align: right; background-color: red; color: white; } a.matchresult { display: block; margin: 0; padding: 0; } div.matchrow { margin-top: 4px; } div.matchrow, div.matchitem { height: 4px; } table.descriptiontable { width: 100%; } table.descriptiontable td { overflow: hidden; white-space: nowrap; } table.descriptiontable td div { display: inline-block; overflow: hidden; max-height: 1.4em; white-space: nowrap; } </style> </head> <body> <div id=content> <h1>Nucleotide Sequence ({{length}} letters)</h1> <div id=header> <table class=headerdata> {% for param, value in params %} <tr><td class=param>{{param}}</td><td>{{value}}</td></tr> {% endfor %} </table> </div> <div id=graphics> <h2>Graphic Summary</h2> <div class=grey> <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3> <div id=defline>Mouse-over to show defline and scores, click to show alignments</div> <div class=graphic> <h4 class=blackHeader>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> {% for s in queryscale %} <div class=graphicitem style="width: {{s.width|safe}}%"> <div style="{{'margin-left: 0px' if loop.first else 'margin-right: 0px' if loop.last}}">{{s.label|safe}}</div> </div> {% endfor %} </div> <div style="clear: left"></div> </div> {% for line in match_colors %} <a class=matchresult href="{{line.link}}" onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"' onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"' title="{{line.defline}}"> <div class="matchrow graphicrow"> {% for match in line.colors %} <div class="matchitem graphicitem" style="background-color: {{match[1]}}; width: {{match[0]}}%"></div> {% endfor %} </div> </a> {% endfor %} </div> </div> </div> </div> <div id=descriptions> <h2>Descriptions</h2> <div class=grey><div class=white> <h4 class=blackHeader>Sequences producing significant alignments:</h4> <table class=descriptiontable> <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 hit_info %} <tr> <td><div>{{hit.description}}</div></td> <td>{{hit.maxscore}}</td> <td>{{hit.totalscore}}</td> <td>{{hit.cover}}</td> <td>{{hit.e_value}}</td> <td>{{hit.ident}}</td> <td>{{hit.accession}}</td> </tr> {% endfor %} </table> </div></div> </div> </div> </body> </html>