Mercurial > repos > jankanis > blast2html

comparison visualise.html.jinja @ 5:1df2bfce5c24

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first features are working, partial match table
author Jan Kanis <jan.code@jankanis.nl>
date Wed, 07 May 2014 18:49:54 +0200
parents
children d20ce91e1297
comparison
equal deleted inserted replaced
4:34211f5b83fd 5:1df2bfce5c24
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: Verdana,Arial,Sans-Serif;
12 }
13
14
15 #content {
16 margin: 0 2em;
17 padding: 0.5em;
18 border: 1px solid #888888;
19 background-color: #d3dff5;
20 }
21
22 h1, h2, h3, h4, h5, h6 {
23 color: #2A6979;
24 font-family: arial,verdana,sans-serif;
25 letter-spacing: -1px;
26 margin: 1.2em 0 0.3em;
27 }
28
29 h1 {
30 border-bottom: 1px solid #CCCCCC;
31 font-size: 150%;
32 padding-bottom: 0.1em;
33 }
34
35 h2 {
36 font-size: 120%;
37 font-weight: bold;
38 }
39
40 h4.graphicHeader {
41 color: black;
42 letter-spacing: 0;
43 font-style: bold;
44 }
45
46 .headerdata {
47 font-size: 90%;
48 }
49 .headerdata .param {
50 font-weight: bold;
51 text-align: right;
52 padding: 0 1em;
53 }
54
55 .graphicInfo {
56 background-color: #eeeeee;
57 border: 1px solid #cccccc;
58 padding: 1em;
59 text-align: center;
60 }
61
62 .graphic {
63 background-color: white;
64 border: 2px solid black;
65 padding: .5em;
66 align: center;
67 margin: auto;
68 }
69
70 .centered {
71 align: center;
72 margin-left: auto;
73 margin-right: auto;
74 }
75
76 table.legend {
77 color: white;
78 font-weight: bold;
79 align: center;
80 margin: 0 auto;
81 width: 40em;
82 border-spacing: 0;
83 }
84 table.legend td {
85 width: 20%;
86 padding: 0;
87 margin: 0;
88 border: none;
89 }
90
91 table.matchresult {
92 height: 5px;
93 width: 40em;
94 align: center;
95 margin: 5px auto;
96 }
97 </style>
98
99 </head>
100
101 <body>
102 <div id=content>
103 <h1>Nucleotide Sequence ({{blast["BlastOutput_query-len"]}} letters)</h1>
104
105 <div id=header>
106
107 <table class=headerdata>
108 {% for param, value in params %}
109 <tr><td class=param>{{param}}</td><td>{{value}}</td></tr>
110 {% endfor %}
111 </table>
112
113 </div>
114
115 <div id=graphics>
116 <h2>Graphic Summary</h2>
117
118 <div class=graphicInfo>
119 <h3 class=centered>Distribution of {{hits|length}} Blast Hits on the Query Sequence</h3>
120 <div class=graphic>
121 <h4 class=graphicHeader>Color key for alignment scores</h4>
122 <table class=legend><tr>
123 <td style="background-color: {{colors[0]}}">&lt;40</td>
124 <td style="background-color: {{colors[1]}}">40-50</td>
125 <td style="background-color: {{colors[2]}}">50-80</td>
126 <td style="background-color: {{colors[3]}}">80-200</td>
127 <td style="background-color: {{colors[4]}}">&gt;=200</td>
128 </tr></table>
129
130 {% for line in match_colors %}
131 <table class=matchresult><tr>
132 {% for match in line.colors %}
133 <td width={{match[0]}} style="background-color: {{match[1]}}">&nbsp</td>
134 {% endfor %}
135 </tr></table>
136 {% endfor %}
137
138 <p>hoi</p>
139
140 </div>
141 </div>
142
143
144 </div>
145
146 </div>
147 </body>
148 </html>
149