mason/tools/solgwas/index.mas

   1
   2 <%doc>
   3 </%doc>
   4
   5 <%args>
   6
   7 </%args>
   8
   9 <%perl>
  10   use JSON::Any;
  11
  12
  13 </%perl>
  14
  15
  16 <& '/util/import_javascript.mas', classes => ['jquery', 'jqueryui', 'CXGN.Login', 'd3.d3v4Min.js', 'CXGN.BreedersToolbox.HTMLSelect'] &>
  17
  18 <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
  19 <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
  20 <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  21
  22 <& /page/page_title.mas, title=>"SolGWAS" &>
  23
  24 <&| /page/info_section.mas, id=>"input_dataset_section", title=>"Select Input Data", collapsible=>1, collapsed=>0, subtitle=>'<a class="btn btn-link pull-right" href="/help/solgwas" target="_blank">Help <span class="glyphicon glyphicon-question-sign"></span></a>' &>
  25   <input type="hidden" name="outformat" value="0" />
  26
  27
  28   <div class="form-group form-inline">
  29     <label for="dataset_select">Available Datasets: </label><div id="dataset_select"></div>
  30     <br>
  31
  32     <button class="btn btn-info" id="createDataset"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;Create Dataset</button>
  33     <button class="btn btn-primary" id="selectDataset" type="submit" name="selectDataset" value="selectDataset">Select Dataset</button>
  34     <br>
  35     <br>
  36
  37     </div>
  38
  39
  40       <div class="form-group form-inline">
  41         <label class="blast_select_label" for="pheno_select">Available&nbspTraits:&nbsp; </label>
  42       <& /page/html_select.mas, name=>'pheno_select', id=>'pheno_select', params=>"class\=\"form-control input-sm blast_select_box\"", choices=>"" &>
  43       <button class="btn btn-primary" id="preview_trait_histogram_btn" type="submit" name="preview_trait_histogram_btn" value="preview_trait_histogram_btn">View Trait Histogram</button>
  44       <br>
  45       <br>
  46       <br>
  47       <center>
  48         <div id="trait_histogram_plot">
  49         </div>
  50       </center>
  51       <br>
  52       <br>
  53       <div class="form-group form-inline">
  54       <input type="checkbox" id="kinshipmat" />
  55       <label>Include kinship matrix in model &nbsp; </label>
  56         <br>
  57         <input type="checkbox" id="princomp" />
  58         <label>Include principal components in model &nbsp; </label>
  59         <button class="btn btn-primary" id="preview_pca" type="submit" name="preview_pca" value="preview_pca">View PCA Plot</button>
  60       </div>
  61       <br>
  62       <br>
  63       <br>
  64       <center>
  65         <div id="pca_output"></div>
  66       </center>
  67
  68
  69     <br>
  70
  71
  72     <!--    <label class="blast_select_label" for="geno_select">Genotypes &nbsp; </label>
  73         <& /page/html_select.mas, name=>'geno_select', id=>'geno_select', params=>"class\=\"form-control input-sm blast_select_box\"", choices=>"" &> -->
  74         <br>
  75
  76         </div>
  77
  78             <div style="text-align: center">
  79               <button class="btn btn-primary" id="runGWA" name="runGWA">Run SolGWAS</button>
  80             </div>
  81             <br />
  82
  83     <div id="tempfile" style="display:none" >
  84     </div>
  85
  86
  87
  88
  89
  90 </&>
  91
  92
  93
  94
  95 <&| /page/info_section.mas, title=>"Output", 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>' &>
  96
  97
  98
  99   <center>
 100     <div id="sgn_blast_graph" style="display:none">
 101         <div id="myCanvas">
 102           Your browser does not support the HTML5 canvas
 103         </div>
 104     </div>
 105   </center>
 106   <br>
 107   <center>
 108     <div id="Solgwas_output"></div>
 109   </center>
 110   <div id="Overview_output"></div>
 111   <div id="Coverage_output"></div>
 112   <div id="Table_output" style="min-width:900px;"></div>
 113   <div id="Bioperl_output"></div>
 114   <div id="Basic_output"></div>
 115
 116 </&>
 117
 118
 119
 120
 121
 122 <script>
 123
 124
 125 jQuery(document).ready(function() {
 126   if (isLoggedIn()) {
 127     get_select_box("datasets", "dataset_select", {"checkbox_name":"dataset_select_checkbox"});
 128   }
 129   else {
 130     alert('You must be logged in to use SolGWAS');
 131   }
 132   $('#pheno_select').attr("disabled",true).html('');
 133
 134   jQuery("#createDataset").click(function(e) {
 135     window.location = "/breeders/search/?dsp=genotyping_protocols,trials|traits,accessions&dsr=/tools/solgwas";
 136   });
 137
 138   jQuery('#dataset_select').click(function() {
 139     $('#pheno_select').attr("disabled",true).html('');
 140     $('#trait_histogram_plot').html('');
 141     $('#pca_output').empty();
 142     $('#Solgwas_output').empty();
 143     $('#princomp').attr('checked', false);
 144     $('#kinshipmat').attr('checked', false);
 145   });
 146   jQuery('#selectDataset').click(function() {
 147     var dataset_id = get_dataset_id();
 148     $.ajax({
 149       url: '/ajax/solgwas/shared_phenotypes',
 150       data: {'dataset_id': dataset_id},
 151       success: function(response) {
 152         if (response.error) {
 153           $('#dataset_select').val('ERROR');
 154         }
 155         else {
 156 //          alert(response.options);
 157 //                  alert(response.options.length);
 158         var option_html = '<option selected="selected" value=""> </option>';
 159           for (var i = 0; i < response.options.length; i++) {
 160             option_html += '<option value="'+response.options[i][1]+'">'+(response.options[i][1])+'</option>';
 161           }
 162           $('#pheno_select').attr("disabled",false).html(option_html);
 163       jQuery('#tempfile').html(response.tempfile);
 164
 165
 166         }
 167
 168       },
 169       error: function(response) {
 170         alert("An error occurred, the service may temporarily be unavailable");
 171       }
 172     });
 173   });
 174
 175
 176   jQuery('#preview_trait_histogram_btn').on('click', function() {
 177     if (!jQuery('#pheno_select').val()) {
 178       alert("Please select a dataset and trait.")
 179     } else {
 180       //alert("Inside trait preview");
 181       var tempfile = jQuery('#tempfile').html();
 182       var trait = jQuery('#pheno_select').val();
 183       //alert(trait);
 184       jQuery.ajax( {
 185           url: '/ajax/solgwas/getdata',
 186           data: { 'file' : tempfile },
 187           success: function(r)  {
 188           //alert("data grabbed "+JSON.stringify(r.data));
 189           var v = {
 190               "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
 191               "width": 200,
 192               "height": 100,
 193               "padding": 5,
 194               "data": { 'values': r.data },
 195               "mark": "bar",
 196               "encoding": {
 197               "x": {
 198                 "bin": true,
 199                 "field": trait,
 200                 "type": "quantitative"
 201               },
 202               "y": {
 203                 "aggregate": "count",
 204                 "type": "quantitative"
 205               }
 206              }
 207             };
 208
 209    //alert("embedding"+ JSON.stringify(v));
 210             vegaEmbed("#trait_histogram_plot", v);
 211             //alert("done");
 212           },
 213
 214
 215         error: function(e) { alert('error!'); }
 216       });
 217     };
 218   });
 219
 220
 221   jQuery('#preview_pca').click( function () {
 222     if (!jQuery('#pheno_select').val()) {
 223       alert("Please select a dataset and trait.")
 224     } else {
 225       $('#pca_output').empty();
 226       if ($('#pheno_select').val() != ""){
 227         var dataset_id = get_dataset_id();
 228         var trait_id = $('#pheno_select').val();
 229         $.ajax({
 230           url: '/ajax/solgwas/generate_pca',
 231           async: true,
 232           data: {'dataset_id': dataset_id, 'trait_id': trait_id},
 233               beforeSend: function() {
 234             jQuery("#working_modal").modal("show");
 235               },
 236           success: function(response) {
 237             jQuery("#working_modal").modal("hide");
 238             if (response.error) {
 239               $('#dataset_select').val('ERROR');
 240             }
 241             else {
 242               var fig2_response = response.figure2;
 243                     $('#pca_output').append("<img id='SolGWAS_Figure2' src='"+ fig2_response + "'/>");
 244               }
 245           },
 246           error: function(response) {
 247             alert("An error occurred, the service may temporarily be unavailable");
 248           }
 249         });
 250       }
 251     };
 252   });
 253
 254   jQuery('#runGWA').click( function () {
 255     if (!jQuery('#pheno_select').val()) {
 256       alert("Please select a dataset and trait.")
 257       $('#Solgwas_output').empty();
 258     } else {
 259       $('#Solgwas_output').empty();
 260       if ($('#pheno_select').val() != ""){
 261         var dataset_id = get_dataset_id();
 262         var trait_id = $('#pheno_select').val();
 263         var pc_check = 0;
 264         var kinship_check = 0;
 265         if ($('#princomp').is(':checked')) {
 266           var pc_check = 1;
 267         }
 268         if ($('#kinshipmat').is(':checked')) {
 269           var kinship_check = 1;
 270         }
 271         //alert(pc_check);
 272         //alert(kinship_check);
 273         //alert("Dataset ID: "+dataset_id);
 274         //alert("Pheno ID: "+trait_id);
 275         $.ajax({
 276           url: '/ajax/solgwas/generate_results',
 277           data: {'dataset_id': dataset_id, 'trait_id': trait_id, 'pc_check': pc_check, 'kinship_check': kinship_check},
 278               beforeSend: function() {
 279             jQuery("#working_modal").modal("show");
 280               },
 281           timeout: 30000000,
 282           success: function(response) {
 283             jQuery("#working_modal").modal("hide");
 284             if (response.error) {
 285               alert(response.error);
 286             }
 287             else {
 288               var fig3_response = response.figure3;
 289               var fig4_response = response.figure4;
 290             //alert("Response ID: "+temp_response);
 291             //alert("Response ID: "+fig3_response);
 292
 293                   $('#Solgwas_output').append("<img id='SolGWAS_Figure3' src='"+ fig3_response + "'/>");
 294                   $('#Solgwas_output').append("<img id='SolGWAS_Figure4' src='"+ fig4_response + "'/>");
 295                 }
 296           },
 297           error: function(xhr, status, error) {
 298             var err = eval("(" + xhr.responseText + ")");
 299             alert(err.Message);
 300           }
 301         });
 302       }
 303     };
 304   });
 305
 306   function get_dataset_id() {
 307       var selected_datasets = [];
 308       jQuery('input[name="dataset_select_checkbox"]:checked').each(function() {
 309           selected_datasets.push(jQuery(this).val());
 310       });
 311       if (selected_datasets.length < 1){
 312           alert('Please select at least one dataset!');
 313           return false;
 314       } else if (selected_datasets.length > 1){
 315           alert('Please select only one dataset!');
 316           return false;
 317       } else {
 318         var dataset_id=selected_datasets[0];
 319         return dataset_id;
 320     }
 321   }
 322 });
 323
 324
 325
 326 </script>
 327
 328
 329 <!-- STYLE -->
 330 <style>
 331
 332 h1 {
 333   display:none;
 334 }
 335
 336 .seq_map {
 337         color: #777777;
 338         width: 700px;
 339         position:relative;
 340         overflow: auto;
 341         align: left;
 342 }
 343
 344 .blast_select_box {
 345   width:300px;
 346   margin-right:10px;
 347 }
 348
 349 .blast_select_label {
 350   width:100px;
 351   margin-right:10px;
 352   line-height: 32px;
 353 }
 354
 355 .ui-dialog {
 356         position:relative;
 357 }
 358
 359 #region_square {
 360         position:absolute;
 361         vertical-align:middle;
 362 }
 363 .help_dialog {
 364         color:blue;
 365         cursor:pointer
 366 }
 367 #desc_dialog {
 368         overflow: auto;
 369         position: relative;
 370 }
 371 .help_box {
 372         background-color:#EEEEFE;
 373         border-color:#AAA;
 374         border-width:2px;
 375         border-style:solid;
 376         border-radius:5px;
 377         padding-left: 10px;
 378         padding-right: 10px;
 379 }
 380
 381 #sequence {
 382   min-height: 80px;
 383   max-height: 300px;
 384 /*  min-width: 700px;*/
 385   max-width: 98%;
 386 }
 387
 388 .download_tag {
 389   display:none;
 390 }
 391
 392 /* BLAST canvas Graph */
 393
 394 .width-1000 {
 395   width: 1000px;
 396   text-align: center;
 397 }
 398
 399 #sgn_blast_graph {
 400   overflow:hidden;
 401 }
 402
 403 #myCanvas {
 404 /*  border-style: solid;*/
 405 /*  border-width: 1px;*/
 406 /*  border-color: #ddd;*/
 407 /*  border-width:0px 1px 1px 1px;*/
 408   height:450px;
 409   width:1020px;
 410   overflow:scroll;
 411   overflow-x: hidden;
 412 }
 413
 414
 415 </style>