button to generate plot pheno from plants
[sgn.git] / js / solGS / traitGebvFlot.js
blob1d7c29ec24f1552883af4c4ea9567213ef353811
1 /** 
2 * for graphical presentation of GEBVs of a trait.
3 * With capability for zooming in for selected area. 
4 * Double clicking zooms in by 50%.
5 * @author Isaak Y Tecle <iyt2@cornell.edu>
7 */
10 jQuery(document).ready( function() {
11         plotGebvScatter();
12     });
14 function plotGebvScatter() {
16     var popId          = jQuery('#model_id').val();
17     var traitId        = jQuery('#trait_id').val();
18     var comboPopsId    = jQuery('#combo_pops_id').val();
19     var popsList       = jQuery('#pops_list').val();         
20     var selectionPopId = jQuery('#selection_pop_id').val();
21   
22     var params;
23         
24     if(popId && !selectionPopId) {
25         params = 'pop_id=' + popId + '&trait_id=' + traitId;
26     } else if (comboPopsId)  {
27         params = 'combo_pops_id=' + comboPopsId + '&trait_id='  + traitId + '&selection_pop_id=' + selectionPopId;  
28     } else if (selectionPopId) {
29         params = 'pop_id=' + popId + '&trait_id=' + traitId + '&selection_pop_id=' + selectionPopId;  
30     }
31        
32     var action = '/solgs/trait/gebv/graph';
33        
34     var graphArray      = [];
35     graphArray[0]       = [];  
36     var xAxisTickValues = [];
37     var yAxisTickValues = [];
38     var yValues         = [];
39        
40     var gebvDataRenderer = function() {            
41         jQuery.ajax({
42                 async: false,
43                 url: action,
44                 dataType:"json",
45                 data: params,
46                 success: function(data) {
47                     var gebvData  = data.gebv_data;
48                     var state     = data.status;
49                        
50                     if (state == 'success') {
51                         for (var i=0; i < gebvData.length; i++) {
52                             var xD = gebvData[i][0];
53                             xD     = xD.toString();
54                             var yD = gebvData[i][1];
55                             yD     = yD.replace(/\s/, '');
56                             yD     = Number(yD);
57                                                               
58                             xAxisTickValues.push([i, xD]);                               
59                             yAxisTickValues.push([i, yD]);
60                             yValues.push(yD);
61                                                                      
62                             graphArray[0][i]    = [];
63                             graphArray[0][i][0] = xD;
64                             graphArray[0][i][1] = yD; 
65                                  
66                         }
67                     }
68                 }
69             });
70            
71         return {'bothAxisValues' : graphArray, 
72                 'xAxisValues'    : xAxisTickValues,
73                 'yAxisValues'    : yAxisTickValues,
74                 'yValues'        : yValues 
75                 };
76             
77     };
78                
79     var allData     = gebvDataRenderer();
80            
81     var xAxisValues = allData.xAxisValues;
82     var yAxisValues = allData.yAxisValues;
83     var yValues     = allData.yValues;         
84     var minY        = Math.min.apply(Math, yValues);
85     var maxY        = Math.max.apply(Math, yValues);      
86     var minYLabel   = minY - (0.2*minY);
87     var maxYLabel   = maxY + (0.2*maxY);
88     var plotData    = allData.bothAxisValues;
89             
90     if (plotData == 'undefined') {
91         var message = 'There is no GEBV data to plot. Please report this problem';  
92         jQuery('#gebvPlot2').append(message).show();
93     } else {
94         var options = { 
95             series: {
96                 lines: { 
97                     show: true 
98                 },
99                 points: { 
100                     show: true 
101                 },                
102             },              
103             grid: {
104                 show: true,
105                 clickable: true,
106                 hoverable: true,               
107             },
108             selection: {
109                 mode: 'xy',
110                 color: '#0066CC',
111             },
112             xaxis:{
113                 mode: 'categories',                 
114                 ticks: '',
115                 tickColor: '#ffffff',
116                 axisLabel: 'Clones',
117                 position: 'bottom',
118                 axisLabelPadding: 20,
119                 color: '#0066CC',    
120             },
122             yaxis: {                                
123                 min: null,
124                 max: null, 
125                 axisLabel: 'GEBVs',
126                 position: 'left',
127                 color: '#0066CC',                    
128             },
129             zoom: {
130                 interactive: true,
131                 amount: 1.5,
132                 trigger: 'dblclick',
133             },
134             pan: {
135                 interactive: false,                
136             },                        
137         };
138              
139            
140         var plot        = jQuery.plot('#gebvPlot2', plotData, options);
141                      
142         var overview = jQuery.plot(jQuery("#gebvPlotOverview"), plotData, {
143                 series: {
144                     lines: { 
145                         show: true, 
146                         lineWidth: 2 
147                     },
148                     shadowSize: 0
149                 },
150                 xaxis: { 
151                     ticks: [], 
152                     mode: "categories", 
153                     label: 'Genotypes',
154                 },                  
155                 selection: { 
156                     mode: "xy", 
157                 },
158                 colors: ["#cc0000", "#0066CC"],
159             });
160        
161         jQuery("#gebvPlot2").bind("plotselected", function (event, ranges) {
162                 //zoom in
163                 plot = jQuery.plot(jQuery("#gebvPlot2"), plotData,
164                                    jQuery.extend(true, {}, options, {
165                                            xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
166                                            yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to },                    
167                                        }));
168         
169                 plot.setSelection(ranges, true);
170                 overview.setSelection(ranges, true);
171             });
173         //highlight selected area on the overview plot
174         jQuery("#gebvPlotOverview").bind("plotselected", function (event, ranges) {
175                 plot.setSelection(ranges);
176             }); 
177         
178         //reset zooming. Need to figure out zooming out
179         jQuery("#gebvzoom-reset").click(function (e) { 
180                 // var plot = jQuery.plot("#gebvPlot2", plotData, options);
181                 location.reload();
182                 // plot.zoomOut();
183             });
184             
185         //given datapoint position and content, displays a styled tooltip
186         var showTooltip = function(lt, tp, content) {                              
187             jQuery('<div id="tooltip">' + content + '</div>').css({ 
188                     position: 'absolute',
189                     display: 'none',
190                     'font-weight': 'bold',
191                     top: tp + 10,
192                     left: lt + 10, 
193                     border: '1px solid #ffaf55',
194                     padding: '2px'              
195                 }).appendTo("body").show();                
196         };
197              
198         var zoomHelp = function (lt, tp) {
199             
200             var help_txt = '<div style="width:140px;height:90px">' +
201                             'To zoom in, select an area ' + 
202                             'on the plot and release or double click at any ' +
203                             'point on the plot.' +
204                            '</div>'; 
205      
206             jQuery('<div id="tooltip_zoom">' + help_txt  + '</div>').css({ 
207                     position: 'absolute',
208                         display: 'none',
209                         'font-weight': 'bold',
210                         top: tp + 35,
211                         left: lt + 30, 
212                         border: '1px solid #C9BE62',
213                         padding: '2px'              
214                         }).appendTo("body").show(); 
215         }; 
217         //calls the tooltip display function and binds the 'plotover' event to
218         //the plot
219         var previousPoint = null;
220              var useTooltip = jQuery("#gebvPlot2").bind("plothover", function (event, pos, item) {            
221                      if (item) {
222                          if (previousPoint != item.dataIndex) {                            
223                              previousPoint = item.dataIndex;
224                             
225                              jQuery("#tooltip").remove();
226                              jQuery("#tooltip_zoom").remove();
228                              var x = item.datapoint[0];
229                              var y = item.datapoint[1].toFixed(2);
230                              var content = xAxisTickValues[x][1] + ', ' + y;
231                   
232                              showTooltip(item.pageX, item.pageY, content);
233                              zoomHelp(item.pageX, item.pageY);
234                          }
235                      }
236                      else {
237                          jQuery("#tooltip").remove();
238                          jQuery("#tooltip_zoom").remove();                   
239                          previousPoint = null;                      
240                      }          
241                  });
243      
244              //inverse plot: plots genotypes from high to low gebv values or vice versa
245              var inverseOptions = { 
246                  series: {
247                      lines: { 
248                          show: true 
249                      },
250                      points: { 
251                          show: true 
252                      },                
253                  },              
254                  grid: {
255                      show: true,
256                      clickable: true,
257                      hoverable: true,               
258                  },
259                  selection: {
260                      mode: 'xy',
261                      color: '#0066CC',
262                  },
263                  xaxis:{
264                      mode: 'categories',                 
265                      ticks: '',
266                      tickColor: '#ffffff',
267                      axisLabel: 'Genotypes',
268                      position: 'bottom',
269                      axisLabelPadding: 20,
270                      color: '#0066CC',
271                      transform: function (v) { return -v; },
272                      inverseTransform: function (v) { return -v; }
273                  },
275                  yaxis: {                                
276                      min: null,
277                      max: null, 
278                      axisLabel: 'Trait GEBVs',
279                      position: 'left',
280                      color: '#0066CC',                    
281                  },
282                  zoom: {
283                      interactive: true,
284                      amount: 1.5,
285                      trigger: 'dblclick',
286                  },
287                  pan: {
288                      interactive: false,                
289                  },                        
290              };
291       
292              function normalPlot() {
293                  jQuery.plot('#gebvPlot2', plotData, options);
294              }
296              function inversePlot() {
297                  jQuery.plot('#gebvPlot2', plotData, inverseOptions);
298              }
300              jQuery("#inverse_gebv_plot").alternateFunctions(normalPlot, inversePlot);
301              
302     }
307             
310