Split InteractiveChartComponent and CommitsViewerComponent into separate files
[WebKit-https.git] / Websites / perf.webkit.org / public / v2 / app.js
index 10a16b7ea444fde0f610c4e06b0a76eb9bb980ac..5aa89a0586320508c00405a6ee4aee578c961b10 100755 (executable)
@@ -763,818 +763,6 @@ App.PaneController = Ember.ObjectController.extend({
     }.observes('newAnalysisTaskName'),
 });
 
-App.InteractiveChartComponent = Ember.Component.extend({
-    chartData: null,
-    showXAxis: true,
-    showYAxis: true,
-    interactive: false,
-    enableSelection: true,
-    classNames: ['chart'],
-    init: function ()
-    {
-        this._super();
-        this._needsConstruction = true;
-        this._eventHandlers = [];
-        $(window).resize(this._updateDimensionsIfNeeded.bind(this));
-    },
-    chartDataDidChange: function ()
-    {
-        var chartData = this.get('chartData');
-        if (!chartData)
-            return;
-        this._needsConstruction = true;
-        this._constructGraphIfPossible(chartData);
-    }.observes('chartData').on('init'),
-    didInsertElement: function ()
-    {
-        var chartData = this.get('chartData');
-        if (chartData)
-            this._constructGraphIfPossible(chartData);
-    },
-    willClearRender: function ()
-    {
-        this._eventHandlers.forEach(function (item) {
-            $(item[0]).off(item[1], item[2]);
-        })
-    },
-    _attachEventListener: function(target, eventName, listener)
-    {
-        this._eventHandlers.push([target, eventName, listener]);
-        $(target).on(eventName, listener);
-    },
-    _constructGraphIfPossible: function (chartData)
-    {
-        if (!this._needsConstruction || !this.get('element'))
-            return;
-
-        var element = this.get('element');
-
-        this._x = d3.time.scale();
-        this._y = d3.scale.linear();
-
-        // FIXME: Tear down the old SVG element.
-        this._svgElement = d3.select(element).append("svg")
-                .attr("width", "100%")
-                .attr("height", "100%");
-
-        var svg = this._svg = this._svgElement.append("g");
-
-        var clipId = element.id + "-clip";
-        this._clipPath = svg.append("defs").append("clipPath")
-            .attr("id", clipId)
-            .append("rect");
-
-        if (this.get('showXAxis')) {
-            this._xAxis = d3.svg.axis().scale(this._x).orient("bottom").ticks(6);
-            this._xAxisLabels = svg.append("g")
-                .attr("class", "x axis");
-        }
-
-        if (this.get('showYAxis')) {
-            this._yAxis = d3.svg.axis().scale(this._y).orient("left").ticks(6).tickFormat(d3.format("s"));
-            this._yAxisLabels = svg.append("g")
-                .attr("class", "y axis");
-        }
-
-        this._clippedContainer = svg.append("g")
-            .attr("clip-path", "url(#" + clipId + ")");
-
-        var xScale = this._x;
-        var yScale = this._y;
-        this._timeLine = d3.svg.line()
-            .x(function(point) { return xScale(point.time); })
-            .y(function(point) { return yScale(point.value); });
-
-        this._confidenceArea = d3.svg.area()
-//            .interpolate("cardinal")
-            .x(function(point) { return xScale(point.time); })
-            .y0(function(point) { return point.interval ? yScale(point.interval[0]) : null; })
-            .y1(function(point) { return point.interval ? yScale(point.interval[1]) : null; });
-
-        if (this._paths)
-            this._paths.forEach(function (path) { path.remove(); });
-        this._paths = [];
-        if (this._areas)
-            this._areas.forEach(function (area) { area.remove(); });
-        this._areas = [];
-        if (this._dots)
-            this._dots.forEach(function (dot) { dots.remove(); });
-        this._dots = [];
-        if (this._highlights)
-            this._highlights.forEach(function (highlight) { highlight.remove(); });
-        this._highlights = [];
-
-        this._currentTimeSeries = chartData.current.timeSeriesByCommitTime();
-        this._currentTimeSeriesData = this._currentTimeSeries.series();
-        this._baselineTimeSeries = chartData.baseline ? chartData.baseline.timeSeriesByCommitTime() : null;
-        this._targetTimeSeries = chartData.target ? chartData.target.timeSeriesByCommitTime() : null;
-
-        this._yAxisUnit = chartData.unit;
-
-        var minMax = this._minMaxForAllTimeSeries();
-        var smallEnoughValue = minMax[0] - (minMax[1] - minMax[0]) * 10;
-        var largeEnoughValue = minMax[1] + (minMax[1] - minMax[0]) * 10;
-
-        // FIXME: Flip the sides based on smallerIsBetter-ness.
-        if (this._baselineTimeSeries) {
-            var data = this._baselineTimeSeries.series();
-            this._areas.push(this._clippedContainer
-                .append("path")
-                .datum(data.map(function (point) { return {time: point.time, value: point.value, interval: point.interval ? point.interval : [point.value, largeEnoughValue]}; }))
-                .attr("class", "area baseline"));
-        }
-        if (this._targetTimeSeries) {
-            var data = this._targetTimeSeries.series();
-            this._areas.push(this._clippedContainer
-                .append("path")
-                .datum(data.map(function (point) { return {time: point.time, value: point.value, interval: point.interval ? point.interval : [smallEnoughValue, point.value]}; }))
-                .attr("class", "area target"));
-        }
-
-        this._areas.push(this._clippedContainer
-            .append("path")
-            .datum(this._currentTimeSeriesData)
-            .attr("class", "area"));
-
-        this._paths.push(this._clippedContainer
-            .append("path")
-            .datum(this._currentTimeSeriesData)
-            .attr("class", "commit-time-line"));
-
-        this._dots.push(this._clippedContainer
-            .selectAll(".dot")
-                .data(this._currentTimeSeriesData)
-            .enter().append("circle")
-                .attr("class", "dot")
-                .attr("r", this.get('chartPointRadius') || 1));
-
-        if (this.get('interactive')) {
-            this._attachEventListener(element, "mousemove", this._mouseMoved.bind(this));
-            this._attachEventListener(element, "mouseleave", this._mouseLeft.bind(this));
-            this._attachEventListener(element, "mousedown", this._mouseDown.bind(this));
-            this._attachEventListener($(element).parents("[tabindex]"), "keydown", this._keyPressed.bind(this));
-
-            this._currentItemLine = this._clippedContainer
-                .append("line")
-                .attr("class", "current-item");
-
-            this._currentItemCircle = this._clippedContainer
-                .append("circle")
-                .attr("class", "dot current-item")
-                .attr("r", 3);
-        }
-
-        this._brush = null;
-        if (this.get('enableSelection')) {
-            this._brush = d3.svg.brush()
-                .x(this._x)
-                .on("brush", this._brushChanged.bind(this));
-
-            this._brushRect = this._clippedContainer
-                .append("g")
-                .attr("class", "x brush");
-        }
-
-        this._updateDomain();
-        this._updateDimensionsIfNeeded();
-
-        // Work around the fact the brush isn't set if we updated it synchronously here.
-        setTimeout(this._selectionChanged.bind(this), 0);
-
-        setTimeout(this._selectedItemChanged.bind(this), 0);
-
-        this._needsConstruction = false;
-
-        this._rangesChanged();
-    },
-    _updateDomain: function ()
-    {
-        var xDomain = this.get('domain');
-        var intrinsicXDomain = this._computeXAxisDomain(this._currentTimeSeriesData);
-        if (!xDomain)
-            xDomain = intrinsicXDomain;
-        var currentDomain = this._x.domain();
-        if (currentDomain && App.domainsAreEqual(currentDomain, xDomain))
-            return currentDomain;
-
-        var yDomain = this._computeYAxisDomain(xDomain[0], xDomain[1]);
-        this._x.domain(xDomain);
-        this._y.domain(yDomain);
-        return xDomain;
-    },
-    _updateDimensionsIfNeeded: function (newSelection)
-    {
-        var element = $(this.get('element'));
-
-        var newTotalWidth = element.width();
-        var newTotalHeight = element.height();
-        if (this._totalWidth == newTotalWidth && this._totalHeight == newTotalHeight)
-            return;
-
-        this._totalWidth = newTotalWidth;
-        this._totalHeight = newTotalHeight;
-
-        if (!this._rem)
-            this._rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        var rem = this._rem;
-
-        var padding = 0.5 * rem;
-        var margin = {top: padding, right: padding, bottom: padding, left: padding};
-        if (this._xAxis)
-            margin.bottom += rem;
-        if (this._yAxis)
-            margin.left += 3 * rem;
-
-        this._margin = margin;
-        this._contentWidth = this._totalWidth - margin.left - margin.right;
-        this._contentHeight = this._totalHeight - margin.top - margin.bottom;
-
-        this._svg.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-        this._clipPath
-            .attr("width", this._contentWidth)
-            .attr("height", this._contentHeight);
-
-        this._x.range([0, this._contentWidth]);
-        this._y.range([this._contentHeight, 0]);
-
-        if (this._xAxis) {
-            this._xAxis.tickSize(-this._contentHeight);
-            this._xAxisLabels.attr("transform", "translate(0," + this._contentHeight + ")");
-        }
-
-        if (this._yAxis)
-            this._yAxis.tickSize(-this._contentWidth);
-
-        if (this._currentItemLine) {
-            this._currentItemLine
-                .attr("y1", 0)
-                .attr("y2", margin.top + this._contentHeight);
-        }
-
-        this._relayoutDataAndAxes(this._currentSelection());
-    },
-    _updateBrush: function ()
-    {
-        this._brushRect
-            .call(this._brush)
-        .selectAll("rect")
-            .attr("y", 1)
-            .attr("height", this._contentHeight - 2);
-        this._updateSelectionToolbar();
-    },
-    _relayoutDataAndAxes: function (selection)
-    {
-        var timeline = this._timeLine;
-        this._paths.forEach(function (path) { path.attr("d", timeline); });
-
-        var confidenceArea = this._confidenceArea;
-        this._areas.forEach(function (path) { path.attr("d", confidenceArea); });
-
-        var xScale = this._x;
-        var yScale = this._y;
-        this._dots.forEach(function (dot) {
-            dot
-                .attr("cx", function(measurement) { return xScale(measurement.time); })
-                .attr("cy", function(measurement) { return yScale(measurement.value); });
-        });
-        this._updateMarkedDots();
-        this._updateHighlightPositions();
-        this._updateRangeBarRects();
-
-        if (this._brush) {
-            if (selection)
-                this._brush.extent(selection);
-            else
-                this._brush.clear();
-            this._updateBrush();
-        }
-
-        this._updateCurrentItemIndicators();
-
-        if (this._xAxis)
-            this._xAxisLabels.call(this._xAxis);
-        if (!this._yAxis)
-            return;
-
-        this._yAxisLabels.call(this._yAxis);
-        if (this._yAxisUnitContainer)
-            this._yAxisUnitContainer.remove();
-        this._yAxisUnitContainer = this._yAxisLabels.append("text")
-            .attr("x", 0.5 * this._rem)
-            .attr("y", 0.2 * this._rem)
-            .attr("dy", 0.8 * this._rem)
-            .style("text-anchor", "start")
-            .style("z-index", "100")
-            .text(this._yAxisUnit);
-    },
-    _updateMarkedDots: function () {
-        var markedPoints = this.get('markedPoints') || {};
-        var defaultDotRadius = this.get('chartPointRadius') || 1;
-        this._dots.forEach(function (dot) {
-            dot.classed('marked', function (point) { return markedPoints[point.measurement.id()]; });
-            dot.attr('r', function (point) {
-                return markedPoints[point.measurement.id()] ? defaultDotRadius * 1.5 : defaultDotRadius; });
-        });
-    }.observes('markedPoints'),
-    _updateHighlightPositions: function () {
-        var xScale = this._x;
-        var yScale = this._y;
-        var y2 = this._margin.top + this._contentHeight;
-        this._highlights.forEach(function (highlight) {
-            highlight
-                .attr("y1", 0)
-                .attr("y2", y2)
-                .attr("y", function(measurement) { return yScale(measurement.value); })
-                .attr("x1", function(measurement) { return xScale(measurement.time); })
-                .attr("x2", function(measurement) { return xScale(measurement.time); });
-        });
-    },
-    _computeXAxisDomain: function (timeSeries)
-    {
-        var extent = d3.extent(timeSeries, function(point) { return point.time; });
-        var margin = 3600 * 1000; // Use x.inverse to compute the right amount from a margin.
-        return [+extent[0] - margin, +extent[1] + margin];
-    },
-    _computeYAxisDomain: function (startTime, endTime)
-    {
-        var range = this._minMaxForAllTimeSeries(startTime, endTime);
-        var min = range[0];
-        var max = range[1];
-        if (max < min)
-            min = max = 0;
-        var diff = max - min;
-        var margin = diff * 0.05;
-
-        yExtent = [min - margin, max + margin];
-//        if (yMin !== undefined)
-//            yExtent[0] = parseInt(yMin);
-        return yExtent;
-    },
-    _minMaxForAllTimeSeries: function (startTime, endTime)
-    {
-        var currentRange = this._currentTimeSeries.minMaxForTimeRange(startTime, endTime);
-        var baselineRange = this._baselineTimeSeries ? this._baselineTimeSeries.minMaxForTimeRange(startTime, endTime) : [Number.MAX_VALUE, Number.MIN_VALUE];
-        var targetRange = this._targetTimeSeries ? this._targetTimeSeries.minMaxForTimeRange(startTime, endTime) : [Number.MAX_VALUE, Number.MIN_VALUE];
-        return [
-            Math.min(currentRange[0], baselineRange[0], targetRange[0]),
-            Math.max(currentRange[1], baselineRange[1], targetRange[1]),
-        ];
-    },
-    _currentSelection: function ()
-    {
-        return this._brush && !this._brush.empty() ? this._brush.extent() : null;
-    },
-    _domainChanged: function ()
-    {
-        var selection = this._currentSelection() || this.get('sharedSelection');
-        var newXDomain = this._updateDomain();
-
-        if (selection && newXDomain && selection[0] <= newXDomain[0] && newXDomain[1] <= selection[1])
-            selection = null; // Otherwise the user has no way of clearing the selection.
-
-        this._relayoutDataAndAxes(selection);
-    }.observes('domain'),
-    _selectionChanged: function ()
-    {
-        this._updateSelection(this.get('selection'));
-    }.observes('selection'),
-    _updateSelection: function (newSelection)
-    {
-        if (!this._brush)
-            return;
-
-        var currentSelection = this._currentSelection();
-        if (newSelection && currentSelection && App.domainsAreEqual(newSelection, currentSelection))
-            return;
-
-        var domain = this._x.domain();
-        if (!newSelection || App.domainsAreEqual(domain, newSelection))
-            this._brush.clear();
-        else
-            this._brush.extent(newSelection);
-        this._updateBrush();
-
-        this._setCurrentSelection(newSelection);
-    },
-    _brushChanged: function ()
-    {
-        if (this._brush.empty()) {
-            if (!this._brushExtent)
-                return;
-
-            this.set('selectionIsLocked', false);
-            this._setCurrentSelection(undefined);
-
-            // Avoid locking the indicator in _mouseDown when the brush was cleared in the same mousedown event.
-            this._brushJustChanged = true;
-            var self = this;
-            setTimeout(function () {
-                self._brushJustChanged = false;
-            }, 0);
-
-            return;
-        }
-
-        this.set('selectionIsLocked', true);
-        this._setCurrentSelection(this._brush.extent());
-    },
-    _keyPressed: function (event)
-    {
-        if (!this._currentItemIndex || this._currentSelection())
-            return;
-
-        var newIndex;
-        switch (event.keyCode) {
-        case 37: // Left
-            newIndex = this._currentItemIndex - 1;
-            break;
-        case 39: // Right
-            newIndex = this._currentItemIndex + 1;
-            break;
-        case 38: // Up
-        case 40: // Down
-        default:
-            return;
-        }
-
-        // Unlike mousemove, keydown shouldn't move off the edge.
-        if (this._currentTimeSeriesData[newIndex])
-            this._setCurrentItem(newIndex);
-    },
-    _mouseMoved: function (event)
-    {
-        if (!this._margin || this._currentSelection() || this._currentItemLocked)
-            return;
-
-        var point = this._mousePointInGraph(event);
-
-        this._selectClosestPointToMouseAsCurrentItem(point);
-    },
-    _mouseLeft: function (event)
-    {
-        if (!this._margin || this._currentItemLocked)
-            return;
-
-        this._selectClosestPointToMouseAsCurrentItem(null);
-    },
-    _mouseDown: function (event)
-    {
-        if (!this._margin || this._currentSelection() || this._brushJustChanged)
-            return;
-
-        var point = this._mousePointInGraph(event);
-        if (!point)
-            return;
-
-        if (this._currentItemLocked) {
-            this._currentItemLocked = false;
-            this.set('selectedItem', null);
-            return;
-        }
-
-        this._currentItemLocked = true;
-        this._selectClosestPointToMouseAsCurrentItem(point);
-    },
-    _mousePointInGraph: function (event)
-    {
-        var offset = $(this.get('element')).offset();
-        if (!offset || !$(event.target).closest('svg').length)
-            return null;
-
-        var point = {
-            x: event.pageX - offset.left - this._margin.left,
-            y: event.pageY - offset.top - this._margin.top
-        };
-
-        var xScale = this._x;
-        var yScale = this._y;
-        var xDomain = xScale.domain();
-        var yDomain = yScale.domain();
-        if (point.x >= xScale(xDomain[0]) && point.x <= xScale(xDomain[1])
-            && point.y <= yScale(yDomain[0]) && point.y >= yScale(yDomain[1]))
-            return point;
-
-        return null;
-    },
-    _selectClosestPointToMouseAsCurrentItem: function (point)
-    {
-        var xScale = this._x;
-        var yScale = this._y;
-        var distanceHeuristics = function (m) {
-            var mX = xScale(m.time);
-            var mY = yScale(m.value);
-            var xDiff = mX - point.x;
-            var yDiff = mY - point.y;
-            return xDiff * xDiff + yDiff * yDiff / 16; // Favor horizontal affinity.
-        };
-        distanceHeuristics = function (m) {
-            return Math.abs(xScale(m.time) - point.x);
-        }
-
-        var newItemIndex;
-        if (point && !this._currentSelection()) {
-            var distances = this._currentTimeSeriesData.map(distanceHeuristics);
-            var minDistance = Number.MAX_VALUE;
-            for (var i = 0; i < distances.length; i++) {
-                if (distances[i] < minDistance) {
-                    newItemIndex = i;
-                    minDistance = distances[i];
-                }
-            }
-        }
-
-        this._setCurrentItem(newItemIndex);
-        this._updateSelectionToolbar();
-    },
-    _currentTimeChanged: function ()
-    {
-        if (!this._margin || this._currentSelection() || this._currentItemLocked)
-            return
-
-        var currentTime = this.get('currentTime');
-        if (currentTime) {
-            for (var i = 0; i < this._currentTimeSeriesData.length; i++) {
-                var point = this._currentTimeSeriesData[i];
-                if (point.time >= currentTime) {
-                    this._setCurrentItem(i, /* doNotNotify */ true);
-                    return;
-                }
-            }
-        }
-        this._setCurrentItem(undefined, /* doNotNotify */ true);
-    }.observes('currentTime'),
-    _setCurrentItem: function (newItemIndex, doNotNotify)
-    {
-        if (newItemIndex === this._currentItemIndex) {
-            if (this._currentItemLocked)
-                this.set('selectedItem', this.get('currentItem') ? this.get('currentItem').measurement.id() : null);
-            return;
-        }
-
-        var newItem = this._currentTimeSeriesData[newItemIndex];
-        this._brushExtent = undefined;
-        this._currentItemIndex = newItemIndex;
-
-        if (!newItem) {
-            this._currentItemLocked = false;
-            this.set('selectedItem', null);
-        }
-
-        this._updateCurrentItemIndicators();
-
-        if (!doNotNotify)
-            this.set('currentTime', newItem ? newItem.time : undefined);
-
-        this.set('currentItem', newItem);
-        if (this._currentItemLocked)
-            this.set('selectedItem', newItem ? newItem.measurement.id() : null);
-    },
-    _selectedItemChanged: function ()
-    {
-        if (!this._margin)
-            return;
-
-        var selectedId = this.get('selectedItem');
-        var currentItem = this.get('currentItem');
-        if (currentItem && currentItem.measurement.id() == selectedId)
-            return;
-
-        var series = this._currentTimeSeriesData;
-        var selectedItemIndex = undefined;
-        for (var i = 0; i < series.length; i++) {
-            if (series[i].measurement.id() == selectedId) {
-                this._updateSelection(null);
-                this._currentItemLocked = true;
-                this._setCurrentItem(i);
-                this._updateSelectionToolbar();
-                return;
-            }
-        }
-    }.observes('selectedItem').on('init'),
-    _highlightedItemsChanged: function () {
-        if (!this._margin)
-            return;
-
-        var highlightedItems = this.get('highlightedItems');
-
-        var data = this._currentTimeSeriesData.filter(function (item) { return highlightedItems[item.measurement.id()]; });
-
-        if (this._highlights.length)
-            this._highlights.forEach(function (highlight) { highlight.remove(); });
-
-        this._highlights.push(this._clippedContainer
-            .selectAll(".highlight")
-                .data(data)
-            .enter().append("line")
-                .attr("class", "highlight"));
-
-        this._updateHighlightPositions();
-
-    }.observes('highlightedItems'),
-    _rangesChanged: function ()
-    {
-        if (!this._currentTimeSeries)
-            return;
-
-        function midPoint(firstPoint, secondPoint) {
-            if (firstPoint && secondPoint)
-                return (+firstPoint.time + +secondPoint.time) / 2;
-            if (firstPoint)
-                return firstPoint.time;
-            return secondPoint.time;
-        }
-        var currentTimeSeries = this._currentTimeSeries;
-        var linkRoute = this.get('rangeRoute');
-        this.set('rangeBars', (this.get('ranges') || []).map(function (range) {
-            var start = currentTimeSeries.findPointByMeasurementId(range.get('startRun'));
-            var end = currentTimeSeries.findPointByMeasurementId(range.get('endRun'));
-            return Ember.Object.create({
-                startTime: midPoint(currentTimeSeries.previousPoint(start), start),
-                endTime: midPoint(end, currentTimeSeries.nextPoint(end)),
-                range: range,
-                left: null,
-                right: null,
-                rowIndex: null,
-                top: null,
-                bottom: null,
-                linkRoute: linkRoute,
-                linkId: range.get('id'),
-                label: range.get('label'),
-            });
-        }));
-
-        this._updateRangeBarRects();
-    }.observes('ranges'),
-    _updateRangeBarRects: function () {
-        var rangeBars = this.get('rangeBars');
-        if (!rangeBars || !rangeBars.length)
-            return;
-
-        var xScale = this._x;
-        var yScale = this._y;
-
-        // Expand the width of each range as needed and sort ranges by the left-edge of ranges.
-        var minWidth = 3;
-        var sortedBars = rangeBars.map(function (bar) {
-            var left = xScale(bar.get('startTime'));
-            var right = xScale(bar.get('endTime'));
-            if (right - left < minWidth) {
-                left -= minWidth / 2;
-                right += minWidth / 2;
-            }
-            bar.set('left', left);
-            bar.set('right', right);
-            return bar;
-        }).sort(function (first, second) { return first.get('left') - second.get('left'); });
-
-        // At this point, left edges of all ranges prior to a range R1 is on the left of R1.
-        // Place R1 into a row in which right edges of all ranges prior to R1 is on the left of R1 to avoid overlapping ranges.
-        var rows = [];
-        sortedBars.forEach(function (bar) {
-            var rowIndex = 0;
-            for (; rowIndex < rows.length; rowIndex++) {
-                var currentRow = rows[rowIndex];
-                if (currentRow[currentRow.length - 1].get('right') < bar.get('left')) {
-                    currentRow.push(bar);
-                    break;
-                }
-            }
-            if (rowIndex >= rows.length)
-                rows.push([bar]);
-            bar.set('rowIndex', rowIndex);
-        });
-        var rowHeight = 0.6 * this._rem;
-        var firstRowTop = this._contentHeight - rows.length * rowHeight;
-        var barHeight = 0.5 * this._rem;
-
-        $(this.get('element')).find('.rangeBarsContainerInlineStyle').css({
-            left: this._margin.left + 'px',
-            top: this._margin.top + firstRowTop + 'px',
-            width: this._contentWidth + 'px',
-            height: rows.length * barHeight + 'px',
-            overflow: 'hidden',
-            position: 'absolute',
-        });
-
-        var margin = this._margin;
-        sortedBars.forEach(function (bar) {
-            var top = bar.get('rowIndex') * rowHeight;
-            var height = barHeight;
-            var left = bar.get('left');
-            var width = bar.get('right') - left;
-            bar.set('inlineStyle', 'left: ' + left + 'px; top: ' + top + 'px; width: ' + width + 'px; height: ' + height + 'px;');
-        });
-    },
-    _updateCurrentItemIndicators: function ()
-    {
-        if (!this._currentItemLine)
-            return;
-
-        var item = this._currentTimeSeriesData[this._currentItemIndex];
-        if (!item) {
-            this._currentItemLine.attr("x1", -1000).attr("x2", -1000);
-            this._currentItemCircle.attr("cx", -1000);
-            return;
-        }
-
-        var x = this._x(item.time);
-        var y = this._y(item.value);
-
-        this._currentItemLine
-            .attr("x1", x)
-            .attr("x2", x);
-
-        this._currentItemCircle
-            .attr("cx", x)
-            .attr("cy", y);
-    },
-    _setCurrentSelection: function (newSelection)
-    {
-        if (this._brushExtent === newSelection)
-            return;
-
-        var points = null;
-        if (newSelection) {
-            points = this._currentTimeSeriesData
-                .filter(function (point) { return point.time >= newSelection[0] && point.time <= newSelection[1]; });
-            if (!points.length)
-                points = null;
-        }
-
-        this._brushExtent = newSelection;
-        this._setCurrentItem(undefined);
-        this._updateSelectionToolbar();
-
-        if (!App.domainsAreEqual(this.get('selection'), newSelection))
-            this.set('selection', newSelection);
-        this.set('selectedPoints', points);
-    },
-    _updateSelectionToolbar: function ()
-    {
-        if (!this.get('interactive'))
-            return;
-
-        var selection = this._currentSelection();
-        var selectionToolbar = $(this.get('element')).children('.selection-toolbar');
-        if (selection) {
-            var left = this._x(selection[0]);
-            var right = this._x(selection[1]);
-            selectionToolbar
-                .css({left: this._margin.left + right, top: this._margin.top + this._contentHeight})
-                .show();
-        } else
-            selectionToolbar.hide();
-    },
-    actions: {
-        zoom: function ()
-        {
-            this.sendAction('zoom', this._currentSelection());
-            this.set('selection', null);
-        },
-        openRange: function (range)
-        {
-            this.sendAction('openRange', range);
-        },
-    },
-});
-
-
-
-App.CommitsViewerComponent = Ember.Component.extend({
-    repository: null,
-    revisionInfo: null,
-    commits: null,
-    commitsChanged: function ()
-    {
-        var revisionInfo = this.get('revisionInfo');
-
-        var to = revisionInfo.get('currentRevision');
-        var from = revisionInfo.get('previousRevision');
-        var repository = this.get('repository');
-        if (!from || !repository || !repository.get('hasReportedCommits'))
-            return;
-
-        var self = this;
-        CommitLogs.fetchForTimeRange(repository.get('id'), from, to).then(function (commits) {
-            if (self.isDestroyed)
-                return;
-            self.set('commits', commits.map(function (commit) {
-                return Ember.Object.create({
-                    repository: repository,
-                    revision: commit.revision,
-                    url: repository.urlForRevision(commit.revision),
-                    author: commit.authorName || commit.authorEmail,
-                    message: commit.message ? commit.message.substr(0, 75) : null,
-                });
-            }));
-        }, function () {
-            if (!self.isDestroyed)
-                self.set('commits', []);
-        })
-    }.observes('repository').observes('revisionInfo').on('init'),
-});
-
 
 App.AnalysisRoute = Ember.Route.extend({
     model: function () {