[object-stats] Enable ungrouping in visualizer

No-try: true
Bug: v8:7266
Change-Id: I981ac5b4be6117bcc46383d033d639cc3b30b617
Reviewed-on: https://chromium-review.googlesource.com/867371Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Commit-Queue: Michael Lippautz <mlippautz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#50591}

tools/heap-stats/README.md

@@ -9,5 +9,5 @@ The tool consumes log files produced by d8 (or Chromium) by passing
 
 Hosting requires a web server, e.g.:
 
-    cd tools/heap/stats
+    cd tools/heap-stats
     python -m SimpleHTTPServer 8000

tools/heap-stats/categories.js

@@ -140,8 +140,8 @@ const CATEGORIES = new Map([
 
 // Maps category to description text that is shown in html.
 const CATEGORY_NAMES = new Map([
-  ['user', 'User'],
-  ['system', 'System'],
+  ['user', 'JS'],
+  ['system', 'Metadata'],
   ['code', 'Code'],
   ['unclassified', 'Unclassified'],
 ]);

tools/heap-stats/details-selection.html

@@ -39,18 +39,32 @@ span {
   margin-top: 10px;
 }
 </style>
-<label for="isolate-select">
-  Isolate
-</label>
-<select id="isolate-select">
-  <option>No data</option>
-</select>
-<label for="dataset-select">
-  Data set
-</label>
-<select id="dataset-select">
-  <option>No data</option>
-</select>
+<ul>
+  <li>
+    <label for="isolate-select">
+      Isolate
+    </label>
+    <select id="isolate-select">
+      <option>No data</option>
+    </select>
+  </li>
+  <li>
+    <label for="dataset-select">
+      Data set
+    </label>
+    <select id="dataset-select">
+      <option>No data</option>
+    </select>
+  </li>
+  <li>
+    <input type="checkbox" id="merge-categories" checked=checked />
+    <label for="merge-categories">
+      Merge categories
+    </label>
+  </li>
+</ul>
+
+
 <div id="categories"></div>
 </template>
 <script type="text/javascript" src="categories.js"></script>

tools/heap-stats/details-selection.js

@@ -17,6 +17,8 @@ class DetailsSelection extends HTMLElement {
         'change', e => this.handleIsolateChange(e));
     this.datasetSelect.addEventListener(
         'change', e => this.notifySelectionChanged(e));
+    this.$('#merge-categories')
+        .addEventListener('change', e => this.notifySelectionChanged(e));
   }
 
   connectedCallback() {
@@ -90,11 +92,15 @@ class DetailsSelection extends HTMLElement {
 
   notifySelectionChanged(e) {
     if (!this.selection.isolate) return;
+
+    this.selection.categories = {};
     for (let category of CATEGORIES.keys()) {
-      this.selection.categories[category] = this.selectedInCategory(category);
+      const selected = this.selectedInCategory(category);
+      if (selected.length > 0) this.selection.categories[category] = selected;
     }
     this.selection.category_names = CATEGORY_NAMES;
     this.selection.data_set = this.datasetSelect.value;
+    this.selection.merge_categories = this.$('#merge-categories').checked;
     this.dispatchEvent(new CustomEvent(
         'change', {bubbles: true, composed: true, detail: this.selection}));
   }

tools/heap-stats/global-timeline.js

@@ -18,6 +18,10 @@ class GlobalTimeline extends HTMLElement {
     shadowRoot.appendChild(global_timeline_template.content.cloneNode(true));
   }
 
+  $(id) {
+    return this.shadowRoot.querySelector(id);
+  }
+
   set data(value) {
     this._data = value;
     this.stateChanged();
@@ -44,31 +48,59 @@ class GlobalTimeline extends HTMLElement {
     if (this.isValid()) this.drawChart();
   }
 
-  drawChart() {
-    console.assert(this.data, 'invalid data');
-    console.assert(this.selection, 'invalid selection');
-
+  getCategoryData() {
     const categories = Object.keys(this.selection.categories)
                            .map(k => this.selection.category_names.get(k));
     const labels = ['Time', ...categories];
     const chart_data = [labels];
     const isolate_data = this.data[this.selection.isolate];
-    for (let k of Object.keys(isolate_data.gcs)) {
-      const gc_data = isolate_data.gcs[k];
+    Object.keys(isolate_data.gcs).forEach(gc_key => {
+      const gc_data = isolate_data.gcs[gc_key];
       const data_set = gc_data[this.selection.data_set].instance_type_data;
       const data = [];
       data.push(gc_data.time);
-      for (let [category, instance_types] of Object.entries(
-               this.selection.categories)) {
-        let overall = 0;
-        for (let instance_type of instance_types) {
-          overall += data_set[instance_type].overall;
-        }
-        data.push(overall / KB);
-      }
+      Object.values(this.selection.categories).forEach(instance_types => {
+        data.push(
+            instance_types
+                .map(instance_type => {
+                  return data_set[instance_type].overall;
+                })
+                .reduce((accu, current) => accu + current, 0) /
+            KB);
+      });
       chart_data.push(data);
-    }
+    });
+    return chart_data;
+  }
+
+  getInstanceTypeData() {
+    const categories = Object.keys(this.selection.categories);
+    const instance_types =
+        Object.values(this.selection.categories)
+            .reduce((accu, current) => accu.concat(current), []);
+    const labels = ['Time', ...instance_types];
+    const chart_data = [labels];
+    const isolate_data = this.data[this.selection.isolate];
+    Object.keys(isolate_data.gcs).forEach(gc_key => {
+      const gc_data = isolate_data.gcs[gc_key];
+      const data_set = gc_data[this.selection.data_set].instance_type_data;
+      const data = [];
+      data.push(gc_data.time);
+      instance_types.forEach(instance_type => {
+        data.push(data_set[instance_type].overall / KB);
+      });
+      chart_data.push(data);
+    });
+    return chart_data;
+  }
+
+  drawChart() {
+    console.assert(this.data, 'invalid data');
+    console.assert(this.selection, 'invalid selection');
 
+    const chart_data = (this.selection.merge_categories) ?
+        this.getCategoryData() :
+        this.getInstanceTypeData();
     const data = google.visualization.arrayToDataTable(chart_data);
     const options = {
       isStacked: true,
@@ -76,14 +108,14 @@ class GlobalTimeline extends HTMLElement {
         title: 'Time [ms]',
       },
       vAxis: {title: 'Memory consumption [KBytes]'},
-      chartArea: {width: '85%', height: '80%'},
+      chartArea: {width: '85%', height: '70%'},
       legend: {position: 'top', maxLines: '1'},
       pointsVisible: true,
       pointSize: 5,
+      explorer: {},
     };
-    const chart = new google.visualization.AreaChart(
-        this.shadowRoot.querySelector('#chart'));
-    this.shadowRoot.querySelector('#container').style.display = 'block';
+    const chart = new google.visualization.AreaChart(this.$('#chart'));
+    this.$('#container').style.display = 'block';
     chart.draw(data, google.charts.Line.convertOptions(options));
   }
 }