Mercurial > repos > jankanis > blast2html

comparison visualise.html.jinja @ 11:7660519f2dc9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
proper layout for alignments, added some links
author Jan Kanis <jan.code@jankanis.nl>
date Mon, 12 May 2014 13:55:04 +0200
parents 2fbdf2eb27b4
children a459c754cdb5
comparison
equal deleted inserted replaced
10:2fbdf2eb27b4 11:7660519f2dc9
6 <title>Blast output</title> 6 <title>Blast output</title>
7 7
8 <style> 8 <style>
9 body { 9 body {
10 color: #33333; 10 color: #33333;
11 font-family: Verdana,Arial,Sans-Serif; 11 font-family: Arial,Sans-Serif;
12 } 12 }
13 13
14 #content { 14 #content {
15 margin: 0 2em; 15 margin: 0 2em;
16 padding: 0.5em; 16 padding: 0.5em;
34 h2 { 34 h2 {
35 font-size: 120%; 35 font-size: 120%;
36 font-weight: bold; 36 font-weight: bold;
37 } 37 }
38 38
39 h4.blackHeader { 39 h4.darkHeader {
40 color: black; 40 color: #4D4D4D;
41 letter-spacing: 0; 41 letter-spacing: 0;
42 font-style: bold; 42 font-weight: bold;
43 } 43 }
44 44
45 #nodata {
46 font-weight: bold;
47 }
48
45 .headerdata { 49 .headerdata {
46 font-size: 90%; 50 font-size: 90%;
47 } 51 }
48 .headerdata .param { 52 .headerdata .param {
49 font-weight: bold; 53 font-weight: bold;
186 } 190 }
187 table.descriptiontable tr:hover { 191 table.descriptiontable tr:hover {
188 background-color: #D5DEE3; 192 background-color: #D5DEE3;
189 } 193 }
190 table.descriptiontable th { 194 table.descriptiontable th {
195 color: #14376C;
196 font-weight: normal;
191 background-color: #F0F0F0; 197 background-color: #F0F0F0;
192 background: linear-gradient(#FFFFFF, #F0F0F0); 198 background: linear-gradient(#FFFFFF, #F0F0F0);
193 border-bottom: 1px solid #D4DFE9; 199 border-bottom: 1px solid #D4DFE9;
194 border-right: 1px solid #CFCFCF; 200 border-right: 1px solid #CFCFCF;
195 border-left: 0px solid black; 201 border-left: 0px solid black;
204 width: 1em; 210 width: 1em;
205 overflow: visible; 211 overflow: visible;
206 white-space: nowrap; 212 white-space: nowrap;
207 text-align: left; 213 text-align: left;
208 } 214 }
209 215 table.descriptiontable a:link {
216 color: #336699;
217 }
218
219 #alignments .white {
220 padding: 1.5em 1em;
221 }
222
223 .alignment {
224 border-top: 1px solid black;
225 padding-left: 1em;
226 padding-right: 1em;
227 }
228
229 div.linkheader {
230 padding-top: .2em;
231 text-align: right;
232 font-size: 85%;
233 color: #14376C;
234 }
235 div.linkheader a {
236 color: #14376C;
237 text-decoration: none;
238 }
239
240 .title .hittitle {
241 color: #22222;
242 margin-bottom: .3em;
243 }
244 .title .titleinfo {
245 font-size: 80%;
246 margin-top: 0;
247 }
248 .title .titleinfo .b {
249 color: #606060;
250 font-weight: bold;
251 font-size: 90%;
252 }
253
254 .moretitles {
255 margin: 1.2em;
256 }
257 .moretitles .titleinfo {
258 margin: 0;
259 padding: 0;
260 }
261 .moretitles .hittitle {
262 margin: .2em 0;
263 padding: 0;
264 }
265
266 a.showmoretitles {
267 font-size: 85%;
268 color: #336699;
269 }
270 a.showmoretitles:hover {
271 }
272
273 .hotspot {
274 color: #606060;
275 font-family: verdana, arial, sans-serif;
276 margin-bottom: 2.5em;
277 }
278
279 .hotspot .range {
280 font-size: 70%;
281 margin-top: 0;
282 font-weight: bold;
283 margin-top: 1em;
284 margin-bottom: .2em;
285 }
286
287 table.hotspotstable {
288 border-top: 1px solid;
289 border-bottom: 1px solid;
290 text-align: left;
291 border-collapse: collapse;
292 }
293 table.hotspotstable th, table.hotspotstable td {
294 padding: .1em 1em;
295 }
296 table.hotspotstable th {
297 font-size: 70%;
298 }
299 table.hotspotstable td {
300 min-width: 7em;
301 color: #222222;
302 font-size: 80%;
303 }
304
305 pre.alignmentgraphic {
306 color: #222222;
307 }
308
309
210 </style> 310 </style>
211 311
212 <script type="text/javascript"> 312 <script type="text/javascript">
213 function toggle_visibility(id) { 313 function toggle_visibility(id) {
214 var e = document.getElementById(id); 314 var e = document.getElementById(id);
215 if(e.style.display == 'none') 315 if(e.style.display != 'block')
216 e.style.display = 'block'; 316 e.style.display = 'block';
217 else 317 else
218 e.style.display = 'none'; 318 e.style.display = 'none';
219 } 319 }
220 </script> 320 </script>
221 321
222 </head> 322 </head>
223 323
324
224 <body> 325 <body>
225 <div id=content> 326 <div id=content>
226 <h1>Nucleotide Sequence ({{length}} letters)</h1> 327 <h1>Nucleotide Sequence ({{length}} letters)</h1>
227 328
228 <div id=header> 329 <div id=header>
233 {% endfor %} 334 {% endfor %}
234 </table> 335 </table>
235 336
236 </div> 337 </div>
237 338
339 {% if not (blast.BlastOutput_iterations.find('Iteration') and
340 blast.BlastOutput_iterations.Iteration.Iteration_hits.find('Hit')) %}
341 <div id=nodata>
342 <h2>No Results</h2>
343 <div class=grey>
344 No Matches
345 </div>
346 </div>
347 {% else %}
348
349
350
238 <div id=graphics> 351 <div id=graphics>
239 <h2>Graphic Summary</h2> 352 <h2>Graphic Summary</h2>
240 353
241 <div class=grey> 354 <div class=grey>
242 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3> 355 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3>
243 356
244 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div> 357 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div>
245 358
246 <div class=graphic> 359 <div class=graphic>
247 <h4 class=blackHeader>Color key for alignment scores</h4> 360 <h4 class=darkHeader>Color key for alignment scores</h4>
248 <div class=legend><div class=graphicrow> 361 <div class=legend><div class=graphicrow>
249 <div class=graphicitem style="background-color: {{colors[0]}}">&lt;40</div> 362 <div class=graphicitem style="background-color: {{colors[0]}}">&lt;40</div>
250 <div class=graphicitem style="background-color: {{colors[1]}}">40-50</div> 363 <div class=graphicitem style="background-color: {{colors[1]}}">40&endash;50</div>
251 <div class=graphicitem style="background-color: {{colors[2]}}">50-80</div> 364 <div class=graphicitem style="background-color: {{colors[2]}}">50-80</div>
252 <div class=graphicitem style="background-color: {{colors[3]}}">80-200</div> 365 <div class=graphicitem style="background-color: {{colors[3]}}">80-200</div>
253 <div class=graphicitem style="background-color: {{colors[4]}}">200&le;</div> 366 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div>
254 </div></div> 367 </div></div>
255 <div style="clear: left"></div> 368 <div style="clear: left"></div>
256 369
257 <div class=tablewrapper> 370 <div class=tablewrapper>
258 371
293 406
294 <div id=descriptions> 407 <div id=descriptions>
295 <h2>Descriptions</h2> 408 <h2>Descriptions</h2>
296 409
297 <div class=grey><div class=white> 410 <div class=grey><div class=white>
298 <h4 class=blackHeader>Sequences producing significant alignments:</h4> 411 <h4 class=darkHeader>Sequences producing significant alignments:</h4>
299 412
300 <table class=descriptiontable> 413 <table class=descriptiontable>
301 <col/><col/><col/><col/><col/><col/><col/> 414 <col/><col/><col/><col/><col/><col/><col/>
302 <tr> 415 <tr>
303 <th>Description</th> 416 <th>Description</th>
318 <td>{{hit.maxscore}}</td> 431 <td>{{hit.maxscore}}</td>
319 <td>{{hit.totalscore}}</td> 432 <td>{{hit.totalscore}}</td>
320 <td>{{hit.cover}}</td> 433 <td>{{hit.cover}}</td>
321 <td>{{hit.e_value}}</td> 434 <td>{{hit.e_value}}</td>
322 <td>{{hit.ident}}</td> 435 <td>{{hit.ident}}</td>
323 <td>{{hit.accession}}</td> 436 <td><a href="http://www.ncbi.nlm.nih.gov/nucleotide/{{hit.hit|hitid}}?report=genbank&log$=nucltop&blast_rank=1">{{hit.accession}}</a></td>
324 </tr> 437 </tr>
325 {% endfor %} 438 {% endfor %}
326 </table> 439 </table>
327 440
328 </div></div> 441 </div></div>
329 </div> 442 </div>
330 443
331 444
332 445
333 <div id=alignments> 446 <div id=alignments>
334 <h2>Alignments</h2> 447 <h2>Alignments</h2>
335 448
336 <div class=grey><div class=white> 449 <div class=grey><div class=white>
337 {% for hit in hits %} 450 {% for hit in hits %}
342 </div> 455 </div>
343 456
344 <div class=title> 457 <div class=title>
345 <p class=hittitle>{{hit|firsttitle}}</p> 458 <p class=hittitle>{{hit|firsttitle}}</p>
346 <p class=titleinfo> 459 <p class=titleinfo>
347 <span class=b>Sequence ID:</span> {{hit|seqid}} 460 <span class=b>Sequence ID:</span> <a href="http://www.ncbi.nlm.nih.gov/nucleotide/{{hit|hitid}}?report=genbank&log$=nuclalign&blast_rank=1">{{hit|seqid}}</a>
348 <span class=b>Length:</span> {{hit.Hit_len}} 461 <span class=b>Length:</span> {{hit.Hit_len}}
349 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} 462 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}}
350 </p> 463 </p>
351 </div> 464 </div>
352 465
466 {% if hit|othertitles|length %}
353 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''> 467 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''>
354 Show {{hit|othertitles|length}} more title(s) 468 See {{hit|othertitles|length}} more title(s)
355 </a> 469 </a>
356 470
357 <div class=moretitles id=moretitles{{hit.Hit_num}}> 471 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none">
358 {% for title in hit|othertitles %} 472 {% for title in hit|othertitles %}
359 <div class=title> 473 <div class=title>
360 <p class=hittitle>{{title.title}}</p> 474 <p class=hittitle>{{title.title}}</p>
361 <p class=titleinfo> 475 <p class=titleinfo>
362 <span class=b>Sequence ID:</span> {{title.id}} 476 <span class=b>Sequence ID:</span> {{title.id}}
363 </p> 477 </p>
364 </div> 478 </div>
365 {% endfor %} 479 {% endfor %}
366 </div> 480 </div>
481 {% endif %}
367 482
368 {% for hsp in hit.Hit_hsps.Hsp %} 483 {% for hsp in hit.Hit_hsps.Hsp %}
369 <div class=hotspots> 484 <div class=hotspot>
370 <p>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</p> 485 <p class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}} <a href="http://www.ncbi.nlm.nih.gov/nucleotide/{{hit|hitid}}?report=genbank&log$=nuclalign&blast_rank=1&from={{hsp['Hsp_hit-from']}}&to={{hsp['Hsp_hit-to']}}">GenBank</a></p>
371 486
372 <table class=hotspotstable> 487 <table class=hotspotstable>
373 <tr> 488 <tr>
374 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> 489 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th>
375 </tr> 490 </tr>
379 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{ 494 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{
380 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td> 495 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td>
381 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len 496 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len
382 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td> 497 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td>
383 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td> 498 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td>
384
385 </tr> 499 </tr>
386 </table> 500 </table>
387 501
388 <pre>{{hsp|alignment_pre}}</pre> 502 <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre>
389
390 </div> 503 </div>
391 {% endfor %} 504 {% endfor %}
392 505
393 <p>
394 {{hit.Hit_id}}
395
396 Hit {{hit.Hit_num}}
397 </p>
398 </div> 506 </div>
507
399 {% endfor %} 508 {% endfor %}
400 </div></div> 509 </div></div>
401 </div> 510 </div>
402 511
512 {% endif %}
403 </div> 513 </div>
404 </body> 514 </body>
405 </html> 515 </html>
406 516