mason/search/stocks_using_genotypes.mas

   1 <%args>
   2
   3
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ] &>
   7
   8 <& /page/page_title.mas, title=>'Search Accessions Containing Specific Genotypes' &>
   9
  10 <!--
  11 <&| /page/info_section.mas, title=>'Step 1: Select a set of accessiions (dataset)'&>
  12     <div class="row" id="search_form_1" >
  13         <div class="col-sm-1">
  14         </div>
  15         <div class="col-sm-12 well">
  16             <span style="width:240px" id="dataset_accessions"></span>
  17         </div>
  18     </div>
  19 </&>
  20 -->
  21
  22 <&| /page/info_section.mas, title=>'Step 1:'&>
  23     <div class="row" id="search_form_1" >
  24         <div class="col-sm-1">
  25         </div>
  26         <div class="col-sm-12 well">
  27             <div class="row">
  28                 <div class="col-sm-11">
  29                     <div class="form-horizontal">
  30                         <div class="form-group">
  31                             <label class="control-label col-sm-4">Select a list of accessions:</label>
  32                             <div class="col-sm-8" >
  33                                 <div class="input-group">
  34                                     <select class="form-control" id="stock_list_select">
  35                                         <option value="">Select a list of accessions</option>
  36                                     </select>
  37                                 </div>
  38                             </div>
  39                         </div>
  40                     </div>
  41                 </div>
  42             </div>
  43         </div>
  44     </div>
  45 </&>
  46
  47 <br>
  48 <&| /page/info_section.mas, title=>'Step 2:'&>
  49     <div class="row" id="search_form_2" >
  50         <div class="col-sm-1">
  51         </div>
  52         <div class="col-sm-12 well">
  53             <div class="row">
  54                 <div class="col-sm-11">
  55                     <div class="form-horizontal">
  56                         <div class="form-group">
  57                             <label class="control-label col-sm-4">Select a set of markers (markerset):</label>
  58                             <div class="col-sm-8" >
  59                                 <div class="input-group">
  60                                     <select class="form-control" id="markerset_select">
  61                                         <option value="">Select a markerset</option>
  62                                     </select>
  63                                 </div>
  64                             </div>
  65                         </div>
  66                         <div class="form-group">
  67                             <label class="control-label col-sm-4"></label>
  68                             <div class="col-sm-8" >
  69                                 <a href="/breeders/markers"><p>Need to create new markerset.</p></a>
  70                             </div>
  71                         </div>
  72                     </div>
  73                 </div>
  74             </div>
  75         </div>
  76     </div>
  77 </&>
  78 <br>
  79 <&| /page/info_section.mas, title=>'Step 3:'&>
  80     <div class="row" id="search_form_3" >
  81         <div class="col-sm-1">
  82         </div>
  83         <div class="col-sm-12 well">
  84             <div class="row">
  85                 <div class="col-sm-11">
  86                     <div class="form-horizontal">
  87                         <div class="form-group">
  88                             <label class="control-label col-sm-4"></label>
  89                             <div class="col-sm-8" >
  90                                 <button class="btn btn-primary" id="search_accessions_using_markerset"><i class="glyphicon glyphicon-search"></i> Search Accessions</button>
  91                             </div>
  92                         </div>
  93                     </div>
  94                 </div>
  95             </div>
  96         </div>
  97     </div>
  98  </&>
  99
 100
 101 <&| /page/info_section.mas, title => 'Search Results' , collapsible=>1, collapsed=>0 &>
 102
 103     <link rel="stylesheet" type="text/css" href="/documents/inc/datatables/jquery.dataTables.css">
 104
 105     <table id="genotype_search_results" width="100%" class="table table-hover table-striped">
 106     </table>
 107 </&>
 108
 109 <script>
 110
 111
 112 jQuery(document).ready(function (){
 113
 114     var data_set = new CXGN.Dataset();
 115     var lo = new CXGN.List();
 116
 117 //    get_select_box('datasets', 'dataset_accessions', {"checkbox_name":"dataset_accessions_checkbox"});
 118     jQuery('#stock_list_select').html(lo.listSelect('stock_list_select', ['accessions'], 'Select a list of accessions', undefined, undefined));
 119
 120     jQuery('#markerset_select').html(lo.listSelect('markerset_select', ['markers'], 'Select a markerset', undefined, undefined));
 121
 122     jQuery("#search_accessions_using_markerset").click(function(){
 123
 124 //        var selected_datasets = [];
 125 //        var dataset_id;
 126 //        jQuery('input[name="dataset_accessions_checkbox"]:checked').each(function() {
 127 //            selected_datasets.push(jQuery(this).val());
 128 //        });
 129
 130 //        if (selected_datasets.length < 1){
 131 //            alert('Please select a set of accessions!');
 132 //            return false;
 133 //        } else if (selected_datasets.length > 1){
 134 //            alert('Please select only one set of accessions!');
 135 //            return false;
 136 //        } else {
 137 //            dataset_id = selected_datasets[0];
 138 //        }
 139
 140         var stock_list_id = jQuery('#stock_list_select').val();
 141
 142         if (!stock_list_id) {
 143             alert("Please choose a list of accessions");
 144             return;
 145         }
 146
 147         var markerset_id = jQuery('#markerset_select').val();
 148
 149         if (!markerset_id) {
 150             alert("Please choose a markerset");
 151             return;
 152         }
 153
 154         var table = jQuery('#genotype_search_results').DataTable({
 155             'destroy' : true,
 156             'ajax': { 'url':'/ajax/search/search_stocks_using_markerset',
 157                 'data':{
 158                     'stock_list_id': stock_list_id,
 159                     'markerset_id': markerset_id,
 160                 }
 161             },
 162             columns: [
 163                 {
 164                     title: "Accession Name",
 165                     data: null,
 166                     render: function(data, type, row){return "<a href='/stock/"+row.stock_id+"/view'>"+row.stock_name+"</a>";}
 167                 },
 168                 {
 169                     title: "Sample Name",
 170                     data: null,
 171                     render: function(data, type, row){return "<a href='/stock/"+row.sample_id+"/view'>"+row.sample_name+"</a>";}
 172                 },
 173                 {
 174                     title: "Sample Type",
 175                     data: "sample_type",
 176                 },
 177                 {
 178                     title: "Genotypes",
 179                     data: "genotypes",
 180 //                    render: function(data, type,row){
 181 //                        var newFormat = data.split(",").join("&nbsp &nbsp &nbsp &nbsp &nbsp");
 182 //                        return newFormat;
 183 //                    }
 184                 },
 185             ],
 186         });
 187     });
 188
 189 });
 190
 191
 192 </script>