- Revision
- 179611
- Author
- [email protected]
- Date
- 2015-02-04 10:08:38 -0800 (Wed, 04 Feb 2015)
Log Message
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.
Modified Paths
Diff
Modified: trunk/Websites/perf.webkit.org/ChangeLog (179610 => 179611)
--- trunk/Websites/perf.webkit.org/ChangeLog 2015-02-04 18:07:06 UTC (rev 179610)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2015-02-04 18:08:38 UTC (rev 179611)
@@ -1,3 +1,31 @@
+2015-02-04 Ryosuke Niwa <[email protected]>
+
+ 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 <[email protected]>
Don’t use repository names as id’s.
Modified: trunk/Websites/perf.webkit.org/public/v2/app.js (179610 => 179611)
--- trunk/Websites/perf.webkit.org/public/v2/app.js 2015-02-04 18:07:06 UTC (rev 179610)
+++ trunk/Websites/perf.webkit.org/public/v2/app.js 2015-02-04 18:08:38 UTC (rev 179611)
@@ -827,9 +827,9 @@
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 @@
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 ()
Modified: trunk/Websites/perf.webkit.org/public/v2/chart-pane.css (179610 => 179611)
--- trunk/Websites/perf.webkit.org/public/v2/chart-pane.css 2015-02-04 18:07:06 UTC (rev 179610)
+++ trunk/Websites/perf.webkit.org/public/v2/chart-pane.css 2015-02-04 18:08:38 UTC (rev 179611)
@@ -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;
}
Modified: trunk/Websites/perf.webkit.org/public/v2/index.html (179610 => 179611)
--- trunk/Websites/perf.webkit.org/public/v2/index.html 2015-02-04 18:07:06 UTC (rev 179610)
+++ trunk/Websites/perf.webkit.org/public/v2/index.html 2015-02-04 18:08:38 UTC (rev 179611)
@@ -461,7 +461,7 @@
enableSelection=false
chartPointRadius=2
domain=chartDomain
- markedPoints=markedPoints}}
+ highlightedItems=highlightedItems}}
</div>
<div class="details">
<table class="analysis-bugs">
Modified: trunk/Websites/perf.webkit.org/public/v2/interactive-chart.js (179610 => 179611)
--- trunk/Websites/perf.webkit.org/public/v2/interactive-chart.js 2015-02-04 18:07:06 UTC (rev 179610)
+++ trunk/Websites/perf.webkit.org/public/v2/interactive-chart.js 2015-02-04 18:08:38 UTC (rev 179611)
@@ -96,8 +96,8 @@
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 @@
this._needsConstruction = false;
+ this._highlightedItemsChanged();
this._rangesChanged();
},
_updateDomain: function ()
@@ -273,7 +274,6 @@
.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 @@
.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 @@
}
}.observes('selectedItem').on('init'),
_highlightedItemsChanged: function () {
- if (!this._margin)
+ if (!this._clippedContainer)
return;
var highlightedItems = this.get('highlightedItems');
var data = "" (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 ()
{
