js/tools/vigs.js

   1
   2
   3 $(document).ready(function () {
   4
   5         //safari_alert();
   6
   7         var score_array;
   8         var seq;
   9         var seq_length;
  10         var bt2_file;
  11         var best_start;
  12         var best_end;
  13         var best_seq;
  14         var expr_msg;
  15         var expr_f;
  16         var ids;
  17         var m_aoa;
  18         var temp_file;
  19         var n_mer;
  20         var si_rna;
  21
  22         //start the tool when click on Run VIGS Analysis
  23         $('#upload_expression_file').click(function () {
  24
  25                 //get the expression file from the web input form
  26                 expr_f = $('#expression_file').val();
  27                 $("#region_square").css("height","0px");
  28
  29                 //submit the form
  30                 $("#upload_expression_form").submit();
  31     });
  32
  33         //get the expression file from the form (in a iframe) and start the analysis
  34         $('#upload_expression_form').iframePostForm({
  35                 json: true,
  36                 post: function () {
  37                 },
  38                 complete: function (response) {
  39                         if (response.error) {
  40                                 alert("The expression file could not be uploaded"+response.error);
  41                         }
  42                         if (response.success) {
  43                                 expr_f = response.expr_file;
  44
  45                                 //get the arguments from the HTML elements
  46                                 seq = $("#sequence").val();
  47                                 si_rna = $("#si_rna").val();
  48                                 f_length = $("#f_length").val();
  49                                 mm = $("#mm").val();
  50                                 db = $("#bt2_db").val();
  51
  52                                 //Run Bowtie2
  53                                 runBt2(si_rna, f_length, mm, db);
  54                         }
  55                 }
  56         });
  57
  58         //expand/collapse the n-mers graph when click on 'Collapse Graph' button
  59         $('#collapse').click(function () {
  60                 activateCollapse(score_array,best_seq,seq,expr_msg,ids,m_aoa);
  61         });
  62
  63         //zoom in/out the n-mers graph when click on 'Zoom' button
  64         $('#zoom').click(function () {
  65                 activateZoom(score_array,best_seq,seq,expr_msg,ids,m_aoa);
  66         });
  67
  68         //display custom region selection rectangle when click on 'Set Custom Region' button
  69         $('#set_custom').click(function () {
  70                 getCustomRegion(score_array,best_seq,seq);
  71         });
  72
  73         $('#change_par').click(function () {
  74                 res = changeTargets(bt2_file,score_array,seq,best_seq,expr_f,ids,m_aoa);
  75                 score_array = res[0];
  76                 seq = res[1];
  77                 best_seq = res[2];
  78                 expr_msg = res[3];
  79                 ids = res[4];
  80                 m_aoa = res[5];
  81         });
  82
  83         $('#region_square').mouseup(function () {
  84                 getSquareCoords(score_array,best_seq,seq);
  85         });
  86
  87         $('#open_descriptions_dialog').click(function () {
  88                 $('#dialog_info').replaceWith($('#target_info').clone());
  89
  90                 $('#desc_dialog').dialog({
  91                         draggable:true,
  92                         resizable:true,
  93                         width:900,
  94                         minWidth:400,
  95                         maxHeight:400,
  96                         closeOnEscape:true,
  97                         title: "Gene Functional annotation",
  98                 });
  99         });
 100
 101         $('#params_dialog').click(function () {
 102
 103                 $('#params').html("&bull;&nbsp;<b>Fragment size: </b>"+$("#help_fsize").val()+"<br /> \
 104                 &bull;&nbsp;<b>n-mer: </b>"+$("#help_nmer").val()+"<br /> \
 105                 &bull;&nbsp;<b>Mismatches: </b>"+$("#help_mm").val()+"<br />\
 106                 &bull;&nbsp;<b>Database: </b>"+$("#db_name").val());
 107
 108                 $('#params').dialog({
 109                         draggable:true,
 110                         resizable:false,
 111                         width:500,
 112                         closeOnEscape:true,
 113                         title: "Parameters used",
 114                 });
 115         });
 116
 117         $('#help_dialog_1').click(function () {
 118
 119                 $('#help_dialog_tmp').html("&bull;&nbsp;The best target region score value indicates how good the yellow highlighted region is, taking into account the number of target and off-target n-mers. \
 120                         The closer to 100 the better is the value. In the same way, the custom region score indicates the value of the custom region, represented by the transparent grey rectangle.<br/> \
 121                         &bull;&nbsp;Set Custom Region button will activate a draggable and resizable transparent grey rectangle to manually select a custom region.<br/> \
 122                         &bull;&nbsp;Change button will recalculate the results using the new parameters chosen. In case of changing the n-mer size, the algorithm will run Bowtie 2 again, so this process could take a while.");
 123
 124                 $('#help_dialog_tmp').dialog({
 125                         draggable:true,
 126                         resizable:false,
 127                         width:500,
 128                         closeOnEscape:true,
 129                         title: "Modify parameters help",
 130                 });
 131         });
 132
 133         $('#help_dialog_2').click(function () {
 134
 135                 $('#help_dialog_tmp').html("&bull;&nbsp;N-mers mapping to the target/s are shown in blue and to off-targets in red. The yellow area highlights the region with the highest score using the selected parameters<br/> \
 136                         &bull;&nbsp;The bottom graph represents in red the score values along the sequence. The score value = 0 is indicated with a green line. \
 137                         Below this line are represented the regions with more off-targets than targets, and the opposite when the score is above the green line.<br/> \
 138                         &bull;&nbsp;Expand graph button will display every n-mer fragment aligned over the query for each subject.<br /> \
 139                         &bull;&nbsp;Zoom button will zoom in/out the VIGS map representation.");
 140
 141                 $('#help_dialog_tmp').dialog({
 142                         draggable:true,
 143                         resizable:false,
 144                         width:500,
 145                         closeOnEscape:true,
 146                         title: "Distribution of n-mers help",
 147                 });
 148         });
 149
 150         $('#help_dialog_3').click(function () {
 151
 152                 $('#help_dialog_tmp').html("&bull;&nbsp;This section shows the best or the custom region sequence in FASTA format.<br/> \
 153                         &bull;&nbsp;The custom region will update as the grey selection rectangle is moved.");
 154
 155                 $('#help_dialog_tmp').dialog({
 156                         draggable:true,
 157                         resizable:false,
 158                         width:500,
 159                         closeOnEscape:true,
 160                         title: "Best region help",
 161                 });
 162         });
 163
 164         $('#help_dialog_4').click(function () {
 165
 166                 $('#help_dialog_tmp').html("&bull;&nbsp;In this section is shown the query sequence, highlighting the best target region in yellow or the custom region in grey.<br/> \
 167                         &bull;&nbsp;The custom region will be updated as the grey selection rectangle is moved.");
 168
 169                 $('#help_dialog_tmp').dialog({
 170                         draggable:true,
 171                         resizable:false,
 172                         width:500,
 173                         closeOnEscape:true,
 174                         title: "Sequence overview help",
 175                 });
 176         });
 177
 178         $('#help_dialog_5').click(function () {
 179
 180                 $('#help_dialog_tmp').html("&bull;&nbsp;Number of n-mer matches and gene functional description are shown for each matched gene.<br/> \
 181                         &bull;&nbsp;The View link will open a draggable dialog with this information.");
 182
 183                 $('#help_dialog_tmp').dialog({
 184                         draggable:true,
 185                         resizable:false,
 186                         width:500,
 187                         closeOnEscape:true,
 188                         title: "Description of genes mapped help",
 189                 });
 190         });
 191
 192         $('#clear_form').click(function () {
 193                 $("#sequence").val(null);
 194                 $("#si_rna").val(21);
 195                 $("#f_length").val(300);
 196                 $("#mm").val(0);
 197                 $("#expression_file").val(null);
 198         });
 199
 200         $('#working').dialog( {
 201                 height: 100,
 202                 width:  50,
 203                 modal: true,
 204                 autoOpen: false,
 205                 closeOnEscape: false,
 206                 draggable: false,
 207                 resizable: false,
 208                 open: function() { $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide(); },
 209                 title: 'Working...'
 210         });
 211
 212         // sent the data to the controller to run bowtie2 and parse the results
 213         function runBt2(si_rna, f_length, mm, db) {
 214                 var db_name;
 215
 216                 $("#no_results").html("");
 217                 // alert("seq: "+seq.length+", si_rna: "+si_rna+", f_length: "+f_length+", mm: "+mm+", db: "+db+", expr_file: "+expr_file);
 218                 $.ajax({
 219                         url: '/tools/vigs/result/',
 220                         // async: false,
 221                         timeout: 600000,
 222                         method: 'POST',
 223                         data: { 'tmp_file_name': temp_file, 'sequence': seq, 'fragment_size': si_rna, 'seq_fragment': f_length, 'missmatch': mm, 'database': db },
 224                         beforeSend: function(){
 225                                 disable_ui();
 226                         },
 227                         success: function(response) {
 228                                 if (response.error) {
 229                                         alert("ERROR: "+response.error);
 230                                         enable_ui();
 231                                 } else {
 232                                         db_name = response.db_name;
 233                                         bt2_file = response.jobid;
 234
 235                                         $("#help_fsize").val(f_length);
 236                                         $("#help_nmer").val(si_rna);
 237                                         $("#help_mm").val(mm);
 238                                         $("#db_name").val(db_name);
 239
 240                                         getResults(1, bt2_file, si_rna, f_length, mm, 0, db, expr_f);
 241                                 }
 242                         },
 243                         error: function(response) {
 244                                 alert("An error occurred. The service may not be available right now. Bowtie2 could not be executed");
 245                                 //safari_alert();
 246                                 enable_ui();
 247                         }
 248                 });
 249         }
 250
 251
 252         function getResults(status, bt2_res, si_rna, f_length, mm, coverage, db, expr_file) {
 253
 254                 var t_info = "<tr><th>Gene</th><th>Matches</th><th>Functional Description</th></tr>";
 255                 $("#no_results").html("");
 256
 257                 $.ajax({
 258                         url: '/tools/vigs/view/',
 259                         // async: false,
 260                         timeout: 600000,
 261                         method: 'POST',
 262                         data: {'id': bt2_res, 'sequence': seq, 'fragment_size': si_rna, 'seq_fragment': f_length, 'missmatch': mm, 'targets': coverage, 'expr_file': expr_file, 'status': status, 'database': db},
 263                         complete: function(){
 264                                 enable_ui();
 265                                 hide_ui();
 266                         },
 267                         success: function(response) {
 268                                 if (response.error) {
 269                                         alert("ERROR: "+response.error);
 270                                         enable_ui();
 271                                 } else {
 272
 273                                         //assign values to global variables
 274                                         score_array = response.all_scores;
 275                                         best_seq = response.best_seq;
 276                                         expr_msg = response.expr_msg;
 277                                         var best_score = response.score;
 278                                         var best_start = response.cbr_start;
 279                                         var best_end = response.cbr_end;
 280                                         seq = response.query_seq;
 281                                         var seq_length = seq.length;
 282                                         coverage = response.coverage;
 283                                         ids = response.ids;
 284                                         m_aoa = response.matches_aoa;
 285
 286                                         $("#score_p").html("<b>Best target region score:</b> "+best_score+" &nbsp;&nbsp;(-&infin;&mdash;100)<br />");
 287                                         $("#t_num").val(coverage);
 288
 289                                         if (+response.score < 0) {
 290                                                 $("#no_results").html("Note: The score value is very low!. Increasing the number of targets or the n-mer length, or decreasing the mismatches the score value will increase");
 291                                         }
 292
 293                                         //show result sections
 294                                         $("#hide1").css("display","inline");
 295
 296                                         //assign values to html variables
 297                                         $("#coverage_val").val(coverage);
 298                                         $("#seq_length").val(seq_length);
 299                                         $("#f_size").val(response.f_size);
 300                                         $("#n_mer").val(si_rna);
 301                                         $("#align_mm").val(response.missmatch);
 302                                         $("#best_start").val(best_start);
 303                                         $("#best_end").val(best_end);
 304                                         $("#cbr_start").val(best_start);
 305                                         $("#cbr_end").val(best_end);
 306                                         $("#best_score").val(best_score);
 307                                         $("#img_height").val(response.img_height);
 308
 309                                         //set collapse and zoom buttons
 310                                         $("#collapse").val(1);
 311                                         $("#collapse").html("Expand Graph");
 312                                         $("#zoom").val(0);
 313                                         $("#zoom").html("Zoom In");
 314
 315                                         createMap(1,0,score_array,expr_msg,ids,m_aoa);
 316
 317                                         if (+best_seq.length > 10) {
 318                                                 $("#best_seq").html("<b>>best_target_region_("+best_start+"-"+best_end+")</b><br />"+best_seq);
 319                                         } else {
 320                                                 $("#best_seq").html("<b>No results were found</b>");
 321                                         }
 322                                         $("#query").html(seq);
 323                                         hilite_sequence(best_start,best_end,0);
 324
 325                                         var desc="";
 326                                         var gene_name="";
 327
 328                                         for (var i=0; i<ids.length; i=i+1) {
 329                                                 if (ids[i][2].match(/Niben/)) {
 330                                                         desc = ids[i][2].replace(/Niben\d+Scf[\:\.\d]+/,"");
 331                                                         gene_name = ids[i][0];
 332                                                 } else if (ids[i][0].match(/Solyc/)) {
 333                                                         desc = ids[i][2].replace(/.+functional_description:/,"");
 334                                                         desc = desc.replace(/\"/g,"");
 335                                                         gene_name = ids[i][0].replace(/lcl\|/,"");
 336                                                 } else {
 337                                                         gene_name = ids[i][0];
 338                                                         desc = ids[i][2];
 339                                                 }
 340                                                 t_info += "<tr><td>"+gene_name+"</td><td style='text-align:right;'>"+ids[i][1]+"</td><td>"+desc+"</td></tr>";
 341                                         }
 342
 343                                         $("#target_info").html(t_info);
 344                                         $("#hide2").css("display","inline");
 345                                         $("#hide3").css("display","inline");
 346
 347                                         $("#help_fsize").val(f_length);
 348                                         $("#help_mm").val(mm);
 349                                 }
 350                         },
 351                         error: function(response) {
 352                                 alert("An error occurred. The service may not be available right now.");
 353                                 //safari_alert();
 354                                 enable_ui();
 355                         }
 356                 });
 357         }
 358
 359
 360         function createMap(collapsed,zoom,score_array,expr_msg,ids,m_aoa) {
 361                 var img_height = +$("#img_height").val();
 362                 var best_start = +$("#best_start").val();
 363                 var best_end = +$("#best_end").val();
 364                 var seq_length = +$("#seq_length").val();
 365                 var img_width = 700;
 366                 var xscale = +(700/seq_length); // to transform sequence length to pixels
 367                 var vline_tag = 100;
 368
 369                 var c=document.getElementById("myCanvas");
 370                 var ctx=c.getContext("2d");
 371
 372                 if (collapsed) {
 373                         c.height = +(((ids.length)*35)+73);
 374                         img_height = c.height;
 375                 } else {
 376                         c.height = +img_height;
 377                 }
 378                 if (seq_length < 700 || zoom) {
 379                         xscale = 1;
 380                         img_width = seq_length;
 381                 }
 382
 383                 c.width = img_width;
 384
 385                 var cbr_start = +(best_start*xscale);
 386                 var cbr_width = +((best_end-best_start)*xscale);
 387
 388                 //print black background
 389                 ctx.beginPath();
 390                 ctx.rect(0,(img_height-52),img_width,102);
 391                 ctx.fillStyle='rgb(30,30,30)';
 392                 ctx.fill();
 393                 ctx.stroke();
 394
 395                 //print yellow rectangle for the best region
 396                 ctx.beginPath();
 397                 ctx.rect(cbr_start,0,cbr_width,img_height);
 398                 ctx.strokeStyle='yellow';
 399                 ctx.fillStyle='yellow';
 400                 ctx.fill();
 401                 ctx.stroke();
 402
 403                 //print the rectangles
 404                 off_set_array = printSquares(collapsed,zoom,ids,m_aoa);
 405
 406                 //print vertical lines and tick values
 407                 ctx.fillStyle='black';
 408                 ctx.lineWidth=1;
 409                 ctx.strokeStyle='rgb(200,200,200)';
 410                 ctx.font="10px Arial";
 411                 if (seq_length >=2700) {ctx.font="8px Arial";}
 412                 if (seq_length >=4500) {ctx.font="6px Arial";}
 413
 414                 for (var l=100; l<seq_length; l+=100) {
 415                         var i = l*xscale;
 416                         ctx.beginPath();
 417                         ctx.moveTo(i,15);
 418                         ctx.lineTo(i,img_height);
 419                         ctx.fillText(vline_tag,i-14,12);
 420                         ctx.stroke();
 421
 422                         vline_tag+=100;
 423                 }
 424
 425                 // print horizontal line under ticks
 426                 ctx.beginPath();
 427                 ctx.moveTo(0,20);
 428                 ctx.lineTo(img_width,20);
 429                 ctx.lineWidth=2;
 430                 ctx.strokeStyle='#000000';
 431                 ctx.stroke();
 432
 433                 //print subject names
 434                 var ids_aoa = expr_msg; //aoa with subject ids
 435                 for (var t=0; t<ids_aoa.length;t++) {
 436                         ctx.beginPath();
 437                         ctx.fillStyle='#000000';
 438                         ctx.font="12px Arial";
 439                         ctx.fillText(ids_aoa[t][0],5,off_set_array[t]+17);
 440                         ctx.stroke();
 441                 }
 442                 printScoreGraph(collapsed,zoom,score_array,ids);
 443         }
 444
 445
 446         function printSquares(collapsed,zoom,ids,m_aoa) {
 447                 var coverage = $("#coverage_val").val();
 448                 var seq_length = $("#seq_length").val();
 449
 450                 var xscale = +(700/seq_length); // to transform sequence length to pixels
 451                 var img_width = 700;
 452                 var off_set = 20; //just under the horizontal line
 453                 var coord_y = 0;
 454
 455                 var before_block = 20;
 456                 var after_block = 10;
 457
 458                 if (collapsed) {
 459                         before_block = 25;
 460                 }
 461                 if (seq_length < 700 || zoom) {
 462                         xscale = 1;
 463                         img_width = seq_length;
 464                 }
 465
 466                 var off_set_array = []; //to print names
 467
 468                 var c=document.getElementById("myCanvas");
 469                 var ctx=c.getContext("2d");
 470
 471                 ctx.lineWidth=1;
 472
 473                 // each track
 474                 for (var t=0; t<ids.length;t++) {
 475                         var max_row_num = 0; //to calculate the height of every track
 476                         off_set_array.push(off_set);
 477
 478                         off_set += before_block; //add some space for the names
 479
 480                         //target and off-target colors
 481                         if (t < coverage) {
 482                                 ctx.strokeStyle='rgb(0,0,180)';
 483                                 ctx.fillStyle='rgb(0,120,255)';
 484                         } else {
 485                                 ctx.strokeStyle='rgb(150,0,0)';
 486                                 ctx.fillStyle='rgb(255,0,0)';
 487                         }
 488                         var row = 1;
 489                         var prev_match_end = 9999;
 490                         var prev_match_start = 0;
 491                         var collapsed_start = 0;
 492                         var collapsed_end = 0;
 493
 494                         //each match (rectangles)
 495                         for (var i=0; i<m_aoa[t].length;i++) {
 496
 497                                 var coord = m_aoa[t][i].split("-"); //array with start and end for every match
 498                                 m_width = +((+coord[1] - +coord[0] +1)*xscale); //rectangle width in pixels
 499                                 m_start = +(+coord[0]*xscale); //rectangle start in pixels
 500
 501                                 //to allow as many rows as the n-mer size
 502                                 var match_distance = +(+coord[0] - +prev_match_start);
 503                                 if ((row < si_rna -1) && (coord[0] <= prev_match_end) && prev_match_end != 9999) {
 504                                         if ((match_distance > 1) && ((+row + match_distance) > si_rna)) {
 505                                                 row = 1;
 506                                         } else {
 507                                                 row++;
 508                                         }
 509                                 } else {
 510                                         row = 1;
 511                                 }
 512
 513                                 if (!collapsed) {
 514                                         coord_y = off_set + row*4;
 515
 516                                         //print rectangles
 517                                         ctx.beginPath();
 518                                         ctx.rect(m_start,coord_y,m_width,4);
 519                                         ctx.fill();
 520                                         ctx.stroke();
 521                                 } else {
 522
 523                                         if (collapsed_start == 0) {
 524                                                 collapsed_start = +coord[0];
 525                                         }
 526                                         if (+coord[0] < +prev_match_end) {
 527                                                 collapsed_end = prev_match_end;
 528                                         } else {
 529                                                 coord_y = off_set; //to collapse all rectangles of the track
 530                                                 if (collapsed_end == 9999) {collapsed_end = prev_match_end;}
 531                                                 var collapsed_width = (+collapsed_end - +collapsed_start + 1)*xscale;
 532
 533                                                 //print rectangles
 534                                                 ctx.beginPath();
 535                                                 ctx.rect(collapsed_start*xscale,coord_y,collapsed_width,4);
 536                                                 ctx.fill();
 537                                                 ctx.stroke();
 538
 539                                                 collapsed_start = coord[0];
 540                                                 collapsed_end = coord[1];
 541                                         }
 542                                 }
 543                                 prev_match_end = +coord[1];
 544                                 prev_match_start = +coord[0];
 545
 546                                 if (row > max_row_num) {max_row_num = row;} //get maximum number of rows per track to calculate the track height
 547                         }
 548
 549                         if (!collapsed) {
 550                                 var track_height = (max_row_num*4)+after_block;
 551                                 off_set += track_height; //add space for next track
 552                         } else {
 553                                 if (collapsed_end == 9999) {collapsed_end = prev_match_end;}
 554                                 coord_y = off_set; //to collapse all rectangles of the track
 555                                 var collapsed_width = (+collapsed_end - +collapsed_start + 1)*xscale;
 556
 557                                 //print rectangles
 558                                 ctx.beginPath();
 559                                 ctx.rect(collapsed_start*xscale,coord_y,collapsed_width,4);
 560                                 ctx.fill();
 561                                 ctx.stroke();
 562
 563                                 off_set += 10;
 564                         }
 565
 566                         // print horizontal line under tracks
 567                         ctx.beginPath();
 568                         ctx.moveTo(0,off_set);
 569                         ctx.lineTo(img_width,off_set);
 570                         ctx.lineWidth=1;
 571                         ctx.strokeStyle='rgb(200,200,200)';
 572                         ctx.stroke();
 573                 }
 574                 return off_set_array;
 575         }
 576
 577
 578         function printScoreGraph(collapsed,zoom,score_array,ids) {
 579                 var img_height = document.getElementById("img_height").value;
 580                 var coverage = $("#coverage_val").val();
 581                 var seq_length = $("#seq_length").val();
 582
 583                 var xscale = +(700/seq_length); // to transform sequence legth to pixels
 584                 var img_h = +(img_height-52);
 585                 var img_width = 700;
 586
 587                 if (collapsed) {
 588                         img_h = +((ids.length*35)+21);
 589                 }
 590                 if (seq_length < 700 || zoom) {
 591                         xscale = 1;
 592                         img_width = seq_length;
 593                 }
 594
 595                 var c=document.getElementById("myCanvas");
 596                 var ctx=c.getContext("2d");
 597
 598                 //print black background
 599                 ctx.beginPath();
 600                 ctx.rect(0,img_h,img_width,52);
 601                 ctx.globalAlpha = 0.7;
 602                 ctx.fillStyle='rgb(30,30,30)';
 603                 ctx.fill();
 604                 ctx.stroke();
 605                 ctx.globalAlpha = 1;
 606
 607                 //print x axis (green line)
 608                 ctx.lineWidth=1;
 609                 ctx.beginPath();
 610                 ctx.strokeStyle='rgb(0,200,0)';
 611                 ctx.moveTo(0,(img_h+26));
 612                 ctx.lineTo(img_width,(img_h+26));
 613                 ctx.stroke();
 614
 615                 if (score_array) {
 616                         ctx.beginPath();
 617                         ctx.moveTo(0,+img_h+25);
 618                         ctx.strokeStyle='rgb(255,0,0)';
 619
 620                         for (var i=0; i<score_array.length; i++) {
 621                                 var xpos = (i+1)*xscale;
 622                                 var ypos = 0;
 623
 624                                 // var final_score = (+score_array[i]/+si_rna/coverage*100).toFixed(2); //using coverage in algorithm
 625                                 var final_score = (+score_array[i]*100/coverage).toFixed(2);
 626
 627                                 if (+final_score >= 0) {
 628                                         ypos = 25-(+final_score*25/100)+2;
 629                                 } else {
 630                                         ypos = 50-(+final_score*25/100);
 631                                 }
 632                                 if (ypos > 50) {
 633                                         ypos = 50;
 634                                 }
 635                                 ctx.lineTo(xpos,img_h+ypos);
 636                                 ctx.stroke();
 637                         }
 638                 }
 639         }
 640
 641
 642         // Highlights best region in Sequence Overview section
 643         function hilite_sequence(cbr_start,cbr_end,color) {
 644
 645                 if (color) {
 646                         var markup = new Text.Markup( { 'highlight' : [ '<span class="highlighted2" style="background:#D2D4D6;">', '</span>' ], 'break' : [ '<br />', '' ], 'space' : [ '<span>&nbsp;</span>', '' ] });
 647                 } else {
 648                         var markup = new Text.Markup( { 'highlight' : [ '<span class="highlighted">', '</span>' ], 'break' : [ '<br />', '' ], 'space' : [ '<span>&nbsp;</span>', '' ] });
 649                 }
 650
 651                 var source_el = document.getElementById('query');
 652                 var markup_el = document.getElementById('markup');
 653
 654                 var hilite_regions=[];
 655
 656                 if (cbr_end > 10) {
 657                         cbr_start = cbr_start-1;
 658                         if (cbr_start < 1) {
 659                                 cbr_start = 1;
 660                         }
 661                         hilite_regions.push(['highlight', cbr_start, cbr_end]);
 662                 }
 663
 664                 var sequence = source_el.innerHTML;
 665
 666                 var break_regions = [];
 667                 for (var i=0; i<sequence.length; i=i+60) {
 668                         break_regions.push([ 'break', i, i ]);
 669                 }
 670
 671                 var space_regions = [];
 672                 for (var i =0; i<sequence.length; i=i+10) {
 673                         space_regions.push(['space', i, i]);
 674                 }
 675
 676                 var all_regions = break_regions.concat(hilite_regions, space_regions);
 677                 var markedup_seq = markup.markup(all_regions, sequence);
 678
 679                 //insert line numbers
 680                 var line_length = 60;
 681                 var current_pos = 1;
 682                 var lines = markedup_seq.split('<br />');
 683                 var final_seq = '';
 684                 var leading_spaces = new Array('', '', '', '', '', '');
 685
 686                 for (var i=1; i<lines.length; i++) {
 687                         leading_str = leading_spaces.slice(0,Math.ceil(6-(Math.log(current_pos)/Math.log(10)))).join('&nbsp;'); // poor man's sprintf
 688                         leading_str2 = leading_spaces.slice(0,Math.ceil(6-(Math.log(current_pos +line_length -1)/Math.log(10)))).join('&nbsp;');
 689
 690                         if (current_pos + line_length < sequence.length) {
 691                                 final_seq = final_seq + leading_str + current_pos +' '+ lines[i] +' '+ leading_str2 + ( current_pos + line_length - 1) +'<br />';
 692                         } else {
 693                                 final_seq = final_seq + leading_str + current_pos + ' ' + lines[i] + ' ' + leading_str2 + sequence.length + '<br />';
 694                         }
 695
 696                         current_pos += line_length;
 697                 }
 698
 699                 markup_el.innerHTML='<font face="courier" size="2">'+final_seq+'</font>';
 700         }
 701
 702
 703         function activateCollapse(score_array,best_seq,seq,expr_msg,ids,m_aoa) {
 704                 document.getElementById("region_square").style.height="0px";
 705                 var collapsed = $("#collapse").val();
 706                 var zoom = $("#zoom").val();
 707                 var seq_length = $("#seq_length").val();
 708
 709                 if (collapsed == 0) {
 710                         $("#collapse").html("Expand Graph");
 711                         $("#collapse").val(1);
 712                         collapsed = 1;
 713                 } else {
 714                         $("#collapse").html("Collapse Graph");
 715                         $("#collapse").val(0);
 716                         collapsed = 0;
 717                 }
 718                 createMap(+collapsed,+zoom,score_array,expr_msg,ids,m_aoa);
 719                 getCustomRegion(score_array,best_seq,seq);
 720         }
 721
 722         function activateZoom(score_array,best_seq,seq,expr_msg,ids,m_aoa) {
 723                 var collapsed = $("#collapse").val();
 724                 var zoom = $("#zoom").val();
 725                 var seq_length = $("#seq_length").val();
 726
 727                 if (zoom == 0) {
 728                         $("#zoom").html("Zoom Out");
 729                         $("#zoom").val(1);
 730                         zoom = 1;
 731                 } else {
 732                         $("#zoom").html("Zoom In");
 733                         $("#zoom").val(0);
 734                         zoom = 0;
 735                 }
 736                 createMap(+collapsed,+zoom,score_array,expr_msg,ids,m_aoa);
 737                 getCustomRegion(score_array,best_seq,seq);
 738         }
 739
 740         //Function to change values of custom region by dragging the selection square
 741         function getSquareCoords(score_array,best_seq,seq) {
 742                 var img_width = 700;
 743                 var seq_length = $("#seq_length").val();
 744                 var zoom = $("#zoom").val();
 745                 var rev_xscale = +(seq_length/img_width); // to transform sequence length to pixels
 746                 $("#cbr_p").html("");
 747
 748                 if (+zoom || seq_length < 700) {
 749                         rev_xscale = 1;
 750                         img_width = seq_length;
 751                 }
 752
 753                 var r_left = document.getElementById("region_square").style.left;
 754                 var r_width = document.getElementById("region_square").style.width;
 755                 var left_num = r_left.replace("px","");
 756                 var right_num = r_width.replace("px","");
 757                 var sqr_left = Math.round(+left_num*rev_xscale);
 758                 var sqr_right = Math.round((+left_num + +right_num)*rev_xscale);
 759
 760                 var cbr_start = (+sqr_left + 1);
 761                 var cbr_end = (+sqr_right);
 762                 var fragment = (+cbr_end - +cbr_start +1);
 763
 764                 if (+cbr_end > seq_length) {cbr_end = seq_length;}
 765                 if (+cbr_start < 1) {cbr_start = 1;}
 766
 767                 $("#cbr_start").val(cbr_start);
 768                 $("#cbr_end").val(cbr_end);
 769                 $("#f_size").val(fragment);
 770
 771                 var best_region = [cbr_start,cbr_end];
 772                 hilite_sequence(cbr_start,cbr_end,1);
 773                 printCustomSeq(best_seq,seq);
 774
 775                 if (score_array) {
 776                         printCustomScore(cbr_start,cbr_end,score_array);
 777                 }
 778         }
 779
 780         //Prints custom sequence in Best Region section
 781         function printCustomSeq(best_seq,seq) {
 782                 var best_seq_el = document.getElementById("best_seq");
 783                 var cbr_start = +$("#cbr_start").val();
 784                 var cbr_end = +$("#cbr_end").val();
 785                 var best_start = +$("#best_start").val();
 786                 var best_end = +$("#best_end").val();
 787
 788                 best_seq_el.innerHTML = "<b>>custom_region_("+cbr_start+"-"+cbr_end+")</b><br />";
 789
 790                 for (var i=cbr_start; i<cbr_end; i=i+60) {
 791                         if (cbr_end<i+61) {
 792                                 best_seq_el.innerHTML += seq.substring(i-1,cbr_end)+"<br />";
 793                         } else {
 794                                 best_seq_el.innerHTML += seq.substring(i-1,i+59)+"<br />";
 795                         }
 796                 }
 797                 best_seq_el.innerHTML += "<br /><b>>best_target_region_("+best_start+"-"+best_end+")</b><br />";
 798                 best_seq_el.innerHTML += best_seq+"<br />";
 799         }
 800
 801
 802         // Prints Scores
 803         function printCustomScore(start,end,score_array){
 804                 var custom_score = 0;
 805                 var coverage = +$("#coverage_val").val();
 806                 var seq_length = +$("#seq_length").val();
 807                 var best_score = +$("#best_score").val();
 808
 809                 if (+end > seq_length) {end = seq_length;}
 810                 if (+start < 1) {start = 1;}
 811
 812                 if (score_array) {
 813                         for (var i= +start-1; i< +end; i++) {
 814                                 custom_score += +score_array[i];
 815                         }
 816                 }
 817
 818                 var fragment_length = (+end - +start + 1);
 819
 820                 if (coverage > 0 && fragment_length > 0) {
 821                         var final_score = ((custom_score*100/fragment_length)/coverage).toFixed(2);
 822                         // var final_score = (custom_score*100/+si_rna/fragment_length/coverage).toFixed(2); //using coverage
 823                         $("#score_p").html("<b>Best target region score:</b> "+best_score+" &nbsp;&nbsp; <b> Custom region score: </b>"+final_score+" &nbsp;&nbsp; (-&infin;&mdash;100)");
 824                 }
 825         }
 826
 827
 828         // Creates the draggable selection square and modifies custom region when push a button
 829         function getCustomRegion(score_array,best_seq,seq) {
 830
 831                 var cbr_start = +$("#cbr_start").val();
 832                 var cbr_end = +$("#cbr_end").val();
 833                 var map_el = document.getElementById('myCanvas');
 834                 var seq_length = +$("#seq_length").val();
 835
 836                 var img_width = 700;
 837                 var xscale = +(+img_width/+seq_length); // to transform sequence length to pixels
 838
 839                 var zoom = $("#zoom").val();
 840
 841                 if (zoom == 1 || seq_length < 700) {
 842                         xscale = 1;
 843                         img_width = seq_length;
 844                 }
 845                 if (seq_length < 700) {document.getElementById("seq_map").style.width=""+seq_length+"px";}
 846
 847
 848                 if ((cbr_start > 0) && (cbr_end <= seq_length) && (cbr_end >= cbr_start+99)) {
 849                         var cbr_left = Math.round((+cbr_start-1)*xscale);
 850                         var cbr_width = ((+cbr_end - +cbr_start +1)*xscale);
 851
 852                         var cbr_height = (map_el.height - 21);
 853
 854                         //a border will add pixels to all end coordinates
 855                         $("#region_square").css("border","0px solid #000000");
 856                         $("#region_square").css("top","21px");
 857                         $("#region_square").css("background","rgba(80,100,100,0.3)");
 858                         $("#region_square").css("left",cbr_left+"px");
 859                         $("#region_square").css("width",cbr_width+"px");
 860                         $("#region_square").css("height",cbr_height+"px");
 861
 862             $("#region_square").resizable({
 863                                 containment:map_el,
 864                                 handles: 'e, w',
 865                                 minWidth: 100*xscale,
 866                         });
 867
 868                         $("#region_square").draggable({
 869                                 axis: 'x',
 870                                 containment:map_el,
 871                                 cursor: "move"
 872                         });
 873
 874                         $("#cbr_p").html("");
 875                         var fragment = (+cbr_end - +cbr_start +1);
 876                         $("#f_size").val(fragment);
 877
 878                         hilite_sequence(cbr_start,cbr_end,1);
 879
 880
 881                         printCustomSeq(best_seq,seq);
 882
 883                         if (score_array) {
 884                                 printCustomScore(cbr_start,cbr_end,score_array);
 885                         }
 886
 887                 } else {
 888                         $("#cbr_p").html("Values must be between 1 and "+seq_length+", getting a sequence not shorter than 100 bp!");
 889                 }
 890         }
 891
 892
 893         function changeTargets(bt2_file,score_array,seq,best_seq,expr_f,ids,m_aoa) {
 894
 895                 var t_num = $("#t_num").val();
 896                 var coverage = $("#coverage_val").val();
 897                 var f_size = $("#f_size").val();
 898                 var f_length = $("#f_length").val();
 899                 var n_mer = $("#n_mer").val();
 900                 si_rna = $("#si_rna").val();
 901                 var align_mm = $("#align_mm").val();
 902                 var mm = $("#mm").val();
 903                 var db = $("#bt2_db").val();
 904                 var expr_msg;
 905                 var seq_length = $("#seq_length").val();
 906
 907                 if (n_mer != si_rna) {
 908                         $("#f_length").val(f_size);
 909                         $("#mm").val(align_mm);
 910                         $("#si_rna").val(n_mer);
 911                         si_rna = n_mer;
 912                         $("#coverage_val").val(t_num);
 913                         $("#region_square").css("height","0px");
 914
 915                         //check values before recalculate
 916                         if (+n_mer >= 18 && +n_mer <= 30) {
 917                                 disable_ui();
 918                                 runBt2(n_mer, f_size, align_mm, db);
 919                         } else {
 920                                 alert("n-mer value must be between 18-30");
 921                         }
 922                 } else if (align_mm != mm) {
 923                         $("#f_length").val(f_size);
 924                         $("#mm").val(align_mm);
 925                         $("#coverage_val").val(t_num);
 926
 927                         // if (!align_mm || +align_mm < 0 || +align_mm > 1) {
 928                         if (!align_mm || +align_mm < 0 || +align_mm > 2) {
 929                                 alert("miss-match value ("+align_mm+") must be between 0-2");
 930                         } else {
 931                                 disable_ui();
 932                                 getResults(1, bt2_file, n_mer, f_size, align_mm, t_num, db, expr_f);
 933                                 $("#region_square").css("height","0px");
 934                                 //getCustomRegion(score_array,best_seq,seq)
 935                         }
 936                 } else if (t_num != coverage || f_size != f_length) {
 937                         $("#f_length").val(f_size);
 938                         $("#coverage_val").val(t_num);
 939
 940                         //check values before recalculate
 941                         if (!f_size || +f_size < 100 || +f_size > +seq_length) {
 942                                 alert("Wrong fragment size ("+f_size+"), it must be 100 bp or higher, and lower than sequence length");
 943                         } else {
 944                                 disable_ui();
 945                                 getResults(0, bt2_file, n_mer, f_size, align_mm, t_num, db, expr_f);
 946                                 $("#region_square").css("height","0px");
 947                                 //getCustomRegion(score_array,best_seq,seq)
 948                         }
 949                 } else {
 950                         alert("there are no parameters to change");
 951                 }
 952                 return [score_array,seq,best_seq,expr_msg,ids,m_aoa]
 953         }
 954
 955         function disable_ui() {
 956                 $('#working').dialog("open");
 957         }
 958
 959         function enable_ui() {
 960                 $('#working').dialog("close");
 961         }
 962
 963         function hide_ui() {
 964                 Effects.swapElements('vigs_input_offswitch', 'vigs_input_onswitch');
 965                 Effects.hideElement('vigs_input_content');
 966                 Effects.swapElements('vigs_usage_offswitch', 'vigs_usage_onswitch');
 967                 Effects.hideElement('vigs_usage_content');
 968         }
 969
 970         // function safari_alert() {
 971         //      if (navigator.appVersion.match(/Safari/i) && !navigator.appVersion.match(/chrome/i)) {
 972         //              alert("SGN VIGS Tool does not support Safari, please use a different browser like Firefox (recommended) or Google chrome.");
 973         //      }
 974         // }
 975 });
 976