|
0
|
1 /**
|
|
|
2 * jqBarGraph - jQuery plugin
|
|
|
3 * @version: 1.1 (2011/04/03)
|
|
|
4 * @requires jQuery v1.2.2 or later
|
|
|
5 * @author Ivan Lazarevic
|
|
|
6 * Examples and documentation at: http://www.workshop.rs/jqbargraph/
|
|
|
7 *
|
|
|
8 * Dual licensed under the MIT and GPL licenses:
|
|
|
9 * http://www.opensource.org/licenses/mit-license.php
|
|
|
10 * http://www.gnu.org/licenses/gpl.html
|
|
|
11 *
|
|
|
12 * @param data: arrayOfData // array of data for your graph
|
|
|
13 * @param title: false // title of your graph, accept HTML
|
|
|
14 * @param barSpace: 10 // this is default space between bars in pixels
|
|
|
15 * @param width: 400 // default width of your graph ghhjgjhg
|
|
|
16 * @param height: 200 //default height of your graph
|
|
|
17 * @param color: '#000000' // if you don't send colors for your data this will be default bars color
|
|
|
18 * @param colors: false // array of colors that will be used for your bars and legends
|
|
|
19 * @param lbl: '' // if there is no label in your array
|
|
|
20 * @param sort: false // sort your data before displaying graph, you can sort as 'asc' or 'desc'
|
|
|
21 * @param position: 'bottom' // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
|
|
|
22 * @param prefix: '' // text that will be shown before every label
|
|
|
23 * @param postfix: '' // text that will be shown after every label
|
|
|
24 * @param animate: true // if you don't need animated appereance change to false
|
|
|
25 * @param speed: 2 // speed of animation in seconds
|
|
|
26 * @param legendWidth: 100 // width of your legend box
|
|
|
27 * @param legend: false // if you want legend change to true
|
|
|
28 * @param legends: false // array for legend. for simple graph type legend will be extracted from labels if you don't set this
|
|
|
29 * @param type: false // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
|
|
|
30 * @param showValues: true // you can use this for multi and stacked type and it will show values of every bar part
|
|
|
31 * @param showValuesColor: '#fff' // color of font for values
|
|
|
32
|
|
|
33 * @example $('#divForGraph').jqBarGraph({ data: arrayOfData });
|
|
|
34
|
|
|
35 **/
|
|
|
36
|
|
|
37 (function($) {
|
|
|
38 var opts = new Array;
|
|
|
39 var level = new Array;
|
|
|
40
|
|
|
41 $.fn.jqBarGraph = $.fn.jqbargraph = function(options){
|
|
|
42
|
|
|
43 init = function(el){
|
|
|
44
|
|
|
45 opts[el.id] = $.extend({}, $.fn.jqBarGraph.defaults, options);
|
|
|
46 $(el).css({ 'width': opts[el.id].width, 'height': opts[el.id].height, 'position':'relative', 'text-align':'center' });
|
|
|
47
|
|
|
48
|
|
|
49 doGraph(el);
|
|
|
50 $("a").css({'color':'black'});
|
|
|
51
|
|
|
52 };
|
|
|
53
|
|
|
54 // sum of array elements
|
|
|
55 sum = function(ar,index){
|
|
|
56 total = 0;
|
|
|
57 for(val in ar){
|
|
|
58 total += ar[val][index];
|
|
|
59 }
|
|
|
60 return total.toFixed(2);
|
|
|
61 };
|
|
|
62
|
|
|
63 // count max value of array
|
|
|
64 max = function(ar,index){
|
|
|
65 maxvalue = 0;
|
|
|
66 for(var val in ar){
|
|
|
67 value = ar[val][0];
|
|
|
68 if(value instanceof Array) value = sum(value,index);
|
|
|
69 if (parseFloat(value) > parseFloat(maxvalue)) maxvalue=value;
|
|
|
70 }
|
|
|
71 return maxvalue;
|
|
|
72 };
|
|
|
73
|
|
|
74 // max value of multi array
|
|
|
75 maxMulti = function(ar,index){
|
|
|
76 maxvalue = 0;
|
|
|
77 maxvalue2 = 0;
|
|
|
78
|
|
|
79 for(var val in ar){
|
|
|
80 ar2 = ar[val][0];
|
|
|
81
|
|
|
82 for(var val2 in ar2){
|
|
|
83 if(ar2[val2][index]>maxvalue2) maxvalue2 = ar2[val2][index];
|
|
|
84 }
|
|
|
85
|
|
|
86 if (maxvalue2>maxvalue) maxvalue=maxvalue2;
|
|
|
87 }
|
|
|
88 console.log(maxvalue);
|
|
|
89 return maxvalue;
|
|
|
90 };
|
|
|
91
|
|
|
92
|
|
|
93 doGraph = function(el){
|
|
|
94
|
|
|
95 arr = opts[el.id];
|
|
|
96 data = arr.data;
|
|
32
|
97 if(arr.tab=='reads'){
|
|
|
98 val_index=0;
|
|
|
99 }
|
|
|
100 else{
|
|
|
101 val_index=1;
|
|
|
102 }
|
|
|
103
|
|
0
|
104 //check if array is bad or empty
|
|
|
105 if(data == undefined) {
|
|
|
106 $(el).html('There is not enought data for graph');
|
|
|
107 return;
|
|
|
108 }
|
|
32
|
109 //sorting ascending or descending
|
|
|
110 if(arr.tab == 'reads'){
|
|
|
111 if(arr.sort == 'asc'){
|
|
|
112 data.sort(sortReadsAsc);
|
|
|
113 }
|
|
|
114 if(arr.sort == 'desc'){
|
|
|
115 data.sort(sortReadsDesc);
|
|
|
116 }
|
|
|
117 }
|
|
|
118 if(arr.tab == 'basepairs'){
|
|
|
119 if(arr.sort == 'asc'){
|
|
|
120 data.sort(sortBasesAsc);
|
|
|
121 }
|
|
|
122 if(arr.sort == 'desc'){
|
|
|
123 data.sort(sortBasesDesc);
|
|
|
124 }
|
|
|
125 }
|
|
0
|
126 if(arr.sortBar == 'asc') sortBars(data, barAsc);
|
|
32
|
127 if(arr.sortBar == 'desc')sortBars(data, barDesc);
|
|
|
128
|
|
|
129
|
|
0
|
130
|
|
|
131 legend = '';
|
|
|
132 prefix = arr.prefix;
|
|
|
133 postfix = arr.postfix;
|
|
|
134 space = arr.barSpace; //space between bars
|
|
|
135 legendWidth = arr.legend ? arr.legendWidth : 0; //width of legend box
|
|
|
136 fieldWidth = ($(el).width()-legendWidth)/data.length; //width of bar
|
|
|
137 totalHeight = $(el).height(); //total height of graph box
|
|
|
138 var leg = new Array(); //legends array
|
|
|
139
|
|
|
140 //max value in data, I use this to calculate height of bar
|
|
|
141 max = max(data,val_index);
|
|
|
142
|
|
|
143 color_map={};
|
|
|
144 color_map["pathogen"]=arr.colors[0];
|
|
|
145 color_map["ambiguous"]=arr.colors[1];
|
|
|
146 color_map["human"]=arr.colors[2];
|
|
|
147
|
|
|
148 if(arr.tab=='reads'){
|
|
|
149 val_index=0;
|
|
|
150 }
|
|
|
151 else{
|
|
|
152 val_index=1;
|
|
|
153
|
|
32
|
154 }
|
|
|
155 console.log(arr.tab,arr.sort,val_index);
|
|
0
|
156 for(var val in data){
|
|
|
157
|
|
|
158 valueData = data[val][0];
|
|
|
159 if (valueData instanceof Array)
|
|
|
160 value = sum(valueData,val_index);
|
|
|
161 else
|
|
|
162 value = valueData;
|
|
|
163
|
|
|
164 lbl = data[val][1];
|
|
|
165 unique = val+el.id; //unique identifier
|
|
|
166 divid=""+el.id;
|
|
|
167
|
|
|
168 if(arr.type == 'multi') color = 'none';
|
|
|
169
|
|
|
170 if (lbl == undefined) lbl = arr.lbl;
|
|
|
171
|
|
|
172 margin_top=14/(data.length);
|
|
|
173
|
|
|
174
|
|
|
175 out = "<div class='graphField"+el.id+"' id='graphField"+unique+"' style='position: absolute'>";
|
|
|
176 out += "<div class='graphValue"+el.id+"' id='graphValue"+unique+"'>"+parseInt(value)+"</div>";
|
|
|
177
|
|
|
178 out += "<div class='graphBar"+el.id+"' id='graphFieldBar"+unique+"' style='background-color:#fff;position: relative; overflow: hidden;'></div>";
|
|
|
179 //console.log(color)
|
|
|
180 // if there is no legend or exist legends display lbl at the bottom
|
|
|
181
|
|
|
182 out += "<a class='graphLabelLink' href=#files"+el.id+" onclick=fillDiv('"+el.id+"','"+valueData[0][3]+"_"+lbl+"')><div class='graphLabel"+el.id+"' id='graphLabel"+unique+"'style='margin-top:"+margin_top+"px;'>"+lbl+"</div></a>";
|
|
|
183 out += "</div>";
|
|
|
184
|
|
|
185
|
|
|
186
|
|
|
187 $(el).append(out);
|
|
|
188 $(".graphLabel"+el.id).css({'-webkit-transform': 'rotate(30deg)', '-moz-transform': 'rotate(30deg)','-o-transform': 'rotate(30deg)', '-ms-transform': 'rotate(30deg)','transform': 'rotate(30deg)', 'height':'100'});
|
|
|
189 $('a.graphLabel').css({
|
|
|
190 'text-decoration': 'none',
|
|
|
191 'color':'black'
|
|
|
192 });
|
|
|
193
|
|
|
194 //$('#graphLabel'+el.id).rotateLeft();
|
|
|
195
|
|
|
196 //size of bar
|
|
|
197 totalHeightBar = totalHeight - $('.graphLabel'+el.id).height() - $('.graphValue'+el.id).height()-margin_top;
|
|
|
198 fieldHeight = (totalHeightBar*value)/max;
|
|
|
199 $('#graphField'+unique).css({
|
|
|
200 'left': (fieldWidth)*val,
|
|
|
201 'width': fieldWidth-space,
|
|
|
202 'margin-left': space});
|
|
|
203
|
|
|
204 // multi array
|
|
|
205 if(valueData instanceof Array){
|
|
|
206
|
|
|
207 if(arr.type=="multi"){
|
|
|
208 console.log("multi");
|
|
|
209 maxe = maxMulti(data,val_index);
|
|
|
210 totalHeightBar = fieldHeight = totalHeight - $('.graphLabel'+el.id).height()-margin_top;
|
|
|
211 $('.graphValue'+el.id).remove();
|
|
|
212 } else {
|
|
|
213 console.log(max);
|
|
|
214 maxe = max;
|
|
|
215 }
|
|
|
216
|
|
|
217 for (i in valueData){
|
|
|
218 heig = (totalHeightBar*valueData[i][val_index]/maxe);
|
|
|
219 if(navigator.userAgent.match('Safari') && !navigator.userAgent.match('Chrom')){
|
|
|
220
|
|
|
221 heig = heig + (arr.borderSize/1.85);
|
|
|
222 }
|
|
|
223
|
|
|
224 wid = parseInt((fieldWidth-space)/valueData.length);
|
|
|
225
|
|
|
226 sv = ''; // show values
|
|
|
227 fs = 0; // font size
|
|
|
228 if (arr.showValues){
|
|
|
229 sv = arr.prefix+valueData[i][0]+arr.postfix;
|
|
|
230 fs = 12; // font-size is 0 if showValues = false
|
|
|
231 }
|
|
|
232 o = "<a class='subBarLink' href=#files"+el.id+" onclick=fillDiv('"+el.id+"','"+valueData[i][3]+"_"+lbl+"','"+valueData[i][5]+"')><div class='subBars"+el.id+"' style=' box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; height:"+heig+"px; border-top:"+arr.borderSize+"px solid; border-color: "+arr.showValuesColor+"; background-color: "+color_map[valueData[i][2]]+"; left:"+wid*i+"px; color:"+arr.showValuesColor+"; font-size:"+fs+"px' >"+sv+"</div></a>";
|
|
|
233 $('#graphFieldBar'+unique).prepend(o);
|
|
|
234 }
|
|
|
235 }
|
|
|
236
|
|
|
237 if(arr.type=='multi')
|
|
|
238 $('.subBars'+el.id).css({ 'width': wid, 'position': 'absolute', 'bottom': 0 });
|
|
|
239
|
|
|
240 //position of bars
|
|
|
241 if(arr.position == 'bottom') $('.graphField'+el.id).css('bottom',0);
|
|
|
242
|
|
|
243
|
|
|
244
|
|
|
245
|
|
|
246
|
|
|
247 // animated apearing
|
|
|
248 if(arr.animate){
|
|
|
249 $('#graphFieldBar'+unique).css({ 'height' : 0 });
|
|
|
250 $('#graphFieldBar'+unique).animate({'height': fieldHeight},arr.speed*1000);
|
|
|
251 } else {
|
|
|
252 $('#graphFieldBar'+unique).css({'height': fieldHeight});
|
|
|
253 }
|
|
|
254
|
|
|
255 }
|
|
|
256
|
|
|
257
|
|
|
258
|
|
|
259 createLegend(color_map,el.id); // create legend from array
|
|
|
260 createLinks(el.id);
|
|
|
261 //position of legend
|
|
|
262
|
|
|
263 $(el).append("<div id='legendHolder"+unique+"'></div>");
|
|
|
264 $('#legendHolder'+unique).css({ 'width': legendWidth, 'float': 'right', 'margin-left':'100px','text-align' : 'left'});
|
|
|
265 $('#legendHolder'+unique).append(legend);
|
|
|
266 $('#legendHolder'+unique).append(links);
|
|
|
267 $('.legendBar'+el.id).css({ 'float':'left', 'margin': 3, 'margin-left':'10','height': 12, 'width': 20, 'font-size': 0});
|
|
|
268 $('.linkBar'+el.id).css({'margin-left':'10'});
|
|
|
269
|
|
|
270
|
|
|
271 $("#sortAsc"+el.id).click(function(){
|
|
|
272 if(opts[el.id].sort!='asc'){
|
|
|
273 opts[el.id].sort='asc';
|
|
|
274 $('#graphHolder'+el.id).html('');
|
|
|
275 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
276 }
|
|
|
277
|
|
|
278 });
|
|
|
279 $("#sortDesc"+el.id).click(function(){
|
|
|
280 if(opts[el.id].sort!='desc'){
|
|
|
281 opts[el.id].sort='desc';
|
|
32
|
282 $('#graphHolder'+el.id).html('');
|
|
|
283 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
0
|
284 }
|
|
|
285
|
|
|
286 });
|
|
|
287 $("#sortBarAsc"+el.id).click(function(){
|
|
|
288 if(opts[el.id].sortBar!='asc'){
|
|
|
289 opts[el.id].sortBar='asc';
|
|
|
290 $('#graphHolder'+el.id).html('');
|
|
|
291 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
292 }
|
|
|
293
|
|
|
294 });
|
|
|
295 $("#sortBarDesc"+el.id).click(function(){
|
|
|
296 if(opts[el.id].sortBar!='desc'){
|
|
|
297 opts[el.id].sortBar='desc';
|
|
|
298 $('#graphHolder'+el.id).html('');
|
|
|
299 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
300 }
|
|
|
301
|
|
|
302 });
|
|
|
303
|
|
|
304 $("#showBasepairs"+el.id).click(function(){
|
|
|
305 opts[el.id].tab='basepairs';
|
|
|
306 $('#graphHolder'+el.id).html('');
|
|
|
307 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
308
|
|
|
309
|
|
|
310
|
|
|
311 });
|
|
|
312 $("#showReads"+el.id).click(function(){
|
|
|
313 opts[el.id].tab='reads';
|
|
|
314 $('#graphHolder'+el.id).html('');
|
|
|
315 $('#graphHolder'+el.id).jqbargraph(opts[el.id]);
|
|
|
316
|
|
|
317
|
|
|
318
|
|
|
319 });
|
|
|
320
|
|
|
321
|
|
|
322
|
|
|
323 //position of title
|
|
|
324 if(arr.title){
|
|
|
325 $(el).wrap("<div id='graphHolder"+el.id+"'></div>");
|
|
32
|
326 if(arr.tab=='reads'){
|
|
|
327 $('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative reads assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
|
|
|
328 }else{
|
|
|
329 $('#graphHolder'+el.id).prepend("<div id='label"+el.id+"'>Cumulative basepairs assigned to family</div>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
|
|
|
330 }
|
|
0
|
331 $('#graphHolder'+el.id).prepend("<a href=#files"+el.id+" onclick=fillDiv('"+el.id+"')>"+arr.title+"</a>").css({ 'width' : arr.width+'px', 'text-align' : 'center' });
|
|
|
332
|
|
|
333 }
|
|
|
334 $("#graphHolder"+el.id).append("<div class='files"+el.id+"' id='files"+el.id+"' ></div><p/>");
|
|
|
335 $('.files'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'})
|
|
|
336
|
|
|
337 $("#graphHolder"+el.id).append("<div class='image"+el.id+"' id='image"+el.id+"' ></div>");
|
|
|
338 $('.image'+el.id).css({'width' : arr.width+'px','background-color':'silver', 'border':'2px solid gray', 'display':'none'})
|
|
|
339
|
|
|
340 };
|
|
|
341
|
|
|
342
|
|
|
343 //creating legend from array
|
|
|
344 createLegend = function(color_map,id){
|
|
|
345 legend = '';
|
|
|
346 for(var val in color_map){
|
|
|
347 legend += "<div id='legend"+val+"' style='overflow: hidden; zoom: 1;'>";
|
|
|
348 legend += "<div class='legendBar"+id+"' id='legendColor"+val+"' style='background-color:"+color_map[val]+"'></div>";
|
|
|
349 legend += "<div class='legendLabel"+id+"' id='graphLabel"+unique+"'>"+val+"</div>";
|
|
|
350 legend += "</div>";
|
|
|
351 }
|
|
|
352 };
|
|
|
353
|
|
|
354 createLinks = function(id){
|
|
|
355 links="<div class='linkBar"+id+"'>";
|
|
|
356 links+="<div ><a href='javascript:void(0);' id='sortAsc"+id+"' >sort asceding</a></div>"
|
|
|
357 links+="<div ><a href='javascript:void(0);' id='sortDesc"+id+"'>sort desceding</a></div>"
|
|
|
358 links+="<div ><a href='javascript:void(0);' id='sortBarAsc"+id+"'>sort bars asceding</a></div>"
|
|
|
359 links+="<div ><a href='javascript:void(0);' id='sortBarDesc"+id+"'>sort bars desceding</a></div>"
|
|
|
360 if(opts[id].tab=='reads'){
|
|
|
361 links+="<div ><a href='javascript:void(0);' id='showBasepairs"+id+"'>show baispair chart </a></div>"
|
|
|
362 }else{
|
|
|
363 links+="<div ><a href='javascript:void(0);' id='showReads"+id+"'>show read chart </a></div>"
|
|
|
364 }
|
|
|
365 links+="</div>"
|
|
|
366
|
|
|
367
|
|
|
368 };
|
|
|
369
|
|
|
370 fillDiv = function (elid, dir, region) {
|
|
|
371
|
|
|
372
|
|
|
373
|
|
|
374 arr=opts[elid];
|
|
|
375
|
|
|
376 dict=arr.files;
|
|
|
377
|
|
|
378 generateDownloadLink = function(family,region,filetype){
|
|
32
|
379 out=" no file ";
|
|
|
380 console.log(dict[family][region]);
|
|
|
381 if($.inArray("region_"+region+"_"+filetype,dict[family][region])!=-1){
|
|
0
|
382 out="<a href="+family+"/region_"+region+"_"+filetype+">download</a>";
|
|
|
383 }
|
|
|
384 return out;
|
|
|
385
|
|
|
386 };
|
|
|
387 generateShowLink = function(family,region){
|
|
32
|
388 out=" no image ";
|
|
|
389 console.log($.inArray("region_"+region+"_consensus.png",dict[family][region]));
|
|
|
390 if($.inArray("region_"+region+"_consensus.png",dict[family][region])!=-1){
|
|
0
|
391 out="<a href=#image"+elid+" onclick=showImage('"+elid+"','"+region+"','"+ family +"/"+dict[family][region][3]+"')>show</a>";
|
|
|
392 }
|
|
|
393 return out;
|
|
|
394
|
|
|
395 };
|
|
|
396
|
|
|
397
|
|
|
398 data = arr.data
|
|
|
399 for(var val in data){
|
|
|
400 for(var element in data[val][0]){
|
|
32
|
401 dict[data[val][0][0][3]+"_"+data[val][1]][data[val][0][element][5]].push([data[val][0][element][0],data[val][0][element][1],data[val][0][element][4]]);
|
|
0
|
402
|
|
|
403 }
|
|
|
404 }
|
|
32
|
405
|
|
0
|
406 var div = document.getElementById("files" + elid);
|
|
|
407 div.innerHTML="";
|
|
|
408 out = "<div><b>Files for Sample "+arr.sample+"</b></div><p/>";
|
|
|
409
|
|
|
410 out += "<div class='" + elid + "_files' id='" + elid + "_files'><table id='"+elid+"table' class='"+elid+"table' border=1 cellpadding=3 cellspacing=0 style=' border: 1pt solid #000000; border-Collapse: collapse'>";
|
|
|
411 out += "<tr><th>family</th><th>region</th><th>#reads</th><th>#basepairs</th><th>region length</th><th>unaligned fasta</th><th>bam alignment</th><th>consensus fasta</th><th>consensus diagram</th></tr>"
|
|
|
412 if (!dir) {
|
|
|
413 for (var directory in dict) {
|
|
|
414 //out += "<b>"+directory+"</b>";
|
|
|
415 //out += "<div class='dirlist' id='" + directory + "_files'";
|
|
|
416 for (var region in dict[directory]) {
|
|
32
|
417
|
|
|
418 last = dict[directory][region][dict[directory][region].length-1];
|
|
|
419 console.log(last);
|
|
|
420 if(last instanceof Array && last[0]){
|
|
|
421 out += "<tr><td>"+directory+"</td><td>"+region+"</td><td>"+last[0]+"</td><td>"+last[1]+"</td><td>"+last[2]+"</td><td>"+generateDownloadLink(directory,region,"unaligned.fa.bzip2")+"</td><td>"+generateDownloadLink(directory,region,"alignment.bam")+"</td><td>"+generateDownloadLink(directory,region,"consensus.fa")+"</td><td>"+generateShowLink(directory,region)+" "+generateDownloadLink(directory,region,"consensus.png")+"</td></tr>";
|
|
0
|
422 }
|
|
|
423 }
|
|
|
424 out += "</div>";
|
|
|
425 }
|
|
|
426 } else {
|
|
|
427 out += "<b>"+ dir+"</b>" ;
|
|
|
428
|
|
|
429 if (!region) {
|
|
|
430 for (var region in dict[dir]) {
|
|
|
431 if(dict[dir][region][5]){
|
|
32
|
432 out += "<tr><td>"+dir+"</td><td>"+region+"</td><td>"+last[0]+"</td><td>"+last[1]+"</td><td>"+last[2]+"</td><td>"+generateDownloadLink(dir,region,"unaligned.fa.bzip2")+"</td><td>"+generateDownloadLink(dir,region,"alignment.bam")+"</td><td>"+generateDownloadLink(dir,region,"consensus.fa")+"</td><td>"+generateShowLink(dir,region)+" "+generateDownloadLink(dir,region,"consensus.png")+"</td></tr>";
|
|
0
|
433 }
|
|
|
434 }
|
|
|
435 } else {
|
|
|
436
|
|
|
437 if(dict[dir][region][5]){
|
|
32
|
438 out += "<tr><td>"+dir+"</td><td>"+region+"</td><td>"+last[0]+"</td><td>"+last[1]+"</td><td>"+last[2]+"</td><td>"+generateDownloadLink(dir,region,"unaligned.fa.bzip2")+"</td><td>"+generateDownloadLink(dir,region,"alignment.bam")+"</td><td>"+generateDownloadLink(dir,region,"consensus.fa")+"</td><td>"+generateShowLink(dir,region)+" "+generateDownloadLink(dir,region,"consensus.png")+"</td></tr>";
|
|
0
|
439 }
|
|
|
440 }
|
|
|
441 }
|
|
|
442 out += "</div>";
|
|
|
443
|
|
|
444 $(div).append(out);
|
|
|
445 $("a").css({'color':'black'});
|
|
|
446 $("table").css({'border':'collapse'});
|
|
|
447 $(div).append("<div class='close_files"+elid+"'style='cursor:pointer;'>x</div>");
|
|
|
448 $(".close_files"+elid).click(function(){
|
|
|
449 $('.files'+elid).animate({'height':'0px'},1000,'',function(){
|
|
|
450 $('.files'+elid).css({'display':'none'});
|
|
|
451 $('.files'+elid).removeClass("selected");
|
|
|
452 });
|
|
|
453
|
|
|
454
|
|
|
455 });
|
|
|
456 $("div.close_files"+elid).css({'color':'white','position':'absolute','top':5,'left':5,'background-color':arr.colors[1],'border':'1px solid white','border-radius':'20px','height':'20px','width':'20px','text-align': 'center'});
|
|
|
457 $("a.close_files"+elid).css({'color':'white', 'text-decoration': 'none'});
|
|
|
458 $('.files'+elid).css({'width': 'auto','display':'none'});
|
|
|
459 wi=$('.files'+elid).width()+15;
|
|
|
460
|
|
|
461
|
|
|
462 if(!$('.files'+elid).hasClass("selected")){
|
|
|
463 $('.files'+elid).css({'height': 'auto','display':'none'});
|
|
|
464 hei=$('.files'+elid).height();
|
|
|
465 hei=parseInt(hei)+10;
|
|
|
466 hei=hei>400? hei=400 : hei;
|
|
|
467 $('.files'+elid).css({'width':wi+'px','position':'relative','height':'0px', 'overflow' : 'auto','background-color':'#D0D0D0', 'border':'2px solid silver','border-radius':'10px','display':'block' });
|
|
|
468 $('.files'+elid).animate({'height':hei+'px'}, 1000,'',function(){
|
|
|
469
|
|
|
470 $('.files'+elid).addClass("selected");
|
|
|
471 });
|
|
|
472 }
|
|
|
473 else{
|
|
|
474
|
|
|
475 curr_hei=$('.files'+elid).height();
|
|
|
476 $('.files'+elid).css({'height': 'auto','display':'none'});
|
|
|
477 hei=$('.files'+elid).height();
|
|
|
478 hei=parseInt(hei)+10;
|
|
|
479 hei=hei>400? hei=400 : hei;
|
|
|
480 $('.files'+elid).css({'height': curr_hei+'px', 'width':'915px','position':'relative', 'overflow' : 'auto','background-color':'#D0D0D0', 'border':'2px solid silver','border-radius':'10px','display':'block' }).animate({'height':hei+'px'}, 1000);
|
|
|
481 }
|
|
|
482 };
|
|
32
|
483
|
|
0
|
484
|
|
|
485 showImage = function (elid,region, consensus_image,wi) {
|
|
|
486 var div = document.getElementById("image" + elid);
|
|
|
487 div.innerHTML="";
|
|
|
488 this.img = new Image();
|
|
|
489 this.img.src = consensus_image;
|
|
|
490 hei=this.img.height;
|
|
|
491 out="<img src="+consensus_image+" alt="+consensus_image+">";
|
|
|
492 $(div).append(out)
|
|
|
493
|
|
|
494
|
|
|
495
|
|
|
496 $(div).append("<div class='close_image"+elid+"'style='cursor:pointer;'>x</div>");
|
|
|
497 $(".close_image"+elid).click(function(){
|
|
|
498 $('.image'+elid).animate({'height':'0px'},1000,'',function(){
|
|
|
499 $('.image'+elid).css({'display':'none'});
|
|
|
500 $('.image'+elid).removeClass("selected");
|
|
|
501 });
|
|
|
502
|
|
|
503
|
|
|
504 });
|
|
|
505 $("div.close_image"+elid).css({'color':'white','position':'absolute','bottom':5,'left':5,'background-color':arr.colors[1],'border':'1px solid white','border-radius':'20px','height':'20px','width':'20px','text-align': 'center'});
|
|
|
506 $("a.close_image"+elid).css({'color':'white', 'text-decoration': 'none'});
|
|
|
507
|
|
|
508 wi=$('.files'+elid).width();
|
|
|
509
|
|
|
510
|
|
|
511 if(!$('.image'+elid).hasClass("selected")){
|
|
|
512 $('.image'+elid).css({'width':wi+'px','position':'relative','height':'0px', 'overflow' : 'auto','background-color':'#D0D0D0', 'border':'2px solid silver','border-radius':'10px','display':'block' });
|
|
|
513 $('.image'+elid).animate({'height':hei}, 1000,'',function(){
|
|
|
514
|
|
|
515 $('.image'+elid).addClass("selected");
|
|
|
516 });
|
|
|
517 }
|
|
|
518
|
|
|
519 };
|
|
|
520
|
|
|
521
|
|
|
522 this.each (
|
|
|
523 function()
|
|
|
524 { init(this); }
|
|
|
525 )
|
|
|
526
|
|
|
527 };
|
|
|
528
|
|
|
529 // default values
|
|
|
530 $.fn.jqBarGraph.defaults = {
|
|
|
531 sample: 'no_sample_id',
|
|
|
532 barSpace: 10,
|
|
|
533 width: 400,
|
|
|
534 height: 600,
|
|
|
535 color: '#000000',
|
|
|
536 colors: false,
|
|
|
537 lbl: '',
|
|
|
538 sort: false, // 'asc' or 'desc'
|
|
|
539 sortBar: false,
|
|
|
540 tab: 'reads',
|
|
|
541 position: 'bottom', // or 'top' doesn't work for multi type
|
|
|
542 prefix: '',
|
|
|
543 postfix: '',
|
|
|
544 animate: true,
|
|
|
545 speed: 3.0,
|
|
|
546 legendWidth: 150,
|
|
|
547 legend: false,
|
|
|
548 type: false, // or 'multi'
|
|
|
549 showValues: false,
|
|
|
550 borderSize: 1,
|
|
|
551 showValuesColor: '#fff',
|
|
|
552 title: false
|
|
|
553 };
|
|
32
|
554
|
|
0
|
555
|
|
|
556 //sorting functions
|
|
32
|
557 function sortReadsAsc(a,b){
|
|
0
|
558 sum_a=0
|
|
|
559 for(var values in a){
|
|
|
560 if(a[values] instanceof Array){
|
|
|
561 for(var val in a[values]){
|
|
|
562 sum_a+=a[values][val][0];
|
|
|
563 }
|
|
|
564 }
|
|
|
565 }
|
|
|
566 sum_b=0
|
|
|
567 for(var values in b){
|
|
|
568 if(b[values] instanceof Array){
|
|
|
569 for(var val in b[values]){
|
|
|
570 sum_b+=b[values][val][0];
|
|
|
571 }
|
|
|
572 }
|
|
|
573 }
|
|
|
574
|
|
|
575 if (sum_a<sum_b) return -1;
|
|
|
576 if (sum_a>sum_b) return 1;
|
|
|
577 return 0;
|
|
32
|
578 }
|
|
|
579 function sortBasesAsc(a,b){
|
|
|
580 sum_a=0
|
|
|
581 for(var values in a){
|
|
|
582 if(a[values] instanceof Array){
|
|
|
583 for(var val in a[values]){
|
|
|
584 sum_a+=a[values][val][1];
|
|
|
585 }
|
|
|
586 }
|
|
|
587 }
|
|
|
588 sum_b=0
|
|
|
589 for(var values in b){
|
|
|
590 if(b[values] instanceof Array){
|
|
|
591 for(var val in b[values]){
|
|
|
592 sum_b+=b[values][val][1];
|
|
|
593 }
|
|
|
594 }
|
|
|
595 }
|
|
|
596
|
|
|
597 if (sum_a<sum_b) return -1;
|
|
|
598 if (sum_a>sum_b) return 1;
|
|
|
599 return 0;
|
|
0
|
600 }
|
|
|
601
|
|
32
|
602 function sortReadsDesc(a,b){
|
|
0
|
603 sum_a=0
|
|
|
604 for(var values in a){
|
|
|
605 if(a[values] instanceof Array){
|
|
|
606 for(var val in a[values]){
|
|
|
607 sum_a+=a[values][val][0];
|
|
|
608 }
|
|
|
609 }
|
|
|
610 }
|
|
|
611 sum_b=0
|
|
|
612 for(var values in b){
|
|
|
613 if(b[values] instanceof Array){
|
|
|
614 for(var val in b[values]){
|
|
|
615 sum_b+=b[values][val][0];
|
|
|
616 }
|
|
|
617 }
|
|
|
618 }
|
|
|
619
|
|
|
620 if (sum_a<sum_b) return 1;
|
|
|
621 if (sum_a>sum_b) return -1;
|
|
|
622 return 0;
|
|
|
623 }
|
|
32
|
624 function sortBasesDesc(a,b){
|
|
|
625 sum_a=0
|
|
|
626 for(var values in a){
|
|
|
627 if(a[values] instanceof Array){
|
|
|
628 for(var val in a[values]){
|
|
|
629 sum_a+=a[values][val][1];
|
|
|
630 }
|
|
|
631 }
|
|
|
632 }
|
|
|
633 sum_b=0
|
|
|
634 for(var values in b){
|
|
|
635 if(b[values] instanceof Array){
|
|
|
636 for(var val in b[values]){
|
|
|
637 sum_b+=b[values][val][1];
|
|
|
638 }
|
|
|
639 }
|
|
|
640 }
|
|
|
641
|
|
|
642 if (sum_a<sum_b) return 1;
|
|
|
643 if (sum_a>sum_b) return -1;
|
|
|
644 return 0;
|
|
|
645 }
|
|
0
|
646
|
|
|
647 function sortBars(data,fun){
|
|
|
648 for(var values in data){
|
|
|
649 last = data[values].pop();
|
|
|
650 for(var val in data[values]){
|
|
|
651 data[values][val].sort(fun);
|
|
|
652 }
|
|
|
653 data[values].push(last);
|
|
|
654 }
|
|
|
655 }
|
|
32
|
656
|
|
|
657 function sortBars(data,fun){
|
|
|
658 for(var values in data){
|
|
|
659 last = data[values].pop();
|
|
|
660 for(var val in data[values]){
|
|
|
661 data[values][val].sort(fun);
|
|
|
662 }
|
|
|
663 data[values].push(last);
|
|
|
664 }
|
|
|
665 }
|
|
|
666
|
|
|
667
|
|
0
|
668
|
|
|
669 function barAsc(a,b){
|
|
|
670 if(a[0]<b[0]) return -1;
|
|
|
671 if(a[0]>b[0]) return 1;
|
|
|
672 return 0;
|
|
|
673 }
|
|
|
674
|
|
|
675 function barDesc(a,b){
|
|
|
676 if(a[0]<b[0]) return 1;
|
|
|
677 if(a[0]>b[0]) return -1;
|
|
|
678 return 0;
|
|
|
679 }
|
|
|
680
|
|
|
681 })(jQuery); |
