mason/search/vectors.mas

   1
   2 <%args>
   3
   4 $sp_person_autocomplete_uri => '/ajax/people/autocomplete'
   5 $stock_types     => []
   6 $editable_vector_props => undef
   7 </%args>
   8
   9 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables', 'CXGN.Effects', 'CXGN.List' ] &>
  10
  11 <div class="container-fluid">
  12
  13 <& /page/page_title.mas, title=>'Search Vectors' &>
  14
  15
  16 <%perl>
  17
  18 use CXGN::Page::FormattingHelpers qw / conditional_like_input_html simple_selectbox_html/;
  19
  20 my $vector_cvterm_id;
  21 my $stock_types_number = scalar(@$stock_types);
  22
  23 for (my $i=0; $i<= $stock_types_number; $i++) {
  24     if ( $stock_types->[$i][1] eq "vector_construct" ) {
  25         $vector_cvterm_id = $stock_types->[$i][0];
  26         last();
  27    }
  28 }
  29
  30 my $stock_type_select = simple_selectbox_html(
  31     choices   => $stock_types,
  32     id        => "stock_type_select",
  33     selected => $vector_cvterm_id
  34 );
  35
  36
  37 </%perl>
  38
  39 <&| /page/info_section.mas, title => 'Search', collapsible=>1, collapsed=>0 &>
  40
  41 <div id="stock_search_form" class="well well-sm">
  42
  43   <div class="row">
  44     <div class="col-sm-11">
  45       <div class="form-group form-group-sm">
  46         <label class="col-sm-3 control-label">Keywords: </label>
  47         <div class="col-sm-5" >
  48           <div class="form-group form-group-sm">
  49             <div class="input-group">
  50                 <span class="input-group-btn">
  51                 <input class="form-control" name="any_name" id="any_name" value="" size="30" type="text" placeholder="Type search here..."/>
  52               </span>
  53             </div>
  54           </div>
  55         </div>
  56       </div>
  57       <center>
  58         <button class="btn btn-primary" id="submit_stock_search_all" />Search</button>
  59       </center>
  60     </div>
  61   </div>
  62   <br><br>
  63
  64   <&| /page/info_section.mas, title => 'Vector search', collapsible=>1, collapsed=>1 &>
  65
  66
  67   <div class="row">
  68     <div class="col-sm-11"><br>
  69       <div class="form-group form-group-sm">
  70         <div class="col-sm-4" >
  71           <div class="form-group form-group-sm">
  72             <label class="col-sm-1 control-label">Gene: </label><br>
  73             <div class="input-group">
  74               <span class="input-group-btn" width="30%">
  75                 <input class="form-control" name="any_name_gene" id="any_name_gene" value="" size="30" type="text" placeholder="Type search here..."/>
  76               </span>
  77             </div>
  78           </div>
  79         </div>
  80         <div class="col-sm-4" >
  81           <div class="form-group form-group-sm">
  82             <label class="col-sm-1 control-label">T-number: </label><br>
  83             <div class="input-group">
  84               <span class="input-group-btn" width="30%">
  85                 <input class="form-control" name="any_name_tnumber" id="any_name_tnumber" value="" size="30" type="text" placeholder="Type search here..."/>
  86               </span>
  87             </div>
  88           </div>
  89         </div>
  90       </div>
  91       <center><button class="btn btn-primary" id="submit_stock_search_simple" />Search</button>
  92       </center><br/><br/>
  93     </div>
  94   </div>
  95   </&>
  96
  97   <&| /page/info_section.mas, title => 'Advanced Search', collapsible=>1, collapsed=>1 &>
  98
  99   <hr>
 100   <div class="row">
 101     <div class="col-sm-11">
 102       <div class="form-group form-group-sm">
 103         <label class="col-sm-3 control-label">Search fields: </label>
 104         <div class="col-sm-5" >
 105           <div class="form-group">
 106             <div class="input-group">
 107               <!-- <span class="input-group-btn"> -->
 108                 <select class="form-control" id="editable_stockprop_search_term" name="editable_stockprop_search_term">
 109 %  foreach my $stockprop (@$editable_vector_props){
 110                   <option title="<% $stockprop %>" value="<% $stockprop %>" ><% $stockprop %></option>
 111 %  }
 112                 </select>
 113         <div class="col-sm-9" >
 114           <div class="form-group">
 115             <div class="input-group">
 116               <span class="input-group-btn">
 117                 <input type="text" class="form-control" name="editable_stockprop_search_inputs" id="field_input_id" data-property="field" placeholder="Type to Autocomplete"/>
 118               </span>
 119             </div>
 120           </div>
 121         </div>
 122         <center><button class="btn btn-primary" id="submit_stock_search" />Search</button></center> <br/><br/>
 123       </div>
 124           </div>
 125         </div>
 126       </div>
 127     </div>
 128   </div>
 129
 130   </&> <!-- closes advanced search -->
 131 </div>
 132 </&>
 133
 134 <br />
 135
 136 <&| /page/info_section.mas, title => 'Search Results', collapsible=>1, collapsed=>0 &>
 137
 138 <div class="well well-sm">
 139
 140   <div class="row">
 141     <div class="col-sm-11">
 142       <div class="form-group form-group-sm">
 143         <label class="col-sm-4 control-label">View Another Property: </label>
 144         <div class="col-sm-8" >
 145           <div class="form-group">
 146             <div class="input-group">
 147               <span class="input-group-btn">
 148                 <select class="form-control" id="editable_stockprop_view_column_term" name="editable_stockprop_view_column_term">
 149 %  foreach my $stockprop (sort { "\L$a" cmp "\L$b" } @$editable_vector_props){
 150                   <option title="<% $stockprop %>" value="<% $stockprop %>" ><% $stockprop %></option>
 151 %  }
 152                 </select>
 153               </span>
 154                 <span class="input-group-btn">
 155                   <button class="btn btn-primary btn-sm" id="editable_stockprop_view_column_add">Add</button>
 156                   <button class="btn btn-primary btn-sm" id="editable_stockprop_view_column_remove">Remove</button>
 157               </span>
 158             </div>
 159           </div>
 160         </div>
 161       </div>
 162     </div>
 163   </div>
 164
 165   <div class="panel panel-default">
 166       <div class="panel-body">
 167           <div id="stock_search_results_div" style="overflow:scroll" >
 168               <table id="stock_search_results" width="100%" class="table table-hover table-striped">
 169               <thead>
 170                 <tr>
 171                   <th>Vector Name</th>
 172                   <th>Stock Type</th>
 173                   <th>Organism</th>
 174                   <th>Synonyms</th>
 175                   <th>Submitters</th>
 176               </tr>
 177               </thead>
 178               </table>
 179           </div>
 180       </div>
 181   </div>
 182 </div>
 183 </&>
 184 </div>
 185
 186 <script>
 187
 188     var stock_table;
 189
 190     jQuery(document).ready(function () {
 191
 192         jQuery("#person").autocomplete({
 193             source: '<% $sp_person_autocomplete_uri %>'
 194         });
 195
 196         jQuery("#any_name").autocomplete({
 197             source: '/ajax/stock/stock_autocomplete?stock_type_id=' + '<% $vector_cvterm_id %>',
 198         });
 199         jQuery('#stock_type_select').change(function(){
 200             jQuery("#any_name").autocomplete({
 201                 source: '/ajax/stock/stock_autocomplete?stock_type_id=' + '<% $vector_cvterm_id %>',
 202             });
 203         });
 204
 205
 206         var editable_stockprops_search = {};
 207         var params = {};
 208         var matchtype = {};
 209
 210         var editable_stockprops_selected = function(){
 211             var editable_stockprops_search = {};
 212             if(jQuery('#field_input_id').val()){
 213                 editable_stockprops_search[jQuery('#editable_stockprop_search_term').val()] = {"matchtype": "contains"};
 214                 editable_stockprops_search[jQuery('#editable_stockprop_search_term').val()]["value"] = jQuery('#field_input_id').val();
 215             } else if(jQuery('#any_name').val()){
 216 %  foreach my $stockprop (@$editable_vector_props){
 217                 editable_stockprops_search['<% $stockprop %>'] = {"matchtype": "contains"};
 218                 editable_stockprops_search['<% $stockprop %>']["value"] = jQuery('#any_name').val();
 219 %  }
 220             }
 221             return editable_stockprops_search;
 222         };
 223
 224         //Adding stockprop columns to search result
 225         var stockprop_extra_columns_view = { };
 226         var stockprop_extra_columns_view_array = [ ];
 227
 228         jQuery('#editable_stockprop_view_column_add').click(function(){
 229             var selected_property = jQuery('#editable_stockprop_view_column_term').val();
 230             var editable_stockprops_search = editable_stockprops_search ? editable_stockprops_search : editable_stockprops_selected();
 231             if (!(selected_property in stockprop_extra_columns_view)){
 232                 stockprop_extra_columns_view[selected_property] = 1;
 233                 stockprop_extra_columns_view_array.push(selected_property);
 234
 235                 var table_header_html = '<table id="stock_search_results" class="table table-hover table-striped"><thead><tr><th>Vector Name</th><th>Stock Type</th><th>Organism</th><th>Synonyms</th><th>Submitters</th>';
 236                 for (var i=0; i<stockprop_extra_columns_view_array.length; i++){
 237                     table_header_html = table_header_html + '<th>' + stockprop_extra_columns_view_array[i] + '</th>';
 238                 }
 239                 table_header_html = table_header_html + '</tr></thead></table>';
 240                 jQuery('#stock_search_results_div').html(table_header_html);
 241             }
 242             stock_table.destroy();
 243             _load_stock_search_results('vector_construct', editable_stockprops_search, stockprop_extra_columns_view, stockprop_extra_columns_view_array);
 244         });
 245
 246         //Removing stockprop columns to search result
 247         jQuery('#editable_stockprop_view_column_remove').click(function(){
 248             var selected_property = jQuery('#editable_stockprop_view_column_term').val();
 249             var editable_stockprops_search = editable_stockprops_search ? editable_stockprops_search : editable_stockprops_selected();
 250
 251             if (selected_property in stockprop_extra_columns_view){
 252                 delete stockprop_extra_columns_view[selected_property];
 253
 254                 var index = stockprop_extra_columns_view_array.indexOf(selected_property);
 255                 stockprop_extra_columns_view_array.splice(index, 1);
 256
 257                 var table_header_html = '<table id="stock_search_results" class="table table-hover table-striped"><thead><tr><th>Vector Name</th><th>Stock Type</th><th>Organism</th><th>Synonyms</th><th>Submitters</th>';
 258                 for (var i=0; i<stockprop_extra_columns_view_array.length; i++){
 259                     table_header_html = table_header_html + '<th>' + stockprop_extra_columns_view_array[i] + '</th>';
 260                 }
 261                 table_header_html = table_header_html + '</tr></thead></table>';
 262                 jQuery('#stock_search_results_div').html(table_header_html);
 263             }
 264             stock_table.destroy();
 265             _load_stock_search_results('vector_construct', editable_stockprops_search, stockprop_extra_columns_view, stockprop_extra_columns_view_array);
 266         });
 267
 268         parseArgs(editable_stockprops_search);
 269         var search_vectorprop = 0;
 270         _load_stock_search_results('vector_construct', editable_stockprops_search, stockprop_extra_columns_view, stockprop_extra_columns_view_array);
 271
 272         //stockprop search
 273         jQuery('#submit_stock_search').click( function() {
 274             var editable_stockprops_search = editable_stockprops_selected();
 275             document.getElementById('any_name_tnumber').value= "";
 276             document.getElementById('any_name_gene').value= "";
 277             document.getElementById('any_name').value= "";
 278             search_vectorprop = 1;
 279
 280             _load_stock_search_results('vector_construct', editable_stockprops_search, stockprop_extra_columns_view, stockprop_extra_columns_view_array,'','',search_vectorprop);
 281         });
 282
 283         //gene and vector search
 284         jQuery('#submit_stock_search_simple').click( function() {
 285             var stock_type;
 286             var any_name;
 287             var gene_name;
 288             document.getElementById('field_input_id').value= "";
 289             document.getElementById('any_name').value= "";
 290             search_vectorprop = 0;
 291             editable_stockprops_search = {};
 292
 293             if(jQuery('#any_name_tnumber').val()){
 294                 stock_type = 'vector_construct';
 295                 any_name = jQuery('#any_name_tnumber').val();
 296             }
 297             if(jQuery('#any_name_gene').val()){
 298                 gene_name = jQuery('#any_name_gene').val();
 299                 editable_stockprops_search['Gene'] = {"matchtype": "contains"};
 300                 editable_stockprops_search['Gene']["value"] = gene_name;
 301                 search_vectorprop = 1;
 302             }
 303             if(!any_name && !gene_name){
 304                 alert("Type a valid value!",any_name);
 305             }
 306             _load_stock_search_results(stock_type, editable_stockprops_search, stockprop_extra_columns_view, stockprop_extra_columns_view_array,any_name,'and',search_vectorprop);
 307         });
 308
 309         //general search
 310         jQuery('#submit_stock_search_all').click( function() {
 311
 312             document.getElementById('field_input_id').value= "";
 313             document.getElementById('any_name_tnumber').value= "";
 314             document.getElementById('any_name_gene').value= "";
 315
 316             var editable_stockprops_search = editable_stockprops_selected();
 317             var stock_type = 'vector_construct';
 318             var any_name = jQuery('#any_name').val();
 319
 320             _load_stock_search_results(stock_type, editable_stockprops_search, stockprop_extra_columns_view, stockprop_extra_columns_view_array,any_name);
 321         });
 322
 323         jQuery('#stock_search_form').keypress( function( e ) {
 324             var code = e.keyCode || e.which;
 325             if( code == 13 ) {
 326                 jQuery('#submit_stock_search').click();
 327             }
 328         });
 329
 330     });
 331
 332     function parseArgs(editable_stockprops_search) {
 333         const params = new URLSearchParams(window.location.search);
 334         if ( params.has('any_name') ) {
 335             jQuery('#any_name').val(params.get('any_name'));
 336             jQuery('#stock_type_select').val(0);
 337         }
 338         if ( params.has('stock_type') ) {
 339             var type = params.get('stock_type');
 340             var value =  jQuery("#stock_type_select option[title="+ type +"]").val();
 341             jQuery('#stock_type_select').val(value);
 342         }
 343         if ( params.has('prop') & params.has('value') ) {
 344             editable_stockprops_search[params.get('prop')] = {"matchtype": "exactly"};
 345             editable_stockprops_search[params.get('prop')]["value"] = params.get('value');
 346         }
 347     }
 348
 349     function _load_stock_search_results(stock_type, editable_stockprops_search, stockprop_extra_columns_view, stockprop_extra_columns_view_array, any_name, operator, search_vectorprop){
 350         console.log("Making AJAX request with editable stockprop "+JSON.stringify(editable_stockprops_search));
 351         stock_table = jQuery('#stock_search_results').DataTable({
 352             'destroy' : true,
 353             'searching' : false,
 354             'ordering'  : false,
 355             'processing': true,
 356             'serverSide': true,
 357             'lengthMenu': [10,20,50,100,1000,5000],
 358             'ajax': { 'url':  '/ajax/search/vectors',
 359                 'data': function(d) {
 360                     d.any_name  = any_name; //jQuery('#any_name').val();
 361                     d.any_name_matchtype = '';//jQuery('#any_name_matchtype').val();
 362                     d.operator     = operator;
 363                     d.stock_type   = stock_type;
 364                     d.person       = jQuery('#person').val();
 365                     d.project      = jQuery('#project').val();
 366                     d.location     = jQuery('#location').val();
 367                     d.year         = jQuery('#year').val();
 368                     d.breeding_program = jQuery('#breeding_program').val();
 369                     d.editable_stockprop_values = JSON.stringify(editable_stockprops_search);
 370                     d.extra_stockprop_columns_view = JSON.stringify(stockprop_extra_columns_view);
 371                     d.stockprop_extra_columns_view_array = JSON.stringify(stockprop_extra_columns_view_array);
 372                     d.search_vectorprop = search_vectorprop;
 373                 }
 374             }
 375         });
 376     }
 377
 378 </script>