comparison test-data/res.html @ 61:9185ca0a7b43 draft

Updated package according to recommendations.
author pierre.pouchin
date Wed, 16 Jan 2019 08:18:13 -0500
parents
children 11708af40030
comparison
equal deleted inserted replaced
60:9645d995fb3c 61:9185ca0a7b43
1
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="utf-8">
6 <title>pipeline</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <meta name="description" content="">
9 <meta name="author" content="">
10 <!-- Le styles -->
11 <link href="css/bootstrap.css" rel="stylesheet">
12 <link href="css/bootstrap-table.css" rel="stylesheet">
13 <style type="text/css">
14 body {
15 padding-top: 60px;
16 padding-bottom: 40px;
17 }
18 div#page {
19 width: 940px;
20 background-color: #fff;
21 margin: 0 auto;
22 text-align: left;
23 border-color: #fff;
24 border-style: none solid solid;
25 border-width: medium 1px 1px;
26 }
27
28 div.content {
29 display: none;
30 float: right;
31 width: 550px;
32 }
33 div.content a, div.navigation a {
34 text-decoration: none;
35 color: #777;
36 }
37 div.content a:focus, div.content a:hover, div.content a:active {
38 text-decoration: underline;
39 }
40
41 div.controls {
42 margin-top: 5px;
43 height: 23px;
44 }
45
46 div.controls a {
47 padding: 5px;
48 }
49 div.ss-controls {
50 float: left;
51 }
52 div.nav-controls {
53 float: right;
54 }
55 div.slideshow-container {
56 position: relative;
57 clear: both;
58 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
59 }
60 div.loader {
61 position: absolute;
62 top: 0;
63 left: 0;
64 background-image: url('loader.gif');
65 background-repeat: no-repeat;
66 background-position: center;
67 width: 550px;
68 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
69 }
70 div.slideshow {
71
72 }
73
74 div.slideshow span.image-wrapper {
75 display: block;
76 position: absolute;
77 top: 0;
78 left: 0;
79 }
80 div.slideshow a.advance-link {
81 display: block;
82 width: 550px;
83 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
84 line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
85 text-align: center;
86 }
87 div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
88 text-decoration: none;
89 }
90 div.slideshow img {
91 vertical-align: middle;
92 border: 1px solid #ccc;
93 }
94
95 div.image-title {
96 font-weight: bold;
97 font-size: 1.4em;
98 }
99
100 div.image-desc {
101 line-height: 1.3em;
102 padding-top: 12px;
103 }
104 div.navigation {
105
106 }
107 ul.thumbs {
108 clear: both;
109 margin: 0;
110 padding: 0;
111 }
112 ul.thumbs li {
113 float: none;
114 padding: 0;
115 margin: 0;
116 list-style: none;
117 }
118 a.thumb {
119 padding: 0;
120 display: inline;
121 border: none;
122 }
123 ul.thumbs li.selected a.thumb {
124 color: #000;
125 font-weight: bold;
126 }
127 a.thumb:focus {
128 outline: none;
129 }
130 ul.thumbs img {
131 border: none;
132 display: block;
133 }
134 div.pagination {
135 clear: both;
136 }
137 div.navigation div.top {
138 margin-bottom: 12px;
139 height: 11px;
140 }
141 div.navigation div.bottom {
142 margin-top: 12px;
143 }
144 div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
145 display: block;
146 float: left;
147 margin-right: 2px;
148 padding: 4px 7px 2px 7px;
149 border: 1px solid #ccc;
150 }
151 div.pagination a:hover {
152 background-color: #eee;
153 text-decoration: none;
154 }
155 div.pagination span.current {
156 font-weight: bold;
157 background-color: #000;
158 border-color: #000;
159 color: #fff;
160 }
161 div.pagination span.ellipsis {
162 border: none;
163 padding: 5px 0 3px 2px;
164 }
165
166 div.download {
167 float: right;
168 }
169
170 div.caption-container {
171 position: relative;
172 clear: left;
173 height: 75px;
174 }
175 span.image-caption {
176 display: block;
177 position: absolute;
178 width: 550px;
179 top: 0;
180 left: 0;
181 }
182 div.caption {
183 padding: 12px;
184 }
185
186 /* Featurettes
187 ------------------------- */
188
189 .featurette {
190 padding-top: 20px; /* Vertically center images part 1: add padding above and below text. */
191 overflow: hidden; /* Vertically center images part 2: clear their floats. */
192 text-align: center;
193 }
194
195 .featurette-p
196 {
197 text-align: left;
198 }
199
200 .featurette-image {
201 margin-top: 10px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
202 width: 450px;
203 height: auto;
204 }
205
206 </style>
207 <link href="css/bootstrap-responsive.css" rel="stylesheet">
208 </head>
209 <body>
210
211 <div class="navbar navbar-inverse navbar-fixed-top">
212 <div class="navbar-inner">
213 <div class="container">
214 <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
215 <span class="icon-bar"></span>
216 <span class="icon-bar"></span>
217 <span class="icon-bar"></span>
218 </button>
219 <a class="brand" href="report.txt">Report</a>
220 <div class="nav-collapse collapse">
221 <ul class="nav">
222 <li class="active"><a href="reads-sample-small.fastq.html">reads-sample-small.fastq</a></li>
223 </ul>
224 </div><!--/.nav-collapse -->
225 </div>
226 </div>
227 </div><div class="container"><p><a class="btn" href="reads-sample-small.fastq-sub.html">View details &raquo;</a></p></div>
228
229 <div class="container">
230 <div class="featurette">
231 <h1>reads-sample-small.fastq</h1>
232 <p class="featurette-p">
233 <A HREF="reads-sample-small.fastq/genome//reads-sample-small.fastq_18-29_sorted.bam">alignment (bam)</A><br/>
234 <A HREF="reads-sample-small.fastq/genome//reads-sample-small.fastq_18-29_minus.bedgraph">bedgraph minus strand</A><br/>
235 <A HREF="reads-sample-small.fastq/genome//reads-sample-small.fastq_18-29_plus.bedgraph">bedgraph plus strand</A><br/>
236 <A HREF="reads-sample-small.fastq/genome//reads-sample-small.fastq_18-29_unique_minus.bedgraph">bedgraph unique minus strand</A><br/>
237 <A HREF="reads-sample-small.fastq/genome//reads-sample-small.fastq_18-29_unique_plus.bedgraph">bedgraph unique plus strand</A><br/>
238 <A HREF="reads-sample-small.fastq/genome//dup_mapnum.txt">mappers (txt)</A><br/>
239 <A HREF="reads-sample-small.fastq/genome//distribution.txt">mappers size distribution (txt)</A><br/>
240 <A HREF="reads-sample-small.fastq/genome//reads-sample-small.fastq_18-29_unique_sorted.bam">unique alignment (bam)</A><br/>
241 <A HREF="reads-sample-small.fastq/genome//dup_unique.txt">unique mappers (txt)</A><br/>
242 <A HREF="reads-sample-small.fastq/genome//dup_nonmapp.txt">unmapped (txt)</A><br/>
243
244 </p><img class="featurette-image" src="reads-sample-small.fastq/genome//distribution.png"/><br />
245 </div>
246 </div>
247 <div class="container"><h2>mappers #: 39040</h2><h2>unique mappers #: 38991</h2> </div>
248
249 <div id="page">
250 <div id="container">
251 <div class="each-gallery">
252 <div id="gallery" class="content">
253 <div id="controls0" class="controls"></div>
254 <div class="slideshow-container">
255 <div id="loading0" class="loader"></div>
256 <div id="slideshow0" class="slideshow"></div>
257 </div>
258 <div id="caption0" class="caption-container">Uniquely mapped reads</div>
259 </div>
260 <div id="thumbs0" class="navigation">
261 <input type="text" id="myInput0" onkeyup="search(this)" placeholder="Search for names...">
262 <ul class="thumbs noscript">
263
264 <li>
265 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/unique/chrom_1.png" title="chrom_1">chrom_1</a>
266 </li>
267
268 <li>
269 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/unique/chrom_2.png" title="chrom_2">chrom_2</a>
270 </li>
271
272 <li>
273 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/unique/chrom_3.png" title="chrom_3">chrom_3</a>
274 </li>
275
276 <li>
277 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/unique/chrom_4.png" title="chrom_4">chrom_4</a>
278 </li>
279
280 <li>
281 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/unique/chrom_5.png" title="chrom_5">chrom_5</a>
282 </li>
283
284 <li>
285 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/unique/chrom_6.png" title="chrom_6">chrom_6</a>
286 </li>
287
288 </ul>
289 </div>
290 </div>
291 <div id="page">
292 <div id="container">
293 <div class="each-gallery">
294 <div id="gallery" class="content">
295 <div id="controls1" class="controls"></div>
296 <div class="slideshow-container">
297 <div id="loading1" class="loader"></div>
298 <div id="slideshow1" class="slideshow"></div>
299 </div>
300 <div id="caption1" class="caption-container">Reads randomly assigned</div>
301 </div>
302 <div id="thumbs1" class="navigation">
303 <input type="text" id="myInput1" onkeyup="search(this)" placeholder="Search for names...">
304 <ul class="thumbs noscript">
305
306 <li>
307 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/rand/chrom_1.png" title="chrom_1">chrom_1</a>
308 </li>
309
310 <li>
311 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/rand/chrom_2.png" title="chrom_2">chrom_2</a>
312 </li>
313
314 <li>
315 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/rand/chrom_3.png" title="chrom_3">chrom_3</a>
316 </li>
317
318 <li>
319 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/rand/chrom_4.png" title="chrom_4">chrom_4</a>
320 </li>
321
322 <li>
323 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/rand/chrom_5.png" title="chrom_5">chrom_5</a>
324 </li>
325
326 <li>
327 <a class="thumb" href="reads-sample-small.fastq/genome//Gviz/rand/chrom_6.png" title="chrom_6">chrom_6</a>
328 </li>
329
330 </ul>
331 </div>
332 <div style="clear: both;"></div></div>
333 </div>
334 </div>
335
336 <!-- FOOTER -->
337 <div class="container">
338 <footer>
339
340 </footer>
341 </div>
342 <!-- Le javascript
343 ================================================== -->
344 <!-- Placed at the end of the document so the pages load faster -->
345 <script type="text/javascript" src="js/filter.js"></script>
346 <script type="text/javascript" src="js/jquery.js"></script>
347 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
348 <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
349 <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
350 <script type="text/javascript" src="js/bootstrap-table.js"></script>
351 <script type="text/javascript" src="js/bootstrap.min.js"></script>
352 <script type="text/javascript">
353 jQuery(document).ready(function($) {
354 // We only want these styles applied when javascript is enabled
355 $('div.navigation').css({'width' : '300px', 'float' : 'left'});
356 $('div.content').css('display', 'block');
357
358 $(".each-gallery").each(function(i){
359 // Initially set opacity on thumbs and add
360 // additional styling for hover effect on thumbs
361 var onMouseOutOpacity = 0.67;
362 $('#thumbs + i + ul.thumbs li').opacityrollover({
363 mouseOutOpacity: onMouseOutOpacity,
364 mouseOverOpacity: 1.0,
365 fadeSpeed: 'fast',
366 exemptionSelector: '.selected'
367 });
368
369 // Initialize Advanced Galleriffic Gallery
370 var gallery = $('#thumbs'+i).galleriffic({
371 delay: 2500,
372 numThumbs: 22,
373 preloadAhead: 10,
374 enableTopPager: true,
375 enableBottomPager: true,
376 maxPagesToShow: 7,
377 imageContainerSel: '#slideshow'+ i,
378 controlsContainerSel: '#controls' + i,
379 captionContainerSel: '#caption' + i,
380 loadingContainerSel: '#loading' + i,
381 renderSSControls: true,
382 renderNavControls: true,
383 playLinkText: 'Play',
384 pauseLinkText: 'Pause',
385 prevLinkText: '&lsaquo; Previous',
386 nextLinkText: 'Next &rsaquo;',
387 nextPageLinkText: 'Next &rsaquo;',
388 prevPageLinkText: '&lsaquo; Prev',
389 enableHistory: false,
390 autoStart: false,
391 syncTransitions: true,
392 defaultTransitionDuration: 900,
393 onSlideChange: function(prevIndex, nextIndex) {
394 // 'this' refers to the gallery, which is an extension of $('#thumbs')
395 this.find('ul.thumbs').children()
396 .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
397 .eq(nextIndex).fadeTo('fast', 1.0);
398 },
399 onPageTransitionOut: function(callback) {
400 this.fadeTo('fast', 0.0, callback);
401 },
402 onPageTransitionIn: function() {
403 this.fadeTo('fast', 1.0);
404 }
405 });
406 });
407 });
408 </script>
409 </body>
410 </html>
411