diff --git a/tools/system-analyzer/ic-panel.mjs b/tools/system-analyzer/ic-panel.mjs index 14ea97a303..6603dd4998 100644 --- a/tools/system-analyzer/ic-panel.mjs +++ b/tools/system-analyzer/ic-panel.mjs @@ -10,8 +10,8 @@ import { defineCustomElement, V8CustomElement } from './helper.mjs'; defineCustomElement('ic-panel', (templateText) => class ICPanel extends V8CustomElement { //TODO(zcankara) Entries never set - #entries; - #filteredEntries; + #selectedLogEvents; + #timeline; constructor() { super(templateText); this.groupKey.addEventListener( @@ -19,10 +19,16 @@ defineCustomElement('ic-panel', (templateText) => this.$('#filterICTimeBtn').addEventListener( 'click', e => this.handleICTimeFilter(e)); } - - get entries() { - return this.#entries; + get timeline() { + return this.#timeline; } + set timeline(value) { + console.assert(value !== undefined, "timeline undefined!"); + this.#timeline = value; + this.selectedLogEvents = this.timeline.all; + this.updateCount(); + } + get groupKey() { return this.$('#group-key'); @@ -44,13 +50,18 @@ defineCustomElement('ic-panel', (templateText) => return this.querySelectorAll("span"); } - set filteredEntries(value) { - this.#filteredEntries = value; + set selectedLogEvents(value) { + this.#selectedLogEvents = value; + this.updateCount(); this.updateTable(); } - get filteredEntries() { - return this.#filteredEntries; + updateCount() { + this.count.innerHTML = this.selectedLogEvents.length; + } + + get selectedLogEvents() { + return this.#selectedLogEvents; } updateTable(event) { @@ -58,7 +69,7 @@ defineCustomElement('ic-panel', (templateText) => let key = select.options[select.selectedIndex].text; let tableBody = this.tableBody; this.removeAllChildren(tableBody); - let groups = Group.groupBy(this.filteredEntries, key, true); + let groups = Group.groupBy(this.selectedLogEvents, key, true); this.render(groups, tableBody); } diff --git a/tools/system-analyzer/index.mjs b/tools/system-analyzer/index.mjs index 5913d4ddc8..1ba1b384a3 100644 --- a/tools/system-analyzer/index.mjs +++ b/tools/system-analyzer/index.mjs @@ -63,8 +63,7 @@ class App { } showIcEntries(entries) { this.#state.selectedIcLogEvents = entries; - //TODO(zcankara) use selectedLogEvents - this.#view.icPanel.filteredEntries = this.#state.selectedIcLogEvents; + this.#view.icPanel.selectedLogEvents = this.#state.selectedIcLogEvents; } handleTimeRangeSelect(e) { @@ -92,7 +91,7 @@ class App { this.#state.mapTimeline.selectTimeRange(start, end); this.#view.mapPanel.selectedMapLogEvents = this.#state.mapTimeline.selection; - this.#view.icPanel.filteredEntries = this.#state.icTimeline.selection; + this.#view.icPanel.selectedLogEvents = this.#state.icTimeline.selection; } selectMapLogEvent(entry) { this.#state.map = entry; @@ -101,7 +100,7 @@ class App { } selectICLogEvent(entry) { this.#state.ic = entry; - this.#view.icPanel.filteredEntries = [entry]; + this.#view.icPanel.selectedLogEvents = [entry]; } selectSourcePositionEvent(sourcePositions) { console.log("source positions: ", sourcePositions); @@ -119,13 +118,9 @@ class App { let reader = new FileReader(); reader.onload = (evt) => { let icProcessor = new CustomIcProcessor(); - //TODO(zcankara) Assign timeline directly to the ic panel - //TODO(zcankara) Exe: this.#icPanel.timeline = document.state.icTimeline - //TODO(zcankara) Set the data of the State object first this.#state.icTimeline = icProcessor.processString(fileData.chunk); + this.#view.icPanel.timeline = this.#state.icTimeline; this.#view.icTrack.data = this.#state.icTimeline; - this.#view.icPanel.filteredEntries = this.#view.icTrack.data.all; - this.#view.icPanel.count.innerHTML = this.#view.icTrack.data.all.length; }; reader.readAsText(fileData.file); this.#view.icPanel.initGroupKeySelect();