Mercurial > repos > jankanis > blast2html
comparison visualise.html.jinja @ 14:a459c754cdb5 draft
add links, refactor, proper commandline arguments
| author | Jan Kanis <jan.code@jankanis.nl> |
|---|---|
| date | Mon, 12 May 2014 17:12:24 +0200 |
| parents | 7660519f2dc9 |
| children |
comparison
equal
deleted
inserted
replaced
| 13:7660519f2dc9 | 14:a459c754cdb5 |
|---|---|
| 9 body { | 9 body { |
| 10 color: #33333; | 10 color: #33333; |
| 11 font-family: Arial,Sans-Serif; | 11 font-family: Arial,Sans-Serif; |
| 12 } | 12 } |
| 13 | 13 |
| 14 :link { | |
| 15 color: #336699; | |
| 16 } | |
| 17 | |
| 18 .right { | |
| 19 float: right; | |
| 20 } | |
| 21 | |
| 14 #content { | 22 #content { |
| 15 margin: 0 2em; | 23 margin: 0 2em; |
| 16 padding: 0.5em; | 24 padding: 0.5em; |
| 17 border: 1px solid #888888; | 25 border: 1px solid #888888; |
| 18 background-color: #d3dff5; | 26 background-color: #d3dff5; |
| 74 | 82 |
| 75 .graphicitem { | 83 .graphicitem { |
| 76 float: left; | 84 float: left; |
| 77 } | 85 } |
| 78 | 86 |
| 87 | |
| 88 | |
| 79 .graphic { | 89 .graphic { |
| 80 background-color: white; | 90 background-color: white; |
| 81 border: 2px solid black; | 91 border: 2px solid black; |
| 82 padding: .5em; | 92 padding: .5em 1.5em; |
| 83 align: center; | 93 align: center; |
| 84 margin: auto; | 94 margin: auto; |
| 85 } | 95 } |
| 86 | 96 |
| 87 #graphics .grey { | 97 #graphics .grey { |
| 126 width: 50%; | 136 width: 50%; |
| 127 min-width: 60em; | 137 min-width: 60em; |
| 128 } | 138 } |
| 129 | 139 |
| 130 /* For small widths we give the graphic 100% */ | 140 /* For small widths we give the graphic 100% */ |
| 131 @media (max-width: 70em) { | 141 @media (max-width: 72.5em) { |
| 132 div.tablewrapper { | 142 div.tablewrapper { |
| 133 width: 100%; | 143 width: 100%; |
| 134 min-width: 0px; | 144 min-width: 0px; |
| 135 } | 145 } |
| 136 } | 146 } |
| 172 } | 182 } |
| 173 div.matchrow, div.matchitem { | 183 div.matchrow, div.matchitem { |
| 174 height: 4px; | 184 height: 4px; |
| 175 } | 185 } |
| 176 | 186 |
| 187 | |
| 188 | |
| 177 div#descriptions { | 189 div#descriptions { |
| 178 } | 190 } |
| 179 | 191 |
| 180 table.descriptiontable { | 192 table.descriptiontable { |
| 181 font-size: 85%; | 193 font-size: 85%; |
| 210 width: 1em; | 222 width: 1em; |
| 211 overflow: visible; | 223 overflow: visible; |
| 212 white-space: nowrap; | 224 white-space: nowrap; |
| 213 text-align: left; | 225 text-align: left; |
| 214 } | 226 } |
| 215 table.descriptiontable a:link { | 227 |
| 216 color: #336699; | 228 |
| 217 } | 229 |
| 218 | |
| 219 #alignments .white { | 230 #alignments .white { |
| 220 padding: 1.5em 1em; | 231 padding: 1.5em 1em; |
| 221 } | 232 } |
| 222 | 233 |
| 223 .alignment { | 234 .alignment { |
| 226 padding-right: 1em; | 237 padding-right: 1em; |
| 227 } | 238 } |
| 228 | 239 |
| 229 div.linkheader { | 240 div.linkheader { |
| 230 padding-top: .2em; | 241 padding-top: .2em; |
| 231 text-align: right; | |
| 232 font-size: 85%; | 242 font-size: 85%; |
| 233 color: #14376C; | 243 color: #14376C; |
| 234 } | 244 } |
| 235 div.linkheader a { | 245 div.linkheader a.linkheader { |
| 236 color: #14376C; | 246 margin-right: 1em; |
| 247 } | |
| 248 div.linkheader .right a { | |
| 237 text-decoration: none; | 249 text-decoration: none; |
| 238 } | 250 } |
| 239 | 251 |
| 240 .title .hittitle { | 252 .title .hittitle { |
| 241 color: #22222; | 253 color: #22222; |
| 242 margin-bottom: .3em; | 254 margin-bottom: .3em; |
| 243 } | 255 } |
| 244 .title .titleinfo { | 256 .title .titleinfo { |
| 245 font-size: 80%; | 257 font-size: 80%; |
| 246 margin-top: 0; | 258 margin-top: 0; |
| 259 margin-bottom: .3em; | |
| 247 } | 260 } |
| 248 .title .titleinfo .b { | 261 .title .titleinfo .b { |
| 249 color: #606060; | 262 color: #606060; |
| 250 font-weight: bold; | 263 font-weight: bold; |
| 251 font-size: 90%; | 264 font-size: 90%; |
| 257 .moretitles .titleinfo { | 270 .moretitles .titleinfo { |
| 258 margin: 0; | 271 margin: 0; |
| 259 padding: 0; | 272 padding: 0; |
| 260 } | 273 } |
| 261 .moretitles .hittitle { | 274 .moretitles .hittitle { |
| 262 margin: .2em 0; | 275 margin: .4em 0 .2em 0; |
| 263 padding: 0; | 276 padding: 0; |
| 264 } | 277 } |
| 265 | 278 |
| 266 a.showmoretitles { | 279 a.showmoretitles { |
| 267 font-size: 85%; | 280 font-size: 75%; |
| 268 color: #336699; | 281 color: #336699; |
| 282 font-weight: bold; | |
| 283 margin-top: 0; | |
| 269 } | 284 } |
| 270 a.showmoretitles:hover { | 285 a.showmoretitles:hover { |
| 271 } | 286 } |
| 272 | 287 |
| 273 .hotspot { | 288 .hotspot { |
| 274 color: #606060; | 289 color: #606060; |
| 275 font-family: verdana, arial, sans-serif; | 290 font-family: verdana, arial, sans-serif; |
| 276 margin-bottom: 2.5em; | 291 margin-bottom: 2.5em; |
| 277 } | 292 } |
| 278 | 293 |
| 279 .hotspot .range { | 294 .hotspot p.range { |
| 280 font-size: 70%; | 295 font-size: 70%; |
| 281 margin-top: 0; | 296 margin-top: 0; |
| 282 font-weight: bold; | |
| 283 margin-top: 1em; | 297 margin-top: 1em; |
| 284 margin-bottom: .2em; | 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; | |
| 285 } | 305 } |
| 286 | 306 |
| 287 table.hotspotstable { | 307 table.hotspotstable { |
| 288 border-top: 1px solid; | 308 border-top: 1px solid; |
| 289 border-bottom: 1px solid; | 309 border-bottom: 1px solid; |
| 328 | 348 |
| 329 <div id=header> | 349 <div id=header> |
| 330 | 350 |
| 331 <table class=headerdata> | 351 <table class=headerdata> |
| 332 {% for param, value in params %} | 352 {% for param, value in params %} |
| 333 <tr><td class=param>{{param}}</td><td>{{value}}</td></tr> | 353 <tr><td class=param>{{param}}:</td><td>{{value}}</td></tr> |
| 334 {% endfor %} | 354 {% endfor %} |
| 335 </table> | 355 </table> |
| 336 | 356 |
| 337 </div> | 357 </div> |
| 338 | 358 |
| 339 {% if not (blast.BlastOutput_iterations.find('Iteration') and | 359 {% if not (blast.BlastOutput_iterations.findall('Iteration') and |
| 340 blast.BlastOutput_iterations.Iteration.Iteration_hits.find('Hit')) %} | 360 blast.BlastOutput_iterations.Iteration.Iteration_hits.findall('Hit')) %} |
| 341 <div id=nodata> | 361 <div id=nodata> |
| 342 <h2>No Results</h2> | 362 <h2>No Results</h2> |
| 343 <div class=grey> | 363 <div class=grey> |
| 344 No Matches | 364 No Matches |
| 345 </div> | 365 </div> |
| 358 | 378 |
| 359 <div class=graphic> | 379 <div class=graphic> |
| 360 <h4 class=darkHeader>Color key for alignment scores</h4> | 380 <h4 class=darkHeader>Color key for alignment scores</h4> |
| 361 <div class=legend><div class=graphicrow> | 381 <div class=legend><div class=graphicrow> |
| 362 <div class=graphicitem style="background-color: {{colors[0]}}"><40</div> | 382 <div class=graphicitem style="background-color: {{colors[0]}}"><40</div> |
| 363 <div class=graphicitem style="background-color: {{colors[1]}}">40&endash;50</div> | 383 <div class=graphicitem style="background-color: {{colors[1]}}">40–50</div> |
| 364 <div class=graphicitem style="background-color: {{colors[2]}}">50-80</div> | 384 <div class=graphicitem style="background-color: {{colors[2]}}">50–80</div> |
| 365 <div class=graphicitem style="background-color: {{colors[3]}}">80-200</div> | 385 <div class=graphicitem style="background-color: {{colors[3]}}">80–200</div> |
| 366 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div> | 386 <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div> |
| 367 </div></div> | 387 </div></div> |
| 368 <div style="clear: left"></div> | 388 <div style="clear: left"></div> |
| 369 | 389 |
| 370 <div class=tablewrapper> | 390 <div class=tablewrapper> |
| 431 <td>{{hit.maxscore}}</td> | 451 <td>{{hit.maxscore}}</td> |
| 432 <td>{{hit.totalscore}}</td> | 452 <td>{{hit.totalscore}}</td> |
| 433 <td>{{hit.cover}}</td> | 453 <td>{{hit.cover}}</td> |
| 434 <td>{{hit.e_value}}</td> | 454 <td>{{hit.e_value}}</td> |
| 435 <td>{{hit.ident}}</td> | 455 <td>{{hit.ident}}</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> | 456 <td><a href="{{genelink(hit.hit|hitid)}}">{{hit.accession}}</a></td> |
| 437 </tr> | 457 </tr> |
| 438 {% endfor %} | 458 {% endfor %} |
| 439 </table> | 459 </table> |
| 440 | 460 |
| 441 </div></div> | 461 </div></div> |
| 449 <div class=grey><div class=white> | 469 <div class=grey><div class=white> |
| 450 {% for hit in hits %} | 470 {% for hit in hits %} |
| 451 <div class=alignment id=hit{{hit.Hit_num}}> | 471 <div class=alignment id=hit{{hit.Hit_num}}> |
| 452 | 472 |
| 453 <div class=linkheader> | 473 <div class=linkheader> |
| 454 <a href="#description{{hit.Hit_num}}">Descriptions</a> | 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> | |
| 455 </div> | 477 </div> |
| 456 | 478 |
| 457 <div class=title> | 479 <div class=title> |
| 458 <p class=hittitle>{{hit|firsttitle}}</p> | 480 <p class=hittitle>{{hit|firsttitle}}</p> |
| 459 <p class=titleinfo> | 481 <p class=titleinfo> |
| 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> | 482 <span class=b>Sequence ID:</span> <a href="{{genelink(hit|hitid)}}">{{hit|seqid}}</a> |
| 461 <span class=b>Length:</span> {{hit.Hit_len}} | 483 <span class=b>Length:</span> {{hit.Hit_len}} |
| 462 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} | 484 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}} |
| 463 </p> | 485 </p> |
| 464 </div> | 486 </div> |
| 465 | 487 |
| 471 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none"> | 493 <div class=moretitles id=moretitles{{hit.Hit_num}} style="display: none"> |
| 472 {% for title in hit|othertitles %} | 494 {% for title in hit|othertitles %} |
| 473 <div class=title> | 495 <div class=title> |
| 474 <p class=hittitle>{{title.title}}</p> | 496 <p class=hittitle>{{title.title}}</p> |
| 475 <p class=titleinfo> | 497 <p class=titleinfo> |
| 476 <span class=b>Sequence ID:</span> {{title.id}} | 498 <span class=b>Sequence ID:</span> <a href="{{genelink(title.hitid)}}">{{title.id}}</a> |
| 477 </p> | 499 </p> |
| 478 </div> | 500 </div> |
| 479 {% endfor %} | 501 {% endfor %} |
| 480 </div> | 502 </div> |
| 481 {% endif %} | 503 {% endif %} |
| 482 | 504 |
| 483 {% for hsp in hit.Hit_hsps.Hsp %} | 505 {% for hsp in hit.Hit_hsps.Hsp %} |
| 484 <div class=hotspot> | 506 <div class=hotspot> |
| 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> | 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> | |
| 486 | 512 |
| 487 <table class=hotspotstable> | 513 <table class=hotspotstable> |
| 488 <tr> | 514 <tr> |
| 489 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> | 515 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th> |
| 490 </tr> | 516 </tr> |