| Previous changeset 6:d20ce91e1297 (2014-05-07) Next changeset 8:beb83da5a6b7 (2014-05-08) |
|
Commit message:
intermediate commit before converting some tables to divs |
|
modified:
visualise.html.jinja visualise.py |
| b |
| diff -r d20ce91e1297 -r 9e7927673089 visualise.html.jinja --- a/visualise.html.jinja Wed May 07 19:02:20 2014 +0200 +++ b/visualise.html.jinja Thu May 08 16:51:52 2014 +0200 |
| [ |
| @@ -11,7 +11,6 @@ font-family: Verdana,Arial,Sans-Serif; } - #content { margin: 0 2em; padding: 0.5em; @@ -37,7 +36,7 @@ font-weight: bold; } - h4.graphicHeader { + h4.blackHeader { color: black; letter-spacing: 0; font-style: bold; @@ -52,11 +51,16 @@ padding: 0 1em; } - .graphicInfo { + .grey { background-color: #eeeeee; border: 1px solid #cccccc; padding: 1em; - text-align: center; + } + + .white { + background-color: white; + border: 1px solid #cccccc; + padding: 1em; } .graphic { @@ -67,18 +71,36 @@ margin: auto; } - .centered { + #graphics .grey { + text-align: center; + } + + .centered, #defline, div.legendwrapper, table.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.legendwrapper { + max-width: 40em; + } + table.legend { color: white; font-weight: bold; - align: center; - margin: 0 auto; - width: 40em; + width: 100%; border-spacing: 0; } table.legend td { @@ -88,70 +110,173 @@ border: none; } - table.matchresult { - height: 5px; - width: 40em; - align: center; - margin: 4px auto 0 auto; + 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; } - table.matchresult tr { - height: 5px; + .scale table { + width: 100%; + height: 1.3em; + margin-top: 0; + color: white; + table-layout: fixed; + border-collapse: collapse; + } + .scale td { + margin 0; + padding 0; } - table.matchresult td { - height: 5px; + .scale td div { + margin: 1px 0; + text-align: right; + background-color: red; + color: white; + } + + table.matchresult { + width: 100%; + margin-top: 3px; + margin-bottom: 0; + border-collapse: collapse; + } + table.matchresult, table.matchresult tr, table.matchresult td, a.matchlink { + height: 3px; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; } a.matchlink { display: block; - heigth: 5px; + } + + 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 ({{blast["BlastOutput_query-len"]}} letters)</h1> + <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> - + <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> + <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=graphicInfo> - <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3> - <div class=graphic> - <h4 class=graphicHeader>Color key for alignment scores</h4> - <table class=legend><tr> - <td style="background-color: {{colors[0]}}"><40</td> - <td style="background-color: {{colors[1]}}">40-50</td> - <td style="background-color: {{colors[2]}}">50-80</td> - <td style="background-color: {{colors[3]}}">80-200</td> - <td style="background-color: {{colors[4]}}">>=200</td> - </tr></table> + <div class=graphic> + <h4 class=blackHeader>Color key for alignment scores</h4> + <div class=legendwrapper><table class=legend><tr> + <td style="background-color: {{colors[0]}}"><40</td> + <td style="background-color: {{colors[1]}}">40-50</td> + <td style="background-color: {{colors[2]}}">50-80</td> + <td style="background-color: {{colors[3]}}">80-200</td> + <td style="background-color: {{colors[4]}}">200≤</td> + </tr></table></div> + + <div class=tablewrapper> - {% for line in match_colors %} - <a href={{line.link}}> - <table class=matchresult><tr> - {% for match in line.colors %} - <td style="background-color: {{match[1]}}; width: {{match[0]}}px" /> - {% endfor %} - </tr></table> - </a> - {% endfor %} - - <p>hoi</p> + <div class=scale> + <div>query:</div> + <table><tr> + {% for s in queryscale %} + <td width={{s.width|safe}}%><div>{{s.label|safe}}</div></td> + {% endfor %} + </tr></table> + </div> + + {% for line in match_colors %} + <a 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}}"> + <table class=matchresult><tr> + {% for match in line.colors %} + <td width={{match[0]}}% style="background-color: {{match[1]}}" /> + {% endfor %} + </tr></table> + </a> + + {% endfor %} + </div> + </div> + </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> |
| b |
| diff -r d20ce91e1297 -r 9e7927673089 visualise.py --- a/visualise.py Wed May 07 19:02:20 2014 +0200 +++ b/visualise.py Thu May 08 16:51:52 2014 +0200 |
| [ |
| @@ -4,6 +4,7 @@ # License: GPL version 3 or higher import sys +import math import warnings from itertools import repeat from lxml import objectify @@ -26,19 +27,24 @@ blast = objectify.parse('blast xml example1.xml').getroot() loader = jinja2.FileSystemLoader(searchpath='.') -environment = jinja2.Environment(loader=loader) +environment = jinja2.Environment(loader=loader, lstrip_blocks=True, trim_blocks=True, autoescape=True) environment.filters['color'] = lambda length: match_colors[color_idx(length)] +query_length = int(blast["BlastOutput_query-len"]) + +hits = blast.BlastOutput_iterations.Iteration.Iteration_hits.Hit +# sort hits by longest hotspot first +ordered_hits = sorted(hits, + key=lambda h: max(hsp['Hsp_align-len'] for hsp in h.Hit_hsps.Hsp), + reverse=True) + def match_colors(): """ An iterator that yields lists of length-color pairs. """ + + percent_multiplier = 100 / query_length - hits = blast.BlastOutput_iterations.Iteration.Iteration_hits.Hit - query_length = blast["BlastOutput_query-len"] - # sort hits by longest hotspot first - hits = sorted(hits, key=lambda h: max(hsp['Hsp_align-len'] for hsp in h.Hit_hsps.Hsp), reverse=True) - for hit in hits: # sort hotspots from short to long, so we can overwrite index colors of # short matches with those of long ones. @@ -46,24 +52,58 @@ table = bytearray([255]) * query_length for hsp in hotspots: frm = hsp['Hsp_query-from'] - 1 - to = hsp['Hsp_query-to'] - 1 + to = int(hsp['Hsp_query-to']) table[frm:to] = repeat(color_idx(hsp['Hsp_align-len']), to - frm) matches = [] last = table[0] count = 0 - for i in range(int(query_length)): + for i in range(query_length): if table[i] == last: count += 1 continue - matches.append((count, colors[last] if last != 255 else 'none')) + matches.append((count * percent_multiplier, colors[last] if last != 255 else 'none')) last = table[i] count = 1 - matches.append((count, colors[last] if last != 255 else 'none')) + matches.append((count * percent_multiplier, colors[last] if last != 255 else 'none')) + + yield dict(colors=matches, link="#hit"+hit.Hit_num.text, defline=hit.Hit_def) + - yield dict(colors=matches, link="#hit"+hit.Hit_num.text) +def queryscale(): + max_labels = 10 + skip = math.ceil(query_length / max_labels) + percent_multiplier = 100 / query_length + for i in range(1, query_length+1): + if i % skip == 0: + yield dict(label = i, width = skip * percent_multiplier) + if query_length % skip != 0: + yield dict(label = query_length, width = (query_length % skip) * percent_multiplier) +def hit_info(): + + for hit in ordered_hits: + hsps = hit.Hit_hsps.Hsp + + cover = [False] * query_length + for hsp in hsps: + cover[hsp['Hsp_query-from']-1 : int(hsp['Hsp_query-to'])] = repeat(True, int(hsp['Hsp_align-len'])) + cover_count = cover.count(True) + + def hsp_val(path): + return (hsp[path] for hsp in hsps) + + yield dict(description = hit.Hit_def, + maxscore = max(hsp_val('Hsp_bit-score')), + totalscore = sum(hsp_val('Hsp_bit-score')), + cover = "{:.0%}".format(cover_count / query_length), + e_value = min(hsp_val('Hsp_evalue')), + # FIXME: is this the correct formula vv? + ident = "{:.0%}".format(min(hsp.Hsp_identity / hsp['Hsp_align-len'] for hsp in hsps)), + accession = hit.Hit_accession) + + def main(): template = environment.get_template('visualise.html.jinja') @@ -78,9 +118,12 @@ warnings.warn("Multiple 'Iteration' elements found, showing only the first") sys.stdout.write(template.render(blast=blast, - hits=blast.BlastOutput_iterations.Iteration.Iteration_hits.Hit, + length=query_length, + #hits=blast.BlastOutput_iterations.Iteration.Iteration_hits.Hit, colors=colors, match_colors=match_colors(), + queryscale=queryscale(), + hit_info=hit_info(), params=params)) main() |