mason/tools/sequence_metadata/quick_query_sequence_metadata.mas

   1 <!--
   2 ==== Sequence Metadata Quick Query Component ====
   3 This mason component can be used to embed one or more tables of stored sequence metadata features
   4 over a relatively small sequence range.  The `params` argument to the component takes a hashref
   5 containing the sequence metadata query parameters in the following format:
   6 my %params = (
   7     'table1' => {
   8         'feature' => '1A',
   9         'species' => 'Triticum aestivum',
  10         'reference_genome' => 'RefSeq_v1',
  11         'start' => 1176337,
  12         'end' => 1176337
  13     },
  14     'table2' => {
  15         'feature' => '1A',
  16         'species' => 'Triticum durum',
  17         'reference_genome' => 'Triticum durum',
  18         'start' => 1176337,
  19         'end' => 1176337
  20     }
  21 );
  22 -->
  23
  24 <%args>
  25     $params => undef
  26 </%args>
  27
  28 <%init>
  29     if (!defined $params ) {
  30         print "<p class='args-error'><strong>ERROR: </strong>missing component arguments!</p>";
  31     }
  32 </%init>
  33
  34
  35 <!-- Results Table(s) -->
  36 % foreach my $id (keys %$params) {
  37     <br />
  38     <div class="quick-query-table-container">
  39         <table class="table quick-query-table">
  40             <thead><tr>
  41                 <th>Reference Genome</th>
  42                 <th>Species</th>
  43                 <th>Feature</th>
  44                 <th>Start</th>
  45                 <th>End</th>
  46                 <th></th>
  47             </tr></thead>
  48             <tr>
  49                 <td><% $params->{$id}->{'reference_genome'} %></td>
  50                 <td><% $params->{$id}->{'species'} %></td>
  51                 <td><% $params->{$id}->{'feature'} %></td>
  52                 <td><% $params->{$id}->{'start'} %></td>
  53                 <td><% $params->{$id}->{'end'} %></td>
  54                 <td><a href="/search/sequence_metadata?reference_genome=<% $params->{$id}->{'reference_genome'} %>&feature=<% $params->{$id}->{'feature'} %>&start=<% $params->{$id}->{'start'} %>&end=<% $params->{$id}->{'end'} %>">Modify&nbsp;Query</a></td>
  55             </tr>
  56         </table>
  57     </div>
  58     <table id="<% $id %>" class="display"></table>
  59     <br />
  60 % }
  61
  62
  63 <script type="text/javascript">
  64
  65 /**
  66  * Perform the query with the provided parameters
  67  * - call display_results() with the query results, if successful
  68  * @param {string} id Table ID
  69  * @param {string} species Species Name
  70  * @param {string} reference Reference Genome Name
  71  * @param {string} feature Feature/Chromosome Name
  72  * @param {int} start Start Position
  73  * @param {int} end End Position
  74  */
  75 function quick_query(id, species, reference, feature, start, end) {
  76
  77     // Build Query URL
  78     let params = {
  79         feature_name: feature,
  80         species_name: species,
  81         reference_genome: reference,
  82         start: start,
  83         end: end,
  84         format: 'JSON'
  85     }
  86     let q = new URLSearchParams(params).toString();
  87     let url = '/ajax/sequence_metadata/query?' + q;
  88
  89     // Query Database
  90     jQuery.ajax({
  91         type: 'GET',
  92         url: url,
  93         dataType: 'json',
  94         success: function(data) {
  95             display_results(id, data);
  96         },
  97         error: function() {
  98             console.log("ERROR: Could not query sequence metadata!");
  99         }
 100     });
 101
 102 }
 103
 104 /**
 105  * Display the query results in the specified table
 106  * @param {string} id Table ID
 107  * @param {Object} data Query Results
 108  */
 109 function display_results(id, data) {
 110     let dt = jQuery('#' + id).DataTable();
 111     dt.clear();
 112     if ( data && data.error ) {
 113         console.log("ERROR: Could not query sequence metadata")
 114         console.log(data.error);
 115     }
 116     else if ( data && data.results && data.results.length > 0) {
 117         dt.rows.add(data.results);
 118     }
 119     else {
 120         console.log("No sequence metadata results found");
 121     }
 122     dt.draw();
 123 }
 124
 125 /**
 126  * Render the Attributes column
 127  * @param data The column's data for the current row
 128  * @param {String} type The display type
 129  * @param {Object} row The current row's data
 130  * @returns {String} The text/html to display in the table
 131  */
 132 function renderAttributesColumn(data, type, row) {
 133     let rtn = [];
 134     let sep = type === 'export' ? ';' : '<br />';
 135     if ( data ) {
 136         var keys = Object.keys(data);
 137         keys.sort();
 138         for ( var i=0; i<keys.length; ++i ) {
 139             let key = keys[i];
 140             let value = data[key];
 141             if ( type === 'export' ) {
 142                 rtn.push(key + '=' + value);
 143             }
 144             else {
 145                 rtn.push("<strong>" + key + ":</strong>&nbsp;" + value);
 146             }
 147         }
 148     }
 149     return rtn.join(sep);
 150 }
 151
 152 /**
 153  * Render the Links column
 154  * @param data The column's data for the current row
 155  * @param {String} type The display type
 156  * @param {Object} row The current row's data
 157  * @returns {String} The text/html to display in the table
 158  */
 159 function renderLinksColumn(data, type, row) {
 160     let rtn = [];
 161     let sep = type === 'export' ? ';' : '<br /><br />';
 162     if ( data ) {
 163         var titles = Object.keys(data);
 164         titles.sort();
 165         for ( var i=0; i<titles.length; i++ ){
 166             let title = titles[i];
 167             let url = data[title];
 168             if ( type === 'export' ) {
 169                 rtn.push(title + '=' + url);
 170             }
 171             else {
 172                 rtn.push("<a href='" + url + "'>" + title + "</a>");
 173             }
 174         }
 175     }
 176     return rtn.join(sep);
 177 }
 178
 179 </script>
 180
 181
 182
 183 <!-- Init each table and perform the query -->
 184 % foreach my $id (keys %$params) {
 185     <script type="text/javascript">
 186         jQuery(document).ready(function() {
 187
 188             // Init DataTable
 189             jQuery("#<% $id %>").DataTable({
 190                 dom: 'rtip',
 191                 autoWidth: false,
 192                 data: [],
 193                 columns: [
 194                     { title: "Protocol", data: "nd_protocol_name" },
 195                     { title: "Feature", data: "feature_name" },
 196                     { title: "Start", data: "start" },
 197                     { title: "End", data: "end" },
 198                     { title: "Score", data: "score" },
 199                     { title: "Attributes", data: "attributes", render: renderAttributesColumn },
 200                     { title: "Links", data: "links", render: renderLinksColumn }
 201                 ],
 202                 order: [[ 2, "asc" ]]
 203             });
 204
 205             // Perform Query
 206             quick_query(
 207                 "<% $id %>",
 208                 "<% $params->{$id}->{'species'} %>",
 209                 "<% $params->{$id}->{'reference_genome'} %>",
 210                 "<% $params->{$id}->{'feature'} %>",
 211                 "<% $params->{$id}->{'start'} %>",
 212                 "<% $params->{$id}->{'end'} %>"
 213             );
 214         });
 215     </script>
 216 % }
 217
 218
 219
 220
 221 <style>
 222     .args-error {
 223         width: 100%;
 224         background-color: #f8d7da;
 225         color: #721c24;
 226         padding: 15px;
 227         border-radius: 5px;
 228         border: 1px solid;
 229     }
 230     .quick-query-table-container {
 231         background: #f1f1f1;
 232         border: 1px solid #ddd;
 233         border-radius: 5px;
 234         margin-bottom: 20px;
 235     }
 236     .quick-query-table {
 237         margin: 0;
 238     }
 239 </style>