mason/tools/gcpc/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', 'CXGN.List', 'd3.d3v4Min.js', 'CXGN.BreedersToolbox.HTMLSelect', 'CXGN.SelectionIndex' ] &>
  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 <!-- temporarily comment out <& /page/page_title.mas, title=>"Genomic Prediction of Cross Performance (GCPC)" &> -->
  23   <h2 style="text-align: center;font-size:20px;"> Genomic Prediction of Cross Performance (GCPC)</h2>
  24  <br>
  25
  26  <b style="font-size:15px; color: #254117">Select a Genotyped Dataset</b>
  27 <br>
  28
  29     <&| /page/info_section.mas, id=>"input_dataset_section", title=>"Available Datasets", 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>' &>
  30       <input type="hidden" name="outformat" value="0" />
  31
  32
  33       <div class="form-group form-inline">
  34         <div id="dataset_select"></div>
  35         <br>
  36
  37         <button class="btn btn-success" id="select_dataset" type="submit" name="select_dataset" value="select_dataset">Proceed to Factor Selection</button>
  38         <br>
  39         <br>
  40
  41       </div>
  42
  43       <div class="col" style="background-color:MintCream; padding: 10px 20px 25px" id="fixed_and_random_factors">
  44         <div class="text-center">Factors will appear here..</div>
  45
  46       </div>
  47
  48       <br>
  49       <br>
  50       <br>
  51       <br>
  52
  53       <div>
  54
  55       <div id="sin_list">
  56       </div>
  57       <i style="font-size:13px">This is a drop-down menu showing your pre-constructed selection indices. Select one and proceed to run the model.</i>
  58       </div>
  59
  60       <center>
  61         <div id="trait_histogram_plot">
  62         </div>
  63       </center>
  64
  65       <br>
  66       <br>
  67       <br>
  68       <div style="text-align: center">
  69         <button class="btn btn-success" id="runGCPC" type="submit" name="runGCPC" value="runGCPC">Run GCPC</button>
  70       </div>
  71       <br />
  72
  73       <div id="tempfile" style="display:none" >
  74       </div>
  75 </&>
  76
  77
  78 <div id="gcpc_results_download_link"></div>
  79
  80 <&| /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>' &>
  81       <div> <p> Plant Sex info: 1= Male, 2=Female, 3= Monoecious male (m>f) and 4= Monoecious female(f>m)</p> </div>
  82       <table id="gcpc_output">
  83         <thead>
  84           <tr><th>Cross #</th><th>Parent 1</th><th>Parent 2</th><th>Cross Predicted Merit</th><th>Parent1 Sex</th><th>Parent2 Sex</th></tr>
  85         </thead>
  86
  87       </table>
  88
  89   <center>
  90
  91   </center>
  92   <br>
  93
  94 </&>
  95
  96
  97 <script>
  98
  99
 100 jQuery(document).ready(function() {
 101   if (isLoggedIn()) {
 102     get_select_box("datasets", "dataset_select", {"checkbox_name":"dataset_select_checkbox"});
 103   }
 104   else {
 105      alert('Login required!');
 106      return;
 107   }
 108   $('#pheno_select').attr("disabled",true).html('');
 109   jQuery('#dataset_select').click(function() {
 110     $('#pheno_select').attr("disabled",true).html('');
 111     $('#trait_histogram_plot').html('');
 112     $('#stability_output').empty();
 113   });
 114   jQuery('#select_dataset').click(function() {
 115     var dataset_id = get_dataset_id();
 116     jQuery('#working_modal').modal('show');
 117     $.ajax({
 118       url: '/ajax/gcpc/factors',
 119       data: {'dataset_id': dataset_id},
 120       success: function(response) {
 121         if (response.error) {
 122         jQuery('#working_modal').modal('hide');
 123           $('#dataset_select').val('ERROR');
 124         }
 125         else {
 126         jQuery('#working_modal').modal('hide');
 127                jQuery('#fixed_and_random_factors').html(response.html);
 128          //alert("factors successfully retrieved!");
 129
 130         }
 131
 132       },
 133       error: function(response) {
 134         alert("An error occurred, the service may be temporarily unavailable. Please try again later.");
 135       }
 136     });
 137   });
 138
 139   var lo = new CXGN.List();
 140   jQuery('#sin_list').html(lo.listSelect('sin_list', ['dataset'], 'Select a formula', 'refresh', undefined));
 141   jQuery('#sin_list_list_select').change(
 142       function() {
 143           load_sin();
 144       });
 145
 146  //  jQuery('#method_btn').on('click', function() {
 147  //   var method_id = jQuery('#select_method').val();
 148  //   $.ajax({
 149  //       url: '/ajax/Stability/get_method',
 150  //       data: {'method_id': method_id  },
 151  //     }); // end .ajax    // }; // end else statement
 152  //  });
 153
 154
 155   jQuery('#preview_trait_histogram_btn').on('click', function() {
 156     if (!jQuery('#pheno_select').val()) {
 157       alert("Please select a dataset and trait.")
 158     } else {
 159       //alert("Inside trait preview");
 160       var tempfile = jQuery('#tempfile').html();
 161       var trait = jQuery('#pheno_select').val();
 162       //alert(trait);
 163       jQuery.ajax( {
 164           url: '/ajax/gcpc/getdata',
 165           data: { 'file' : tempfile },
 166           success: function(r)  {
 167           //alert("data grabbed "+JSON.stringify(r.data));
 168           var v = {
 169               "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
 170               "width": 200,
 171               "height": 100,
 172               "padding": 5,
 173               "data": { 'values': r.data },
 174               "mark": "bar",
 175               "encoding": {
 176               "x": {
 177                 "bin": true,
 178                 "field": trait,
 179                 "type": "quantitative"
 180               },
 181               "y": {
 182                 "aggregate": "count",
 183                 "type": "quantitative"
 184               }
 185              }
 186             };
 187
 188    //alert("embedding"+ JSON.stringify(v));
 189             vegaEmbed("#trait_histogram_plot", v);
 190             //alert("done");
 191           },
 192
 193
 194         error: function(e) { alert('error!'); }
 195       });
 196     };
 197   });
 198
 199    //if (!jQuery('#sin_list_list_select').val()) {
 200     //  alert("Please select a selection index.")
 201     //  $('#gcpc_files').empty();
 202     //} else {
 203                               //if ($('#sin_list_list_select').val() != ""){
 204         // var method_id = $('#select_method').val();
 205
 206
 207   jQuery('#runGCPC').click( function () {
 208       $('#gcpc_files').empty();
 209           var factors = ["studyYear", "programName" , "studyName", "studyDesign" , "plantingDate", "locationName",  "replicate" , "rowNumber",  "colNumber" , "germplasmName"];
 210           var factor_param = "";
 211           for (var n=0; n<factors.length; n++) {
 212           var value = jQuery('input[name="'+factors[n]+ '_factor"]:checked').val();
 213           factor_param+='&amp;'+factors[n]+'_factor='+value;
 214
 215           }
 216
 217
 218
 219                               var sin_list_id = jQuery('#sin_list_list_select option:selected').val();
 220                               //alert("SIN LIST ID "+sin_list_id);
 221       if (! sin_list_id || sin_list_id == "") {
 222           alert("Please select a selection index.")
 223           $('#gcpc_files').empty();
 224           return;
 225       }
 226         var dataset_id = get_dataset_id();
 227         var method_id = 1;
 228
 229       jQuery('#working_modal').modal('show');
 230       $.ajax({
 231         'url': '/ajax/gcpc/generate_results?dataset_id='+dataset_id+'&amp;sin_list_id='+sin_list_id+'&amp;method_id='+method_id+factor_param,
 232         'method': "GET",
 233         'timeout': 60000000,
 234         'contentType': 'application/json'
 235        }).done( function(data) {
 236           if (data.message) {
 237           jQuery('#working_modal').modal('hide');
 238           alert(data.message);
 239         }
 240        if (data.error) {
 241           jQuery('#working_modal').modal('hide');
 242           alert(data.error); return;
 243       }
 244
 245       //alert('Download link = '+data.download_link);
 246      if (data.download_link) {
 247       jQuery('#gcpc_results_download_link').html(data.download_link);
 248       }
 249
 250
 251       //alert('JSON data retrieved: '+JSON.stringify(data));
 252         jQuery('#working_modal').modal('hide');
 253         jQuery('#gcpc_output').DataTable( {
 254              'destroy': true,
 255              'timeout': 6000000,
 256              'data' : data.data,
 257
 258              "order": [[ 3, "desc" ]]
 259              //"columns": [
 260              //   { "data": "Cross #" },
 261              //   { "data": "Parent 1" },
 262              //   { "data": "Parent 2" },
 263              //   { "data": "Cross Predicted Merit" },
 264              //]
 265
 266         });
 267      });
 268   });
 269
 270 function get_dataset_id() {
 271       var selected_datasets = [];
 272       jQuery('input[name="dataset_select_checkbox"]:checked').each(function() {
 273           selected_datasets.push(jQuery(this).val());
 274       });
 275       if (selected_datasets.length < 1){
 276           alert('Please select at least one dataset!');
 277           return false;
 278       } else if (selected_datasets.length > 1){
 279           alert('Please select only one dataset!');
 280           return false;
 281       } else {
 282     var dataset_id=selected_datasets[0];
 283     return dataset_id;
 284     }
 285   }
 286
 287 });
 288
 289
 290
 291
 292
 293
 294
 295
 296 </script>
 297
 298
 299 <!-- STYLE -->
 300 <style>
 301
 302 .btn-success
 303 {
 304   background-color: #68889E;
 305   color:#FFF;
 306   border-color: #2F3E48;
 307 }
 308
 309 h1 {
 310   display:none;
 311 }
 312
 313 .seq_map {
 314         color: #777777;
 315         width: 700px;
 316         position:relative;
 317         overflow: auto;
 318         align: left;
 319 }
 320
 321 .blast_select_box {
 322   width:300px;
 323   margin-right:10px;
 324 }
 325
 326 .blast_select_label {
 327   width:100px;
 328   margin-right:10px;
 329   line-height: 32px;
 330 }
 331
 332 .ui-dialog {
 333         position:relative;
 334 }
 335
 336 #region_square {
 337         position:absolute;
 338         vertical-align:middle;
 339 }
 340 .help_dialog {
 341         color:blue;
 342         cursor:pointer
 343 }
 344 #desc_dialog {
 345         overflow: auto;
 346         position: relative;
 347 }
 348 .help_box {
 349         background-color:#EEEEFE;
 350         border-color:#AAA;
 351         border-width:2px;
 352         border-style:solid;
 353         border-radius:5px;
 354         padding-left: 10px;
 355         padding-right: 10px;
 356 }
 357
 358 #sequence {
 359   min-height: 80px;
 360   max-height: 300px;
 361 /*  min-width: 700px;*/
 362   max-width: 98%;
 363 }
 364
 365 .download_tag {
 366   display:none;
 367 }
 368
 369 /* BLAST canvas Graph */
 370
 371 .width-1000 {
 372   width: 1000px;
 373   text-align: center;
 374 }
 375
 376 #sgn_blast_graph {
 377   overflow:hidden;
 378 }
 379
 380 #myCanvas {
 381 /*  border-style: solid;*/
 382 /*  border-width: 1px;*/
 383 /*  border-color: #ddd;*/
 384 /*  border-width:0px 1px 1px 1px;*/
 385   height:450px;
 386   width:1020px;
 387   overflow:scroll;
 388   overflow-x: hidden;
 389 }
 390
 391
 392
 393 </style>