mason/tools/nirs/nirs_analysis_plot_spectra_dialogs.mas

   1
   2 <!--button class="btn btn-primary" id="nirs_analysis_plot_spectra_show">Plot Spectra</button-->
   3
   4 <div class="modal fade" id="nirs_analysis_plot_spectra_dialog" name="nirs_analysis_plot_spectra_dialog" tabindex="-1" role="dialog" aria-labelledby="nirsAnalysisPlotSpectraDialog" data-backdrop="static">
   5   <div class="modal-dialog modal-xl" role="document">
   6     <div class="modal-content">
   7       <div class="modal-header">
   8         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   9         <h4 class="modal-title" id="nirsAnalysisPlotSpectraDialog">Plot Spectra</h4>
  10       </div>
  11       <div class="modal-body">
  12         <div class="container-fluid">
  13
  14             <&| /util/workflow.mas, id=> "nirs_analysis_plot_spectra_workflow" &>
  15                 <&| /util/workflow.mas:step, title=> "Intro" &>
  16                     <& /page/page_title.mas, title=>"This workflow will guide you through querying and plotting spectral data in the database." &>
  17                     <br/><br/>
  18                     <center>
  19                     <button class="btn btn-primary" onclick="Workflow.complete(this); return false;">Go to Next Step</button>
  20                     </center>
  21                 </&>
  22                 <&| /util/workflow.mas:step, title=> "Protocol" &>
  23                     <& /page/page_title.mas, title=>"Select the protocol you are interested in plotting spectra:" &>
  24
  25                     <div id="nirs_analysis_plot_spectra_protocol_select">
  26                     </div>
  27
  28                     <center>
  29                     <button class="btn btn-primary" id="nirs_analysis_plot_spectra_protocol_select_step">Go to Next Step</button>
  30                     </center>
  31                 </&>
  32                 <&| /util/workflow.mas:step, title=> "Dataset" &>
  33                     <& /page/page_title.mas, title=>"Select the dataset you are interested in plotting spectra for (the accessions or plots or tissues samples in the dataset need to have spectra uploaded):" &>
  34
  35                     <div id="nirs_analysis_plot_spectra_dataset_select_div">
  36                     </div>
  37
  38                     <center>
  39                     <button class="btn btn-primary" id="nirs_analysis_plot_spectra_dataset_select_step">Go to Next Step</button>
  40                     </center>
  41                 </&>
  42                 <&| /util/workflow.mas:step, title=> "Search" &>
  43                     <& /page/page_title.mas, title=>"Search Parameters:" &>
  44                     <br/><br/>
  45                     <form class="form-horizontal">
  46                         <div class="form-group">
  47                             <label class="col-sm-5 control-label">Query related stocks (e.g. if you have accessions in the dataset, the query will search for spectra on associated plots, plants, etc. and vice versa): </label>
  48                             <div class="col-sm-7" >
  49                                 <select class="form-control" id="nirs_analysis_plot_spectra_associated_stock_select_id" name="nirs_analysis_plot_spectra_associated_stock_select_id">
  50                                     <option value="yes">Yes</option>
  51                                     <option value="no">No</option>
  52                                 </select>
  53                             </div>
  54                         </div>
  55                     </form>
  56                     <center>
  57                     <button class="btn btn-primary" id="nirs_analysis_plot_spectra_search_step">Go to Next Step</button>
  58                     </center>
  59                 </&>
  60                 <&| /util/workflow.mas:step, title=> "Results" &>
  61                     <& /page/page_title.mas, title=>"Spectral Plots" &>
  62
  63                     <div id="nir_analysis_plot_spectra_result"></div>
  64
  65                 </&>
  66             </&>
  67
  68         </div>
  69
  70       </div>
  71       <div class="modal-footer">
  72         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  73       </div>
  74     </div>
  75   </div>
  76 </div>
  77
  78 <script>
  79 jQuery(document).ready(function(){
  80
  81     jQuery('#nirs_analysis_plot_spectra_show').click(function(){
  82         jQuery('#nirs_analysis_plot_spectra_dialog').modal('show');
  83
  84         get_select_box('high_dimensional_phenotypes_protocols','nirs_analysis_plot_spectra_protocol_select', {'checkbox_name':'nirs_analysis_plot_spectra_protocol_id', 'high_dimensional_phenotype_protocol_type':'high_dimensional_phenotype_nirs_protocol'});
  85
  86         get_select_box('datasets','nirs_analysis_plot_spectra_dataset_select_div', {'checkbox_name':'nirs_analysis_plot_spectra_dataset_select_id'});
  87     });
  88
  89     var nirs_analysis_plot_spectra_protocol_id;
  90     jQuery('#nirs_analysis_plot_spectra_protocol_select_step').click(function(){
  91         var selected = [];
  92         jQuery('input[name="nirs_analysis_plot_spectra_protocol_id"]:checked').each(function() {
  93             selected.push(jQuery(this).val());
  94         });
  95
  96         if(selected.length > 1 || selected.length == 0) {
  97             alert('Please select one dataset!');
  98             return false;
  99         }
 100         else {
 101             nirs_analysis_plot_spectra_protocol_id = selected[0];
 102
 103             Workflow.complete("#nirs_analysis_plot_spectra_protocol_select_step");
 104             Workflow.focus('#nirs_analysis_plot_spectra_workflow', 2);
 105         }
 106     });
 107
 108     var nirs_analysis_plot_spectra_dataset_id;
 109     jQuery('#nirs_analysis_plot_spectra_dataset_select_step').click(function(){
 110         var selected = [];
 111         jQuery('input[name="nirs_analysis_plot_spectra_dataset_select_id"]:checked').each(function() {
 112             selected.push(jQuery(this).val());
 113         });
 114
 115         if(selected.length > 1 || selected.length == 0) {
 116             alert('Please select one dataset!');
 117             return false;
 118         }
 119         else {
 120             nirs_analysis_plot_spectra_dataset_id = selected[0];
 121
 122             Workflow.complete("#nirs_analysis_plot_spectra_dataset_select_step");
 123             Workflow.focus('#nirs_analysis_plot_spectra_workflow', 3);
 124             window.scrollTo(0,0);
 125         }
 126     });
 127
 128     jQuery('#nirs_analysis_plot_spectra_search_step').click(function(){
 129
 130         jQuery.ajax({
 131             url : '/ajax/Nirs/generate_spectral_plot',
 132             type : 'POST',
 133             data : {
 134                 'dataset_id' : nirs_analysis_plot_spectra_dataset_id,
 135                 'nd_protocol_id': nirs_analysis_plot_spectra_protocol_id,
 136                 'query_associated_stocks': jQuery('#nirs_analysis_plot_spectra_associated_stock_select_id').val(),
 137             },
 138             beforeSend: function(){
 139                 jQuery('#working_modal').modal('show');
 140             },
 141             success: function(response){
 142                 console.log(response);
 143                 jQuery('#working_modal').modal('hide');
 144
 145                 if (response.error) {
 146                     alert(response.error);
 147                     return false;
 148                 }
 149
 150                 jQuery('#nir_analysis_plot_spectra_result').html('<div class="well well-sm"><h3>Plot of Spectra: </h3><img width="80%" height="80%" src="'+response.figure+'"></div>');
 151
 152                 Workflow.complete("#nirs_analysis_plot_spectra_search_step");
 153                 Workflow.focus('#nirs_analysis_plot_spectra_workflow', 4);
 154                 window.scrollTo(0,0);
 155             },
 156             error: function(response){
 157                 alert('Error plotting spectra from NIRS!');
 158                 jQuery('#working_modal').modal('hide');
 159             }
 160         });
 161     });
 162
 163 });
 164 </script>