mason/breeders_toolbox/trial/derived_trait.mas

   1 <%args>
   2 $trial_id
   3 </%args>
   4
   5
   6 <& /util/import_javascript.mas, classes => [ 'jqueryui', 'jquery.iframe-post-form' ] &>
   7
   8     <div class="row">
   9         <div class="col-sm-6">
  10             <div class="well">
  11                 <h4>Derive Trait Phenotypes</h4>
  12                 <div class="row">
  13                     <div class="col-sm-4">
  14                         <a id="compute_derived_trait_link"><button class="button" type="button" id="derived_button" value="Create_Trait" >Derive Trait</button></a>
  15                     </div>
  16                     <div class="col-sm-8">
  17                         <p><b>P <sub>Calculated</sub></b> = <i>f</i> ( <b>P <sub>Trait1</sub></b> , <b>P <sub>Trait2</sub></b> )</p>
  18                     </div>
  19                 </div>
  20             </div>
  21         </div>
  22         <div class="col-sm-6">
  23             <div class="well">
  24                 <h4>Calculate Plot Phenotypes from Plant Phenotypes</h4>
  25                 <div class="row">
  26                     <div class="col-sm-4">
  27                         <a id="generate_plot_pheno_link"><button class="button" type="button" >Calculate</button></a>
  28                     </div>
  29                     <div class="col-sm-8">
  30                         <p><b>P <sub>Plot</sub></b> = <i>average</i> ( <b>P <sub>Plants</sub></b> )</p>
  31                     </div>
  32                 </div>
  33             </div>
  34         </div>
  35     </div>
  36
  37 <div id="compute_derived_trait_dialog" title="Compute Derived Traits" style="display:none;">
  38         <div id="trait_list_dc" name="trait_list">
  39                 <label id="trait_list_label_dc" for="trait_list_list_select" style="display: inline-block; width: 300px;">Please select trait to compute: <br />
  40                         <select id="derived_trait_select"></select>
  41                 </label>
  42
  43         </div>
  44 </div>
  45
  46 <div id="derived_trait_saved_dialog_message" title="Computation of Derived Traits" style="display:none;">
  47         <p>
  48                 <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
  49                 The trait was created and saved successfully
  50         </p>
  51 </div>
  52
  53 <div class="modal fade" id="generate_plot_pheno_modal" name="generate_plot_pheno_modal" tabindex="-1" role="dialog" aria-labelledby="generatePlotPhenoDialog">
  54   <div class="modal-dialog modal-lg" role="document">
  55     <div class="modal-content">
  56       <div class="modal-header">
  57         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  58         <h4 class="modal-title" id="generatePlotPhenoDialog">Generate Plot Phenotypes from Plant Phenotypes</h4>
  59       </div>
  60       <div class="modal-body">
  61         <div class="container-fluid">
  62             <div class="row">
  63                 <div class="col-sm-9">
  64
  65                     <form class="form-horizontal" role="form" method="post" id="generate_plot_pheno_dialog_form" name="generate_plot_pheno_dialog_form">
  66
  67                         <div class="form-group">
  68                             <label class="col-sm-3 control-label">Trait: </label>
  69                             <div class="col-sm-9" >
  70                                 <div id="generate_plot_pheno_trait_select_dropdown">
  71                                     [No Plants Phenotyped]
  72                                     <!--ajax populated -->
  73                                 </div>
  74                             </div>
  75                         </div>
  76                         <div class="form-group">
  77                             <label class="col-sm-3 control-label">Method: </label>
  78                             <div class="col-sm-9" >
  79                                 <select id="generate_plot_pheno_method_select" class="form-control">
  80                                     <option value="arithmetic_mean">Arithmetic Mean (Average)</option>
  81                                     <option value="mode">Mode</option>
  82                                     <option value="maximum">Maximum</option>
  83                                     <option value="minimum">Minimum</option>
  84                                     <option value="median">Median</option>
  85                                 </select>
  86                             </div>
  87                         </div>
  88                         <div class="form-group">
  89                             <label class="col-sm-3 control-label">Rounding: </label>
  90                             <div class="col-sm-9" >
  91                                 <select id="generate_plot_pheno_rounding_select" class="form-control">
  92                                     <option value="no_rounding">No rounding</option>
  93                                     <option value="round">Round to nearest integer</option>
  94                                     <option value="round_up">Always round up to nearest integer</option>
  95                                     <option value="round_down">Always round down to nearest integer</option>
  96                                 </select>
  97                             </div>
  98                         </div>
  99                         <div class="form-group">
 100                             <label class="col-sm-3 control-label">Overwrite Previous Plot Values for this Trait: </label>
 101                             <div class="col-sm-9" >
 102                                 <input type='checkbox' id="generate_plot_pheno_overwrite" name="generate_plot_pheno_overwrite"/>
 103                             </div>
 104                         </div>
 105
 106                     </form><br/>
 107                 </div>
 108                 <div class="col-sm-3">
 109                     <div id="generate_plot_pheno_trait_select_definition">
 110                         <!--ajax populated -->
 111                     </div>
 112                 </div>
 113             </div>
 114             <div id="generate_plot_pheno_preview">
 115             </div>
 116         </div>
 117       </div>
 118       <div class="modal-footer">
 119         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 120         <button type="button" class="btn btn-primary" name="generate_plot_pheno_calc_submit" id="generate_plot_pheno_calc_submit" title="Calculate">View Calculation (Does Not Save)</button>
 121         <button disabled type="button" class="btn btn-primary" name="generate_plot_pheno_save" id="generate_plot_pheno_save" title="">Save</button>
 122       </div>
 123     </div>
 124   </div>
 125 </div>
 126
 127
 128 <script>
 129
 130 jQuery(document).ready(function () {
 131
 132     jQuery('#generate_plot_pheno_link').click( function() {
 133         jQuery('#generate_plot_pheno_modal').modal('show');
 134     });
 135
 136     jQuery('#compute_derived_traits_onswitch').click( function() {
 137         jQuery.ajax ( {
 138             url : '/ajax/breeders/trial/'+ <% $trial_id %> + '/traits_assayed?stock_type=plant',
 139             beforeSend: function() {
 140                 jQuery("#working_modal").modal("show");
 141             },
 142             success: function(response){
 143                 //console.log(response);
 144                 jQuery("#working_modal").modal("hide");
 145                 if (response.traits_assayed[0][0]) {
 146                     var traits_assayed_html = "<select class='form-control' id='generate_plot_pheno_trait_select' onchange='generate_plot_pheno_trait_change(this.value)'>";
 147                     for (i=0; i<response.traits_assayed[0].length; i++) {
 148                         traits_assayed_html = traits_assayed_html + "<option value="+ encodeURI(response.traits_assayed[0][i][1]) + " >" + response.traits_assayed[0][i][1] + "</option>";
 149                     }
 150                     traits_assayed_html = traits_assayed_html +"</select>";
 151
 152                     jQuery("#generate_plot_pheno_trait_select_dropdown").html(traits_assayed_html);
 153
 154                     jQuery('#generate_plot_pheno_trait_select_definition').html("<a href='/cvterm/"+response.traits_assayed[0][0][0]+"/view'>Definition</a>");
 155                 }
 156             }
 157         });
 158     });
 159
 160     var generated_phenotypes_data;
 161     var generated_plots_data;
 162     var generated_traits_data;
 163     jQuery('#generate_plot_pheno_calc_submit').click( function() {
 164         jQuery.ajax ( {
 165             url : '/ajax/breeders/trial/generate_plot_phenotypes',
 166             type: 'POST',
 167             data: {
 168                 'trial_id':<% $trial_id %>,
 169                 'trait_name':jQuery('#generate_plot_pheno_trait_select').val(),
 170                 'method':jQuery('#generate_plot_pheno_method_select').val(),
 171                 'rounding':jQuery('#generate_plot_pheno_rounding_select').val()
 172             },
 173             beforeSend: function() {
 174                 jQuery("#working_modal").modal("show");
 175             },
 176             success: function(response){
 177                 console.log(response);
 178                 var html = '<hr><h5>Trait: '+response.trait_name+'</h5><h5>Method: '+response.method+'</h5><h5>Rounding: '+response.rounding+'</h5><table class="table table-hover"><thead><tr><th>Plot</th><th>Plant Values</th><th>Calculation Output</th><th>Value to Store</th><th>Notes</th></tr></thead><tbody>';
 179                 for (var i=0; i<response.info.length; i++) {
 180                     html = html + '<tr><td>'+response.info[i].plot_name+'</td><td>'+response.info[i].plant_values+'</td><td>'+response.info[i].output+'</td><td>'+response.info[i].value_to_store+'</td><td>'+response.info[i].notes+'</td></tr>';
 181                 }
 182                 html = html +'</tbody></table>';
 183                 jQuery('#generate_plot_pheno_preview').empty().html(html);
 184                 jQuery("#working_modal").modal("hide");
 185                 generated_phenotypes_data = response.store_data;
 186                 generated_plots_data = response.store_plots;
 187                 generated_traits_data = response.store_traits;
 188                 jQuery('#generate_plot_pheno_save').attr('disabled', false);
 189             }
 190         });
 191     });
 192
 193
 194     jQuery('#generate_plot_pheno_save').click( function() {
 195         jQuery.ajax ( {
 196             url : '/ajax/breeders/trial/store_generated_plot_phenotypes',
 197             type: 'POST',
 198             data: {
 199                 'overwrite_values':jQuery('#generate_plot_pheno_overwrite').val(),
 200                 'store_data':generated_phenotypes_data,
 201                 'store_plots':generated_plots_data,
 202                 'store_traits':generated_traits_data
 203             },
 204             beforeSend: function() {
 205                 jQuery("#working_modal").modal("show");
 206             },
 207             success: function(response){
 208                 console.log(response);
 209                 jQuery("#working_modal").modal("hide");
 210                 //alert('Successfully saved!');
 211             }
 212         });
 213     });
 214
 215
 216 });
 217
 218 function generate_plot_pheno_trait_change(trait_id) {
 219     jQuery('#generate_plot_pheno_trait_select_definition').html("<a href='/cvterm/"+trait_id+"/view'>Definition</a>");
 220 }
 221
 222 </script>