feat: add split view for realtime graph

Author: connor4312

packages/vscode-js-profile-flame/package.json

@@ -52,6 +52,11 @@
           "command": "vscode-js-profile-flame.setRealtimeCharts",
           "when": "view == vscode-js-profile-flame.realtime",
           "group": "navigation@1"
+        },
+        {
+          "command": "vscode-js-profile-flame.toggleSplitCharts",
+          "when": "view == vscode-js-profile-flame.realtime",
+          "group": "navigation@1"
         }
       ]
     },
@@ -61,6 +66,12 @@
         "category": "Debug",
         "title": "Toggle Realtime Performance Charts",
         "icon": "$(gear)"
+      },
+      {
+        "command": "vscode-js-profile-flame.toggleSplitCharts",
+        "category": "Debug",
+        "title": "Toggle realtime split charts",
+        "icon": "$(split-vertical)"
       }
     ],
     "configuration": [

packages/vscode-js-profile-flame/src/extension.ts

@@ -50,6 +50,7 @@ export function activate(context: vscode.ExtensionContext) {
       const settings = readRealtimeSettings(context);
       const quickpick = vscode.window.createQuickPick<{ label: string; index: number }>();
 
+      quickpick.title = 'Toggle visible performance charts';
       quickpick.canSelectMany = true;
       quickpick.items = metrics.map((metric, i) => ({
         label: metric.name(),
@@ -74,6 +75,11 @@ export function activate(context: vscode.ExtensionContext) {
 
       realtimeTracker.setEnabledMetrics(chosen);
     }),
+
+    vscode.commands.registerCommand('vscode-js-profile-flame.toggleSplitCharts', () => {
+      const settings = readRealtimeSettings(context);
+      realtimeTracker.setSplitCharts(!settings.splitCharts);
+    }),
   );
 }
 

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

@@ -79,6 +79,18 @@
   font-size: 0.8em;
 }
 
+.maxContainer.split {
+  position: static;
+}
+
+.maxContainer.split .max {
+  position: absolute;
+}
+
+.maxContainer.split .max::before {
+  content: none !important;
+}
+
 .max {
   display: inline;
 }

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

@@ -182,10 +182,12 @@ export class Chart {
       val.parentElement?.removeChild(val);
     }
 
+    maxContainer.classList[this.settings.value.splitCharts ? 'add' : 'remove'](styles.split);
     labelList.innerHTML = '';
     this.valElements = [];
 
-    for (const metric of this.settings.enabledMetrics) {
+    for (let i = 0; i < this.settings.enabledMetrics.length; i++) {
+      const metric = this.settings.enabledMetrics[i];
       const label = document.createElement('span');
       label.style.setProperty('--metric-color', this.settings.metricColor(metric));
       label.classList.add(styles.primary);
@@ -199,6 +201,7 @@ export class Chart {
       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 }]);

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

@@ -8,7 +8,9 @@ import { Canvas } from './canvas';
 export const enum Sizing {
   LabelHeight = 18,
   RulerWidth = 1,
+  LineWidth = 1,
   Easing = 200,
+  SplitSpacing = 3,
 }
 
 const rulers = 4;
@@ -18,6 +20,7 @@ export class FrameCanvas extends Canvas {
   private paths: [Path2D, string][] = [];
   private ease?: { raf: number; dx: number };
   private rmSettingListener = this.settings.onChange(() => this.redraw());
+  private metricRanges = this.getMetricYRanges();
 
   /**
    * Redraws the max values
@@ -29,10 +32,7 @@ export class FrameCanvas extends Canvas {
       easeLength += this.ease.dx;
     }
 
-    this.paths = this.settings.enabledMetrics.map(metric => [
-      this.createMetricPath(metric),
-      this.settings.metricColor(metric),
-    ]);
+    this.paths = this.createMetricPaths();
 
     if (!shouldEase) {
       this.drawGraph();
@@ -74,6 +74,7 @@ export class FrameCanvas extends Canvas {
 
   protected redraw() {
     this.rulers = this.createRulers();
+    this.metricRanges = this.getMetricYRanges();
     this.updateMetrics(false);
   }
 
@@ -107,43 +108,68 @@ export class FrameCanvas extends Canvas {
 
   private createRulers() {
     const path = new Path2D();
-    const { width, height } = this;
-    const step = (height - Sizing.RulerWidth) / rulers;
-
-    let y = step;
-    for (let i = 0; i < rulers; i++) {
-      const targetY = Math.floor(y) + Sizing.RulerWidth / 2;
-      path.moveTo(0, targetY);
-      path.lineTo(width, targetY);
-      y += step;
+
+    const ranges = this.settings.value.splitCharts ? this.getMetricYRanges() : [[0, this.height]];
+    for (const [y1, y2] of ranges) {
+      const step = (y2 - y1) / rulers;
+      let y = y1 + step;
+      for (let i = 0; i < rulers; i++) {
+        const targetY = Math.floor(y) - Sizing.RulerWidth / 2;
+        path.moveTo(0, targetY);
+        path.lineTo(this.width, targetY);
+        y += step;
+      }
     }
 
     return path;
   }
 
-  private createMetricPath({ maxY, metrics }: Metric) {
-    const { width, height } = this;
+  private getMetricYRanges(): [number, number][] {
+    const metrics = this.settings.enabledMetrics;
+    if (!this.settings.value.splitCharts) {
+      return metrics.map(() => [0, this.height]);
+    }
+
+    const yStep = this.height / metrics.length;
+    return metrics.map((_, i) => [
+      Math.ceil(yStep * i + (i > 0 ? Sizing.SplitSpacing / 2 : 0)),
+      Math.floor(yStep * (i + 1) - (i < metrics.length - 1 ? Sizing.SplitSpacing / 2 : 0)),
+    ]);
+  }
+
+  private createMetricPaths(): [Path2D, string][] {
+    return this.settings.enabledMetrics.map((metric, i) => [
+      this.createMetricPath(metric, this.metricRanges[i][0], this.metricRanges[i][1]),
+      this.settings.metricColor(metric),
+    ]);
+  }
+
+  private createMetricPath({ maxY, metrics }: Metric, y1: number, y2: number) {
+    const width = this.width;
+    const lineBaseY = y2 - Sizing.LineWidth / 2;
     const stepSize = width / this.settings.steps;
     const path = new Path2D();
 
     if (metrics.length === 0) {
-      path.moveTo(0, height - 1);
-      path.lineTo(width, height - 1);
+      path.moveTo(0, lineBaseY);
+      path.lineTo(width, lineBaseY);
       return path;
     }
 
     let x = width;
-    path.moveTo(x, height * (1 - metrics[metrics.length - 1] / maxY));
+    path.moveTo(x, getY(y1, lineBaseY, 1 - metrics[metrics.length - 1] / maxY));
 
     for (let i = metrics.length - 2; i >= 0; i--) {
       x -= stepSize;
-      path.lineTo(x, height * (1 - metrics[i] / maxY));
+      path.lineTo(x, getY(y1, lineBaseY, 1 - metrics[i] / maxY));
     }
 
-    path.lineTo(x - stepSize, height - 1);
-    path.lineTo(-stepSize, height - 1);
-    path.lineTo(-stepSize, height + 2);
-    path.lineTo(width, height + 2);
+    path.lineTo(x - stepSize, lineBaseY);
+    path.lineTo(-stepSize, lineBaseY);
+    path.lineTo(width, lineBaseY);
     return path;
   }
 }
+
+const getY = (y1: number, y2: number, value: number) =>
+  y1 + (y2 - y1) * Math.max(0, Math.min(1, value));

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

@@ -4,6 +4,7 @@
 
 export interface ISettings {
   enabledMetrics: number[];
+  splitCharts: boolean;
   viewDuration: number;
   pollInterval: number;
   zoomLevel: number;

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

@@ -18,6 +18,7 @@ export class Settings {
     viewDuration: 30_000,
     zoomLevel: 0,
     enabledMetrics: [],
+    splitCharts: false,
     easing: true,
   };
 

packages/vscode-js-profile-flame/src/realtimeSessionTracker.ts

@@ -21,6 +21,7 @@ export const readRealtimeSettings = (context: vscode.ExtensionContext): ISetting
       config.get(Config.Easing) ??
       vscode.window.activeColorTheme.kind !== vscode.ColorThemeKind.HighContrast,
     enabledMetrics: context.workspaceState.get(enabledMetricsKey) ?? [0, 1],
+    splitCharts: context.workspaceState.get(splitChartsKey) ?? false,
     pollInterval: config.get(Config.PollInterval, 1000),
     viewDuration: config.get(Config.ViewDuration, 30_000),
     zoomLevel: config.get('window.zoomLevel', 0),
@@ -34,6 +35,7 @@ interface ISessionData {
 }
 
 const enabledMetricsKey = 'enabledMetrics';
+const splitChartsKey = 'splitCharts';
 
 /**
  * Tracks ongoing debug sessions and webviews. While there's any visible
@@ -63,6 +65,15 @@ export class RealtimeSessionTracker {
     this.updateSettings();
   }
 
+  /**
+   * Configures whether multiple metrics are shown on the same chart, or
+   * different charts.
+   */
+  public setSplitCharts(split: boolean) {
+    this.context.workspaceState.update(splitChartsKey, split);
+    this.updateSettings();
+  }
+
   /**
    * Adds a webview to the session tracking.
    */
@@ -193,15 +204,15 @@ export class RealtimeSessionTracker {
     webview.postMessage(this.getSettingsUpdate());
 
     const data = this.displayedSession && this.sessionData.get(this.displayedSession);
-    if (!data) {
-      return;
+    if (data) {
+      const metrics: ToWebViewMessage = {
+        type: MessageType.ApplyData,
+        data: data.metrics.map(m => m.metrics),
+      };
+      webview.postMessage(metrics);
+    } else {
+      this.onDidChangeActiveSession(vscode.debug.activeDebugSession);
     }
-
-    const metrics: ToWebViewMessage = {
-      type: MessageType.ApplyData,
-      data: data.metrics.map(m => m.metrics),
-    };
-    webview.postMessage(metrics);
   }
 
   private getSettingsUpdate() {