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