[tools] Improve system-analyzer

- Move map stats into a separate panel
- Don't handle selection events twice
- Simplify map-stats panel html

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

tools/system-analyzer/app-model.mjs

@@ -8,6 +8,7 @@ class State {
   _ic;
   _selectedMapLogEntries;
   _selectedIcLogEntries;
+  _selectedDeoptLogEntries;
   _selectedSourcePositions;
   _nofChunks;
   _chunks;

tools/system-analyzer/index.html

@@ -78,7 +78,7 @@ found in the LICENSE file. -->
   <script type="module">
     import { App } from './index.mjs';
 
-    globalThis.app = new App("#log-file-reader", "#map-panel",
+    globalThis.app = new App("#log-file-reader", "#map-panel", "#map-stats-panel",
       "#timeline-panel", "#ic-panel", "#map-track", "#ic-track", "#deopt-track",
       "#source-panel");
   </script>
@@ -97,6 +97,7 @@ found in the LICENSE file. -->
     </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>
       <source-panel id="source-panel"></source-panel>
     </div>

tools/system-analyzer/index.mjs

@@ -12,6 +12,7 @@ import { SourcePosition } from  "../profile.mjs";
 import { $ } from "./helper.mjs";
 import "./ic-panel.mjs";
 import "./timeline-panel.mjs";
+import "./stats-panel.mjs";
 import "./map-panel.mjs";
 import "./log-file-reader.mjs";
 import "./source-panel.mjs";
@@ -21,13 +22,14 @@ class App {
   _state;
   _view;
   _navigation;
-  constructor(fileReaderId, mapPanelId, timelinePanelId,
+  constructor(fileReaderId, mapPanelId, mapStatsPanelId, timelinePanelId,
     icPanelId, mapTrackId, icTrackId, deoptTrackId, sourcePanelId) {
     this._view = {
       __proto__: null,
       logFileReader: $(fileReaderId),
       icPanel: $(icPanelId),
       mapPanel: $(mapPanelId),
+      mapStatsPanel: $(mapStatsPanelId),
       timelinePanel: $(timelinePanelId),
       mapTrack: $(mapTrackId),
       icTrack: $(icTrackId),
@@ -65,15 +67,20 @@ class App {
     } else {
       throw new Error("Unknown selection type!");
     }
+    e.stopPropagation();
   }
   showMapEntries(entries) {
     this._state.selectedMapLogEntries = entries;
     this._view.mapPanel.selectedMapLogEntries = entries;
+    this._view.mapStatsPanel.selectedLogEntries = entries;
   }
   showIcEntries(entries) {
     this._state.selectedIcLogEntries = entries;
     this._view.icPanel.selectedLogEntries = entries;
   }
+  showDeoptEntries(entries) {
+    this._state.selectedDeoptLogEntries = entries;
+  }
   showSourcePositionEntries(entries) {
     //TODO: Handle multiple source position selection events
     this._view.sourcePanel.selectedSourcePositions = entries
@@ -81,7 +88,16 @@ class App {
 
   handleTimeRangeSelect(e) {
     this.selectTimeRange(e.start, e.end);
+    e.stopPropagation();
+  }
+
+  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);
   }
+
   handleShowEntryDetail(e) {
     if (e.entry instanceof MapLogEntry) {
       this.selectMapLogEntry(e.entry);
@@ -92,12 +108,7 @@ class App {
     } else {
       throw new Error("Unknown selection type!");
     }
-  }
-  selectTimeRange(start, end) {
-    this._state.selectTimeRange(start, end);
-    this._view.mapPanel.selectedMapLogEntries = 
-        this._state.mapTimeline.selection;
-    this._view.icPanel.selectedLogEntries = this._state.icTimeline.selection;
+    e.stopPropagation();
   }
   selectMapLogEntry(entry) {
     this._state.map = entry;
@@ -136,9 +147,10 @@ class App {
     this._state.icTimeline = icTimeline;
     this._state.deoptTimeline = deoptTimeline;
     // Transitions must be set before timeline for stats panel.
-    this._view.mapPanel.transitions = this._state.mapTimeline.transitions;
-    this._view.mapTrack.data = mapTimeline;
     this._view.mapPanel.timeline = mapTimeline;
+    this._view.mapTrack.data = mapTimeline;
+    this._view.mapStatsPanel.transitions = this._state.mapTimeline.transitions;
+    this._view.mapStatsPanel.timeline = mapTimeline;
     this._view.icPanel.timeline = icTimeline;
     this._view.icTrack.data = icTimeline;
     this._view.deoptTrack.data = deoptTimeline;

tools/system-analyzer/map-panel-template.html

@@ -10,7 +10,6 @@ found in the LICENSE file. -->
     width: 200px;
   }
 </style>
-<stats-panel id="stats-panel"></stats-panel>
 <div class="panel">
   <h2>Map Panel</h2>
   <map-transitions id="map-transitions"></map-transitions>

tools/system-analyzer/map-panel.mjs

@@ -25,10 +25,6 @@ defineCustomElement('map-panel', (templateText) =>
       }
     }
 
-    get statsPanel() {
-      return this.$('#stats-panel');
-    }
-
     get mapTransitionsPanel() {
       return this.$('#map-transitions');
     }
@@ -49,17 +45,8 @@ defineCustomElement('map-panel', (templateText) =>
       return this.mapDetailsPanel.mapDetails;
     }
 
-    // send a timeline to the stats-panel
-    set timeline(value) {
-      console.assert(value !== undefined, "timeline undefined!");
-      this.statsPanel.timeline = value;
-      this.statsPanel.update();
-    }
-    get transitions() {
-      return this.statsPanel.transitions;
-    }
-    set transitions(value) {
-      this.statsPanel.transitions = value;
+    set timeline(timeline) {
+      this._timeline = timeline;
     }
 
     set map(value) {

tools/system-analyzer/stats-panel-template.html

@@ -49,8 +49,7 @@ found in the LICENSE file. -->
   }
 </style>
 <div class="panel">
-  <h2>Stats Panel</h2>
-  <h3>Stats</h3>
+  <h2>Map Stats</h2>
   <section id="stats">
   </section>
 </div>

tools/system-analyzer/stats-panel.mjs

@@ -10,6 +10,7 @@ defineCustomElement(
     class StatsPanel extends V8CustomElement {
       _timeline;
       _transitions;
+      _selectedLogEntries;
       constructor() {
         super(templateText);
       }
@@ -18,15 +19,20 @@ defineCustomElement(
         return this.$("#stats");
       }
 
-      set timeline(value) {
-        //TODO(zcankara) Trigger update
-        this._timeline = value;
+      set timeline(timeline) {
+        this._timeline = timeline;
+        this.selectedLogEntries = timeline.all
       }
 
       get timeline() {
         return this._timeline;
       }
 
+      set selectedLogEntries(entries) {
+        this._selectedLogEntries = entries;
+        this.update();
+      }
+
       set transitions(value) {
         this._transitions = value;
       }
@@ -37,7 +43,7 @@ defineCustomElement(
 
       filterUniqueTransitions(filter) {
         // Returns a list of Maps whose parent is not in the list.
-        return this.timeline.filter((map) => {
+        return this._selectedLogEntries.filter((map) => {
           if (filter(map) === false) return false;
           let parent = map.parent();
           if (parent === undefined) return true;
@@ -84,7 +90,7 @@ defineCustomElement(
           "<thead><tr><td>Color</td><td>Type</td><td>Count</td>" +
           "<td>Percent</td></tr></thead>";
         let name, filter;
-        let total = this.timeline.size();
+        let total = this._selectedLogEntries.length;
         pairs.forEach(([name, color, filter]) => {
           let row = this.tr();
           if (color !== null) {
@@ -102,7 +108,7 @@ defineCustomElement(
             this.dispatchEvent(new SelectionEvent(node.maps));
           };
           row.appendChild(this.td(name));
-          let count = this.timeline.count(filter);
+          let count = this.count(filter);
           row.appendChild(this.td(count));
           let percent = Math.round((count / total) * 1000) / 10;
           row.appendChild(this.td(percent.toFixed(1) + "%"));
@@ -111,11 +117,19 @@ defineCustomElement(
         this.stats.appendChild(tableNode);
       }
 
+      count(filter) {
+        let count = 0;
+        for (const map of this._selectedLogEntries) {
+          if (filter(map)) count++;
+        }
+        return count;
+      }
+
       updateNamedTransitionsStats() {
         let tableNode = this.table("transitionTable");
         let nameMapPairs = Array.from(this.transitions.entries());
         tableNode.innerHTML =
-          "<thead><tr><td>Propery Name</td><td>#</td></tr></thead>";
+          "<thead><tr><td>Count</td><td>Propery Name</td></tr></thead>";
         nameMapPairs
           .sort((a, b) => b[1].length - a[1].length)
           .forEach(([name, maps]) => {
@@ -129,8 +143,8 @@ defineCustomElement(
                 )
               )
             );
-            row.appendChild(this.td(name));
             row.appendChild(this.td(maps.length));
+            row.appendChild(this.td(name));
             tableNode.appendChild(row);
           });
         this.stats.appendChild(tableNode);