mason/search/loci.mas

   1
   2 <%args>
   3 $organism_ref => undef
   4 $lg_names_ref       => undef
   5 </%args>
   6
   7 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ] &>
   8
   9 <div class="container-fluid">
  10
  11 <& /page/page_title.mas, title=>'Search Genes and Loci' &>
  12
  13 <%perl>
  14
  15 use CXGN::Page::FormattingHelpers qw / html_optional_show info_table_html conditional_like_input_html simple_selectbox_html/;
  16
  17
  18 my $any_name_select = conditional_like_input_html("any_name","contains", "", '30');
  19
  20
  21 my $organism = simple_selectbox_html(
  22  choices  =>  $organism_ref   ,
  23  id       => "common_name",
  24 );
  25
  26
  27 my $linkage_group_select = simple_selectbox_html(
  28    choices => $lg_names_ref,
  29    id      => "locus_linkage_group",
  30 );
  31
  32
  33 no warnings 'uninitialized';
  34
  35 my $advanced_search=  info_table_html(
  36   'Organism'   => $organism,
  37   'Chromosome / Linkage&nbsp;Group' => $linkage_group_select,
  38   'Locus editor' =>qq|<input class="form-control" type="text" id="locus_editor" size="20"/>|,
  39   'Show only genes with' => qq | <input type="checkbox" id="has_sequence"  />sequence <br />
  40                                 <input type="checkbox" id="has_marker" />markers<br />
  41                                 <input type="checkbox" id="has_annotation" />GO/PO annotation<br /> |,
  42
  43       'Phenotype'  => qq|<input class="form-control" type="text" id="phenotype" size="30" /><a href="/search/phenotypes"> [Advanced SGN phenotype search]</a>|,
  44       'Ontology term' => qq|<input class="form-control" type="text" id="ontology_term" placeholder="Term name or ID: e.g. 'carotenoid' or 'PO:0007010'"/>
  45              <!--<br /><span class="ghosted">(Term name or ID: e.g. 'carotenoid' or 'PO:0007010')</span>-->|,
  46       'Genbank ID' =>qq|<input class="form-control" type="text" id="genbank_accession" placeholder="Accession or GI: e.g. 'EF091820' or '118185006'"/>
  47              <!--<br /><span class="ghosted">(Accession or GI: e.g. 'EF091820' or '118185006')</span>-->|,
  48       __border   =>1,
  49       __multicol =>2,
  50       __tableattrs => 'width="100%"',
  51       );
  52
  53 </%perl>
  54
  55
  56 <&| /page/info_section.mas, title => 'Search', collapsible=>1, collapsed=>0, subtitle=>'[<a href="../help/gene_search_help.pl">Gene Search Help</a>]' &>
  57
  58 <div class="well" id="locus_search_form">
  59
  60   <div class="form-horizontal" >
  61     <div class="form-group">
  62       <label class="col-sm-3 control-label">Search for any gene, locus, or allele:</label>
  63       <div class="col-sm-9" >
  64         <% $any_name_select %>
  65       </div>
  66     </div>
  67     <div class="container-fluid" align="center">
  68       <br/>
  69       <ul class="list-inline" >
  70         <li style="padding-bottom:5px"><button class="btn btn-primary" id="submit_locus_search" />Search</button></li>
  71         <li style="padding-bottom:5px"><a class="btn btn-info" href="/locus/0/new/" style="color:#fff" >Submit New Locus</a></li>
  72         <li style="padding-bottom:5px"><input class="btn btn-default" type="button" value="Advanced Search Options" id="show_advanced_search" /></li>
  73       </ul>
  74     </div>
  75   </div>
  76
  77 <!--
  78 <table>
  79   <tr>
  80     <td colspan="2"><b>Search for any gene, locus, or allele</b>  (<a href="../help/gene_search_help.pl">gene search help page</a>)</td></tr>
  81   <tr><td><% $any_name_select %></td>
  82     <td><div align="center"><button id="submit_locus_search" />Search</button></div></td>
  83    <tr><td><a href="/locus/0/new/">[Submit new locus]</a></td></tr>
  84 </tr></table>
  85 <br />
  86 -->
  87
  88 <div id="advanced_search_div" style="display:none;">
  89    <&| /page/info_section.mas, title    => 'Advanced Options' &>
  90      <% $advanced_search %>
  91    </&>
  92 </div>
  93
  94 </div>
  95
  96 </&>
  97
  98 </div>
  99
 100
 101 <&| /page/info_section.mas, title => 'Search Results', collapsible=>1, collapsed=>0 &>
 102
 103
 104 <div class="well">
 105 <table id="locus_search_results" class="display">
 106 <thead>
 107   <tr>
 108     <th>Organism</th>
 109     <th>Locus Name</th>
 110     <th>Locus Symbol</th>
 111     <th>Alleles</th>
 112   </tr>
 113 </thead>
 114 </table>
 115 </div>
 116
 117 </&>
 118
 119
 120 <& /util/import_css.mas, paths => ['/documents/inc/datatables/jquery.dataTables.css'] &>
 121
 122
 123
 124 <script>
 125
 126 jQuery(document).ready(function () {
 127
 128    var table = jQuery('#locus_search_results').DataTable( {
 129
 130      'searching' : false,
 131      'ordering'  : false,
 132      'processing': true,
 133      'serverSide': true,
 134      'ajax': { 'url':  '/ajax/search/loci',
 135                'data': function(d) {
 136                   d.any_name  = jQuery('#any_name').val();
 137                   d.any_name_matchtype = jQuery('#any_name_matchtype').val();
 138                   d.common_name  = jQuery('#common_name').val();
 139                   d.phenotype  = jQuery('#phenotype').val();
 140                   d.linkage_group  = jQuery('#locus_linkage_group').val();
 141                   d.ontology_term  = jQuery('#ontology_term').val();
 142                   d.locus_editor  = jQuery('#locus_editor').val();
 143                   d.genbank_accession  = jQuery('#genbank_accession').val();
 144                   d.has_sequence  = jQuery('#has_sequence').is(':checked');
 145                   d.has_marker  = jQuery('#has_marker').is(':checked');
 146                   d.has_annotation  = jQuery('#has_annotation').is(':checked');
 147              }
 148          }
 149      });
 150
 151
 152    jQuery('#submit_locus_search').click( function() {
 153          var common_name  = jQuery('#common_name').val();
 154          var phenotype    = jQuery('#phenotype').val();
 155          var linkage      = jQuery('#locus_linkage_group').val();
 156          var ontology     = jQuery('#ontology_term').val();
 157          var editor       = jQuery('#locus_editor').val();
 158          var genbank      = jQuery('#genbank_accession').val();
 159          var has_sequence     = jQuery('#has_sequence').is(':checked');
 160          var has_marker       = jQuery('#has_marker').is(':checked');
 161          var has_annotation   = jQuery('#has_annotation').is(':checked');
 162
 163          if (  phenotype.trim().length  || common_name.length || ontology.trim().length || editor.trim().length || genbank.trim().length || has_sequence || has_marker || has_annotation ) {
 164              jQuery('#advanced_search_div').show();
 165          } else {
 166              jQuery('#advanced_search_div').hide()
 167          }
 168          table.search("locus_search_results").draw();
 169    });
 170
 171    jQuery('#locus_search_form').keypress( function( e ) {
 172            var code = e.keyCode || e.which;
 173            if( code == 13 ) {
 174                 jQuery('#submit_locus_search').click();
 175            }
 176     } );
 177
 178
 179    jQuery('#show_advanced_search').click( function() {
 180         if (false == jQuery('#advanced_search_div').is(':visible')) {
 181              jQuery('#advanced_search_div').show();
 182         }
 183         else {
 184              jQuery('#advanced_search_div').hide();
 185        }
 186    } );
 187
 188
 189
 190 });
 191
 192 </script>