1 files changed, 71 insertions, 81 deletions

diff --git a/deps/v8/tools/system-analyzer/stats-panel.mjs b/deps/v8/tools/system-analyzer/stats-panel.mjs
index 9e637015bc..dd0ac78489 100644
--- a/deps/v8/tools/system-analyzer/stats-panel.mjs
+++ b/deps/v8/tools/system-analyzer/stats-panel.mjs
@@ -1,43 +1,40 @@
 // 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 { V8CustomElement, defineCustomElement } from "./helper.mjs";
-import { SelectionEvent } from "./events.mjs";
+import {SelectionEvent} from './events.mjs';
+import {DOM, V8CustomElement} from './helper.mjs';
+import {delay, LazyTable} from './helper.mjs';
 
-defineCustomElement(
-  "stats-panel",
-  (templateText) =>
-    class StatsPanel extends V8CustomElement {
-      #timeline;
-      #transitions;
+DOM.defineCustomElement(
+    'stats-panel', (templateText) => class StatsPanel extends V8CustomElement {
+      _timeline;
+      _transitions;
+      _selectedLogEntries;
       constructor() {
         super(templateText);
       }
 
       get stats() {
-        return this.$("#stats");
+        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;
+        this._transitions = value;
       }
 
-      get transitions() {
-        return this.#transitions;
-      }
-
-      filterUniqueTransitions(filter) {
+      _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;
@@ -45,95 +42,88 @@ defineCustomElement(
         });
       }
 
-      update() {
-        this.removeAllChildren(this.stats);
-        this.updateGeneralStats();
-        this.updateNamedTransitionsStats();
+      _update() {
+        this._updateGeneralStats();
+        this._updateNamedTransitionsStats();
       }
 
-      updateGeneralStats() {
-        console.assert(this.#timeline !== undefined, "Timeline not set yet!");
+      _updateGeneralStats() {
+        console.assert(this._timeline !== undefined, 'Timeline not set yet!');
         let pairs = [
-          ["Total", null, (e) => true],
-          ["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()],
+          ['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",
+            'Replace Descriptors',
+            'red',
             (e) => e.edge && e.edge.isReplaceDescriptors(),
           ],
           [
-            "Copy as Prototype",
-            "red",
+            'Copy as Prototype',
+            'red',
             (e) => e.edge && e.edge.isCopyAsPrototype(),
           ],
           [
-            "Optimize as Prototype",
+            'Optimize as Prototype',
             null,
             (e) => e.edge && e.edge.isOptimizeAsPrototype(),
           ],
-          ["Deprecated", null, (e) => e.isDeprecated()],
-          ["Bootstrapped", "green", (e) => e.isBootstrapped()],
+          ['Deprecated', null, (e) => e.isDeprecated()],
+          ['Bootstrapped', 'green', (e) => e.isBootstrapped()],
+          ['Total', null, (e) => true],
         ];
 
-        let text = "";
-        let tableNode = this.table("transitionType");
-        tableNode.innerHTML =
-          "<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 tbody = document.createElement('tbody');
+        let total = this._selectedLogEntries.length;
         pairs.forEach(([name, color, filter]) => {
-          let row = this.tr();
+          let row = DOM.tr();
           if (color !== null) {
-            row.appendChild(this.td(this.div(["colorbox", color])));
+            row.appendChild(DOM.td(DOM.div(['colorbox', color])));
           } else {
-            row.appendChild(this.td(""));
+            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);
+              node.maps = this._filterUniqueTransitions(filter);
             }
             this.dispatchEvent(new SelectionEvent(node.maps));
           };
-          row.appendChild(this.td(name));
-          let count = this.timeline.count(filter);
-          row.appendChild(this.td(count));
+          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(this.td(percent.toFixed(1) + "%"));
-          tableNode.appendChild(row);
+          row.appendChild(DOM.td(percent.toFixed(1) + '%'));
+          tbody.appendChild(row);
         });
-        this.stats.appendChild(tableNode);
+        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 tableNode = this.table("transitionTable");
-        let nameMapPairs = Array.from(this.transitions.entries());
-        tableNode.innerHTML =
-          "<thead><tr><td>Propery Name</td><td>#</td></tr></thead>";
-        nameMapPairs
-          .sort((a, b) => b[1].length - a[1].length)
-          .forEach(([name, maps]) => {
-            let row = this.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(this.td(name));
-            row.appendChild(this.td(maps.length));
-            tableNode.appendChild(row);
-          });
-        this.stats.appendChild(tableNode);
+      _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;
+        });
       }
-    }
-);
+    });