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>&nbsp;</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 %}