61
+ − 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>
+ − 228 <div class="container">
+ − 229 <div class="featurette">
+ − 230 <h1>Transposable elements</h1>
+ − 231 <p class="featurette-p">
+ − 232 <A HREF="reads-sample-small.fastq/subgroups/bonafide_reads//bonafide_reads-TEs_minus.bedgraph">bedgraph minus strand</A><br/>
+ − 233 <A HREF="reads-sample-small.fastq/subgroups/bonafide_reads//bonafide_reads-TEs_plus.bedgraph">bedgraph plus strand</A><br/>
+ − 234 <A HREF="reads-sample-small.fastq/subgroups/bonafide_reads//bonafide_reads-TEs_reads_counts.txt">read number per TE 0 to 3 mismatches (txt)</A><br/>
+ − 235 <A HREF="reads-sample-small.fastq/subgroups/bonafide_reads//bonafide_reads-TEs_reads_counts_mismatches.txt">read number per TE with 1 to 3 mismatches (txt)</A><br/>
+ − 236 <A HREF="reads-sample-small.fastq/subgroups/bonafide_reads//bonafide_reads-TEs_reads_counts_nomismatches.txt">read number per TE with no mismatch (txt)</A><br/>
+ − 237 <A HREF="reads-sample-small.fastq/subgroups/bonafide_reads//bonafide_reads-TEs_sorted.bam">TEs mappers (sorted bam)</A><br/>
+ − 238 <A HREF="reads-sample-small.fastq/subgroups/bonafide_reads//bonafide_reads-TEs_unique_sorted.bam">TEs unique mappers (sorted bam)</A><br/>
+ − 239
+ − 240 </p>
+ − 241 </div>
+ − 242 </div>
+ − 243
+ − 244 <div id="page">
+ − 245 <div id="container">
+ − 246 <div class="each-gallery">
+ − 247 <div id="gallery" class="content">
+ − 248 <div id="controls0" class="controls"></div>
+ − 249 <div class="slideshow-container">
+ − 250 <div id="loading0" class="loader"></div>
+ − 251 <div id="slideshow0" class="slideshow"></div>
+ − 252 </div>
+ − 253 <div id="caption0" class="caption-container">Reads randomly assigned</div>
+ − 254 </div>
+ − 255 <div id="thumbs0" class="navigation">
+ − 256 <input type="text" id="myInput0" onkeyup="search(this)" placeholder="Search for names...">
+ − 257 <ul class="thumbs noscript">
+ − 258
+ − 259 <li>
+ − 260 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/BATUMI_I.png" title="BATUMI_I">BATUMI_I</a>
+ − 261 </li>
+ − 262
+ − 263 <li>
+ − 264 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/BATUMI_LTR.png" title="BATUMI_LTR">BATUMI_LTR</a>
+ − 265 </li>
+ − 266
+ − 267 <li>
+ − 268 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/BS2.png" title="BS2">BS2</a>
+ − 269 </li>
+ − 270
+ − 271 <li>
+ − 272 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/DMCR1A.png" title="DMCR1A">DMCR1A</a>
+ − 273 </li>
+ − 274
+ − 275 <li>
+ − 276 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/DMRT1B.png" title="DMRT1B">DMRT1B</a>
+ − 277 </li>
+ − 278
+ − 279 <li>
+ − 280 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/FW.png" title="FW">FW</a>
+ − 281 </li>
+ − 282
+ − 283 <li>
+ − 284 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/G6_DM.png" title="G6_DM">G6_DM</a>
+ − 285 </li>
+ − 286
+ − 287 <li>
+ − 288 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/Gypsy2-LTR_DM.png" title="Gypsy2-LTR_DM">Gypsy2-LTR_DM</a>
+ − 289 </li>
+ − 290
+ − 291 <li>
+ − 292 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/I_DM.png" title="I_DM">I_DM</a>
+ − 293 </li>
+ − 294
+ − 295 <li>
+ − 296 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/MAX_I.png" title="MAX_I">MAX_I</a>
+ − 297 </li>
+ − 298
+ − 299 <li>
+ − 300 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/MAX_LTR.png" title="MAX_LTR">MAX_LTR</a>
+ − 301 </li>
+ − 302
+ − 303 <li>
+ − 304 <a class="thumb" href="reads-sample-small.fastq/subgroups/bonafide_reads//Gviz_TEs/PROTOP.png" title="PROTOP">PROTOP</a>
+ − 305 </li>
+ − 306
+ − 307 </ul>
+ − 308 </div>
+ − 309 <div style="clear: both;"></div></div>
+ − 310 </div>
+ − 311 </div>
+ − 312
+ − 313 <!-- FOOTER -->
+ − 314 <div class="container">
+ − 315 <footer>
+ − 316
+ − 317 </footer>
+ − 318 </div>
+ − 319 <!-- Le javascript
+ − 320 ================================================== -->
+ − 321 <!-- Placed at the end of the document so the pages load faster -->
+ − 322 <script type="text/javascript" src="js/filter.js"></script>
+ − 323 <script type="text/javascript" src="js/jquery.js"></script>
+ − 324 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
+ − 325 <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
+ − 326 <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
+ − 327 <script type="text/javascript" src="js/bootstrap-table.js"></script>
+ − 328 <script type="text/javascript" src="js/bootstrap.min.js"></script>
+ − 329 <script type="text/javascript">
+ − 330 jQuery(document).ready(function($) {
+ − 331 // We only want these styles applied when javascript is enabled
+ − 332 $('div.navigation').css({'width' : '300px', 'float' : 'left'});
+ − 333 $('div.content').css('display', 'block');
+ − 334
+ − 335 $(".each-gallery").each(function(i){
+ − 336 // Initially set opacity on thumbs and add
+ − 337 // additional styling for hover effect on thumbs
+ − 338 var onMouseOutOpacity = 0.67;
+ − 339 $('#thumbs + i + ul.thumbs li').opacityrollover({
+ − 340 mouseOutOpacity: onMouseOutOpacity,
+ − 341 mouseOverOpacity: 1.0,
+ − 342 fadeSpeed: 'fast',
+ − 343 exemptionSelector: '.selected'
+ − 344 });
+ − 345
+ − 346 // Initialize Advanced Galleriffic Gallery
+ − 347 var gallery = $('#thumbs'+i).galleriffic({
+ − 348 delay: 2500,
+ − 349 numThumbs: 22,
+ − 350 preloadAhead: 10,
+ − 351 enableTopPager: true,
+ − 352 enableBottomPager: true,
+ − 353 maxPagesToShow: 7,
+ − 354 imageContainerSel: '#slideshow'+ i,
+ − 355 controlsContainerSel: '#controls' + i,
+ − 356 captionContainerSel: '#caption' + i,
+ − 357 loadingContainerSel: '#loading' + i,
+ − 358 renderSSControls: true,
+ − 359 renderNavControls: true,
+ − 360 playLinkText: 'Play',
+ − 361 pauseLinkText: 'Pause',
+ − 362 prevLinkText: '‹ Previous',
+ − 363 nextLinkText: 'Next ›',
+ − 364 nextPageLinkText: 'Next ›',
+ − 365 prevPageLinkText: '‹ Prev',
+ − 366 enableHistory: false,
+ − 367 autoStart: false,
+ − 368 syncTransitions: true,
+ − 369 defaultTransitionDuration: 900,
+ − 370 onSlideChange: function(prevIndex, nextIndex) {
+ − 371 // 'this' refers to the gallery, which is an extension of $('#thumbs')
+ − 372 this.find('ul.thumbs').children()
+ − 373 .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
+ − 374 .eq(nextIndex).fadeTo('fast', 1.0);
+ − 375 },
+ − 376 onPageTransitionOut: function(callback) {
+ − 377 this.fadeTo('fast', 0.0, callback);
+ − 378 },
+ − 379 onPageTransitionIn: function() {
+ − 380 this.fadeTo('fast', 1.0);
+ − 381 }
+ − 382 });
+ − 383 });
+ − 384 });
+ − 385 </script>
+ − 386 </body>
+ − 387 </html>
+ − 388