Mercurial > repos > cpt > cpt_annotation_table

comparison phageqc_report_annotation_table.html @ 1:32e011fa615c draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
planemo upload commit edc74553919d09dcbe27fcadf144612c1ad3a2a2
author cpt
date Wed, 26 Apr 2023 03:42:32 +0000
parents
children
comparison
equal deleted inserted replaced
0:6a4d1bd8ac1d 1:32e011fa615c
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name="description" content="">
9 <meta name="author" content="">
10 <title>Annotation Table</title>
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
12 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
13 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" crossorigin="anonymous">
14 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
15
16 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
17 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
18 <style type="text/css">
19 /*
20 * Base structure
21 */
22
23 /* Move down content because we have a fixed navbar that is 50px tall */
24 body {
25 padding-top: 50px;
26 }
27
28 h3:before {
29 display: block;
30 content: " ";
31 margin-top: -50px;
32 height: 50px;
33 visibility: hidden;
34 }
35
36 /*
37 * Global add-ons
38 */
39
40 .sub-header {
41 padding-bottom: 10px;
42 border-bottom: 1px solid #eee;
43 }
44
45 /*
46 * Top navigation
47 * Hide default border to remove 1px line.
48 */
49 .navbar-fixed-top {
50 border: 0;
51 }
52
53 /*
54 * Sidebar
55 */
56
57 /* Hide for mobile, show later */
58 .sidebar {
59 display: none;
60 }
61 @media (min-width: 768px) {
62 .sidebar {
63 position: fixed;
64 top: 51px;
65 bottom: 0;
66 left: 0;
67 z-index: 1000;
68 display: block;
69 padding: 20px;
70 overflow-x: hidden;
71 overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
72 background-color: #f5f5f5;
73 border-right: 1px solid #eee;
74 }
75 }
76
77 /* Sidebar navigation */
78 .nav-sidebar {
79 margin-right: -21px; /* 20px padding + 1px border */
80 margin-bottom: 20px;
81 margin-left: -20px;
82 }
83 .nav-sidebar > li > a {
84 padding-right: 20px;
85 padding-left: 20px;
86 }
87 .nav-sidebar > .active > a,
88 .nav-sidebar > .active > a:hover,
89 .nav-sidebar > .active > a:focus {
90 color: #fff;
91 background-color: #428bca;
92 }
93
94
95 /*
96 * Main content
97 */
98
99 .main {
100 padding: 20px;
101 }
102 @media (min-width: 768px) {
103 .main {
104 padding-right: 40px;
105 padding-left: 40px;
106 }
107 }
108 .main .page-header {
109 margin-top: 0;
110 }
111
112
113 /*
114 * Placeholder dashboard ideas
115 */
116
117 .placeholders {
118 margin-bottom: 30px;
119 text-align: center;
120 }
121 .placeholders h4 {
122 margin-bottom: 0;
123 }
124 .placeholder {
125 margin-bottom: 20px;
126 }
127 .placeholder img {
128 display: inline-block;
129 border-radius: 50%;
130 }
131
132 td.moron {
133 font-size: 150%;
134 padding: 0px;
135 color: gray;
136 }
137 .strand_emph {
138 text-decoration: underline;
139 color: black;
140 }
141
142 </style>
143 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
144 <!--[if lt IE 9]>
145 <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
146 <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
147 <![endif]-->
148 </head>
149 <body>
150
151 <nav class="navbar navbar-inverse navbar-fixed-top">
152 <div class="container-fluid">
153 <div class="navbar-header">
154 <a class="navbar-brand" href="#">Annotation Table</a>
155 </div>
156 </div>
157 </nav>
158
159 <div class="container-fluid">
160 <div class="row">
161 <div class="col-md-12 main" id="main">
162 <ul class="nav nav-tabs" role="tablist" id="myTabs">
163 <li role="presentation" class="active"><a href="#overview" role="tab" data-toggle="tab">Overview</a></li>
164 {% for (record, data) in annotation_table_data %}
165 <li role="presentation"><a href="#{{ record.id }}" role="tab" data-toggle="tab">{{ record.id }}</a></li>
166 {% endfor %}
167 </ul>
168
169 <!-- Tab panes -->
170 <div class="tab-content">
171 <div role="tabpanel" class="tab-pane active" id="overview">
172 Data on each organism will be accessible from the tabs above.
173 </div>
174 {% for (record, data) in annotation_table_data %}
175 <div role="tabpanel" class="tab-pane" id="{{ record.id }}">
176 <table class="table table-striped" id="data">
177 <thead>
178 <tr>
179 {% for col in annotation_table_col_names %}
180 <th>{{ col[0] }}</th>
181 {% endfor %}
182 </tr>
183 </thead>
184 <tbody>
185 {% for row in data %}
186 <tr>
187 {% for col in row %}
188 <td>{% if col is not string %}<ul>{% for val in col %}<li>{{ val }}</li>{% endfor %}</ul>{% else %}{{ col }}{% endif %}</td>
189 {% endfor %}
190 </tr>
191 {% endfor %}
192 </tbody>
193 </table>
194 </div>
195 {% endfor %}
196 </div>
197 </div>
198 </div>
199 </div>
200
201 <script type="text/javascript">
202 $(document).ready( function () {
203
204
205
206 $('#myTabs a').click(function (e) {
207 e.preventDefault()
208 $(this).tab('show')
209 })
210
211
212
213 jQuery.fn.dataTable.ext.type.detect.unshift( function ( data ) {
214 if ( typeof data !== 'string' ) {
215 return null;
216 }
217
218 var matches = data.match(/^(\d+)\.\.(\d+)/);
219 return matches ? 'genomic' : null;
220 } );
221
222
223
224 jQuery.extend( jQuery.fn.dataTableExt.oSort, {
225 "genomic-pre": function ( a ) {
226 var matches = a.match(/^(\d+)\.\.(\d+)/);
227 console.log(a + " " + matches[1]);
228 return parseInt(matches[1]);
229 },
230
231 "genomic-asc": function ( a, b ) {
232 return ((a < b) ? -1 : ((a > b) ? 1 : 0));
233 },
234
235 "genomic-desc": function ( a, b ) {
236 return ((a < b) ? 1 : ((a > b) ? -1 : 0));
237 }
238 } );
239
240 $('table').DataTable();
241 });
242 </script>
243 </body>
244 </html>