diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 72bc7c8..ab01463 100644
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,143 @@
+2016-08-08  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Always show segmentation on v3 charts page
+        https://bugs.webkit.org/show_bug.cgi?id=160576
+
+        Rubber-stamped by Chris Dumez.
+
+        Added "Trend Lines" popover to select and customize a moving average or a segmentation to show on charts page
+        and made Schwarz criterion segmentation the default trend line for all charts.
+
+        Because computing the segmentation is expensive, we use WebWorker to parallelize the computation via AsyncTask.
+        We also compute and cache the segmentation for each cluster separately to avoid processing the entire measurement
+        set as that could take 10-20s total, which was a huge problem in v2 UI. v3 UI's approach is more incremental and
+        even opens up an opportunity to cache the results in the server side.
+
+        Also brought back "shading" for the confidence interval drawing as done in v1 and v2 UI.
+
+        * public/shared/statistics.js:
+        (Statistics.segmentTimeSeriesByMaximizingSchwarzCriterion): Added segmentCountWeight and gridSize as arguments
+        to customize the algorithm.
+        (Statistics.splitIntoSegmentsUntilGoodEnough): Takes segmentCountWeight as BirgeAndMassartC.
+
+        * public/v3/async-task.js: Added.
+        (AsyncTask): Added. This class represents a task such as computing segmentation to be executed in a worker.
+        (AsyncTask.prototype.execute): Added. Returns a promise that gets resolved when the specified task completes.
+        (AsyncTaskWorker.waitForAvailableWorker): Added. Calls the given callback with the first available worker. When
+        all workers are processing some tasks, it waits until one becomes available by putting the callback into a queue.
+        _didRecieveMessage pops an item out of this queue when a worker completes a task. We don't use a promise here
+        because calling this function multiple times synchronously could result in all the returned promises getting
+        resolved with the same worker as none of the callers get to lock away the first available worker until the end
+        of the current micro-task.
+        (AsyncTaskWorker._makeWorkerEventuallyAvailable): Added. A helper function for waitForAvailableWorker. Start
+        a new worker if the number of workers we've started is less than the number of extra cores (e.g. 7 if there are
+        8 cores on the machine). Avoid starting a new worker if we've started a new worker within the last 50 ms since
+        starting a new worker takes some time.
+        (AsyncTaskWorker._findAvailableWorker): Added. Finds a worker that's available right now if there is any.
+        (AsyncTaskWorker): Added. An instance of AsyncTaskWorker represents a Web worker.
+        (AsyncTaskWorker.prototype.id): Added.
+        (AsyncTaskWorker.prototype.sendTask): Added. Sends a task represented by AsyncTask to the worker.
+        (AsyncTaskWorker.prototype._didRecieveMessage): Added. This function gets called when the current task completes
+        in the worker. Pop the next callback if some caller of waitForAvailableWorker is still waiting. Otherwise stop
+        the worker after one second of waiting to avoid worker churning.
+        (AsyncTaskWorker.workerDidRecieveMessage): Added. Called by onmessage on the worker. Executes the specified task
+        and sends back a message upon completion with the appropriate timing data.
+
+        * public/v3/components/chart-pane-base.js:
+        (ChartPaneBase.prototype.configure): Uses _createSourceList.
+        (ChartPaneBase.prototype._createSourceList): Added. Extracted from configure to customize the source list for
+        the main chart and the overview chart.
+        (ChartPaneBase.prototype._updateSourceList): Uses _createSourceList.
+
+        * public/v3/components/chart-styles.js:
+        (ChartStyles.createSourceList): Added a boolean showPoint as an extra argument. This specifies whether circles
+        are drawn for each data point.
+        (ChartStyles.baselineStyle): Added styles for foreground lines and background lines. They're used for trend lines
+        and underlying raw data respectively when trend lines are shown.
+        (ChartStyles.targetStyle): Ditto.
+        (ChartStyles.currentStyle): Ditto.
+
+        * public/v3/components/time-series-chart.js:
+        (TimeSeriesChart): Added _trendLines, _renderedTrendLines, and _fetchedTimeSeries as instance variables.
+        (TimeSeriesChart.prototype.setSourceList): Clear _fetchedTimeSeries before calling setSourceList for consistency.
+        (TimeSeriesChart.prototype.sourceList): Added.
+        (TimeSeriesChart.prototype.clearTrendLines): Added.
+        (TimeSeriesChart.prototype.setTrendLine): Added. Preserves the existing trend lines for other sources. This is
+        necessary because segmentation for "current" and "baseline" lines may become available at different times, and we
+        don't want to clear one or the other when setting one.
+        (TimeSeriesChart.prototype._layout): Added a call to _ensureTrendLines.
+        (TimeSeriesChart.prototype._renderChartContent): Call _renderTimeSeries for trend lines. Trend lines are always
+        foreground lines and "regular" raw data points are drawn as background if there are trend lines.
+        (TimeSeriesChart.prototype._renderTimeSeries): Added layerName as an argument. It could be an empty string,
+        "foreground", or "background". Draw a "shade" just like v1 and v2 UI instead of vertical lines for the confidence
+        intervals. Pick "foreground", "background", or "regular" chart style based on layerName. Also avoid drawing data
+        points when *PointRadius is set to zero to reduce the runtime of this function.
+        (TimeSeriesChart.prototype._sourceOptionWithFallback): Added.
+        (TimeSeriesChart.prototype._ensureSampledTimeSeries): When *PointRadius is 0, show as many points as there are x
+        coordinates as a fallback instead of showing every point.
+        (TimeSeriesChart.prototype._ensureTrendLines): Added. Returns true if the chart contents haven't been re-rendered
+        since the last update to trend lines. This flag is unset by setTrendLine.
+
+        * public/v3/index.html:
+
+        * public/v3/models/measurement-cluster.js:
+        (MeasurementCluster.prototype.addToSeries): Store the data points' index to idMap to help aid MeasurementSet's
+        _cachedClusterSegmentation efficiently re-create the segmentation from the cache.
+
+        * public/v3/models/measurement-set.js:
+        (MeasurementSet): Added _segmentationCache as an instance variable.
+        (MeasurementSet.prototype.fetchSegmentation): Added. Calls _cachedClusterSegmentation on each cluster, and
+        constructs the time series representation of the segmentation from the results.
+        (MeasurementSet.prototype._cachedClusterSegmentation): Computes and caches the segmentation for each cluster.
+        The cache of segmentation stores ID of each measurement set at which segment changes instead of its index since
+        the latter could change in any moment when a new test result is reported, or an existing test result is removed
+        from the time series; e.g. when it's marked as an outlier.
+        (MeasurementSet.prototype._validateSegmentationCache): Added. Checks whether the cached segmentation's name and
+        its parameters match that of the requested one.
+        (MeasurementSet.prototype._invokeSegmentationAlgorithm): Added. Invokes the segmentation algorithm either in the
+        main thread or in a Web worker via AsyncTask API based on the size of the time series. While parallelizing the
+        work is beneficial when the data set is large, the overhead can add up if we keep processing a very small data
+        set in a worker.
+
+        * public/v3/models/time-series.js: Made the file compatible with Node.
+        (TimeSeries.prototype.length): Added.
+        (TimeSeries.prototype.valuesBetweenRange): Added.
+
+        * public/v3/pages/chart-pane.js:
+        (createTrendLineExecutableFromAveragingFunction): Added.
+        (ChartTrendLineTypes): Added. Similar to StatisticsStrategies (statistics-strategies.js) in v2 UI.
+        (ChartPane): Added _trendLineType, _trendLineParameters, _trendLineVersion, and _renderedTrendLineOptions as
+        instance variables.
+        (ChartPane.prototype.serializeState): Serialize the trend line option. This format is compatible with v2 UI.
+        (ChartPane.prototype.updateFromSerializedState): Ditto. Parsing is compatible with v2 UI except that we now have
+        the default trend line set when the specified ID doesn't match an existing type ID.
+        (ChartPane.prototype._renderActionToolbar): Added a call to _renderTrendLinePopover. This is the popover that
+        specifies the type of a trend line to show as well as its parameters.
+        (ChartPane.prototype._renderTrendLinePopover): Added. A popover for specifying and customizing a trend line.
+        (ChartPane.prototype._trendLineTypeDidChange): Added. Called when a new trend line is selected.
+        (ChartPane.prototype._defaultParametersForTrendLine): Added.
+        (ChartPane.prototype._trendLineParameterDidChange): Added. Called when the trend lines' parameters are changed.
+        (ChartPane.prototype._didFetchData): Added. Overrides the one in ChartPaneBase to trigger a trend line update.
+        (ChartPane.prototype._updateTrendLine): Added. Update the trend line. Since segmentation can take an arbitrary
+        long time, avoid updating trend lines if this function had been called again (possibly for a different trend line
+        type or with different parameters) before the results become available; hence the versioning.
+        (ChartPane.paneHeaderTemplate): Added the trend line popover.
+        (ChartPane.cssTemplate): Added styles for the trend line popover. Also use a more opaque background color behind
+        popovers when the -webkit-backdrop-filter property is not supported.
+
+        * public/v3/pages/dashboard-page.js:
+        (DashboardPage.prototype._createChartForCell): Call createSourceList with showPoints set to true to preserve the
+        existing behavior.
+
+        * tools/js/v3-models.js: Include TimeSeries object.
+
+        * unit-tests/measurement-set-tests.js: Added two test cases for MeasurementSet's fetchSegmentation.
+
+        * unit-tests/resources/almost-equal.js: Added.
+        (almostEqual): Extracted out of statistics-tests.js.
+
+        * unit-tests/statistics-tests.js:
+
 2016-08-05  Ryosuke Niwa  <rniwa@webkit.org>
 
         segmentTimeSeriesByMaximizingSchwarzCriterion returns a bogus result on empty charts
diff --git a/Websites/perf.webkit.org/public/shared/statistics.js b/Websites/perf.webkit.org/public/shared/statistics.js
index 58b7c16..8bcdbd0 100644
--- a/Websites/perf.webkit.org/public/shared/statistics.js
+++ b/Websites/perf.webkit.org/public/shared/statistics.js
@@ -173,13 +173,13 @@
     }
 
     this.debuggingSegmentation = false;
-    this.segmentTimeSeriesByMaximizingSchwarzCriterion = function (values) {
+    this.segmentTimeSeriesByMaximizingSchwarzCriterion = function (values, segmentCountWeight, gridSize) {
         // Split the time series into grids since splitIntoSegmentsUntilGoodEnough is O(n^2).
-        var gridLength = 500;
+        var gridLength = gridSize || 500;
         var totalSegmentation = [0];
         for (var gridCount = 0; gridCount < Math.ceil(values.length / gridLength); gridCount++) {
             var gridValues = values.slice(gridCount * gridLength, (gridCount + 1) * gridLength);
-            var segmentation = splitIntoSegmentsUntilGoodEnough(gridValues);
+            var segmentation = splitIntoSegmentsUntilGoodEnough(gridValues, segmentCountWeight);
 
             if (Statistics.debuggingSegmentation)
                 console.log('grid=' + gridCount, segmentation);
@@ -271,7 +271,7 @@
     function oneSidedToTwoSidedProbability(probability) { return 2 * probability - 1; }
     function twoSidedToOneSidedProbability(probability) { return (1 - (1 - probability) / 2); }
 
-    function splitIntoSegmentsUntilGoodEnough(values) {
+    function splitIntoSegmentsUntilGoodEnough(values, BirgeAndMassartC) {
         if (values.length < 2)
             return [0, values.length];
 
@@ -279,7 +279,7 @@
 
         var SchwarzCriterionBeta = Math.log1p(values.length - 1) / values.length;
 
-        var BirgeAndMassartC = 2.5; // Suggested by the authors.
+        BirgeAndMassartC = BirgeAndMassartC || 2.5; // Suggested by the authors.
         var BirgeAndMassartPenalization = function (segmentCount) {
             return segmentCount * (1 + BirgeAndMassartC * Math.log1p(values.length / segmentCount - 1));
         }
diff --git a/Websites/perf.webkit.org/public/v3/async-task.js b/Websites/perf.webkit.org/public/v3/async-task.js
new file mode 100644
index 0000000..11b54ff
--- /dev/null
+++ b/Websites/perf.webkit.org/public/v3/async-task.js
@@ -0,0 +1,151 @@
+
+class AsyncTask {
+
+    constructor(method, args)
+    {
+        this._method = method;
+        this._args = args;
+    }
+
+    execute()
+    {
+        if (!(this._method in Statistics))
+            throw `${this._method} is not a valid method of Statistics`;
+
+        AsyncTask._asyncMessageId++;
+
+        var startTime = Date.now();
+        var method = this._method;
+        var args = this._args;
+        return new Promise(function (resolve, reject) {
+            AsyncTaskWorker.waitForAvailableWorker(function (worker) {
+                worker.sendTask({id: AsyncTask._asyncMessageId, method: method, args: args}).then(function (data) {
+                    var startLatency = data.workerStartTime - startTime;
+                    var totalTime = Date.now() - startTime;
+                    var callback = data.status == 'resolve' ? resolve : reject;
+                    callback({result: data.result, workerId: worker.id(), startLatency: startLatency, totalTime: totalTime, workerTime: data.workerTime});
+                });
+            });
+        });
+    }
+
+}
+
+AsyncTask._asyncMessageId = 0;
+
+class AsyncTaskWorker {
+
+    // Takes a callback instead of returning a promise because a worker can become unavailable before the end of the current microtask.
+    static waitForAvailableWorker(callback)
+    {
+        var worker = this._makeWorkerEventuallyAvailable();
+        if (worker)
+            callback(worker);
+        this._queue.push(callback);
+    }
+
+    static _makeWorkerEventuallyAvailable()
+    {
+        var worker = this._findAvailableWorker();
+        if (worker)
+            return worker;
+
+        var canStartMoreWorker = this._workerSet.size < this._maxWorkerCount;
+        if (!canStartMoreWorker)
+            return null;
+
+        if (this._latestStartTime > Date.now() - 50) {
+            setTimeout(function () {
+                var worker = AsyncTaskWorker._findAvailableWorker();
+                if (worker)
+                    AsyncTaskWorker._queue.pop()(worker);
+            }, 50);
+            return null;
+        }
+        return new AsyncTaskWorker;
+    }
+
+    static _findAvailableWorker()
+    {
+        for (var worker of this._workerSet) {
+            if (!worker._currentTaskId)
+                return worker;
+        }
+        return null;
+    }
+
+    constructor()
+    {
+        this._webWorker = new Worker('async-task.js');
+        this._webWorker.onmessage = this._didRecieveMessage.bind(this);
+        this._id = AsyncTaskWorker._workerId;
+        this._startTime = Date.now();
+        this._currentTaskId = null;
+        this._callback = null;
+
+        AsyncTaskWorker._latestStartTime = this._startTime;
+        AsyncTaskWorker._workerId++;
+        AsyncTaskWorker._workerSet.add(this);
+    }
+
+    id() { return this._id; }
+
+    sendTask(task)
+    {
+        console.assert(!this._currentTaskId);
+        console.assert(task.id);
+        var self = this;
+        this._currentTaskId = task.id;
+        return new Promise(function (resolve) {
+            self._webWorker.postMessage(task);
+            self._callback = resolve;
+        });
+    }
+
+    _didRecieveMessage(event)
+    {
+        var callback = this._callback;
+
+        console.assert(this._currentTaskId);
+        this._currentTaskId = null;
+        this._callback = null;
+
+        if (AsyncTaskWorker._queue.length)
+            AsyncTaskWorker._queue.pop()(this);
+        else {
+            var self = this;
+            setTimeout(function () {
+                if (self._currentTaskId == null)
+                    AsyncTaskWorker._workerSet.delete(self);
+            }, 1000);
+        }
+
+        callback(event.data);
+    }
+
+    static workerDidRecieveMessage(event)
+    {
+        var data = event.data;
+        var id = data.id;
+        var method = Statistics[data.method];
+        var startTime = Date.now();
+        try {
+            var returnValue = method.apply(Statistics, data.args);
+            postMessage({'id': id, 'status': 'resolve', 'result': returnValue, 'workerStartTime': startTime, 'workerTime': Date.now() - startTime});
+        } catch (error) {
+            postMessage({'id': id, 'status': 'reject', 'result': error.toString(), 'workerStartTime': startTime, 'workerTime': Date.now() - startTime});
+            throw error;
+        }
+    }
+}
+
+AsyncTaskWorker._maxWorkerCount = typeof navigator != 'undefined' && 'hardwareConcurrency' in navigator ? Math.max(1, navigator.hardwareConcurrency - 1) : 1;
+AsyncTaskWorker._workerSet = new Set;
+AsyncTaskWorker._queue = [];
+AsyncTaskWorker._workerId = 1;
+AsyncTaskWorker._latestStartTime = 0;
+
+if (typeof module == 'undefined' && typeof window == 'undefined' && typeof importScripts != 'undefined') { // Inside a worker
+    importScripts('/shared/statistics.js');
+    onmessage = AsyncTaskWorker.workerDidRecieveMessage.bind(AsyncTaskWorker);
+}
diff --git a/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js b/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js
index e1f4c05..81e598f 100644
--- a/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js
+++ b/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js
@@ -42,11 +42,9 @@
         var formatter = result.metric.makeFormatter(4);
         var self = this;
 
-        var sourceList = ChartStyles.createSourceList(this._platform, this._metric, this._disableSampling, this._showOutliers);
-
         var overviewOptions = ChartStyles.overviewChartOptions(formatter);
         overviewOptions.selection.onchange = this._overviewSelectionDidChange.bind(this);
-        this._overviewChart = new InteractiveTimeSeriesChart(sourceList, overviewOptions);
+        this._overviewChart = new InteractiveTimeSeriesChart(this._createSourceList(false), overviewOptions);
         this.renderReplace(this.content().querySelector('.chart-pane-overview'), this._overviewChart);
 
         var mainOptions = ChartStyles.mainChartOptions(formatter);
@@ -55,7 +53,7 @@
         mainOptions.selection.onzoom = this._mainSelectionDidZoom.bind(this);
         mainOptions.annotations.onclick = this._openAnalysisTask.bind(this);
         mainOptions.ondata = this._didFetchData.bind(this);
-        this._mainChart = new InteractiveTimeSeriesChart(sourceList, mainOptions);
+        this._mainChart = new InteractiveTimeSeriesChart(this._createSourceList(true), mainOptions);
         this.renderReplace(this.content().querySelector('.chart-pane-main'), this._mainChart);
 
         this._mainChartStatus = new ChartPaneStatusView(result.metric, this._mainChart, this._requestOpeningCommitViewer.bind(this));
@@ -80,11 +78,15 @@
         this._updateSourceList();
     }
 
+    _createSourceList(isMainChart)
+    {
+        return ChartStyles.createSourceList(this._platform, this._metric, this._disableSampling, this._showOutliers, isMainChart);
+    }
+
     _updateSourceList()
     {
-        var sourceList = ChartStyles.createSourceList(this._platform, this._metric, this._disableSampling, this._showOutliers);
-        this._mainChart.setSourceList(sourceList);
-        this._overviewChart.setSourceList(sourceList);
+        this._mainChart.setSourceList(this._createSourceList(true));
+        this._overviewChart.setSourceList(this._createSourceList(false));
     }
 
     fetchAnalysisTasks(noCache)
diff --git a/Websites/perf.webkit.org/public/v3/components/chart-styles.js b/Websites/perf.webkit.org/public/v3/components/chart-styles.js
index ef4a8d6..a9d2078 100644
--- a/Websites/perf.webkit.org/public/v3/components/chart-styles.js
+++ b/Websites/perf.webkit.org/public/v3/components/chart-styles.js
@@ -17,7 +17,7 @@
         };
     }
 
-    static createSourceList(platform, metric, disableSampling, includeOutlier)
+    static createSourceList(platform, metric, disableSampling, includeOutlier, showPoint)
     {
         console.assert(platform instanceof Platform);
         console.assert(metric instanceof Metric);
@@ -27,13 +27,13 @@
 
         var measurementSet = MeasurementSet.findSet(platform.id(), metric.id(), lastModified);
         return [
-            this.baselineStyle(measurementSet, disableSampling, includeOutlier),
-            this.targetStyle(measurementSet, disableSampling, includeOutlier),
-            this.currentStyle(measurementSet, disableSampling, includeOutlier),
+            this.baselineStyle(measurementSet, disableSampling, includeOutlier, showPoint),
+            this.targetStyle(measurementSet, disableSampling, includeOutlier, showPoint),
+            this.currentStyle(measurementSet, disableSampling, includeOutlier, showPoint),
         ];
     }
 
-    static baselineStyle(measurementSet, disableSampling, includeOutlier)
+    static baselineStyle(measurementSet, disableSampling, includeOutlier, showPoint)
     {
         return {
             measurementSet: measurementSet,
@@ -42,15 +42,20 @@
             includeOutliers: includeOutlier,
             type: 'baseline',
             pointStyle: '#f33',
-            pointRadius: 2,
-            lineStyle: '#f99',
+            pointRadius: showPoint ? 2 : 0,
+            lineStyle: showPoint ? '#f99' : '#f66',
             lineWidth: 1.5,
-            intervalStyle: '#fdd',
-            intervalWidth: 2,
+            intervalStyle: 'rgba(255, 153, 153, 0.25)',
+            intervalWidth: 3,
+            foregroundLineStyle: '#f33',
+            foregroundPointRadius: 0,
+            backgroundIntervalStyle: 'rgba(255, 153, 153, 0.1)',
+            backgroundPointStyle: '#f99',
+            backgroundLineStyle: '#fcc',
         };
     }
 
-    static targetStyle(measurementSet, disableSampling, includeOutlier)
+    static targetStyle(measurementSet, disableSampling, includeOutlier, showPoint)
     {
         return {
             measurementSet: measurementSet,
@@ -59,15 +64,20 @@
             includeOutliers: includeOutlier,
             type: 'target',
             pointStyle: '#33f',
-            pointRadius: 2,
-            lineStyle: '#99f',
+            pointRadius: showPoint ? 2 : 0,
+            lineStyle: showPoint ? '#99f' : '#66f',
             lineWidth: 1.5,
-            intervalStyle: '#ddf',
-            intervalWidth: 2,
+            intervalStyle: 'rgba(153, 153, 255, 0.25)',
+            intervalWidth: 3,
+            foregroundLineStyle: '#33f',
+            foregroundPointRadius: 0,
+            backgroundIntervalStyle: 'rgba(153, 153, 255, 0.1)',
+            backgroundPointStyle: '#99f',
+            backgroundLineStyle: '#ccf',
         };
     }
 
-    static currentStyle(measurementSet, disableSampling, includeOutlier)
+    static currentStyle(measurementSet, disableSampling, includeOutlier, showPoint)
     {
         return {
             measurementSet: measurementSet,
@@ -75,11 +85,16 @@
             includeOutliers: includeOutlier,
             type: 'current',
             pointStyle: '#333',
-            pointRadius: 2,
-            lineStyle: '#999',
+            pointRadius: showPoint ? 2 : 0,
+            lineStyle: showPoint ? '#999' : '#666',
             lineWidth: 1.5,
-            intervalStyle: '#ddd',
-            intervalWidth: 2,
+            intervalStyle: 'rgba(153, 153, 153, 0.25)',
+            intervalWidth: 3,
+            foregroundLineStyle: '#333',
+            foregroundPointRadius: 0,
+            backgroundIntervalStyle: 'rgba(153, 153, 153, 0.1)',
+            backgroundPointStyle: '#999',
+            backgroundLineStyle: '#ccc',
             interactive: true,
         };
     }
diff --git a/Websites/perf.webkit.org/public/v3/components/time-series-chart.js b/Websites/perf.webkit.org/public/v3/components/time-series-chart.js
index 2e3376f..a92a7a8 100644
--- a/Websites/perf.webkit.org/public/v3/components/time-series-chart.js
+++ b/Websites/perf.webkit.org/public/v3/components/time-series-chart.js
@@ -7,9 +7,11 @@
         this.element().style.position = 'relative';
         this._canvas = null;
         this._sourceList = sourceList;
+        this._trendLines = null;
         this._options = options;
         this._fetchedTimeSeries = null;
         this._sampledTimeSeriesData = null;
+        this._renderedTrendLines = false;
         this._valueRangeCache = null;
         this._annotations = null;
         this._annotationRows = null;
@@ -76,14 +78,35 @@
         console.assert(startTime < endTime, 'startTime must be before endTime');
         this._startTime = startTime;
         this._endTime = endTime;
+        this._fetchedTimeSeries = null;
         this.fetchMeasurementSets(false);
     }
 
     setSourceList(sourceList)
     {
         this._sourceList = sourceList;
-        this.fetchMeasurementSets(false);
         this._fetchedTimeSeries = null;
+        this.fetchMeasurementSets(false);
+    }
+
+    sourceList() { return this._sourceList; }
+
+    clearTrendLines()
+    {
+        this._trendLines = null;
+        this._renderedTrendLines = false;
+        this.enqueueToRender();
+    }
+
+    setTrendLine(sourceIndex, trendLine)
+    {
+        if (this._trendLines)
+            this._trendLines = this._trendLines.slice(0);
+        else
+            this._trendLines = [];
+        this._trendLines[sourceIndex] = trendLine;
+        this._renderedTrendLines = false;
+        this.enqueueToRender();
     }
 
     fetchMeasurementSets(noCache)
@@ -198,6 +221,7 @@
         var doneWork = this._updateCanvasSizeIfClientSizeChanged();
         var metrics = this._computeHorizontalRenderingMetrics();
         doneWork |= this._ensureSampledTimeSeries(metrics);
+        doneWork |= this._ensureTrendLines();
         doneWork |= this._ensureValueRangeCache();
         this._computeVerticalRenderingMetrics(metrics);
         doneWork |= this._layoutAnnotationBars(metrics);
@@ -386,7 +410,14 @@
             var source = this._sourceList[i];
             var series = this._sampledTimeSeriesData[i];
             if (series)
-                this._renderTimeSeries(context, metrics, source, series);
+                this._renderTimeSeries(context, metrics, source, series, this._trendLines && this._trendLines[i] ? 'background' : '');
+        }
+
+        for (var i = 0; i < this._sourceList.length; i++) {
+            var source = this._sourceList[i];
+            var trendLine = this._trendLines ? this._trendLines[i] : null;
+            if (series && trendLine)
+                this._renderTimeSeries(context, metrics, source, trendLine, 'foreground');
         }
 
         if (!this._annotationRows)
@@ -402,7 +433,7 @@
         }
     }
 
-    _renderTimeSeries(context, metrics, source, series)
+    _renderTimeSeries(context, metrics, source, series, layerName)
     {
         for (var point of series) {
             point.x = metrics.timeToX(point.time);
@@ -412,27 +443,43 @@
         context.strokeStyle = source.intervalStyle;
         context.fillStyle = source.intervalStyle;
         context.lineWidth = source.intervalWidth;
+
+        context.beginPath();
+        var width = 1;
         for (var i = 0; i < series.length; i++) {
             var point = series[i];
-            if (!point.interval)
-                continue;
-            context.beginPath();
-            context.moveTo(point.x, metrics.valueToY(point.interval[0]))
-            context.lineTo(point.x, metrics.valueToY(point.interval[1]));
-            context.stroke();
+            var interval = point.interval();
+            var value = interval ? interval[0] : point.value;
+            context.lineTo(point.x - width, metrics.valueToY(value));
+            context.lineTo(point.x + width, metrics.valueToY(value));
         }
+        for (var i = series.length - 1; i >= 0; i--) {
+            var point = series[i];
+            var interval = point.interval();
+            var value = interval ? interval[1] : point.value;
+            context.lineTo(point.x + width, metrics.valueToY(value));
+            context.lineTo(point.x - width, metrics.valueToY(value));
+        }
+        context.fill();
 
-        context.strokeStyle = source.lineStyle;
-        context.lineWidth = source.lineWidth;
+        context.strokeStyle = this._sourceOptionWithFallback(source, layerName + 'LineStyle', 'lineStyle');
+        context.lineWidth = this._sourceOptionWithFallback(source, layerName + 'LineWidth', 'lineWidth');
         context.beginPath();
         for (var point of series)
             context.lineTo(point.x, point.y);
         context.stroke();
 
-        context.fillStyle = source.pointStyle;
-        var radius = source.pointRadius;
-        for (var point of series)
-            this._fillCircle(context, point.x, point.y, radius);
+        context.fillStyle = this._sourceOptionWithFallback(source, layerName + 'PointStyle', 'pointStyle');
+        var radius = this._sourceOptionWithFallback(source, layerName + 'PointRadius', 'pointRadius');
+        if (radius) {
+            for (var point of series)
+                this._fillCircle(context, point.x, point.y, radius);
+        }
+    }
+
+    _sourceOptionWithFallback(option, preferred, fallback)
+    {
+        return preferred in option ? option[preferred] : option[fallback];
     }
 
     _fillCircle(context, cx, cy, radius)
@@ -476,7 +523,7 @@
                 return null;
 
             // A chart with X px width shouldn't have more than 2X / <radius-of-points> data points.
-            var maximumNumberOfPoints = 2 * metrics.chartWidth / source.pointRadius;
+            var maximumNumberOfPoints = 2 * metrics.chartWidth / (source.pointRadius || 2);
 
             var pointAfterStart = timeSeries.findPointAfterTime(startTime);
             var pointBeforeStart = (pointAfterStart ? timeSeries.previousPoint(pointAfterStart) : null) || timeSeries.firstPoint();
@@ -547,6 +594,14 @@
         return sampledData;
     }
 
+    _ensureTrendLines()
+    {
+        if (this._renderedTrendLines)
+            return false;
+        this._renderedTrendLines = true;
+        return true;
+    }
+
     _ensureValueRangeCache()
     {
         if (this._valueRangeCache)
diff --git a/Websites/perf.webkit.org/public/v3/index.html b/Websites/perf.webkit.org/public/v3/index.html
index 6f1c7e8..497ec84 100644
--- a/Websites/perf.webkit.org/public/v3/index.html
+++ b/Websites/perf.webkit.org/public/v3/index.html
@@ -43,6 +43,7 @@
         <script src="instrumentation.js"></script>
         <script src="remote.js"></script>
         <script src="privileged-api.js"></script>
+        <script src="async-task.js"></script>
 
         <script src="models/time-series.js"></script>
         <script src="models/measurement-adaptor.js"></script>
diff --git a/Websites/perf.webkit.org/public/v3/models/measurement-cluster.js b/Websites/perf.webkit.org/public/v3/models/measurement-cluster.js
index e641847..3d2590c 100644
--- a/Websites/perf.webkit.org/public/v3/models/measurement-cluster.js
+++ b/Websites/perf.webkit.org/public/v3/models/measurement-cluster.js
@@ -21,9 +21,9 @@
             var point = this._adaptor.applyTo(row);
             if (point.id in idMap || (!includeOutliers && point.isOutlier))
                 continue;
-            idMap[point.id] = true;
-            point.cluster = this;
             series.append(point);
+            idMap[point.id] = point.seriesIndex;
+            point.cluster = this;
         }
     }
 }
diff --git a/Websites/perf.webkit.org/public/v3/models/measurement-set.js b/Websites/perf.webkit.org/public/v3/models/measurement-set.js
index 456dd9c..aa132d0 100644
--- a/Websites/perf.webkit.org/public/v3/models/measurement-set.js
+++ b/Websites/perf.webkit.org/public/v3/models/measurement-set.js
@@ -18,6 +18,7 @@
         this._allFetches = {};
         this._callbackMap = new Map;
         this._primaryClusterPromise = null;
+        this._segmentationCache = new Map;
     }
 
     platformId() { return this._platformId; }
@@ -196,6 +197,113 @@
 
         return series;
     }
+
+    fetchSegmentation(segmentationName, parameters, configType, includeOutliers, extendToFuture)
+    {
+        var cacheMap = this._segmentationCache.get(configType);
+        if (!cacheMap) {
+            cacheMap = new WeakMap;
+            this._segmentationCache.set(configType, cacheMap);
+        }
+
+        var timeSeries = new TimeSeries;
+        var idMap = {};
+        var promises = [];
+        for (var cluster of this._sortedClusters) {
+            var clusterStart = timeSeries.length();
+            cluster.addToSeries(timeSeries, configType, includeOutliers, idMap);
+            var clusterEnd = timeSeries.length();
+            promises.push(this._cachedClusterSegmentation(segmentationName, parameters, cacheMap,
+                cluster, timeSeries, clusterStart, clusterEnd, idMap));
+        }
+        if (!timeSeries.length())
+            return Promise.resolve(null);
+
+        var self = this;
+        return Promise.all(promises).then(function (clusterSegmentations) {
+            var segmentationSeries = [];
+            var addSegment = function (startingPoint, endingPoint) {
+                var value = Statistics.mean(timeSeries.valuesBetweenRange(startingPoint.seriesIndex, endingPoint.seriesIndex));
+                segmentationSeries.push({value: value, time: startingPoint.time, interval: function () { return null; }});
+                segmentationSeries.push({value: value, time: endingPoint.time, interval: function () { return null; }});
+            };
+
+            var startingIndex = 0;
+            for (var segmentation of clusterSegmentations) {
+                for (var endingIndex of segmentation) {
+                    addSegment(timeSeries.findPointByIndex(startingIndex), timeSeries.findPointByIndex(endingIndex));
+                    startingIndex = endingIndex;
+                }
+            }
+            if (extendToFuture)
+                timeSeries.extendToFuture();
+            addSegment(timeSeries.findPointByIndex(startingIndex), timeSeries.lastPoint());
+            return segmentationSeries;
+        });
+    }
+
+    _cachedClusterSegmentation(segmentationName, parameters, cacheMap, cluster, timeSeries, clusterStart, clusterEnd, idMap)
+    {
+        var cache = cacheMap.get(cluster);
+        if (cache && this._validateSegmentationCache(cache, segmentationName, parameters)) {
+            var segmentationByIndex = new Array(cache.segmentation.length);
+            for (var i = 0; i < cache.segmentation.length; i++) {
+                var id = cache.segmentation[i];
+                if (!(id in idMap))
+                    return null;
+                segmentationByIndex[i] = idMap[id];
+            }
+            return Promise.resolve(segmentationByIndex);
+        }
+
+        var clusterValues = timeSeries.valuesBetweenRange(clusterStart, clusterEnd);
+        return this._invokeSegmentationAlgorithm(segmentationName, parameters, clusterValues).then(function (segmentationInClusterIndex) {
+            // Remove cluster start/end as segmentation points. Otherwise each cluster will be placed into its own segment. 
+            var segmentation = segmentationInClusterIndex.slice(1, -1).map(function (index) { return clusterStart + index; });
+            var cache = segmentation.map(function (index) { return timeSeries.findPointByIndex(index).id; });
+            cacheMap.set(cluster, {segmentationName: segmentationName, segmentationParameters: parameters.slice(), segmentation: cache});
+            return segmentation;
+        });
+    }
+
+    _validateSegmentationCache(cache, segmentationName, parameters)
+    {
+        if (cache.segmentationName != segmentationName)
+            return false;
+        if (!!cache.segmentationParameters != !!parameters)
+            return false;
+        if (parameters) {
+            if (parameters.length != cache.segmentationParameters.length)
+                return false;
+            for (var i = 0; i < parameters.length; i++) {
+                if (parameters[i] != cache.segmentationParameters[i])
+                    return false;
+            }
+        }
+        return true;
+    }
+
+    _invokeSegmentationAlgorithm(segmentationName, parameters, timeSeriesValues)
+    {
+        var args = [timeSeriesValues].concat(parameters || []);
+
+        var timeSeriesIsShortEnoughForSyncComputation = timeSeriesValues.length < 100;
+        if (timeSeriesIsShortEnoughForSyncComputation) {
+            Instrumentation.startMeasuringTime('_invokeSegmentationAlgorithm', 'syncSegmentation');
+            var segmentation = Statistics[segmentationName].apply(timeSeriesValues, args);
+            Instrumentation.endMeasuringTime('_invokeSegmentationAlgorithm', 'syncSegmentation');
+            return Promise.resolve(segmentation);
+        }
+
+        var task = new AsyncTask(segmentationName, args);
+        return task.execute().then(function (response) {
+            Instrumentation.reportMeasurement('_invokeSegmentationAlgorithm', 'workerStartLatency', 'ms', response.startLatency);
+            Instrumentation.reportMeasurement('_invokeSegmentationAlgorithm', 'workerTime', 'ms', response.workerTime);
+            Instrumentation.reportMeasurement('_invokeSegmentationAlgorithm', 'totalTime', 'ms', response.totalTime);
+            return response.result;
+        });
+    }
+
 }
 
 if (typeof module != 'undefined')
diff --git a/Websites/perf.webkit.org/public/v3/models/time-series.js b/Websites/perf.webkit.org/public/v3/models/time-series.js
index b6e9f48..67cca13 100644
--- a/Websites/perf.webkit.org/public/v3/models/time-series.js
+++ b/Websites/perf.webkit.org/public/v3/models/time-series.js
@@ -1,12 +1,15 @@
+'use strict';
 
 // v3 UI still relies on RunsData for associating metrics with units.
 // Use declartive syntax once that dependency has been removed.
-TimeSeries = class {
+var TimeSeries = class {
     constructor()
     {
         this._data = [];
     }
 
+    length() { return this._data.length; }
+
     append(item)
     {
         console.assert(item.series === undefined);
@@ -29,6 +32,17 @@
         });
     }
 
+    valuesBetweenRange(startingIndex, endingIndex)
+    {
+        startingIndex = Math.max(startingIndex, 0);
+        endingIndex = Math.min(endingIndex, this._data.length);
+        var length = endingIndex - startingIndex;
+        var values = new Array(length);
+        for (var i = 0; i < length; i++)
+            values[i] = this._data[startingIndex + i].value;
+        return values;
+    }
+
     firstPoint() { return this._data.length ? this._data[0] : null; }
     lastPoint() { return this._data.length ? this._data[this._data.length - 1] : null; }
 
@@ -67,3 +81,6 @@
     }
 
 };
+
+if (typeof module != 'undefined')
+    module.exports.TimeSeries = TimeSeries;
diff --git a/Websites/perf.webkit.org/public/v3/pages/chart-pane.js b/Websites/perf.webkit.org/public/v3/pages/chart-pane.js
index 4c9e845..fac7d3e 100644
--- a/Websites/perf.webkit.org/public/v3/pages/chart-pane.js
+++ b/Websites/perf.webkit.org/public/v3/pages/chart-pane.js
@@ -1,4 +1,69 @@
 
+function createTrendLineExecutableFromAveragingFunction(callback) {
+    return function (source, parameters) {
+        var timeSeries = source.measurementSet.fetchedTimeSeries(source.type, source.includeOutliers, source.extendToFuture);
+        var values = timeSeries.values();
+        if (!values.length)
+            return Promise.resolve(null);
+
+        var averageValues = callback.call(null, values, parameters[0], parameters[1]);
+        if (!averageValues)
+            return Promise.resolve(null);
+
+        var interval = function () { return null; }
+        var result = new Array(averageValues.length);
+        for (var i = 0; i < averageValues.length; i++)
+            result[i] = {time: timeSeries.findPointByIndex(i).time, value: averageValues[i], interval: interval};
+
+        return Promise.resolve(result);
+    }
+}
+
+var ChartTrendLineTypes = [
+    {
+        id: 0,
+        label: 'None',
+    },
+    {
+        id: 5,
+        label: 'Segmentation',
+        execute: function (source, parameters) {
+            return source.measurementSet.fetchSegmentation('segmentTimeSeriesByMaximizingSchwarzCriterion', parameters,
+                source.type, source.includeOutliers, source.extendToFuture).then(function (segmentation) {
+                return segmentation;
+            });
+        },
+        parameterList: [
+            {label: "Segment count weight", value: 2.5, min: 0.01, max: 10, step: 0.01},
+            {label: "Grid size", value: 500, min: 100, max: 10000, step: 10}
+        ]
+    },
+    {
+        id: 1,
+        label: 'Simple Moving Average',
+        parameterList: [
+            {label: "Backward window size", value: 8, min: 2, step: 1},
+            {label: "Forward window size", value: 4, min: 0, step: 1}
+        ],
+        execute: createTrendLineExecutableFromAveragingFunction(Statistics.movingAverage.bind(Statistics))
+    },
+    {
+        id: 2,
+        label: 'Cumulative Moving Average',
+        execute: createTrendLineExecutableFromAveragingFunction(Statistics.cumulativeMovingAverage.bind(Statistics))
+    },
+    {
+        id: 3,
+        label: 'Exponential Moving Average',
+        parameterList: [
+            {label: "Smoothing factor", value: 0.01, min: 0.001, max: 0.9, step: 0.001},
+        ],
+        execute: createTrendLineExecutableFromAveragingFunction(Statistics.exponentialMovingAverage.bind(Statistics))
+    },
+];
+ChartTrendLineTypes.DefaultType = ChartTrendLineTypes[1];
+
+
 class ChartPane extends ChartPaneBase {
     constructor(chartsPage, platformId, metricId)
     {
@@ -7,6 +72,10 @@
         this._mainChartIndicatorWasLocked = false;
         this._chartsPage = chartsPage;
         this._lockedPopover = null;
+        this._trendLineType = null;
+        this._trendLineParameters = [];
+        this._trendLineVersion = 0;
+        this._renderedTrandLineOptions = false;
 
         this.content().querySelector('close-button').component().setCallback(chartsPage.closePane.bind(chartsPage, this));
 
@@ -34,6 +103,9 @@
         if (graphOptions.size)
             state[3] = graphOptions;
 
+        if (this._trendLineType)
+            state[4] = [this._trendLineType.id].concat(this._trendLineParameters);
+
         return state;
     }
 
@@ -52,14 +124,28 @@
             this._mainChart.setIndicator(null, false);
 
         // FIXME: This forces sourceList to be set twice. First in configure inside the constructor then here.
+        // FIXME: Show full y-axis when graphOptions is true to be compatible with v2 UI.
         var graphOptions = state[3];
         if (graphOptions instanceof Set) {
             this.setSamplingEnabled(!graphOptions.has('nosampling'));
             this.setShowOutliers(graphOptions.has('showoutliers'));
         }
 
-        // FIXME: Show full y-axis when graphOptions is true to be compatible with v2 UI.
-        // FIXME: state[4] specifies moving average in v2 UI
+        var trendLineOptions = state[4];
+        if (!(trendLineOptions instanceof Array))
+            trendLineOptions = [];
+
+        var trendLineId = trendLineOptions[0];
+        var trendLineType = ChartTrendLineTypes.find(function (type) { return type.id == trendLineId; }) || ChartTrendLineTypes.DefaultType;
+
+        this._trendLineType = trendLineType;
+        this._trendLineParameters = (trendLineType.parameterList || []).map(function (parameter, index) {
+            var specifiedValue = parseFloat(trendLineOptions[index + 1]);
+            return !isNaN(specifiedValue) ? specifiedValue : parameter.value;
+        });
+        this._updateTrendLine();
+        this._renderedTrandLineOptions = false;
+
         // FIXME: state[5] specifies envelope in v2 UI
         // FIXME: state[6] specifies change detection algorithm in v2 UI
     }
@@ -202,7 +288,11 @@
         var filteringOptions = this.content().querySelector('.chart-pane-filtering-options');
         actions.push(this._makePopoverActionItem(filteringOptions, 'Filtering', true));
 
+        var trendLineOptions = this.content().querySelector('.chart-pane-trend-line-options');
+        actions.push(this._makePopoverActionItem(trendLineOptions, 'Trend lines', true));
+
         this._renderFilteringPopover();
+        this._renderTrendLinePopover();
 
         this._lockedPopover = null;
         this.renderReplace(this.content().querySelector('.chart-pane-action-buttons'), actions);
@@ -307,6 +397,117 @@
         markAsOutlierButton.disabled = !firstSelectedPoint;
     }
 
+    _renderTrendLinePopover()
+    {
+        var element = ComponentBase.createElement;
+        var link = ComponentBase.createLink;
+        var self = this;
+
+        if (this._trendLineType == null) {
+            this.renderReplace(this.content().querySelector('.trend-line-types'), [
+                element('select', {onchange: this._trendLineTypeDidChange.bind(this)},
+                    ChartTrendLineTypes.map(function (type) {
+                        return element('option', type == self._trendLineType ? {value: type.id, selected: true} : {value: type.id}, type.label);
+                    }))
+            ]);
+        } else
+            this.content().querySelector('.trend-line-types select').value = this._trendLineType.id;
+
+        if (this._renderedTrandLineOptions)
+            return;
+        this._renderedTrandLineOptions = true;
+
+        if (this._trendLineParameters.length) {
+            var configuredParameters = this._trendLineParameters;
+            this.renderReplace(this.content().querySelector('.trend-line-parameter-list'), [
+                element('h3', 'Parameters'),
+                element('ul', this._trendLineType.parameterList.map(function (parameter, index) {
+                    var attributes = {type: 'number'};
+                    for (var name in parameter)
+                        attributes[name] = parameter[name];
+                    attributes.value = configuredParameters[index];
+                    var input = element('input', attributes);
+                    input.parameterIndex = index;
+                    input.oninput = self._trendLineParameterDidChange.bind(self);
+                    input.onchange = self._trendLineParameterDidChange.bind(self);
+                    return element('li', element('label', [parameter.label + ': ', input]));
+                }))
+            ]);
+        } else
+            this.renderReplace(this.content().querySelector('.trend-line-parameter-list'), []);
+    }
+
+    _trendLineTypeDidChange(event)
+    {
+        var newType = ChartTrendLineTypes.find(function (type) { return type.id == event.target.value });
+        if (newType == this._trendLineType)
+            return;
+
+        this._trendLineType = newType;
+        this._trendLineParameters = this._defaultParametersForTrendLine(newType);
+        this._renderedTrandLineOptions = false;
+
+        this._updateTrendLine();
+        this._chartsPage.graphOptionsDidChange();
+        this.render();
+    }
+
+    _defaultParametersForTrendLine(type)
+    {
+        return type && type.parameterList ? type.parameterList.map(function (parameter) { return parameter.value; }) : [];
+    }
+
+    _trendLineParameterDidChange(event)
+    {
+        var input = event.target;
+        var index = input.parameterIndex;
+        var newValue = parseFloat(input.value);
+        if (this._trendLineParameters[index] == newValue)
+            return;
+        this._trendLineParameters[index] = newValue;
+        var self = this;
+        setTimeout(function () { // Some trend lines, e.g. sementations, are expensive.
+            if (self._trendLineParameters[index] != newValue)
+                return;
+            self._updateTrendLine();
+            self._chartsPage.graphOptionsDidChange();
+        }, 500);
+    }
+
+    _didFetchData()
+    {
+        super._didFetchData();
+        this._updateTrendLine();
+    }
+
+    _updateTrendLine()
+    {
+        if (!this._mainChart.sourceList())
+            return;
+
+        this._trendLineVersion++;
+        var currentTrendLineType = this._trendLineType || ChartTrendLineTypes.DefaultType;
+        var currentTrendLineParameters = this._trendLineParameters || this._defaultParametersForTrendLine(currentTrendLineType);
+        var currentTrendLineVersion = this._trendLineVersion;
+        var self = this;
+        var sourceList = this._mainChart.sourceList();
+
+        if (!currentTrendLineType.execute) {
+            this._mainChart.clearTrendLines();
+            this.render();
+        } else {
+            // Wait for all trendlines to be ready. Otherwise we might see FOC when the domain is expanded.
+            Promise.all(sourceList.map(function (source, sourceIndex) {
+                return currentTrendLineType.execute.call(null, source, currentTrendLineParameters).then(function (trendlineSeries) {
+                    if (self._trendLineVersion == currentTrendLineVersion)
+                        self._mainChart.setTrendLine(sourceIndex, trendlineSeries);
+                });
+            })).then(function () {
+                self.render();
+            });
+        }
+    }
+
     static paneHeaderTemplate()
     {
         return `
@@ -327,6 +528,10 @@
                         <li><label><input type="checkbox" class="show-outliers">Show outliers</label></li>
                         <li><button class="mark-as-outlier">Mark selected points as outlier</button></li>
                     </ul>
+                    <ul class="chart-pane-trend-line-options popover" style="display:none">
+                        <div class="trend-line-types"></div>
+                        <div class="trend-line-parameter-list"></div>
+                    </ul>
                 </nav>
             </header>
         `;
@@ -397,12 +602,18 @@
                 border: solid 1px #ccc;
                 border-radius: 0.2rem;
                 z-index: 10;
-                background: rgba(255, 255, 255, 0.8);
-                -webkit-backdrop-filter: blur(0.5rem);
                 padding: 0.2rem 0;
                 margin: 0;
                 margin-top: -0.2rem;
                 margin-right: -0.2rem;
+                background: rgba(255, 255, 255, 0.95);
+            }
+
+            @supports ( -webkit-backdrop-filter: blur(0.5rem) ) {
+                .chart-pane-actions .popover {
+                    background: rgba(255, 255, 255, 0.6);
+                    -webkit-backdrop-filter: blur(0.5rem);
+                }
             }
 
             .chart-pane-actions .popover li {
@@ -429,6 +640,32 @@
                 font-size: 0.9rem;
             }
 
+            .chart-pane-actions .popover.chart-pane-filtering-options {
+                padding: 0.2rem;
+            }
+
+            .chart-pane-actions .popover.chart-pane-trend-line-options h3 {
+                font-size: 0.9rem;
+                line-height: 0.9rem;
+                font-weight: inherit;
+                margin: 0;
+                padding: 0.2rem;
+                border-bottom: solid 1px #ccc;
+            }
+
+            .chart-pane-actions .popover.chart-pane-trend-line-options select,
+            .chart-pane-actions .popover.chart-pane-trend-line-options label {
+                margin: 0.2rem;
+            }
+
+            .chart-pane-actions .popover.chart-pane-trend-line-options label {
+                font-size: 0.8rem;
+            }
+
+            .chart-pane-actions .popover.chart-pane-trend-line-options input {
+                width: 2.5rem;
+            }
+
             .chart-pane-actions .popover input[type=text] {
                 font-size: 1rem;
                 width: 15rem;
diff --git a/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js b/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js
index 1f72264..c851f4e 100644
--- a/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js
+++ b/Websites/perf.webkit.org/public/v3/pages/dashboard-page.js
@@ -134,7 +134,7 @@
 
         var options = ChartStyles.dashboardOptions(result.metric.makeFormatter(3));
         options.ondata = this._fetchedData.bind(this);
-        var chart = new TimeSeriesChart(ChartStyles.createSourceList(result.platform, result.metric, false, false), options);
+        var chart = new TimeSeriesChart(ChartStyles.createSourceList(result.platform, result.metric, false, false, true), options);
         this._charts.push(chart);
 
         var statusView = new ChartStatusView(result.metric, chart);
diff --git a/Websites/perf.webkit.org/tools/js/v3-models.js b/Websites/perf.webkit.org/tools/js/v3-models.js
index 826e2b0..7cefe2d 100644
--- a/Websites/perf.webkit.org/tools/js/v3-models.js
+++ b/Websites/perf.webkit.org/tools/js/v3-models.js
@@ -26,6 +26,7 @@
 importFromV3('models/root-set.js', 'RootSet');
 importFromV3('models/test.js', 'Test');
 importFromV3('models/test-group.js', 'TestGroup');
+importFromV3('models/time-series.js', 'TimeSeries');
 
 importFromV3('privileged-api.js', 'PrivilegedAPI');
 importFromV3('instrumentation.js', 'Instrumentation');
diff --git a/Websites/perf.webkit.org/unit-tests/measurement-set-tests.js b/Websites/perf.webkit.org/unit-tests/measurement-set-tests.js
index 2fe5425..abde897 100644
--- a/Websites/perf.webkit.org/unit-tests/measurement-set-tests.js
+++ b/Websites/perf.webkit.org/unit-tests/measurement-set-tests.js
@@ -1,6 +1,8 @@
 'use strict';
 
 var assert = require('assert');
+if (!assert.almostEqual)
+    assert.almostEqual = require('./resources/almost-equal.js');
 
 let MockRemoteAPI = require('./resources/mock-remote-api.js').MockRemoteAPI;
 require('../tools/js/v3-models.js');
@@ -741,4 +743,143 @@
 
     });
 
+    describe('fetchSegmentation', function () {
+
+        var simpleSegmentableValues = [
+            1546.5603, 1548.1536, 1563.5452, 1539.7823, 1546.4184, 1548.9299, 1532.5444, 1546.2800, 1547.1760, 1551.3507,
+            1548.3277, 1544.7673, 1542.7157, 1538.1700, 1538.0948, 1543.0364, 1537.9737, 1542.2611, 1543.9685, 1546.4901,
+            1544.4080, 1540.8671, 1537.3353, 1549.4331, 1541.4436, 1544.1299, 1550.1770, 1553.1872, 1549.3417, 1542.3788,
+            1543.5094, 1541.7905, 1537.6625, 1547.3840, 1538.5185, 1549.6764, 1556.6138, 1552.0476, 1541.7629, 1544.7006,
+            /* segments changes here */
+            1587.1390, 1594.5451, 1586.2430, 1596.7310, 1548.1423
+        ];
+
+        function makeSampleRuns(values, startRunId, startTime, timeIncrement)
+        {
+            var runId = startRunId;
+            var buildId = 3400;
+            var buildNumber = 1;
+            var makeRun = function (value, commitTime) {
+                return [runId++, value, 1, value, value, false, [], commitTime, commitTime + 10, buildId++, buildNumber++, MockModels.builder.id()];
+            }
+
+            timeIncrement = Math.floor(timeIncrement);
+            var runs = values.map(function (value, index) { return makeRun(value, startTime + index * timeIncrement); })
+            
+            return runs;
+        }
+
+        it('should be able to segment a single cluster', function (done) {
+            var set = MeasurementSet.findSet(1, 1, 5000);
+            var promise = set.fetchBetween(4000, 5000);
+            assert.equal(requests.length, 1);
+            assert.equal(requests[0].url, '../data/measurement-set-1-1.json');
+
+            requests[0].resolve({
+                'clusterStart': 1000,
+                'clusterSize': 1000,
+                'formatMap': ['id', 'mean', 'iterationCount', 'sum', 'squareSum', 'markedOutlier', 'revisions', 'commitTime', 'build', 'buildTime', 'buildNumber', 'builder'],
+                'configurations': {current: makeSampleRuns(simpleSegmentableValues, 6400, 4000, 1000 / 50)},
+                'startTime': 4000,
+                'endTime': 5000,
+                'lastModified': 5000,
+                'clusterCount': 4,
+                'status': 'OK'});
+
+            var timeSeries;
+            assert.equal(set.fetchedTimeSeries('current', false, false).length(), 0);
+            waitForMeasurementSet().then(function () {
+                timeSeries = set.fetchedTimeSeries('current', false, false);
+                assert.equal(timeSeries.length(), 45);
+                assert.equal(timeSeries.firstPoint().time, 4000);
+                assert.equal(timeSeries.lastPoint().time, 4880);
+                return set.fetchSegmentation('segmentTimeSeriesByMaximizingSchwarzCriterion', [], 'current', false);
+            }).then(function (segmentation) {
+                assert.equal(segmentation.length, 4);
+
+                assert.equal(segmentation[0].time, 4000);
+                assert.almostEqual(segmentation[0].value, 1545.082);
+                assert.equal(segmentation[0].value, segmentation[1].value);
+                assert.equal(segmentation[1].time, timeSeries.findPointByIndex(39).time);
+
+                assert.equal(segmentation[2].time, timeSeries.findPointByIndex(39).time);
+                assert.almostEqual(segmentation[2].value, 1581.872);
+                assert.equal(segmentation[2].value, segmentation[3].value);
+                assert.equal(segmentation[3].time, 4880);
+                done();
+            }).catch(done);
+        });
+
+        it('should be able to segment two clusters', function (done) {
+            var set = MeasurementSet.findSet(1, 1, 5000);
+            var promise = set.fetchBetween(3000, 5000);
+            assert.equal(requests.length, 1);
+            assert.equal(requests[0].url, '../data/measurement-set-1-1.json');
+
+            requests[0].resolve({
+                'clusterStart': 1000,
+                'clusterSize': 1000,
+                'formatMap': ['id', 'mean', 'iterationCount', 'sum', 'squareSum', 'markedOutlier', 'revisions', 'commitTime', 'build', 'buildTime', 'buildNumber', 'builder'],
+                'configurations': {current: makeSampleRuns(simpleSegmentableValues.slice(30), 6400, 4000, 1000 / 30)},
+                'startTime': 4000,
+                'endTime': 5000,
+                'lastModified': 5000,
+                'clusterCount': 4,
+                'status': 'OK'});
+
+            waitForMeasurementSet().then(function () {
+                assert.equal(requests.length, 2);
+                assert.equal(requests[1].url, '../data/measurement-set-1-1-4000.json');
+                return set.fetchSegmentation('segmentTimeSeriesByMaximizingSchwarzCriterion', [], 'current', false);
+            }).then(function (segmentation) {
+                var timeSeries = set.fetchedTimeSeries('current', false, false);
+                assert.equal(timeSeries.length(), 15);
+                assert.equal(timeSeries.firstPoint().time, 4000);
+                assert.equal(timeSeries.lastPoint().time, 4462);
+
+                assert.equal(segmentation.length, 4);
+                assert.equal(segmentation[0].time, timeSeries.firstPoint().time);
+                assert.almostEqual(segmentation[0].value, 1545.441);
+                assert.equal(segmentation[0].value, segmentation[1].value);
+                assert.equal(segmentation[1].time, timeSeries.findPointByIndex(9).time);
+
+                assert.equal(segmentation[2].time, timeSeries.findPointByIndex(9).time);
+                assert.almostEqual(segmentation[2].value, 1581.872);
+                assert.equal(segmentation[2].value, segmentation[3].value);
+                assert.equal(segmentation[3].time, timeSeries.lastPoint().time);
+
+                requests[1].resolve({
+                    'clusterStart': 1000,
+                    'clusterSize': 1000,
+                    'formatMap': ['id', 'mean', 'iterationCount', 'sum', 'squareSum', 'markedOutlier', 'revisions', 'commitTime', 'build', 'buildTime', 'buildNumber', 'builder'],
+                    'configurations': {current: makeSampleRuns(simpleSegmentableValues.slice(0, 30), 6500, 3000, 1000 / 30)},
+                    'startTime': 3000,
+                    'endTime': 4000,
+                    'lastModified': 5000,
+                    'clusterCount': 4,
+                    'status': 'OK'});
+                return waitForMeasurementSet();
+            }).then(function () {
+                return set.fetchSegmentation('segmentTimeSeriesByMaximizingSchwarzCriterion', [], 'current', false);
+            }).then(function (segmentation) {
+                var timeSeries = set.fetchedTimeSeries('current', false, false);
+                assert.equal(timeSeries.length(), 45);
+                assert.equal(timeSeries.firstPoint().time, 3000);
+                assert.equal(timeSeries.lastPoint().time, 4462);
+                assert.equal(segmentation.length, 4);
+
+                assert.equal(segmentation[0].time, timeSeries.firstPoint().time);
+                assert.almostEqual(segmentation[0].value, 1545.082);
+                assert.equal(segmentation[0].value, segmentation[1].value);
+                assert.equal(segmentation[1].time, timeSeries.findPointByIndex(39).time);
+
+                assert.equal(segmentation[2].time, timeSeries.findPointByIndex(39).time);
+                assert.almostEqual(segmentation[2].value, 1581.872);
+                assert.equal(segmentation[2].value, segmentation[3].value);
+                assert.equal(segmentation[3].time, timeSeries.lastPoint().time);
+                done();
+            }).catch(done);
+        });
+
+    });
 });
diff --git a/Websites/perf.webkit.org/unit-tests/resources/almost-equal.js b/Websites/perf.webkit.org/unit-tests/resources/almost-equal.js
new file mode 100644
index 0000000..c5d3ed4
--- /dev/null
+++ b/Websites/perf.webkit.org/unit-tests/resources/almost-equal.js
@@ -0,0 +1,26 @@
+var assert = require('assert');
+
+function almostEqual(actual, expected, precision, message)
+{
+    var suffiedMessage = (message ? message + ' ' : '');
+    if (isNaN(expected)) {
+        assert(isNaN(actual), `${suffiedMessage}expected NaN but got ${actual}`);
+        return;
+    }
+
+    if (expected == 0) {
+        assert.equal(actual, expected, message);
+        return;
+    }
+
+    if (!precision)
+        precision = 6;
+    var tolerance = 1 / Math.pow(10, precision);
+    var relativeDifference = Math.abs((actual - expected) / expected);
+    var percentDifference = (relativeDifference * 100).toFixed(2);
+    assert(relativeDifference < tolerance,
+        `${suffiedMessage}expected ${expected} but got ${actual} (${percentDifference}% difference)`);
+}
+
+if (typeof module != 'undefined')
+    module.exports = almostEqual;
diff --git a/Websites/perf.webkit.org/unit-tests/statistics-tests.js b/Websites/perf.webkit.org/unit-tests/statistics-tests.js
index 161ecbc..331aad3 100644
--- a/Websites/perf.webkit.org/unit-tests/statistics-tests.js
+++ b/Websites/perf.webkit.org/unit-tests/statistics-tests.js
@@ -2,29 +2,9 @@
 
 var assert = require('assert');
 var Statistics = require('../public/shared/statistics.js');
+if (!assert.almostEqual)
+    assert.almostEqual = require('./resources/almost-equal.js');
 
-if (!assert.almostEqual) {
-    assert.almostEqual = function (actual, expected, precision, message) {
-        var suffiedMessage = (message ? message + ' ' : '');
-        if (isNaN(expected)) {
-            assert(isNaN(actual), `${suffiedMessage}expected NaN but got ${actual}`);
-            return;
-        }
-
-        if (expected == 0) {
-            assert.equal(actual, expected, message);
-            return;
-        }
-
-        if (!precision)
-            precision = 6;
-        var tolerance = 1 / Math.pow(10, precision);
-        var relativeDifference = Math.abs((actual - expected) / expected);
-        var percentDifference = (relativeDifference * 100).toFixed(2);
-        assert(relativeDifference < tolerance,
-            `${suffiedMessage}expected ${expected} but got ${actual} (${percentDifference}% difference)`);
-    }
-}
 
 describe('assert.almostEqual', function () {
     it('should not throw when values are identical', function () {