tracing/tracing/ui/extras/analysis/sampling_summary.html - external/trace-viewer - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright (c) 2014 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.
 -->

 <link rel="import" href="/base/iteration_helpers.html">
 <link rel="import" href="/base/statistics.html">
 <link rel="import" href="/model/event_set.html">
 <link rel="import" href="/ui/base/dom_helpers.html">
 <link rel="import" href="/ui/base/pie_chart.html">
 <link rel="import" href="/ui/base/sortable_table.html">
 <link rel="import" href="/ui/base/sunburst_chart.html">
 <link rel="import" href="/ui/base/utils.html">

 <template id="x-sample-summary-panel-template">
   <style>
     .x-sample-summary-panel {
       display: block;
       overflow: auto;
       padding: 5px;
     }
     .x-sample-summary-panel > x-toolbar {
       display: block;
       border-bottom: 1px solid black;
     }

     .x-sample-summary-panel > x-left-panel {
       position: relative;
       width: 610px;
       left: 0;
       top: 0;
       height: 610px;
       padding: 5px;
     }

     .x-sample-summary-panel > x-left-panel > result-area {
       display: block;
       width: 610px;
       position: absolute;
       left: 0;
       top: 0;
       height: 610px;
     }

     .x-sample-summary-panel > x-left-panel > x-explanation {
       display: block;
       position: absolute;
       top: 300px;
       left: 250px;
       width: 100px;
       height: 100px;
       text-align: center;
       vertical-align:middle;
       color: #666;
       font-size: 12px;
     }

     .x-sample-summary-panel > x-right-panel {
       display: block;
       min-height: 610px;
       margin-left: 610px;
       padding: 5px;
     }

     .x-sample-summary-panel > x-right-panel td {
       color: #fff;
       padding: 1px 5px;
       font-size: 1.0em;
       white-space: nowrap;
     }

     .x-sample-summary-panel > x-right-panel > x-sequence {
       display: block;
       overflow: auto;
       width: 600px;
       height: 400px;
       font-size: 14px;
       margin: 10px;
     }

     .x-sample-summary-panel > x-right-panel > x-sequence table {
       min-width: 600px;
     }

     .x-sample-summary-panel > x-right-panel > x-callees {
       display: block;
       position: relative;
       width: 600px;
       height: auto;
       overflow: auto;
       font-size: 14px;
       margin: 10px;
     }

     .x-sample-summary-panel > x-right-panel > x-callees .x-col-numeric {
       width: 30px;
     }

     .x-sample-summary-panel > x-right-panel > x-callees .x-td-numeric {
       text-align: right;
     }

     .x-sample-summary-panel > x-right-panel > x-callees table {
       min-width: 600px;
       max-width: 600px;
     }

     .x-sample-summary-panel > x-right-panel > x-callees {
       display: block;
       overflow: auto;
       height: 300px;
     }

   </style>

   <x-toolbar></x-toolbar>
   <x-left-panel>
     <result-area></result-area>
     <x-explanation></x-explanation>
   </x-left-panel>
   <x-right-panel>
     <x-sequence></x-sequence>
     <x-callees></x-callees>
   </x-right-panel>
 </template>

 <script>
 'use strict';

 tr.exportTo('tr.ui.e.analysis', function() {
   var THIS_DOC = document.currentScript.ownerDocument;

   var RequestSelectionChangeEvent = tr.model.RequestSelectionChangeEvent;
   var getColorOfKey = tr.ui.b.getColorOfKey;

   /**
     * @constructor
     */
   var CallTreeNode = function(name, category) {
     this.parent = undefined;
     this.name = name;
     this.category = category;
     this.selfTime = 0.0;
     this.children = [];

     // Defined only for leaf nodes, leaf_node_id corresponds to
     // the id of the leaf stack frame.
     this.leaf_node_id = undefined;
   };

   CallTreeNode.prototype = {
     addChild: function(node) {
       this.children.push(node);
       node.parent = this;
     }
   };

   /**
    * @constructor
    */
   var Thread = function(thread) {
     this.thread = thread;
     this.rootNode = new CallTreeNode('root', 'root');
     this.rootCategories = {};
     this.sfToNode = {};
     this.sfToNode['__root'] = self.rootNode;
   };

   Thread.prototype = {
     getCallTreeNode: function(stackFrame) {
       if (stackFrame.id in this.sfToNode)
         return this.sfToNode[stackFrame.id];

       // Create & save the node.
       var newNode = new CallTreeNode(stackFrame.title, stackFrame.category);
       this.sfToNode[stackFrame.id] = newNode;

       // Add node to parent tree node.
       if (stackFrame.parentFrame) {
         var parentNode = this.getCallTreeNode(stackFrame.parentFrame);

         parentNode.addChild(newNode);
       } else {
         // Creating a root category node for each category helps group samples
         // that may be missing call stacks.
         var rootCategory = this.rootCategories[stackFrame.category];
         if (!rootCategory) {
           rootCategory =
               new CallTreeNode(stackFrame.category, stackFrame.category);
           this.rootNode.addChild(rootCategory);
           this.rootCategories[stackFrame.category] = rootCategory;
         }
         rootCategory.addChild(newNode);
       }
       return newNode;
     },

     addSample: function(sample) {
       var leaf_node = this.getCallTreeNode(sample.leafStackFrame);
       leaf_node.leaf_node_id = sample.leafStackFrame.id;
       leaf_node.selfTime += sample.weight;
     }
   };

   function genCallTree(node, isRoot) {
     var ret = {
       category: node.category,
       name: node.name,
       leaf_node_id: node.leaf_node_id
     };

     if (isRoot || node.children.length > 0) {
       ret.children = [];
       for (var c = 0; c < node.children.length; c++)
         ret.children.push(genCallTree(node.children[c], false));
       if (node.selfTime > 0.0) {
         // say, caller (r) calls callee (e) which calls callee2 (2)
         // and following are the samples
         // r r r r r r r
         //   e e e
         //   2 2 2
         // In this case, r has a non-zero self time (4 samples to be precise)
         // The <self> node makes the representation resemble the following
         // where s denotes the selftime.
         // r r r r r r r
         // s e e e s s s
         //   2 2 2
         //
         // Among the obvious visualization benefit, this also creates the
         // invariance that a node can not simultaneously have samples and
         // children.
         ret.children.push({
           name: '<self>',
           category: ret.category,
           size: node.selfTime,
           leaf_node_id: node.leaf_node_id
         });
         delete ret.leaf_node_id;  // ret is not a leaf node anymore.
       }
     }
     else {
       ret.size = node.selfTime;
     }
     if (isRoot)
       return ret.children;
     return ret;
   }

   function getSampleTypes(selection) {
     var sampleDict = {};
     var samples = selection.getEventsOrganizedByBaseType().sample;
     for (var i = 0; i < samples.length; i++) {
       sampleDict[samples[i].title] = null;
     }
     return Object.keys(sampleDict);
   }

   // Create sunburst data from the selection.
   function createSunburstData(selection, sampleType) {
     var threads = {};
     function getOrCreateThread(thread) {
       var ret = undefined;
       if (thread.tid in threads) {
         ret = threads[thread.tid];
       } else {
         ret = new Thread(thread);
         threads[thread.tid] = ret;
       }
       return ret;
     }

     // Process samples.
     var samples = selection.getEventsOrganizedByBaseType().sample;
     for (var i = 0; i < samples.length; i++) {
       var sample = samples[i];
       if (sample.title == sampleType)
         getOrCreateThread(sample.thread).addSample(sample);
     }

     // Generate sunburst data.
     var sunburstData = {
       name: '<All Threads>',
       category: 'root',
       children: []
     };
     for (var t in threads) {
       if (!threads.hasOwnProperty(t)) continue;
       var thread = threads[t];
       var threadData = {
         name: 'Thread ' + thread.thread.tid + ': ' + thread.thread.name,
         category: 'Thread',
         children: genCallTree(thread.rootNode, true)
       };
       sunburstData.children.push(threadData);
     }
     return sunburstData;
   }

   /**
    * @constructor
    */
   var SamplingSummaryPanel =
       tr.ui.b.define('x-sample-summary-panel');
   SamplingSummaryPanel.textLabel = 'Sampling Summary';
   SamplingSummaryPanel.supportsModel = function(m) {
     if (m == undefined) {
       return {
         supported: false,
         reason: 'Unknown tracing model'
       };
     }

     if (m.samples.length == 0) {
       return {
         supported: false,
         reason: 'No sampling data in trace'
       };
     }

     return {
       supported: true
     };
   };

   // Return a dict with keys as stack-frame ids
   // and values as selection objects which contain all the
   // samples whose leaf stack-frame id matches the key.
   function divideSamplesBasedOnLeafStackFrame(selection) {
     var stackFrameIdToSamples = {};
     for (var i = 0; i < selection.length; ++i) {
       var sample = selection[i];
       var id = sample.leafStackFrame.id;
       if (!stackFrameIdToSamples[id])
         stackFrameIdToSamples[id] = new tr.model.EventSet();
       stackFrameIdToSamples[id].push(sample);
     }
     return stackFrameIdToSamples;
   }

   SamplingSummaryPanel.prototype = {
     __proto__: HTMLUnknownElement.prototype,

     decorate: function() {
       this.classList.add('x-sample-summary-panel');
       this.appendChild(tr.ui.b.instantiateTemplate(
           '#x-sample-summary-panel-template', THIS_DOC));

       this.sampleType_ = undefined;
       this.sampleTypeSelector_ = undefined;
       this.chart_ = undefined;
       this.selection_ = undefined;
     },

     get selection() {
       return this.selection_;
     },

     set selection(selection) {
       this.selection_ = selection;
       this.stackFrameIdToSamples_ = divideSamplesBasedOnLeafStackFrame(
           selection);
       this.updateContents_();
     },

     get sampleType() {
       return this.sampleType_;
     },

     set sampleType(type) {
       this.sampleType_ = type;
       if (this.sampleTypeSelector_)
         this.sampleTypeSelector_.selectedValue = type;
       this.updateResultArea_();
     },

     updateCallees_: function(d) {
       // Update callee table.
       var that = this;
       var table = document.createElement('table');

       // Add column styles.
       var col0 = document.createElement('col');
       var col1 = document.createElement('col');
       col0.className += 'x-col-numeric';
       col1.className += 'x-col-numeric';
       table.appendChild(col0);
       table.appendChild(col1);

       // Add headers.
       var thead = table.createTHead();
       var headerRow = thead.insertRow(0);
       headerRow.style.backgroundColor = '#888';
       headerRow.insertCell(0).appendChild(document.createTextNode('Samples'));
       headerRow.insertCell(1).appendChild(document.createTextNode('Percent'));
       headerRow.insertCell(2).appendChild(document.createTextNode('Symbol'));

       // Add body.
       var tbody = table.createTBody();
       if (d.children) {
         for (var i = 0; i < d.children.length; i++) {
           var c = d.children[i];
           var row = tbody.insertRow(i);
           var bgColor = getColorOfKey(c.category);
           if (bgColor == undefined)
             bgColor = '#444444';
           row.style.backgroundColor = bgColor;
           var cell0 = row.insertCell(0);
           var cell1 = row.insertCell(1);
           var cell2 = row.insertCell(2);
           cell0.className += 'x-td-numeric';
           cell1.className += 'x-td-numeric';
           cell0.appendChild(document.createTextNode(c.value.toString()));
           cell1.appendChild(document.createTextNode(
               (100 * c.value / d.value).toFixed(2) + '%'));
           cell2.appendChild(document.createTextNode(c.name));
         }
       }

       // Make it sortable.
       tr.ui.b.SortableTable.decorate(table);

       var calleeArea = that.querySelector('x-callees');
       calleeArea.textContent = '';
       calleeArea.appendChild(table);
     },

     updateHighlight_: function(d) {
       var that = this;

       // Update explanation.
       var percent = 100.0;
       if (that.chart_.selectedNode != null)
         percent = 100.0 * d.value / that.chart_.selectedNode.value;
       that.querySelector('x-explanation').innerHTML =
           d.value + '<br>' + percent.toFixed(2) + '%';

       // Update call stack table.
       var table = document.createElement('table');
       var thead = table.createTHead();
       var tbody = table.createTBody();
       var headerRow = thead.insertRow(0);
       headerRow.style.backgroundColor = '#888';
       headerRow.insertCell(0).appendChild(
           document.createTextNode('Call Stack'));

       var callStack = [];
       var frame = d;
       while (frame && frame.id) {
         callStack.push(frame);
         frame = frame.parent;
       }

       for (var i = 0; i < callStack.length; i++) {
         var row = tbody.insertRow(i);
         var bgColor = getColorOfKey(callStack[i].category);
         if (bgColor == undefined)
           bgColor = '#444444';
         row.style.backgroundColor = bgColor;
         if (i == 0)
           row.style.fontWeight = 'bold';
         row.insertCell(0).appendChild(
             document.createTextNode(callStack[i].name));
       }

       var sequenceArea = that.querySelector('x-sequence');
       sequenceArea.textContent = '';
       sequenceArea.appendChild(table);
     },

     getSamplesFromNode_: function(node) {
       // A node has samples associated with it, if it's a leaf node.
       var selection = new tr.model.EventSet();
       if (node.leaf_node_id !== undefined) {
         selection.addEventSet(this.stackFrameIdToSamples_[node.leaf_node_id]);
       }
       else if (node.children === undefined ||
                node.children.length === 0) {
         throw new Error('A node should either have samples, or children');
       }
       else {
         for (var i = 0; i < node.children.length; ++i)
           selection.addEventSet(this.getSamplesFromNode_(node.children[i]));
       }
       return selection;
     },

     updateResultArea_: function() {
       if (this.selection_ === undefined)
         return;

       var resultArea = this.querySelector('result-area');
       this.chart_ = undefined;
       resultArea.textContent = '';

       var sunburstData =
           createSunburstData(this.selection_, this.sampleType_);
       this.chart_ = new tr.ui.b.SunburstChart();
       this.chart_.width = 600;
       this.chart_.height = 600;
       this.chart_.chartTitle = 'Sampling Summary';

       this.chart_.addEventListener('node-selected', (function(e) {
         this.updateCallees_(e.node);
       }).bind(this));

       this.chart_.addEventListener('node-clicked', (function(e) {
         var event = new RequestSelectionChangeEvent();
         var depth = e.node.depth;
         if (e.node.name === '<self>')
           depth--;
         event.selection = this.getSamplesFromNode_(e.node);
         event.selection.sunburst_zoom_level = depth;
         this.dispatchEvent(event);
       }).bind(this));

       this.chart_.addEventListener('node-highlighted', (function(e) {
         this.updateHighlight_(e.node);
       }).bind(this));

       this.chart_.data = {
         nodes: sunburstData
       };

       resultArea.appendChild(this.chart_);
       this.chart_.setSize(this.chart_.getMinSize());

       if (this.selection_.sunburst_zoom_level !== undefined) {
         this.chart_.zoomToDepth(this.selection_.sunburst_zoom_level);
       }
     },

     updateContents_: function() {
       if (this.selection_ === undefined || this.selection_.length == 0)
         return;

       // Get available sample types in range.
       var sampleTypes = getSampleTypes(this.selection_);
       if (sampleTypes.indexOf(this.sampleType_) == -1)
         this.sampleType_ = sampleTypes[0];

       // Create sample type dropdown.
       var sampleTypeOptions = [];
       for (var i = 0; i < sampleTypes.length; i++)
         sampleTypeOptions.push({label: sampleTypes[i], value: sampleTypes[i]});

       var toolbarEl = this.querySelector('x-toolbar');
       this.sampleTypeSelector_ = tr.ui.b.createSelector(
           this,
           'sampleType',
           'samplingSummaryPanel.sampleType',
           this.sampleType_,
           sampleTypeOptions);
       toolbarEl.textContent = 'Sample Type: ';
       toolbarEl.appendChild(this.sampleTypeSelector_);
     }
   };

   return {
     SamplingSummaryPanel: SamplingSummaryPanel,
     createSunburstData: createSunburstData
   };
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2014 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.
	-->

	<link rel="import" href="/base/iteration_helpers.html">
	<link rel="import" href="/base/statistics.html">
	<link rel="import" href="/model/event_set.html">
	<link rel="import" href="/ui/base/dom_helpers.html">
	<link rel="import" href="/ui/base/pie_chart.html">
	<link rel="import" href="/ui/base/sortable_table.html">
	<link rel="import" href="/ui/base/sunburst_chart.html">
	<link rel="import" href="/ui/base/utils.html">

	<template id="x-sample-summary-panel-template">
	<style>
	.x-sample-summary-panel {
	display: block;
	overflow: auto;
	padding: 5px;
	}
	.x-sample-summary-panel > x-toolbar {
	display: block;
	border-bottom: 1px solid black;
	}

	.x-sample-summary-panel > x-left-panel {
	position: relative;
	width: 610px;
	left: 0;
	top: 0;
	height: 610px;
	padding: 5px;
	}

	.x-sample-summary-panel > x-left-panel > result-area {
	display: block;
	width: 610px;
	position: absolute;
	left: 0;
	top: 0;
	height: 610px;
	}

	.x-sample-summary-panel > x-left-panel > x-explanation {
	display: block;
	position: absolute;
	top: 300px;
	left: 250px;
	width: 100px;
	height: 100px;
	text-align: center;
	vertical-align:middle;
	color: #666;
	font-size: 12px;
	}

	.x-sample-summary-panel > x-right-panel {
	display: block;
	min-height: 610px;
	margin-left: 610px;
	padding: 5px;
	}

	.x-sample-summary-panel > x-right-panel td {
	color: #fff;
	padding: 1px 5px;
	font-size: 1.0em;
	white-space: nowrap;
	}

	.x-sample-summary-panel > x-right-panel > x-sequence {
	display: block;
	overflow: auto;
	width: 600px;
	height: 400px;
	font-size: 14px;
	margin: 10px;
	}

	.x-sample-summary-panel > x-right-panel > x-sequence table {
	min-width: 600px;
	}

	.x-sample-summary-panel > x-right-panel > x-callees {
	display: block;
	position: relative;
	width: 600px;
	height: auto;
	overflow: auto;
	font-size: 14px;
	margin: 10px;
	}

	.x-sample-summary-panel > x-right-panel > x-callees .x-col-numeric {
	width: 30px;
	}

	.x-sample-summary-panel > x-right-panel > x-callees .x-td-numeric {
	text-align: right;
	}

	.x-sample-summary-panel > x-right-panel > x-callees table {
	min-width: 600px;
	max-width: 600px;
	}

	.x-sample-summary-panel > x-right-panel > x-callees {
	display: block;
	overflow: auto;
	height: 300px;
	}

	</style>

	<x-toolbar></x-toolbar>
	<x-left-panel>
	<result-area></result-area>
	<x-explanation></x-explanation>
	</x-left-panel>
	<x-right-panel>
	<x-sequence></x-sequence>
	<x-callees></x-callees>
	</x-right-panel>
	</template>

	<script>
	'use strict';

	tr.exportTo('tr.ui.e.analysis', function() {
	var THIS_DOC = document.currentScript.ownerDocument;

	var RequestSelectionChangeEvent = tr.model.RequestSelectionChangeEvent;
	var getColorOfKey = tr.ui.b.getColorOfKey;

	/**
	* @constructor
	*/
	var CallTreeNode = function(name, category) {
	this.parent = undefined;
	this.name = name;
	this.category = category;
	this.selfTime = 0.0;
	this.children = [];

	// Defined only for leaf nodes, leaf_node_id corresponds to
	// the id of the leaf stack frame.
	this.leaf_node_id = undefined;
	};

	CallTreeNode.prototype = {
	addChild: function(node) {
	this.children.push(node);
	node.parent = this;
	}
	};

	/**
	* @constructor
	*/
	var Thread = function(thread) {
	this.thread = thread;
	this.rootNode = new CallTreeNode('root', 'root');
	this.rootCategories = {};
	this.sfToNode = {};
	this.sfToNode['__root'] = self.rootNode;
	};

	Thread.prototype = {
	getCallTreeNode: function(stackFrame) {
	if (stackFrame.id in this.sfToNode)
	return this.sfToNode[stackFrame.id];

	// Create & save the node.
	var newNode = new CallTreeNode(stackFrame.title, stackFrame.category);
	this.sfToNode[stackFrame.id] = newNode;

	// Add node to parent tree node.
	if (stackFrame.parentFrame) {
	var parentNode = this.getCallTreeNode(stackFrame.parentFrame);

	parentNode.addChild(newNode);
	} else {
	// Creating a root category node for each category helps group samples
	// that may be missing call stacks.
	var rootCategory = this.rootCategories[stackFrame.category];
	if (!rootCategory) {
	rootCategory =
	new CallTreeNode(stackFrame.category, stackFrame.category);
	this.rootNode.addChild(rootCategory);
	this.rootCategories[stackFrame.category] = rootCategory;
	}
	rootCategory.addChild(newNode);
	}
	return newNode;
	},

	addSample: function(sample) {
	var leaf_node = this.getCallTreeNode(sample.leafStackFrame);
	leaf_node.leaf_node_id = sample.leafStackFrame.id;
	leaf_node.selfTime += sample.weight;
	}
	};

	function genCallTree(node, isRoot) {
	var ret = {
	category: node.category,
	name: node.name,
	leaf_node_id: node.leaf_node_id
	};

	if (isRoot \|\| node.children.length > 0) {
	ret.children = [];
	for (var c = 0; c < node.children.length; c++)
	ret.children.push(genCallTree(node.children[c], false));
	if (node.selfTime > 0.0) {
	// say, caller (r) calls callee (e) which calls callee2 (2)
	// and following are the samples
	// r r r r r r r
	// e e e
	// 2 2 2
	// In this case, r has a non-zero self time (4 samples to be precise)
	// The <self> node makes the representation resemble the following
	// where s denotes the selftime.
	// r r r r r r r
	// s e e e s s s
	// 2 2 2
	//
	// Among the obvious visualization benefit, this also creates the
	// invariance that a node can not simultaneously have samples and
	// children.
	ret.children.push({
	name: '<self>',
	category: ret.category,
	size: node.selfTime,
	leaf_node_id: node.leaf_node_id
	});
	delete ret.leaf_node_id; // ret is not a leaf node anymore.
	}
	}
	else {
	ret.size = node.selfTime;
	}
	if (isRoot)
	return ret.children;
	return ret;
	}

	function getSampleTypes(selection) {
	var sampleDict = {};
	var samples = selection.getEventsOrganizedByBaseType().sample;
	for (var i = 0; i < samples.length; i++) {
	sampleDict[samples[i].title] = null;
	}
	return Object.keys(sampleDict);
	}

	// Create sunburst data from the selection.
	function createSunburstData(selection, sampleType) {
	var threads = {};
	function getOrCreateThread(thread) {
	var ret = undefined;
	if (thread.tid in threads) {
	ret = threads[thread.tid];
	} else {
	ret = new Thread(thread);
	threads[thread.tid] = ret;
	}
	return ret;
	}

	// Process samples.
	var samples = selection.getEventsOrganizedByBaseType().sample;
	for (var i = 0; i < samples.length; i++) {
	var sample = samples[i];
	if (sample.title == sampleType)
	getOrCreateThread(sample.thread).addSample(sample);
	}

	// Generate sunburst data.
	var sunburstData = {
	name: '<All Threads>',
	category: 'root',
	children: []
	};
	for (var t in threads) {
	if (!threads.hasOwnProperty(t)) continue;
	var thread = threads[t];
	var threadData = {
	name: 'Thread ' + thread.thread.tid + ': ' + thread.thread.name,
	category: 'Thread',
	children: genCallTree(thread.rootNode, true)
	};
	sunburstData.children.push(threadData);
	}
	return sunburstData;
	}

	/**
	* @constructor
	*/
	var SamplingSummaryPanel =
	tr.ui.b.define('x-sample-summary-panel');
	SamplingSummaryPanel.textLabel = 'Sampling Summary';
	SamplingSummaryPanel.supportsModel = function(m) {
	if (m == undefined) {
	return {
	supported: false,
	reason: 'Unknown tracing model'
	};
	}

	if (m.samples.length == 0) {
	return {
	supported: false,
	reason: 'No sampling data in trace'
	};
	}

	return {
	supported: true
	};
	};

	// Return a dict with keys as stack-frame ids
	// and values as selection objects which contain all the
	// samples whose leaf stack-frame id matches the key.
	function divideSamplesBasedOnLeafStackFrame(selection) {
	var stackFrameIdToSamples = {};
	for (var i = 0; i < selection.length; ++i) {
	var sample = selection[i];
	var id = sample.leafStackFrame.id;
	if (!stackFrameIdToSamples[id])
	stackFrameIdToSamples[id] = new tr.model.EventSet();
	stackFrameIdToSamples[id].push(sample);
	}
	return stackFrameIdToSamples;
	}

	SamplingSummaryPanel.prototype = {
	__proto__: HTMLUnknownElement.prototype,

	decorate: function() {
	this.classList.add('x-sample-summary-panel');
	this.appendChild(tr.ui.b.instantiateTemplate(
	'#x-sample-summary-panel-template', THIS_DOC));

	this.sampleType_ = undefined;
	this.sampleTypeSelector_ = undefined;
	this.chart_ = undefined;
	this.selection_ = undefined;
	},

	get selection() {
	return this.selection_;
	},

	set selection(selection) {
	this.selection_ = selection;
	this.stackFrameIdToSamples_ = divideSamplesBasedOnLeafStackFrame(
	selection);
	this.updateContents_();
	},

	get sampleType() {
	return this.sampleType_;
	},

	set sampleType(type) {
	this.sampleType_ = type;
	if (this.sampleTypeSelector_)
	this.sampleTypeSelector_.selectedValue = type;
	this.updateResultArea_();
	},

	updateCallees_: function(d) {
	// Update callee table.
	var that = this;
	var table = document.createElement('table');

	// Add column styles.
	var col0 = document.createElement('col');
	var col1 = document.createElement('col');
	col0.className += 'x-col-numeric';
	col1.className += 'x-col-numeric';
	table.appendChild(col0);
	table.appendChild(col1);

	// Add headers.
	var thead = table.createTHead();
	var headerRow = thead.insertRow(0);
	headerRow.style.backgroundColor = '#888';
	headerRow.insertCell(0).appendChild(document.createTextNode('Samples'));
	headerRow.insertCell(1).appendChild(document.createTextNode('Percent'));
	headerRow.insertCell(2).appendChild(document.createTextNode('Symbol'));

	// Add body.
	var tbody = table.createTBody();
	if (d.children) {
	for (var i = 0; i < d.children.length; i++) {
	var c = d.children[i];
	var row = tbody.insertRow(i);
	var bgColor = getColorOfKey(c.category);
	if (bgColor == undefined)
	bgColor = '#444444';
	row.style.backgroundColor = bgColor;
	var cell0 = row.insertCell(0);
	var cell1 = row.insertCell(1);
	var cell2 = row.insertCell(2);
	cell0.className += 'x-td-numeric';
	cell1.className += 'x-td-numeric';
	cell0.appendChild(document.createTextNode(c.value.toString()));
	cell1.appendChild(document.createTextNode(
	(100 * c.value / d.value).toFixed(2) + '%'));
	cell2.appendChild(document.createTextNode(c.name));
	}
	}

	// Make it sortable.
	tr.ui.b.SortableTable.decorate(table);

	var calleeArea = that.querySelector('x-callees');
	calleeArea.textContent = '';
	calleeArea.appendChild(table);
	},

	updateHighlight_: function(d) {
	var that = this;

	// Update explanation.
	var percent = 100.0;
	if (that.chart_.selectedNode != null)
	percent = 100.0 * d.value / that.chart_.selectedNode.value;
	that.querySelector('x-explanation').innerHTML =
	d.value + '<br>' + percent.toFixed(2) + '%';

	// Update call stack table.
	var table = document.createElement('table');
	var thead = table.createTHead();
	var tbody = table.createTBody();
	var headerRow = thead.insertRow(0);
	headerRow.style.backgroundColor = '#888';
	headerRow.insertCell(0).appendChild(
	document.createTextNode('Call Stack'));

	var callStack = [];
	var frame = d;
	while (frame && frame.id) {
	callStack.push(frame);
	frame = frame.parent;
	}

	for (var i = 0; i < callStack.length; i++) {
	var row = tbody.insertRow(i);
	var bgColor = getColorOfKey(callStack[i].category);
	if (bgColor == undefined)
	bgColor = '#444444';
	row.style.backgroundColor = bgColor;
	if (i == 0)
	row.style.fontWeight = 'bold';
	row.insertCell(0).appendChild(
	document.createTextNode(callStack[i].name));
	}

	var sequenceArea = that.querySelector('x-sequence');
	sequenceArea.textContent = '';
	sequenceArea.appendChild(table);
	},

	getSamplesFromNode_: function(node) {
	// A node has samples associated with it, if it's a leaf node.
	var selection = new tr.model.EventSet();
	if (node.leaf_node_id !== undefined) {
	selection.addEventSet(this.stackFrameIdToSamples_[node.leaf_node_id]);
	}
	else if (node.children === undefined \|\|
	node.children.length === 0) {
	throw new Error('A node should either have samples, or children');
	}
	else {
	for (var i = 0; i < node.children.length; ++i)
	selection.addEventSet(this.getSamplesFromNode_(node.children[i]));
	}
	return selection;
	},

	updateResultArea_: function() {
	if (this.selection_ === undefined)
	return;

	var resultArea = this.querySelector('result-area');
	this.chart_ = undefined;
	resultArea.textContent = '';

	var sunburstData =
	createSunburstData(this.selection_, this.sampleType_);
	this.chart_ = new tr.ui.b.SunburstChart();
	this.chart_.width = 600;
	this.chart_.height = 600;
	this.chart_.chartTitle = 'Sampling Summary';

	this.chart_.addEventListener('node-selected', (function(e) {
	this.updateCallees_(e.node);
	}).bind(this));

	this.chart_.addEventListener('node-clicked', (function(e) {
	var event = new RequestSelectionChangeEvent();
	var depth = e.node.depth;
	if (e.node.name === '<self>')
	depth--;
	event.selection = this.getSamplesFromNode_(e.node);
	event.selection.sunburst_zoom_level = depth;
	this.dispatchEvent(event);
	}).bind(this));

	this.chart_.addEventListener('node-highlighted', (function(e) {
	this.updateHighlight_(e.node);
	}).bind(this));

	this.chart_.data = {
	nodes: sunburstData
	};

	resultArea.appendChild(this.chart_);
	this.chart_.setSize(this.chart_.getMinSize());

	if (this.selection_.sunburst_zoom_level !== undefined) {
	this.chart_.zoomToDepth(this.selection_.sunburst_zoom_level);
	}
	},

	updateContents_: function() {
	if (this.selection_ === undefined \|\| this.selection_.length == 0)
	return;

	// Get available sample types in range.
	var sampleTypes = getSampleTypes(this.selection_);
	if (sampleTypes.indexOf(this.sampleType_) == -1)
	this.sampleType_ = sampleTypes[0];

	// Create sample type dropdown.
	var sampleTypeOptions = [];
	for (var i = 0; i < sampleTypes.length; i++)
	sampleTypeOptions.push({label: sampleTypes[i], value: sampleTypes[i]});

	var toolbarEl = this.querySelector('x-toolbar');
	this.sampleTypeSelector_ = tr.ui.b.createSelector(
	this,
	'sampleType',
	'samplingSummaryPanel.sampleType',
	this.sampleType_,
	sampleTypeOptions);
	toolbarEl.textContent = 'Sample Type: ';
	toolbarEl.appendChild(this.sampleTypeSelector_);
	}
	};

	return {
	SamplingSummaryPanel: SamplingSummaryPanel,
	createSunburstData: createSunburstData
	};
	});
	</script>