Mercurial > repos > jankanis > blast2html

comparison visualise.html.jinja @ 12:2fbdf2eb27b4 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
All data is displayed now, still some formatting to do
author Jan Kanis <jan.code@jankanis.nl>
date Fri, 09 May 2014 18:16:48 +0200
parents bbdc8fb0de2b
children 7660519f2dc9
comparison
equal deleted inserted replaced
11:bbdc8fb0de2b 12:2fbdf2eb27b4
58 } 58 }
59 59
60 .white { 60 .white {
61 background-color: white; 61 background-color: white;
62 border: 1px solid #cccccc; 62 border: 1px solid #cccccc;
63 padding: 1em; 63 padding: 1.5em 2%;
64 } 64 }
65 65
66 .graphicrow { 66 .graphicrow {
67 clear: left; 67 clear: left;
68 width: 100%; 68 width: 100%;
96 margin: .5em auto; 96 margin: .5em auto;
97 padding-left: .2em; 97 padding-left: .2em;
98 padding-right: .2em; 98 padding-right: .2em;
99 max-width: 50em; 99 max-width: 50em;
100 text-align: left; 100 text-align: left;
101 height: 4em; 101 height: 2.8em;
102 overflow-y: hidden; 102 overflow-y: hidden;
103 } 103 }
104 104
105 div.legend { 105 div.legend {
106 max-width: 40em; 106 max-width: 40em;
149 padding: 0 2px; 149 padding: 0 2px;
150 text-align: right; 150 text-align: right;
151 background-color: red; 151 background-color: red;
152 color: white; 152 color: white;
153 } 153 }
154 .scale .graphicitem:first-child div {
155 margin-left: 0px;
156 }
157 .scale .graphicitem:last-child div {
158 margin-right: 0px;
159 }
154 160
155 a.matchresult { 161 a.matchresult {
156 display: block; 162 display: block;
157 margin: 0; 163 margin: 0;
158 padding: 0; 164 padding: 0;
162 } 168 }
163 div.matchrow, div.matchitem { 169 div.matchrow, div.matchitem {
164 height: 4px; 170 height: 4px;
165 } 171 }
166 172
173 div#descriptions {
174 }
175
167 table.descriptiontable { 176 table.descriptiontable {
177 font-size: 85%;
178 border: 1px solid #97b0c8;
179 border-spacing: 0;
180 color: #222222;
181 line-height: 1.3em;
182 background-color: white;
183 }
184 table.descriptiontable col:first-child {
168 width: 100%; 185 width: 100%;
186 }
187 table.descriptiontable tr:hover {
188 background-color: #D5DEE3;
189 }
190 table.descriptiontable th {
191 background-color: #F0F0F0;
192 background: linear-gradient(#FFFFFF, #F0F0F0);
193 border-bottom: 1px solid #D4DFE9;
194 border-right: 1px solid #CFCFCF;
195 border-left: 0px solid black;
196 border-top: 0px solid black;
169 } 197 }
170 table.descriptiontable td { 198 table.descriptiontable td {
171 overflow: hidden; 199 overflow: hidden;
172 white-space: nowrap; 200 text-align: center;
201 padding: .4em .8em;
173 } 202 }
174 table.descriptiontable td div { 203 table.descriptiontable td div {
175 width: 1em; 204 width: 1em;
176 overflow: visible; 205 overflow: visible;
177 white-space: nowrap; 206 white-space: nowrap;
207 text-align: left;
178 } 208 }
179 209
180 </style> 210 </style>
181 211
182 212 <script type="text/javascript">
213 function toggle_visibility(id) {
214 var e = document.getElementById(id);
215 if(e.style.display == 'none')
216 e.style.display = 'block';
217 else
218 e.style.display = 'none';
219 }
220 </script>
221
183 </head> 222 </head>
184 223
185 <body> 224 <body>
186 <div id=content> 225 <div id=content>
187 <h1>Nucleotide Sequence ({{length}} letters)</h1> 226 <h1>Nucleotide Sequence ({{length}} letters)</h1>
221 <div>query:</div> 260 <div>query:</div>
222 <div class=graphicrow> 261 <div class=graphicrow>
223 {% for s in queryscale %} 262 {% for s in queryscale %}
224 <div class=graphicitem 263 <div class=graphicitem
225 style="width: {{s.width|safe}}%"> 264 style="width: {{s.width|safe}}%">
226 <div style="{{'margin-left: 0px' if loop.first else 'margin-right: 0px' if loop.last}}">{{s.label|safe}}</div> 265 <div>{{s.label|safe}}</div>
227 </div> 266 </div>
228 {% endfor %} 267 {% endfor %}
229 </div> 268 </div>
230 <div style="clear: left"></div> 269 <div style="clear: left"></div>
231 </div> 270 </div>
248 </div> 287 </div>
249 </div> 288 </div>
250 </div> 289 </div>
251 </div> 290 </div>
252 291
292
293
253 <div id=descriptions> 294 <div id=descriptions>
254 <h2>Descriptions</h2> 295 <h2>Descriptions</h2>
255 296
256 <div class=grey><div class=white> 297 <div class=grey><div class=white>
257 <h4 class=blackHeader>Sequences producing significant alignments:</h4> 298 <h4 class=blackHeader>Sequences producing significant alignments:</h4>
299
258 <table class=descriptiontable> 300 <table class=descriptiontable>
259 <col/><col/><col/><col/><col/><col/><col/> 301 <col/><col/><col/><col/><col/><col/><col/>
260 <tr> 302 <tr>
261 <th>Description</th> 303 <th>Description</th>
262 <th>Max score</th> 304 <th>Max score</th>
266 <th>Ident</th> 308 <th>Ident</th>
267 <th>Accession</th> 309 <th>Accession</th>
268 </tr> 310 </tr>
269 {% for hit in hit_info %} 311 {% for hit in hit_info %}
270 <tr> 312 <tr>
271 <td style="width: 100%"><div>{{hit.description}}</div></td> 313 <td><div><a href="#hit{{hit.link_id}}"
314 title="{{hit.title}}"
315 name=description{{hit.link_id}}>
316 {{hit.title}}
317 </a></div></td>
272 <td>{{hit.maxscore}}</td> 318 <td>{{hit.maxscore}}</td>
273 <td>{{hit.totalscore}}</td> 319 <td>{{hit.totalscore}}</td>
274 <td>{{hit.cover}}</td> 320 <td>{{hit.cover}}</td>
275 <td>{{hit.e_value}}</td> 321 <td>{{hit.e_value}}</td>
276 <td>{{hit.ident}}</td> 322 <td>{{hit.ident}}</td>
278 </tr> 324 </tr>
279 {% endfor %} 325 {% endfor %}
280 </table> 326 </table>
281 327
282 </div></div> 328 </div></div>
283 329 </div>
330
331
332
333 <div id=alignments>
334 <h2>Alignments</h2>
335
336 <div class=grey><div class=white>
337 {% for hit in hits %}
338 <div class=alignment id=hit{{hit.Hit_num}}>
339
340 <div class=linkheader>
341 <a href="#description{{hit.Hit_num}}">Descriptions</a>
342 </div>
343
344 <div class=title>
345 <p class=hittitle>{{hit|firsttitle}}</p>
346 <p class=titleinfo>
347 <span class=b>Sequence ID:</span> {{hit|seqid}}
348 <span class=b>Length:</span> {{hit.Hit_len}}
349 <span class=b>Number of Matches:</span> {{hit.Hit_hsps.Hsp|length}}
350 </p>
351 </div>
352
353 <a class=showmoretitles onclick="toggle_visibility('moretitles{{hit.Hit_num}}'); return false;" href=''>
354 Show {{hit|othertitles|length}} more title(s)
355 </a>
356
357 <div class=moretitles id=moretitles{{hit.Hit_num}}>
358 {% for title in hit|othertitles %}
359 <div class=title>
360 <p class=hittitle>{{title.title}}</p>
361 <p class=titleinfo>
362 <span class=b>Sequence ID:</span> {{title.id}}
363 </p>
364 </div>
365 {% endfor %}
366 </div>
367
368 {% for hsp in hit.Hit_hsps.Hsp %}
369 <div class=hotspots>
370 <p>Range {{hsp.Hsp_num}}: {{hsp['Hsp_hit-from']}} to {{hsp['Hsp_hit-to']}}</p>
371
372 <table class=hotspotstable>
373 <tr>
374 <th>Score</th><th>Expect</th><th>Identities</th><th>Gaps</th><th>Strand</th>
375 </tr>
376 <tr>
377 <td>{{hsp['Hsp_bit-score']|fmt('.1f')}} bits({{hsp.Hsp_score}})</td>
378 <td>{{hsp.Hsp_evalue|fmt('.1f')}}</td>
379 <td>{{ hsp.Hsp_identity }}/{{ hsp|len }}({{
380 (hsp.Hsp_identity/hsp|len) |fmt('.0%') }})</td>
381 <td>{{ hsp.Hsp_gaps }}/{{ hsp|len
382 }}({{ (hsp.Hsp_gaps / hsp|len) | fmt('.0%') }})</td>
383 <td>{{ hsp['Hsp_query-frame']|asframe }}/{{ hsp['Hsp_hit-frame']|asframe }}</td>
384
385 </tr>
386 </table>
387
388 <pre>{{hsp|alignment_pre}}</pre>
389
390 </div>
391 {% endfor %}
392
393 <p>
394 {{hit.Hit_id}}
395
396 Hit {{hit.Hit_num}}
397 </p>
398 </div>
399 {% endfor %}
400 </div></div>
284 </div> 401 </div>
285 402
286 </div> 403 </div>
287 </body> 404 </body>
288 </html> 405 </html>