catapult/dashboard/dashboard/elements/chart-title.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright 2016 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->

 <polymer-element name="chart-title" attributes="seriesGroupList">
   <template>
     <style>
       .title {
         color: #424242;
         text-decoration: none;
       }

       .title:hover {
         color: #4184f3;
         text-decoration: underline;
       }

       .title[disabled] {
         color: #8d8d8d;
         text-decoration: none;
         cursor: default;
       }
     </style>

     <h3>
       <template repeat="{{part, partIndex in titleParts}}">
         <a class="title disabled" href="javascript:void(0);"
            on-click="{{onClicked}}" disabled?="{{partIndex == currentIndex}}"
            class="title">
           {{part}}
         </a>
         <span hidden?="{{partIndex == titleParts.length - 1}}">/</span>
       </template>
     </h3>
     <div>
       <template repeat="{{info in suiteDescriptions}}">
         <div><b>{{info.suite}}</b>: {{info.description}}</div>
       </template>
     </div>

   </template>
   <script>
     'use strict';
     Polymer('chart-title', {

       /**
        * Sets the title of the chart based on the current state of the chart.
        */
       update: function() {
         var testPaths = this.getTestPaths();
         var title = this.makeTitleFromTestPaths(testPaths);
         var selectedSeries = this.getFirstSelectedSeries();

         var parts = title.split('/');
         // First part of the title groups together of master, bot and test
         // suite.
         var firstPart = parts.slice(0, 3).join('/');
         this.titleParts = [firstPart].concat(parts.slice(3));

         // Determine the current selected index which will be disabled for
         // selection.
         if (selectedSeries) {
           this.titleParts.push(selectedSeries);
           this.currentIndex = this.titleParts.length - 2;
         } else {
           this.currentIndex = this.titleParts.length - 1;
         }
         this.suiteDescriptions = this.getSuitesAndDescriptions();
       },

       onClicked: function(event) {
         var model = event.target.templateInstance.model;
         if (model.partIndex == this.currentIndex) {
           return;
         }
         this.fire('titleclicked', {
             titleParts: this.titleParts,
             partIndex: model.partIndex
         });

         this.currentIndex = model.partIndex;
       },

       /**
        * Makes a string to use as a chart title, based on a set of test paths.
        * @param {Array.<string>} testPaths An list of test paths.
        * @return {string} The longest test path that is the prefix
        */
       makeTitleFromTestPaths: function(testPaths) {
         if (testPaths.length == 1) {
           return testPaths[0];
         }

         var prefix = '';
         if (testPaths.length > 1) {
           prefix = this.longestCommonTestPathPrefix(testPaths);
         }
         if (testPaths.indexOf(prefix) >= 0) {
           return prefix;
         }
         return prefix ? prefix + '/...' : '...';
       },

       getTestPaths: function() {
         var testPaths = [];
         for (var i = 0; i < this.seriesGroupList.length; i++) {
           testPaths.push(this.seriesGroupList[i].path);
         }
         return testPaths;
       },

       getFirstSelectedSeries: function() {
         for (var i = 0; i < this.seriesGroupList.length; i++) {
           var testPath = this.seriesGroupList[i].path;
           var parts = testPath.split('/');
           var lastPart = parts[parts.length - 1];
           var tests = this.seriesGroupList[i].tests;
           for (var j = 0; j < tests.length; j++) {
             var test = tests[j];
             if (test.name == lastPart) {
               return null;
             } else if (test.selected) {
               return test.name;
             }
           }
         }
         return null;
       },

       getSuitesAndDescriptions: function() {
         var suiteDescriptions = {};
         for (var i = 0; i < this.seriesGroupList.length; i++) {
           var suite = this.seriesGroupList[i].path.split('/')[2];
           if (this.testSuites &&
               this.testSuites[suite] &&
               this.testSuites[suite]['des']) {
             suiteDescriptions[suite] = this.testSuites[suite]['des'];
           }
         }
         var suiteNames = Object.keys(suiteDescriptions);
         var returnVal = [];
         for (var i = 0; i < suiteNames.length; i++) {
           returnVal.push({
               'suite': suiteNames[i],
               'description': suiteDescriptions[suiteNames[i]]
           });
         }
         return returnVal;
       },

       /**
        * @param {Array.<string>} testPaths An list of test paths.
        * @return {string} The longest test path that is the prefix
        */
       longestCommonTestPathPrefix: function(testPaths) {
         var partArrays = testPaths.map(function(path) {
           return path.split('/');
         });
         return this.longestCommonSubArray(partArrays).join('/');
       },

       /**
        * @param {Array.<Array>} arrays An Array of Arrays.
        * @return {Array} The longest Array such that all Arrays in the input
        *     contain this Array as a prefix.
        */
       longestCommonSubArray: function(arrays) {
         if (arrays.length == 0) {
           return [];
         }
         var shortestLength = Math.min.apply(window, arrays.map(function(a) {
           return a.length;
         }));
         for (var prefixLength = 0; prefixLength <= shortestLength;
              prefixLength++) {
           var value = arrays[0][prefixLength];
           for (var i = 1; i < arrays.length; i++) {
             if (arrays[i][prefixLength] != value) {
               return arrays[0].slice(0, prefixLength);
             }
           }
         }
         return arrays[0].slice(0, shortestLength);
       }
     });
   </script>
 </polymer-element>
	<!DOCTYPE html>
	<!--
	Copyright 2016 The Chromium Authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->

	<polymer-element name="chart-title" attributes="seriesGroupList">
	<template>
	<style>
	.title {
	color: #424242;
	text-decoration: none;
	}

	.title:hover {
	color: #4184f3;
	text-decoration: underline;
	}

	.title[disabled] {
	color: #8d8d8d;
	text-decoration: none;
	cursor: default;
	}
	</style>

	<h3>
	<template repeat="{{part, partIndex in titleParts}}">
	<a class="title disabled" href="javascript:void(0);"
	on-click="{{onClicked}}" disabled?="{{partIndex == currentIndex}}"
	class="title">
	{{part}}
	</a>
	<span hidden?="{{partIndex == titleParts.length - 1}}">/</span>
	</template>
	</h3>
	<div>
	<template repeat="{{info in suiteDescriptions}}">
	<div><b>{{info.suite}}</b>: {{info.description}}</div>
	</template>
	</div>

	</template>
	<script>
	'use strict';
	Polymer('chart-title', {

	/**
	* Sets the title of the chart based on the current state of the chart.
	*/
	update: function() {
	var testPaths = this.getTestPaths();
	var title = this.makeTitleFromTestPaths(testPaths);
	var selectedSeries = this.getFirstSelectedSeries();

	var parts = title.split('/');
	// First part of the title groups together of master, bot and test
	// suite.
	var firstPart = parts.slice(0, 3).join('/');
	this.titleParts = [firstPart].concat(parts.slice(3));

	// Determine the current selected index which will be disabled for
	// selection.
	if (selectedSeries) {
	this.titleParts.push(selectedSeries);
	this.currentIndex = this.titleParts.length - 2;
	} else {
	this.currentIndex = this.titleParts.length - 1;
	}
	this.suiteDescriptions = this.getSuitesAndDescriptions();
	},

	onClicked: function(event) {
	var model = event.target.templateInstance.model;
	if (model.partIndex == this.currentIndex) {
	return;
	}
	this.fire('titleclicked', {
	titleParts: this.titleParts,
	partIndex: model.partIndex
	});

	this.currentIndex = model.partIndex;
	},

	/**
	* Makes a string to use as a chart title, based on a set of test paths.
	* @param {Array.<string>} testPaths An list of test paths.
	* @return {string} The longest test path that is the prefix
	*/
	makeTitleFromTestPaths: function(testPaths) {
	if (testPaths.length == 1) {
	return testPaths[0];
	}

	var prefix = '';
	if (testPaths.length > 1) {
	prefix = this.longestCommonTestPathPrefix(testPaths);
	}
	if (testPaths.indexOf(prefix) >= 0) {
	return prefix;
	}
	return prefix ? prefix + '/...' : '...';
	},

	getTestPaths: function() {
	var testPaths = [];
	for (var i = 0; i < this.seriesGroupList.length; i++) {
	testPaths.push(this.seriesGroupList[i].path);
	}
	return testPaths;
	},

	getFirstSelectedSeries: function() {
	for (var i = 0; i < this.seriesGroupList.length; i++) {
	var testPath = this.seriesGroupList[i].path;
	var parts = testPath.split('/');
	var lastPart = parts[parts.length - 1];
	var tests = this.seriesGroupList[i].tests;
	for (var j = 0; j < tests.length; j++) {
	var test = tests[j];
	if (test.name == lastPart) {
	return null;
	} else if (test.selected) {
	return test.name;
	}
	}
	}
	return null;
	},

	getSuitesAndDescriptions: function() {
	var suiteDescriptions = {};
	for (var i = 0; i < this.seriesGroupList.length; i++) {
	var suite = this.seriesGroupList[i].path.split('/')[2];
	if (this.testSuites &&
	this.testSuites[suite] &&
	this.testSuites[suite]['des']) {
	suiteDescriptions[suite] = this.testSuites[suite]['des'];
	}
	}
	var suiteNames = Object.keys(suiteDescriptions);
	var returnVal = [];
	for (var i = 0; i < suiteNames.length; i++) {
	returnVal.push({
	'suite': suiteNames[i],
	'description': suiteDescriptions[suiteNames[i]]
	});
	}
	return returnVal;
	},

	/**
	* @param {Array.<string>} testPaths An list of test paths.
	* @return {string} The longest test path that is the prefix
	*/
	longestCommonTestPathPrefix: function(testPaths) {
	var partArrays = testPaths.map(function(path) {
	return path.split('/');
	});
	return this.longestCommonSubArray(partArrays).join('/');
	},

	/**
	* @param {Array.<Array>} arrays An Array of Arrays.
	* @return {Array} The longest Array such that all Arrays in the input
	* contain this Array as a prefix.
	*/
	longestCommonSubArray: function(arrays) {
	if (arrays.length == 0) {
	return [];
	}
	var shortestLength = Math.min.apply(window, arrays.map(function(a) {
	return a.length;
	}));
	for (var prefixLength = 0; prefixLength <= shortestLength;
	prefixLength++) {
	var value = arrays[0][prefixLength];
	for (var i = 1; i < arrays.length; i++) {
	if (arrays[i][prefixLength] != value) {
	return arrays[0].slice(0, prefixLength);
	}
	}
	}
	return arrays[0].slice(0, shortestLength);
	}
	});
	</script>
	</polymer-element>