REGRESSION: Perf dashboard sometimes fails to update zooming level

https://bugs.webkit.org/show_bug.cgi?id=143359

Reviewed by Darin Adler.

The bug was caused by various bugs that ended up in an exception.

* public/v2/app.js:
(App.Pane._handleFetchErrors): Removed superfluous console.log.
(App.Pane.computeStatus): Fixed the bug in r182185 that previousPoint could be null.
(App.PaneController.actions.zoomed): Update the overview when the main chart triggered a zoom.
* public/v2/index.html: Replaced all instances of href="#" by href="javascript:false" to avoid navigating
to # when Ember.js fails to attach event listeners on time.
* public/v2/interactive-chart.js:
(App.InteractiveChartComponent._updateDimensionsIfNeeded): Avoid using a negative width or height when
the containing element's size is 0.
(App.InteractiveChartComponent._updateBrush): Ditto.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@182329 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 195ebd3c9f3c2b2b4cf8d23d0f697c21bada8865..bb80e125cc87fdde427f31ee76156339e841a21c 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,23 @@
+2015-04-03  Ryosuke Niwa  <rniwa@webkit.org>
+
+        REGRESSION: Perf dashboard sometimes fails to update zooming level
+        https://bugs.webkit.org/show_bug.cgi?id=143359
+
+        Reviewed by Darin Adler.
+
+        The bug was caused by various bugs that ended up in an exception.
+
+        * public/v2/app.js:
+        (App.Pane._handleFetchErrors): Removed superfluous console.log.
+        (App.Pane.computeStatus): Fixed the bug in r182185 that previousPoint could be null.
+        (App.PaneController.actions.zoomed): Update the overview when the main chart triggered a zoom.
+        * public/v2/index.html: Replaced all instances of href="#" by href="javascript:false" to avoid navigating
+        to # when Ember.js fails to attach event listeners on time.
+        * public/v2/interactive-chart.js:
+        (App.InteractiveChartComponent._updateDimensionsIfNeeded): Avoid using a negative width or height when
+        the containing element's size is 0.
+        (App.InteractiveChartComponent._updateBrush): Ditto.
+
 2015-04-02  Ryosuke Niwa  <rniwa@webkit.org>
 
         Perf dashboard should have UI to test out anomaly detection strategies

diff --git a/Websites/perf.webkit.org/public/v2/app.js b/Websites/perf.webkit.org/public/v2/app.js
index 4595f10e68935f856f630982011211a026c8144f..6a53a32702fe2232ce7309057d1a242805f2f75b 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/app.js
+++ b/Websites/perf.webkit.org/public/v2/app.js
@@ -374,7 +374,6 @@ App.Pane = Ember.Object.extend({
     },
     _handleFetchErrors: function (platformId, metricId, result)
     {
-        console.log(platformId, metricId, result)
         if (!result || typeof(result) === "string")
             this.set('failure', 'Failed to fetch the JSON with an error: ' + result);
         else if (!result.platform)
@@ -423,13 +422,18 @@ App.Pane = Ember.Object.extend({
         } else if (diffFromTarget !== undefined)
             label = formatter(Math.abs(diffFromTarget)) + ' until target';
 
-        var valueDelta = previousPoint ? chartData.deltaFormatter(currentPoint.value - previousPoint.value) : null;
+        var valueDelta = null;
+        var relativeDelta = null;
+        if (previousPoint) {
+            valueDelta = chartData.deltaFormatter(currentPoint.value - previousPoint.value);
+            relativeDelta = d3.format('+.2p')((currentPoint.value - previousPoint.value) / previousPoint.value);
+        }
         return {
             className: className,
             label: label,
             currentValue: chartData.formatter(currentPoint.value),
             valueDelta: valueDelta,
-            relativeDelta: d3.format('+.2p')((currentPoint.value - previousPoint.value) / previousPoint.value),
+            relativeDelta: relativeDelta,
         };
     },
     _relativeDifferentToLaterPointInTimeSeries: function (currentPoint, timeSeries)
@@ -969,6 +973,8 @@ App.PaneController = Ember.ObjectController.extend({
         zoomed: function (selection)
         {
             this.set('mainPlotDomain', selection ? selection : this.get('overviewDomain'));
+            if (selection)
+                this.set('overviewSelection', selection);
             Ember.run.debounce(this, 'propagateZoom', 100);
         },
     },

diff --git a/Websites/perf.webkit.org/public/v2/index.html b/Websites/perf.webkit.org/public/v2/index.html
index a62db5dd2c9516a693a177177e78fb5fe7c64031..4ecf3bb662a4c543f5f3c4db746a3b09d93a2d89 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/index.html
+++ b/Websites/perf.webkit.org/public/v2/index.html
@@ -31,7 +31,7 @@
             {{view App.NumberOfDaysControlView tagName="ul" numberOfDays=numberOfDays}}
             <ul class="controls">
                 <li>
-                    <a href="#" class="control-button" {{action toggleEditMode}}>
+                    <a href="javascript:false" class="control-button" {{action toggleEditMode}}>
                         {{#if controller.editMode}}
                             Finish editing
                         {{else}}
@@ -49,7 +49,7 @@
                 {{#each headerColumns}}
                     {{#if controller.editMode}}
                         <th>
-                            <a href="#" title="Remove column" {{action "removeColumn" index}}>
+                            <a href="javascript:false" title="Remove column" {{action "removeColumn" index}}>
                                 {{partial "close-button"}}
                             </a>
                             {{input value=label}}
@@ -68,7 +68,7 @@
                 <tr>
                     {{#if controller.editMode}}
                         <th>
-                            <a href="#" title="Remove row" {{action "removeRow" this}}>
+                            <a href="javascript:false" title="Remove row" {{action "removeRow" this}}>
                                 {{partial "close-button"}}
                             </a>
                             {{input value=header}}
@@ -106,7 +106,7 @@
                                     {{/if}}
                                 {{/if}}
                                 {{#if controller.editMode}}
-                                    <a href="#" title="Reset pane" class="reset" {{action "resetPane" this}}>
+                                    <a href="javascript:false" title="Reset pane" class="reset" {{action "resetPane" this}}>
                                         {{partial "close-button"}}
                                     </a>
                                 {{/if}}
@@ -146,17 +146,17 @@
             <section class="chart-pane" tabindex="0">
                 <header>
                     <h1 {{action "toggleDetails"}}>{{metric.fullName}} - {{ platform.name}}</h1>
-                    <a href="#" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
+                    <a href="javascript:false" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
                     {{#if movingAverageStrategies}}
-                        <a href="#" title="Statistical Tools" class="stat-button" {{action "toggleStatPane"}}>{{partial "stat-button"}}</a>
+                        <a href="javascript:false" title="Statistical Tools" class="stat-button" {{action "toggleStatPane"}}>{{partial "stat-button"}}</a>
                     {{/if}}
                     {{#if App.Manifest.bugTrackers}}
-                        <a href="#" title="Analysis" class="bugs-button" {{action "toggleBugsPane"}}>
+                        <a href="javascript:false" title="Analysis" class="bugs-button" {{action "toggleBugsPane"}}>
                             {{partial "analysis-button"}}
                         </a>
                     {{/if}}
                     {{#if App.Manifest.repositoriesWithReportedCommits}}
-                        <a href="#" title="Search" class="search-button" {{action "toggleSearchPane"}}>{{partial "search-button"}}</a>
+                        <a href="javascript:false" title="Search" class="search-button" {{action "toggleSearchPane"}}>{{partial "search-button"}}</a>
                     {{/if}}
                 </header>
 
@@ -227,7 +227,7 @@
     <script type="text/x-handlebars" data-template-name="components/interactive-chart">
         {{#if interactive}}
             <div class="selection-toolbar" style="display: none;">
-                <a href="#" class="button" {{action "zoom"}}>
+                <a href="javascript:false" class="button" {{action "zoom"}}>
                     <svg class="zoom" viewBox="0 0 100 100">
                         <g stroke-width="0" stroke="none">
                             <polygon points="25,25 5,50 25,75"/>
@@ -456,22 +456,22 @@
 
     <script type="text/x-handlebars" data-template-name="number-of-days-controls">
         <li class="numberOfDaysIs1">
-            <a href="#" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
+            <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
         </li>
         <li class="numberOfDaysIs7">
-            <a href="#" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
+            <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
         </li>
         <li class="numberOfDaysIs30">
-            <a href="#" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
+            <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
         </li>
         <li class="numberOfDaysIs90">
-            <a href="#" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
+            <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
         </li>
         <li class="numberOfDaysIs183">
-            <a href="#" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
+            <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
         </li>
         <li class="numberOfDaysIs365">
-            <a href="#" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
+            <a href="javascript:false" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
         </li>
     </script>
 
@@ -493,7 +493,7 @@
             {{else}}
                 <li>
                     {{#if actionName}}
-                        <a href="#" class="label" {{action actionName actionArgument}}>{{label}}</a>
+                        <a href="javascript:false" class="label" {{action actionName actionArgument}}>{{label}}</a>
                     {{else}}
                         <a class="label">{{label}}</a>
                     {{/if}}

diff --git a/Websites/perf.webkit.org/public/v2/interactive-chart.js b/Websites/perf.webkit.org/public/v2/interactive-chart.js
index 40ed2d00bf04d51b6d83582a6529924f084ea358..1b0c7603cd4b40543bf18047e85ca71a985c0325 100644 (file)
--- a/Websites/perf.webkit.org/public/v2/interactive-chart.js
+++ b/Websites/perf.webkit.org/public/v2/interactive-chart.js
@@ -238,8 +238,8 @@ App.InteractiveChartComponent = Ember.Component.extend({
             margin.left += 3 * rem;
 
         this._margin = margin;
-        this._contentWidth = this._totalWidth - margin.left - margin.right;
-        this._contentHeight = this._totalHeight - margin.top - margin.bottom;
+        this._contentWidth = Math.max(0, this._totalWidth - margin.left - margin.right);
+        this._contentHeight = Math.max(0, this._totalHeight - margin.top - margin.bottom);
 
         this._svg.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
@@ -275,7 +275,7 @@ App.InteractiveChartComponent = Ember.Component.extend({
             .call(this._brush)
         .selectAll("rect")
             .attr("y", 1)
-            .attr("height", this._contentHeight - 2);
+            .attr("height", Math.max(0, this._contentHeight - 2));
         this._updateSelectionToolbar();
     },
     _relayoutDataAndAxes: function (selection)