Add CounterDisplayConfig to counters in the processed profile format

Make counters self-describing in terms of rendering by adding `display`
field of `CounterDisplayConfig` type. The value is derived from a
counter's `category` and `name` fields. This data is sufficient to
understand how a counter should be rendered allowing us to remove
hardcoded logic for each counter.

This is the first PR for issue #5752.

Author: fatadel

docs-developer/CHANGELOG-formats.md

@@ -6,6 +6,12 @@ Note that this is not an exhaustive list. Processed profile format upgraders can
 
 ## Processed profile format
 
+### Version 62
+
+A new `display` field of type `CounterDisplayConfig` was added to `RawCounter`.
+This metadata makes counters self-describing in terms of how they are rendered in the UI.
+For existing profiles, the display config is derived from the counter's `category` and `name`.
+
 ### Version 61
 
 The `SourceTable` in `profile.shared.sources` was updated:

src/app-logic/constants.ts

@@ -12,7 +12,7 @@ export const GECKO_PROFILE_VERSION = 34;
 // The current version of the "processed" profile format.
 // Please don't forget to update the processed profile format changelog in
 // `docs-developer/CHANGELOG-formats.md`.
-export const PROCESSED_PROFILE_VERSION = 61;
+export const PROCESSED_PROFILE_VERSION = 62;
 
 // The following are the margin sizes for the left and right of the timeline. Independent
 // components need to share these values.

src/profile-logic/process-profile.ts

@@ -97,6 +97,7 @@ import type {
   GeckoSourceTable,
   IndexIntoCategoryList,
   IndexIntoFrameTable,
+  CounterDisplayConfig,
 } from 'firefox-profiler/types';
 import { decompress, isGzip } from 'firefox-profiler/utils/gz';
 
@@ -972,6 +973,61 @@ function _processSamples(
   return samples;
 }
 
+/**
+ * Derive a CounterDisplayConfig from a counter's category and name.
+ */
+function _deriveCounterDisplay(
+  category: string,
+  name: string
+): CounterDisplayConfig {
+  if (category === 'Memory') {
+    return {
+      graphType: 'line-accumulated',
+      unit: 'bytes',
+      color: 'orange',
+      markerSchemaLocation: 'timeline-memory',
+      sortOrder: 2,
+      label: 'Memory',
+    };
+  } else if (category === 'power') {
+    return {
+      graphType: 'line-rate',
+      unit: 'pWh',
+      color: 'grey',
+      markerSchemaLocation: null,
+      sortOrder: 6,
+      label: name,
+    };
+  } else if (category === 'Bandwidth') {
+    return {
+      graphType: 'line-rate',
+      unit: 'bytes',
+      color: 'blue',
+      markerSchemaLocation: null,
+      sortOrder: 8,
+      label: 'Bandwidth',
+    };
+  } else if (category === 'CPU' && name === 'processCPU') {
+    return {
+      graphType: 'line-rate',
+      unit: 'percent',
+      color: 'grey',
+      markerSchemaLocation: null,
+      sortOrder: 5,
+      label: 'Process CPU',
+    };
+  }
+
+  return {
+    graphType: 'line-rate',
+    unit: '',
+    color: 'grey',
+    markerSchemaLocation: null,
+    sortOrder: 9,
+    label: name,
+  };
+}
+
 /**
  * Converts the Gecko list of counters into the processed format.
  */
@@ -1031,6 +1087,7 @@ function _processCounters(
         pid: mainThreadPid,
         mainThreadIndex,
         samples: adjustTableTimeDeltas(processedCounterSamples, delta),
+        display: _deriveCounterDisplay(category, name),
       });
       return result;
     },

src/profile-logic/processed-profile-versioning.ts

@@ -3049,6 +3049,66 @@ const _upgraders: {
     }
   },
 
+  [62]: (profile: any) => {
+    // Added CounterDisplayConfig to counters. This metadata controls how a
+    // counter is rendered (graph type, color, unit, etc.).
+    // Derive defaults from the counter's category and name.
+    if (profile.counters) {
+      for (const counter of profile.counters) {
+        if (counter.display !== undefined) {
+          continue;
+        }
+        const { category, name } = counter;
+        if (category === 'Memory') {
+          counter.display = {
+            graphType: 'line-accumulated',
+            unit: 'bytes',
+            color: 'orange',
+            markerSchemaLocation: 'timeline-memory',
+            sortOrder: 2,
+            label: 'Memory',
+          };
+        } else if (category === 'power') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'pWh',
+            color: 'grey',
+            markerSchemaLocation: null,
+            sortOrder: 6,
+            label: name,
+          };
+        } else if (category === 'Bandwidth') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'bytes',
+            color: 'blue',
+            markerSchemaLocation: null,
+            sortOrder: 8,
+            label: 'Bandwidth',
+          };
+        } else if (category === 'CPU' && name === 'processCPU') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'percent',
+            color: 'grey',
+            markerSchemaLocation: null,
+            sortOrder: 5,
+            label: 'Process CPU',
+          };
+        } else {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: '',
+            color: 'grey',
+            markerSchemaLocation: null,
+            sortOrder: 9,
+            label: name,
+          };
+        }
+      }
+    }
+  },
+
   // If you add a new upgrader here, please document the change in
   // `docs-developer/CHANGELOG-formats.md`.
 };

src/profile-logic/profile-data.ts

@@ -2307,7 +2307,7 @@ export function processCounter(rawCounter: RawCounter): Counter {
     color: rawCounter.color,
     pid: rawCounter.pid,
     mainThreadIndex: rawCounter.mainThreadIndex,
-
+    display: rawCounter.display,
     samples,
   };
 

src/test/fixtures/profiles/processed-profile.ts

@@ -33,6 +33,7 @@ import type {
   CategoryList,
   JsTracerTable,
   RawCounter,
+  CounterDisplayConfig,
   TabID,
   MarkerPayload,
   NetworkPayload,
@@ -1479,6 +1480,18 @@ export function getProfileWithJsTracerEvents(
   return profile;
 }
 
+/**
+ * Default display configuration for test counters.
+ */
+const DEFAULT_TEST_COUNTER_DISPLAY: CounterDisplayConfig = {
+  graphType: 'line-rate',
+  unit: '',
+  color: 'grey',
+  markerSchemaLocation: null,
+  sortOrder: 9,
+  label: 'My Counter',
+};
+
 /**
  * Creates a Counter fixture for a given thread.
  */
@@ -1504,6 +1517,7 @@ export function getCounterForThread(
       count: sampleTimes.map((_, i) => Math.sin(i)),
       length: thread.samples.length,
     },
+    display: DEFAULT_TEST_COUNTER_DISPLAY,
   };
   return counter;
 }
@@ -1541,6 +1555,7 @@ export function getCounterForThreadWithSamples(
     pid: thread.pid,
     mainThreadIndex,
     samples: newSamples,
+    display: DEFAULT_TEST_COUNTER_DISPLAY,
   };
   return counter;
 }

src/test/integration/symbolicator-cli/__snapshots__/symbolicator-cli.test.ts.snap

@@ -87,7 +87,7 @@ Object {
     "markerSchema": Array [],
     "oscpu": "macOS 14.6.1",
     "pausedRanges": Array [],
-    "preprocessedProfileVersion": 61,
+    "preprocessedProfileVersion": 62,
     "processType": 0,
     "product": "a.out",
     "sampleUnits": Object {
@@ -1415,7 +1415,7 @@ Object {
     "markerSchema": Array [],
     "oscpu": "macOS 14.6.1",
     "pausedRanges": Array [],
-    "preprocessedProfileVersion": 61,
+    "preprocessedProfileVersion": 62,
     "processType": 0,
     "product": "a.out",
     "sampleUnits": Object {

src/test/store/__snapshots__/profile-view.test.ts.snap

@@ -418,7 +418,7 @@ Object {
     "oscpu": "",
     "physicalCPUs": 0,
     "platform": "",
-    "preprocessedProfileVersion": 61,
+    "preprocessedProfileVersion": 62,
     "processType": 0,
     "product": "Firefox",
     "sourceURL": "",