js/solGS/phenotypeDataFlot.js

   1 /**
   2 * for graphical presentation of phenotype data of a trait
   3 * @author Isaak Y Tecle <iyt2@cornell.edu>
   4 *
   5 */
   6
   7 jQuery(document).ready( function() {
   8         plotPhenotypeScatter();
   9     });
  10
  11
  12 function plotPhenotypeScatter () {
  13     var popId       = jQuery('#model_id').val();
  14     var traitId     = jQuery('#trait_id').val();
  15     var comboPopsId = jQuery('#combo_pops_id').val();
  16
  17     var params;
  18     if(popId) {
  19         params = 'pop_id=' + popId + '&trait_id=' + traitId;
  20     } else {
  21         params = 'combo_pops_id=' + comboPopsId + '&trait_id=' + traitId;
  22     }
  23
  24     var action = '/solgs/phenotype/graph/';
  25
  26     var phenoPlotData        = [];
  27     phenoPlotData[0]         = [];
  28     var xAxisTickPhenoValues = [];
  29     var yAxisTickPhenoValues = [];
  30     var yPhenoValues         = [];
  31
  32     var phenoDataRenderer = function() {
  33         jQuery.ajax({
  34                 async: false,
  35                 url: action,
  36                 dataType:"json",
  37                 data: params,
  38                 success: function(data) {
  39                     var phenoData  = data.trait_data;
  40                     var state     = data.status;
  41
  42                     if (state == 'success') {
  43                         for (var i=0; i < phenoData.length; i++) {
  44                             var xPD = phenoData[i][0];
  45                             xPD     = xPD.toString();
  46                             var yPD = phenoData[i][1];
  47                             yPD     = yPD.replace(/\s/, '');
  48                             yPD     = Number(yPD);
  49
  50                             xAxisTickPhenoValues.push([i, xPD]);
  51                             yAxisTickPhenoValues.push([i, yPD]);
  52                             yPhenoValues.push(yPD);
  53
  54                             phenoPlotData[0][i]    = [];
  55                             phenoPlotData[0][i][0] = xPD;
  56                             phenoPlotData[0][i][1] = yPD;
  57
  58                         }
  59                     }
  60                 }
  61             });
  62
  63         return {'bothAxisPhenoValues' : phenoPlotData,
  64                 'xAxisPhenoValues'    : xAxisTickPhenoValues,
  65                 'yAxisPhenoValues'    : yAxisTickPhenoValues,
  66                 'yPhenoValues'        : yPhenoValues
  67                 };
  68
  69     };
  70
  71     var allPhenoData     = phenoDataRenderer();
  72     var xAxisPhenoValues = allPhenoData.xAxisPhenoValues;
  73     var yAxisPhenoValues = allPhenoData.yAxisPhenoValues;
  74     var yPhenoValues     = allPhenoData.yPhenoValues;
  75     var minYPheno        = Math.min.apply(Math, yPhenoValues);
  76     var maxYPheno        = Math.max.apply(Math, yPhenoValues);
  77     var minYPhenoLabel   = minYPheno - (0.2*minYPheno);
  78     var maxYPhenoLabel   = maxYPheno + (0.2*maxYPheno);
  79     var plotPhenoData    = allPhenoData.bothAxisPhenoValues;
  80
  81     if (plotPhenoData == 'undefined') {
  82         var message = 'There is no phenotype data to plot. Please report this problem';
  83         jQuery('#phenoPlot').append(message).show();
  84     } else {
  85         var optionsPheno = {
  86             series: {
  87                 lines: {
  88                     show: false
  89                 },
  90                 points: {
  91                     show: true
  92                 },
  93             },
  94             grid: {
  95                 show: true,
  96                 clickable: true,
  97                 hoverable: true,
  98             },
  99             selection: {
 100                 mode: 'xy',
 101                 color: '#0066CC',
 102             },
 103             xaxis:{
 104                 mode: 'categories',
 105                 tickColor: '#ffffff',
 106                 ticks: '',
 107                 axisLabel: 'Clones',
 108                 position: 'bottom',
 109                 axisLabelPadding: 20,
 110                 color: '#0066CC',
 111             },
 112             yaxis: {
 113                 min: null,
 114                 max: null,
 115                 axisLabel: 'Phenotype values',
 116                 position: 'left',
 117                 color: '#0066CC',
 118             },
 119             zoom: {
 120                 interactive: true,
 121                 amount: 1.5,
 122                 trigger: 'dblclick',
 123             },
 124             pan: {
 125                 interactive: false,
 126             },
 127         };
 128
 129         var plotPheno = jQuery.plot('#phenoPlot', plotPhenoData, optionsPheno);
 130
 131         var overviewPheno = jQuery.plot(jQuery("#phenoPlotOverview"), plotPhenoData, {
 132                 series: {
 133                     lines: {
 134                         show: true,
 135                         lineWidth: 2
 136                     },
 137                     shadowSize: 0
 138                 },
 139                 xaxis: {
 140                     ticks: [],
 141                     mode: "categories",
 142                     label: 'Genotypes',
 143                 },
 144                 selection: {
 145                     mode: "xy",
 146                 },
 147                 colors: ["#cc0000", "#0066CC"],
 148             });
 149
 150         jQuery("#phenoPlot").bind("plotselected", function (event, ranges) {
 151                 //zoom in
 152                 plotPheno = jQuery.plot(jQuery("#phenoPlot"), plotPhenoData,
 153                                         jQuery.extend(true, {}, optionsPheno, {
 154                                                 xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
 155                                                 yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to },
 156                                             }));
 157
 158                 plotPheno.setSelection(ranges, true);
 159                 overviewPheno.setSelection(ranges, true);
 160             });
 161
 162         //highlight selected area on the overview plot
 163         jQuery("#phenoPlotOverview").bind("plotselected", function (event, ranges) {
 164                 plotPheno.setSelection(ranges);
 165             });
 166
 167         //reset zooming. Need to figure out zooming out
 168         jQuery("#phenozoom-reset").click(function (e) {
 169                 //jQuery.plot("#phenoPlot", plotPhenoData, optionsPheno);
 170                 location.reload();
 171                 // plot.zoomOut();
 172             });
 173
 174         //given datapoint position and content, displays a styled tooltip
 175         var showTooltipPheno = function(lt, tp, content) {
 176             jQuery('<div id="phenotooltip">' + content + '</div>').css({
 177                     position: 'absolute',
 178                     display: 'none',
 179                     'font-weight': 'bold',
 180                     top: tp + 10,
 181                     left: lt + 10,
 182                     border: '1px solid #ffaf55',
 183                     padding: '2px'
 184                 }).appendTo("body").show();
 185         };
 186
 187         var zoomHelp = function (lt, tp) {
 188             var help_txt = '<div style="width:140px;height:90px">' +
 189                             'To zoom in, select an area ' +
 190                             'on the plot and release or double click at any ' +
 191                             'point on the plot.' +
 192                            '</div>';
 193
 194             jQuery('<div id="tooltipZoomPheno">' + help_txt  + '</div>').css({
 195                     position: 'absolute',
 196                         display: 'none',
 197                         'font-weight': 'bold',
 198                         top: tp + 35,
 199                         left: lt + 30,
 200                         border: '1px solid #C9BE62',
 201                         padding: '2px'
 202                         }).appendTo("body").show();
 203         };
 204
 205         //calls the tooltip display function and binds the 'plotover' event to
 206         //the plot
 207         var previousPoint = null;
 208         var useTooltipPheno = jQuery("#phenoPlot").bind("plothover", function (event, pos, item) {
 209                 if (item) {
 210                     if (previousPoint != item.dataIndex) {
 211                         previousPoint = item.dataIndex;
 212
 213                         jQuery("#phenotooltip").remove();
 214                         jQuery("#tooltipZoomPheno").remove();
 215
 216                         var x = item.datapoint[0];
 217                         var y = item.datapoint[1].toFixed(2);
 218                         var content = xAxisTickPhenoValues[x][1] + ', ' + y;
 219
 220                         showTooltipPheno(item.pageX, item.pageY, content);
 221                         zoomHelp(item.pageX, item.pageY);
 222                     }
 223                 }
 224                 else {
 225                     jQuery("#phenotooltip").remove();
 226                     jQuery("#tooltipZoomPheno").remove();
 227
 228                     previousPoint = null;
 229                 }
 230             });
 231     }
 232 }
 233
 234
 235
 236
 237
 238