[tools][system-analyzer] Find Unique IC/Map types and improve Map panel

This CL enables showing map details of the selected map coming from
FocusEvent. It also improves UI experience of selecting a map from
map transitions, highlighting selected map.

Additionally, stores information about unique map/IC events in model
for the timeline-track legend.

Bug: v8:10644
Change-Id: Ieb8a2ac0bf1af282d55bce18130192d7178538da
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2387564Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Reviewed-by: Sathya Gunasekaran  <gsathya@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#69673}

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

@@ -47,6 +47,7 @@ defineCustomElement(
 
       selectMap(map) {
         this.currentMap = map;
+        this.showMap();
         this.dispatchEvent(new FocusEvent(map));
       }
 

tools/system-analyzer/timeline.mjs

@@ -5,6 +5,7 @@
 class Timeline {
   #values;
   #selection;
+  #uniqueTypes;
   constructor() {
     this.#values = [];
     this.startTime = 0;
@@ -86,6 +87,24 @@ 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;

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

@@ -159,7 +159,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       this.#timeline = value;
       this.updateChunks();
       this.updateTimeline();
-      this.updateLegend();
+      this.renderLegend();
     }
 
     get data() {
@@ -191,20 +191,8 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
     set scrollLeft(offset) {
       this.timeline.scrollLeft = offset;
     }
-    //TODO(zcankara) Carry to the Model, nothing UI related
-    updateLegend() {
-      const uniqueTypes = new Map();
-      for (const entry of this.data.all) {
-        if (!uniqueTypes.has(entry.type)) {
-          uniqueTypes.set(entry.type, [entry]);
-        } else {
-          uniqueTypes.get(entry.type).push(entry);
-        }
-      }
-      this.renderLegend(uniqueTypes);
-    }
 
-    renderLegend(uniqueTypes) {
+    renderLegend() {
       let timelineLegend = this.timelineLegend;
       let timelineLegendContent = this.timelineLegendContent;
       this.removeAllChildren(timelineLegendContent);
@@ -219,7 +207,7 @@ defineCustomElement('./timeline/timeline-track', (templateText) =>
       row.appendChild(this.td("100%"));
       timelineLegendContent.appendChild(row);
       let colorIterator = 0;
-      uniqueTypes.forEach((entries, type) => {
+      this.#timeline.uniqueTypes.forEach((entries, type) => {
         let row = this.tr();
         row.entries = entries;
         row.classList.add('clickable');