Mercurial > repos > frogs > frogs_2_0_0

comparison test-data/references/01-prepro.html @ 0:76c750c5f0d1 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/oinizan/FROGS-wrappers commit 0b900a51e220ce6f17c1e76292c06a5f4d934055-dirty
author frogs
date Thu, 25 Oct 2018 05:01:13 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:76c750c5f0d1
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 <http://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="1.2.1">
23 <!-- CSS -->
24 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></link>
25 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
26 <style type="text/css">
27 #js-alert {
28 width: 90%;
29 margin-right: auto;
30 margin-left: auto;
31 }
32 #content {
33 width: 90%;
34 margin-right: auto;
35 margin-left: auto;
36 }
37 .clear {
38 clear: both;
39 height: 0px;
40 width: 100%;
41 float: none !important;
42 }
43 </style>
44 <!-- JS -->
45 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
46 <script type="text/javascript" src="http://code.highcharts.com/4.1.4/highcharts.js"></script>
47 <script type="text/javascript" src="http://code.highcharts.com/4.1.4/modules/exporting.js"></script>
48 <script type="text/javascript" src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
49 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
50 <script type="text/javascript">
51 /*
52 * HTMLTable.js 0.1.0 - HTMLTable Library
53 *
54 * Copyright (c) 2015 Escudie Frederic
55 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
56 */
57 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};
58
59 /*
60 * dataTableExtractor.plugin.js 0.1.0 - datatableExport Library
61 *
62 * Copyright (c) 2015 Escudie Frederic
63 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
64 */
65 !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=t(this);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);
66 </script>
67 <script type="text/javascript">
68 /**
69 * Returns the string representation of the number.
70 * @param pValue {Float} The number to process.
71 * @return {String} The string representation (example: 12856892.11111 => 12,856,892.11).
72 */
73 var numberDisplay = function( pValue ){
74 var new_val = "" ;
75 if( ("" + pValue + "").indexOf(".") != -1 ){
76 new_val = pValue.toFixed(2).replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
77 } else {
78 new_val = pValue.toFixed().replace(/(\d)(?=(\d{3})+\b)/g, '$1,');
79 }
80 return new_val ;
81 }
82
83 /**
84 * Returns hash use to init HightChart line.
85 * @param pTitle {String} The title of the chart.
86 * @param pXTitle {String} The xAxis title.
87 * @param pYTitle {String} The yAxis title.
88 * @param pXCategories {Array} x scale labels.
89 * @param pData {Array} The HightChart series.
90 * @return {Hash} Parameters to use in Highchart's constructor.
91 */
92 var lineplot_param = function(pTitle, pXTitle, pYTitle, pXCategories, pData) {
93 return {
94 chart: {
95 type: 'line',
96 zoomType: 'x'
97 },
98 title: {
99 text: pTitle
100 },
101 xAxis: {
102 title: {
103 text: pXTitle
104 }
105 },
106 yAxis: {
107 min: 0,
108 title: {
109 text: pYTitle
110 }
111 },
112 series: pData,
113 tooltip: {
114 formatter:function() {
115 tooltip_head = '<b>Length ' + this.x + 'nt</b>' ;
116 tooltip_body = '' ;
117 for( var i=0 ; i<this.points.length ; i++) {
118 tooltip_body += '' +
119 '<tr>' +
120 ' <td style="color:' + this.points[i].series.color +'">' + this.points[i].series.name + ': </td>' +
121 ' <td> ' + numberDisplay(this.points[i].point.y) + ' </td>' +
122 ' <td> seq</td>' +
123 '</tr>' ;
124 }
125 return tooltip_head + '<table>' + tooltip_body + '</table>' ;
126 },
127 shared: true,
128 useHTML: true
129 },
130 legend: {
131 enabled: true
132 },
133 credits: {
134 enabled: false
135 }
136 };
137 }
138
139 /**
140 * Returns hash use to init HightChart column.
141 * @param pTitle {String} The title of the chart.
142 * @param pYTitle {String} The yAxis title.
143 * @param pCategories {Array} x scale labels.
144 * @param pSeries {Array} The HightChart series.
145 * @param unity {String} Unity used in tooltip.
146 * @return {Hash} Parameters to use in Highchart's constructor.
147 */
148 var histogram_param = function( pTitle, pYTitle, pCategories, pSeries, unity ) {
149 var param = {
150 chart: {
151 type: 'column'
152 },
153 title: {
154 text: pTitle
155 },
156 xAxis: {
157 categories: pCategories,
158 crosshair: true
159 },
160 yAxis: {
161 min: 0,
162 title: {
163 text: pYTitle
164 }
165 },
166 tooltip: {
167 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
168 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
169 '<td style="padding:0"><b>{point.y} ' + unity + '</b></td></tr>',
170 footerFormat: '</table>',
171 shared: true,
172 useHTML: true
173 },
174 plotOptions: {
175 column: {
176 pointPadding: 0.2,
177 borderWidth: 0
178 }
179 },
180 credits: {
181 enabled: false
182 },
183 series: pSeries
184 };
185
186 return param ;
187 }
188
189 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
190 //
191 // Data
192 //
193 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
194 var filters_categories = ["before process", "overlapped", "with expected length", "with 5' primer", "with 3' primer", "with expected length", "without N"] ;
195 /* Example:
196 ["before process", "overlapped", "with expected length", "with 5' primer", "with 3' primer", "with expected length", "without N"]
197 */
198 var filters_by_sample = {"splA_01": [88684, 84138, 82277, 80896, 80638, 80630, 80630], "splA_02": [54167, 51359, 49979, 49063, 48917, 48917, 48917], "splA_03": [32386, 30735, 29964, 29396, 29304, 29304, 29304]} ;
199 /* Example:
200 {
201 "sampleA": [90126, 90126, 90126, 89697, 89697, 89697, 89697],
202 "sampleB": [213043, 209801, 0, 0, 0, 0, 0]
203 }
204 */
205 var before_lengths_by_sample = {"splA_01": {"407": 2140, "406": 1041, "405": 1271, "404": 959, "340": 32, "402": 985, "401": 487, "400": 374, "281": 2, "283": 3, "282": 3, "348": 30, "349": 27, "409": 2974, "408": 3016, "336": 25, "440": 244, "331": 25, "330": 15, "263": 4, "421": 3254, "261": 5, "267": 9, "456": 13, "265": 9, "264": 2, "269": 3, "268": 1, "423": 3013, "365": 30, "425": 5254, "424": 2313, "414": 442, "415": 755, "416": 385, "417": 149, "410": 686, "411": 249, "412": 493, "413": 468, "371": 30, "370": 26, "373": 28, "372": 26, "418": 215, "419": 424, "377": 32, "376": 28, "319": 14, "318": 15, "313": 12, "312": 6, "311": 7, "310": 7, "317": 10, "316": 14, "315": 14, "314": 5, "393": 4961, "392": 1897, "391": 1388, "390": 1728, "397": 127, "396": 158, "395": 298, "394": 2709, "278": 1, "279": 4, "399": 239, "398": 227, "457": 10, "379": 20, "378": 63, "256": 2, "429": 1476, "428": 1626, "447": 6085, "368": 40, "369": 28, "366": 33, "367": 30, "364": 18, "422": 1327, "362": 20, "363": 27, "427": 5948, "426": 2039, "308": 11, "309": 11, "449": 50, "448": 172, "298": 5, "300": 2, "301": 5, "302": 2, "303": 7, "304": 9, "305": 16, "445": 2243, "446": 2131, "380": 27, "381": 35, "382": 45, "383": 36, "384": 28, "385": 35, "386": 52, "387": 374, "388": 1457, "389": 2718, "443": 246, "444": 754, "306": 8, "295": 2, "360": 35, "296": 1, "420": 505, "374": 25, "290": 3, "438": 328, "439": 294, "436": 382, "437": 360, "434": 750, "299": 6, "432": 430, "433": 1099, "307": 7, "431": 670, "458": 23, "459": 16, "339": 24, "338": 25, "335": 22, "334": 19, "452": 12, "453": 13, "454": 17, "455": 11, "333": 27, "332": 19, "258": 3, "259": 2, "252": 2, "442": 160, "251": 1, "253": 2, "257": 3, "255": 2, "344": 24, "288": 3, "346": 26, "347": 25, "297": 6, "403": 1238, "341": 22, "342": 26, "343": 28, "460": 12, "289": 1, "270": 2, "271": 3, "285": 1, "272": 2, "284": 1, "273": 3, "276": 3, "277": 2, "361": 22, "292": 5, "375": 26, "355": 29, "441": 580, "322": 11, "323": 19, "320": 13, "321": 20, "326": 16, "327": 22, "324": 22, "325": 20, "328": 25, "329": 19, "352": 18, "450": 14, "293": 3, "435": 274, "291": 1, "451": 18, "357": 49, "356": 34, "345": 27, "354": 28, "353": 22, "430": 821, "351": 36, "350": 16, "337": 20, "358": 38, "359": 28, "266": 3}, "splA_02": {"407": 1189, "406": 640, "405": 706, "404": 635, "340": 16, "402": 671, "342": 18, "400": 255, "281": 3, "280": 2, "283": 2, "282": 5, "348": 22, "284": 5, "287": 3, "408": 1696, "336": 13, "440": 126, "331": 19, "330": 17, "263": 2, "421": 2279, "261": 3, "260": 4, "267": 7, "266": 1, "265": 6, "264": 2, "269": 1, "268": 4, "423": 1866, "365": 29, "425": 2750, "424": 1309, "414": 283, "378": 52, "416": 307, "417": 88, "410": 500, "411": 170, "412": 312, "413": 334, "371": 15, "370": 14, "373": 12, "295": 8, "418": 173, "374": 16, "290": 7, "376": 13, "319": 10, "318": 16, "313": 7, "312": 5, "311": 11, "310": 8, "317": 17, "316": 11, "315": 9, "314": 5, "393": 2840, "392": 1168, "391": 811, "390": 897, "397": 94, "396": 115, "395": 169, "277": 6, "399": 155, "398": 199, "379": 17, "415": 537, "256": 2, "429": 1038, "428": 1015, "447": 3589, "368": 13, "369": 17, "366": 30, "367": 12, "364": 27, "422": 734, "362": 11, "363": 15, "427": 3756, "426": 1256, "308": 11, "309": 6, "449": 37, "448": 113, "298": 2, "300": 5, "301": 2, "302": 8, "303": 5, "304": 5, "305": 8, "445": 1353, "446": 1345, "380": 14, "381": 11, "382": 22, "383": 19, "384": 12, "385": 20, "386": 31, "387": 162, "388": 827, "389": 1490, "443": 165, "444": 450, "294": 6, "306": 8, "333": 20, "372": 17, "360": 12, "296": 3, "420": 370, "419": 324, "377": 29, "438": 228, "439": 185, "436": 207, "437": 239, "434": 452, "299": 5, "432": 310, "433": 725, "307": 2, "431": 440, "458": 13, "459": 6, "339": 19, "338": 18, "450": 15, "334": 19, "452": 4, "453": 6, "454": 4, "455": 9, "456": 12, "457": 8, "258": 1, "259": 1, "252": 1, "442": 116, "251": 1, "253": 2, "257": 4, "254": 1, "255": 4, "344": 21, "288": 1, "346": 18, "347": 16, "297": 2, "403": 856, "341": 19, "401": 326, "343": 13, "460": 4, "289": 7, "270": 1, "271": 5, "272": 4, "349": 18, "273": 3, "409": 1770, "332": 13, "274": 2, "286": 5, "275": 5, "276": 2, "394": 1540, "361": 7, "292": 4, "375": 20, "355": 19, "441": 355, "322": 16, "323": 15, "320": 9, "321": 9, "326": 15, "327": 17, "324": 10, "325": 16, "328": 22, "329": 11, "335": 14, "352": 18, "293": 4, "435": 211, "262": 2, "291": 4, "451": 9, "357": 38, "356": 15, "345": 18, "354": 17, "353": 22, "430": 502, "351": 22, "350": 10, "337": 20, "359": 17, "358": 19}, "splA_03": {"407": 723, "406": 373, "405": 444, "404": 361, "340": 12, "402": 354, "401": 181, "400": 144, "281": 3, "280": 2, "283": 1, "282": 1, "348": 15, "349": 11, "409": 1106, "408": 1083, "336": 11, "440": 92, "331": 10, "330": 6, "263": 1, "366": 19, "261": 1, "260": 1, "267": 4, "456": 5, "265": 1, "367": 8, "269": 2, "457": 7, "423": 1114, "365": 11, "425": 1859, "424": 775, "414": 172, "415": 269, "416": 165, "417": 57, "410": 267, "411": 89, "412": 196, "413": 187, "371": 12, "370": 9, "373": 15, "372": 8, "418": 96, "419": 167, "377": 10, "376": 12, "319": 1, "318": 3, "313": 3, "311": 4, "310": 3, "317": 4, "316": 3, "315": 7, "314": 1, "393": 1739, "392": 740, "391": 499, "390": 636, "397": 44, "396": 64, "395": 114, "394": 1022, "278": 1, "279": 2, "399": 104, "398": 83, "379": 10, "378": 26, "256": 3, "429": 597, "428": 595, "447": 2139, "368": 9, "369": 9, "421": 1206, "420": 187, "364": 12, "422": 465, "362": 8, "363": 9, "427": 2140, "426": 714, "308": 10, "309": 3, "449": 14, "448": 68, "298": 3, "300": 1, "301": 2, "302": 1, "303": 3, "304": 5, "305": 9, "445": 842, "446": 803, "380": 9, "381": 15, "382": 9, "383": 14, "384": 11, "385": 13, "386": 19, "387": 111, "388": 471, "389": 969, "443": 92, "444": 267, "294": 2, "306": 1, "295": 2, "360": 14, "296": 1, "292": 2, "374": 12, "290": 2, "438": 144, "439": 102, "436": 135, "437": 133, "434": 271, "435": 110, "432": 171, "433": 380, "307": 3, "431": 277, "458": 10, "459": 6, "339": 12, "338": 12, "335": 10, "334": 9, "452": 4, "453": 3, "454": 7, "455": 3, "333": 13, "332": 6, "258": 1, "252": 1, "442": 64, "253": 4, "257": 3, "255": 2, "344": 6, "288": 1, "346": 14, "347": 11, "403": 474, "341": 6, "342": 9, "343": 11, "460": 4, "289": 2, "270": 1, "271": 3, "285": 1, "272": 1, "284": 4, "273": 3, "287": 1, "286": 1, "275": 1, "276": 2, "277": 4, "361": 2, "375": 10, "355": 12, "441": 241, "322": 6, "323": 8, "320": 8, "321": 7, "326": 6, "327": 7, "324": 8, "325": 7, "328": 14, "329": 4, "352": 9, "450": 7, "293": 4, "262": 1, "291": 4, "451": 6, "357": 20, "356": 12, "345": 13, "354": 11, "353": 10, "430": 311, "351": 15, "350": 4, "337": 9, "358": 15, "359": 9, "266": 1}} ;
206 /* Example:
207 {
208 "sampleA": {"395": 1, "381": 192, "382": 1790, "383": 2903, "384": 1078, "385": 10536, "386": 18182, "387": 8613, "388": 1097, "389": 7},
209 "sampleB": {}
210 }
211 */
212
213 var after_lengths_by_sample = {"splA_01": {"357": 1707, "387": 304, "353": 10, "375": 3005, "348": 11, "393": 1723, "392": 5450, "391": 2070, "390": 3023, "397": 818, "396": 1494, "395": 1622, "394": 6216, "358": 1324, "399": 367, "398": 658, "354": 255, "414": 6477, "374": 2047, "415": 143, "352": 4, "355": 1348, "407": 208, "406": 288, "405": 306, "347": 5, "403": 366, "402": 267, "368": 442, "369": 951, "366": 195, "367": 347, "423": 3, "365": 213, "362": 287, "363": 142, "360": 5113, "426": 5, "401": 751, "356": 2790, "351": 8, "400": 1110, "370": 1231, "380": 462, "381": 398, "382": 768, "383": 375, "384": 122, "385": 192, "386": 403, "420": 3, "388": 3336, "389": 1202, "364": 116, "411": 596, "372": 1239, "359": 1642, "350": 7, "425": 12, "404": 352, "349": 28, "379": 477, "378": 199, "416": 44, "417": 8, "410": 206, "409": 132, "412": 2260, "413": 1843, "371": 926, "408": 590, "373": 980, "361": 2820, "418": 8, "419": 4, "377": 700, "376": 3076}, "splA_02": {"372": 694, "357": 894, "353": 8, "375": 1664, "348": 1, "393": 1070, "392": 2835, "391": 1196, "390": 1882, "397": 507, "396": 1056, "395": 1005, "394": 3915, "358": 730, "399": 277, "398": 420, "354": 103, "414": 3806, "374": 1166, "415": 101, "352": 4, "355": 788, "407": 112, "406": 183, "405": 227, "347": 3, "403": 209, "402": 196, "368": 306, "369": 652, "366": 141, "367": 222, "423": 4, "365": 182, "362": 148, "363": 103, "360": 2922, "426": 2, "401": 454, "356": 1490, "400": 742, "370": 845, "380": 326, "381": 259, "382": 528, "383": 306, "384": 75, "385": 150, "386": 283, "387": 222, "388": 2378, "389": 632, "364": 85, "411": 372, "422": 1, "359": 1021, "350": 1, "425": 4, "404": 219, "349": 15, "379": 302, "378": 152, "416": 31, "417": 9, "410": 138, "409": 100, "412": 1327, "413": 1195, "371": 604, "408": 360, "373": 588, "361": 1624, "418": 4, "419": 1, "377": 487, "376": 1853}, "splA_03": {"357": 624, "387": 120, "353": 2, "375": 1070, "348": 4, "393": 634, "392": 1909, "391": 706, "390": 1104, "397": 324, "396": 589, "395": 596, "394": 2213, "358": 475, "399": 146, "398": 261, "354": 64, "414": 2289, "374": 699, "415": 55, "352": 1, "355": 439, "407": 81, "406": 102, "405": 138, "347": 1, "403": 137, "402": 100, "368": 171, "369": 340, "366": 86, "367": 128, "423": 1, "365": 80, "362": 116, "363": 51, "360": 1812, "426": 2, "401": 269, "356": 976, "351": 4, "400": 390, "370": 471, "380": 183, "381": 162, "382": 266, "383": 154, "384": 50, "385": 79, "386": 155, "420": 1, "388": 1242, "389": 416, "364": 44, "411": 217, "372": 440, "359": 634, "425": 4, "404": 123, "349": 5, "379": 190, "378": 68, "416": 13, "417": 4, "410": 81, "409": 53, "412": 832, "413": 704, "371": 353, "408": 242, "373": 346, "361": 1050, "418": 1, "419": 2, "377": 268, "376": 1142}} ;
214 /* Example:
215 {
216 "sampleA": {"395": 1, "381": 192, "382": 1790, "383": 2903, "384": 1078, "385": 10536, "386": 18182, "387": 8613, "388": 1097, "389": 7},
217 "sampleB": {}
218 }
219 */
220
221
222 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
223 //
224 // Main
225 //
226 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
227 /**
228 * Disables/enables buttons in datatable.
229 */
230 var updateButtonState = function(){
231 $("#display-spl-lengths").removeClass( "disabled" );
232 if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){
233 $("#display-spl-lengths").addClass( "disabled" );
234 }
235 $("#display-after-spl-lengths").removeClass( "disabled" );
236 if( $('input[id^="filterBySample-chk-"]:checked').length == 0 ){
237 $("#display-after-spl-lengths").addClass( "disabled" );
238 }
239 }
240
241 /**
242 * Draws for the selected sample(s) the line chart that represents the number of sequences by sequence length.
243 */
244 var setLengthsGraph = function(lengths_by_sample,title){
245 var selected_series = new Array();
246 $('input[id^="filterBySample-chk-"]').each( function(){
247 if( $(this).is(':checked')){
248 var sample_name = $(this).prop('id').substring(19, $(this).prop('id').length) ;
249 // Find min and max for the sample
250 var min_length = null ;
251 var max_length = null ;
252 for(seq_length in lengths_by_sample[sample_name]){
253 if( max_length === null ){
254 min_length = parseInt(seq_length) ;
255 max_length = parseInt(seq_length) ;
256 } else {
257 min_length = Math.min( min_length, parseInt(seq_length) );
258 max_length = Math.max( max_length, parseInt(seq_length) );
259 }
260 }
261 // Complete data
262 var sample_data = new Array();
263 if( max_length !== null ){
264 for( var curr_length = min_length ; curr_length <= max_length ; curr_length++ ){
265 if( lengths_by_sample[sample_name].hasOwnProperty(curr_length.toString()) ){
266 sample_data.push([
267 curr_length,
268 lengths_by_sample[sample_name][curr_length.toString()]
269 ]);
270 } else {
271 sample_data.push( [curr_length, null] );
272 }
273 }
274 }
275 // Add serie
276 selected_series.push({
277 "name": sample_name,
278 "data": sample_data
279 });
280 }
281 });
282 // Draw chart
283 $('#lengths-chart').highcharts( lineplot_param(title, "Length", "Nb sequences", null, selected_series) );
284 }
285
286 /**
287 * Draws the bar chart that represents the total number of sequences after each filter.
288 */
289 var summaryLoad = function(){
290 var global_data = new Array();
291 for( var spl_name in filters_by_sample ){
292 var nb_by_step = filters_by_sample[spl_name] ;
293 for( var step_idx = 0 ; step_idx < filters_by_sample[spl_name].length ; step_idx++ ){
294 if( global_data.length < step_idx+1 ){
295 global_data.push(0);
296 }
297 global_data[step_idx] += nb_by_step[step_idx] ;
298 }
299 }
300 var global_series = [{ name: 'All samples', data: global_data }];
301 $('#filter-summary').highcharts( histogram_param('Filtering summary', 'Nb sequences', filters_categories, global_series, 'seq') );
302 }
303
304 /**
305 * Set the table that represents by sample the number of sequences after each filter.
306 */
307 var sampleDetailsLoad = function(){
308 // Table titles
309 var titles = [ '<input id="filterBySample-check-all" type="checkbox" value="1">', "Samples" ];
310 titles.push( '% kept' );
311 for( var rank = 0 ; rank < filters_categories.length ; rank++ ){
312 titles.push( filters_categories[rank] );
313 }
314 $('#filterBySample-table thead').append( '<tr><th>' + titles.join("</th><th>") + '</th></tr>' );
315 $('#filterBySample-table .title').attr( "colspan", titles.length );
316 $('#filterBySample-table tfoot th').each(function(){
317 $(this).attr( "colspan", titles.length );
318 });
319
320 // Table data
321 for( var sample_name in filters_by_sample ){
322 var sample_data = ['<input id="filterBySample-chk-' + sample_name + '" type="checkbox" value="1">', sample_name] ;
323 var prct_kept = filters_by_sample[sample_name][filters_categories.length-1]/filters_by_sample[sample_name][0]*100
324 sample_data.push( numberDisplay(prct_kept) );
325 for( var idx = 0 ; idx < filters_by_sample[sample_name].length ; idx++){
326 sample_data.push( numberDisplay(filters_by_sample[sample_name][idx]) );
327 }
328 // Add row data
329 $('#filterBySample-table tbody').append( '<tr><td>' + sample_data.join("</td><td>") + '</td></tr>' );
330 }
331
332 // Check all management
333 $('#filterBySample-check-all').on('change', function (e) { // Manage check all
334 if( $(this).is(':checked') ){
335 $('input[id^="filterBySample-chk-"]').each( function(){
336 $(this).prop( 'checked', true );
337 });
338 } else {
339 $('input[id^="filterBySample-chk-"]').each( function(){
340 $(this).prop( 'checked', false );
341 });
342 }
343 });
344 $('input[id^="filterBySample-chk-"]').on('change', function (e) { // Uncheck select all when uncheck one sample
345 if( !$(this).is(':checked') && $('#filterBySample-check-all').is(':checked') ){
346 $('#filterBySample-check-all').prop( 'checked', false );
347 }
348 });
349
350 // Buttons enable/disable management
351 $('input[id^="filterBySample-check-all"]').on( 'change', updateButtonState );
352 $('input[id^="filterBySample-chk-"]').on( 'change', updateButtonState );
353
354 // Datatable
355 $('#filterBySample-table').DataTable({
356 "sDom": '<"top"<"#filterBySample-csv-export"><"clear">lf>rt<"bottom"ip><"clear">',
357 'order': [[1, 'asc']],
358 'columnDefs': [{
359 'targets': [0],
360 'orderable': false
361 }],
362 "fnDrawCallback": updateButtonState
363 });
364 // Datatable export
365 $('#filterBySample-csv-export').html( '<button class="btn btn-primary"><span class="glyphicon glyphicon-open-file" aria-hidden="true">CSV</span></button>' );
366 $('#filterBySample-csv-export').addClass( 'dataTables_filter' );
367 $('#filterBySample-csv-export').datatableExport({
368 'table_id': "filterBySample-table",
369 'omitted_columns': [0]
370 });
371
372 // Add modal listener
373 $('#lengths-modal').on('shown.bs.modal', function (event) {
374 var button = $(event.relatedTarget); // Button that triggered the modal
375 var data_type = button.data('whatever');
376 if( data_type == "before-process" ){
377 setLengthsGraph(before_lengths_by_sample,"Amplicon length distribution before trimming and filtering");
378 } else {
379 setLengthsGraph(after_lengths_by_sample,"Preprocessed Amplicon Length distribution");
380 }
381 });
382 }
383
384 $(function() {
385 // Remove alert
386 $('#js-alert').remove();
387 $('#content').removeClass("hidden");
388
389 // Display summary
390 summaryLoad();
391
392 // Display data by sample
393 sampleDetailsLoad();
394 });
395 </script>
396 </head>
397 <body>
398 <!-- Alert -->
399 <p id="js-alert" class="alert alert-warning">
400 javascript is needed to display data.<br />
401 If you try to view this data on galaxy please contact your administrator to authorise javascript or download the file to view.
402 </p>
403
404 <!-- Content -->
405 <div id="content" class="hidden">
406 <div id="filter-summary"></div>
407 <div id="filter-log">
408 <table id="filterBySample-table" class="table table-striped">
409 <thead>
410 <tr>
411 <th class="title">Filtering by sample</th>
412 </tr>
413 </thead>
414 <tbody></tbody>
415 <tfoot>
416 <tr>
417 <th>
418 <span class="table-action">With selection:</span>
419 <button id="display-spl-lengths" class="btn btn-primary table-action fusion-right disabled" data-toggle="modal" data-target="#lengths-modal" data-whatever="before-process">Display amplicon lengths </button>
420 <button id="display-after-spl-lengths" class="btn btn-primary table-action disabled" data-toggle="modal" data-target="#lengths-modal" data-whatever="after-process">Display preprocessed amplicon lengths</button>
421 </th>
422 </tr>
423 </tfoot>
424 </table>
425 </div>
426 </div>
427
428 <!-- Modals -->
429 <div class="modal" id="lengths-modal" tabindex="-1" role="dialog" aria-hidden="true">
430 <div class="modal-dialog modal-lg">
431 <div class="modal-content">
432 <div class="modal-header">
433 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
434 <h4 class="modal-title">Amplicons lengths</h4>
435 </div>
436 <div class="modal-body">
437 <div id="lengths-chart"></div>
438 </div>
439 <div class="modal-footer">
440 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
441 </div>
442 </div>
443 </div>
444 </div>
445 </body>
446 </html>