Mercurial > repos > jankanis > blast2html
comparison blast_html.html.jinja @ 13:c2d63adb83db
renamed files
| author | Jan Kanis <jan.code@jankanis.nl> |
|---|---|
| date | Mon, 12 May 2014 17:13:49 +0200 |
| parents | visualise.html.jinja@a459c754cdb5 |
| children | db7e4ee3be03 |
comparison
equal
deleted
inserted
replaced
| 12:a459c754cdb5 | 13:c2d63adb83db |
|---|---|
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta charset="UTF-8"> | |
| 5 | |
| 6 <title>Blast output</title> | |
| 7 | |
| 8 <style> | |
| 9 body { | |
| 10 color: #33333; | |
| 11 font-family: Arial,Sans-Serif; | |
| 12 } | |
| 13 | |
| 14 :link { | |
| 15 color: #336699; | |
| 16 } | |
| 17 | |
| 18 .right { | |
| 19 float: right; | |
| 20 } | |
| 21 | |
| 22 #content { | |
| 23 margin: 0 2em; | |
| 24 padding: 0.5em; | |
| 25 border: 1px solid #888888; | |
| 26 background-color: #d3dff5; | |
| 27 } | |
| 28 | |
| 29 h1, h2, h3, h4, h5, h6 { | |
| 30 color: #2A6979; | |
| 31 font-family: arial,verdana,sans-serif; | |
| 32 letter-spacing: -1px; | |
| 33 margin: 1.2em 0 0.3em; | |
| 34 } | |
| 35 | |
| 36 h1 { | |
| 37 border-bottom: 1px solid #CCCCCC; | |
| 38 font-size: 150%; | |
| 39 padding-bottom: 0.1em; | |
| 40 } | |
| 41 | |
| 42 h2 { | |
| 43 font-size: 120%; | |
| 44 font-weight: bold; | |
| 45 } | |
| 46 | |
| 47 h4.darkHeader { | |
| 48 color: #4D4D4D; | |
| 49 letter-spacing: 0; | |
| 50 font-weight: bold; | |
| 51 } | |
| 52 | |
| 53 #nodata { | |
| 54 font-weight: bold; | |
| 55 } | |
| 56 | |
| 57 .headerdata { | |
| 58 font-size: 90%; | |
| 59 } | |
| 60 .headerdata .param { | |
| 61 font-weight: bold; | |
| 62 text-align: right; | |
| 63 padding: 0 1em; | |
| 64 } | |
| 65 | |
| 66 .grey { | |
| 67 background-color: #eeeeee; | |
| 68 border: 1px solid #cccccc; | |
| 69 padding: 1em; | |
| 70 } | |
| 71 | |
| 72 .white { | |
| 73 background-color: white; | |
| 74 border: 1px solid #cccccc; | |
| 75 padding: 1.5em 2%; | |
| 76 } | |
| 77 | |
| 78 .graphicrow { | |
| 79 clear: left; | |
| 80 width: 100%; | |
| 81 } | |
| 82 | |
| 83 .graphicitem { | |
| 84 float: left; | |
| 85 } | |
| 86 | |
| 87 | |
| 88 | |
| 89 .graphic { | |
| 90 background-color: white; | |
| 91 border: 2px solid black; | |
| 92 padding: .5em 1.5em; | |
| 93 align: center; | |
| 94 margin: auto; | |
| 95 } | |
| 96 | |
| 97 #graphics .grey { | |
| 98 text-align: center; | |
| 99 } | |
| 100 | |
| 101 .centered, #defline, div.legend, div.tablewrapper { | |
| 102 align: center; | |
| 103 margin-left: auto; | |
| 104 margin-right: auto; | |
| 105 } | |
| 106 | |
| 107 #defline { | |
| 108 background-color: white; | |
| 109 border: 1px solid black; | |
| 110 margin: .5em auto; | |
| 111 padding-left: .2em; | |
| 112 padding-right: .2em; | |
| 113 max-width: 50em; | |
| 114 text-align: left; | |
| 115 height: 2.8em; | |
| 116 overflow-y: hidden; | |
| 117 } | |
| 118 | |
| 119 div.legend { | |
| 120 max-width: 40em; | |
| 121 } | |
| 122 div.legend div { | |
| 123 width: 100%; | |
| 124 color: white; | |
| 125 font-weight: bold; | |
| 126 border-spacing: 0; | |
| 127 } | |
| 128 div.legend div .graphicitem { | |
| 129 width: 20%; | |
| 130 padding: 0; | |
| 131 margin: 0; | |
| 132 border: none; | |
| 133 } | |
| 134 | |
| 135 div.tablewrapper { | |
| 136 width: 50%; | |
| 137 min-width: 60em; | |
| 138 } | |
| 139 | |
| 140 /* For small widths we give the graphic 100% */ | |
| 141 @media (max-width: 72.5em) { | |
| 142 div.tablewrapper { | |
| 143 width: 100%; | |
| 144 min-width: 0px; | |
| 145 } | |
| 146 } | |
| 147 | |
| 148 .scale { | |
| 149 width: 100%; | |
| 150 margin: .5em 0; | |
| 151 font-weight: bold; | |
| 152 } | |
| 153 .scale div { | |
| 154 color: red; | |
| 155 text-align: left; | |
| 156 } | |
| 157 .scale .graphicrow { | |
| 158 margin: .5em 0 .5em 0; | |
| 159 color: white; | |
| 160 } | |
| 161 .scale .graphicitem div { | |
| 162 margin: 0 1px; | |
| 163 padding: 0 2px; | |
| 164 text-align: right; | |
| 165 background-color: red; | |
| 166 color: white; | |
| 167 } | |
| 168 .scale .graphicitem:first-child div { | |
| 169 margin-left: 0px; | |
| 170 } | |
| 171 .scale .graphicitem:last-child div { | |
| 172 margin-right: 0px; | |
| 173 } | |
| 174 | |
| 175 a.matchresult { | |
| 176 display: block; | |
| 177 margin: 0; | |
| 178 padding: 0; | |
| 179 } | |
| 180 div.matchrow { | |
| 181 margin-top: 4px; | |
| 182 } | |
| 183 div.matchrow, div.matchitem { | |
| 184 height: 4px; | |
| 185 } | |
| 186 | |
| 187 | |
| 188 | |
| 189 div#descriptions { | |
| 190 } | |
| 191 | |
| 192 table.descriptiontable { | |
| 193 font-size: 85%; | |
| 194 border: 1px solid #97b0c8; | |
| 195 border-spacing: 0; | |
| 196 color: #222222; | |
| 197 line-height: 1.3em; | |
| 198 background-color: white; | |
| 199 } | |
| 200 table.descriptiontable col:first-child { | |
| 201 width: 100%; | |
| 202 } | |
| 203 table.descriptiontable tr:hover { | |
| 204 background-color: #D5DEE3; | |
| 205 } | |
| 206 table.descriptiontable th { | |
| 207 color: #14376C; | |
| 208 font-weight: normal; | |
| 209 background-color: #F0F0F0; | |
| 210 background: linear-gradient(#FFFFFF, #F0F0F0); | |
| 211 border-bottom: 1px solid #D4DFE9; | |
| 212 border-right: 1px solid #CFCFCF; | |
| 213 border-left: 0px solid black; | |
| 214 border-top: 0px solid black; | |
| 215 } | |
| 216 table.descriptiontable td { | |
| 217 overflow: hidden; | |
| 218 text-align: center; | |
| 219 padding: .4em .8em; | |
| 220 } | |
| 221 table.descriptiontable td div { | |
| 222 width: 1em; | |
| 223 overflow: visible; | |
| 224 white-space: nowrap; | |
| 225 text-align: left; | |
| 226 } | |
| 227 | |
| 228 | |
| 229 | |
| 230 #alignments .white { | |
| 231 padding: 1.5em 1em; | |
| 232 } | |
| 233 | |
| 234 .alignment { | |
| 235 border-top: 1px solid black; | |
| 236 padding-left: 1em; | |
| 237 padding-right: 1em; | |
| 238 } | |
| 239 | |
| 240 div.linkheader { | |
| 241 padding-top: .2em; | |
| 242 font-size: 85%; | |
| 243 color: #14376C; | |
| 244 } | |
| 245 div.linkheader a.linkheader { | |
| 246 margin-right: 1em; | |
| 247 } | |
| 248 div.linkheader .right a { | |
| 249 text-decoration: none; | |
| 250 } | |
| 251 | |
| 252 .title .hittitle { | |
| 253 color: #22222; | |
| 254 margin-bottom: .3em; | |
| 255 } | |
| 256 .title .titleinfo { | |
| 257 font-size: 80%; | |
| 258 margin-top: 0; | |
| 259 margin-bottom: .3em; | |
| 260 } | |
| 261 .title .titleinfo .b { | |
| 262 color: #606060; | |
| 263 font-weight: bold; | |
| 264 font-size: 90%; | |
| 265 } | |
| 266 | |
| 267 .moretitles { | |
| 268 margin: 1.2em; | |
| 269 } | |
| 270 .moretitles .titleinfo { | |
| 271 margin: 0; | |
| 272 padding: 0; | |
| 273 } | |
| 274 .moretitles .hittitle { | |
| 275 margin: .4em 0 .2em 0; | |
| 276 padding: 0; | |
| 277 } | |
| 278 | |
| 279 a.showmoretitles { | |
| 280 font-size: 75%; | |
| 281 color: #336699; | |
| 282 font-weight: bold; | |
| 283 margin-top: 0; | |
| 284 } | |
| 285 a.showmoretitles:hover { | |
| 286 } | |
| 287 | |
| 288 .hotspot { | |
| 289 color: #606060; | |
| 290 font-family: verdana, arial, sans-serif; | |
| 291 margin-bottom: 2.5em; | |
| 292 } | |
| 293 | |
| 294 .hotspot p.range { | |
| 295 font-size: 70%; | |
| 296 margin-top: 0; | |
| 297 margin-top: 1em; | |
| 298 margin-bottom: .2em; | |
| 299 } | |
| 300 .hotspot p.range span.range { | |
| 301 font-weight: bold; | |
| 302 } | |
| 303 .hotspot p.range a.range { | |
| 304 margin-left: .5em; | |
| 305 } | |
| 306 | |
| 307 table.hotspotstable { | |
| 308 border-top: 1px solid; | |
| 309 border-bottom: 1px solid; | |
| 310 text-align: left; | |
| 311 border-collapse: collapse; | |
| 312 } | |
| 313 table.hotspotstable th, table.hotspotstable td { | |
| 314 padding: .1em 1em; | |
| 315 } | |
| 316 table.hotspotstable th { | |
| 317 font-size: 70%; | |
| 318 } | |
| 319 table.hotspotstable td { | |
| 320 min-width: 7em; | |
| 321 color: #222222; | |
| 322 font-size: 80%; | |
| 323 } | |
| 324 | |
| 325 pre.alignmentgraphic { | |
| 326 color: #222222; | |
| 327 } | |
| 328 | |
| 329 | |
| 330 </style> | |
| 331 | |
| 332 <script type="text/javascript"> | |
| 333 function toggle_visibility(id) { | |
| 334 var e = document.getElementById(id); | |
| 335 if(e.style.display != 'block') | |
| 336 e.style.display = 'block'; | |
| 337 else | |
| 338 e.style.display = 'none'; | |
| 339 } | |
| 340 </script> | |
| 341 | |
| 342 </head> | |
| 343 | |
| 344 | |
| 345 <body> | |
| 346 <div id=content> | |
| 347 <h1>Nucleotide Sequence ({{length}} letters)</h1> | |
| 348 | |
| 349 <div id=header> | |
| 350 | |
| 351 <table class=headerdata> | |
| 352 {% for param, value in params %} | |
| 353 <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr> | |
| 354 {% endfor %} | |
| 355 </table> | |
| 356 | |
| 357 </div> | |
| 358 | |
| 359 {% if not (blast.BlastOutput_iterations.findall('Iteration') and | |
| 360 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %} | |
| 361 <div id=nodata> | |
| 362 <h2>No Results</h2> | |
| 363 <div class=grey> | |
| 364 No Matches | |
| 365 </div> | |
| 366 </div> | |
| 367 {% else %} | |
| 368 | |
| 369 | |
| 370 | |
| 371 <div id=graphics> | |
| 372 <h2>Graphic Summary</h2> | |
| 373 | |
| 374 <div class=grey> | |
| 375 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3> | |
| 376 | |
| 377 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div> | |
| 378 | |
| 379 <div class=graphic> | |
| 380 <h4 class=darkHeader>Color key for alignment scores</h4> | |
| 381 <div class=legend><div class=graphicrow> | |
| 382 <div class=graphicitem style="background-color: {{colors[0]}}"><40</div> | |
| 383 <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div> | |
| 384 <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div> | |
| 385 <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div> | |
| 386 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div> | |
| 387 </div></div> | |
| 388 <div style="clear: left"></div> | |
| 389 | |
| 390 <div class=tablewrapper> | |
| 391 | |
| 392 <div class=scale> | |
| 393 <div>query:</div> | |
| 394 <div class=graphicrow> | |
| 395 {% for s in queryscale %} | |
| 396 <div class=graphicitem | |
| 397 style="width: {{s.width|safe}}%"> | |
| 398 <div>{{s.label|safe}}</div> | |
| 399 </div> | |
| 400 {% endfor %} | |
| 401 </div> | |
| 402 <div style="clear: left"></div> | |
| 403 </div> | |
| 404 | |
| 405 {% for line in match_colors %} | |
| 406 <a class=matchresult | |
| 407 href="{{line.link}}" | |
| 408 onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"' | |
| 409 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"' | |
| 410 title="{{line.defline}}"> | |
| 411 <div class="matchrow graphicrow"> | |
| 412 {% for match in line.colors %} | |
| 413 <div class="matchitem graphicitem" | |
| 414 style="background-color: {{match[1]}}; width: {{match[0]}}%"></div> | |
| 415 {% endfor %} | |
| 416 </div> | |
| 417 </a> | |
| 418 | |
| 419 {% endfor %} | |
| 420 </div> | |
| 421 </div> | |
| 422 </div> | |
| 423 </div> | |
| 424 | |
| 425 | |
| 426 | |
| 427 <div id=descriptions> | |
| 428 <h2>Descriptions</h2> | |
| 429 | |
| 430 <div class=grey><div class=white> | |
| 431 <h4 class=darkHeader>Sequences producing significant alignments:</h4> | |
| 432 | |
| 433 <table class=descriptiontable> | |
| 434 <col/><col/><col/><col/><col/><col/><col/> | |
| 435 <tr> | |
| 436 <th>Description</th> | |
| 437 <th>Max score</th> | |
| 438 <th>Total score</th> | |
| 439 <th>Query cover</th> | |
| 440 <th>E value</th> | |
| 441 <th>Ident</th> | |
| 442 <th>Accession</th> | |
| 443 </tr> | |
| 444 {% for hit in hit_info %} | |
| 445 <tr> | |
| 446 <td><div><a href="#hit{{hit.link_id}}" | |
| 447 title="{{hit.title}}" | |
| 448 name=description{{hit.link_id}}> | |
| 449 {{hit.title}} | |
| 450 </a></div></td> | |
| 451 <td>{{hit.maxscore}}</td> | |
| 452 <td>{{hit.totalscore}}</td> | |
| 453 <td>{{hit.cover}}</td> | |
| 454 <td>{{hit.e_value}}</td> | |
| 455 <td>{{hit.ident}}</td> | |
| 456 <td><a href="{{genelink(hit.hit|hitid)}}">{{hit.accession}}</a></td> | |
| 457 </tr> | |
| 458 {% endfor %} | |
| 459 </table> | |
| 460 | |
| 461 </div></div> | |
| 462 </div> | |
| 463 | |
| 464 | |
| 465 | |
| 466 <div id=alignments> | |
| 467 <h2>Alignments</h2> | |
| 468 | |
| 469 <div class=grey><div class=white> | |
| 470 {% for hit in hits %} | |
| 471 <div class=alignment id=hit{{hit.Hit_num}}> | |
| 472 | |
| 473 <div class=linkheader> | |
| 474 <div class=right><a href="#description{{hit.Hit_num}}">Descriptions</a></div> | |
| 475 <a class=linkheader href="{{genelink(hit|hitid)}}">GenBank</a> | |
| 476 <a class=linkheader href="{{genelink(hit|hitid, 'graph')}}">Graphics</a> | |
| 477 </div> | |
| 478 | |
| 479 <div class=title> | |
| 480 <p class=hittitle>{{hit|firsttitle}}</p> | |
| 481 <p class=titleinfo> | |
| 482 <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a> | |
| 483 <span class=b>Length:</span> {{hit.Hit_len}} | |
| 484 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} | |
| 485 </p> | |
| 486 </div> | |
| 487 | |
| 488 {% if hit|othertitles|length %} | |
| 489 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''> | |
| 490 See {{hit|othertitles|length}} more title(s) | |
| 491 </a> | |
| 492 | |
| 493 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none"> | |
| 494 {% for title in hit|othertitles %} | |
| 495 <div class=title> | |
| 496 <p class=hittitle>{{title.title}}</p> | |
| 497 <p class=titleinfo> | |
| 498 <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a> | |
| 499 </p> | |
| 500 </div> | |
| 501 {% endfor %} | |
| 502 </div> | |
| 503 {% endif %} | |
| 504 | |
| 505 {% for hsp in hit.Hit_hsps.Hsp %} | |
| 506 <div class=hotspot> | |
| 507 <p class=range> | |
| 508 <span class=range>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</span> | |
| 509 <a class=range href="{{genelink(hit|hitid, 'genbank', hsp)}}">GenBank</a> | |
| 510 <a class=range href="{{genelink(hit|hitid, 'graph', hsp)}}">Graphics</a> | |
| 511 </p> | |
| 512 | |
| 513 <table class=hotspotstable> | |
| 514 <tr> | |
| 515 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> | |
| 516 </tr> | |
| 517 <tr> | |
| 518 <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td> | |
| 519 <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td> | |
| 520 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{ | |
| 521 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td> | |
| 522 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len | |
| 523 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td> | |
| 524 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td> | |
| 525 </tr> | |
| 526 </table> | |
| 527 | |
| 528 <pre class=alignmentgraphic>{{hsp|alignment_pre}}</pre> | |
| 529 </div> | |
| 530 {% endfor %} | |
| 531 | |
| 532 </div> | |
| 533 | |
| 534 {% endfor %} | |
| 535 </div></div> | |
| 536 </div> | |
| 537 | |
| 538 {% endif %} | |
| 539 </div> | |
| 540 </body> | |
| 541 </html> | |
| 542 |