Websites/perf.webkit.org/public/v3/components/chart-pane-base.js - WebKit - Git at Google


 class ChartPaneBase extends ComponentBase {

     constructor(name)
     {
         super(name);

         this._errorMessage = null;
         this._platformId = null;
         this._metricId = null;
         this._platform = null;
         this._metric = null;
         this._disableSampling = false;
         this._showOutliers = false;

         this._overviewChart = null;
         this._mainChart = null;
         this._mainChartStatus = null;
         this._commitLogViewer = null;
         this._tasksForAnnotations = null;
         this._renderedAnnotations = false;
     }

     configure(platformId, metricId)
     {
         var result = ChartStyles.resolveConfiguration(platformId, metricId);
         this._errorMessage = result.error;
         this._platformId = platformId;
         this._metricId = metricId;
         this._platform = result.platform;
         this._metric = result.metric;

         this._overviewChart = null;
         this._mainChart = null;
         this._mainChartStatus = null;

         this._commitLogViewer = this.content().querySelector('commit-log-viewer').component();

         if (result.error)
             return;

         var formatter = result.metric.makeFormatter(4);
         var self = this;

         var overviewOptions = ChartStyles.overviewChartOptions(formatter);
         overviewOptions.selection.onchange = this._overviewSelectionDidChange.bind(this);
         this._overviewChart = new InteractiveTimeSeriesChart(this._createSourceList(false), overviewOptions);
         this.renderReplace(this.content().querySelector('.chart-pane-overview'), this._overviewChart);

         var mainOptions = ChartStyles.mainChartOptions(formatter);
         mainOptions.indicator.onchange = this._indicatorDidChange.bind(this);
         mainOptions.selection.onchange = this._mainSelectionDidChange.bind(this);
         mainOptions.selection.onzoom = this._mainSelectionDidZoom.bind(this);
         mainOptions.annotations.onclick = this._openAnalysisTask.bind(this);
         mainOptions.ondata = this._didFetchData.bind(this);
         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));
         this.renderReplace(this.content().querySelector('.chart-pane-details'), this._mainChartStatus);

         this.content().querySelector('.chart-pane').addEventListener('keyup', this._keyup.bind(this));

         this.fetchAnalysisTasks(false);
     }

     isSamplingEnabled() { return !this._disableSampling; }
     setSamplingEnabled(enabled)
     {
         this._disableSampling = !enabled;
         this._updateSourceList();
     }

     isShowingOutliers() { return this._showOutliers; }
     setShowOutliers(show)
     {
         this._showOutliers = !!show;
         this._updateSourceList();
     }

     _createSourceList(isMainChart)
     {
         return ChartStyles.createSourceList(this._platform, this._metric, this._disableSampling, this._showOutliers, isMainChart);
     }

     _updateSourceList()
     {
         this._mainChart.setSourceList(this._createSourceList(true));
         this._overviewChart.setSourceList(this._createSourceList(false));
     }

     fetchAnalysisTasks(noCache)
     {
         // FIXME: we need to update the annotation bars when the change type of tasks change.
         var self = this;
         AnalysisTask.fetchByPlatformAndMetric(this._platformId, this._metricId, noCache).then(function (tasks) {
             self._tasksForAnnotations = tasks;
             self._renderedAnnotations = false;
             self.render();
         });
     }

     platformId() { return this._platformId; }
     metricId() { return this._metricId; }

     setOverviewDomain(startTime, endTime)
     {
         if (this._overviewChart)
             this._overviewChart.setDomain(startTime, endTime);
     }

     setMainDomain(startTime, endTime)
     {
         if (this._mainChart)
             this._mainChart.setDomain(startTime, endTime);
     }

     setMainSelection(selection)
     {
         if (this._mainChart)
             this._mainChart.setSelection(selection);
     }

     _overviewSelectionDidChange(domain, didEndDrag) { }

     _mainSelectionDidChange(selection, didEndDrag)
     {
         this._updateStatus();
     }

     _mainSelectionDidZoom(selection)
     {
         this._overviewChart.setSelection(selection, this);
         this._mainChart.setSelection(null);
         this.render();
     }

     _indicatorDidChange(indicatorID, isLocked)
     {
         this._updateStatus();
     }

     _didFetchData()
     {
         this._updateStatus();
     }

     _updateStatus()
     {
         var range = this._mainChartStatus.updateRevisionList();
         this._commitLogViewer.view(range.repository, range.from, range.to).then(this.render.bind(this));
         this.render();
     }

     _openAnalysisTask(annotation)
     {
         var router = this.router();
         console.assert(router);
         window.open(router.url(`analysis/task/${annotation.task.id()}`), '_blank');
     }

     router() { return null; }

     _requestOpeningCommitViewer(repository, from, to)
     {
         this._mainChartStatus.setCurrentRepository(repository);
         this._commitLogViewer.view(repository, from, to).then(this.render.bind(this));
         this.render();
     }

     _keyup(event)
     {
         switch (event.keyCode) {
         case 37: // Left
             if (!this._mainChart.moveLockedIndicatorWithNotification(false))
                 return;
             break;
         case 39: // Right
             if (!this._mainChart.moveLockedIndicatorWithNotification(true))
                 return;
             break;
         case 38: // Up
             if (!this._mainChartStatus.moveRepositoryWithNotification(false))
                 return;
         case 40: // Down
             if (!this._mainChartStatus.moveRepositoryWithNotification(true))
                 return;
         default:
             return;
         }

         this.render();

         event.preventDefault();
         event.stopPropagation();
     }

     render()
     {
         Instrumentation.startMeasuringTime('ChartPane', 'render');

         super.render();

         if (this._overviewChart)
             this._overviewChart.enqueueToRender();

         if (this._mainChart)
             this._mainChart.enqueueToRender();

         if (this._errorMessage) {
             this.renderReplace(this.content().querySelector('.chart-pane-main'), this._errorMessage);
             return;
         }

         this._renderAnnotations();

         if (this._mainChartStatus)
             this._mainChartStatus.render();

         var body = this.content().querySelector('.chart-pane-body');
         if (this._commitLogViewer && this._commitLogViewer.currentRepository()) {
             body.classList.add('has-second-sidebar');
             this._commitLogViewer.render();
         } else
             body.classList.remove('has-second-sidebar');

         Instrumentation.endMeasuringTime('ChartPane', 'render');
     }

     _renderAnnotations()
     {
         if (!this._tasksForAnnotations || this._renderedAnnotations)
             return;
         this._renderedAnnotations = true;

         var annotations = this._tasksForAnnotations.map(function (task) {
             var fillStyle = '#fc6';
             switch (task.changeType()) {
             case 'inconclusive':
                 fillStyle = '#fcc';
                 break;
             case 'progression':
                 fillStyle = '#39f';
                 break;
             case 'regression':
                 fillStyle = '#c60';
                 break;
             case 'unchanged':
                 fillStyle = '#ccc';
                 break;
             }

             return {
                 task: task,
                 startTime: task.startTime(),
                 endTime: task.endTime(),
                 label: task.label(),
                 fillStyle: fillStyle,
             };
         });
         this._mainChart.setAnnotations(annotations);
     }

     static htmlTemplate()
     {
         return `
             <section class="chart-pane" tabindex="0">
                 ${this.paneHeaderTemplate()}
                 <div class="chart-pane-body">
                     <div class="chart-pane-main"></div>
                     <div class="chart-pane-sidebar">
                         <div class="chart-pane-overview"></div>
                         <div class="chart-pane-details"></div>
                     </div>
                     <div class="chart-pane-second-sidebar">
                         <commit-log-viewer></commit-log-viewer>
                     </div>
                 </div>
             </section>
         `;
     }

     static paneHeaderTemplate() { return ''; }

     static cssTemplate()
     {
         return Toolbar.cssTemplate() + `
             .chart-pane {
                 padding: 0rem;
                 height: 18rem;
                 outline: none;
             }

             .chart-pane:focus .chart-pane-header {
                 background: rgba(204, 153, 51, 0.1);
             }

             .chart-pane-body {
                 position: relative;
                 width: 100%;
                 height: 100%;
             }

             .chart-pane-main {
                 padding-right: 20rem;
                 height: 100%;
                 margin: 0;
                 vertical-align: middle;
                 text-align: center;
             }

             .has-second-sidebar .chart-pane-main {
                 padding-right: 40rem;
             }

             .chart-pane-main > * {
                 width: 100%;
                 height: 100%;
             }

             .chart-pane-sidebar,
             .chart-pane-second-sidebar {
                 position: absolute;
                 right: 0;
                 top: 0;
                 width: 0;
                 border-left: solid 1px #ccc;
                 height: 100%;
             }

             :not(.has-second-sidebar) > .chart-pane-second-sidebar {
                 border-left: 0;
             }

             .chart-pane-sidebar {
                 width: 20rem;
             }

             .has-second-sidebar .chart-pane-sidebar {
                 right: 20rem;
             }

             .has-second-sidebar .chart-pane-second-sidebar {
                 width: 20rem;
             }

             .chart-pane-overview {
                 width: 100%;
                 height: 5rem;
                 border-bottom: solid 1px #ccc;
             }

             .chart-pane-overview > * {
                 display: block;
                 width: 100%;
                 height: 100%;
             }

             .chart-pane-details {
                 position: relative;
                 display: block;
                 height: calc(100% - 5.5rem - 2px);
                 overflow-y: scroll;
                 padding-top: 0.5rem;
             }
         `;
     }

 }

	class ChartPaneBase extends ComponentBase {

	constructor(name)
	{
	super(name);

	this._errorMessage = null;
	this._platformId = null;
	this._metricId = null;
	this._platform = null;
	this._metric = null;
	this._disableSampling = false;
	this._showOutliers = false;

	this._overviewChart = null;
	this._mainChart = null;
	this._mainChartStatus = null;
	this._commitLogViewer = null;
	this._tasksForAnnotations = null;
	this._renderedAnnotations = false;
	}

	configure(platformId, metricId)
	{
	var result = ChartStyles.resolveConfiguration(platformId, metricId);
	this._errorMessage = result.error;
	this._platformId = platformId;
	this._metricId = metricId;
	this._platform = result.platform;
	this._metric = result.metric;

	this._overviewChart = null;
	this._mainChart = null;
	this._mainChartStatus = null;

	this._commitLogViewer = this.content().querySelector('commit-log-viewer').component();

	if (result.error)
	return;

	var formatter = result.metric.makeFormatter(4);
	var self = this;

	var overviewOptions = ChartStyles.overviewChartOptions(formatter);
	overviewOptions.selection.onchange = this._overviewSelectionDidChange.bind(this);
	this._overviewChart = new InteractiveTimeSeriesChart(this._createSourceList(false), overviewOptions);
	this.renderReplace(this.content().querySelector('.chart-pane-overview'), this._overviewChart);

	var mainOptions = ChartStyles.mainChartOptions(formatter);
	mainOptions.indicator.onchange = this._indicatorDidChange.bind(this);
	mainOptions.selection.onchange = this._mainSelectionDidChange.bind(this);
	mainOptions.selection.onzoom = this._mainSelectionDidZoom.bind(this);
	mainOptions.annotations.onclick = this._openAnalysisTask.bind(this);
	mainOptions.ondata = this._didFetchData.bind(this);
	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));
	this.renderReplace(this.content().querySelector('.chart-pane-details'), this._mainChartStatus);

	this.content().querySelector('.chart-pane').addEventListener('keyup', this._keyup.bind(this));

	this.fetchAnalysisTasks(false);
	}

	isSamplingEnabled() { return !this._disableSampling; }
	setSamplingEnabled(enabled)
	{
	this._disableSampling = !enabled;
	this._updateSourceList();
	}

	isShowingOutliers() { return this._showOutliers; }
	setShowOutliers(show)
	{
	this._showOutliers = !!show;
	this._updateSourceList();
	}

	_createSourceList(isMainChart)
	{
	return ChartStyles.createSourceList(this._platform, this._metric, this._disableSampling, this._showOutliers, isMainChart);
	}

	_updateSourceList()
	{
	this._mainChart.setSourceList(this._createSourceList(true));
	this._overviewChart.setSourceList(this._createSourceList(false));
	}

	fetchAnalysisTasks(noCache)
	{
	// FIXME: we need to update the annotation bars when the change type of tasks change.
	var self = this;
	AnalysisTask.fetchByPlatformAndMetric(this._platformId, this._metricId, noCache).then(function (tasks) {
	self._tasksForAnnotations = tasks;
	self._renderedAnnotations = false;
	self.render();
	});
	}

	platformId() { return this._platformId; }
	metricId() { return this._metricId; }

	setOverviewDomain(startTime, endTime)
	{
	if (this._overviewChart)
	this._overviewChart.setDomain(startTime, endTime);
	}

	setMainDomain(startTime, endTime)
	{
	if (this._mainChart)
	this._mainChart.setDomain(startTime, endTime);
	}

	setMainSelection(selection)
	{
	if (this._mainChart)
	this._mainChart.setSelection(selection);
	}

	_overviewSelectionDidChange(domain, didEndDrag) { }

	_mainSelectionDidChange(selection, didEndDrag)
	{
	this._updateStatus();
	}

	_mainSelectionDidZoom(selection)
	{
	this._overviewChart.setSelection(selection, this);
	this._mainChart.setSelection(null);
	this.render();
	}

	_indicatorDidChange(indicatorID, isLocked)
	{
	this._updateStatus();
	}

	_didFetchData()
	{
	this._updateStatus();
	}

	_updateStatus()
	{
	var range = this._mainChartStatus.updateRevisionList();
	this._commitLogViewer.view(range.repository, range.from, range.to).then(this.render.bind(this));
	this.render();
	}

	_openAnalysisTask(annotation)
	{
	var router = this.router();
	console.assert(router);
	window.open(router.url(`analysis/task/${annotation.task.id()}`), '_blank');
	}

	router() { return null; }

	_requestOpeningCommitViewer(repository, from, to)
	{
	this._mainChartStatus.setCurrentRepository(repository);
	this._commitLogViewer.view(repository, from, to).then(this.render.bind(this));
	this.render();
	}

	_keyup(event)
	{
	switch (event.keyCode) {
	case 37: // Left
	if (!this._mainChart.moveLockedIndicatorWithNotification(false))
	return;
	break;
	case 39: // Right
	if (!this._mainChart.moveLockedIndicatorWithNotification(true))
	return;
	break;
	case 38: // Up
	if (!this._mainChartStatus.moveRepositoryWithNotification(false))
	return;
	case 40: // Down
	if (!this._mainChartStatus.moveRepositoryWithNotification(true))
	return;
	default:
	return;
	}

	this.render();

	event.preventDefault();
	event.stopPropagation();
	}

	render()
	{
	Instrumentation.startMeasuringTime('ChartPane', 'render');

	super.render();

	if (this._overviewChart)
	this._overviewChart.enqueueToRender();

	if (this._mainChart)
	this._mainChart.enqueueToRender();

	if (this._errorMessage) {
	this.renderReplace(this.content().querySelector('.chart-pane-main'), this._errorMessage);
	return;
	}

	this._renderAnnotations();

	if (this._mainChartStatus)
	this._mainChartStatus.render();

	var body = this.content().querySelector('.chart-pane-body');
	if (this._commitLogViewer && this._commitLogViewer.currentRepository()) {
	body.classList.add('has-second-sidebar');
	this._commitLogViewer.render();
	} else
	body.classList.remove('has-second-sidebar');

	Instrumentation.endMeasuringTime('ChartPane', 'render');
	}

	_renderAnnotations()
	{
	if (!this._tasksForAnnotations \|\| this._renderedAnnotations)
	return;
	this._renderedAnnotations = true;

	var annotations = this._tasksForAnnotations.map(function (task) {
	var fillStyle = '#fc6';
	switch (task.changeType()) {
	case 'inconclusive':
	fillStyle = '#fcc';
	break;
	case 'progression':
	fillStyle = '#39f';
	break;
	case 'regression':
	fillStyle = '#c60';
	break;
	case 'unchanged':
	fillStyle = '#ccc';
	break;
	}

	return {
	task: task,
	startTime: task.startTime(),
	endTime: task.endTime(),
	label: task.label(),
	fillStyle: fillStyle,
	};
	});
	this._mainChart.setAnnotations(annotations);
	}

	static htmlTemplate()
	{
	return `
	<section class="chart-pane" tabindex="0">
	${this.paneHeaderTemplate()}
	<div class="chart-pane-body">
	<div class="chart-pane-main"></div>
	<div class="chart-pane-sidebar">
	<div class="chart-pane-overview"></div>
	<div class="chart-pane-details"></div>
	</div>
	<div class="chart-pane-second-sidebar">
	<commit-log-viewer></commit-log-viewer>
	</div>
	</div>
	</section>
	`;
	}

	static paneHeaderTemplate() { return ''; }

	static cssTemplate()
	{
	return Toolbar.cssTemplate() + `
	.chart-pane {
	padding: 0rem;
	height: 18rem;
	outline: none;
	}

	.chart-pane:focus .chart-pane-header {
	background: rgba(204, 153, 51, 0.1);
	}

	.chart-pane-body {
	position: relative;
	width: 100%;
	height: 100%;
	}

	.chart-pane-main {
	padding-right: 20rem;
	height: 100%;
	margin: 0;
	vertical-align: middle;
	text-align: center;
	}

	.has-second-sidebar .chart-pane-main {
	padding-right: 40rem;
	}

	.chart-pane-main > * {
	width: 100%;
	height: 100%;
	}

	.chart-pane-sidebar,
	.chart-pane-second-sidebar {
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	border-left: solid 1px #ccc;
	height: 100%;
	}

	:not(.has-second-sidebar) > .chart-pane-second-sidebar {
	border-left: 0;
	}

	.chart-pane-sidebar {
	width: 20rem;
	}

	.has-second-sidebar .chart-pane-sidebar {
	right: 20rem;
	}

	.has-second-sidebar .chart-pane-second-sidebar {
	width: 20rem;
	}

	.chart-pane-overview {
	width: 100%;
	height: 5rem;
	border-bottom: solid 1px #ccc;
	}

	.chart-pane-overview > * {
	display: block;
	width: 100%;
	height: 100%;
	}

	.chart-pane-details {
	position: relative;
	display: block;
	height: calc(100% - 5.5rem - 2px);
	overflow-y: scroll;
	padding-top: 0.5rem;
	}
	`;
	}

	}