feat: add labels to split graph

Author: connor4312

packages/vscode-js-profile-flame/src/realtime/baseMetric.ts

@@ -82,10 +82,15 @@ export abstract class Metric {
   public abstract format(metric: number): string;
 
   /**
-   * Returns th ename of the metric.
+   * Returns the name of the metric.
    */
   public abstract name(): string;
 
+  /**
+   * Returns a short label for the metric.
+   */
+  public abstract short(): string;
+
   /**
    * Adds a new metric to the internal series.
    */

packages/vscode-js-profile-flame/src/realtime/chart.css

@@ -87,10 +87,18 @@
   position: absolute;
 }
 
+.maxContainer.split .maxLabel {
+  display: inline;
+}
+
 .maxContainer.split .max::before {
   content: none !important;
 }
 
+.maxLabel {
+  display: none;
+}
+
 .max {
   display: inline;
 }

packages/vscode-js-profile-flame/src/realtime/chart.ts

@@ -77,6 +77,13 @@ export class Chart {
    * Update the chart metrics
    */
   public updateMetrics() {
+    const { allMetrics, enabledMetrics } = this.settings;
+
+    if (!this.hasAnyData) {
+      const enabled = enabledMetrics.filter(m => m.hasData());
+      this.settings.setEnabledMetrics(enabled.length ? enabled : [allMetrics[0], allMetrics[1]]);
+    }
+
     this.frameCanvas.updateMetrics();
 
     if (this.configOpen) {
@@ -182,8 +189,10 @@ export class Chart {
       val.parentElement?.removeChild(val);
     }
 
-    maxContainer.classList[this.settings.value.splitCharts ? 'add' : 'remove'](styles.split);
+    const split = this.settings.value.splitCharts;
+    maxContainer.classList[split ? 'add' : 'remove'](styles.split);
     labelList.innerHTML = '';
+    maxContainer.innerHTML = '';
     this.valElements = [];
 
     for (let i = 0; i < this.settings.enabledMetrics.length; i++) {
@@ -198,13 +207,19 @@ export class Chart {
       val.innerText = metric.format(metric.current);
       label.appendChild(val);
 
-      const max = document.createElement('div');
-      max.classList.add(styles.max, styles.primary);
-      max.innerText = metric.format(metric.maxY);
-      max.style.top = `${(i / this.settings.enabledMetrics.length) * 100}%`;
-      maxContainer.appendChild(max);
-
-      this.valElements.push([metric, { max, val }]);
+      const maxWrapper = document.createElement('div');
+      maxWrapper.classList.add(styles.max);
+      maxWrapper.style.top = `${(i / this.settings.enabledMetrics.length) * 100}%`;
+      const maxLabel = document.createElement('span');
+      maxWrapper.classList.add(styles.maxLabel);
+      maxLabel.innerText = `${metric.short()} `;
+      const maxValue = document.createElement('span');
+      maxValue.innerText = metric.format(metric.maxY);
+      maxWrapper.appendChild(maxLabel);
+      maxWrapper.appendChild(maxValue);
+      maxContainer.appendChild(maxWrapper);
+
+      this.valElements.push([metric, { max: maxValue, val }]);
     }
   }
 }

packages/vscode-js-profile-flame/src/realtime/metrics.ts

@@ -40,6 +40,10 @@ export class CpuMetric extends DerivativeMetric {
     return 'CPU Usage';
   }
 
+  public short(): string {
+    return 'CPU';
+  }
+
   protected recalcMax() {
     return 1;
   }
@@ -58,6 +62,10 @@ export class HeapMetric extends Metric {
     return wholeNumberFormat.format(metric) + 'B';
   }
 
+  public short(): string {
+    return 'Heap';
+  }
+
   public name(): string {
     return 'Heap Used';
   }
@@ -74,6 +82,10 @@ export class DOMNodes extends Metric {
     return wholeNumberFormat.format(metric);
   }
 
+  public short(): string {
+    return 'DOM Nodes';
+  }
+
   public name(): string {
     return 'DOM Nodes';
   }
@@ -90,6 +102,10 @@ export class LayoutCount extends DerivativeMetric {
     return wholeNumberFormat.format(metric);
   }
 
+  public short(): string {
+    return 'Relayouts';
+  }
+
   public name(): string {
     return 'DOM Relayouts / s';
   }
@@ -106,8 +122,12 @@ export class StyleRecalcs extends DerivativeMetric {
     return wholeNumberFormat.format(metric);
   }
 
+  public short(): string {
+    return 'Restyles';
+  }
+
   public name(): string {
-    return 'Style Recalculations / s';
+    return 'Style Recalcs / s';
   }
 }
 

packages/vscode-js-profile-flame/src/realtime/settings.ts

@@ -64,19 +64,30 @@ export class Settings {
     return () => (this.changeListeners = this.changeListeners.filter(c => c !== listener));
   }
 
-  public toggleMetric(metric: Metric) {
-    const enabledMetrics = this.enabledMetrics.includes(metric)
-      ? this.enabledMetrics.filter(e => e !== metric)
-      : this.enabledMetrics.concat(metric);
+  public setEnabledMetrics(metrics: ReadonlyArray<Metric>) {
+    if (
+      metrics.length === this.enabledMetrics.length &&
+      !metrics.some(m => !this.enabledMetrics.includes(m))
+    ) {
+      return;
+    }
 
     this.api.postMessage({
       type: MessageType.SetEnabledMetrics,
-      keys: enabledMetrics.map(m => this.allMetrics.indexOf(m)),
+      keys: metrics.map(m => this.allMetrics.indexOf(m)),
     });
 
     this.fireChange();
   }
 
+  public toggleMetric(metric: Metric) {
+    const enabledMetrics = this.enabledMetrics.includes(metric)
+      ? this.enabledMetrics.filter(e => e !== metric)
+      : this.enabledMetrics.concat(metric);
+
+    this.setEnabledMetrics(enabledMetrics);
+  }
+
   public update(newValue: ISettings) {
     this.value = newValue;
     this.steps = getSteps(newValue);