Merge pull request #5230 from solgenomics/topic/open_pollinated
[sgn.git] / mason / tools / sequence_metadata / quick_query_sequence_metadata.mas
blob0707df28a3f5ce5be7d4b8b38b66fb4fa1bbd227
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     }
22 -->
24 <%args>
25     $params => undef
26 </%args>
28 <%init>
29     if (!defined $params ) {
30         print "<p class='args-error'><strong>ERROR: </strong>missing component arguments!</p>";
31     }
32 </%init>
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 % }
63 <script type="text/javascript">
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) {
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;
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     });
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();
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);
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);
179 </script>
183 <!-- Init each table and perform the query -->
184 % foreach my $id (keys %$params) {
185     <script type="text/javascript">
186         jQuery(document).ready(function() {
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             });
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 % }
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>