Mercurial > repos > jankanis > blast2html
comparison blast_html.html.jinja @ 20:53cd304c5f26
Add index for multiple results; fix layout of query ruler for edge case
The query ruler did not layout nicely if the last segment was too short to contain the text. For very short last segments the text is now
displayed after the ruler.
author | Jan Kanis <jan.code@jankanis.nl> |
---|---|
date | Wed, 14 May 2014 16:20:29 +0200 |
parents | 67ddcb807b7d |
children | 9596fea636bb |
comparison
equal
deleted
inserted
replaced
19:67ddcb807b7d | 20:53cd304c5f26 |
---|---|
52 } | 52 } |
53 | 53 |
54 #nodata { | 54 #nodata { |
55 font-weight: bold; | 55 font-weight: bold; |
56 } | 56 } |
57 | |
58 .index div.indexentry { | |
59 margin: .6em; | |
60 font-weight: bold; | |
61 font-size: 100%; | |
62 } | |
57 | 63 |
58 .headerdata { | 64 .headerdata { |
59 font-size: 90%; | 65 font-size: 90%; |
60 } | 66 } |
61 .headerdata .param { | 67 .headerdata .param { |
92 } | 98 } |
93 | 99 |
94 .graphic { | 100 .graphic { |
95 background-color: white; | 101 background-color: white; |
96 border: 2px solid black; | 102 border: 2px solid black; |
97 padding: .5em 1.5em; | 103 padding: 1.5em; |
98 margin: auto; | 104 margin: auto; |
99 } | 105 } |
100 | 106 |
101 .centered, .defline, div.legend, div.tablewrapper { | 107 .centered, .defline, div.legend, div.tablewrapper { |
102 margin-left: auto; | 108 margin-left: auto; |
155 } | 161 } |
156 .scale .graphicrow { | 162 .scale .graphicrow { |
157 margin: .5em 0 .5em 0; | 163 margin: .5em 0 .5em 0; |
158 color: white; | 164 color: white; |
159 } | 165 } |
166 .scale .graphicitem { | |
167 position: relative; | |
168 } | |
160 .scale .graphicitem div { | 169 .scale .graphicitem div { |
161 margin: 0 1px; | 170 margin: 0 1px; |
162 padding: 0 2px; | 171 padding: 0 2px; |
163 text-align: right; | 172 text-align: right; |
164 background-color: red; | 173 background-color: red; |
167 .scale .graphicitem:first-child div { | 176 .scale .graphicitem:first-child div { |
168 margin-left: 0px; | 177 margin-left: 0px; |
169 } | 178 } |
170 .scale .graphicitem:last-child div { | 179 .scale .graphicitem:last-child div { |
171 margin-right: 0px; | 180 margin-right: 0px; |
181 } | |
182 .scale .graphicitem .lastlabel { | |
183 position: absolute; | |
184 top: 0px; | |
185 left: 100%; | |
186 background-color: transparent; | |
187 color: red; | |
172 } | 188 } |
173 | 189 |
174 a.matchresult { | 190 a.matchresult { |
175 display: block; | 191 display: block; |
176 margin: 0; | 192 margin: 0; |
347 No matches | 363 No matches |
348 </div> | 364 </div> |
349 </section> | 365 </section> |
350 | 366 |
351 {% else %} | 367 {% else %} |
368 | |
369 {% if blast.BlastOutput_iterations.findall('Iteration') | length > 1 %} | |
370 <section class=index> | |
371 <h1>Queries</h1> | |
372 | |
373 {% for result in blast.BlastOutput_iterations.Iteration %} | |
374 <div class=indexentry><a href="#match{{result['Iteration_iter-num']}}"> | |
375 {% set hits = result|hits %} | |
376 {{result['Iteration_query-ID']}}: {{result['Iteration_query-def']}} | |
377 ({{result|len}} letters, {{hits|length}} hits) | |
378 </a></div> | |
379 {% endfor %} | |
380 | |
381 </section> | |
382 {% endif %} | |
383 | |
352 {% for result in blast.BlastOutput_iterations.Iteration %} | 384 {% for result in blast.BlastOutput_iterations.Iteration %} |
353 | 385 |
354 <section class=match> | 386 <section class=match id=match{{result['Iteration_iter-num']}}> |
355 | 387 |
356 <h1>Nucleotide Sequence ({{result|len}} letters)</h1> | 388 <h1>Nucleotide Sequence ({{result|len}} letters)</h1> |
357 | 389 |
358 <section class=header> | 390 <section class=header> |
359 | 391 |
399 <div class=tablewrapper> | 431 <div class=tablewrapper> |
400 | 432 |
401 <div class=scale> | 433 <div class=scale> |
402 <div>query:</div> | 434 <div>query:</div> |
403 <div class=graphicrow> | 435 <div class=graphicrow> |
404 {% for s in result|queryscale %} | 436 <div> |
405 <div class=graphicitem style="width: {{s.width}}%"> | 437 {% for s in result|queryscale %} |
406 <div>{{s.label}}</div> | 438 <div class=graphicitem style="width: {{s.width}}%"> |
439 {% if s.width > 3.0 %} | |
440 <div>{{s.label}}</div> | |
441 {% else %} | |
442 <div> </div> | |
443 <div class=lastlabel>{{s.label}}</div> | |
444 {% endif %} | |
445 </div> | |
446 {% endfor %} | |
407 </div> | 447 </div> |
408 {% endfor %} | |
409 </div> | 448 </div> |
410 <div style="clear: left"></div> | 449 <div style="clear: left"></div> |
411 </div> | 450 </div> |
412 | 451 |
413 {% for line in result|match_colors %} | 452 {% for line in result|match_colors %} |