fix: show the hovered value in the configurator as well

Fixes microsoft/vscode#107833

Author: connor4312

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

@@ -86,12 +86,9 @@ export class Chart {
       this.settings.setEnabledMetrics(enabled.length ? enabled : [allMetrics[0], allMetrics[1]]);
     }
 
+    this.configurator.updateMetrics();
     this.frameCanvas.updateMetrics();
 
-    if (this.configOpen) {
-      this.configurator.updateMetrics();
-    }
-
     this.updateMaxElements();
     if (this.frameCanvas.hoveredIndex === undefined) {
       this.updateValueElements();
@@ -103,11 +100,12 @@ export class Chart {
   private updateValueElements() {
     for (const [metric, { val }] of this.valElements) {
       if (this.frameCanvas.hoveredIndex) {
-        val.innerText = metric.format(
-          metric.valueAt(this.frameCanvas.hoveredIndex) ?? metric.current,
-        );
+        const value = metric.valueAt(this.frameCanvas.hoveredIndex) ?? metric.current;
+        val.innerText = metric.format(value);
+        this.configurator.updateMetric(metric, value);
       } else {
         val.innerText = metric.format(metric.current);
+        this.configurator.updateMetric(metric, metric.current);
       }
     }
   }
@@ -134,7 +132,6 @@ export class Chart {
 
     this.configOpen = isOpen;
     if (isOpen) {
-      this.configurator.updateMetrics();
       this.elem.appendChild(this.configurator.elem);
       this.elem.removeChild(this.elements.labelList);
       document.body.style.overflowY = 'auto';

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

@@ -33,12 +33,14 @@ window.addEventListener('message', evt => {
         settings.allMetrics[i].setData(data.data[i]);
       }
       chart.updateMetrics();
+      updateSize();
       break;
     case MessageType.ClearData:
       for (const metric of settings.allMetrics) {
         metric.setData([]);
       }
       chart.updateMetrics();
+      updateSize();
       break;
     default:
     // ignored

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

@@ -23,7 +23,8 @@
   border: 2px solid var(--vscode-debugIcon-breakpointUnverifiedForeground);
 }
 
-.metric.available {
+.metric.available,
+.metric.enabled {
   display: flex;
 }
 

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

@@ -7,13 +7,15 @@ import styles from './configurator.css';
 import { Settings } from './settings';
 
 export class Configurator {
-  private metrics: {
-    metric: Metric;
-    element: HTMLElement;
-    value: HTMLElement;
-    enabled: boolean;
-    available: boolean;
-  }[] = [];
+  private metrics = new Map<
+    Metric,
+    {
+      element: HTMLElement;
+      value: HTMLElement;
+      enabled: boolean;
+      available: boolean;
+    }
+  >();
 
   public elem = document.createElement('div');
 
@@ -36,12 +38,12 @@ export class Configurator {
       value.classList.add(styles.value);
       element.appendChild(value);
 
-      this.metrics.push({ metric, element, enabled: false, available: false, value });
+      this.metrics.set(metric, { element, enabled: false, available: false, value });
       this.elem.appendChild(element);
     }
 
     // move inactive items to the bottom always
-    for (const { element, enabled } of this.metrics) {
+    for (const { element, enabled } of this.metrics.values()) {
       if (!enabled) {
         this.elem.appendChild(element);
       }
@@ -54,23 +56,38 @@ export class Configurator {
    * Updates the configurator state for the metrics.
    */
   public updateMetrics() {
-    for (const m of this.metrics) {
-      if (m.metric.hasData() !== m.available) {
-        m.available = m.metric.hasData();
-        m.element.classList[m.metric.hasData() ? 'add' : 'remove'](styles.available);
+    for (const [metric, m] of this.metrics) {
+      if (metric.hasData() !== m.available) {
+        m.available = metric.hasData();
+        m.element.classList[metric.hasData() ? 'add' : 'remove'](styles.available);
       }
+    }
+  }
 
-      if (m.available) {
-        m.value.innerText = m.metric.format(m.metric.current);
-      }
+  /**
+   * Updates the value displayed for the given metric.
+   */
+  public updateMetric(metric: Metric, currentValue: number) {
+    const m = this.metrics.get(metric);
+    if (!m) {
+      return;
+    }
+
+    if (metric.hasData() !== m.available) {
+      m.available = metric.hasData();
+      m.element.classList[metric.hasData() ? 'add' : 'remove'](styles.available);
+    }
+
+    if (m.available) {
+      m.value.innerText = metric.format(currentValue);
     }
   }
 
   private applySettings() {
-    for (const m of this.metrics) {
-      m.enabled = this.settings.enabledMetrics.includes(m.metric);
+    for (const [metric, m] of this.metrics.entries()) {
+      m.enabled = this.settings.enabledMetrics.includes(metric);
       m.element.classList[m.enabled ? 'add' : 'remove'](styles.enabled);
-      m.element.style.setProperty('--metric-color', this.settings.metricColor(m.metric));
+      m.element.style.setProperty('--metric-color', this.settings.metricColor(metric));
     }
   }
 }