mason/tools/heritability/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@4"></script>
  19 <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
  20 <script src="https://cdn.jsdelivr.net/npm/vega-embed@4"></script>
  21
  22 <& /page/page_title.mas, title=>"Heritability" &>
  23
  24
  25 <&| /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/heritability" target="_blank">Help <span class="glyphicon glyphicon-question-sign"></span></a>' &>
  26   <input type="hidden" name="outformat" value="0" />
  27
  28
  29   <div class="form-group form-inline">
  30     <label for="dataset_select">Available Datasets: </label><div id="dataset_select"></div>
  31     <br>
  32
  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       <img id="loading-spinner" src="/img/wheel.gif" alt="loading" style="visibility: hidden;">
  45       <br>
  46       <input type="checkbox" id="dataset_trait_outliers" />
  47       <label>Exclude dataset outliers &nbsp; </label>
  48       <br>
  49       <br>
  50       <br>
  51       <center>
  52         <div id="trait_histogram_plot">
  53         </div>
  54       </center>
  55
  56
  57     <br>
  58
  59
  60     <!--    <label class="blast_select_label" for="geno_select">Genotypes &nbsp; </label>
  61         <& /page/html_select.mas, name=>'geno_select', id=>'geno_select', params=>"class\=\"form-control input-sm blast_select_box\"", choices=>"" &> -->
  62         <br>
  63
  64         </div>
  65
  66             <div style="text-align: center">
  67               <button class="btn btn-primary" id="runH2" type="submit" name="runH2" value="runH2">Run Heritability</button>
  68             </div>
  69             <br />
  70
  71     <div id="tempfile" style="display:none" >
  72     </div>
  73
  74
  75
  76
  77
  78 </&>
  79
  80
  81
  82 <&| /page/info_section.mas, title=>"Instructions", collapsible=>1, collapsed=>1, 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>' &>
  83
  84
  85
  86   <center>
  87     <div id="sgn_blast_graph" style="display:none">
  88         <div id="myCanvas">
  89           Your browser does not support the HTML5 canvas
  90         </div>
  91     </div>
  92   </center>
  93   <br>
  94   <h5><b>Dataset:</b></h5>
  95   <h5>1. The dataset must contain trails and numerical traits. Inclusion of accession, plots, locations, and years is optional.</h5>
  96   <h5>2. The model will adapt to your dataset. For instance, if the dataset has more than one location, then the model will take the interaction among locations and accessions.</h5>
  97   <h5>3. Traits with more than 60% of missing data are removed from the analysis.</h5>
  98   <h5>4. Outliers can be removed by accessing the <a href="/search/datasets" target="_blank"> Datasets tab </a>. </h5>
  99   <h5>5. Selecting the 'Exclude dataset outliers', heritability is calculated using filtered data.</h5>
 100
 101
 102 </&>
 103
 104
 105 <&| /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>' &>
 106
 107
 108
 109   <center>
 110     <div id="sgn_blast_graph" style="display:none">
 111         <div id="myCanvas">
 112           Your browser does not support the HTML5 canvas
 113         </div>
 114     </div>
 115   </center>
 116   <br>
 117   <center>
 118     <div id="heritability_output"></div>
 119     <br>
 120     <button class="btn btn-primary" id="download-button">Download CSV</button>
 121   </center>
 122   <div id="Overview_output"></div>
 123   <div id="Coverage_output"></div>
 124   <div id="Table_output" style="min-width:900px;"></div>
 125   <div id="Bioperl_output"></div>
 126   <div id="Basic_output"></div>
 127
 128 </&>
 129 <script>
 130
 131
 132
 133 jQuery(document).ready(function() {
 134   if (isLoggedIn()) {
 135     get_select_box("datasets", "dataset_select", {"checkbox_name":"dataset_select_checkbox"});
 136   }
 137   else {
 138     alert('You must be logged in to use Heritability');
 139   }
 140   $('#pheno_select').attr("disabled",true).html('');
 141   jQuery('#dataset_select').click(function() {
 142     $('#pheno_select').attr("disabled",true).html('');
 143     $('#trait_histogram_plot').html('');
 144     $('#heritability_output').empty();
 145   });
 146
 147   jQuery('#selectDataset').click(function() {
 148     var dataset_id = get_dataset_id();
 149     if (!dataset_id) {
 150       return;
 151     }
 152     var dataset_trait_outliers = $('#dataset_trait_outliers').is(':checked') ? 1 : 0;
 153     document.getElementById("preview_trait_histogram_btn").disabled = true;
 154     document.getElementById("loading-spinner").style.visibility = 'visible';
 155     $.ajax({
 156       url: '/ajax/heritability/shared_phenotypes',
 157       data: {
 158         'dataset_id': dataset_id,
 159         'dataset_trait_outliers': dataset_trait_outliers,
 160         },
 161       success: function(response) {
 162         if (response.error) {
 163           $('#dataset_select').val('ERROR');
 164           document.getElementById("loading-spinner").style.visibility = 'hidden';
 165         }
 166         else {
 167                 var option_html = '<option selected="selected" value=""> </option>';
 168                 for (var i = 0; i < response.options.length; i++) {
 169                   option_html += '<option value="'+response.options[i][1]+'">'+(response.options[i][1])+'</option>';
 170                 }
 171                 $('#pheno_select').attr("disabled",false).html(option_html);
 172           jQuery('#tempfile').html(response.tempfile);
 173           document.getElementById("preview_trait_histogram_btn").disabled = false;
 174           document.getElementById("loading-spinner").style.visibility = 'hidden';
 175               }
 176
 177       },
 178       error: function(response) {
 179         alert("An error occurred, the service may temporarily be unavailable, ponto 1 selectDataset ");
 180         document.getElementById("preview_trait_histogram_btn").disabled = false;
 181         document.getElementById("loading-spinner").style.visibility = 'hidden';
 182       }
 183     });
 184   });
 185
 186   jQuery('#preview_trait_histogram_btn').on('click', function() {
 187     if (!jQuery('#pheno_select').val()) {
 188       alert("Please select a dataset and trait.")
 189     } else {
 190       //alert("Inside trait preview");
 191       var tempfile = jQuery('#tempfile').html();
 192       var trait = jQuery('#pheno_select').val();
 193       //alert(trait);
 194       jQuery.ajax( {
 195           url: '/ajax/heritability/getdata',
 196           data: { 'file' : tempfile },
 197           success: function(r)  {
 198           //alert("data grabbed "+JSON.stringify(r.data));
 199           var v = {
 200               "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
 201               "width": 200,
 202               "height": 100,
 203               "padding": 5,
 204               "data": { 'values': r.data },
 205               "mark": "bar",
 206               "encoding": {
 207               "x": {
 208                 "bin": true,
 209                 "field": trait,
 210                 "type": "quantitative"
 211               },
 212               "y": {
 213                 "aggregate": "count",
 214                 "type": "quantitative"
 215               }
 216              }
 217             };
 218             vegaEmbed("#trait_histogram_plot", v);
 219           },
 220         error: function(e) { alert('error!'); }
 221       });
 222     };
 223   });
 224
 225   jQuery('#dataset_trait_outliers').on('click', function() {
 226     var dataset_id = get_dataset_id();
 227     if (!dataset_id) {
 228       return;
 229     }
 230     var  dataset_trait_outliers = $('#dataset_trait_outliers').is(':checked') ? 1 : 0;
 231     document.getElementById("preview_trait_histogram_btn").disabled = true;
 232     document.getElementById("loading-spinner").style.visibility = 'visible';
 233     $.ajax({
 234       url: '/ajax/heritability/shared_phenotypes',
 235       data: {
 236         'dataset_id': dataset_id,
 237         'dataset_trait_outliers': dataset_trait_outliers,
 238       },
 239       success: function(response) {
 240         if (response.error) {
 241           $('#dataset_select').val('ERROR');
 242           alert("An error occurred, the is some problem with data");
 243           document.getElementById("loading-spinner").style.visibility = 'hidden';
 244         }
 245         else {
 246           jQuery('#tempfile').html(response.tempfile);
 247           document.getElementById("preview_trait_histogram_btn").disabled = false;
 248           document.getElementById("loading-spinner").style.visibility = 'hidden';
 249               }
 250       },
 251       error: function(response) {
 252         alert("An error occurred, the service may temporarily be unavailable");
 253         document.getElementById("preview_trait_histogram_btn").disabled = false;
 254         document.getElementById("loading-spinner").style.visibility = 'hidden';
 255       }
 256     });
 257
 258   });
 259
 260
 261   jQuery('#runH2').click( function () {
 262     if (!jQuery('#pheno_select').val()) {
 263       alert("Please select a dataset and trait.");
 264       $('#heritability_output').empty();
 265     } else {
 266       $('#heritability_output').empty();
 267
 268       if ($('#pheno_select').val() != ""){
 269         var dataset_id = get_dataset_id();
 270         console.log("dataset_id", dataset_id);
 271         var trait_id = $('#pheno_select').val();
 272
 273         console.log("trait_id", trait_id);
 274         var dataset_trait_outliers = $('#dataset_trait_outliers').is(':checked') ? 1 : 0;
 275
 276         $.ajax({
 277           url: '/ajax/heritability/generate_results',
 278           data: {
 279             'dataset_id': dataset_id,
 280             'trait_id': trait_id,
 281             'dataset_trait_outliers': dataset_trait_outliers,
 282             },
 283           beforeSend: function() {
 284             jQuery("#working_modal").modal("show");
 285           },
 286
 287           timeout: 30000000,
 288           success: function(response) {
 289             jQuery("#working_modal").modal("hide");
 290
 291                         if (response.error) {
 292               alert(response.error);
 293             }
 294
 295                         $.getJSON(response.h2Table, function(data){
 296                                 var parsedData = JSON.parse(data);
 297                                 var traitValue = '';
 298                                 var varG = '';
 299                                 var varE = '';
 300                                 var varRes = '';
 301                                 var herit = '';
 302
 303                                 var table = '<table>';
 304                                 table += '<thead><tr><th>Trait</th><th>Vg</th><th>Ve</th><th>Vres</th><th>Heritability</th></tr></thead>';
 305                                 table += '<tbody>';
 306
 307                                 for (var i = 0; i < parsedData.length; i++) {
 308                                         traitValue = parsedData[i].trait;
 309                                         varG = parsedData[i].Vg;
 310                                         varE = parsedData[i].Ve;
 311                                         varRes = parsedData[i].Vres;
 312                                         herit = parsedData[i].Hert;
 313
 314                                         // Create a row for each data point
 315                                         table += '<tr>';
 316                                         table += '<td>' + traitValue + '</td>';
 317                                         table += '<td>' + varG + '</td>';
 318                                         table += '<td>' + varE + '</td>';
 319                                         table += '<td>' + varRes + '</td>';
 320                                         table += '<td>' + herit + '</td>';
 321                                         table += '</tr>';
 322                                 }
 323                                 $('#heritability_output').append(table);
 324
 325                 $('#download-button').click(function() {
 326                                         var csvContent = "data:text/csv;charset=utf-8,";
 327
 328                                         // Add table headers to CSV content
 329                                         csvContent += "Trait,Vg,Ve,Vres,Heritability\n";
 330
 331                                         // Add table data to CSV content
 332                                         for (var i = 0; i < parsedData.length; i++) {
 333                                                 var row = parsedData[i];
 334                                                 csvContent += row.trait + "," + row.Vg + "," + row.Ve + "," + row.Vres + "," + row.Hert + "\n";
 335                                         }
 336
 337                                         // Create a data URI for the CSV content
 338                                         var encodedUri = encodeURI(csvContent);
 339
 340                                         // Create a download link
 341                                         var link = document.createElement("a");
 342                                         link.setAttribute("href", encodedUri);
 343                                         link.setAttribute("download", "heritability_data.csv");
 344                                         link.innerHTML = "Download CSV";
 345
 346                                         // Trigger the click event to download the file
 347                                         link.click();
 348                 });
 349
 350                         }).fail(function(){
 351                                 console.log("An error has occurred.");
 352                                 });
 353                   },
 354           error: function(xhr, status, error) {
 355             var err = eval("(" + xhr.responseText + ")");
 356             alert(err.Message);
 357           }
 358         });
 359       }
 360     };
 361   });
 362
 363 function get_dataset_id() {
 364       var selected_datasets = [];
 365       jQuery('input[name="dataset_select_checkbox"]:checked').each(function() {
 366           selected_datasets.push(jQuery(this).val());
 367       });
 368       if (selected_datasets.length < 1){
 369           alert('Please select at least one dataset!');
 370           return false;
 371       } else if (selected_datasets.length > 1){
 372           alert('Please select only one dataset!');
 373           return false;
 374       } else {
 375     var dataset_id=selected_datasets[0];
 376     return dataset_id;
 377     }
 378   }
 379 });
 380
 381
 382 </script>
 383
 384 <!-- STYLE -->
 385 <style>
 386
 387 h1 {
 388   display:none;
 389 }
 390
 391 .seq_map {
 392         color: #777777;
 393         width: 700px;
 394         position:relative;
 395         overflow: auto;
 396         align: left;
 397 }
 398
 399 .blast_select_box {
 400   width:300px;
 401   margin-right:10px;
 402 }
 403
 404 .blast_select_label {
 405   width:100px;
 406   margin-right:10px;
 407   line-height: 32px;
 408 }
 409
 410 .ui-dialog {
 411         position:relative;
 412 }
 413
 414 #region_square {
 415         position:absolute;
 416         vertical-align:middle;
 417 }
 418 .help_dialog {
 419         color:blue;
 420         cursor:pointer
 421 }
 422 #desc_dialog {
 423         overflow: auto;
 424         position: relative;
 425 }
 426 .help_box {
 427         background-color:#EEEEFE;
 428         border-color:#AAA;
 429         border-width:2px;
 430         border-style:solid;
 431         border-radius:5px;
 432         padding-left: 10px;
 433         padding-right: 10px;
 434 }
 435
 436 #sequence {
 437   min-height: 80px;
 438   max-height: 300px;
 439   max-width: 98%;
 440 }
 441
 442 .download_tag {
 443   display:none;
 444 }
 445
 446 /* BLAST canvas Graph */
 447
 448 .width-1000 {
 449   width: 1000px;
 450   text-align: center;
 451 }
 452
 453 #sgn_blast_graph {
 454   overflow:hidden;
 455 }
 456
 457 table {
 458     border-collapse: collapse;
 459     width: 100%;
 460 }
 461
 462 table, th, td {
 463     border: 1px solid black;
 464 }
 465
 466 th, td {
 467     padding: 8px;
 468     text-align: left;
 469 }
 470
 471 th {
 472     background-color: #f2f2f2;
 473 }
 474
 475
 476 #myCanvas {
 477   height:450px;
 478   width:1020px;
 479   overflow:scroll;
 480   overflow-x: hidden;
 481 }
 482
 483
 484 </style>