| blob | 2f97aa9d372f3c714d8d8dcfd58db4a9bf217502 |
1 <%doc>
3 =head1 NAME
5 /breeders_toolbox/markers/manage_markers.mas - a mason component to display markerset info, add new markersets and add filtering parameters in markersets
7 =head1 AUTHOR
9 Titima Tantikanjana <tt15@cornell.edu>
11 =cut
13 </%doc>
15 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables','CXGN.BreedersToolbox.MarkerSet'] &>
17 <& /page/page_title.mas, title=>'Manage Markersets' &>
19 <& /page/detail_page_2_col_section.mas, info_section_collapsed => 0, info_section_title => "<h4 style='display:inline'>Your Markersets</h4>", info_section_subtitle => 'View your markerset info', buttons_html => '<button class="btn btn-sm btn-primary" style="margin:3px" id="add_new_markerset_button">Add New Markerset</button><button class="btn btn-sm btn-primary" style="margin:3px" id="add_marker_dosage_button">Add Markers to Markerset</button><button class="btn btn-default" style="margin:3px" data-toggle="modal" data-target="#markerset_usage_modal">Usage Help <span class="glyphicon glyphicon-question-sign"></span></button>', icon_class => "glyphicon glyphicon-list-alt", info_section_id => "marker_set_summary_section" &>
21 <& /page/detail_page_3_col_section.mas, icon_class => "glyphicon glyphicon-search", title => "Using markerset to search for accessions with specific genotype.", button_id => "accession_search_link" &>
24 <div class="modal fade" id="add_markerset_dialog" name="add_markerset_dialog" tabindex="-1" role="dialog" aria-labelledby="addMarkerSetDialog">
25 <div class="modal-dialog modal-lg" role="document">
26 <div class="modal-content">
27 <div class="modal-header">
28 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
29 <h4 class="modal-title" id="addMarkerSetDialog">Add New Markerset</h4>
30 </div>
31 <div class="modal-body">
32 <div class="container-fluid">
33 <div class="row">
34 <div class="col-sm-1">
35 </div>
36 <div class="col-sm-12 well">
37 <div class="row">
38 <div class="col-sm-11">
39 <div class="form-horizontal">
40 <div class="form-group">
41 <label class="control-label col-sm-4">Markerset Name:</label>
42 <div class="col-sm-8" >
43 <div class="input-group">
44 <input type="text" class="form-control" id="new_marker_set" placeholder="Enter markerset name">
45 </div>
46 </div>
47 </div>
48 <div class="form-group">
49 <label class="control-label col-sm-4">Genotyping protocol:</label>
50 <div class="col-sm-8">
51 <div class="input-group">
52 <select class="form-control" id="selected_protocol">
53 </select>
54 </div>
55 </div>
56 </div>
57 <div class="form-group">
58 <label class="control-label col-sm-4">Data type:</label>
59 <div class="col-sm-8">
60 <div class="input-group">
61 <select class="form-control" id="genotyping_data_type">
62 <option value="">Select genotyping data type</option>
63 <option value="SNP">SNP</option>
64 <option value="Dosage">Dosage</option>
65 <!-- option value="Download">Download</option-->
66 </select>
67 </div>
68 </div>
69 </div>
70 <div class="form-group">
71 <label class="control-label col-sm-4">Description:</label>
72 <div class="col-sm-8" >
73 <div class="input-group">
74 <input type="text" class="form-control" id="marker_set_desc" placeholder="Enter description">
75 </div>
76 </div>
77 </div>
78 </div>
79 </div>
80 </div>
81 </div>
82 </div>
83 </div>
84 </div>
85 <div class="modal-footer">
86 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
87 <button type="button" class="btn btn-primary" name="save_marker_set" id="save_marker_set">Add Markerset</button>
88 </div>
89 </div>
90 </div>
91 </div>
93 <div class="modal fade" id="add_marker_dosage_dialog" name="add_marker_dosage_dialog" tabindex="-1" role="dialog" aria-labelledby="addMarkerDosageDialog">
94 <div class="modal-dialog modal-lg" role="document">
95 <div class="modal-content">
96 <div class="modal-header">
97 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
98 <h4 class="modal-title" id="addMarkerDosageDialog">Add Markers to Markerset</h4>
99 </div>
100 <div class="modal-body">
101 <div class="container-fluid">
102 <div class="row">
103 <div class="col-sm-1">
104 </div>
105 <div class="col-sm-12 well">
106 <div class="row">
107 <div class="col-sm-11">
108 <div class="form-horizontal">
109 <div class="form-group">
110 <label class="control-label col-sm-4">Markerset Name:</label>
111 <div class="col-sm-8">
112 <div class="input-group">
113 <select class="form-control" id="selected_marker_set1">
114 </select>
115 </div>
116 </div>
117 </div>
118 <div id = "markerset_download_section" style="display:none">
119 <div class="form-group">
120 <label class="control-label col-sm-4">Marker Name(s):</label>
121 <div class="col-sm-8">
122 <textarea class="form-control" id="marker_name_download" placeholder="To add more than one marker, separate marker names using a new line."></textarea>
123 </div>
124 </div>
125 </div>
126 <div id = "markerset_dosage_section" style="display:none">
127 <div class="form-group">
128 <label class="control-label col-sm-4">Marker Name:</label>
129 <div class="col-sm-8">
130 <div class="input-group">
131 <input type="text" class="form-control" id="marker_name_dosage" placeholder="Enter marker name">
132 </div>
133 </div>
134 </div>
135 <div class="form-group">
136 <label class="control-label col-sm-4">Allele Dosage:</label>
137 <div class="col-sm-8" >
138 <div class="input-group">
139 <select class="form-control" id="allele_dosage">
140 <option value="">Select Allele Dosage</option>
141 <option value="0">0</option>
142 <option value="1">1</option>
143 <option value="2">2</option>
144 </select>
145 </div>
146 </div>
147 </div>
148 </div>
149 <div id = "markerset_snp_section" style="display:none">
150 <div class="form-group">
151 <label class="control-label col-sm-4">Marker Name:</label>
152 <div class="col-sm-8">
153 <div class="input-group">
154 <input type="text" class="form-control" id="marker_name_snp" placeholder="Enter marker name">
155 </div>
156 </div>
157 </div>
158 <div class="form-group">
159 <label class="control-label col-sm-4">Specify Alleles:</label>
160 <div class="col-sm-4" >
161 <div class="input-group">
162 <select class="form-control" id="allele_1">
163 <option value="">Select Allele 1</option>
164 <option value="A">A</option>
165 <option value="C">C</option>
166 <option value="G">G</option>
167 <option value="T">T</option>
168 </select>
169 <select class="form-control" id="allele_2">
170 <option value="">Select Allele 2</option>
171 <option value="A">A</option>
172 <option value="C">C</option>
173 <option value="G">G</option>
174 <option value="T">T</option>
175 </select>
176 </div>
177 </div>
178 </div>
179 </div>
180 </div>
181 </div>
182 </div>
183 </div>
184 </div>
185 </div>
186 </div>
187 <div class="modal-footer">
188 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
189 <button type="button" class="btn btn-primary" name="add_marker" id="add_marker">Add Marker</button>
190 </div>
191 </div>
192 </div>
193 </div>
194 <!--
195 <div class="modal fade" id="add_vcf_parameters_dialog" name="add_vcf_parameters_dialog" tabindex="-1" role="dialog" aria-labelledby="addVcfParametersDialog">
196 <div class="modal-dialog modal-lg" role="document">
197 <div class="modal-content">
198 <div class="modal-header">
199 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
200 <h4 class="modal-title" id="addVcfParametersDialog">Add VCF Parameters in Markerset</h4>
201 </div>
202 <div class="modal-body">
203 <div class="container-fluid">
204 <div class="row">
205 <div class="col-sm-1">
206 </div>
207 <div class="col-sm-12 well">
208 <div class="row">
209 <div class="col-sm-11">
210 <div class="form-horizontal">
211 <div class="form-group">
212 <label class="control-label col-sm-4">Markerset Name:</label>
213 <div class="col-sm-8">
214 <div class="input-group">
215 <select class="form-control" id="selected_marker_set2">
216 </select>
217 </div>
218 </div>
219 </div>
220 <div class="form-group">
221 <label class="control-label col-sm-4">Chromosome:</label>
222 <div class="col-sm-8">
223 <div class="input-group">
224 <input type="text" class="form-control" id="chromosome_number" placeholder="Enter chromosome no.">
225 </div>
226 </div>
227 </div>
228 <div class="form-group">
229 <label class="control-label col-sm-4">Start Position:</label>
230 <div class="col-sm-8">
231 <div class="input-group">
232 <input type="text" class="form-control" id="start_position" placeholder="Enter an integer value">
233 </div>
234 </div>
235 </div>
236 <div class="form-group">
237 <label class="control-label col-sm-4">End Position:</label>
238 <div class="col-sm-8">
239 <div class="input-group">
240 <input type="text" class="form-control" id="end_position" placeholder="Enter an integer value">
241 </div>
242 </div>
243 </div>
244 <div class="form-group">
245 <label class="control-label col-sm-4">Marker Name:</label>
246 <div class="col-sm-8">
247 <div class="input-group">
248 <input type="text" class="form-control" id="marker_name2" placeholder="Enter marker name">
249 </div>
250 </div>
251 </div>
252 <div class="form-group">
253 <label class="control-label col-sm-4">SNP alleles:</label>
254 <div class="col-sm-8" >
255 <div class="input-group">
256 <select class="form-control" id="snp_allele">
257 <option value="">Select SNP Alleles</option>
258 <option value="AA">AA</option>
259 <option value="TT">TT</option>
260 <option value="GG">GG</option>
261 <option value="CC">CC</option>
262 <option value="AT">AT</option>
263 <option value="AG">AG</option>
264 <option value="AC">AC</option>
265 <option value="TG">TG</option>
266 <option value="TC">TC</option>
267 <option value="GC">GC</option>
268 </select>
269 </div>
270 </div>
271 </div>
272 <div class="form-group">
273 <label class="control-label col-sm-4">Quality (greater than):</label>
274 <div class="col-sm-8">
275 <div class="input-group">
276 <input type="text" class="form-control" id="quality" placeholder="Enter an integer value">
277 </div>
278 </div>
279 </div>
280 <div class="form-group">
281 <label class="control-label col-sm-4">FILTER:</label>
282 <div class="col-sm-8" >
283 <div class="input-group">
284 <select class="form-control" id="filter_status">
285 <option value="">Select filter status</option>
286 <option value="PASS">PASS</option>
287 </select>
288 </div>
289 </div>
290 </div>
291 </div>
292 </div>
293 </div>
294 </div>
295 </div>
296 </div>
297 </div>
298 <div class="modal-footer">
299 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
300 <button type="button" class="btn btn-primary" name="add_parameters" id="add_parameters">Add Filtering Parameters</button>
301 </div>
302 </div>
303 </div>
304 </div>
305 -->
307 <div class="modal fade" id="markerset_detail_dialog" name="markerset_detail_dialog" tabindex="-1" role="dialog" aria-labelledby="markersetDetailDialog">
308 <div class="modal-dialog modal-lg" role="document">
309 <div class="modal-content">
310 <div class="modal-header">
311 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
312 <h4 class="modal-title" id="markersetDetailDialog">Markerset detail</h4>
313 </div>
314 <div class="modal-body">
315 <div class="container-fluid">
316 <div class="row">
317 <div class="col-sm-12">
318 <table id="markerset_detail_table" width="100%" class="table table-hover table-striped">
319 </table>
320 </div>
321 </div>
322 </div>
323 </div>
324 <div class="modal-footer">
325 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
326 </div>
327 </div>
328 </div>
329 </div>
331 <div class="modal fade" id="markerset_usage_modal" name="markerset_usage_modal" tabindex="-1" role="dialog" aria-labelledby="UsageMarkersetDialog">
332 <div class="modal-dialog modal-lg " role="document">
333 <div class="modal-content">
334 <div class="modal-header" style="text-align: center">
335 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
336 <h4 class="modal-title" id="UsageMarkersetDialog">How to Create and Use Markersets</h4>
337 </div>
338 <div class="modal-body">
339 <div class="container-fluid">
341 <h4>
342 Background:
343 </h4>
344 <p>Markersets can be used to <b>Search for accessions</b> containing the specified genotypes.<br>
345 Markersets can also be used in the <b>Search Wizard</b> to filter the results of genotype downloads.</p>
346 <h4>
347 Instructions:
348 </h4>
349 <ol><li><b>Create a list</b> of accessions from a genotype protocol. This is a population that you will be searching after you have defined the markerset. The easiest way of creating the accession list is using the “Search Wizard”. Select a genotype protocol, select a genotype project, select an accession, then in the section “Create New List” type in a name for the list and select "Create List".
350 <li>Return to the “Manage Markersets” screen. Select <b>Add New Markerset</b>. Type in a name, description, select Data type SNP or Dosage, and select the genotype protocol that you used in step 1. Then select “Add Markerset”.
351 <li>Return to the “Manage Markersets” screen. Select <b>Add Markers to Markerset</b>. Select the markerset that was just created. Then add the marker name and allele values that you are searching for. The easiest way of getting the name and allele values is to use the “Search Wizard” and download the genotype data from step 1. Note that you should not use markers that have missing genotype data.
352 <li>From the “Manage Markersets” screen find “<b>Search for accessions</b> with specific genotype” and select “GO”. In the “Select a list of accessions” select the list created in step 1. Then find “Select a set of markers” and select the markerset created in 2. Then select “Search Accessions”. The list of accessions will appear in the “Search Results” at the bottom of the screen.
353 </ol>
354 </div>
355 </div>
356 </div>
357 </div>
358 </div>
360 <script>
362 jQuery(document).ready(function(){
364 jQuery("#add_new_markerset_button").click(function(){
365 jQuery("#add_markerset_dialog").modal("show");
366 });
368 jQuery("#add_marker_dosage_button").click(function(){
369 jQuery("#add_marker_dosage_dialog").modal("show");
370 });
372 jQuery('#accession_search_link').click(function () {
373 location.href = '/search/stocks_using_genotypes';
374 });
376 });
378 </script>