Changeset 179913 in webkit

Timestamp:

Feb 10, 2015 6:45:43 PM (9 years ago)

Author:

rniwa@webkit.org

Message:

New perf dashboard shouldn't always show outliners
​https://bugs.webkit.org/show_bug.cgi?id=141445

Reviewed by Chris Dumez.

Use the simple moving average with an average difference envelope to compute the y-axis range to show
to avoid expanding it spuriously to show one off outlier.

• public/v2/app.js:

(App.Pane): Don't show the full y-axis range by default.
(App.Pane._computeChartData): Use the first strategies for the moving average and the enveloping if
one is not specified by the user but without showing them in the charts.
(App.Pane._computeMovingAverage): Takes moving average and enveloping strategies as arguments instead
of retrieving via chosenMovingAverageStrategy and chosenEnvelopingStrategy.

(App.ChartsController._parsePaneList): Added showFullYAxis as a query string argument to each pane.
(App.ChartsController._serializePaneList): Ditto.

• public/v2/chart-pane.css: Added a CSS rule for when y-axis is clickable.

• public/v2/index.html: Pass in showFullYAxis as an argument to the main interactive chart.

• public/v2/interactive-chart.js:

(App.InteractiveChartComponent._constructGraphIfPossible): Add an event listener on y-axis labels when
the chart is interactive so that toggle showFullYAxis. Also hide the moving average and/or the envelope
if they are not specified by the user (i.e. only used to adjust y-axis range).
(App.InteractiveChartComponent._updateDomain): Don't exit early if y-axis domains are different even if
x-axis domain remained the same. Without this change, the charts would never redraw.
(App.InteractiveChartComponent._minMaxForAllTimeSeries): Use the moving average instead of the current
time series to compute the y-axis range if showFullYAxis is false. When showFullYAxis is true, expand
y-axis all the way down to 0 or the minimum value in the current time series whichever is smaller.

• public/v2/js/statistics.js:

(Statistics.MovingAverageStrategies): Use a wider window in Simple Moving Average by default.

Location:

trunk/Websites/perf.webkit.org

Files:

• ChangeLog (modified) (1 diff)
• public/v2/app.js (modified) (5 diffs)
• public/v2/chart-pane.css (modified) (1 diff)
• public/v2/index.html (modified) (1 diff)
• public/v2/interactive-chart.js (modified) (6 diffs)
• public/v2/js/statistics.js (modified) (1 diff)

trunk/Websites/perf.webkit.org/ChangeLog

@@ +1 @@
+2015-02-10  Ryosuke Niwa  <rniwa@webkit.org>
+
+        New perf dashboard shouldn't always show outliners
+        https://bugs.webkit.org/show_bug.cgi?id=141445
+
+        Reviewed by Chris Dumez.
+
+        Use the simple moving average with an average difference envelope to compute the y-axis range to show
+        to avoid expanding it spuriously to show one off outlier.
+
+        * public/v2/app.js:
+        (App.Pane): Don't show the full y-axis range by default.
+        (App.Pane._computeChartData): Use the first strategies for the moving average and the enveloping if
+        one is not specified by the user but without showing them in the charts.
+        (App.Pane._computeMovingAverage): Takes moving average and enveloping strategies as arguments instead
+        of retrieving via chosenMovingAverageStrategy and chosenEnvelopingStrategy.
+
+        (App.ChartsController._parsePaneList): Added showFullYAxis as a query string argument to each pane.
+        (App.ChartsController._serializePaneList): Ditto.
+
+        * public/v2/chart-pane.css: Added a CSS rule for when y-axis is clickable.
+
+        * public/v2/index.html: Pass in showFullYAxis as an argument to the main interactive chart.
+
+        * public/v2/interactive-chart.js:
+        (App.InteractiveChartComponent._constructGraphIfPossible): Add an event listener on y-axis labels when
+        the chart is interactive so that toggle showFullYAxis. Also hide the moving average and/or the envelope
+        if they are not specified by the user (i.e. only used to adjust y-axis range).
+        (App.InteractiveChartComponent._updateDomain): Don't exit early if y-axis domains are different even if
+        x-axis domain remained the same. Without this change, the charts would never redraw.
+        (App.InteractiveChartComponent._minMaxForAllTimeSeries): Use the moving average instead of the current
+        time series to compute the y-axis range if showFullYAxis is false. When showFullYAxis is true, expand
+        y-axis all the way down to 0 or the minimum value in the current time series whichever is smaller.
+
+        * public/v2/js/statistics.js:
+        (Statistics.MovingAverageStrategies): Use a wider window in Simple Moving Average by default.
+
 2015-02-10  Ryosuke Niwa  <rniwa@webkit.org>
 

trunk/Websites/perf.webkit.org/public/v2/app.js

@@ -298 +298 @@
     metric: null,
     selectedItem: null,
+    showFullYAxis: false,
     searchCommit: function (repository, keyword) {
         var self = this;
@@ -477 +478 @@
 
         var chartData = App.createChartData(this.get('fetchedData'));
-        chartData.movingAverage = this._computeMovingAverage(chartData);
-
-        this._updateStrategyConfigIfNeeded(this.get('chosenMovingAverageStrategy'), 'movingAverageConfig');
-        this._updateStrategyConfigIfNeeded(this.get('chosenEnvelopingStrategy'), 'envelopingConfig');
+
+        var movingAverageStrategy = this.get('chosenMovingAverageStrategy');
+        this._updateStrategyConfigIfNeeded(movingAverageStrategy, 'movingAverageConfig');
+
+        var envelopingStrategy = this.get('chosenEnvelopingStrategy');
+        this._updateStrategyConfigIfNeeded(envelopingStrategy, 'envelopingConfig');
+
+        if (!movingAverageStrategy || !movingAverageStrategy.execute) {
+            movingAverageStrategy = Statistics.MovingAverageStrategies[0];
+            chartData.hideMovingAverage = true;
+        }
+        if (!envelopingStrategy || !envelopingStrategy.execute) {
+            envelopingStrategy = Statistics.EnvelopingStrategies[0];
+            chartData.hideEnvelope = true;
+        }
+
+        chartData.movingAverage = this._computeMovingAverage(chartData, movingAverageStrategy, envelopingStrategy);
 
         this.set('chartData', chartData);
     }.observes('chosenMovingAverageStrategy', 'chosenMovingAverageStrategy.parameterList.@each.value',
         'chosenEnvelopingStrategy', 'chosenEnvelopingStrategy.parameterList.@each.value'),
-    _computeMovingAverage: function (chartData)
+    _computeMovingAverage: function (chartData, movingAverageStrategy, envelopingStrategy)
     {
         var currentTimeSeriesData = chartData.current.series();
-        var movingAverageStrategy = this.get('chosenMovingAverageStrategy');
-        if (!movingAverageStrategy || !movingAverageStrategy.execute)
-            return null;
-
         var movingAverageValues = this._executeStrategy(movingAverageStrategy, currentTimeSeriesData);
         if (!movingAverageValues)
             return null;
 
-        var envelopeDelta = null;
-        var envelopingStrategy = this.get('chosenEnvelopingStrategy');
-        if (envelopingStrategy && envelopingStrategy.execute)
-            envelopeDelta = this._executeStrategy(envelopingStrategy, currentTimeSeriesData, [movingAverageValues]);
-        
+        var envelopeDelta = this._executeStrategy(envelopingStrategy, currentTimeSeriesData, [movingAverageValues]);
+
         return new TimeSeries(currentTimeSeriesData.map(function (point, index) {
             var value = movingAverageValues[index];
@@ -672 +679 @@
                 selectedItem: selectedItem,
                 timeRange: timeRange,
-                movingAverageConfig: paneInfo[3],
-                envelopingConfig: paneInfo[4],
+                showFullYAxis: paneInfo[3],
+                movingAverageConfig: paneInfo[4],
+                envelopingConfig: paneInfo[5],
             });
         });
@@ -688 +696 @@
                 pane.get('metricId'),
                 pane.get('timeRange') ? pane.get('timeRange').map(function (date) { return date.getTime() }) : pane.get('selectedItem'),
+                pane.get('showFullYAxis'),
                 pane.get('movingAverageConfig'),
                 pane.get('envelopingConfig'),
@@ -698 +707 @@
         Ember.run.debounce(this, '_updateQueryString', 1000);
     }.observes('sharedZoom', 'panes.@each.platform', 'panes.@each.metric', 'panes.@each.selectedItem', 'panes.@each.timeRange',
-        'panes.@each.movingAverageConfig', 'panes.@each.envelopingConfig'),
+        'panes.@each.showFullYAxis', 'panes.@each.movingAverageConfig', 'panes.@each.envelopingConfig'),
 
     _updateQueryString: function ()

trunk/Websites/perf.webkit.org/public/v2/chart-pane.css

@@ -443 +443 @@
 }
 
+.chart .axis.interactive text {
+    cursor: pointer;
+}
+
 .chart .rangeBar {
     display: block;

trunk/Websites/perf.webkit.org/public/v2/index.html

@@ -178 +178 @@
                             selectedPoints=selectedPoints
                             markedPoints=markedPoints
+                            showFullYAxis=showFullYAxis
                             zoom="zoomed"}}
                     {{else}}

trunk/Websites/perf.webkit.org/public/v2/interactive-chart.js

@@ -77 +77 @@
         }
 
+        var isInteractive = this.get('interactive');
         if (this.get('showYAxis')) {
             this._yAxis = d3.svg.axis().scale(this._y).orient("left").ticks(6).tickFormat(chartData.formatter);
-            this._yAxisLabels = svg.append("g")
-                .attr("class", "y axis");
+            
+            this._yAxisLabels = svg.append('g').attr('class', 'y axis' + (isInteractive ? ' interactive' : ''));
+            if (isInteractive) {
+                var self = this;
+                this._yAxisLabels.on('click', function () { self.toggleProperty('showFullYAxis'); });
+            }
         }
 
@@ -124 +129 @@
         }
 
-        var foregroundClass = this._movingAverageTimeSeries ? '' : ' foreground';
+        var movingAverageIsVisible = this._movingAverageTimeSeries && !chartData.hideMovingAverage;
+        var foregroundClass = movingAverageIsVisible ? '' : ' foreground';
         this._areas.push(this._clippedContainer
             .append("path")
@@ -142 +148 @@
                 .attr("r", this.get('chartPointRadius') || 1));
 
-        if (this._movingAverageTimeSeries) {
+        if (movingAverageIsVisible) {
             this._paths.push(this._clippedContainer
                 .append("path")
                 .datum(this._movingAverageTimeSeries.series())
                 .attr("class", "movingAverage"));
-            this._areas.push(this._clippedContainer
-                .append("path")
-                .datum(this._movingAverageTimeSeries.series())
-                .attr("class", "envelope"));
-        }
-
-        if (this.get('interactive')) {
+
+            if (!chartData.hideEnvelope) {
+                this._areas.push(this._clippedContainer
+                    .append("path")
+                    .datum(this._movingAverageTimeSeries.series())
+                    .attr("class", "envelope"));
+            }
+        }
+
+        if (isInteractive) {
             this._currentItemLine = this._clippedContainer
                 .append("line")
@@ -194 +203 @@
         if (!xDomain)
             xDomain = intrinsicXDomain;
-        var currentDomain = this._x.domain();
-        if (currentDomain && App.domainsAreEqual(currentDomain, xDomain))
+        var yDomain = this._computeYAxisDomain(xDomain[0], xDomain[1]);
+
+        var currentXDomain = this._x.domain();
+        var currentYDomain = this._y.domain();
+        if (currentXDomain && App.domainsAreEqual(currentXDomain, xDomain)
+            && currentYDomain && App.domainsAreEqual(currentYDomain, yDomain))
             return currentDomain;
 
-        var yDomain = this._computeYAxisDomain(xDomain[0], xDomain[1]);
         this._x.domain(xDomain);
         this._y.domain(yDomain);
@@ -340 +352 @@
     _minMaxForAllTimeSeries: function (startTime, endTime)
     {
-        var currentRange = this._currentTimeSeries.minMaxForTimeRange(startTime, endTime);
+        var shouldShowFullYAxis = this.get('showFullYAxis');
+        var mainTimeSeries = this._movingAverageTimeSeries && !shouldShowFullYAxis ? this._movingAverageTimeSeries : this._currentTimeSeries;
+        var currentRange = mainTimeSeries.minMaxForTimeRange(startTime, endTime);
+        if (shouldShowFullYAxis)
+            currentRange[0] = Math.min(0, currentRange[0]);
+
         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];
-        var movingAverageRange = this._movingAverageTimeSeries ? this._movingAverageTimeSeries.minMaxForTimeRange(startTime, endTime) : [Number.MAX_VALUE, Number.MIN_VALUE];
         return [
-            Math.min(currentRange[0], baselineRange[0], targetRange[0], movingAverageRange[0]),
-            Math.max(currentRange[1], baselineRange[1], targetRange[1], movingAverageRange[1]),
+            Math.min(currentRange[0], baselineRange[0], targetRange[0]),
+            Math.max(currentRange[1], baselineRange[1], targetRange[1]),
         ];
     },
@@ -362 +378 @@
 
         this._relayoutDataAndAxes(selection);
-    }.observes('domain'),
+    }.observes('domain', 'showFullYAxis'),
     _selectionChanged: function ()
     {

trunk/Websites/perf.webkit.org/public/v2/js/statistics.js

@@ -105 +105 @@
             label: 'Simple Moving Average',
             parameterList: [
-                {label: "Backward window size", value: 5, min: 2, step: 1},
-                {label: "Forward window size", value: 3, min: 0, step: 1}
+                {label: "Backward window size", value: 8, min: 2, step: 1},
+                {label: "Forward window size", value: 4, min: 0, step: 1}
             ],
             execute: function (backwardWindowSize, forwardWindowSize, values) {