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