Interactive chart component provides two duplicate API for highlighting points
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 4 Feb 2015 18:08:38 +0000 (18:08 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 4 Feb 2015 18:08:38 +0000 (18:08 +0000)
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

Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/v2/app.js
Websites/perf.webkit.org/public/v2/chart-pane.css
Websites/perf.webkit.org/public/v2/index.html
Websites/perf.webkit.org/public/v2/interactive-chart.js

index 7d58bb87b57c13a09f86f3ba526ca158d7a750f0..0e76d0bb86fc3f2e23ffcf295b7661c9567ea3e1 100644 (file)
@@ -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.
index 2e63ad1ae24a33036e4c3ce7e1a234dc93a70ca1..0e7114f8558462df184843f4f37be0debd68521d 100755 (executable)
@@ -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 ()
index 1a902ad1efdf2dd381da9f0fd7cb597177fda187..9c680b08385ba09c5566d928680e59e700c05b96 100755 (executable)
     stroke: none;
 }
 
-.chart .marked {
-    fill: #c33;
-}
-
 .chart path.area {
     stroke: none;
     fill: #ccc;
 }
 
 .chart .highlight {
-    stroke: #39f;
-    stroke-dasharray: 4, 4;
-    stroke-width: 1px;
+    stroke: #f93;
+    stroke-width: 2px;
     fill: none;
 }
 
index fe477fd0cdb7582c735c0d5a3b2a0f73eb032836..a092852890a8bfa4dd0cc29dc5904b91bc6c138d 100755 (executable)
                         enableSelection=false
                         chartPointRadius=2
                         domain=chartDomain
-                        markedPoints=markedPoints}}
+                        highlightedItems=highlightedItems}}
                 </div>
                 <div class="details">
                     <table class="analysis-bugs">
index a0bd138508f078fd65f47279e88702b8ce7e9089..f8e5646e10986df280a472b209f8bf15c55f3101 100644 (file)
@@ -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 ()
     {