exon-expression-track.js

/**
 * Created by Llewellyn
 * User: florin
 * Date: 8/2/13
 * Time: 
 * To change this template use File | Settings | File Templates.
 */

ExonExpressionTrack.prototype = new LineTrack();
ExonExpressionTrack.prototype.constructor = ExonExpressionTrack;

// Inherit LineChart (multiple inheritance)
Inheritance.add(ExonExpressionTrack, LineTrack);

function ExonExpressionTrack() {
  // Call the constructors of all the superclasses but the first:
  LineTrack.call(this);

  this._addPoints = false;
  this._addLines = true;
}

ExonExpressionTrack.prototype.draw = function(data, slide){

console.dir(data);

  BaseChart.prototype.draw.call(this, data);

  var d;
  if (data) {
    d = data;
    this._data = data;
  } else {
    if (!this._data) {
      return;
    }
    d = this._data;
  }

  this._svg
    .attr('width', this._width - this._parentMargins.x)
    .attr('height', this._height - this._parentMargins.y);


  var start = d.start;
  var end = d.end;

  var yMin = ComputedMeasurements.instance.min(d.min, this._measurements[0]);
  var yMax = ComputedMeasurements.instance.max(d.max, this._measurements[0]);

  var xScale = d3.scale.linear()
    .domain([start, end])
    .range([0, this._width-2*this._margin]);
  var yScale = d3.scale.linear()
    .domain([yMin, yMax])
    .range([this._height-2*this._margin, 0]);

  this._svg.selectAll('.xAxis').remove();
  this._svg.selectAll('.yAxis').remove();
  this._drawAxes(xScale, yScale, 10, 5);

  var delta = (!slide) ? 0 : slide * (this._width - 2*this._margin) / (end - start);
  var margin = this._margin;
  var self = this;
  var linesGroup = this._svg.selectAll('.lines');

console.log("going to call draw lines");
  if (!linesGroup.empty()) {
    if (!delta) {
      linesGroup.remove();
      self._drawLines(d, xScale, yScale);
    } else {
      linesGroup
        .transition()
        .duration(500)
        .attr('transform', 'translate(' + (-delta + margin) + ', ' + margin + ')')
        .remove()
        .each('end', function() {
          self._drawLines(d, xScale, yScale);
        });
    }
  } else {
    self._drawLines(d, xScale, yScale);
  }

  this.refreshSelection();

};

ExonExpressionTrack.prototype._drawLines = function(d, xScale, yScale) {

console.dir(d);
var self = this;
    var svg = this._svg;
    var margin = this._margin;
    var i;
    var colors = this._colors;

    var graph = svg.append("g")
    .attr("class", "lines")
    .attr("transform", "translate(" + margin + ", " + margin + ")");

var seriesX = self._measurements[0];
var seriesY = self._measurements[1];
var x = function(j) {
    return ComputedMeasurements.instance.evaluate(d.data, seriesX, j, function(s, index) { return s[index]; });
};

    var y = function(j) {
	return ComputedMeasurements.instance.evaluate(d.data, seriesY, j, function(s, index) { return s[index]; });
    };

    var loc = new Array();
    var xx = new Array();
    var yy = new Array();
    var gene = new Array();
      
    for (var z=0; z < d.data.start.length; z++) {
        loc[2*z] = d.data.start[z];
        loc[2*z+1] = d.data.end[z];
	xx[2*z] = x(z);
	xx[2*z+1] = x(z);
	yy[2*z] = y(z);
	yy[2*z+1] = y(z);
        gene[2*z] = d.data.gene[z];
        gene[2*z+1] = d.data.gene[z];
    }
console.dir(loc);
console.dir(x);
	console.dir(y);
console.dir(gene);

    var points = d3.zip(loc,xx,yy,gene);
console.dir(points);

    var groups = d3.nest()
    .key(function(d) { return d[3]; })
    .entries(points);
console.dir(groups);

    if (this._addLines) {

    var xline = d3.svg.line()
	.x(function(d) { return xScale(d[0]); })
	.y(function(d) { return yScale(d[1]); });
    var yline = d3.svg.line()
	.x(function(d) { return xScale(d[0]); })
	.y(function(d) { return yScale(d[2]); });

    var xgenes = graph.selectAll(".xgene")
	.data(groups, function(d) { return d.key; })
	.enter()
	.append("g")
	.attr("class","xgene");

console.log("about to graph");
    xgenes.append("path")
	.attr("d", function(d) { return xline(d.values); })
	.attr("class", "line-series-index-0")
	.style("stroke", colors[0])
	.style("shape-rendering", "auto");

    var ygenes = graph.selectAll(".ygene")
	.data(groups, function(d) { return d.key; })
	.enter()
	.append("g")
	.attr("class","ygene");

          ygenes.append("path")
    	.attr("d", function(d) { return yline(d.values); })
    	.attr("class", "line-series-index-1")
    	.style("stroke", colors[1])
    	.style("shape-rendering", "auto");
    }

    if (this._addPoints) {
      graph.append('g')
        .selectAll('.point-series-index-0')
        .data(groups[0].values).enter()
        .append('circle')
        .attr('class', 'point-series-index-0')
        .style('opacity', 1)
        .attr('r', 2)
        .attr('cx', function(d) { 
          return xScale(d[0]); 
        })
        .attr('cy', function(d) { 
          return yScale(d[1]); 
        })
        .attr('fill', colors[0])
        .attr('stroke', 'none');
      graph.append('g')
        .selectAll('.point-series-index-1')
        .data(groups[0].values).enter()
        .append('circle')
        .attr('class', 'point-series-index-1')
        .style('opacity', 1)
        .attr('r', 2)
        .attr('cx', function(d) { 
          return xScale(d[0]); 
	})
        .attr('cy', function(d) { 
          return yScale(d[2]); 
        })
        .attr('fill', colors[1])
        .attr('stroke', 'none');
    }

  var self = this;
  var inverseXScale = d3.scale.linear()
    .domain([0, self._width-2*self._margin])
    .range([self._data.start, self._data.end]);
  var hoverFunction = function() {
    EventManager.instance.blockUnhovered();
    var x = inverseXScale(d3.mouse(this)[0]) - self._binSize / 2;
    var start = Math.floor(x / self._binSize) * self._binSize;
    var end = start + self._binSize;
    var o = { start: start, end: end };
    EventManager.instance.blockHovered(o);
  };
  var hoverScreen = graph.append('rect').attr('class', 'hover-screen')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', this._width - 2 * this._margin)
    .attr('height', this._height - 2 * this._margin)
    .attr('opacity', 0)
    .on('mouseover', hoverFunction)
    .on('mousemove', hoverFunction)
    .on('mouseout', function (d) {
      EventManager.instance.blockUnhovered();
    });

};

ExonExpressionTrack.prototype.onMeasurementsLoaded = function (event) {
  this._drawTitle(event.detail.geneMeasurements);
};

ExonExpressionTrack.prototype.onChartDataUpdated = function(event) {
  if (event.detail.chartId != this._id) {
    return;
  }

  this._removeLoader();

  var data = event.detail.data.geneData;
  var lastLocation = event.detail.lastLocation;

  if (data.chr != lastLocation.chr
    || data.start != lastLocation.start
    || data.end != lastLocation.end) {
    return;
  }

  var slide = 0;
  if (this.lastLocation &&
    data.chr == this.lastLocation.chr &&
    data.end - data.start == this.lastLocation.end - this.lastLocation.start &&
    Math.abs(data.start - this.lastLocation.start) < data.end - data.start) {
    slide = data.start - this.lastLocation.start;
  }

  this.lastLocation = lastLocation;

  this.draw(data, slide);
};