[tools] System-analyzer cleanups

- Use *LogEntry in more places to avoid confusion with HTML Events
- Move Processor.kProperties to IcLogEntry.getPropertyNames
- Move timeline-track legend "All" entry to the end

Bug: v8:10644
Change-Id: I5a9e833ad0570c39d3106955fa2ba00af53b7062
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2463241
Commit-Queue: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Auto-Submit: Camillo Bruni <cbruni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#70606}

test/mjsunit/tools/timeline.mjs

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import { Timeline } from "../../../tools/system-analyzer/timeline.mjs";
-import { Event } from "../../../tools/system-analyzer/log/log.mjs";
+import { LogEntry} from "../../../tools/system-analyzer/log/log.mjs";
 
 
 (function testTimeline() {
@@ -11,20 +11,20 @@ import { Event } from "../../../tools/system-analyzer/log/log.mjs";
   let id1 = "0x3e7e082470cd";
   let id2 = "0x3e7e082470ad";
   let time = 12;
-  let event1 = new Event(id1, time);
-  let event2 = new Event(id1, time + 1);
-  let event3 = new Event(id1, time + 2);
-  let event4 = new Event(id1, time + 3);
-  let event5 = new Event(id2, time + 3);
-  timeline.push(event1);
-  timeline.push(event2);
-  timeline.push(event3);
-  timeline.push(event4);
-  timeline.push(event5);
+  let entry1 = new LogEntry(id1, time);
+  let entry2 = new LogEntry(id1, time + 1);
+  let entry3 = new LogEntry(id1, time + 2);
+  let entry4 = new LogEntry(id1, time + 3);
+  let entry5 = new LogEntry(id2, time + 3);
+  timeline.push(entry1);
+  timeline.push(entry2);
+  timeline.push(entry3);
+  timeline.push(entry4);
+  timeline.push(entry5);
   let startTime = time;
   let endTime = time + 2;
   timeline.selectTimeRange(startTime, endTime);
-  assertArrayEquals(timeline.selection, [event1, event2, event3]);
+  assertArrayEquals(timeline.selection, [entry1, entry2, entry3]);
   let entryIdx = timeline.find(time + 1);
   let entry = timeline.at(entryIdx);
   assertEquals(entry.time, time + 1);

tools/system-analyzer/app-model.mjs

@@ -6,9 +6,9 @@ class State {
   #timeSelection = { start: 0, end: Infinity };
   #map;
   #ic;
-  #selectedMapLogEvents;
-  #selectedIcLogEvents;
-  #selectedSourcePositionLogEvents;
+  #selectedMapLogEntries;
+  #selectedIcLogEntries;
+  #selectedSourcePositions;
   #nofChunks;
   #chunks;
   #icTimeline;
@@ -75,25 +75,25 @@ class State {
     if (!value) return;
     this.#ic = value;
   }
-  get selectedMapLogEvents() {
-    return this.#selectedMapLogEvents;
+  get selectedMapLogEntries() {
+    return this.#selectedMapLogEntries;
   }
-  set selectedMapLogEvents(value) {
+  set selectedMapLogEntries(value) {
     if (!value) return;
-    this.#selectedMapLogEvents = value;
+    this.#selectedMapLogEntries = value;
   }
-  get selectedSourcePositionLogEvents() {
-    return this.#selectedSourcePositionLogEvents;
+  get selectedSourcePositions() {
+    return this.#selectedSourcePositions;
   }
-  set selectedSourcePositionLogEvents(value) {
-    this.#selectedSourcePositionLogEvents = value;
+  set selectedSourcePositions(value) {
+    this.#selectedSourcePositions = value;
   }
-  get selectedIcLogEvents() {
-    return this.#selectedIcLogEvents;
+  get selectedIcLogEntries() {
+    return this.#selectedIcLogEntries;
   }
-  set selectedIcLogEvents(value) {
+  set selectedIcLogEntries(value) {
     if (!value) return;
-    this.#selectedIcLogEvents = value;
+    this.#selectedIcLogEntries = value;
   }
   get timeSelection() {
     return this.#timeSelection;

tools/system-analyzer/ic-model.mjs

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import Processor from "./processor.mjs";
+import { IcLogEntry } from "./log/ic.mjs";
 
 // For compatibility with console scripts:
 print = console.log;
@@ -23,11 +23,11 @@ export class Group {
   }
 
   createSubGroups() {
+    // TODO: use Map
     this.groups = {};
-    for (let i = 0; i < Processor.kProperties.length; i++) {
-      let subProperty = Processor.kProperties[i];
-      if (this.property == subProperty) continue;
-      this.groups[subProperty] = Group.groupBy(this.entries, subProperty);
+    for (const propertyName of IcLogEntry.propertyNames) {
+      if (this.property == propertyName) continue;
+      this.groups[propertyName] = Group.groupBy(this.entries, propertyName);
     }
   }
 

tools/system-analyzer/ic-panel.mjs

@@ -3,14 +3,14 @@
 // found in the LICENSE file.
 
 import { Group } from './ic-model.mjs';
-import Processor from "./processor.mjs";
-import { MapLogEvent } from "./log/map.mjs";
+import { MapLogEntry } from "./log/map.mjs";
 import { FocusEvent, SelectTimeEvent, SelectionEvent } from './events.mjs';
 import { defineCustomElement, V8CustomElement } from './helper.mjs';
+import { IcLogEntry } from './log/ic.mjs';
 
 defineCustomElement('ic-panel', (templateText) =>
   class ICPanel extends V8CustomElement {
-    #selectedLogEvents;
+    #selectedLogEntries;
     #timeline;
     constructor() {
       super(templateText);
@@ -23,7 +23,7 @@ defineCustomElement('ic-panel', (templateText) =>
     set timeline(value) {
       console.assert(value !== undefined, "timeline undefined!");
       this.#timeline = value;
-      this.selectedLogEvents = this.#timeline.all;
+      this.selectedLogEntries = this.#timeline.all;
       this.updateCount();
     }
     get groupKey() {
@@ -46,18 +46,14 @@ defineCustomElement('ic-panel', (templateText) =>
       return this.querySelectorAll("span");
     }
 
-    set selectedLogEvents(value) {
-      this.#selectedLogEvents = value;
+    set selectedLogEntries(value) {
+      this.#selectedLogEntries = value;
       this.updateCount();
       this.updateTable();
     }
 
     updateCount() {
-      this.count.innerHTML = this.selectedLogEvents.length;
-    }
-
-    get selectedLogEvents() {
-      return this.#selectedLogEvents;
+      this.count.innerHTML = this.#selectedLogEntries.length;
     }
 
     updateTable(event) {
@@ -65,7 +61,7 @@ defineCustomElement('ic-panel', (templateText) =>
       let key = select.options[select.selectedIndex].text;
       let tableBody = this.tableBody;
       this.removeAllChildren(tableBody);
-      let groups = Group.groupBy(this.selectedLogEvents, key, true);
+      let groups = Group.groupBy(this.#selectedLogEntries, key, true);
       this.render(groups, tableBody);
     }
 
@@ -102,20 +98,20 @@ defineCustomElement('ic-panel', (templateText) =>
     handleMapClick(e) {
       const entry = e.target.parentNode.entry;
       const id = entry.key;
-      const selectedMapLogEvents =
-        this.searchIcLogEventToMapLogEvent(id, entry.entries);
-      this.dispatchEvent(new SelectionEvent(selectedMapLogEvents));
+      const selectedMapLogEntries =
+        this.searchIcLogEntryToMapLogEntry(id, entry.entries);
+      this.dispatchEvent(new SelectionEvent(selectedMapLogEntries));
     }
 
-    searchIcLogEventToMapLogEvent(id, icLogEvents) {
-      // searches for mapLogEvents using the id, time
-      const selectedMapLogEventsSet = new Set();
-      for (const icLogEvent of icLogEvents) {
-        const time = icLogEvent.time;
-        const selectedMap = MapLogEvent.get(id, time);
-        selectedMapLogEventsSet.add(selectedMap);
+    searchIcLogEntryToMapLogEntry(id, icLogEntries) {
+      // searches for mapLogEntries using the id, time
+      const selectedMapLogEntriesSet = new Set();
+      for (const icLogEntry of icLogEntries) {
+        const time = icLogEntry.time;
+        const selectedMap = MapLogEntry.get(id, time);
+        selectedMapLogEntriesSet.add(selectedMap);
       }
-      return Array.from(selectedMapLogEventsSet);
+      return Array.from(selectedMapLogEntriesSet);
     }
 
     //TODO(zcankara) Handle in the processor for events with source positions.
@@ -208,9 +204,9 @@ defineCustomElement('ic-panel', (templateText) =>
     initGroupKeySelect() {
       let select = this.groupKey;
       select.options.length = 0;
-      for (let i in Processor.kProperties) {
+      for (const propertyName of IcLogEntry.propertyNames) {
         let option = document.createElement("option");
-        option.text = Processor.kProperties[i];
+        option.text = propertyName;
         select.add(option);
       }
     }

tools/system-analyzer/index.mjs

@@ -5,9 +5,9 @@
 
 import { SelectionEvent, FocusEvent, SelectTimeEvent } from "./events.mjs";
 import { State } from "./app-model.mjs";
-import { MapLogEvent } from "./log/map.mjs";
-import { IcLogEvent } from "./log/ic.mjs";
-import Processor from "./processor.mjs";
+import { MapLogEntry } from "./log/map.mjs";
+import { IcLogEntry } from "./log/ic.mjs";
+import { Processor } from "./processor.mjs";
 import { SourcePosition } from  "../profile.mjs";
 import { $ } from "./helper.mjs";
 import "./ic-panel.mjs";
@@ -54,9 +54,9 @@ class App {
     });
   }
   handleShowEntries(e) {
-    if (e.entries[0] instanceof MapLogEvent) {
+    if (e.entries[0] instanceof MapLogEntry) {
       this.showMapEntries(e.entries);
-    } else if (e.entries[0] instanceof IcLogEvent) {
+    } else if (e.entries[0] instanceof IcLogEntry) {
       this.showIcEntries(e.entries);
     } else if (e.entries[0] instanceof SourcePosition) {
       this.showSourcePositionEntries(e.entries);
@@ -65,12 +65,12 @@ class App {
     }
   }
   showMapEntries(entries) {
-    this.#state.selectedMapLogEvents = entries;
-    this.#view.mapPanel.selectedMapLogEvents = this.#state.selectedMapLogEvents;
+    this.#state.selectedMapLogEntries = entries;
+    this.#view.mapPanel.selectedMapLogEntries = this.#state.selectedMapLogEntries;
   }
   showIcEntries(entries) {
-    this.#state.selectedIcLogEvents = entries;
-    this.#view.icPanel.selectedLogEvents = this.#state.selectedIcLogEvents;
+    this.#state.selectedIcLogEntries = entries;
+    this.#view.icPanel.selectedLogEntries = this.#state.selectedIcLogEntries;
   }
   showSourcePositionEntries(entries) {
     //TODO(zcankara) Handle multiple source position selection events
@@ -81,12 +81,12 @@ class App {
     this.selectTimeRange(e.start, e.end);
   }
   handleShowEntryDetail(e) {
-    if (e.entry instanceof MapLogEvent) {
-      this.selectMapLogEvent(e.entry);
-    } else if (e.entry instanceof IcLogEvent) {
-      this.selectICLogEvent(e.entry);
+    if (e.entry instanceof MapLogEntry) {
+      this.selectMapLogEntry(e.entry);
+    } else if (e.entry instanceof IcLogEntry) {
+      this.selectICLogEntry(e.entry);
     } else if (e.entry instanceof SourcePosition) {
-      this.selectSourcePositionEvent(e.entry);
+      this.selectSourcePosition(e.entry);
     } else {
       throw new Error("Unknown selection type!");
     }
@@ -96,20 +96,20 @@ class App {
     this.#state.timeSelection.end = end;
     this.#state.icTimeline.selectTimeRange(start, end);
     this.#state.mapTimeline.selectTimeRange(start, end);
-    this.#view.mapPanel.selectedMapLogEvents =
+    this.#view.mapPanel.selectedMapLogEntries =
       this.#state.mapTimeline.selection;
-    this.#view.icPanel.selectedLogEvents = this.#state.icTimeline.selection;
+    this.#view.icPanel.selectedLogEntries = this.#state.icTimeline.selection;
   }
-  selectMapLogEvent(entry) {
+  selectMapLogEntry(entry) {
     this.#state.map = entry;
     this.#view.mapTrack.selectedEntry = entry;
     this.#view.mapPanel.map = entry;
   }
-  selectICLogEvent(entry) {
+  selectICLogEntry(entry) {
     this.#state.ic = entry;
-    this.#view.icPanel.selectedLogEvents = [entry];
+    this.#view.icPanel.selectedLogEntries = [entry];
   }
-  selectSourcePositionEvent(sourcePositions) {
+  selectSourcePosition(sourcePositions) {
     if (!sourcePositions.script) return;
     this.#view.sourcePanel.selectedSourcePositions = [sourcePositions];
   }
@@ -118,10 +118,12 @@ class App {
     this.restartApp();
     $("#container").className = "initial";
   }
+
   restartApp() {
     this.#state = new State();
     this.#navigation = new Navigation(this.#state, this.#view);
   }
+
   // Event log processing
   handleLoadTextProcessor(text) {
     let logProcessor = new Processor();

tools/system-analyzer/log/ic.mjs

 // 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 { Event } from './log.mjs';
+import { LogEntry } from './log.mjs';
 
-class IcLogEvent extends Event {
+export class IcLogEntry extends LogEntry {
   constructor(
     type, fn_file, time, line, column, key, oldState, newState, map, reason,
     script, additional) {
@@ -29,7 +29,6 @@ class IcLogEvent extends Event {
     this.script = script;
   }
 
-
   parseMapProperties(parts, offset) {
     let next = parts[++offset];
     if (!next.startsWith('dict')) return offset;
@@ -55,6 +54,18 @@ class IcLogEvent extends Event {
     this.file = parts[offset];
     return offset;
   }
-}
 
-export { IcLogEvent };
+ static get propertyNames() {
+   return [
+    'type',
+    'category',
+    'functionName',
+    'filePosition',
+    'state',
+    'key',
+    'map',
+    'reason',
+    'file'
+  ];
+ }
+}

tools/system-analyzer/log/log.mjs

@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-
-class Event {
+export class LogEntry {
   #time;
   #type;
   constructor(type, time) {
@@ -17,6 +16,8 @@ class Event {
   get type() {
     return this.#type;
   }
+  // Returns an Array of all possible #type values.
+  static get allTypes() {
+    throw new Error("Not implemented.");
+  }
 }
\ No newline at end of file
-
-export { Event };

tools/system-analyzer/log/map.mjs

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import { typeToColor } from '../helper.mjs';
-import { Event } from './log.mjs';
+import { LogEntry } from './log.mjs';
 
 // ===========================================================================
 // Map Log Events
@@ -34,11 +34,10 @@ define(Array.prototype, 'last', function () {
 // ===========================================================================
 // Map Log Events
 
-class MapLogEvent extends Event {
+class MapLogEntry extends LogEntry {
   edge = void 0;
   children = [];
   depth = 0;
-  // TODO(zcankara): Change this to private class field.
   #isDeprecated = false;
   deprecatedTargets = null;
   leftId = 0;
@@ -49,7 +48,7 @@ class MapLogEvent extends Event {
   constructor(id, time) {
     if (!time) throw new Error('Invalid time');
     super(id, time);
-    MapLogEvent.set(id, this);
+    MapLogEntry.set(id, this);
     this.id = id;
   }
 
@@ -172,7 +171,7 @@ class MapLogEvent extends Event {
   }
 }
 
-MapLogEvent.cache = new Map();
+MapLogEntry.cache = new Map();
 
 // ===========================================================================
 class Edge {
@@ -293,4 +292,4 @@ class Edge {
 }
 
 
-export { MapLogEvent, Edge, kChunkWidth, kChunkHeight };
+export { MapLogEntry, Edge, kChunkWidth, kChunkHeight };

tools/system-analyzer/map-panel.mjs

@@ -5,7 +5,7 @@ import "./stats-panel.mjs";
 import "./map-panel/map-details.mjs";
 import "./map-panel/map-transitions.mjs";
 import { FocusEvent } from './events.mjs';
-import { MapLogEvent } from "./log/map.mjs";
+import { MapLogEntry } from "./log/map.mjs";
 import { defineCustomElement, V8CustomElement } from './helper.mjs';
 
 defineCustomElement('map-panel', (templateText) =>
@@ -20,7 +20,7 @@ defineCustomElement('map-panel', (templateText) =>
     }
 
     handleUpdateMapDetails(e) {
-      if (e.entry instanceof MapLogEvent) {
+      if (e.entry instanceof MapLogEntry) {
         this.mapDetailsPanel.mapDetails = e.entry;
       }
     }
@@ -71,7 +71,7 @@ defineCustomElement('map-panel', (templateText) =>
       let searchBar = this.$('#searchBarInput');
       let searchBarInput = searchBar.value;
       //access the map from model cache
-      let selectedMap = MapLogEvent.get(parseInt(searchBarInput));
+      let selectedMap = MapLogEntry.get(parseInt(searchBarInput));
       if (selectedMap) {
         searchBar.className = "success";
       } else {
@@ -80,11 +80,11 @@ defineCustomElement('map-panel', (templateText) =>
       this.dispatchEvent(new FocusEvent(selectedMap));
     }
 
-    set selectedMapLogEvents(list) {
-      this.mapTransitionsPanel.selectedMapLogEvents = list;
+    set selectedMapLogEntries(list) {
+      this.mapTransitionsPanel.selectedMapLogEntries = list;
     }
-    get selectedMapLogEvents() {
-      return this.mapTransitionsPanel.selectedMapLogEvents;
+    get selectedMapLogEntries() {
+      return this.mapTransitionsPanel.selectedMapLogEntries;
     }
 
   });

tools/system-analyzer/map-panel/map-transitions.mjs

@@ -9,7 +9,7 @@ defineCustomElement(
   (templateText) =>
     class MapTransitions extends V8CustomElement {
       #map;
-      #selectedMapLogEvents;
+      #selectedMapLogEntries;
       constructor() {
         super(templateText);
         this.transitionView.addEventListener("mousemove", (e) =>
@@ -59,7 +59,7 @@ defineCustomElement(
         // Called when a map selected
         if (this.currentMap === this.#map) return;
         this.currentMap = this.#map;
-        this.selectedMapLogEvents = [this.#map];
+        this.selectedMapLogEntries = [this.#map];
         this.dispatchEvent(new FocusEvent(this.#map));
       }
 
@@ -67,18 +67,18 @@ defineCustomElement(
         // Timeline dbl click to show map transitions of selected maps
         this.transitionView.style.display = "none";
         this.removeAllChildren(this.transitionView);
-        this.selectedMapLogEvents.forEach((map) =>
+        this.selectedMapLogEntries.forEach((map) =>
           this.addMapAndParentTransitions(map));
         this.transitionView.style.display = "";
       }
 
-      set selectedMapLogEvents(list) {
-        this.#selectedMapLogEvents = list;
+      set selectedMapLogEntries(list) {
+        this.#selectedMapLogEntries = list;
         this.showMaps();
       }
 
-      get selectedMapLogEvents() {
-        return this.#selectedMapLogEvents;
+      get selectedMapLogEntries() {
+        return this.#selectedMapLogEntries;
       }
 
       addMapAndParentTransitions(map) {

tools/system-analyzer/processor.mjs

@@ -2,16 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { MapLogEvent, Edge } from "./log/map.mjs";
-import { IcLogEvent } from "./log/ic.mjs";
+import { MapLogEntry, Edge } from "./log/map.mjs";
+import { IcLogEntry } from "./log/ic.mjs";
 import { Timeline } from "./timeline.mjs";
 import { LogReader, parseString, parseVarArgs } from "../logreader.mjs";
 import { Profile } from "../profile.mjs";
 
 // ===========================================================================
 
-
-class Processor extends LogReader {
+export class Processor extends LogReader {
   #profile = new Profile();
   #mapTimeline = new Timeline();
   #icTimeline = new Timeline();
@@ -225,7 +224,7 @@ class Processor extends LogReader {
     let fileName = parts[1];
     let script = this.getScript(fileName);
     // TODO: Use SourcePosition here directly
-    let entry = new IcLogEvent(
+    let entry = new IcLogEntry(
       type, fnName, time, line, column, key, old_state, new_state, map,
       slow_reason, script);
     if (script) {
@@ -264,13 +263,16 @@ class Processor extends LogReader {
   processMap(type, time, from, to, pc, line, column, reason, name) {
     let time_ = parseInt(time);
     if (type === 'Deprecate') return this.deprecateMap(type, time_, from);
-    let from_ = this.getExistingMap(from, time_);
-    let to_ = this.getExistingMap(to, time_);
+    let from_ = this.getExistingMapEntry(from, time_);
+    let to_ = this.getExistingMapEntry(to, time_);
     // TODO: use SourcePosition directly.
     let edge = new Edge(type, name, reason, time, from_, to_);
     to_.filePosition = this.formatPC(pc, line, column);
     let fileName = this.processFileName(to_.filePosition);
+    // TODO: avoid undefined source positions.
+    if (fileName !== undefined) {
       to_.script = this.getScript(fileName);
+    }
     if (to_.script) {
       to_.sourcePosition = to_.script.addSourcePosition(line, column, to_)
     }
@@ -278,34 +280,34 @@ class Processor extends LogReader {
   }
 
   deprecateMap(type, time, id) {
-    this.getExistingMap(id, time).deprecate();
+    this.getExistingMapEntry(id, time).deprecate();
   }
 
   processMapCreate(time, id) {
     // map-create events might override existing maps if the addresses get
     // recycled. Hence we do not check for existing maps.
-    let map = this.createMap(id, time);
+    let map = this.createMapEntry(id, time);
   }
 
   processMapDetails(time, id, string) {
     // TODO(cbruni): fix initial map logging.
-    let map = this.getExistingMap(id, time);
+    let map = this.getExistingMapEntry(id, time);
     map.description = string;
   }
 
-  createMap(id, time) {
-    let map = new MapLogEvent(id, time);
+  createMapEntry(id, time) {
+    let map = new MapLogEntry(id, time);
     this.#mapTimeline.push(map);
     return map;
   }
 
-  getExistingMap(id, time) {
+  getExistingMapEntry(id, time) {
     if (id === '0x000000000000') return undefined;
-    let map = MapLogEvent.get(id, time);
+    let map = MapLogEntry.get(id, time);
     if (map === undefined) {
       console.error('No map details provided: id=' + id);
       // Manually patch in a map to continue running.
-      return this.createMap(id, time);
+      return this.createMapEntry(id, time);
     };
     return map;
   }
@@ -331,17 +333,3 @@ class Processor extends LogReader {
     return this.#profile.scripts_.filter(script => script !== undefined);
   }
 }
\ No newline at end of file
-
-Processor.kProperties = [
-  'type',
-  'category',
-  'functionName',
-  'filePosition',
-  'state',
-  'key',
-  'map',
-  'reason',
-  'file'
-];
-
-export { Processor as default };

tools/system-analyzer/source-panel.mjs

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 import { V8CustomElement, defineCustomElement } from "./helper.mjs";
 import { SelectionEvent, FocusEvent } from "./events.mjs";
-import { MapLogEvent } from "./log/map.mjs";
-import { IcLogEvent } from "./log/ic.mjs";
+import { MapLogEntry } from "./log/map.mjs";
+import { IcLogEntry } from "./log/ic.mjs";
 
 defineCustomElement(
   "source-panel",
@@ -26,7 +26,8 @@ defineCustomElement(
       }
       set script(script) {
         this.#script = script;
-        this.renderSourcePanel();
+        // TODO: fix undefined scripts
+        if (script !== undefined) this.renderSourcePanel();
       }
       set selectedSourcePositions(sourcePositions) {
         this.#selectedSourcePositions = sourcePositions;
@@ -67,22 +68,22 @@ defineCustomElement(
       }
 
       handleSourcePositionClick(e) {
-        let icLogEvents = [];
-        let mapLogEvents = [];
+        let icLogEntries = [];
+        let mapLogEntries = [];
         for (const entry of e.target.sourcePosition.entries) {
-          if (entry instanceof MapLogEvent) {
-            mapLogEvents.push(entry);
-          } else if (entry instanceof IcLogEvent) {
-            icLogEvents.push(entry);
+          if (entry instanceof MapLogEntry) {
+            mapLogEntries.push(entry);
+          } else if (entry instanceof IcLogEntry) {
+            icLogEntries.push(entry);
           }
         }
-        if (icLogEvents.length > 0 ) {
-          this.dispatchEvent(new SelectionEvent(icLogEvents));
-          this.dispatchEvent(new FocusEvent(icLogEvents[0]));
+        if (icLogEntries.length > 0 ) {
+          this.dispatchEvent(new SelectionEvent(icLogEntries));
+          this.dispatchEvent(new FocusEvent(icLogEntries[0]));
         }
-        if (mapLogEvents.length > 0) {
-          this.dispatchEvent(new SelectionEvent(mapLogEvents));
-          this.dispatchEvent(new FocusEvent(mapLogEvents[0]));
+        if (mapLogEntries.length > 0) {
+          this.dispatchEvent(new SelectionEvent(mapLogEntries));
+          this.dispatchEvent(new FocusEvent(mapLogEntries[0]));
         }
       }
 

tools/system-analyzer/timeline.mjs

@@ -3,31 +3,47 @@
 // found in the LICENSE file.
 
 class Timeline {
+  // Class:
+  #model;
+  // Array of #model instances:
   #values;
+  // Current selection, subset of #values:
   #selection;
   #uniqueTypes;
-  constructor() {
+
+  constructor(model) {
+    this.#model = model;
     this.#values = [];
     this.startTime = 0;
     this.endTime = 0;
   }
+
+  get model() {
+    return this.#model;
+  }
+
   get all() {
     return this.#values;
   }
+
   get selection() {
     return this.#selection;
   }
+
   set selection(value) {
     this.#selection = value;
   }
+
   selectTimeRange(start, end) {
     this.#selection = this.filter(
       e => e.time >= start && e.time <= end);
   }
+
   getChunks(windowSizeMs) {
     //TODO(zcankara) Fill this one
     return this.chunkSizes(windowSizeMs);
   }
+
   get values() {
     //TODO(zcankara) Not to break something delete later
     return this.#values;
@@ -87,24 +103,6 @@ class Timeline {
     return this.last().time - this.first().time;
   }
 
-  groupByTypes() {
-    this.#uniqueTypes = new Map();
-    for (const entry of this.all) {
-      if (!this.#uniqueTypes.has(entry.type)) {
-        this.#uniqueTypes.set(entry.type, [entry]);
-      } else {
-        this.#uniqueTypes.get(entry.type).push(entry);
-      }
-    }
-  }
-
-  get uniqueTypes() {
-    if (this.#uniqueTypes === undefined) {
-      this.groupByTypes();
-    }
-    return this.#uniqueTypes;
-  }
-
   forEachChunkSize(count, fn) {
     const increment = this.duration() / count;
     let currentTime = this.first().time + increment;
@@ -159,6 +157,19 @@ class Timeline {
     return min;
   }
 
+  initializeTypes() {
+    const types = new Map();
+    for (const entry of this.all) {
+      types.get(entry.type)?.push(entry) ?? types.set(entry.type, [entry])
+    }
+    this.#uniqueTypes = types;
+    return types;
+  }
+
+  get uniqueTypes() {
+    return this.#uniqueTypes ?? this.initializeTypes();
+  }
+
   depthHistogram() {
     return this.#values.histogram(each => each.depth);
   }

tools/system-analyzer/timeline/timeline-track.mjs

@@ -196,16 +196,6 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       let timelineLegend = this.timelineLegend;
       let timelineLegendContent = this.timelineLegendContent;
       this.removeAllChildren(timelineLegendContent);
-      let row = this.tr();
-      row.entries = this.data.all;
-      row.classList.add('clickable');
-      row.addEventListener('dblclick', e => this.handleEntryTypeDblClick(e));
-      row.appendChild(this.td(""));
-      let td = this.td("All");
-      row.appendChild(td);
-      row.appendChild(this.td(this.data.all.length));
-      row.appendChild(this.td("100%"));
-      timelineLegendContent.appendChild(row);
       let colorIterator = 0;
       this.#timeline.uniqueTypes.forEach((entries, type) => {
         let row = this.tr();
@@ -228,6 +218,12 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
         timelineLegendContent.appendChild(row);
         colorIterator += 1;
       });
+      // Add Total row.
+      let row = this.tr();
+      row.appendChild(this.td("All"));
+      row.appendChild(this.td(this.data.all.length));
+      row.appendChild(this.td("100%"));
+      timelineLegendContent.appendChild(row);
       timelineLegend.appendChild(timelineLegendContent);
     }