scope.$watch('highlightTarget', function(target) {
          if (!target) {
            scope.rects = undefined;
            scope.highlightInfo = undefined;
            return;
          }

          if (target.ranges.length) {
            scope.rects = containerCtrl.getRangesRects(target.ranges);

            // gather bbox information and expose it on the scope
            const info = {
              left: _.min(_.map(scope.rects, 'left')),
              right: _.max(_.map(scope.rects, function(rect) {
                return rect.left + rect.width;
              })),
              top: _.min(_.map(scope.rects, 'top')),
              bottom: _.max(_.map(scope.rects, function(rect) {
                return rect.top + rect.height;
              })),
              width: undefined,
              height: undefined,
            };
            info.width = info.right - info.left;
            info.height = info.bottom - info.top;
            scope.highlightInfo = info;
          }
        }, true);

function getRate(yLeft, yRight) {
  var rateLeft, rateRight, rate;
  if (checkTwoCross(yLeft, yRight)) {
    rateLeft = yRight.min ? yLeft.min / yRight.min : 0;
    rateRight = yRight.max ? yLeft.max / yRight.max : 0;
  } else {
    if (checkOneSide(yLeft, yRight)) {
      var absLeftMin = Math.abs(yLeft.min);
      var absLeftMax = Math.abs(yLeft.max);
      var absRightMin = Math.abs(yRight.min);
      var absRightMax = Math.abs(yRight.max);
      var upLeft = _.max([absLeftMin, absLeftMax]);
      var downLeft = _.min([absLeftMin, absLeftMax]);
      var upRight = _.max([absRightMin, absRightMax]);
      var downRight = _.min([absRightMin, absRightMax]);

      rateLeft = downLeft ? upLeft / downLeft : upLeft;
      rateRight = downRight ? upRight / downRight : upRight;
    } else {
      if (yLeft.min > 0 || yRight.min > 0) {
        rateLeft = yLeft.max / yRight.max;
        rateRight = 0;
      } else {
        rateLeft = 0;
        rateRight = yLeft.min / yRight.min;
      }
    }
  }

  rate = rateLeft > rateRight ? rateLeft : rateRight;

  return rate;
}

 tileAt(layer: number, x: number, y: number): number {
     let col = _.ceil(x / this.tileWidth) - 1;
     let row = _.ceil(y / this.tileHeight) - 1;
     // make sure col & row aren't negative
     col = _.max([0, col]);
     row = _.max([0, row]);
     return this.layers[layer][row][col];
 }

export function createScales(props: PositionsBubbleChartProps) {
  const ratio = 12.5
  const { width, height } = props.size
  const minR = 15
  const maxR = 60
  const offset = maxR / 2
  const positionData = getPositionsDataFromSeries(props.data, props.currencyPairs)

  const baseValues = _.map(positionData, (val: any) => {
    return Math.abs(val[baseTradedAmountName])
  })

  const maxValue = _.max(baseValues) || 0
  let minValue = _.min(baseValues) || 0

  if (minValue === maxValue) minValue = 0

  const scales = {
    x: d3.scale.linear()
      .domain([0, props.data.length])
      .range([(-(width / ratio)), (width / ratio) - offset]),
    y: d3.scale.linear()
      .domain([0, props.data.length])
      .range([-(height / (ratio)), height / ratio]),
    r: d3.scale.sqrt()
      .domain([minValue, maxValue])
      .range([minR, maxR])}

  return scales
}

      function addXHistogramAxis(options, bucketSize) {
        let ticks, min, max;

        if (data.length) {
          ticks = _.map(data[0].data, point => point[0]);

          // Expand ticks for pretty view
          min = Math.max(0, _.min(ticks) - bucketSize);
          max = _.max(ticks) + bucketSize;

          ticks = [];
          for (let i = min; i <= max; i += bucketSize) {
            ticks.push(i);
          }
        } else {
          // Set defaults if no data
          ticks = panelWidth / 100;
          min = 0;
          max = 1;
        }

        options.xaxis = {
          timezone: dashboard.getTimezone(),
          show: panel.xaxis.show,
          mode: null,
          min: min,
          max: max,
          label: "Histogram",
          ticks: ticks
        };
      }

 /**
  * Returns how many levels of nodes the tree has
  * @return {number} the height of the tree
  */
 public height(): number {
     if (this._children.length > 0) {
         return 1 + max(this._children.map(c => { return c.height(); }));
     }
     else {
         return 1;
     }
 }

 /*
  * max & min value from two-dimensional array
  */
 public getDomainBoundaries(tsv: TSVFile): DomainBoundaries {
   const chipIndexes = this.getChipHeaderIndexes(tsv.headers);
   const values = _.map(tsv.body.rows, (row: TSVRow) => row.getCellsByIndexes(chipIndexes));
   const flatValues = _.map(_.flatten(values), (value: string) => parseFloat(value));
   const min = _.min(flatValues);
   const max = _.max(flatValues);
   return new DomainBoundaries(min, max);
 }

  function getYAxisWidth(elem) {
    let axis_text = elem.selectAll(".axis-y text").nodes();
    let max_text_width = _.max(_.map(axis_text, text => {
      // Use SVG getBBox method
      return text.getBBox().width;
    }));

    return max_text_width;
  }

const defaultAreaService : AreaService = (() => {
    let elementaryAreas : { [id : number]: ElementaryArea } 
        = safeParse(window.localStorage.getItem(ELEMENTARY_LOCAL_STORAGE_KEY));
        
    const elementaryCallbacks = $.Callbacks();
    var editArea : ElementaryArea;
    let count = _.max(_.values(elementaryAreas).map((a : ElementaryArea) => a.id)) + 1;
    if (isNaN(count)) {
        count = 1;
    }
    
    $
    .get('http://localhost:8009/elementaryAreas/')
    .then(data => {
        elementaryAreas = data;
        elementaryCallbacks.fire(_.clone(elementaryAreas));
    });
    
    const getElementaryAreas = () => _.clone(elementaryAreas);
    
    const triggerAreasChange = () => { elementaryCallbacks.fire(getElementaryAreas()) };
    
    return {
        getElementaryAreas,
        addElementaryArea: function(area : ElementaryArea, id? : number) {
            const index = id || count++; 
            const newArea = _.clone(area);
            newArea.id = index;
            elementaryAreas[index] = newArea;
            elementaryCallbacks.fire(getElementaryAreas());
        },
        removeElementaryArea: function(id) {
            delete elementaryAreas[id];
            elementaryCallbacks.fire(getElementaryAreas());
        },
        onAreasChange: callback => elementaryCallbacks.add(callback),
        addPoint: (id, point) => elementaryAreas[id].points.push(point),
        setEditArea: id => {
            ToolService.setTool("draw");
            editArea = elementaryAreas[id];
            // TODO: make proper edit here
            editArea.points = [];
            editArea.polygon = Shapes.Polygon(editArea.points, false);
        },
        getCurrentEditArea: () => editArea,
        clearEditArea: () => {
            ToolService.setTool("selection");
            editArea = null;
        },
        setHighlight: function(id, highlight) {
            elementaryAreas[id].hover = highlight;
            elementaryAreas[id].polygon.color = highlight ? 'rgba(77, 163, 44, 0.4)' : null;
            triggerAreasChange();    
        },
        triggerAreasChange
    }
})();

 /**
  * @Description get the X-domain boundary for the Fold Change columns
  */
 getVolcanoPlotDataXBoundary(tsv: TSVFile): DomainBoundaries {
   let FCIndexes = this.getFCValueHeaderIndex(tsv.headers);
   let values = _.map(tsv.body.rows, (row: TSVRow) => row.getCellsByIndexes(FCIndexes));
   let flatValues = _.map(_.flatten(values), (value: string) => parseFloat(value));
   let min = _.min(flatValues);
   let max = _.max(flatValues);
   console.log(new DomainBoundaries(min, max));
   return new DomainBoundaries(min, max);
 }