Interactive chart component provides two duplicate API for highlighting points

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

Reviewed by Chris Dumez.

Prior to this patch, the interactive chart component supported highlightedItems for finding commits
on the main charts page and markedPoints to show the two end points in the analysis task page.

This patch merges markedPoints into highlightedItems.

* public/v2/app.js:
(App.AnalysisTaskController._fetchedRuns): Use highlightedItems.
* public/v2/chart-pane.css:
* public/v2/index.html: Ditto.
* public/v2/interactive-chart.js:
(App.InteractiveChartComponent._constructGraphIfPossible): Make this._highlights an array instead of
array of arrays. Also call _highlightedItemsChanged at the end to fix the bug that we never highlight
items if highlightedItems was set before the initial layout.
(App.InteractiveChartComponent._relayoutDataAndAxes):
(App.InteractiveChartComponent._updateHighlightPositions): Now that highlights are circles instead of
vertical lines, just set cx and cy as done for other "dots".
(App.InteractiveChartComponent._highlightedItemsChanged): Exit early only if _clippedContainer wasn't
already set; i.e. _constructGraphIfPossible hasn't been called. Also updated the logic to accommodate
the fact this._highlights is an array of elements instead of an array of arrays of elements. Finally,
set the radius of highlight circles here.

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

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 7d58bb8..0e76d0b 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,31 @@
+2015-02-04  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Interactive chart component provides two duplicate API for highlighting points
+        https://bugs.webkit.org/show_bug.cgi?id=141234
+
+        Reviewed by Chris Dumez.
+
+        Prior to this patch, the interactive chart component supported highlightedItems for finding commits
+        on the main charts page and markedPoints to show the two end points in the analysis task page.
+
+        This patch merges markedPoints into highlightedItems. 
+
+        * public/v2/app.js:
+        (App.AnalysisTaskController._fetchedRuns): Use highlightedItems.
+        * public/v2/chart-pane.css:
+        * public/v2/index.html: Ditto.
+        * public/v2/interactive-chart.js: 
+        (App.InteractiveChartComponent._constructGraphIfPossible): Make this._highlights an array instead of
+        array of arrays. Also call _highlightedItemsChanged at the end to fix the bug that we never highlight
+        items if highlightedItems was set before the initial layout.
+        (App.InteractiveChartComponent._relayoutDataAndAxes):
+        (App.InteractiveChartComponent._updateHighlightPositions): Now that highlights are circles instead of
+        vertical lines, just set cx and cy as done for other "dots".
+        (App.InteractiveChartComponent._highlightedItemsChanged): Exit early only if _clippedContainer wasn't
+        already set; i.e. _constructGraphIfPossible hasn't been called. Also updated the logic to accommodate
+        the fact this._highlights is an array of elements instead of an array of arrays of elements. Finally,
+        set the radius of highlight circles here.
+
 2015-02-03  Ryosuke Niwa  <rniwa@webkit.org>
 
         Don’t use repository names as id’s.

diff --git a/Websites/perf.webkit.org/public/v2/app.js b/Websites/perf.webkit.org/public/v2/app.js
index 2e63ad1..0e7114f 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/app.js
+++ b/Websites/perf.webkit.org/public/v2/app.js
@@ -827,9 +827,9 @@ App.AnalysisTaskController = Ember.Controller.extend({
         if (!start || !end)
             return; // FIXME: Report an error.
 
-        var markedPoints = {};
-        markedPoints[start.measurement.id()] = true;
-        markedPoints[end.measurement.id()] = true;
+        var highlightedItems = {};
+        highlightedItems[start.measurement.id()] = true;
+        highlightedItems[end.measurement.id()] = true;
 
         var formatedPoints = currentTimeSeries.seriesBetweenPoints(start, end).map(function (point, index) {
             return {
@@ -843,7 +843,7 @@ App.AnalysisTaskController = Ember.Controller.extend({
         var margin = (end.time - start.time) * 0.1;
         this.set('chartData', runs);
         this.set('chartDomain', [start.time - margin, +end.time + margin]);
-        this.set('markedPoints', markedPoints);
+        this.set('highlightedItems', highlightedItems);
         this.set('analysisPoints', formatedPoints);
     },
     testSets: function ()

diff --git a/Websites/perf.webkit.org/public/v2/chart-pane.css b/Websites/perf.webkit.org/public/v2/chart-pane.css
index 1a902ad..9c680b0 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/chart-pane.css
+++ b/Websites/perf.webkit.org/public/v2/chart-pane.css
@@ -266,10 +266,6 @@
     stroke: none;
 }
 
-.chart .marked {
-    fill: #c33;
-}
-
 .chart path.area {
     stroke: none;
     fill: #ccc;
@@ -308,9 +304,8 @@
 }
 
 .chart .highlight {
-    stroke: #39f;
-    stroke-dasharray: 4, 4;
-    stroke-width: 1px;
+    stroke: #f93;
+    stroke-width: 2px;
     fill: none;
 }
 

diff --git a/Websites/perf.webkit.org/public/v2/index.html b/Websites/perf.webkit.org/public/v2/index.html
index fe477fd..a092852 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/index.html
+++ b/Websites/perf.webkit.org/public/v2/index.html
@@ -461,7 +461,7 @@
                         enableSelection=false
                         chartPointRadius=2
                         domain=chartDomain
-                        markedPoints=markedPoints}}
+                        highlightedItems=highlightedItems}}
                 </div>
                 <div class="details">
                     <table class="analysis-bugs">

diff --git a/Websites/perf.webkit.org/public/v2/interactive-chart.js b/Websites/perf.webkit.org/public/v2/interactive-chart.js
index a0bd138..f8e5646 100644 (file)
--- a/Websites/perf.webkit.org/public/v2/interactive-chart.js
+++ b/Websites/perf.webkit.org/public/v2/interactive-chart.js
@@ -96,8 +96,8 @@ App.InteractiveChartComponent = Ember.Component.extend({
             this._dots.forEach(function (dot) { dots.remove(); });
         this._dots = [];
         if (this._highlights)
-            this._highlights.forEach(function (highlight) { highlight.remove(); });
-        this._highlights = [];
+            this._highlights.remove();
+        this._highlights = null;
 
         this._currentTimeSeries = chartData.current.timeSeriesByCommitTime();
         this._currentTimeSeriesData = this._currentTimeSeries.series();
@@ -180,6 +180,7 @@ App.InteractiveChartComponent = Ember.Component.extend({
 
         this._needsConstruction = false;
 
+        this._highlightedItemsChanged();
         this._rangesChanged();
     },
     _updateDomain: function ()
@@ -273,7 +274,6 @@ App.InteractiveChartComponent = Ember.Component.extend({
                 .attr("cx", function(measurement) { return xScale(measurement.time); })
                 .attr("cy", function(measurement) { return yScale(measurement.value); });
         });
-        this._updateMarkedDots();
         this._updateHighlightPositions();
         this._updateRangeBarRects();
 
@@ -303,27 +303,15 @@ App.InteractiveChartComponent = Ember.Component.extend({
             .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 () {
+        if (!this._highlights)
+            return;
+
         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); });
-        });
+        this._highlights
+            .attr("cy", function(point) { return yScale(point.value); })
+            .attr("cx", function(point) { return xScale(point.time); });
     },
     _computeXAxisDomain: function (timeSeries)
     {
@@ -588,24 +576,23 @@ App.InteractiveChartComponent = Ember.Component.extend({
         }
     }.observes('selectedItem').on('init'),
     _highlightedItemsChanged: function () {
-        if (!this._margin)
+        if (!this._clippedContainer)
             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
+        if (this._highlights)
+            this._highlights.remove();
+        this._highlights = this._clippedContainer
             .selectAll(".highlight")
                 .data(data)
-            .enter().append("line")
-                .attr("class", "highlight"));
+            .enter().append("circle")
+                .attr("class", "highlight")
+                .attr("r", (this.get('chartPointRadius') || 1) * 1.8);
 
         this._updateHighlightPositions();
-
     }.observes('highlightedItems'),
     _rangesChanged: function ()
     {