Mercurial > repos > jankanis > blast2html

comparison visualise.html.jinja @ 7:9e7927673089

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
intermediate commit before converting some tables to divs
author Jan Kanis <jan.code@jankanis.nl>
date Thu, 08 May 2014 16:51:52 +0200
parents d20ce91e1297
children beb83da5a6b7
comparison
equal deleted inserted replaced
6:d20ce91e1297 7:9e7927673089
9 body { 9 body {
10 color: #33333; 10 color: #33333;
11 font-family: Verdana,Arial,Sans-Serif; 11 font-family: Verdana,Arial,Sans-Serif;
12 } 12 }
13 13
14
15 #content { 14 #content {
16 margin: 0 2em; 15 margin: 0 2em;
17 padding: 0.5em; 16 padding: 0.5em;
18 border: 1px solid #888888; 17 border: 1px solid #888888;
19 background-color: #d3dff5; 18 background-color: #d3dff5;
35 h2 { 34 h2 {
36 font-size: 120%; 35 font-size: 120%;
37 font-weight: bold; 36 font-weight: bold;
38 } 37 }
39 38
40 h4.graphicHeader { 39 h4.blackHeader {
41 color: black; 40 color: black;
42 letter-spacing: 0; 41 letter-spacing: 0;
43 font-style: bold; 42 font-style: bold;
44 } 43 }
45 44
50 font-weight: bold; 49 font-weight: bold;
51 text-align: right; 50 text-align: right;
52 padding: 0 1em; 51 padding: 0 1em;
53 } 52 }
54 53
55 .graphicInfo { 54 .grey {
56 background-color: #eeeeee; 55 background-color: #eeeeee;
57 border: 1px solid #cccccc; 56 border: 1px solid #cccccc;
58 padding: 1em; 57 padding: 1em;
59 text-align: center; 58 }
59
60 .white {
61 background-color: white;
62 border: 1px solid #cccccc;
63 padding: 1em;
60 } 64 }
61 65
62 .graphic { 66 .graphic {
63 background-color: white; 67 background-color: white;
64 border: 2px solid black; 68 border: 2px solid black;
65 padding: .5em; 69 padding: .5em;
66 align: center; 70 align: center;
67 margin: auto; 71 margin: auto;
68 } 72 }
69 73
70 .centered { 74 #graphics .grey {
75 text-align: center;
76 }
77
78 .centered, #defline, div.legendwrapper, table.legend, div.tablewrapper {
71 align: center; 79 align: center;
72 margin-left: auto; 80 margin-left: auto;
73 margin-right: auto; 81 margin-right: auto;
74 } 82 }
75 83
84 #defline {
85 background-color: white;
86 border: 1px solid black;
87 margin: .5em auto;
88 padding-left: .2em;
89 padding-right: .2em;
90 max-width: 50em;
91 text-align: left;
92 height: 4em;
93 overflow-y: hidden;
94 }
95
96 div.legendwrapper {
97 max-width: 40em;
98 }
99
76 table.legend { 100 table.legend {
77 color: white; 101 color: white;
78 font-weight: bold; 102 font-weight: bold;
79 align: center; 103 width: 100%;
80 margin: 0 auto;
81 width: 40em;
82 border-spacing: 0; 104 border-spacing: 0;
83 } 105 }
84 table.legend td { 106 table.legend td {
85 width: 20%; 107 width: 20%;
86 padding: 0; 108 padding: 0;
87 margin: 0; 109 margin: 0;
88 border: none; 110 border: none;
89 } 111 }
90 112
113 div.tablewrapper {
114 width: 50%;
115 min-width: 60em;
116 }
117
118 /* For small widths we give the graphic 100% */
119 @media (max-width: 70em) {
120 div.tablewrapper {
121 width: 100%;
122 min-width: 0px;
123 }
124 }
125
126 .scale {
127 width: 100%;
128 margin: .5em 0;
129 font-weight: bold;
130 }
131 .scale div {
132 color: red;
133 text-align: left;
134 }
135 .scale table {
136 width: 100%;
137 height: 1.3em;
138 margin-top: 0;
139 color: white;
140 table-layout: fixed;
141 border-collapse: collapse;
142 }
143 .scale td {
144 margin 0;
145 padding 0;
146 }
147 .scale td div {
148 margin: 1px 0;
149 text-align: right;
150 background-color: red;
151 color: white;
152 }
153
91 table.matchresult { 154 table.matchresult {
92 height: 5px; 155 width: 100%;
93 width: 40em; 156 margin-top: 3px;
94 align: center; 157 margin-bottom: 0;
95 margin: 4px auto 0 auto; 158 border-collapse: collapse;
96 } 159 }
97 table.matchresult tr { 160 table.matchresult, table.matchresult tr, table.matchresult td, a.matchlink {
98 height: 5px; 161 height: 3px;
99 } 162 margin-left: 0;
100 table.matchresult td { 163 margin-right: 0;
101 height: 5px; 164 padding-left: 0;
165 padding-right: 0;
102 } 166 }
103 a.matchlink { 167 a.matchlink {
104 display: block; 168 display: block;
105 heigth: 5px; 169 }
106 } 170
171 table.descriptiontable {
172 width: 100%;
173 }
174 table.descriptiontable td {
175 overflow: hidden;
176 white-space: nowrap;
177 }
178 table.descriptiontable td div {
179 display: inline-block;
180 overflow: hidden;
181 max-height: 1.4em;
182 white-space: nowrap;
183 }
184
107 </style> 185 </style>
108 186
187
109 </head> 188 </head>
110 189
111 <body> 190 <body>
112 <div id=content> 191 <div id=content>
113 <h1>Nucleotide Sequence ({{blast["BlastOutput_query-len"]}} letters)</h1> 192 <h1>Nucleotide Sequence ({{length}} letters)</h1>
114 193
115 <div id=header> 194 <div id=header>
116 195
117 <table class=headerdata> 196 <table class=headerdata>
118 {% for param, value in params %} 197 {% for param, value in params %}
119 <tr><td class=param>{{param}}</td><td>{{value}}</td></tr> 198 <tr><td class=param>{{param}}</td><td>{{value}}</td></tr>
120 {% endfor %} 199 {% endfor %}
121 </table> 200 </table>
122 201
123 </div> 202 </div>
124 203
125 <div id=graphics> 204 <div id=graphics>
126 <h2>Graphic Summary</h2> 205 <h2>Graphic Summary</h2>
127 206
128 <div class=graphicInfo> 207 <div class=grey>
129 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3> 208 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3>
130 <div class=graphic> 209
131 <h4 class=graphicHeader>Color key for alignment scores</h4> 210 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div>
132 <table class=legend><tr> 211
133 <td style="background-color: {{colors[0]}}">&lt;40</td> 212 <div class=graphic>
134 <td style="background-color: {{colors[1]}}">40-50</td> 213 <h4 class=blackHeader>Color key for alignment scores</h4>
135 <td style="background-color: {{colors[2]}}">50-80</td> 214 <div class=legendwrapper><table class=legend><tr>
136 <td style="background-color: {{colors[3]}}">80-200</td> 215 <td style="background-color: {{colors[0]}}">&lt;40</td>
137 <td style="background-color: {{colors[4]}}">&gt;=200</td> 216 <td style="background-color: {{colors[1]}}">40-50</td>
138 </tr></table> 217 <td style="background-color: {{colors[2]}}">50-80</td>
139 218 <td style="background-color: {{colors[3]}}">80-200</td>
140 {% for line in match_colors %} 219 <td style="background-color: {{colors[4]}}">200&le;</td>
141 <a href={{line.link}}> 220 </tr></table></div>
142 <table class=matchresult><tr> 221
143 {% for match in line.colors %} 222 <div class=tablewrapper>
144 <td style="background-color: {{match[1]}}; width: {{match[0]}}px" /> 223
145 {% endfor %} 224 <div class=scale>
146 </tr></table> 225 <div>query:</div>
147 </a> 226 <table><tr>
148 {% endfor %} 227 {% for s in queryscale %}
149 228 <td width={{s.width|safe}}%><div>{{s.label|safe}}</div></td>
150 <p>hoi</p> 229 {% endfor %}
151 230 </tr></table>
152 </div> 231 </div>
153 </div> 232
154 233 {% for line in match_colors %}
234 <a href="{{line.link}}"
235 onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"'
236 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"'
237 title="{{line.defline}}">
238 <table class=matchresult><tr>
239 {% for match in line.colors %}
240 <td width={{match[0]}}% style="background-color: {{match[1]}}" />
241 {% endfor %}
242 </tr></table>
243 </a>
244
245 {% endfor %}
246 </div>
247 </div>
248 </div>
249 </div>
250
251 <div id=descriptions>
252 <h2>Descriptions</h2>
253
254 <div class=grey><div class=white>
255 <h4 class=blackHeader>Sequences producing significant alignments:</h4>
256 <table class=descriptiontable>
257 <tr>
258 <th>Description</th>
259 <th>Max score</th>
260 <th>Total score</th>
261 <th>Query cover</th>
262 <th>E value</th>
263 <th>Ident</th>
264 <th>Accession</th>
265 </tr>
266 {% for hit in hit_info %}
267 <tr>
268 <td><div>{{hit.description}}</div></td>
269 <td>{{hit.maxscore}}</td>
270 <td>{{hit.totalscore}}</td>
271 <td>{{hit.cover}}</td>
272 <td>{{hit.e_value}}</td>
273 <td>{{hit.ident}}</td>
274 <td>{{hit.accession}}</td>
275 </tr>
276 {% endfor %}
277 </table>
278
279 </div></div>
155 280
156 </div> 281 </div>
157 282
158 </div> 283 </div>
159 </body> 284 </body>