Skip to content

V
V8
Commit 88f77406 authored by Camillo Bruni's avatar Camillo Bruni Committed by Commit Bot
Browse files
Options

[tools] Add system-analyzer list view 

Bug: v8:10644
Change-Id: I83801396fe683173349d14a7590828ec86587eac
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2575122Reviewed-by: 's avatarSathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#71655}
parent ab4d9717
Hide whitespace changes
Inline Side-by-side
Showing with 642 additions and 611 deletions
tools/profile.mjs
View file @ 88f77406
......@@ -37,9 +37,18 @@ export class SourcePosition {
this.column = column;
this.entries = [];
}
addEntry(entry) {
this.entries.push(entry);
}
toString() {
return `${this.script.name}:${this.line}:${this.column}`;
}
toStringLong() {
return this.toString();
}
}
export class Script {
......@@ -90,7 +99,13 @@ export class Script {
columnToSourcePosition.set(column, sourcePosition);
}
toString() {
return this.name;
}
toStringLong() {
return this.source;
}
}
......
tools/system-analyzer/helper.mjs
View file @ 88f77406
......@@ -25,3 +25,50 @@ export function formatSeconds(millis) {
export function delay(time) {
return new Promise(resolver => setTimeout(resolver, time));
}
export class Group {
constructor(key, id, parentTotal, entries) {
this.key = key;
this.id = id;
this.count = 1;
this.entries = entries;
this.parentTotal = parentTotal;
}
get percent() {
return this.count / this.parentTotal * 100;
}
add() {
this.count++;
}
addEntry(entry) {
this.count++;
this.entries.push(entry);
}
}
export function groupBy(array, keyFunction, collect = false) {
if (array.length === 0) return [];
if (keyFunction === undefined) keyFunction = each => each;
const keyToGroup = new Map();
const groups = [];
let id = 0;
// This is performance critical, resorting to for-loop
for (let each of array) {
const key = keyFunction(each);
let group = keyToGroup.get(key);
if (group !== undefined) {
collect ? group.addEntry(each) : group.add();
continue;
}
let entries = undefined;
if (collect) entries = [each];
group = new Group(key, id++, array.length, entries);
groups.push(group);
keyToGroup.set(key, group);
}
// Sort by count
return groups.sort((a, b) => b.count - a.count);
}
\ No newline at end of file
tools/system-analyzer/ic-model.mjs deleted 100644 → 0
View file @ ab4d9717
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {IcLogEntry} from './log/ic.mjs';
// For compatibility with console scripts:
print = console.log;
export class Group {
constructor(property, key, entry) {
this.property = property;
this.key = key;
this.count = 1;
this.entries = [entry];
this.percentage = undefined;
this.groups = undefined;
}
add(entry) {
this.count++;
this.entries.push(entry)
}
createSubGroups() {
// TODO: use Map
this.groups = {};
for (const propertyName of IcLogEntry.propertyNames) {
if (this.property == propertyName) continue;
this.groups[propertyName] = Group.groupBy(this.entries, propertyName);
}
}
static groupBy(entries, property) {
let accumulator = Object.create(null);
let length = entries.length;
for (let entry of entries) {
let key = entry[property];
if (accumulator[key] == undefined) {
accumulator[key] = new Group(property, key, entry);
} else {
let group = accumulator[key];
if (group.entries == undefined) console.log([group, entry]);
group.add(entry)
}
}
let result = [];
for (let key in accumulator) {
let group = accumulator[key];
group.percentage = Math.round(group.count / length * 100 * 100) / 100;
result.push(group);
}
result.sort((a, b) => {return b.count - a.count});
return result;
}
}
tools/system-analyzer/index.css
View file @ 88f77406
......@@ -110,9 +110,10 @@ dd {
.panel {
background-color: var(--surface-color);
color: var(--on-surface-color);
padding: 10px 10px 10px 10px;
padding: 10px;
border-radius: 10px;
border: 3px solid rgba(var(--border-color), 0.2);
overflow: hidden;
}
.panelBody {
......@@ -121,8 +122,18 @@ dd {
margin: 0 -10px -10px 0;
}
.panel > h2 {
margin-top: 5px;
.panel > h2, .panelTitle {
margin: -10px -10px 0 -10px;
padding: 5px 10px 5px 10px;
background-color: rgba(var(--border-color),0.2);
border-radius: 7px 7px 0 0;
font-weight: 400;
}
.panel > select{
width: calc(100% + 20px);
margin: 0 -10px 10px -10px;
}
button {
......@@ -200,4 +211,22 @@ button:hover {
background-color: var(--primary-color);
color: var(--on-primary-color);
cursor: pointer;
}
#legend {
position: absolute;
right: 10px;
top: 10px;
background-color: var(--surface-color);
border-radius: 5px;
border: 3px solid rgba(var(--border-color), 0.2);
padding: 0 10px 0 10px;
}
#legend dt {
font-family: monospace;
}
#legend h3 {
margin-top: 10px;
}
\ No newline at end of file
tools/system-analyzer/index.html
View file @ 88f77406
......@@ -74,7 +74,7 @@ found in the LICENSE file. -->
width: 100%;
}
.panels{
.panels {
display: grid;
align-content: center;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
......@@ -98,16 +98,40 @@ found in the LICENSE file. -->
<section id="container" class="initial">
<timeline-panel id="timeline-panel">
<timeline-track id="map-track"></timeline-track>
<timeline-track id="ic-track"></timeline-track>
<timeline-track id="deopt-track"></timeline-track>
<timeline-track id="code-track"></timeline-track>
<timeline-track id="api-track"></timeline-track>
<timeline-track id="map-track" title="Map"></timeline-track>
<timeline-track id="ic-track" title="IC"></timeline-track>
<timeline-track id="deopt-track" title="Deopt"></timeline-track>
<timeline-track id="code-track" title="Code"></timeline-track>
<timeline-track id="api-track" title="API"></timeline-track>
</timeline-panel>
<div class="panels">
<map-panel id="map-panel"></map-panel>
<stats-panel id="map-stats-panel"></stats-panel>
<ic-panel id="ic-panel" onchange="app.handleSelectIc(event)"></ic-panel>
<list-panel id="ic-list" title="ICs">
<div id="legend">
<h3>Legend</h3>
<dl>
<dt>0</dt>
<dd>uninitialized</dd>
<dt>X</dt>
<dd>no feedback</dd>
<dt>1</dt>
<dd>monomorphic</dd>
<dt>^</dt>
<dd>recompute handler</dd>
<dt>P</dt>
<dd>polymorphic</dd>
<dt>N</dt>
<dd>megamorphic</dd>
<dt>G</dt>
<dd>generic</dd>
</dl>
</div>
</list-panel>
<list-panel id="map-list" title="Maps"></list-panel>
<list-panel id="deopt-list" title="Deopts"></list-panel>
<list-panel id="code-list" title="Code"></list-panel>
<list-panel id="api-list" title="API"></list-panel>
<source-panel id="source-panel"></source-panel>
<code-panel id="code-panel"></code-panel>
</div>
......
tools/system-analyzer/index.mjs
View file @ 88f77406
......@@ -12,7 +12,7 @@ import {IcLogEntry} from './log/ic.mjs';
import {MapLogEntry} from './log/map.mjs';
import {Processor} from './processor.mjs';
import {FocusEvent, SelectionEvent, SelectTimeEvent, ToolTipEvent,} from './view/events.mjs';
import {$, CSSColor} from './view/helper.mjs';
import {$, CSSColor, groupBy} from './view/helper.mjs';
class App {
_state;
......@@ -23,17 +23,24 @@ class App {
this._view = {
__proto__: null,
logFileReader: $('#log-file-reader'),
mapPanel: $('#map-panel'),
mapStatsPanel: $('#map-stats-panel'),
timelinePanel: $('#timeline-panel'),
mapTrack: $('#map-track'),
icTrack: $('#ic-track'),
icPanel: $('#ic-panel'),
deoptTrack: $('#deopt-track'),
codePanel: $('#code-panel'),
codeTrack: $('#code-track'),
apiTrack: $('#api-track'),
icList: $('#ic-list'),
mapList: $('#map-list'),
codeList: $('#code-list'),
deoptList: $('#deopt-list'),
apiList: $('#api-list'),
mapPanel: $('#map-panel'),
codePanel: $('#code-panel'),
sourcePanel: $('#source-panel'),
toolTip: $('#tool-tip'),
};
this.toggleSwitch = $('.theme-switch input[type="checkbox"]');
......@@ -47,9 +54,8 @@ class App {
async runAsyncInitialize() {
await Promise.all([
import('./view/ic-panel.mjs'),
import('./view/list-panel.mjs'),
import('./view/timeline-panel.mjs'),
import('./view/stats-panel.mjs'),
import('./view/map-panel.mjs'),
import('./view/source-panel.mjs'),
import('./view/code-panel.mjs'),
......@@ -72,16 +78,8 @@ class App {
}
showEntries(entries) {
const groups = new Map();
for (let entry of entries) {
const group = groups.get(entry.constructor);
if (group !== undefined) {
group.push(entry);
} else {
groups.set(entry.constructor, [entry]);
}
}
groups.forEach(entries => this.showEntriesOfSingleType(entries));
groupBy(entries, each => each.constructor, true)
.forEach(group => this.showEntriesOfSingleType(group.entries));
}
showEntriesOfSingleType(entries) {
......@@ -126,33 +124,32 @@ class App {
showMapEntries(entries) {
this._state.selectedMapLogEntries = entries;
this._view.mapPanel.selectedMapLogEntries = entries;
this._view.mapStatsPanel.selectedLogEntries = entries;
this._view.mapPanel.selectedLogEntries = entries;
this._view.mapList.selectedLogEntries = entries;
}
showIcEntries(entries) {
this._state.selectedIcLogEntries = entries;
this._view.icPanel.selectedLogEntries = entries;
this._view.icList.selectedLogEntries = entries;
}
showDeoptEntries(entries) {
// TODO: create list panel.
this._state.selectedDeoptLogEntries = entries;
this._view.deoptList.selectedLogEntries = entries;
}
showCodeEntries(entries) {
// TODO: create list panel
this._state.selectedCodeLogEntries = entries;
this._view.codePanel.selectedEntries = entries;
this._view.codeList.selectedLogEntries = entries;
}
showApiEntries(entries) {
// TODO: create list panel
this._state.selectedApiLogEntries = entries;
this._view.apiList.selectedLogEntries = entries;
}
showSourcePositions(entries) {
// TODO: Handle multiple source position selection events
this._view.sourcePanel.selectedSourcePositions = entries
}
......@@ -163,11 +160,11 @@ class App {
selectTimeRange(start, end) {
this._state.selectTimeRange(start, end);
this.showMapEntries(this._state.mapTimeline.selection ?? []);
this.showIcEntries(this._state.icTimeline.selection ?? []);
this.showDeoptEntries(this._state.deoptTimeline.selection ?? []);
this.showCodeEntries(this._state.codeTimeline.selection ?? []);
this.showApiEntries(this._state.apiTimeline.selection ?? []);
this.showMapEntries(this._state.mapTimeline.selectionOrSelf);
this.showIcEntries(this._state.icTimeline.selectionOrSelf);
this.showDeoptEntries(this._state.deoptTimeline.selectionOrSelf);
this.showCodeEntries(this._state.codeTimeline.selectionOrSelf);
this.showApiEntries(this._state.apiTimeline.selectionOrSelf);
this._view.timelinePanel.timeSelection = {start, end};
}
......@@ -175,25 +172,28 @@ class App {
this._state.map = entry;
this._view.mapTrack.selectedEntry = entry;
this._view.mapPanel.map = entry;
this._view.mapList.selectedLogEntry = entry;
}
selectIcLogEntry(entry) {
this._state.ic = entry;
this._view.icPanel.selectedEntry = [entry];
this._view.icList.selectedLogEntry = entry;
}
selectCodeLogEntry(entry) {
this._state.code = entry;
this._view.codePanel.entry = entry;
this._view.codeList.selectedLogEntry = entry;
}
selectDeoptLogEntry(entry) {
// TODO
this._view.deoptList.selectedLogEntry = entry;
}
selectApiLogEntry(entry) {
this._state.apiLogEntry = entry;
this._view.apiTrack.selectedEntry = entry;
this._view.apiList.selectedLogEntry = entry;
}
selectSourcePosition(sourcePositions) {
......@@ -227,12 +227,12 @@ class App {
const apiTimeline = processor.apiTimeline;
this._state.setTimelines(
mapTimeline, icTimeline, deoptTimeline, codeTimeline, apiTimeline);
// Transitions must be set before timeline for stats panel.
this._view.mapPanel.timeline = mapTimeline;
this._view.mapStatsPanel.transitions =
this._state.mapTimeline.transitions;
this._view.mapStatsPanel.timeline = mapTimeline;
this._view.icPanel.timeline = icTimeline;
this._view.icList.timeline = icTimeline;
this._view.mapList.timeline = mapTimeline;
this._view.deoptList.timeline = deoptTimeline;
this._view.codeList.timeline = codeTimeline;
this._view.apiList.timeline = apiTimeline;
this._view.sourcePanel.data = processor.scripts;
this._view.codePanel.timeline = codeTimeline;
this.refreshTimelineTrackView();
......
tools/system-analyzer/log/api.mjs
View file @ 88f77406
......@@ -8,7 +8,16 @@ export class ApiLogEntry extends LogEntry {
super(type, time);
this._name = name;
}
toString() {
return `Api(${this.type})`;
}
toStringLong() {
return `Api(${this.type}): ${this._name}`;
}
static get propertyNames() {
return ['type', 'name'];
}
}
tools/system-analyzer/log/code.mjs
View file @ 88f77406
......@@ -8,16 +8,32 @@ export class DeoptLogEntry extends LogEntry {
type, time, deoptReason, deoptLocation, scriptOffset, instructionStart,
codeSize, inliningId) {
super(type, time);
this._deoptReason = deoptReason;
this._deoptLocation = deoptLocation;
this._reason = deoptReason;
this._location = deoptLocation;
this._scriptOffset = scriptOffset;
this._instructionStart = instructionStart;
this._codeSize = codeSize;
this._inliningId = inliningId;
}
get reason() {
return this._reason;
}
get location() {
return this._location;
}
toString() {
return `Deopt(${this.type})${this._deoptReason}: ${this._deoptLocation}`;
return `Deopt(${this.type})`;
}
toStringLong() {
return `Deopt(${this.type})${this._reason}: ${this._location}`;
}
static get propertyNames() {
return ['type', 'reason', 'location', 'script', 'sourcePosition'];
}
}
......@@ -28,11 +44,23 @@ export class CodeLogEntry extends LogEntry {
this._entry = entry;
}
get kind() {
return this._kind;
}
toString() {
return `Code(${this.type})`;
}
toStringLong() {
return `Code(${this.type}): ${this._entry.toString()}`;
}
get disassemble() {
return this._entry?.source?.disassemble;
}
static get propertyNames() {
return ['type', 'kind', 'script', 'sourcePosition'];
}
}
tools/system-analyzer/log/ic.mjs
View file @ 88f77406
......@@ -6,7 +6,7 @@ import {LogEntry} from './log.mjs';
export class IcLogEntry extends LogEntry {
constructor(
type, fn_file, time, line, column, key, oldState, newState, map, reason,
script, modifier, additional) {
modifier, additional) {
super(type, time);
this.category = 'other';
if (this.type.indexOf('Store') !== -1) {
......@@ -18,7 +18,6 @@ export class IcLogEntry extends LogEntry {
this.functionName = parts[0];
this.file = parts[1];
let position = line + ':' + column;
this.filePosition = this.file + ':' + position;
this.oldState = oldState;
this.newState = newState;
this.state = this.oldState + ' → ' + this.newState;
......@@ -26,11 +25,14 @@ export class IcLogEntry extends LogEntry {
this.map = map;
this.reason = reason;
this.additional = additional;
this.script = script;
this.modifier = modifier;
}
toString() {
return `IC(${this.type})`;
}
toStringLong() {
return `IC(${this.type}):\n${this.state}`;
}
......@@ -62,8 +64,8 @@ export class IcLogEntry extends LogEntry {
static get propertyNames() {
return [
'type', 'category', 'functionName', 'filePosition', 'state', 'key', 'map',
'reason', 'file'
'type', 'category', 'functionName', 'script', 'sourcePosition', 'state',
'key', 'map', 'reason', 'file'
];
}
}
tools/system-analyzer/log/log.mjs
View file @ 88f77406
......@@ -17,8 +17,20 @@ export class LogEntry {
return this._type;
}
get script() {
return this.sourcePosition?.script;
}
toString() {
return `${this.constructor.name}(${this._type})`;
}
toStringLong() {
return this.toString();
}
// Returns an Array of all possible #type values.
static get allTypes() {
throw new Error('Not implemented.');
}
}
}
\ No newline at end of file
tools/system-analyzer/log/map.mjs
View file @ 88f77406
......@@ -41,7 +41,6 @@ class MapLogEntry extends LogEntry {
super(undefined, time);
this.id = id;
MapLogEntry.set(id, this);
this.id = -1;
this.edge = undefined;
this.children = [];
this.depth = 0;
......@@ -50,11 +49,14 @@ class MapLogEntry extends LogEntry {
this.leftId = 0;
this.rightId = 0;
this.filePosition = '';
this.script = '';
this.description = '';
}
toString() {
return `Map(${this.id})`;
}
toStringLong() {
return `Map(${this.id}):\n${this.description}`;
}
......@@ -138,7 +140,15 @@ class MapLogEntry extends LogEntry {
}
get type() {
return this.edge === undefined ? 'new' : this.edge.type;
return this.edge?.type ?? 'new';
}
get reason() {
return this.edge?.reason;
}
get property() {
return this.edge?.name;
}
isBootstrapped() {
......@@ -176,6 +186,10 @@ class MapLogEntry extends LogEntry {
this.cache.set(id, [map]);
}
}
static get propertyNames() {
return ['id', 'type', 'reason', 'property', 'script', 'sourcePosition'];
}
}
MapLogEntry.cache = new Map();
......
tools/system-analyzer/processor.mjs
View file @ 88f77406
......@@ -274,16 +274,17 @@ export class Processor extends LogReader {
}
processPropertyIC(
type, pc, time, line, column, old_state, new_state, map, key, modifier,
type, pc, time, line, column, old_state, new_state, mapId, key, modifier,
slow_reason) {
this._lastTimestamp = time;
let profileEntry = this._profile.findEntry(pc);
let fnName = this.formatProfileEntry(profileEntry);
let script = this.getProfileEntryScript(profileEntry);
const profileEntry = this._profile.findEntry(pc);
const fnName = this.formatProfileEntry(profileEntry);
const script = this.getProfileEntryScript(profileEntry);
const map = this.getOrCreateMapEntry(mapId, time);
// TODO: Use SourcePosition here directly
let entry = new IcLogEntry(
type, fnName, time, line, column, key, old_state, new_state, map,
slow_reason, script, modifier);
slow_reason, modifier);
if (script) {
entry.sourcePosition = script.addSourcePosition(line, column, entry);
}
......@@ -320,8 +321,8 @@ export class Processor extends LogReader {
// Skip normalized maps that were cached so we don't introduce multiple
// edges with the same source and target map.
if (type === 'NormalizeCached') return;
const from_ = this.getMapEntry(from, time_);
const to_ = this.getMapEntry(to, time_);
const from_ = this.getOrCreateMapEntry(from, time_);
const to_ = this.getOrCreateMapEntry(to, time_);
if (type === 'Normalize') {
// Fix a bug where we log "Normalize" transitions for maps created from
// the NormalizedMapCache.
......@@ -336,8 +337,7 @@ export class Processor extends LogReader {
to_.filePosition = this.formatProfileEntry(profileEntry, line, column);
let script = this.getProfileEntryScript(profileEntry);
if (script) {
to_.script = script;
to_.sourcePosition = to_.script.addSourcePosition(line, column, to_)
to_.sourcePosition = script.addSourcePosition(line, column, to_)
}
if (to_.parent() !== undefined && to_.parent() === from_) {
// Fix bug where we double log transitions.
......@@ -350,7 +350,7 @@ export class Processor extends LogReader {
deprecateMap(type, time, id) {
this._lastTimestamp = time;
this.getMapEntry(id, time).deprecate();
this.getOrCreateMapEntry(id, time).deprecate();
}
processMapCreate(time, id) {
......@@ -362,7 +362,7 @@ export class Processor extends LogReader {
processMapDetails(time, id, string) {
// TODO(cbruni): fix initial map logging.
const map = this.getMapEntry(id, time);
const map = this.getOrCreateMapEntry(id, time);
map.description = string;
}
......@@ -373,7 +373,7 @@ export class Processor extends LogReader {
return map;
}
getMapEntry(id, time) {
getOrCreateMapEntry(id, time) {
if (id === '0x000000000000') return undefined;
const map = MapLogEntry.get(id, time);
if (map !== undefined) return map;
......
tools/system-analyzer/timeline.mjs
View file @ 88f77406
......@@ -2,6 +2,8 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {groupBy} from './helper.mjs'
class Timeline {
// Class:
_model;
......@@ -30,6 +32,10 @@ class Timeline {
return this._selection;
}
get selectionOrSelf() {
return this._selection ?? this;
}
set selection(value) {
this._selection = value;
}
......@@ -177,9 +183,9 @@ class Timeline {
}
getBreakdown(keyFunction) {
if (keyFunction) return breakdown(this._values, keyFunction);
if (keyFunction) return groupBy(this._values, keyFunction);
if (this._breakdown === undefined) {
this._breakdown = breakdown(this._values, each => each.type);
this._breakdown = groupBy(this._values, each => each.type);
}
return this._breakdown;
}
......@@ -261,7 +267,7 @@ class Chunk {
}
getBreakdown(keyFunction) {
return breakdown(this.items, keyFunction);
return groupBy(this.items, keyFunction);
}
filter() {
......@@ -269,26 +275,4 @@ class Chunk {
}
}
function breakdown(array, keyFunction) {
if (array.length === 0) return [];
if (keyFunction === undefined) keyFunction = each => each;
const typeToindex = new Map();
const breakdown = [];
let id = 0;
// This is performance critical, resorting to for-loop
for (let i = 0; i < array.length; i++) {
const each = array[i];
const type = keyFunction(each);
const index = typeToindex.get(type);
if (index === void 0) {
typeToindex.set(type, breakdown.length);
breakdown.push({type: type, count: 0, id: id++});
} else {
breakdown[index].count++;
}
}
// Sort by count
return breakdown.sort((a, b) => b.count - a.count);
}
export {Timeline, Chunk};
tools/system-analyzer/view/helper.mjs
View file @ 88f77406
......@@ -200,28 +200,60 @@ class V8CustomElement extends HTMLElement {
}
}
class Chunked {
constructor(iterable, limit) {
this._iterator = iterable[Symbol.iterator]();
this._limit = limit;
}
* next() {
for (let i = 0; i < this._limit; i++) {
const {value, done} = this._iterator.next();
if (done) {
this._iterator = undefined;
return;
};
yield value;
}
}
get hasMore() {
return this._iterator !== undefined;
}
}
class LazyTable {
constructor(table, rowData, rowElementCreator) {
constructor(table, rowData, rowElementCreator, limit = 100) {
this._table = table;
this._rowData = rowData;
this._chunkedRowData = new Chunked(rowData, limit);
this._rowElementCreator = rowElementCreator;
const tbody = table.querySelector('tbody');
table.replaceChild(document.createElement('tbody'), tbody);
table.querySelector('tfoot td').onclick = (e) => this._addMoreRows();
if (table.tBodies.length == 0) {
table.appendChild(DOM.tbody());
} else {
table.replaceChild(DOM.tbody(), table.tBodies[0]);
}
if (!table.tFoot) {
const td = table.appendChild(DOM.element('tfoot'))
.appendChild(DOM.tr('clickable'))
.appendChild(DOM.td(`Show more...`));
td.setAttribute('colspan', 100);
}
this._clickHandler = this._addMoreRows.bind(this);
table.tFoot.addEventListener('click', this._clickHandler);
this._addMoreRows();
}
_nextRowDataSlice() {
return this._rowData.splice(0, 100);
}
_addMoreRows() {
const fragment = new DocumentFragment();
for (let row of this._nextRowDataSlice()) {
for (let row of this._chunkedRowData.next()) {
const tr = this._rowElementCreator(row);
fragment.appendChild(tr);
}
this._table.querySelector('tbody').appendChild(fragment);
this._table.tBodies[0].appendChild(fragment);
if (!this._chunkedRowData.hasMore) {
this._table.tFoot.removeEventListener('click', this._clickHandler);
this._table.tFoot.style.display = 'none';
}
}
}
......
tools/system-analyzer/view/ic-panel.mjs deleted 100644 → 0
View file @ ab4d9717
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {Group} from '../ic-model.mjs';
import {IcLogEntry} from '../log/ic.mjs';
import {MapLogEntry} from '../log/map.mjs';
import {FocusEvent, SelectionEvent, SelectTimeEvent} from './events.mjs';
import {DOM, V8CustomElement} from './helper.mjs';
DOM.defineCustomElement(
'view/ic-panel', (templateText) => class ICPanel extends V8CustomElement {
_selectedLogEntries;
_selectedLogEntry;
_timeline;
_detailsClickHandler = this.handleDetailsClick.bind(this);
_mapClickHandler = this.handleMapClick.bind(this);
_fileClickHandler = this.handleFilePositionClick.bind(this);
constructor() {
super(templateText);
this.initGroupKeySelect();
this.groupKey.addEventListener('change', e => this.update());
}
set timeline(value) {
console.assert(value !== undefined, 'timeline undefined!');
this._timeline = value;
this.selectedLogEntries = this._timeline.all;
this.update();
}
get groupKey() {
return this.$('#group-key');
}
get table() {
return this.$('#table');
}
get tableBody() {
return this.$('#table-body');
}
get count() {
return this.$('#count');
}
get spanSelectAll() {
return this.querySelectorAll('span');
}
set selectedLogEntries(value) {
this._selectedLogEntries = value;
this.update();
}
set selectedLogEntry(entry) {
// TODO: show details
}
_update() {
this._updateCount();
this._updateTable();
}
_updateCount() {
this.count.innerHTML = `length=${this._selectedLogEntries.length}`;
}
_updateTable(event) {
let select = this.groupKey;
let key = select.options[select.selectedIndex].text;
DOM.removeAllChildren(this.tableBody);
let groups = Group.groupBy(this._selectedLogEntries, key, true);
this._render(groups, this.tableBody);
}
escapeHtml(unsafe) {
if (!unsafe) return '';
return unsafe.toString()
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
handleMapClick(e) {
const group = e.target.parentNode.group;
const id = group.key;
const selectedMapLogEntries =
this.searchIcLogEntryToMapLogEntry(id, group.entries);
this.dispatchEvent(new SelectionEvent(selectedMapLogEntries));
}
searchIcLogEntryToMapLogEntry(id, icLogEntries) {
// searches for mapLogEntries using the id, time
const selectedMapLogEntriesSet = new Set();
for (const icLogEntry of icLogEntries) {
const selectedMap = MapLogEntry.get(id, icLogEntry.time);
selectedMapLogEntriesSet.add(selectedMap);
}
return Array.from(selectedMapLogEntriesSet);
}
// TODO(zcankara) Handle in the processor for events with source
// positions.
handleFilePositionClick(e) {
const tr = e.target.parentNode;
const sourcePosition = tr.group.entries[0].sourcePosition;
this.dispatchEvent(new FocusEvent(sourcePosition));
}
_render(groups, parent) {
const fragment = document.createDocumentFragment();
const max = Math.min(1000, groups.length)
for (let i = 0; i < max; i++) {
const group = groups[i];
const tr = DOM.tr();
tr.group = group;
const details = tr.appendChild(DOM.td('', 'toggle'));
details.onclick = this._detailsClickHandler;
tr.appendChild(DOM.td(group.percentage + '%', 'percentage'));
tr.appendChild(DOM.td(group.count, 'count'));
const valueTd = tr.appendChild(DOM.td(group.key, 'key'));
if (group.property === 'map') {
valueTd.onclick = this._mapClickHandler;
valueTd.classList.add('clickable');
} else if (group.property == 'filePosition') {
valueTd.classList.add('clickable');
valueTd.onclick = this._fileClickHandler;
}
fragment.appendChild(tr);
}
const omitted = groups.length - max;
if (omitted > 0) {
const tr = DOM.tr();
const tdNode = tr.appendChild(DOM.td(`Omitted ${omitted} entries.`));
tdNode.colSpan = 4;
fragment.appendChild(tr);
}
parent.appendChild(fragment);
}
handleDetailsClick(event) {
const tr = event.target.parentNode;
const group = tr.group;
// Create subgroup in-place if the don't exist yet.
if (group.groups === undefined) {
group.createSubGroups();
this.renderDrilldown(group, tr);
}
let detailsTr = tr.nextSibling;
if (tr.classList.contains('open')) {
tr.classList.remove('open');
detailsTr.style.display = 'none';
} else {
tr.classList.add('open');
detailsTr.style.display = 'table-row';
}
}
renderDrilldown(group, previousSibling) {
let tr = DOM.tr('entry-details');
tr.style.display = 'none';
// indent by one td.
tr.appendChild(DOM.td());
let td = DOM.td();
td.colSpan = 3;
for (let key in group.groups) {
this.renderDrilldownGroup(td, group.groups[key], key);
}
tr.appendChild(td);
// Append the new TR after previousSibling.
previousSibling.parentNode.insertBefore(tr, previousSibling.nextSibling)
}
renderDrilldownGroup(td, children, key) {
const max = 20;
const div = DOM.div('drilldown-group-title');
div.textContent =
`Grouped by ${key} [top ${max} out of ${children.length}]`;
td.appendChild(div);
const table = DOM.table();
this._render(children.slice(0, max), table, false)
td.appendChild(table);
}
initGroupKeySelect() {
const select = this.groupKey;
select.options.length = 0;
for (const propertyName of IcLogEntry.propertyNames) {
const option = document.createElement('option');
option.text = propertyName;
select.add(option);
}
}
});
tools/system-analyzer/view/ic-panel-template.html → tools/system-analyzer/view/list-panel-template.html
View file @ 88f77406
......@@ -13,7 +13,7 @@ found in the LICENSE file. -->
.percentage {
text-align: right;
width: 5em;
width: 4em;
}
.key {
......@@ -27,7 +27,7 @@ found in the LICENSE file. -->
.toggle {
width: 1em;
text-align: center;
text-align: left;
cursor: -webkit-zoom-in;
color: rgba(var(--border-color), 1);
}
......@@ -40,59 +40,23 @@ found in the LICENSE file. -->
.panel {
position: relative;
min-height: 200px;
}
#legend {
position: absolute;
right: 10px;
top: 10px;
background-color: var(--surface-color);
border-radius: 5px;
border: 3px solid rgba(var(--border-color), 0.2);
padding: 0 10px 0 10px;
.panelBody {
height: 400px;
}
#legend dt {
font-family: monospace;
}
#legend h3 {
margin-top: 10px;
}
.scroller {
max-height: 800px;
overflow-y: scroll;
}
</style>
<div class="panel">
<h2>IC Panel <span id="count"></span></h2>
<div id="legend">
<h3>Legend</h3>
<dl>
<dt>0</dt>
<dd>uninitialized</dd>
<dt>X</dt>
<dd>no feedback</dd>
<dt>1</dt>
<dd>monomorphic</dd>
<dt>^</dt>
<dd>recompute handler</dd>
<dt>P</dt>
<dd>polymorphic</dd>
<dt>N</dt>
<dd>megamorphic</dd>
<dt>G</dt>
<dd>generic</dd>
</dl>
</div>
<p>
Group by IC-property:
<select id="group-key"></select>
</p>
<div class="panelBody">
<h2 id="title"></h2>
<slot></slot>
<select id="group-key"></select>
<div id="content" class="panelBody">
<table id="table" width="100%">
<tbody id="table-body">
</tbody>
</table>
</div>
</div>
tools/system-analyzer/view/list-panel.mjs 0 → 100644
View file @ 88f77406
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {SourcePosition} from '../../profile.mjs';
import {IcLogEntry} from '../log/ic.mjs';
import {MapLogEntry} from '../log/map.mjs';
import {FocusEvent, SelectionEvent, SelectTimeEvent} from './events.mjs';
import {groupBy, LazyTable} from './helper.mjs';
import {DOM, V8CustomElement} from './helper.mjs';
DOM.defineCustomElement('view/list-panel',
(templateText) =>
class ListPanel extends V8CustomElement {
_selectedLogEntries;
_selectedLogEntry;
_timeline;
_detailsClickHandler = this._handleDetailsClick.bind(this);
_mapClickHandler = this._handleMapClick.bind(this);
_fileClickHandler = this._handleFilePositionClick.bind(this);
constructor() {
super(templateText);
this.groupKey.addEventListener('change', e => this.update());
}
static get observedAttributes() {
return ['title'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'title') {
this.$('#title').innerHTML = newValue;
}
}
set timeline(value) {
console.assert(value !== undefined, 'timeline undefined!');
this._timeline = value;
this.selectedLogEntries = this._timeline.all;
this.initGroupKeySelect();
}
set selectedLogEntries(entries) {
this._selectedLogEntries = entries;
this.update();
}
set selectedLogEntry(entry) {
// TODO: show details
}
get entryClass() {
return this._timeline.at(0)?.constructor;
}
get groupKey() {
return this.$('#group-key');
}
get table() {
return this.$('#table');
}
get spanSelectAll() {
return this.querySelectorAll('span');
}
get _propertyNames() {
return this.entryClass?.propertyNames ?? [];
}
_update() {
DOM.removeAllChildren(this.table);
const propertyName = this.groupKey.selectedOptions[0].text;
const groups =
groupBy(this._selectedLogEntries, each => each[propertyName], true);
this._render(groups, this.table);
}
createSubgroups(group) {
const map = new Map();
for (let propertyName of this._propertyNames) {
map.set(
propertyName,
groupBy(group.entries, each => each[propertyName], true));
}
return map;
}
_handleMapClick(e) {
const group = e.currentTarget.group;
this.dispatchEvent(new FocusEvent(group.entries[0].map));
}
_handleFilePositionClick(e) {
const group = e.currentTarget.group;
const sourcePosition = group.entries[0].sourcePosition;
this.dispatchEvent(new FocusEvent(sourcePosition));
}
_render(groups, table) {
let last;
new LazyTable(table, groups, group => {
if (last && last.count < group.count) {
console.log(last, group);
}
last = group;
const tr = DOM.tr();
tr.group = group;
const details = tr.appendChild(DOM.td('', 'toggle'));
details.onclick = this._detailsClickHandler;
tr.appendChild(DOM.td(`${group.percent.toFixed(2)}%`, 'percentage'));
tr.appendChild(DOM.td(group.count, 'count'));
const valueTd = tr.appendChild(DOM.td(`${group.key}`, 'key'));
if (group.key instanceof MapLogEntry) {
tr.onclick = this._mapClickHandler;
valueTd.classList.add('clickable');
} else if (group.key instanceof SourcePosition) {
valueTd.classList.add('clickable');
tr.onclick = this._fileClickHandler;
}
return tr;
}, 10);
}
_handleDetailsClick(event) {
event.stopPropagation();
const tr = event.target.parentNode;
const group = tr.group;
// Create subgroup in-place if the don't exist yet.
if (tr.groups === undefined) {
const groups = tr.groups = this.createSubgroups(group);
this.renderDrilldown(groups, tr);
}
const detailsTr = tr.nextSibling;
if (tr.classList.contains('open')) {
tr.classList.remove('open');
detailsTr.style.display = 'none';
} else {
tr.classList.add('open');
detailsTr.style.display = 'table-row';
}
}
renderDrilldown(groups, previousSibling) {
const tr = DOM.tr('entry-details');
tr.style.display = 'none';
// indent by one td.
tr.appendChild(DOM.td());
const td = DOM.td();
td.colSpan = 3;
groups.forEach((group, key) => {
this.renderDrilldownGroup(td, group, key);
});
tr.appendChild(td);
// Append the new TR after previousSibling.
previousSibling.parentNode.insertBefore(tr, previousSibling.nextSibling);
}
renderDrilldownGroup(td, group, key) {
const div = DOM.div('drilldown-group-title');
div.textContent = `Grouped by ${key}`;
td.appendChild(div);
const table = DOM.table();
this._render(group, table, false)
td.appendChild(table);
}
initGroupKeySelect() {
const select = this.groupKey;
select.options.length = 0;
for (const propertyName of this._propertyNames) {
const option = DOM.element('option');
option.text = propertyName;
select.add(option);
}
}
});
tools/system-analyzer/view/map-panel.mjs
View file @ 88f77406
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import './stats-panel.mjs';
import './map-panel/map-details.mjs';
import './map-panel/map-transitions.mjs';
......@@ -66,11 +65,12 @@ DOM.defineCustomElement('view/map-panel',
}
}
set selectedMapLogEntries(list) {
this.mapTransitionsPanel.selectedMapLogEntries = list;
if (list.length === 1) this.mapDetailsPanel.map = list[0];
set selectedLogEntries(list) {
this.mapTransitionsPanel.selectedLogEntries = list;
if (list.length === 1) this.mapDetailsPanel.map = list.first();
}
get selectedMapLogEntries() {
return this.mapTransitionsPanel.selectedMapLogEntries;
get selectedLogEntries() {
return this.mapTransitionsPanel.selectedLogEntries;
}
});
tools/system-analyzer/view/map-panel/map-transitions.mjs
View file @ 88f77406
......@@ -11,7 +11,7 @@ DOM.defineCustomElement(
_timeline;
_map;
_edgeToColor = new Map();
_selectedMapLogEntries;
_selectedLogEntries;
_displayedMapsInTree;
_toggleSubtreeHandler = this._handleToggleSubtree.bind(this);
_selectMapHandler = this._handleSelectMap.bind(this);
......@@ -49,13 +49,13 @@ DOM.defineCustomElement(
});
}
set selectedMapLogEntries(list) {
this._selectedMapLogEntries = list;
set selectedLogEntries(list) {
this._selectedLogEntries = list;
this.update();
}
get selectedMapLogEntries() {
return this._selectedMapLogEntries;
get selectedLogEntries() {
return this._selectedLogEntries;
}
_handleTransitionViewChange(e) {
......@@ -80,7 +80,7 @@ DOM.defineCustomElement(
DOM.removeAllChildren(this.transitionView);
this._displayedMapsInTree = new Set();
// Limit view to 200 maps for performance reasons.
this.selectedMapLogEntries.slice(0, 200).forEach(
this.selectedLogEntries.slice(0, 200).forEach(
(map) => this._addMapAndParentTransitions(map));
this._displayedMapsInTree = undefined;
this.transitionView.style.display = '';
......@@ -177,7 +177,7 @@ DOM.defineCustomElement(
_handleMouseoverMap(event) {
this.dispatchEvent(new ToolTipEvent(
event.currentTarget.map.toString(), event.currentTarget));
event.currentTarget.map.toStringLong(), event.currentTarget));
}
_handleToggleSubtree(event) {
......
tools/system-analyzer/view/source-panel-template.html
View file @ 88f77406
......@@ -59,11 +59,6 @@ found in the LICENSE file. -->
box-shadow: 0px 0px 0px 0px var(--secondary-color);
}
}
#script-dropdown {
width: 100%;
margin-bottom: 10px;
}
</style>
<div class="panel">
<h2>Source Panel</h2>
......
tools/system-analyzer/view/source-panel.mjs
View file @ 88f77406
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {groupBy} from '../helper.mjs';
import {IcLogEntry} from '../log/ic.mjs';
import {MapLogEntry} from '../log/map.mjs';
......@@ -116,11 +117,18 @@ DOM.defineCustomElement('view/source-panel',
handleSourcePositionMouseOver(e) {
const entries = e.target.sourcePosition.entries;
let list =
entries
.map(entry => `${entry.__proto__.constructor.name}: ${entry.type}`)
.join('<br/>');
this.dispatchEvent(new ToolTipEvent(list, e.target));
let text = groupBy(entries, each => each.constructor, true)
.map(group => {
let text = `${group.key.name}: ${group.count}\n`
text += groupBy(group.entries, each => each.type, true)
.map(group => {
return ` - ${group.key}: ${group.count}`;
})
.join('\n');
return text;
})
.join('\n');
this.dispatchEvent(new ToolTipEvent(text, e.target));
}
selectLogEntries(logEntries) {
......
tools/system-analyzer/view/stats-panel-template.html deleted 100644 → 0
View file @ ab4d9717
<!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<head>
<link href="./index.css" rel="stylesheet">
</head>
<style>
#stats {
display: flex;
height: 250px;
background-color: var(--surface-color);
padding: 10px 10px 10px 10px;
margin: auto;
}
table {
flex: 1;
max-height: 250px;
display: inline-block;
overflow-y: scroll;
border-collapse: collapse;
}
table td {
padding: 2px;
}
table thead td {
border-bottom: 1px var(--on-surface-color) dotted;
}
table tbody td {
cursor: pointer;
}
#nameTable tr {
max-width: 200px;
}
#nameTable tr td:nth-child(1) {
text-align: right;
}
#typeTable {
text-align: right;
max-width: 380px;
}
#typeTable tr td:nth-child(2) {
text-align: left;
}
</style>
<div class="panel">
<h2>Map Stats</h2>
<section id="stats">
<table id="typeTable" class="statsTable">
<thead>
<tr><td></td><td>Type</td><td>Count</td><td>Percent</td></tr>
</thead>
<tbody></tbody>
</table>
<table id="nameTable">
<thead>
<tr><td>Count</td><td>Propery Name</td></tr>
</thead>
<tbody></tbody>
<tfoot>
<tr><td colspan="2" class="clickable">Show more...</td></tr>
</tfoo>
</table>
</section>
</div>
tools/system-analyzer/view/stats-panel.mjs deleted 100644 → 0
View file @ ab4d9717
// Copyright 2020 the V8 project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {SelectionEvent} from './events.mjs';
import {DOM, LazyTable, V8CustomElement} from './helper.mjs';
DOM.defineCustomElement(
'view/stats-panel',
(templateText) => class StatsPanel extends V8CustomElement {
_timeline;
_transitions;
_selectedLogEntries;
constructor() {
super(templateText);
}
get stats() {
return this.$('#stats');
}
set timeline(timeline) {
this._timeline = timeline;
this.selectedLogEntries = timeline.all
}
set selectedLogEntries(entries) {
this._selectedLogEntries = entries;
this.update();
}
set transitions(value) {
this._transitions = value;
}
_filterUniqueTransitions(filter) {
// Returns a list of Maps whose parent is not in the list.
return this._selectedLogEntries.filter((map) => {
if (filter(map) === false) return false;
let parent = map.parent();
if (parent === undefined) return true;
return filter(parent) === false;
});
}
_update() {
this._updateGeneralStats();
this._updateNamedTransitionsStats();
}
_updateGeneralStats() {
console.assert(this._timeline !== undefined, 'Timeline not set yet!');
let pairs = [
['Transitions', 'primary', (e) => e.edge && e.edge.isTransition()],
['Fast to Slow', 'violet', (e) => e.edge && e.edge.isFastToSlow()],
['Slow to Fast', 'orange', (e) => e.edge && e.edge.isSlowToFast()],
['Initial Map', 'yellow', (e) => e.edge && e.edge.isInitial()],
[
'Replace Descriptors',
'red',
(e) => e.edge && e.edge.isReplaceDescriptors(),
],
[
'Copy as Prototype',
'red',
(e) => e.edge && e.edge.isCopyAsPrototype(),
],
[
'Optimize as Prototype',
null,
(e) => e.edge && e.edge.isOptimizeAsPrototype(),
],
['Deprecated', null, (e) => e.isDeprecated()],
['Bootstrapped', 'green', (e) => e.isBootstrapped()],
['Total', null, (e) => true],
];
let tbody = document.createElement('tbody');
let total = this._selectedLogEntries.length;
pairs.forEach(([name, color, filter]) => {
let row = DOM.tr();
if (color !== null) {
row.appendChild(DOM.td(DOM.div(['colorbox', color])));
} else {
row.appendChild(DOM.td(''));
}
row.classList.add('clickable');
row.onclick = (e) => {
// lazily compute the stats
let node = e.target.parentNode;
if (node.maps == undefined) {
node.maps = this._filterUniqueTransitions(filter);
}
this.dispatchEvent(new SelectionEvent(node.maps));
};
row.appendChild(DOM.td(name));
let count = this._count(filter);
row.appendChild(DOM.td(count));
let percent = Math.round((count / total) * 1000) / 10;
row.appendChild(DOM.td(percent.toFixed(1) + '%'));
tbody.appendChild(row);
});
this.$('#typeTable').replaceChild(tbody, this.$('#typeTable tbody'));
}
_count(filter) {
let count = 0;
for (const map of this._selectedLogEntries) {
if (filter(map)) count++;
}
return count;
}
_updateNamedTransitionsStats() {
let rowData = Array.from(this._transitions.entries());
rowData.sort((a, b) => b[1].length - a[1].length);
new LazyTable(this.$('#nameTable'), rowData, ([name, maps]) => {
let row = DOM.tr();
row.maps = maps;
row.classList.add('clickable');
row.addEventListener(
'click',
(e) => this.dispatchEvent(new SelectionEvent(
e.target.parentNode.maps.map((map) => map.to))));
row.appendChild(DOM.td(maps.length));
row.appendChild(DOM.td(name));
return row;
});
}
});
tools/system-analyzer/view/timeline-panel-template.html
View file @ 88f77406
......@@ -7,11 +7,22 @@ found in the LICENSE file. -->
<style>
.panel {
padding-bottom: 0px;
position: relative;
}
.titleBackground {
position: absolute;
left: 0px;
top: 34px;
border-radius: 0 0 0 7px;
height: calc(100% - 34px);
width: 30px;
background-color: rgba(var(--border-color),0.2);
}
</style>
</head>
<div class="panel">
<h2>Timeline Panel</h2>
<div class="titleBackground"></div>
<div>
<slot></slot>
</div>
......
tools/system-analyzer/view/timeline/timeline-track-template.html
View file @ 88f77406
......@@ -63,6 +63,19 @@ found in the LICENSE file. -->
font-size: 10px;
}
#title {
position: relative;
float: left;
width: 20px;
writing-mode: vertical-rl;
text-orientation: mixed;
margin: 0 0 0 -10px;
padding: 5px 5px 0px 5px;
overflow: hidden;
border-radius: 7px;
font-weight: 400;
}
.legend {
position: relative;
float: right;
......@@ -102,6 +115,10 @@ found in the LICENSE file. -->
background-color: var(--timeline-background-color);
}
#selection {
display: none;
}
#rightHandle,
#leftHandle {
background-color: rgba(200, 200, 200, 0.5);
......@@ -124,6 +141,8 @@ found in the LICENSE file. -->
position: absolute;
}
</style>
<h3 id="title"></h3>
<div class="legend">
<table id="legendTable">
<thead>
......
tools/system-analyzer/view/timeline/timeline-track.mjs
View file @ 88f77406
......@@ -34,6 +34,16 @@ DOM.defineCustomElement('view/timeline/timeline-track',
this.isLocked = false;
}
static get observedAttributes() {
return ['title'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == 'title') {
this.$('#title').innerHTML = newValue;
}
}
_handleFilterTimeline(type) {
this._updateChunks();
}
......@@ -99,8 +109,8 @@ DOM.defineCustomElement('view/timeline/timeline-track',
}
_updateChunks() {
this._chunks = this._timeline.chunks(
this.nofChunks, each => this._legend.filter(each));
this._chunks =
this._timeline.chunks(this.nofChunks, this._legend.filterPredicate);
this.update();
}
......@@ -142,9 +152,9 @@ DOM.defineCustomElement('view/timeline/timeline-track',
let increment = 0;
let lastHeight = 0.0;
const stops = [];
for (let breakdown of chunk.getBreakdown(map => map.type)) {
const color = this._legend.colorForType(breakdown.type);
increment += breakdown.count;
for (let group of chunk.getBreakdown(map => map.type)) {
const color = this._legend.colorForType(group.key);
increment += group.count;
let height = (increment / total * kHeight) | 0;
stops.push(`${color} ${lastHeight}px ${height}px`)
lastHeight = height;
......@@ -232,7 +242,7 @@ DOM.defineCustomElement('view/timeline/timeline-track',
event.layerY / event.target.offsetHeight * (chunk.size() - 1));
let logEntry = chunk.at(relativeIndex);
this.dispatchEvent(new FocusEvent(logEntry));
this.dispatchEvent(new ToolTipEvent(logEntry.toString(), event.target));
this.dispatchEvent(new ToolTipEvent(logEntry.toStringLong(), event.target));
}
_handleChunkClick(event) {
......@@ -520,6 +530,7 @@ class Legend {
_timeline;
_typesFilters = new Map();
_typeClickHandler = this._handleTypeClick.bind(this);
_filterPredicate = this.filter.bind(this);
onFilter = () => {};
constructor(table) {
......@@ -528,14 +539,21 @@ class Legend {
set timeline(timeline) {
this._timeline = timeline;
this._typesFilters =
new Map(timeline.getBreakdown().map(each => [each.type, true]));
this._colors = new Map(
timeline.getBreakdown().map(each => [each.type, CSSColor.at(each.id)]));
const groups = timeline.getBreakdown();
this._typesFilters = new Map(groups.map(each => [each.key, true]));
this._colors =
new Map(groups.map(each => [each.key, CSSColor.at(each.id)]));
}
get selection() {
return this._timeline.selection ?? this._timeline;
return this._timeline.selectionOrSelf;
}
get filterPredicate() {
for (let visible of this._typesFilters.values()) {
if (!visible) return this._filterPredicate;
}
return undefined;
}
colorForType(type) {
......@@ -549,12 +567,11 @@ class Legend {
update() {
const tbody = DOM.tbody();
const missingTypes = new Set(this._typesFilters.keys());
this.selection.getBreakdown().forEach(each => {
tbody.appendChild(this._breakdownRow(each));
missingTypes.delete(each.type);
this.selection.getBreakdown().forEach(group => {
tbody.appendChild(this._addTypeRow(group));
missingTypes.delete(group.key);
});
missingTypes.forEach(
each => tbody.appendChild(this._row('', each, 0, '0%')));
missingTypes.forEach(key => tbody.appendChild(this._row('', key, 0, '0%')));
if (this._timeline.selection) {
tbody.appendChild(
this._row('', 'Selection', this.selection.length, '100%'));
......@@ -572,21 +589,20 @@ class Legend {
return row
}
_breakdownRow(breakdown) {
const color = this.colorForType(breakdown.type);
_addTypeRow(group) {
const color = this.colorForType(group.key);
const colorDiv = DOM.div('colorbox');
if (this._typesFilters.get(breakdown.type)) {
if (this._typesFilters.get(group.key)) {
colorDiv.style.backgroundColor = color;
} else {
colorDiv.style.borderColor = color;
colorDiv.style.backgroundColor = CSSColor.backgroundImage;
}
let percent =
`${(breakdown.count / this.selection.length * 100).toFixed(1)}%`;
const row = this._row(colorDiv, breakdown.type, breakdown.count, percent);
let percent = `${(group.count / this.selection.length * 100).toFixed(1)}%`;
const row = this._row(colorDiv, group.key, group.count, percent);
row.className = 'clickable';
row.onclick = this._typeClickHandler;
row.data = breakdown.type;
row.data = group.key;
return row;
}
......
tools/system-analyzer/view/tool-tip.mjs
View file @ 88f77406
......@@ -70,6 +70,7 @@ DOM.defineCustomElement(
_useBottom(viewportY) {
return viewportY <= 400;
}
_useRight(viewportX) {
return viewportX < document.documentElement.clientWidth / 2;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment