Merge pull request #5230 from solgenomics/topic/open_pollinated
[sgn.git] / mason / tools / expression / input.mas
blob39423a6e9ef1eea9656c3bd5cbbee4eab9570132
2 <!-- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
3 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> -->
5 <!-- javascript-->
6 <!-- <script src="/js/tools/vigs.js" type="text/javascript"></script> -->
7 <!-- <script src="/js/jquery/iframe-post-form.js" type="text/javascript"></script> -->
9 <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
11 <script type="text/javascript" src="/js/jqplot/jquery.jqplot.js"></script>
12 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
13 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
14 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
15 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
16 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.barRenderer.js"></script>
17 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
18 <script type="text/javascript" src="/js/jqplot/plugins/jqplot.highlighter.min.js"></script>
20 <& /util/import_css.mas, paths => ['/js/jqplot/jquery.jqplot.css','/js/jqplot/jquery.jqplot.min.css'] &>
23 <& /util/import_javascript.mas, classes => ['Text.Markup', 'sprintf', 'jquery', 'jqueryui', 'CXGN.List'] &>
25 <& /page/page_title.mas, title=>"Expression Tool" &>
29 <&| /page/info_section.mas, id=>"expr_input" , title=>"Run Expression Tool", collapsible => 1, collapsed => 0  &>
30 <center>
32 <div id="status_wheel" style="display:none"><img src="/static/documents/img/wheel.gif" /></div>
33 <br />
35 <span title="query gene">Select a gene:</span> 
36 <input class="input" id="gene" type="input" value="Solyc04g014530.1" name="input_gene" size="15" />&nbsp; &nbsp; &nbsp;
38 <button class="input" id="run_tool" value="Run Expression Tool">Get Expression</button>
40 <br />
41 <br />
43 </center>
46 <&| /page/info_section.mas, id=>"expression_usage" , title=>"Usage", collapsible => 1, collapsed => 0, is_subsection=>"1"  &>
47   <div id="usage_view">
48     <p>
49         1. Select a <b>Gene name</b> an push the 'Get Expression' button to see its expression in the different tissues of the plant<br />
50      </p>
51   </div>
52 </&>
54 </&>
57 <!-- ##################################################################################### -->
58 <!-- OUTPUT VIEW -->
59 <!-- ##################################################################################### -->
62 <&| /page/info_section.mas, title=>"Results", collapsible => 1, collapsed => 0  &>
64 <div id="hide_results" style="display:none;">
66 <&| /page/info_section.mas, title=>"Experiment Info", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
67     <p id="exp_title"></p>
68     <p id="exp_dbxref"></p>
69     <p id="exp_pub"></p>
70 </&>
73 <&| /page/info_section.mas, title=>"Experiment Map", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
74 <div id="my_stage"></div>
75 </&>
77 <&| /page/info_section.mas, title=>"Interactive Control Panel", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
78     Choose a experiment:&nbsp; &nbsp; 
79         <select id="exp_list">
80                 <option>BTI Slyc RNA-Seq</option>
81                 <option>Other experiment</option>
82         </select>
83     <br/>
84 </&>
87 <&| /page/info_section.mas, title=>"Bar Graph", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
88         <!-- <div id="chart_margins" style="width: 700px; height: 400px;">
89                 <center> -->
90                         <div id="bar_graph" style="width: 700px; height: 400px;"></div>
91                 <!-- </center>
92         </div> -->
93 </&>
96 <&| /page/info_section.mas, title=>"Experiment Expression Data", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
97     <table id="exp_table" cellpadding="2" cellspacing="2" width="100%"></table>
98 </&>
100 <&| /page/info_section.mas, title=>"Experiment Sample Info", collapsible => 1, collapsed => 0, is_subsection=>"1" &>
101         <table id="exp_info_table" cellpadding="2" cellspacing="2" width="100%"></table>
102         <br/>
103 </&>
106 </div>
108 </&>
112 <style>
114 #my_stage {
115 /*    border-style:dashed;
116     border-width:1px;
117 */    height:550px;
118     width:700px;
120 .jqplot-title {
121         color:#000000;
122         font-size:16px;
123         line-height:200%;
124         font-family:'Arial';
127 #bar_tooltip {
128         background-color:rgb(200,200,200);
131 </style>
134 <script defer="defer">
136 jQuery(document).ready(function () {
138     var data_array_obj;
139     //var expression_table_info;
140     var error_var = 1;
141     var perl_hash_obj = new Object();    
143     jQuery('#run_tool').click(function () {
144                 //alert("clicking");
145                 disable_ui();
146                 error_var = 1;
147                 query_gene = jQuery('#gene').val();
149         jQuery.ajax({
150             url: '/tools/expression/result/',
151             async: false,
152             method: 'POST',
153             data: { 'gene': query_gene },
154             success: function(response) {
155                                 enable_ui();
156                                 
157                 if (response.error) { 
158                     alert("ERROR: "+response.error);
159                                 error_var = 1;
160                 } else {
161                                         error_var = 0;
162                                         data_array_obj = response.all_exp_design;
163                           
164                                 // alert(dump(data_array_obj));
165                           
166                       //perl_hash_obj = response.hash;
168                       //alert("hash_name: "+perl_hash_obj["name"]);
169                       //alert("hi: "+response.gene_name);
170                 }
171             },
172             error: function(response) {
173                                 alert("An error occurred. The service may not be available right now.");
174                                 error_var = 1;
175                                 enable_ui();
176                         }
177         });
178         
182                 if (!error_var) {
183             
184         //          var designs_array = Object.keys(data_array_obj);
185         //          for (var n=0; n<designs_array.length; n=n+1) {
186         //                  jQuery('#exp_list').append('<option>'+designs_array[n]+'</option>')
187         //          }
189         //          alert("design names: "+designs_array);
192                     var data_array = data_array_obj[0]["data"];
193                     var experiment_name = data_array_obj[0]["name"];
194                     var experiment_desc = data_array_obj[0]["description"];
195                     var experiment_pubs = data_array_obj[0]["pub"];
196                     var experiment_dbxrefs = data_array_obj[0]["dbxref"];
197                         
198                         
199                 jQuery('#exp_title').html("<b>Name:</b> "+experiment_name+"<br/><b>Description:</b> "+experiment_desc);
200                 jQuery('#exp_dbxref').html("<b>External Links:</b> "+experiment_dbxrefs);
201                 jQuery('#exp_pub').html("<b>Publications:</b> "+experiment_pubs);
202                         
203                         // alert(dump(data_array));
204                         
205                     hide_ui();
206                     show_hiden_divs();
207                     display_pictures();
208                     print_bar_chart(data_array);
209             
210                     var expression_table_info = "";
211                     var experiment_info = "";
212                     //alert("data: "+data_array.length);
213                 expression_table_info += "<tr style='text-align:center;'><th>Experiment</th><th>Replicates</th><th>FPKM</th><th>FPKM_lo</th><th>FPKM_hi</th></tr>";
214                 experiment_info += "<tr style='text-align:center;'><th>Sample</th><th>Description</th><th>External Link</th></tr>";
216                     for (var i=0; i<data_array.length; i=i+1) {
217                         experiment_info += "<tr><td><a href='/gem/experiment.pl?id="+data_array[i]["id"]+"' target='_blank'>"+data_array[i]["name"]+"</a></td>";
218                             experiment_info += "<td style='text-align:left;'>"+data_array[i]["exp_description"]+"</td>";
219                             experiment_info += "<td style='text-align:center;'>"+data_array[i]["exp_links"]+"</td>";
221                         expression_table_info += "<tr><td>"+data_array[i]["name"]+"</td>";
222                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["replicates"]+"</td>";
223                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["fpkm"]+"</td>";
224                             // expression_table_info += "<td style='text-align:center;'>"+data_array[i]["median"]+"</td>";
225                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["fpkm_lo"]+"</td>";
226                             expression_table_info += "<td style='text-align:center;'>"+data_array[i]["fpkm_hi"]+"</td>";
227                                 expression_table_info += "</tr>";
228                         }
229                 jQuery('#exp_table').html(expression_table_info);
230                 jQuery('#exp_info_table').html(experiment_info);
231                 }
232     });
233         
234         function disable_ui() {
235                 $('#working').dialog("open");
236         }
238         function enable_ui() {
239                 $('#working').dialog("close");
240         }
242         function hide_ui() {
243                 Effects.swapElements('expr_input_offswitch', 'expr_input_onswitch');
244                 Effects.hideElement('expr_input_content');
245         }
247         function show_hiden_divs() {
248                 jQuery("#hide_results").css("display","inline");
249         }
257     function print_bar_chart(data_a) {
258                 jQuery("#bar_graph").empty();
259                 
260                 var exp_cond = [];
261             var bar_data = [];
262             var error_bar_obj = new Object(); //the error values must be the percentage of the expression 0.1=10%
263             var error_bar_data = [];
264                 var min_serie = [];
265                 var max_serie = [];
266                 
267             for (var i=0; i<data_a.length; i=i+1) {
268                         var one_exp = []
269                         var one_mean = parseFloat(data_a[i]["fpkm"]); 
270                         
271                         exp_cond.push(data_a[i]["name"]);
272                         bar_data.push(one_mean);
273                         
274                         var one_sd =(parseFloat(data_a[i]["fpkm_lo"]));
275                         var one_cv =(parseFloat(data_a[i]["fpkm_hi"]));
276                         // var min_ser = (one_mean - one_sd).toFixed(2);
277                         // var max_ser = (one_mean + one_sd).toFixed(2);
278                         // min_serie.push(parseFloat(min_ser));
279                         // max_serie.push(parseFloat(max_ser));
280                         
281                         var min_err = ((one_mean - one_sd)/one_mean).toFixed(2);
282                         var max_err = ((one_cv - one_mean)/one_mean).toFixed(2);
283                         
284                         // var min_err = (one_sd/one_mean).toFixed(2);
285                         // var max_err = (one_sd/one_mean).toFixed(2);
286                         
287                     error_bar_obj = new Object();
288                         error_bar_obj.min=parseFloat(min_err);
289                         error_bar_obj.max=parseFloat(max_err);
291                         error_bar_data.push(error_bar_obj);
292                 }
293                 
295                 // alert(dump(error_bar_data));
301             var plot1 = $.jqplot('bar_graph', [bar_data], {
302                         title: 'Expression Data',
303                         animate: true,
304                 seriesDefaults:{
305                     renderer:$.jqplot.BarRenderer,
306                     rendererOptions: {
307                                         fillToZero: true,
308                                         errorBarWidth: 1,
309                                         errorBarColor: "black",
310                                         errorData: [error_bar_data],
311                                         errorTextData: [""],
312                                         barDirection: 'vertical',
313                                         animation: {
314                                                 speed: 1000
315                                         },
316                                 },
317                 },
318                         seriesColors: ['#C80000'],
319                         // seriesColors: ['#20608E'],
320                     axesDefaults: {
321                            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
322                        },
323                 axes: {
324                     // Use a category axis on the x axis and use our custom ticks.
325                     xaxis: {
326                         renderer: $.jqplot.CategoryAxisRenderer,
327                         ticks: exp_cond,
328                                         tickOptions: {
329                                                 angle: -45,
330                                                 showGridline: false,
331                                                 fontSize: '12pt',
332                                                 textColor: 'black',
333                                                 fontFamily: 'Arial'
334                                         }
335                     },
336                     // Pad the y axis just a little so bars can get close to, but
337                     // not touch, the grid boundaries.  1.2 is the default padding.
338                                 yaxis: {
339                                         // label:'Expression (units)',
340                                         pad: 1.2,
341                                         min: 0,
342                             tickOptions: {
343                                 angle: 0,
344                                                 formatString: "%#.2f",
345                                                 fontSize: '10pt',
346                                                 textColor: 'black',
347                                                 fontFamily: 'Arial'
348                             },
349                                         labelRenderer: $.jqplot.CanvasAxisLabelRenderer
350                                 }
351                 },
352                         grid: {
353                                 background: "white",
354                                 borderColor: "black",
355                         },
356                     highlighter: {
357                                 show: true,
358                                 showMarker:false,
359                                 tooltipAxes: 'y',
360                                 
361                                 
362                                 formatString:'<div id="bar_tooltip" class="jqplot-highlighter"><table>\
363                                 <tr><td>Expression val:</td><td>%s</td></tr> \
364                                                                   </table></div>'
365                     }
366             });
367                 
368                 
369     }
374 function dump(arr,level) {
375         var dumped_text = "";
376         if(!level) level = 0;
377         
378         //The padding given at the beginning of the line.
379         var level_padding = "";
380         for(var j=0;j<level+1;j++) level_padding += "    ";
381         
382         if(typeof(arr) == 'object') { //Array/Hashes/Objects 
383                 for(var item in arr) {
384                         var value = arr[item];
385                         
386                         if(typeof(value) == 'object') { //If it is an array,
387                                 dumped_text += level_padding + "'" + item + "' ...\n";
388                                 dumped_text += dump(value,level+1);
389                         } else {
390                                 dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
391                         }
392                 }
393         } else { //Stings/Chars/Numbers etc.
394                 dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
395         }
396         return dumped_text;
404         function display_pictures() {
405                 var stage = new Kinetic.Stage({
406                         container: "my_stage",
407                         width: 700,
408                         height: 550
409                 });
410                 var layer = new Kinetic.Layer();
411                 var plantObj = new Image();
412                 // var fruit_img = new Image();
413                 plantObj.src = "/static/documents/img/expression_tool/tomato_template.png";
414                 // fruit_img.src = "/static/documents/img/expression_tool/tomato_fruit_1.png";
416                 // tomato plant img
417                 var tomato_plant = new Kinetic.Image({
418                         image: plantObj,
419                         x: 0,
420                         y: 0,
421                         width: 700,
422                         height: 550,
423                 });
425                 // // tomato fruit img
426                 // var tomato_fruit = new Kinetic.Image({
427                 //      image: fruit_img,
428                 //      x: 40,
429                 //      y: 410,
430                 //      width: 130,
431                 //      height: 120,
432                 // });
434                 layer.add(tomato_plant);
435                 // layer.add(tomato_fruit);
436                 stage.add(layer);
437         }
441 </script>