mason/search/traits.mas

   1
   2 <%args>
   3 </%args>
   4
   5 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables', 'jquery.dataTables-select-min' ] &>
   6 <& /util/import_css.mas, paths => ['/documents/inc/datatables/jquery.dataTables.css', '/documents/inc/datatables/custom_datatable_select_styles.css'] &>
   7
   8 <& /page/page_title.mas, title => "Trait Search" &>
   9
  10     <&| /page/info_section.mas, title => 'Search', collapsible=>1, collapsed=>0 &>
  11         <div id="trait_search_form" class="form-horizontal well">
  12             <div class="form-group form-group-sm">
  13                 <label class="col-sm-3 control-label">Select Ontology Name(s): </label>
  14                 <div class="col-sm-9" >
  15                     <div id="trait_search_ontology_select"></div>
  16                 </div>
  17             </div>
  18             <div class="form-group form-group-sm">
  19                 <label class="col-sm-3 control-label">Search Trait Name: </label>
  20                 <div class="col-sm-9" >
  21                     <input type="text" class="form-control" id="trait_search_name" placeholder="Search any trait name or piece of name"/>
  22                 </div>
  23             </div>
  24             <div class="form-group form-group-sm">
  25                 <label class="col-sm-3 control-label">Search Definition: </label>
  26                 <div class="col-sm-9" >
  27                     <input type="text" class="form-control" id="trait_search_definition" placeholder="Search any word or piece of definition"/>
  28                 </div>
  29             </div>
  30             <div class="form-group form-group-sm">
  31                 <label class="col-sm-3 control-label">Subset Traits: </label>
  32                 <div class="col-sm-9" >
  33                     <div id="trait_search_list_select">
  34                         [LOADING...]
  35                     </div>
  36                 </div>
  37             </div>
  38         </div>
  39
  40         <center>
  41             <button class="btn btn-primary" id="submit_trait_search" />Search</button>
  42         </center>
  43     </&>
  44
  45     <&| /page/info_section.mas, title => 'Results', collapsible=>1, collapsed=>0 &>
  46
  47         <div class="well well-sm">
  48             <div class="panel panel-default">
  49                 <div class="panel-body">
  50
  51                     <table id="trait_search_results" width="100%" class="table table-hover table-striped">
  52                     <thead>
  53                       <tr>
  54                         <th>Select</th>
  55                         <th>Copy Name|ID</th>
  56                         <th>Trait ID</th>
  57                         <th>Trait Name</th>
  58                         <th>Definition</th>
  59                         <th>Trait&nbsp;Usage</th>
  60                       </tr>
  61                     </thead>
  62                     </table>
  63
  64                     <button type="button" class="selectAll-dt">Select All</button>
  65                     <button type="button" class="deselectAll-dt">Deselect All</button>
  66
  67                 </div>
  68             </div>
  69
  70             <div class="panel panel-default">
  71                 <div class="panel-body">
  72
  73                     <&| /page/info_section.mas, title => 'Copy Selected Results to a List', collapsible=>1, collapsed=>0, subtitle=>'<i>Copy the trait names currently selected in the search results table to a new or exisiting list</i>'&>
  74                     <br>
  75                     <p><em><span id="trait_result_count">0</span> trait(s) selected.</em></p>
  76                     <div style="text-align:right" id="traits_to_list_menu"></div>
  77                     <div id="trait_result_names" style="display: none;"></div>
  78                     </&>
  79
  80                 </div>
  81             </div>
  82         </div>
  83     </&>
  84
  85 <& /breeders_toolbox/add_new_trait_dialogs.mas &>
  86
  87     <&| /page/info_section.mas, title => 'Help', collapsible=>1, collapsed=>0 &>
  88         <div class="well well-sm">
  89             <div class="panel panel-default">
  90                 <div class="panel-body">
  91                     <h2>Is the trait you are looking for not here?</h2>
  92
  93 %  if ($c->config->{allow_observation_variable_submission_interface}) {
  94                         <button class="btn btn-primary" name="add_new_observation_variable_button">Add A New Observation Variable To the Database</button>
  95 %  } else {
  96                         <p>Please submit your new trait <a href="http://submit.rtbbase.org/">using the trait submission form</a>.</p>
  97                         <p>To speed up addition of your trait into the database please contact us using the <a href="/contact/form">Contact Form</a>.</p>
  98 %  }
  99                 </div>
 100             </div>
 101         </div>
 102     </&>
 103
 104 </div>
 105
 106 <script>
 107
 108 jQuery(document).ready(function () {
 109
 110     get_select_box('trait_variable_ontologies', 'trait_search_ontology_select', { 'name' : 'trait_search_ontology_select_id', 'cvprop_type_name':JSON.stringify(['trait_ontology','composed_trait_ontology']) });
 111
 112     jQuery('[data-toggle="tooltip"]').tooltip();
 113
 114     var lo = new CXGN.List();
 115     jQuery('#trait_search_list_select').html(lo.listSelect('trait_search_list_select', [ 'traits' ], 'Leave blank to see all traits', undefined, undefined));
 116
 117     jQuery(document).on('change', '#trait_search_list_select', function(){
 118         _draw_trait_search_result_table();
 119     });
 120
 121     jQuery('#submit_trait_search').click(function(){
 122         _draw_trait_search_result_table();
 123     });
 124
 125     jQuery('#trait_search_form').keypress(function(e){
 126         var code = e.keyCode || e.which;
 127         if( code == 13 ) {
 128              jQuery('#submit_trait_search').click();
 129         }
 130     });
 131
 132     parseArgs();
 133
 134     var trait_table;
 135     _draw_trait_search_result_table();
 136
 137     function _draw_trait_search_result_table (){
 138         var selectedontologies = [];
 139         jQuery(document).find('input[name="trait_search_ontology_select_id"]:checked').each(function (i, ob) {
 140             selectedontologies.push(jQuery(ob).val());
 141         });
 142
 143         trait_table = jQuery('#trait_search_results').DataTable({
 144             'destroy': true,
 145             'searching' : false,
 146             'ordering'  : false,
 147             'processing': true,
 148             'serverSide': true,
 149             'lengthMenu': [10,20,50],
 150             'columnDefs': [ {
 151                 'orderable': false,
 152                 'className': 'select-checkbox',
 153                 'targets':   0
 154             } ],
 155             'select': {
 156                 'style':    'multi',
 157                 'selector': 'td:not(:nth-child(2))',
 158             },
 159             'ajax': {
 160                 'url': '/ajax/search/traits',
 161                 'data': function(d) {
 162                     d.trait_search_list_id  = jQuery('#trait_search_list_select_list_select').val();
 163                     d.trait_any_name  = jQuery('#trait_search_name').val();
 164                     d.trait_definition  = jQuery('#trait_search_definition').val();
 165                     d.ontology_db_id = selectedontologies;
 166                 }
 167             },
 168             "order": [[ 1, "asc" ]]
 169         });
 170     }
 171
 172    jQuery('.selectAll-dt').click(function(){
 173      trait_table.rows().select();
 174      return false;
 175    });
 176    jQuery('.deselectAll-dt').click(function(){
 177      trait_table.rows().deselect();
 178      return false;
 179    });
 180    var selection_changed = function () {
 181      var selected_rows = trait_table.rows({'selected':true});
 182      jQuery("#trait_result_count").text(selected_rows.count());
 183      //console.log(selected_rows.data());
 184
 185      var name_links = selected_rows.data().map(function(row){
 186          return [row[6], row[7]];
 187          trait_table.rows().deselect();
 188      });
 189
 190      var names = [];
 191      for (var i = 0; i < name_links.length; i++) { //extract and combine trait name and id from anchor tags
 192        names.push(name_links[i][0] + '|' + name_links[i][1] + '\n');
 193      }
 194
 195      jQuery('#trait_result_names').html(names);
 196      addToListMenu('traits_to_list_menu', 'trait_result_names', {
 197        listType: 'traits'
 198      });
 199    };
 200    trait_table.on( 'deselect', selection_changed);
 201    trait_table.on( 'select', selection_changed);
 202
 203 });
 204
 205
 206 /**
 207  * Parse query params sent to the page
 208  * - name = trait name to search on
 209  */
 210 function parseArgs() {
 211     const params = new URLSearchParams(window.location.search);
 212     if ( params.has('name') ) {
 213         jQuery("#trait_search_name").val(params.get('name'));
 214     }
 215 }
 216
 217 /**
 218  * Copy the specifed trait information to the user's clipboard
 219  * - name = trait name
 220  * - accession = trait accession term
 221  * - id = trait cvterm id
 222  */
 223 async function copy(name, accession, id) {
 224     try {
 225         await navigator.clipboard.writeText([name, accession].join('|'));
 226         jQuery(".btn-" + id).removeClass("btn-info").addClass("btn-success").html("<span class='glyphicon glyphicon-ok'></span>");
 227     }
 228     catch (err) {
 229         jQuery(".btn-" + id).removeClass("btn-info").addClass("btn-danger").html("<span class='glyphicon glyphicon-remove'></span>");
 230     }
 231     finally {
 232         setTimeout(() => {
 233             jQuery(".btn-" + id).removeClass("btn-success btn-danger").addClass("btn-info").html("<span class='glyphicon glyphicon-copy'></span>");
 234         }, 2500)
 235     }
 236     return false;
 237 }
 238
 239 </script>
 240
 241
 242 <style type="text/css">
 243     #trait_search_results td:nth-child(2) {
 244         vertical-align: middle;
 245     }
 246 </style>