<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[179611] trunk/Websites/perf.webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/179611">179611</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2015-02-04 10:08:38 -0800 (Wed, 04 Feb 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgChangeLog">trunk/Websites/perf.webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2appjs">trunk/Websites/perf.webkit.org/public/v2/app.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2chartpanecss">trunk/Websites/perf.webkit.org/public/v2/chart-pane.css</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2indexhtml">trunk/Websites/perf.webkit.org/public/v2/index.html</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2interactivechartjs">trunk/Websites/perf.webkit.org/public/v2/interactive-chart.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsitesperfwebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/ChangeLog (179610 => 179611)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,31 @@
</span><ins>+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.
+
</ins><span class="cx"> 2015-02-03 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><span class="cx"> Don’t use repository names as id’s.
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2appjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/app.js (179610 => 179611)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -827,9 +827,9 @@
</span><span class="cx"> if (!start || !end)
</span><span class="cx"> return; // FIXME: Report an error.
</span><span class="cx">
</span><del>- var markedPoints = {};
- markedPoints[start.measurement.id()] = true;
- markedPoints[end.measurement.id()] = true;
</del><ins>+ var highlightedItems = {};
+ highlightedItems[start.measurement.id()] = true;
+ highlightedItems[end.measurement.id()] = true;
</ins><span class="cx">
</span><span class="cx"> var formatedPoints = currentTimeSeries.seriesBetweenPoints(start, end).map(function (point, index) {
</span><span class="cx"> return {
</span><span class="lines">@@ -843,7 +843,7 @@
</span><span class="cx"> var margin = (end.time - start.time) * 0.1;
</span><span class="cx"> this.set('chartData', runs);
</span><span class="cx"> this.set('chartDomain', [start.time - margin, +end.time + margin]);
</span><del>- this.set('markedPoints', markedPoints);
</del><ins>+ this.set('highlightedItems', highlightedItems);
</ins><span class="cx"> this.set('analysisPoints', formatedPoints);
</span><span class="cx"> },
</span><span class="cx"> testSets: function ()
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2chartpanecss"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/chart-pane.css (179610 => 179611)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -266,10 +266,6 @@
</span><span class="cx"> stroke: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.chart .marked {
- fill: #c33;
-}
-
</del><span class="cx"> .chart path.area {
</span><span class="cx"> stroke: none;
</span><span class="cx"> fill: #ccc;
</span><span class="lines">@@ -308,9 +304,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .chart .highlight {
</span><del>- stroke: #39f;
- stroke-dasharray: 4, 4;
- stroke-width: 1px;
</del><ins>+ stroke: #f93;
+ stroke-width: 2px;
</ins><span class="cx"> fill: none;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2indexhtml"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/index.html (179610 => 179611)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -461,7 +461,7 @@
</span><span class="cx"> enableSelection=false
</span><span class="cx"> chartPointRadius=2
</span><span class="cx"> domain=chartDomain
</span><del>- markedPoints=markedPoints}}
</del><ins>+ highlightedItems=highlightedItems}}
</ins><span class="cx"> </div>
</span><span class="cx"> <div class="details">
</span><span class="cx"> <table class="analysis-bugs">
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2interactivechartjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/interactive-chart.js (179610 => 179611)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -96,8 +96,8 @@
</span><span class="cx"> this._dots.forEach(function (dot) { dots.remove(); });
</span><span class="cx"> this._dots = [];
</span><span class="cx"> if (this._highlights)
</span><del>- this._highlights.forEach(function (highlight) { highlight.remove(); });
- this._highlights = [];
</del><ins>+ this._highlights.remove();
+ this._highlights = null;
</ins><span class="cx">
</span><span class="cx"> this._currentTimeSeries = chartData.current.timeSeriesByCommitTime();
</span><span class="cx"> this._currentTimeSeriesData = this._currentTimeSeries.series();
</span><span class="lines">@@ -180,6 +180,7 @@
</span><span class="cx">
</span><span class="cx"> this._needsConstruction = false;
</span><span class="cx">
</span><ins>+ this._highlightedItemsChanged();
</ins><span class="cx"> this._rangesChanged();
</span><span class="cx"> },
</span><span class="cx"> _updateDomain: function ()
</span><span class="lines">@@ -273,7 +274,6 @@
</span><span class="cx"> .attr("cx", function(measurement) { return xScale(measurement.time); })
</span><span class="cx"> .attr("cy", function(measurement) { return yScale(measurement.value); });
</span><span class="cx"> });
</span><del>- this._updateMarkedDots();
</del><span class="cx"> this._updateHighlightPositions();
</span><span class="cx"> this._updateRangeBarRects();
</span><span class="cx">
</span><span class="lines">@@ -303,27 +303,15 @@
</span><span class="cx"> .style("z-index", "100")
</span><span class="cx"> .text(this._yAxisUnit);
</span><span class="cx"> },
</span><del>- _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'),
</del><span class="cx"> _updateHighlightPositions: function () {
</span><ins>+ if (!this._highlights)
+ return;
+
</ins><span class="cx"> var xScale = this._x;
</span><span class="cx"> var yScale = this._y;
</span><del>- 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); });
- });
</del><ins>+ this._highlights
+ .attr("cy", function(point) { return yScale(point.value); })
+ .attr("cx", function(point) { return xScale(point.time); });
</ins><span class="cx"> },
</span><span class="cx"> _computeXAxisDomain: function (timeSeries)
</span><span class="cx"> {
</span><span class="lines">@@ -588,24 +576,23 @@
</span><span class="cx"> }
</span><span class="cx"> }.observes('selectedItem').on('init'),
</span><span class="cx"> _highlightedItemsChanged: function () {
</span><del>- if (!this._margin)
</del><ins>+ if (!this._clippedContainer)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> var highlightedItems = this.get('highlightedItems');
</span><span class="cx">
</span><span class="cx"> var data = this._currentTimeSeriesData.filter(function (item) { return highlightedItems[item.measurement.id()]; });
</span><span class="cx">
</span><del>- if (this._highlights.length)
- this._highlights.forEach(function (highlight) { highlight.remove(); });
-
- this._highlights.push(this._clippedContainer
</del><ins>+ if (this._highlights)
+ this._highlights.remove();
+ this._highlights = this._clippedContainer
</ins><span class="cx"> .selectAll(".highlight")
</span><span class="cx"> .data(data)
</span><del>- .enter().append("line")
- .attr("class", "highlight"));
</del><ins>+ .enter().append("circle")
+ .attr("class", "highlight")
+ .attr("r", (this.get('chartPointRadius') || 1) * 1.8);
</ins><span class="cx">
</span><span class="cx"> this._updateHighlightPositions();
</span><del>-
</del><span class="cx"> }.observes('highlightedItems'),
</span><span class="cx"> _rangesChanged: function ()
</span><span class="cx"> {
</span></span></pre>
</div>
</div>
</body>
</html>