Mercurial > repos > frogs > frogs_3_1_0

comparison test-data/references/01-prepro-flash.html @ 0:59bc96331073 draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
planemo upload for repository https://github.com/geraldinepascal/FROGS-wrappers/tree/v3.1.0 commit 08296fc88e3e938c482c631bd515b3b7a0499647
author frogs
date Thu, 28 Feb 2019 10:14:49 -0500
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:59bc96331073
1 <!DOCTYPE html>
2 <!--
3 # Copyright (C) 2015 INRA
4 #
5 # This program is free software: you can redistribute it and/or modify
6 # it under the terms of the GNU General Public License as published by
7 # the Free Software Foundation, either version 3 of the License, or
8 # (at your option) any later version.
9 #
10 # This program is distributed in the hope that it will be useful,
11 # but WITHOUT ANY WARRANTY; without even the implied warranty of
12 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 # GNU General Public License for more details.
14 #
15 # You should have received a copy of the GNU General Public License
16 # along with this program. If not, see <https://www.gnu.org/licenses/>.
17 -->
18 <html>
19 <head>
20 <title>FROGS Pre-process</title>
21 <meta charset="UTF-8">
22 <meta name="version" content="r3.0-v1.0">
23 <!-- CSS -->
24
25
26 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"></link>
27 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"></link>
28 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
29 <style type="text/css">
30 #js-alert {
31 width: 90%;
32 margin-right: auto;
33 margin-left: auto;
34 }
35 #content {
36 width: 90%;
37 margin-right: auto;
38 margin-left: auto;
39 }
40 .clear {
41 clear: both;
42 height: 0px;
43 width: 100%;
44 float: none !important;
45 }
46 ul.nav-tabs {
47 margin-bottom: 30px;
48 }
49 .page-item.active .page-link {
50 z-index: 1;
51 color: #fff;
52 background-color: #8EADAC;
53 border-color: #8EADAC;
54 outline: none !important;
55 box-shadow: none !important;
56 }
57 .btn {
58 color: #fff;
59 border:#8EADAC;
60 background-color: #8EADAC;
61 }
62 .btn:focus, .btn:active {
63 outline: none !important;
64 box-shadow: none !important;
65 }
66 .btn:hover:enabled{
67 color: #fff;
68 border:#648a89;
69 background-color: #648a89;
70 cursor:pointer !important;
71 }
72 .pb-2, .py-2 {
73 padding-bottom: 1.5rem !important;
74 margin-bottom: 2rem !important;
75 margin-top: 4rem !important;
76 }
77 .pb-2-first{
78 padding-bottom: 1.5rem !important;
79 margin-bottom: 2rem !important;
80 margin-top: 1rem !important;
81 }
82 /* ##### THEME FOR CHECKBOXES ##### */
83 .container {
84 position: relative;
85 padding-left: 0px;
86 margin-bottom: 15px;
87 cursor: pointer;
88 -webkit-user-select: none;
89 -moz-user-select: none;
90 -ms-user-select: none;
91 user-select: none;
92 }
93
94 /* Hide the browser's default checkbox */
95 .container input {
96 position: absolute;
97 opacity: 0;
98 cursor: pointer;
99 }
100
101 /* Create a custom checkbox */
102 .checkmark {
103 position: absolute;
104 top: 0;
105 left: 0;
106 height: 20px;
107 width: 20px;
108 background-color: #8EADAC;
109 border-radius: 5px;
110 opacity:0.65;
111 }
112
113 /* On mouse-over, add a grey background color */
114 .container:hover input ~ .checkmark {
115 background-color: #648a89;
116 }
117
118 /* When the checkbox is checked, add a blue background */
119 .container input:checked ~ .checkmark {
120 background-color: #8EADAC;
121 opacity:1;
122 }
123
124 /* Create the checkmark/indicator (hidden when not checked) */
125 .checkmark:after {
126 content: "";
127 position: absolute;
128 display: none;
129 }
130
131 /* Show the checkmark when checked */
132 .container input:checked ~ .checkmark:after {
133 display: block;
134 }
135
136 /* Style the checkmark/indicator */
137 .container .checkmark:after {
138 left: 7px;
139 top: 3px;
140 width: 6px;
141 height: 10px;
142 border: solid white;
143 border-width: 0 3px 3px 0;
144 -webkit-transform: rotate(45deg);
145 -ms-transform: rotate(45deg);
146 transform: rotate(45deg);
147 }
148 .highcharts-button > path{
149 stroke:#fff !important;
150 fill:#8EADAC !important;
151 }
152 g.highcharts-button{
153 cursor:pointer !important;
154 }
155 g.highcharts-button:hover{
156 color: #fff;
157 border:#648a89;
158 background-color: #648a89;
159 background-color: #648a89;
160 cursor:pointer !important;
161 }
162 <!--
163 .selectpicker{
164 background-color:rgb(100, 138, 137,0.25);
165 border-color:#8EADAC;
166 }
167 .selectpicker:hover{
168 background-color:rgb(100, 138, 137,0.25);
169 border-color:#8EADAC;
170 }
171 -->
172 option{
173 color:green
174 }
175 option:active, option:hover {
176 outline: none !important;
177 }
178
179 /* make it red instead (with with same width and style) */
180 option:active, option:hover {
181 box-shadow:red !important;
182 outline-color: red !important;
183 }
184 select { -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; } select:hover { background-color:gren; } option:hover { background-color:yellow; } option { -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; color:blue; background-color:yellow; }
185
186 </style>
187 <!-- JS -->
188 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
189 <script type="text/javascript" src="https://code.highcharts.com/4.1.4/highcharts.js"></script>
190 <script type="text/javascript" src="https://code.highcharts.com/4.1.4/modules/exporting.js"></script>
191 <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
192 <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
193 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
194 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
195 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
196
197
198
199 <script type="text/javascript">
200 /*
201 * HTMLTable.js 0.1.0 - HTMLTable Library
202 *
203 * Copyright (c) 2015 Escudie Frederic
204 * Licensed under the MIT (https://www.opensource.org/licenses/mit-license.php) license.
205 */
206 function HTMLtable(e){var t,r,n=e,a=";";this.deleteColumns=function(e){for(var a=n.getElementsByTagName("tr"),o=0;o<a.length;o++){s=0;var i=a[o].getElementsByTagName("td");0==i.length&&(i=a[o].getElementsByTagName("th"));for(var v=0,s=0;s<t[1];s++)if(!r[o][s]){var f=i[v].getAttribute("colspan");if(null!=f)for(var m=0;f>m;m++){if(in_array(s+m,e)){var u=i[v].getAttribute("colspan");u-1==0?i[v].removeAttribute("colspan"):i[v].setAttribute("colspan",u-1)}if(null==i[v].getAttribute("colspan")){var h=i[v];a[o].removeChild(h),v--}}else if(in_array(s,e)){var h=i[v];a[o].removeChild(h),v--}v++}}l(),g()},this.filter=function(e,a){var l=new RegExp(e),g=new Array;null!=a&&a||(g.c0=!0);for(var o=n.getElementsByTagName("tr"),i=0;i<o.length;i++){f=0;var v=o[i].getElementsByTagName("td");if(0!=v.length)for(var s=0,f=0;f<t[1];f++)r[i][f]||(l.test(v[s].innerHTML)&&(g["c"+f]=!0),s++)}for(var m=new Array,u=0;u<t[1];u++)void 0===g["c"+u]&&m.push(u);this.deleteColumns(m)},this.getModel=function(){return n};var l=function(){for(var e=0,r=0,a=n.getElementsByTagName("tr"),l=0;l<a.length;l++){var g=0;e++;var o=a[l].getElementsByTagName("td");0==o.length&&(o=a[l].getElementsByTagName("th"));for(var i=0;i<o.length;i++){var v=o[i].getAttribute("colspan");g+=null==v?1:parseInt(v)}g>r&&(r=g)}t=new Array(2),t[0]=e,t[1]=r},g=function(){r=new Array(t[0]);for(var e=0;e<t[0];e++){r[e]=new Array(t[1]);for(var a=0;a<t[1];a++)r[e][a]=!1}for(var l=n.getElementsByTagName("tr"),g=0;g<l.length;g++){v=0;var o=l[g].getElementsByTagName("td");0==o.length&&(o=l[g].getElementsByTagName("th"));for(var i=0,v=0;v<t[1];v++)if(!r[g][v]){var s=0,f=0,m=o[i].getAttribute("rowspan");null!=m&&(s=parseInt(m)-1);var u=o[i].getAttribute("colspan");null!=u&&(f=parseInt(u)-1);for(var h=s;h>=0;h--)for(var y=f;y>=0;y--)(0!=h||0!=y)&&(r[g+h][v+y]=!0);i++}}};this.replace=function(e,a,l){var g=new RegExp(e);null==a&&(a=""),null==l&&(l="");for(var o=n.getElementsByTagName("tr"),i=0;i<o.length;i++){f=0;var v=o[i].getElementsByTagName("td");if(0!=v.length)for(var s=0,f=0;f<t[1];f++)if(!r[i][f]){var m=g.exec(v[s].innerHTML);null!=m&&(void 0===m[1]&&(m[1]=""),v[s].innerHTML=a+m[1]+l),s++}}},this.toCSV=function(){for(var e="",l=n.getElementsByTagName("tr"),g=0;g<l.length;g++){var o=l[g].getElementsByTagName("td");0==o.length&&(o=l[g].getElementsByTagName("th"));for(var i=0,v=0;v<t[1];v++)r[g][v]||(e+=o[i].innerHTML,i++),e+=a;e=e.substr(0,e.length-1)+"\n"}return e},l(),g()}var in_array=function(e,t){for(var r in t)if(t[r]==e)return!0;return!1};
207
208 /*
209 * dataTableExtractor.plugin.js 0.1.0 - datatableExport Library
210 *
211 * Copyright (c) 2015 Escudie Frederic
212 * Licensed under the MIT (https://www.opensource.org/licenses/mit-license.php) license.
213 */
214 !function(t){t.fn.datatableExport=function(a){var e={anchor_id:t(this).attr("id"),table_id:null,csv_separator:";",omitted_columns:[]},n=t.extend(e,a);if(!t(this).length)throw"The element where the datatableExport is called does not exist.";if(void 0==n.anchor_id)throw"The datatableExport plugin must be called on an element with id.";if(null==n.table_id)throw"You must set the table_id parameter in datatableExport plugin.";if(!t("#"+n.table_id))throw"The datatable '#"+n.table_id+"' cannot be retieve in DOM.";return this.each(function(){var a=$(this).find("button");a.on("click",function(){t.fn.datatableExport.csv(n.anchor_id,n.table_id,n.csv_separator,n.omitted_columns)})})},t.fn.datatableExport.cleanCellMarkup=function(a,e){t.parseHTML(e);t("#"+a).append('<div class="hidden data-tmp">'+e+"</div>"),t("#"+a+" .data-tmp").find("input").each(function(){var a="";a=t(this).is(":checkbox")?t(this).is(":checked")?"true":"false":t(this).val(),t(this).replaceWith(a)});var n=t("#"+a+" .data-tmp").text();return t("#"+a+" .data-tmp").remove(),n},t.fn.datatableExport.csv=function(a,e,n,i){var l="",r=t("#"+e).DataTable(),d=t("#"+e+" thead")[0],o=new HTMLtable(d.cloneNode(!0));o.deleteColumns(i),l+=o.toCSV();var c=r.rows().data();t.each(c,function(e,n){for(var r="",d=0;d<n.length;d++)-1==t.inArray(d,i)&&(r+='"'+t.fn.datatableExport.cleanCellMarkup(a,n[d])+'";');""!=r&&(r=r.slice(0,-1)),l+=r+"\n"}),t("#"+a+"-extract-csv").length||t("#"+a).append('<a id="'+a+'-extract-csv" href="data:text/csv;charset=UTF-8,'+encodeURI(l)+'" download="data.csv" style="display:none;"></a>'),t("#"+a+"-extract-csv")[0].click()}}(jQuery);
215 </script>
216
217 <script type="text/javascript">
218 Highcharts.SVGRenderer.prototype.symbols.download = function (x, y, w, h) {
219 var path = [
220 // Arrow stem
221 'M', x + w * 0.5, y,
222 'L', x + w * 0.5, y + h * 0.7,
223 // Arrow head
224 'M', x + w * 0.3, y + h * 0.5,
225 'L', x + w * 0.5, y + h * 0.7,
226 'L', x + w * 0.7, y + h * 0.5,
227 // Box
228 'M', x, y + h * 0.9,
229 'L', x, y + h,
230 'L', x + w, y + h,
231 'L', x + w, y + h * 0.9
232 ];
233 return path;
234 };
235
236 /**
237 * Returns the string representation of the number.
238 * @param pValue {Float} The number to process.
239 * @return {String} The string representation (example: 12856892.11111 => 12,856,892.11).
240 */
241 var numberDisplay = function( pValue ){
242 var new_val = "" ;
243 if( ("" + pValue + "").indexOf(".") != -1 ){
244 new_val = pValue.toFixed(2).replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
245 } else {
246 new_val = pValue.toFixed().replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
247 }
248 return new_val ;
249 }
250 Highcharts.setOptions({
251 colors : ['#8EADAC', '#DE9F73','#7cb5ec','#434348','#90ed7d','#f7a35c','#8085e9','#f15c80','#e4d354','#2b908f','#f45b5b','#91e8e1']
252 });
253 /**
254 * Returns hash use to init HightChart line.
255 * @param pTitle {String} The title of the chart.
256 * @param pXTitle {String} The xAxis title.
257 * @param pYTitle {String} The yAxis title.
258 * @param pXCategories {Array} x scale labels.
259 * @param pData {Array} The HightChart series.
260 * @return {Hash} Parameters to use in Highchart's constructor.
261 */
262 var lineplot_param = function(pTitle, pXTitle, pYTitle, pXCategories, pData) {
263 return {
264 chart: {
265 type: 'line',
266 zoomType: 'x',
267 selectionMarkerFill: "rgb(222,159,115,0.25)"
268 },
269 title: {
270 text: pTitle
271 },
272 xAxis: {
273 title: {
274 text: pXTitle
275 }
276 },
277 yAxis: {
278 min: 0,
279 title: {
280 text: pYTitle
281 }
282 },
283 exporting:{buttons: {contextButton: { symbol: 'download' }}},
284 buttons: {contextButton: {menuItems: ['downloadPNG', 'downloadSVG']}},
285 navigation: {
286 buttonOptions: {
287 theme: {
288 r: 4,
289 fill:'#8EADAC',
290 states: {
291 hover: {
292 fill: 'rgb(100, 138, 137)',
293 stroke:'#8EADAC'
294 },
295 select: {
296 stroke: '#8EADAC',
297 fill: 'rgb(100, 138, 137)',
298 }
299 }
300 }
301 }
302 },
303 series: pData,
304 tooltip: {
305 formatter:function() {
306 tooltip_head = '<b>Length ' + this.x + 'nt</b>' ;
307 tooltip_body = '' ;
308 for( var i=0 ; i<this.points.length ; i++) {
309 tooltip_body += '' +
310 '<tr>' +
311 ' <td style="color:' + this.points[i].series.color +'">' + this.points[i].series.name + ': </td>' +
312 ' <td> ' + numberDisplay(this.points[i].point.y) + ' </td>' +
313 ' <td> seq</td>' +
314 '</tr>' ;
315 }
316 return tooltip_head + '<table>' + tooltip_body + '</table>' ;
317 },
318 shared: true,
319 useHTML: true
320 },
321 legend: {
322 enabled: true
323 },
324 credits: {
325 enabled: false
326 }
327 };
328 }
329
330 /**
331 * Returns hash use to init HightChart column.
332 * @param pTitle {String} The title of the chart.
333 * @param pYTitle {String} The yAxis title.
334 * @param pCategories {Array} x scale labels.
335 * @param pSeries {Array} The HightChart series.
336 * @param unity {String} Unity used in tooltip.
337 * @return {Hash} Parameters to use in Highchart's constructor.
338 */
339 // couleur des diapos : bleu #8EADAC, vert : #A2A32F, orange1 #C6792B , taupe #9A866C, orange pastel : #DE9F73
340 var histogram_param = function( pTitle, nb, pYTitle, pCategories, pSeries, unity ) {
341 var param = {
342 chart: {
343 type: 'column'
344 },
345 exporting:{buttons: {contextButton: { symbol: 'download' }}},
346 buttons: {contextButton: {menuItems: ['downloadPNG', 'downloadSVG']}},
347 navigation: {
348 buttonOptions: {
349 theme: {
350 r: 4,
351 fill:'#8EADAC',
352 states: {
353 hover: {
354 fill: 'rgb(100, 138, 137)',
355 stroke:'#8EADAC'
356 },
357 select: {
358 stroke: '#8EADAC',
359 fill: 'rgb(100, 138, 137)',
360 }
361 }
362 }
363 }
364 },
365 title: {
366 text: pTitle
367 },
368 subtitle: {
369 text: 'starting from : ' + nb + ' sequences'
370 },
371 xAxis: [{
372 categories: pCategories,
373 crosshair: true,
374 crosshair: {
375 color: "rgb(142,173,172,0.25)"
376 }
377 }],
378 yAxis: {
379 min: 0,
380 title: {
381 text: pYTitle
382 },
383 stackLabels: {
384 enabled: true,
385 style: {
386 fontWeight: 'bold',
387 color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
388 }
389 },
390 plotLines:[{
391 color: "#A2A32F",
392 width: 2,
393 value: nb
394 }]
395 },
396 tooltip: {
397 formatter: function() {
398 var s = '<b> ' + this.x + '</b>' ,
399 sum = 0;
400 $.each(this.points,
401 function(i, point) {
402 s += '<br/>'+ '<span style="color: ' + point.series.color + '"> ' + point.series.name +' : </span>'+
403 point.y + " " + unity;
404 sum += point.y;
405 }
406 );
407 s += '<br/>total : '+ sum + ' (' + Number(Math.round(sum*100/nb + "e+2") + "e-2") + '%)'
408 return s;
409 },
410 shared: true,
411 useHTML: true
412 },
413 plotOptions: {
414 column: {
415 stacking: 'normal',
416 dataLabels: {
417 enabled: true,
418 style: {
419 textShadow: false,
420 color: (Highcharts.theme && Highcharts.theme.textColor) || 'white'
421 }
422 },
423 pointPadding: 0.2,
424 borderWidth: 0
425 }
426 },
427 credits: {
428 enabled: false
429 },
430 series: pSeries
431 };
432
433 return param ;
434 }
435
436 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
437 //
438 // Data
439 //
440 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
441 var filters_categories = ["before process", "paired-end assembled", "with 5' primer", "with 3' primer", "with expected length", "without N"] ;
442 /* Example:
443 ["before process", "assembled", "with 5' primer", "with 3' primer", "with expected length", "without N"]
444 */
445
446 var filters_by_sample = {"artificial combined": {"02": {"with expected length": 12500, "with 3' primer": 12500, "with 5' primer": 12500, "without N": 12500, "paired-end assembled": 12500}, "03": {"with expected length": 12536, "with 3' primer": 12536, "with 5' primer": 12536, "without N": 12536, "paired-end assembled": 12536}, "01": {"with expected length": 12378, "with 3' primer": 12378, "with 5' primer": 12378, "without N": 12378, "paired-end assembled": 12378}}, "before process": {"02": 30000, "03": 30000, "01": 30000}, "merged": {"02": {"with expected length": 17500, "with 3' primer": 17500, "with 5' primer": 17500, "without N": 17500, "paired-end assembled": 17500}, "03": {"with expected length": 17464, "with 3' primer": 17464, "with 5' primer": 17464, "without N": 17464, "paired-end assembled": 17464}, "01": {"with expected length": 17622, "with 3' primer": 17622, "with 5' primer": 17622, "without N": 17622, "paired-end assembled": 17622}}} ;
447 /* Example:
448 var filters_by_sample = {
449 "artificial combined": {
450 "sampleA": {"with 3' primer": 100, "without N": 100, "with 5' primer": 200, "assembled": 300},
451 "sampleB": {"with 3' primer": 0, "without N": 0, "with 5' primer": 0, "assembled": 0}},
452 "combined": {
453 "sampleA": {"with expected length": 997, "with 3' primer": 997, "without N": 997, "with 5' primer": 997, "assembled": 1000},
454 "sampleB": {"with expected length": 634, "with 3' primer": 727, "without N": 619, "with 5' primer": 800, "assembled": 834}},
455 "before process": {"sampleA": 1300, "sampleB": 834}
456 } ;
457 */
458
459 var before_lengths_by_sample = {"02": {"319": 291, "318": 607, "338": 1, "423": 297, "335": 316, "334": 2, "337": 302, "336": 345, "331": 286, "333": 315, "332": 3, "270": 101, "271": 146, "272": 457, "274": 296, "275": 615, "276": 588, "277": 319, "278": 326, "279": 6, "289": 2, "365": 1, "320": 607, "322": 1, "345": 298, "346": 314, "347": 2, "324": 1244, "369": 1, "281": 625, "280": 10, "364": 326, "422": 1, "285": 662, "349": 2, "287": 5, "309": 299, "303": 300, "298": 7, "300": 287, "301": 325, "302": 7, "325": 2, "304": 606, "305": 1, "306": 7, "307": 1, "299": 959, "363": 3, "267": 18, "358": 298, "269": 27, "268": 9, "321": 620, "282": 1222, "296": 881, "284": 300, "357": 2, "354": 2, "353": 306, "351": 1, "350": 330, "371": 2, "370": 315, "294": 311, "295": 5, "292": 2, "293": 2, "290": 1, "291": 322}, "03": {"319": 288, "318": 640, "338": 1, "423": 294, "335": 317, "334": 1, "337": 282, "336": 292, "331": 338, "330": 4, "333": 313, "270": 66, "271": 126, "272": 450, "274": 292, "275": 592, "276": 629, "277": 319, "278": 290, "279": 1, "289": 2, "345": 297, "320": 600, "322": 3, "323": 2, "346": 336, "321": 617, "324": 1162, "369": 2, "281": 617, "280": 8, "364": 323, "282": 1264, "285": 660, "284": 331, "287": 5, "309": 282, "358": 282, "300": 327, "301": 295, "302": 4, "303": 335, "304": 656, "306": 1, "307": 3, "299": 894, "267": 26, "370": 344, "269": 36, "268": 20, "283": 1, "317": 1, "365": 4, "349": 5, "357": 2, "354": 1, "353": 319, "352": 1, "298": 6, "350": 305, "296": 939, "297": 2, "294": 303, "295": 3, "290": 4, "291": 299}, "01": {"319": 285, "318": 592, "335": 322, "334": 2, "337": 292, "336": 292, "331": 301, "330": 6, "333": 294, "332": 1, "270": 75, "271": 137, "272": 489, "274": 293, "275": 625, "276": 608, "277": 268, "278": 340, "296": 974, "289": 3, "345": 323, "320": 660, "364": 309, "322": 1, "323": 3, "346": 291, "347": 1, "324": 1280, "369": 1, "281": 619, "280": 5, "423": 293, "282": 1299, "285": 606, "284": 309, "287": 7, "286": 1, "309": 315, "283": 2, "300": 331, "301": 297, "302": 5, "303": 303, "304": 592, "305": 3, "306": 5, "307": 2, "363": 1, "267": 22, "325": 2, "370": 337, "269": 28, "268": 13, "321": 600, "422": 1, "359": 2, "350": 324, "292": 1, "424": 1, "357": 1, "353": 329, "352": 2, "298": 4, "299": 951, "371": 2, "297": 1, "349": 2, "358": 308, "294": 301, "293": 1, "290": 7, "291": 319}} ;
460 /* Example:
461 {
462 "sampleA": {"395": 1, "381": 192, "382": 1790, "383": 2903, "384": 1078, "385": 10536, "386": 18182, "387": 8613, "388": 1097, "389": 7},
463 "sampleB": {}
464 }
465 */
466
467 var after_lengths_by_sample = {"02": {"151": 1, "216": 1, "318": 1, "213": 5, "210": 1, "211": 2, "313": 314, "312": 298, "337": 315, "242": 611, "317": 330, "330": 3, "193": 1, "332": 1, "270": 300, "271": 606, "258": 322, "259": 2, "238": 142, "239": 456, "276": 299, "226": 2, "252": 661, "235": 9, "236": 27, "251": 299, "250": 1, "265": 3, "198": 7, "234": 9, "237": 101, "272": 1, "249": 1219, "248": 621, "289": 1, "288": 620, "320": 306, "321": 2, "268": 325, "331": 326, "324": 2, "325": 298, "233": 9, "285": 607, "287": 607, "286": 291, "243": 588, "202": 4, "300": 315, "301": 2, "302": 316, "303": 345, "304": 302, "305": 1, "316": 1, "263": 881, "244": 308, "261": 311, "260": 2, "241": 294, "266": 959, "229": 4, "228": 1, "389": 1, "225": 4, "219": 4, "223": 11, "222": 10, "221": 6, "220": 9, "245": 316, "338": 2, "218": 2, "262": 5, "314": 2, "247": 1, "336": 1, "390": 297, "215": 1, "298": 286, "299": 3, "267": 287, "292": 2, "194": 7, "291": 1244}, "03": {"216": 5, "151": 3, "319": 1, "215": 2, "198": 4, "210": 3, "211": 2, "313": 336, "312": 297, "337": 344, "242": 588, "331": 323, "316": 2, "193": 3, "332": 4, "270": 335, "271": 656, "258": 299, "390": 294, "238": 122, "239": 448, "276": 282, "252": 658, "235": 20, "236": 36, "251": 326, "257": 1, "233": 8, "213": 5, "234": 18, "237": 66, "249": 1264, "248": 611, "289": 3, "288": 617, "320": 319, "321": 1, "268": 295, "324": 2, "325": 282, "250": 1, "170": 3, "285": 640, "284": 1, "287": 600, "286": 288, "243": 629, "202": 3, "300": 313, "301": 1, "302": 317, "303": 292, "304": 282, "305": 1, "245": 278, "244": 310, "261": 303, "267": 327, "266": 894, "229": 4, "264": 2, "226": 1, "225": 4, "219": 6, "223": 9, "222": 12, "221": 1, "220": 8, "317": 305, "263": 939, "262": 3, "265": 3, "336": 2, "228": 2, "298": 338, "241": 291, "297": 1, "194": 1, "290": 2, "291": 1162}, "01": {"216": 3, "215": 3, "213": 7, "210": 5, "211": 3, "218": 1, "289": 1, "288": 600, "285": 592, "287": 660, "286": 285, "263": 974, "261": 301, "260": 1, "267": 331, "266": 951, "265": 1, "264": 1, "269": 1, "268": 297, "298": 301, "299": 1, "297": 2, "292": 2, "290": 3, "291": 1280, "319": 2, "198": 4, "313": 291, "312": 323, "317": 324, "316": 1, "193": 2, "314": 1, "270": 303, "271": 592, "272": 3, "390": 293, "276": 315, "300": 294, "301": 2, "302": 322, "303": 292, "304": 292, "245": 325, "244": 262, "247": 1, "241": 292, "243": 608, "242": 623, "389": 1, "249": 1298, "248": 618, "338": 2, "337": 337, "336": 1, "331": 309, "330": 1, "258": 319, "259": 1, "252": 603, "253": 1, "250": 2, "251": 306, "257": 2, "170": 4, "194": 5, "229": 1, "228": 2, "226": 1, "225": 2, "223": 6, "222": 15, "220": 5, "391": 1, "151": 1, "238": 136, "239": 487, "234": 15, "235": 13, "236": 28, "237": 75, "233": 7, "320": 329, "326": 2, "324": 1, "325": 308, "202": 3}} ;
468 /* Example:
469 {
470 "sampleA": {"395": 1, "381": 192, "382": 1790, "383": 2903, "384": 1078, "385": 10536, "386": 18182, "387": 8613, "388": 1097, "389": 7},
471 "sampleB": {}
472 }
473 */
474
475
476 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
477 //
478 // Main
479 //
480 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
481 /**
482 * Disables/enables buttons in datatable.
483 */
484 var updateButtonState = function(){
485 $("#display-spl-lengths").prop( "disabled", false );
486 if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){
487 $("#display-spl-lengths").prop( "disabled", true );
488 }
489 $("#display-after-spl-lengths").prop( "disabled", false );
490 if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){
491 $("#display-after-spl-lengths").prop( "disabled", true );
492 }
493 }
494
495 /**
496 * Draws for the selected sample(s) the line chart that represents the number of sequences by sequence length.
497 */
498 var setLengthsGraph = function(lengths_by_sample,title){
499 var selected_series = new Array();
500 $('input[id^="filterBySample-chk-"]').each( function(){
501 if( $(this).is(':checked')){
502 var sample_name = $(this).prop('id').substring(19, $(this).prop('id').length) ;
503 // Find min and max for the sample
504 var min_length = null ;
505 var max_length = null ;
506 for(seq_length in lengths_by_sample[sample_name]){
507 if( max_length === null ){
508 min_length = parseInt(seq_length) ;
509 max_length = parseInt(seq_length) ;
510 } else {
511 min_length = Math.min( min_length, parseInt(seq_length) );
512 max_length = Math.max( max_length, parseInt(seq_length) );
513 }
514 }
515 // Complete data
516 var sample_data = new Array();
517 if( max_length !== null ){
518 for( var curr_length = min_length ; curr_length <= max_length ; curr_length++ ){
519 if( lengths_by_sample[sample_name].hasOwnProperty(curr_length.toString()) ){
520 sample_data.push([
521 curr_length,
522 lengths_by_sample[sample_name][curr_length.toString()]
523 ]);
524 } else {
525 sample_data.push( [curr_length, null] );
526 }
527 }
528 }
529 // Add serie
530 selected_series.push({
531 "name": sample_name,
532 "data": sample_data
533 });
534 }
535 });
536 // Draw chart
537 $('#lengths-chart').highcharts( lineplot_param(title, "Length", "Nb sequences", null, selected_series) );
538 }
539
540 /**
541 * Draws the bar chart that represents the total number of sequences after each filter.
542 */
543 var summaryLoad = function(){
544 var total_input = 0;
545 var extended_data = new Array();
546 var non_overlapped_data = new Array();
547
548 for( var spl_name in filters_by_sample["merged"] ){
549 total_input += filters_by_sample["before process"][spl_name] ;
550 for ( var cat_idx = 1 ; cat_idx < filters_categories.length ; cat_idx++ ){
551 var cat = filters_categories[cat_idx] ;
552 if(extended_data.length <= cat_idx-1){
553 extended_data.push(0);
554 non_overlapped_data.push(0);
555 }
556
557 if (cat in filters_by_sample["merged"][spl_name]){
558 extended_data[cat_idx-1] += filters_by_sample["merged"][spl_name][cat] ;
559 }else{
560 extended_data[cat_idx-1] = extended_data[cat_idx-2] ;
561 }
562
563 if ("artificial combined" in filters_by_sample) {
564 if ( cat in filters_by_sample["artificial combined"][spl_name] ){
565 non_overlapped_data[cat_idx-1] += filters_by_sample["artificial combined"][spl_name][cat] ;
566 }else{
567 non_overlapped_data[cat_idx-1] = non_overlapped_data[cat_idx-2] ;
568 }
569 }
570 }
571
572 }
573
574 var global_series = [ { name: 'merged', data: extended_data }]
575 if ("artificial combined" in filters_by_sample) {
576 global_series.push({name: 'artificial combined', data: non_overlapped_data});
577 }
578 $('#filter-summary').highcharts( histogram_param('Summary', total_input, 'Nb sequences', filters_categories.slice(0-filters_categories.length+1), global_series, 'seq') );
579 }
580
581 /**
582 * Set the table that represents by sample the number of sequences after each filter.
583 * Use key to select one subhashtable
584 */
585 var sampleDetailsLoad = function(key, checkBox, tableId, distrib_length){
586 // Table titles
587 if (checkBox){
588 var titles = [ '<label class="container"><input id="filterBySample-check-all" type="checkbox" value="1"><span class="checkmark"></span></label>', "Samples"];
589 }else{
590 var titles = ["Samples"];
591 }
592
593 titles.push( '% kept' );
594 var filters = filters_by_sample[key] ;
595
596 for( var sample_name in filters ){
597 if (checkBox) {
598 var sample_data = ['<label class="container"><input id="filterBySample-chk-' + sample_name + '" type="checkbox" value="1"><span class="checkmark"></span></label>', sample_name];
599 }else{
600 var sample_data = [sample_name];
601 }
602
603 var last_idx = 0;
604 for ( var cat_idx = 0 ; cat_idx < filters_categories.length ; cat_idx++ ){
605 var cat = filters_categories[cat_idx] ;
606 if ( cat in filters[sample_name]) {
607 last_idx = cat_idx
608 if (!( titles.includes(cat) )){
609 titles.push(cat);
610 }
611 sample_data.push( numberDisplay(filters[sample_name][cat]) );
612 }
613 }
614
615 var prct_kept = filters[sample_name][filters_categories[last_idx]]*100/filters[sample_name][filters_categories[1]]
616 if (isNaN(prct_kept)){
617 prct_kept = 0
618 }
619 if (checkBox) {
620 sample_data.splice(2, 0, numberDisplay(prct_kept));
621 }else{
622 sample_data.splice(1, 0, numberDisplay(prct_kept));
623 }
624
625 $('#'+tableId+' tbody').append( '<tr><td>' + sample_data.join("</td><td>") + '</td></tr>' );
626 }
627
628 $('#'+tableId+' thead').append( '<tr><th>' + titles.join("</th><th>") + '</th></tr>' );
629 $('#'+tableId+' .title').attr( "colspan", titles.length );
630 $('#'+tableId+' tfoot th').each(function(){
631 $(this).attr( "colspan", titles.length );
632 });
633
634 // Check all management
635 $('#filterBySample-check-all').on('change', function (e) { // Manage check all
636 if( $(this).is(':checked') ){
637 $('input[id^="filterBySample-chk-"]').each( function(){
638 $(this).prop( 'checked', true );
639 });
640 } else {
641 $('input[id^="filterBySample-chk-"]').each( function(){
642 $(this).prop( 'checked', false );
643 });
644 }
645 });
646 $('input[id^="filterBySample-chk-"]').on('change', function (e) { // Uncheck select all when uncheck one sample
647 if( !$(this).is(':checked') && $('#filterBySample-check-all').is(':checked') ){
648 $('#filterBySample-check-all').prop( 'checked', false );
649 }
650 });
651
652 // Buttons enable/disable management
653 $('input[id^="filterBySample-check-all"]').on( 'change', updateButtonState );
654 $('input[id^="filterBySample-chk-"]').on( 'change', updateButtonState );
655
656 // Datatable
657 var start_col_idx = 0
658 if(checkBox){
659 start_col_idx = 1
660 }
661 $('#'+tableId+'').DataTable({
662 //"sDom": '<"top"<"#'+tableId+'-export"><"clear">lf>rt<"bottom"ip><"clear">',
663 dom: "<'#"+tableId+"-export'><'row'<'col-sm-5'l><'col-sm-7'f>>" +
664 "<'row'<'col-sm-12'tr>>" +
665 "<'row'<'col-sm-5'i><'col-sm-7'p>>",
666 'order': [[start_col_idx, 'asc']],
667 "pagingType": "simple",
668 'columnDefs': [{
669 'targets': [0],
670 'orderable': false
671 }],
672 "fnDrawCallback": updateButtonState
673 });
674
675 // Datatable export
676 $('#'+tableId+'-export').html( '<button id="btn-exp" class="btn"><span class="fa fa-download" aria-hidden="true"> CSV</span></button>' );
677 $('#'+tableId+'-export').addClass( 'dataTables_filter' );
678
679 if ( checkBox){
680 $('#'+tableId+'-export').datatableExport({
681 'table_id': tableId,
682 'omitted_columns': [0]
683 });
684 }else{
685 $('#'+tableId+'-export').datatableExport({
686 'table_id': tableId,
687 });
688 }
689
690 // Add modal listener
691 if (distrib_length){
692 $('#lengths-modal').on('shown.bs.modal', function (event) {
693 var button = $(event.relatedTarget); // Button that triggered the modal
694 var data_type = button.data('whatever');
695 if( data_type == "before-process" ){
696 setLengthsGraph(before_lengths_by_sample,"Amplicon length distribution before trimming and filtering");
697 } else {
698 setLengthsGraph(after_lengths_by_sample,"Preprocessed Amplicon Length distribution");
699 }
700 });
701 }
702 }
703
704 $(function() {
705 // Remove alert
706 $('#js-alert').remove();
707 $('#content').removeClass("hidden");
708
709 // Display summary
710 summaryLoad();
711 // Display data by sample
712 if ("merged" in filters_by_sample ){
713 sampleDetailsLoad("merged",true, "filterBySample-table-combined", true);
714 }else{
715 $("#filterBySample-table-combined").remove();
716 }
717 if ("artificial combined" in filters_by_sample ){
718 sampleDetailsLoad("artificial combined", false, "filterBySample-table-artificialCombined", false);
719 }else{
720 $("#filterBySample-table-artificialCombined").prev("h2").remove();
721 $("#filterBySample-table-artificialCombined").remove();
722 }
723 /*$("select").addClass("selectpicker");
724 $(".dataTables_length select").selectpicker({
725 style: 'btn-info',
726 size: 2,
727 width : '60px'
728 });
729 $('.selectpicker').selectpicker('refresh');
730 //$('select').selectpicker('refresh');
731 */
732 });
733 </script>
734 </head>
735 <body>
736 <!-- Alert -->
737 <p id="js-alert" class="alert alert-warning">
738 javascript is needed to display data.<br />
739 If you try to view this data on galaxy please contact your administrator to authorise javascript or download the file to view.
740 </p>
741
742 <!-- Content -->
743 <div id="content" class="hidden">
744 <h2 class="pb-2-first mt-4 mb-2 border-bottom" style="margin-top: 1rem">Preprocess summary</h2>
745 <div id="filter-summary"></div>
746
747 <div id="filter-log">
748 <h2 class="pb-2 mt-4 mb-2 border-bottom">Details on merged sequences</h2>
749 <table id="filterBySample-table-combined" class="table table-striped">
750 <thead>
751 <!--
752 <tr>
753 <th class="title">Filtering by sample : details on full length amplicon reads</th>
754 </tr>
755 -->
756 </thead>
757 <tbody></tbody>
758 <tfoot>
759 <tr>
760 <th>
761 <span class="table-action">With selection:</span>
762 <button id="display-spl-lengths" class="btn table-action fusion-right" disabled data-toggle="modal" data-target="#lengths-modal" data-whatever="before-process" ><span class="fa fa-line-chart" aria-hidden="true"> Display amplicon lengths</span> </button>
763 <button id="display-after-spl-lengths" class="btn table-action" disabled data-toggle="modal" data-target="#lengths-modal" data-whatever="after-process" ><span class="fa fa-line-chart" aria-hidden="true"> Display preprocessed amplicon lengths</span></button>
764 </th>
765 </tr>
766 </tfoot>
767 </table>
768 <h2 class="pb-2 mt-4 mb-2 border-bottom">Details on artificial combined sequences</h2>
769 <table id="filterBySample-table-artificialCombined" class="table table-striped">
770 <thead>
771 </thead>
772 <tbody></tbody>
773 </table>
774 </div>
775 </div>
776
777
778
779 <!-- Modals -->
780 <div class="modal" id="lengths-modal" tabindex="-1" role="dialog" aria-hidden="true">
781 <div class="modal-dialog modal-lg">
782 <div class="modal-content">
783 <div class="modal-header">
784 <h4 class="modal-title">Amplicons lengths</h4>
785 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
786
787
788 </div>
789 <div class="modal-body">
790 <div id="lengths-chart"></div>
791 </div>
792 <div class="modal-footer">
793 <button class="btn table-action fusion-right" data-dismiss="modal"><span class="fa fa-close" aria-hidden="true"> Close</span> </button>
794 </div>
795 </div>
796 </div>
797 </div>
798 </body>
799 </html>