mason/tools/blast/index.mas

   1
   2 <%doc>
   3 </%doc>
   4
   5 <%args>
   6   $preselected_database => ''
   7   $preselected_category => ''
   8   $dataset_groups => []
   9   $databases => {}
  10   $programs
  11   @input_options => ()
  12   @parse_options => ()
  13   $preload_seq => ''
  14   $preload_id => ''
  15   $preload_type => ''
  16   $blast_db_icons
  17 </%args>
  18
  19 <%perl>
  20   use JSON::Any;
  21
  22   my $menus = {};
  23   foreach my $d (keys(%$databases)) {
  24      $menus->{$d} = $m->scomp('/page/html_select.mas', name=>"database", params=>"class\=\"form-control input-sm blast_select_box\"", id=>"database", choices => [ @{$databases->{$d}} ], selected=> $preselected_database );
  25   }
  26
  27   my $substitution_matrix_select = $m->scomp('/page/html_select.mas',
  28      name=>"matrix",
  29      params=>"class\=\"form-control input-sm blast_select_box\"",
  30      id=>"matrix",
  31      choices => [  [ 'BLOSUM62', 'BLOSUM62 (default)' ],
  32                    [ 'BLOSUM80', 'BLOSUM80 (recent divergence)' ],
  33                  [ 'BLOSUM45', 'BLOSUM45 (ancient divergence)' ],
  34                  'PAM30',
  35                  'PAM70',
  36   ]);
  37
  38   #print STDERR "INPUT OPTIONS: ".Data::Dumper::Dumper(\@input_options);
  39   my $input_options_select = $m->scomp('/page/html_select.mas', name=>'input_options', params=>"class\=\"form-control input-sm blast_select_box\"", id=>'input_options',
  40     choices => \@input_options, selected=>$preload_type,
  41   );
  42
  43   # array with the preselected output formats
  44   my @parse_options_selected = ();
  45   # foreach my $po (@parse_options) {
  46     # if ($po->[0] eq "SGN") {
  47       # push @parse_options_selected, $po;
  48     # }
  49     # if (($po->[0] ne "Basic") && ($po->[0] ne "Table") && ($po->[0] ne "Coverage") && ($po->[0] ne "SGN")) {
  50       # push @parse_options_selected, $po;
  51     # }
  52   # }
  53
  54   # output formats alphabetically sorted
  55   my $parse_options_select = $m->scomp('/page/html_select.mas', name=>'parse_options', id=>'parse_options', params=>"size = \"5\" class\=\"form-control input-sm blast_select_box\"", choices => [sort (map { $_->[0] } @parse_options) ], multiple=>1, selected=> [ sort ( map { $_->[0] } @parse_options_selected) ] );
  56
  57   # print STDERR "OUTPUT OPTIONS: ".(join ", ", (sort (map { $_->[0] } @parse_options) ))."\n";
  58   # print STDERR "OUTPUT SELECTED: ".(join ", ", (sort (map { $_->[0] } @parse_options_selected) ))."\n";
  59
  60   my $db_type = {};
  61
  62   foreach my $g (keys %$databases) {
  63     foreach my $d (@{$databases->{$g}}) {
  64        $db_type->{$d->[0]} = $d->[2];
  65     }
  66   }
  67   my $database_type_json = JSON::Any->encode($db_type);
  68
  69   #print STDERR Data::Dumper::Dumper($database_type_json);
  70
  71   my $q_type = {};
  72   my $q_example = {};
  73
  74   foreach my $t (@input_options) {
  75     $q_type->{$t->[1]} = $t->[2];
  76     $q_example->{$t->[1]} = $t->[3];
  77   }
  78
  79   #print STDERR Data::Dumper::Dumper($q_type);
  80   my $input_option_json = JSON::Any->encode($q_type);
  81   my $input_example_json = JSON::Any->encode($q_example);
  82
  83   my $preload = "";
  84   if ($preload_id && $preload_type) {
  85     $preload = $preload_id;
  86   }
  87
  88   if ($preload_seq) {
  89     $preload = $preload_seq;
  90   }
  91
  92   #print STDERR "MENUS: ".Data::Dumper::Dumper($menus);
  93
  94 </%perl>
  95
  96 <!-- script src="/js/kinetic-v5.1.0/kinetic-v5.1.0.min.js"></script -->
  97 <& /util/import_javascript.mas, classes => [ 'tools.blast_canvas_graph', 'CXGN.Blast' , 'jqueryui', 'kinetics.kinetic'] &>
  98
  99
 100 <& /page/page_title.mas, title=>"BLAST" &>
 101
 102 <&| /page/info_section.mas, id=>"input_parameter_section", title=>"Input parameters", collapsible=>1, collapsed=>0, subtitle=>'<a class="btn btn-link pull-right" href="/help/tools/blast" target="_blank">Help <span class="glyphicon glyphicon-question-sign"></span></a>' &>
 103   <input type="hidden" name="outformat" value="0" />
 104
 105   <div class="form-group form-inline">
 106         <label class="blast_select_label" for="dataset_select">Categories &nbsp; </label>
 107
 108     <& /page/html_select.mas, name=>'Datasets', choices=> $dataset_groups, id=>"dataset_select", name=>"dataset_select", params=>"class\=\"form-control input-sm blast_select_box\"", selected=>"$preselected_category" &>
 109
 110 % if ($blast_db_icons) {
 111 <!-- images to get direct access to the model plant dbs. db_id is the blast_db_id on the SGN database -->
 112 <img class="fruit_icon" height="25" src="/documents/img/blast_icons/tomato.png" db_id="34" title="Tomato current DB">
 113 <img class="fruit_icon" height="18" src="/documents/img/blast_icons/potato.png" db_id="10" title="Potato current DB">
 114 <img class="fruit_icon" height="25" src="/documents/img/blast_icons/pepper.png" db_id="21" title="Pepper current DB">
 115 <img class="fruit_icon" height="25" src="/documents/img/blast_icons/eggplant.png" db_id="29" title="Eggplant current DB">
 116 <img class="fruit_icon" height="25" src="/documents/img/blast_icons/benth.png" db_id="9" title="N.benthamiana current DB">
 117 % }
 118
 119 <br>
 120
 121     <label class="blast_select_label" for="database_select">Database &nbsp; </label>
 122
 123     <span id='database_select' ></span><a style="font-size: 80%" title="View details of each database" href="/tools/blast/dbinfo">db details</a>
 124     <br>
 125
 126     <label class="blast_select_label" for="program_select">Program &nbsp; </label>
 127     <& /page/html_select.mas, name=>'program_select', id=>'program_select', params=>"class\=\"form-control input-sm blast_select_box\"", choices=>$programs &>
 128     <br>
 129
 130     <label class="blast_select_label" for="input_example">Query &nbsp; </label>
 131     <% $input_options_select %><a id="input_example" style="font-size: 80%;cursor:pointer;">Show example</a>
 132   </div>
 133
 134     <textarea name="sequence" id="sequence" class="form-control" rows="8" cols="80"><% $preload %></textarea></td></tr>
 135     <br>
 136
 137         <div style="text-align: center">
 138           <button class="btn btn-primary" id="submit_blast_button" type="submit" name="search" value="Search">BLAST</button>
 139         </div>
 140         <br />
 141
 142 <&| /page/info_section.mas, title=>"Advanced Options", collapsible=>1, collapsed =>1, is_subsection=>"1" &>
 143
 144         <& /page/info_table.mas, title=>'', data => [
 145           'Expect (e-value) Threshold' => '<input id="evalue" class="blast_select_box form-control" type="text" size="6" value="1e-10" name="expect" />',
 146           'Substitution Matrix' => $substitution_matrix_select,
 147                 'Output Options' => $parse_options_select,
 148           'Max. hits to show' => '<input id="maxhits" class="blast_select_box form-control" type="text" name="maxhits" size="6" value="20" />',
 149           'Filters' => '<div class="checkbox"><label><input type="checkbox" name="filterq" checked="1" /> Filter Low complexity</label>',
 150           __multicol => 2,
 151           __border => 0,
 152           __tableattrs => 'width="80%"',
 153         ]
 154         &>
 155
 156 </&>
 157
 158 </&>
 159
 160 <&| /page/info_section.mas, title=>"Extract sequences from BLAST databases", collapsible=>1, collapsed =>1 &>
 161 <br>
 162 <div class="form-inline form-group" style="width:100%">
 163   <input class="form-control" value="putrescine" id="blast_desc"/>
 164   <button id="search_by_desc" class="btn btn-primary">Search</button>
 165   </div>
 166   <div class="well well-sm">Select a BLAST database and paste a gene name or description. Eg: Solyc07g063040 or ribulose</div>
 167 </&>
 168
 169 <&| /page/info_section.mas, title=>"Results", collapsible=>1, collapsed=>0, subtitle=>'<a id="download_table" class="download_tag" target="_blank" href="javascript:download_table();" title="Download results in tabular format">Table&#8675;</a>&nbsp;&nbsp;<a id="download_basic" class="download_tag" target="_blank" href="javascript:download();" title="Download results in basic format">Basic&#8675;</a>' &>
 170
 171   <div id="prereqs"></div>
 172
 173   <center>
 174     <div id="sgn_blast_graph" style="display:none">
 175         <div id="myCanvas">
 176           Your browser does not support the HTML5 canvas
 177         </div>
 178     </div>
 179   </center>
 180   <br>
 181   <div id="SGN_output"></div>
 182
 183   <div id="Overview_output"></div>
 184   <div id="Coverage_output"></div>
 185   <div id="Table_output" style="min-width:900px;"></div>
 186   <div id="Bioperl_output"></div>
 187   <div id="Basic_output"></div>
 188
 189 </&>
 190
 191
 192
 193 <div id="jobid" style="display:none;"></div>
 194
 195 <div class="modal fade" id="myModal" role="dialog">
 196   <div class="modal-dialog modal-sm">
 197
 198     <!-- Modal content-->
 199     <div class="modal-content">
 200       <div class="modal-header">
 201         <h4 class="modal-title">BLAST status</h4>
 202       </div>
 203       <div class="modal-body">
 204         <center>
 205           <img src="/img/wheel.gif" />
 206           <p id="bs_working_msg"></p>
 207         </center>
 208       </div>
 209     </div>
 210
 211   </div>
 212 </div>
 213
 214
 215 <div class="modal fade" id="search_modal" role="dialog">
 216   <div class="modal-dialog modal-lg">
 217
 218     <!-- Modal content-->
 219   <div class="modal-content">
 220     <div class="modal-header">
 221       <button type="button" class="close" data-dismiss="modal">&times;</button>
 222       <h4 class="modal-title">Search Result</h4>
 223     </div>
 224
 225     <div class="modal-body">
 226       <p id="search_output" style="max-height:300px;overflow:scroll;"></p>
 227     </div>
 228
 229     <div class="modal-footer">
 230       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 231     </div>
 232   </div>
 233
 234   </div>
 235 </div>
 236
 237
 238
 239 <script>
 240
 241
 242 jQuery(document).ready(function() {
 243
 244         //function to select category and database when click on fruit images
 245         jQuery('.fruit_icon').click( function() {
 246                 var db_id = jQuery(this).attr('db_id');
 247
 248                 jQuery('#dataset_select').val(db_id);
 249                 swap_menu(db_id);
 250         });
 251
 252         swap_menu(jQuery('#dataset_select').find(':selected').attr('value'));
 253
 254         jQuery('#sequence').attr('spellcheck',false);
 255
 256         jQuery('#dataset_select').change( function() {
 257           var selectedId = jQuery('#dataset_select').find(':selected').attr('value');
 258           swap_menu(selectedId);
 259         });
 260
 261         var input_examples = eval(<% $input_example_json %>);
 262         var database_types = eval (<% $database_type_json %>);
 263         var input_option_types = eval(<% $input_option_json %>);
 264
 265         jQuery('#input_example').click( function() {
 266           jQuery('#sequence').html( input_examples[jQuery('#input_options').val() ] );
 267         });
 268
 269         jQuery('#submit_blast_button').click( function() {
 270                 var pasted_seq = jQuery('#sequence').val();
 271
 272                 if (pasted_seq.match(/>/)) {
 273                         var seq_num = pasted_seq.match(/>/g);
 274
 275                         if (seq_num.length <= 20 ) {
 276                           run_blast(database_types, input_option_types);
 277                         } else {
 278                                 alert("Please, do not run more than 20 sequences");
 279                         }
 280                 } else {
 281                         run_blast(database_types, input_option_types);
 282                 }
 283         });
 284
 285         //search blastdb by description
 286         jQuery('#search_by_desc').click( function() {
 287                 var database = jQuery('#database').val();
 288                 var blast_desc = jQuery('#blast_desc').val();
 289                 // alert("db: "+database+", blast_desc: "+blast_desc);
 290     disable_ui();
 291
 292                 jQuery.ajax( {
 293                         url: '/tools/blast/desc_search/',
 294                         method: 'POST',
 295                         data: {'blast_desc':blast_desc, 'database': database},
 296                         success: function(response) {
 297         enable_ui();
 298         $('#search_output').html(response.output_seq);
 299         $('#search_modal').modal("show");
 300
 301                         },
 302                         error: function(response) {
 303                                 alert("An error occurred. The service may not be available right now.");
 304                                 enable_ui();
 305                                 return;
 306                         }
 307                 });
 308
 309         });
 310
 311         function swap_menu(group_id) {
 312           var menu_html = eval( <% JSON::Any->encode($menus) %>);
 313           jQuery('#database_select').html(menu_html[group_id]);
 314         }
 315
 316 });
 317
 318 </script>
 319
 320
 321 <!-- STYLE -->
 322 <style>
 323
 324 h1 {
 325   display:none;
 326 }
 327
 328 .seq_map {
 329         color: #777777;
 330         width: 700px;
 331         position:relative;
 332         overflow: auto;
 333         align: left;
 334 }
 335
 336 .blast_select_box {
 337   width:300px;
 338   margin-right:10px;
 339 }
 340
 341 .blast_select_label {
 342   width:100px;
 343   margin-right:10px;
 344   line-height: 32px;
 345 }
 346
 347 .ui-dialog {
 348         position:relative;
 349 }
 350
 351 #region_square {
 352         position:absolute;
 353         vertical-align:middle;
 354 }
 355 .help_dialog {
 356         color:blue;
 357         cursor:pointer
 358 }
 359 #desc_dialog {
 360         overflow: auto;
 361         position: relative;
 362 }
 363 .help_box {
 364         background-color:#EEEEFE;
 365         border-color:#AAA;
 366         border-width:2px;
 367         border-style:solid;
 368         border-radius:5px;
 369         padding-left: 10px;
 370         padding-right: 10px;
 371 }
 372
 373 #sequence {
 374   min-height: 80px;
 375   max-height: 300px;
 376 /*  min-width: 700px;*/
 377   max-width: 98%;
 378 }
 379
 380 .download_tag {
 381   display:none;
 382 }
 383
 384 /* BLAST canvas Graph */
 385
 386 .width-1000 {
 387   width: 1000px;
 388   text-align: center;
 389 }
 390
 391 #sgn_blast_graph {
 392   overflow:hidden;
 393 }
 394
 395 #myCanvas {
 396 /*  border-style: solid;*/
 397 /*  border-width: 1px;*/
 398 /*  border-color: #ddd;*/
 399 /*  border-width:0px 1px 1px 1px;*/
 400   height:450px;
 401   width:1020px;
 402   overflow:scroll;
 403   overflow-x: hidden;
 404 }
 405
 406
 407 </style>