mason/search/stocks.mas

   1
   2 <%args>
   3
   4   $sp_person_autocomplete_uri => '/ajax/people/autocomplete'
   5   $trait_autocomplete_uri     => '/ajax/stock/trait_autocomplete'
   6   $onto_autocomplete_uri      => '/ajax/cvterm/autocomplete'
   7   $trait_db_name              => 'SP'
   8
   9   $organisms       => undef
  10   $stock_types     => undef
  11   $breeding_programs => undef
  12   $editable_stock_props => undef
  13 </%args>
  14
  15 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables', 'CXGN.Effects', 'CXGN.List' ] &>
  16
  17 <div class="container-fluid">
  18
  19 <& /page/page_title.mas, title=>'Search Accessions and Plots' &>
  20
  21
  22 <%perl>
  23
  24 use CXGN::Page::FormattingHelpers qw / conditional_like_input_html simple_selectbox_html/;
  25
  26 my $accession_cvterm_id;
  27
  28 for (my $i=0; $i<= scalar(@$stock_types); $i++) {
  29      if ( $stock_types->[$i][1] eq "accession" ) {
  30         $accession_cvterm_id = $stock_types->[$i][0];
  31         last();
  32      }
  33 }
  34
  35 my $stock_type_select = simple_selectbox_html(
  36   choices   => $stock_types,
  37   id        => "stock_type_select",
  38   selected  => $accession_cvterm_id,
  39 );
  40
  41 my $organism_select = simple_selectbox_html(
  42   choices  =>  $organisms   ,
  43   id       => "organism_select",
  44 );
  45
  46 my $breeding_programs_select = simple_selectbox_html(
  47     choices => $breeding_programs,
  48     id      => "breeding_program" ,
  49 );
  50
  51 </%perl>
  52
  53 <&| /page/info_section.mas, title => 'Search', collapsible=>1, collapsed=>0 &>
  54
  55   <div id="stock_search_form" class="form-horizontal well">
  56
  57     <&| /page/info_section.mas, title => 'Uniquename', collapsible=>1, collapsed=>0 &>
  58
  59     <div class="row">
  60       <div class="col-sm-11">
  61         <div class="form-group form-group-sm">
  62           <label class="col-sm-3 control-label">Stock Name or Description: </label>
  63           <div class="col-sm-9" >
  64             <div class="form-group">
  65               <div class="input-group">
  66                 <span class="input-group-btn" width="20%">
  67                   <select class="form-control" id="any_name_matchtype" name="any_name_matchtype">
  68                     <option title="contains" value="contains" selected="selected">contains</option>
  69                     <option title="starts with" value="starts_with">starts with</option>
  70                     <option title="ends with" value="ends_with">ends with</option>
  71                     <option title="exactly" value="exactly">exactly</option>
  72                   </select>
  73                 </span>
  74                   <span class="input-group-btn">
  75                   <input class="form-control" name="any_name" id="any_name" value="" size="30" type="text" placeholder="Type search here..."/>
  76                 </span>
  77               </div>
  78             </div>
  79           </div>
  80         </div>
  81       </div>
  82     </div>
  83
  84     </&>
  85     <&| /page/info_section.mas, title => 'Properties', collapsible=>1, collapsed=>1 &>
  86
  87     <div class="row">
  88       <div class="col-sm-11">
  89         <div class="form-group form-group-sm">
  90           <label class="col-sm-3 control-label">Properties: </label>
  91           <div class="col-sm-9" >
  92             <div class="form-group">
  93               <div class="input-group">
  94                 <span class="input-group-btn" width="20%">
  95                   <select class="form-control" id="editable_stockprop_search_term" name="editable_stockprop_search_term">
  96 %  foreach my $stockprop (@$editable_stock_props){
  97                     <option title="<% $stockprop %>" value="<% $stockprop %>" ><% $stockprop %></option>
  98 %  }
  99                   </select>
 100                 </span>
 101                   <span class="input-group-btn">
 102                   <input class="form-control" name="editable_stockprop_search_value" id="editable_stockprop_search_value" value="" size="30" type="text" placeholder="Type search here..."/>
 103                 </span>
 104               </div>
 105             </div>
 106           </div>
 107         </div>
 108       </div>
 109     </div>
 110     <div class="row">
 111       <div class="col-sm-6">
 112         <div class="form-group form-group-sm">
 113           <label class="col-sm-3 control-label">Stock Type: </label>
 114           <div class="col-sm-9" >
 115             <% $stock_type_select %>
 116           </div>
 117         </div>
 118       </div>
 119       <div class="col-sm-6">
 120         <div class="form-group form-group-sm">
 121           <label class="col-sm-3 control-label">Organism: </label>
 122           <div class="col-sm-9" >
 123             <% $organism_select %>
 124           </div>
 125         </div>
 126       </div>
 127     </div>
 128     <div class="row">
 129       <div class="col-sm-6">
 130         <div class="form-group form-group-sm">
 131           <label class="col-sm-3 control-label">Stock Owner: </label>
 132           <div class="col-sm-9" >
 133             <input type="text" class="form-control" id="person" placeholder="Type to Autocomplete"/>
 134           </div>
 135         </div>
 136       </div>
 137       <div class="col-sm-6">
 138         <div class="form-group form-group-sm">
 139           <label class="col-sm-3 control-label">Organization: </label>
 140           <div class="col-sm-9" >
 141             <input type="text" class="form-control" id="organization" placeholder="Type to Autocomplete"/>
 142           </div>
 143         </div>
 144       </div>
 145     </div>
 146
 147     </&>
 148     <&| /page/info_section.mas, title => 'Genetic Properties', collapsible=>1, collapsed=>1 &>
 149
 150     <div class="row">
 151       <div class="col-sm-6">
 152         <div class="form-group form-group-sm">
 153           <label class="col-sm-3 control-label">Introgression Parent: </label>
 154           <div class="col-sm-9" >
 155             <input type="text" class="form-control" id="introgression_parent" placeholder="Type to Autocomplete"/>
 156           </div>
 157         </div>
 158       </div>
 159       <div class="col-sm-6">
 160         <div class="form-group form-group-sm">
 161           <label class="col-sm-3 control-label">Introgession Backcross Parent: </label>
 162           <div class="col-sm-9" >
 163             <input type="text" class="form-control" id="introgression_backcross_parent" placeholder="Type to Autocomplete"/>
 164           </div>
 165         </div>
 166       </div>
 167     </div>
 168     <div class="row">
 169       <div class="col-sm-6">
 170         <div class="form-group form-group-sm">
 171           <label class="col-sm-3 control-label">Introgression Map Version: </label>
 172           <div class="col-sm-9" >
 173             <input type="text" class="form-control" id="introgression_map_version" placeholder="Type to Autocomplete"/>
 174           </div>
 175         </div>
 176       </div>
 177       <div class="col-sm-6">
 178         <div class="form-group form-group-sm">
 179           <label class="col-sm-3 control-label">Introgression Chromosome: </label>
 180           <div class="col-sm-9" >
 181             <input type="text" class="form-control" id="introgression_chromosome" placeholder="Type to Autocomplete"/>
 182           </div>
 183         </div>
 184       </div>
 185     </div>
 186     <div class="row">
 187       <div class="col-sm-6">
 188         <div class="form-group form-group-sm">
 189           <label class="col-sm-3 control-label">Introgression Start Position (bp): </label>
 190           <div class="col-sm-9" >
 191             <input type="text" class="form-control" id="introgression_start_position_bp" placeholder="Type to Autocomplete"/>
 192           </div>
 193         </div>
 194       </div>
 195       <div class="col-sm-6">
 196         <div class="form-group form-group-sm">
 197           <label class="col-sm-3 control-label">Introgression End Position (bp): </label>
 198           <div class="col-sm-9" >
 199             <input type="text" class="form-control" id="introgression_end_position_bp" placeholder="Type to Autocomplete"/>
 200           </div>
 201         </div>
 202       </div>
 203     </div>
 204
 205     </&>
 206     <&| /page/info_section.mas, title => 'Usage', collapsible=>1, collapsed=>1 &>
 207
 208     <div class="row">
 209       <div class="col-sm-6">
 210         <div class="form-group form-group-sm">
 211           <label class="col-sm-3 control-label">Project Name: </label>
 212           <div class="col-sm-9" >
 213             <input type="text" class="form-control" id="project" placeholder="Type to Autocomplete"/>
 214           </div>
 215         </div>
 216       </div>
 217       <div class="col-sm-6">
 218         <div class="form-group form-group-sm">
 219           <label class="col-sm-3 control-label">Project Location: </label>
 220           <div class="col-sm-9" >
 221             <input type="text" class="form-control" id="location" placeholder="Type to Autocomplete"/>
 222           </div>
 223         </div>
 224       </div>
 225     </div>
 226     <div class="row">
 227       <div class="col-sm-6">
 228         <div class="form-group form-group-sm">
 229           <label class="col-sm-3 control-label">Project Year: </label>
 230           <div class="col-sm-9" >
 231             <input type="text" class="form-control" id="year" placeholder="Type to Autocomplete"/>
 232           </div>
 233         </div>
 234       </div>
 235       <div class="col-sm-6">
 236         <div class="form-group form-group-sm">
 237           <label class="col-sm-3 control-label">Breeding Program: </label>
 238           <div class="col-sm-9" >
 239             <% $breeding_programs_select %>
 240           </div>
 241         </div>
 242       </div>
 243     </div>
 244
 245     </&>
 246     <&| /page/info_section.mas, title => 'Phenotypes', collapsible=>1, collapsed=>1 &>
 247
 248     <div class="row">
 249         <div class="col-sm-6">
 250           <div class="form-group form-group-sm">
 251             <label class="col-sm-3 control-label">Trait: </label>
 252             <div class="col-sm-9" >
 253               <input type="text" class="form-control" id="trait" placeholder="Type to Autocomplete"/>
 254             </div>
 255           </div>
 256         </div>
 257       <div class="col-sm-6">
 258         <div class="form-group form-group-sm">
 259           <label class="col-sm-3 control-label">Minimum Trait Value: </label>
 260           <div class="col-sm-9" >
 261             <input type="text" class="form-control" id="minimum_trait_value" />
 262           </div>
 263         </div>
 264       </div>
 265       </div>
 266       <div class="row">
 267       <div class="col-sm-6">
 268         <div class="form-group form-group-sm">
 269           <label class="col-sm-3 control-label">Maximum Trait Value: </label>
 270           <div class="col-sm-9" >
 271             <input type="text" class="form-control" id="maximum_trait_value" />
 272           </div>
 273         </div>
 274       </div>
 275     </div>
 276     </&>
 277
 278     <center>
 279     <button class="btn btn-primary" id="submit_stock_search" />Search</button>
 280     </center>
 281     <br/><br/>
 282   </div>
 283 </&>
 284
 285 <br />
 286
 287 <&| /page/info_section.mas, title => 'Search Results', collapsible=>1, collapsed=>0 &>
 288
 289 <div class="well well-sm">
 290
 291     <table id="stock_search_results" width="100%" class="table table-hover table-striped">
 292     <thead>
 293       <tr>
 294         <th>Stock Name</th>
 295         <th>Stock Type</th>
 296         <th>Organism</th>
 297         <th>Synonyms</th>
 298         <th>Owners</th>
 299         <th>Organizations</th>
 300     </tr>
 301     </thead>
 302
 303     </table>
 304
 305     <br/>
 306
 307     <div class="panel panel-default">
 308         <div class="panel-body">
 309             <&| /page/info_section.mas, title => 'Copy Results to a List', collapsible=>1, collapsed=>0, subtitle=>'<i>Copy the stock names currently showing in the search results table to a new or exisiting list</i>'&>
 310             <br>
 311             <div style="text-align:right" id="results_to_list_menu"></div>
 312             <div id="search_result_names" style="display: none;"></div>
 313             </&>
 314         </div>
 315     </div>
 316
 317 </div>
 318
 319 </&>
 320
 321 <& /search/stocks_graphicalfiltering.mas &>
 322
 323
 324 </div>
 325
 326 <script>
 327
 328 jQuery(document).ready(function () {
 329
 330      jQuery("#person").autocomplete({
 331         source: '<% $sp_person_autocomplete_uri %>'
 332      });
 333      jQuery("#trait").autocomplete({
 334         source: '<% $trait_autocomplete_uri %>'
 335      });
 336      jQuery("#onto").autocomplete({
 337         source: '<% $onto_autocomplete_uri %>' + "?db_name=" + '<% $trait_db_name %>'
 338      });
 339      jQuery("#project").autocomplete({
 340         source: '/ajax/stock/project_autocomplete',
 341      });
 342      jQuery("#any_name").autocomplete({
 343         source: '/ajax/stock/stock_autocomplete',
 344      });
 345      jQuery("#location").autocomplete({
 346         source: '/ajax/stock/geolocation_autocomplete',
 347      });
 348      jQuery("#year").autocomplete({
 349         source: '/ajax/stock/project_year_autocomplete',
 350      });
 351      jQuery("#organization").autocomplete({
 352         source: '/ajax/stock/stock_organization_autocomplete',
 353      });
 354      jQuery("#introgression_parent").autocomplete({
 355         source: '/ajax/stock/stock_introgression_parent_autocomplete',
 356      });
 357      jQuery("#introgression_backcross_parent").autocomplete({
 358         source: '/ajax/stock/stock_introgression_backcross_parent_autocomplete',
 359      });
 360      jQuery("#introgression_map_version").autocomplete({
 361         source: '/ajax/stock/stock_introgression_map_version_autocomplete',
 362      });
 363      jQuery("#introgression_chromosome").autocomplete({
 364         source: '/ajax/stock/stock_introgression_chromosome_autocomplete',
 365      });
 366      jQuery("#introgression_start_position_bp").autocomplete({
 367         source: '/ajax/stock/stock_introgression_start_position_bp_autocomplete',
 368      });
 369      jQuery("#introgression_end_position_bp").autocomplete({
 370         source: '/ajax/stock/stock_introgression_end_position_bp_autocomplete',
 371      });
 372
 373    var stock_table = jQuery('#stock_search_results').DataTable( {
 374
 375      'searching' : false,
 376      'ordering'  : false,
 377      'processing': true,
 378      'serverSide': true,
 379      'lengthMenu': [10,20,50,100,1000,5000],
 380      'ajax': { 'url':  '/ajax/search/stocks',
 381                'data': function(d) {
 382                   d.any_name  = jQuery('#any_name').val();
 383                   d.any_name_matchtype = jQuery('#any_name_matchtype').val();
 384                   d.stock_type   = jQuery('#stock_type_select').val();
 385                   d.organism     = jQuery('#organism_select').val();
 386                   d.person       = jQuery('#person').val();
 387                   d.trait        = jQuery('#trait').val();
 388                   d.minimum_trait_value        = jQuery('#minimum_trait_value').val();
 389                   d.maximum_trait_value        = jQuery('#maximum_trait_value').val();
 390                   d.project      = jQuery('#project').val();
 391                   d.location     = jQuery('#location').val();
 392                   d.year         = jQuery('#year').val();
 393                   d.breeding_program = jQuery('#breeding_program').val();
 394                   d.organization = jQuery('#organization').val();
 395                   d.property_term = jQuery('#editable_stockprop_search_term').val();
 396                   d.property_value = jQuery('#editable_stockprop_search_value').val();
 397                   d.introgression_parent = jQuery('#introgression_parent').val();
 398                   d.introgression_backcross_parent = jQuery('#introgression_backcross_parent').val();
 399                   d.introgression_map_version = jQuery('#introgression_map_version').val();
 400                   d.introgression_chromosome = jQuery('#introgression_chromosome').val();
 401                   d.introgression_start_position_bp = jQuery('#introgression_start_position_bp').val();
 402                   d.introgression_end_position_bp = jQuery('#introgression_end_position_bp').val();
 403              }
 404          }
 405     });
 406
 407     jQuery('#stock_search_results').on( 'draw.dt', function () {
 408       var name_links = stock_table.column(0).data();
 409       var names = [];
 410
 411       for (var i = 0; i < name_links.length; i++) { //extract text from anchor tags
 412         names.push(name_links[i].match(/<a [^>]+>([^<]+)<\/a>/)[1]+'\n');
 413       }
 414
 415       jQuery('#search_result_names').html(names);
 416       addToListMenu('results_to_list_menu', 'search_result_names', {
 417         listType: jQuery('#stock_type_select option:selected').text()+'s' || 'null'
 418       });
 419
 420     });
 421
 422    jQuery('#submit_stock_search').click( function() {
 423         stock_table.search("stock_search_results").draw();
 424    });
 425
 426    jQuery('#stock_search_form').keypress( function( e ) {
 427            var code = e.keyCode || e.which;
 428            if( code == 13 ) {
 429                 jQuery('#submit_stock_search').click();
 430            }
 431     } );
 432
 433 });
 434
 435 </script>