Mercurial > repos > jankanis > blast2html

comparison visualise.html.jinja @ 8:beb83da5a6b7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
div-ified graphics
author Jan Kanis <jan.code@jankanis.nl>
date Thu, 08 May 2014 17:33:41 +0200
parents 9e7927673089
children bbdc8fb0de2b
comparison
equal deleted inserted replaced
7:9e7927673089 8:beb83da5a6b7
61 background-color: white; 61 background-color: white;
62 border: 1px solid #cccccc; 62 border: 1px solid #cccccc;
63 padding: 1em; 63 padding: 1em;
64 } 64 }
65 65
66 .graphicrow {
67 clear: left;
68 width: 100%;
69 }
70
71 .graphicitem {
72 float: left;
73 }
74
66 .graphic { 75 .graphic {
67 background-color: white; 76 background-color: white;
68 border: 2px solid black; 77 border: 2px solid black;
69 padding: .5em; 78 padding: .5em;
70 align: center; 79 align: center;
73 82
74 #graphics .grey { 83 #graphics .grey {
75 text-align: center; 84 text-align: center;
76 } 85 }
77 86
78 .centered, #defline, div.legendwrapper, table.legend, div.tablewrapper { 87 .centered, #defline, div.legend, div.tablewrapper {
79 align: center; 88 align: center;
80 margin-left: auto; 89 margin-left: auto;
81 margin-right: auto; 90 margin-right: auto;
82 } 91 }
83 92
91 text-align: left; 100 text-align: left;
92 height: 4em; 101 height: 4em;
93 overflow-y: hidden; 102 overflow-y: hidden;
94 } 103 }
95 104
96 div.legendwrapper { 105 div.legend {
97 max-width: 40em; 106 max-width: 40em;
98 } 107 }
99 108 div.legend div {
100 table.legend { 109 width: 100%;
101 color: white; 110 color: white;
102 font-weight: bold; 111 font-weight: bold;
103 width: 100%;
104 border-spacing: 0; 112 border-spacing: 0;
105 } 113 }
106 table.legend td { 114 div.legend div .graphicitem {
107 width: 20%; 115 width: 20%;
108 padding: 0; 116 padding: 0;
109 margin: 0; 117 margin: 0;
110 border: none; 118 border: none;
111 } 119 }
130 } 138 }
131 .scale div { 139 .scale div {
132 color: red; 140 color: red;
133 text-align: left; 141 text-align: left;
134 } 142 }
135 .scale table { 143 .scale .graphicrow {
136 width: 100%; 144 margin: .5em 0 .5em 0;
137 height: 1.3em;
138 margin-top: 0;
139 color: white; 145 color: white;
140 table-layout: fixed; 146 }
141 border-collapse: collapse; 147 .scale .graphicitem div {
142 } 148 margin: 0 1px;
143 .scale td { 149 padding: 0 2px;
144 margin 0;
145 padding 0;
146 }
147 .scale td div {
148 margin: 1px 0;
149 text-align: right; 150 text-align: right;
150 background-color: red; 151 background-color: red;
151 color: white; 152 color: white;
152 } 153 }
153 154
154 table.matchresult { 155 a.matchresult {
155 width: 100%;
156 margin-top: 3px;
157 margin-bottom: 0;
158 border-collapse: collapse;
159 }
160 table.matchresult, table.matchresult tr, table.matchresult td, a.matchlink {
161 height: 3px;
162 margin-left: 0;
163 margin-right: 0;
164 padding-left: 0;
165 padding-right: 0;
166 }
167 a.matchlink {
168 display: block; 156 display: block;
157 margin: 0;
158 padding: 0;
159 }
160 div.matchrow {
161 margin-top: 4px;
162 }
163 div.matchrow, div.matchitem {
164 height: 4px;
169 } 165 }
170 166
171 table.descriptiontable { 167 table.descriptiontable {
172 width: 100%; 168 width: 100%;
173 } 169 }
209 205
210 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div> 206 <div id=defline>Mouse-over to show defline and scores, click to show alignments</div>
211 207
212 <div class=graphic> 208 <div class=graphic>
213 <h4 class=blackHeader>Color key for alignment scores</h4> 209 <h4 class=blackHeader>Color key for alignment scores</h4>
214 <div class=legendwrapper><table class=legend><tr> 210 <div class=legend><div class=graphicrow>
215 <td style="background-color: {{colors[0]}}">&lt;40</td> 211 <div class=graphicitem style="background-color: {{colors[0]}}">&lt;40</div>
216 <td style="background-color: {{colors[1]}}">40-50</td> 212 <div class=graphicitem style="background-color: {{colors[1]}}">40-50</div>
217 <td style="background-color: {{colors[2]}}">50-80</td> 213 <div class=graphicitem style="background-color: {{colors[2]}}">50-80</div>
218 <td style="background-color: {{colors[3]}}">80-200</td> 214 <div class=graphicitem style="background-color: {{colors[3]}}">80-200</div>
219 <td style="background-color: {{colors[4]}}">200&le;</td> 215 <div class=graphicitem style="background-color: {{colors[4]}}">200&le;</div>
220 </tr></table></div> 216 </div></div>
217 <div style="clear: left"></div>
221 218
222 <div class=tablewrapper> 219 <div class=tablewrapper>
223 220
224 <div class=scale> 221 <div class=scale>
225 <div>query:</div> 222 <div>query:</div>
226 <table><tr> 223 <div class=graphicrow>
227 {% for s in queryscale %} 224 {% for s in queryscale %}
228 <td width={{s.width|safe}}%><div>{{s.label|safe}}</div></td> 225 <div class=graphicitem
226 style="width: {{s.width|safe}}%">
227 <div style="{{'margin-left: 0px' if loop.first else 'margin-right: 0px' if loop.last}}">{{s.label|safe}}</div>
228 </div>
229 {% endfor %} 229 {% endfor %}
230 </tr></table> 230 </div>
231 <div style="clear: left"></div>
231 </div> 232 </div>
232 233
233 {% for line in match_colors %} 234 {% for line in match_colors %}
234 <a href="{{line.link}}" 235 <a class=matchresult
236 href="{{line.link}}"
235 onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"' 237 onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"'
236 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"' 238 onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"'
237 title="{{line.defline}}"> 239 title="{{line.defline}}">
238 <table class=matchresult><tr> 240 <div class="matchrow graphicrow">
239 {% for match in line.colors %} 241 {% for match in line.colors %}
240 <td width={{match[0]}}% style="background-color: {{match[1]}}" /> 242 <div class="matchitem graphicitem"
243 style="background-color: {{match[1]}}; width: {{match[0]}}%"></div>
241 {% endfor %} 244 {% endfor %}
242 </tr></table> 245 </div>
243 </a> 246 </a>
244 247
245 {% endfor %} 248 {% endfor %}
246 </div> 249 </div>
247 </div> 250 </div>