Add CounterDisplayConfig to counters in the processed profile format

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.
@@ -35,12 +35,10 @@ export const TRACK_MEMORY_MARKERS_HEIGHT = 15;
 export const TRACK_MEMORY_HEIGHT =
   TRACK_MEMORY_GRAPH_HEIGHT + TRACK_MEMORY_MARKERS_HEIGHT;
 export const TRACK_MEMORY_LINE_WIDTH = 2;
-export const TRACK_MEMORY_DEFAULT_COLOR = 'orange';
 
 // The following values are for the bandwidth track.
 export const TRACK_BANDWIDTH_HEIGHT = 25;
 export const TRACK_BANDWIDTH_LINE_WIDTH = 2;
-export const TRACK_BANDWIDTH_DEFAULT_COLOR = 'blue';
 
 // The following values are for experimental event delay track.
 export const TRACK_EVENT_DELAY_HEIGHT = 40;
@@ -64,7 +62,6 @@ export const TIMELINE_RULER_HEIGHT = 20;
 // Height of the power track.
 export const TRACK_POWER_HEIGHT = 25;
 export const TRACK_POWER_LINE_WIDTH = 2;
-export const TRACK_POWER_DEFAULT_COLOR = 'grey';
 
 // Height of the process cpu track.
 export const TRACK_PROCESS_CPU_HEIGHT = 25;

src/components/timeline/TrackBandwidthGraph.tsx

@@ -31,7 +31,6 @@ import {
   TooltipDetailSeparator,
 } from 'firefox-profiler/components/tooltip/TooltipDetails';
 import { EmptyThreadIndicator } from './EmptyThreadIndicator';
-import { TRACK_BANDWIDTH_DEFAULT_COLOR } from 'firefox-profiler/app-logic/constants';
 import { getSampleIndexRangeForSelection } from 'firefox-profiler/profile-logic/profile-data';
 import { co2 } from '@tgwf/co2';
 
@@ -140,12 +139,8 @@ class TrackBandwidthCanvas extends React.PureComponent<CanvasProps> {
 
       ctx.lineWidth = deviceLineWidth;
       ctx.lineJoin = 'bevel';
-      ctx.strokeStyle = getStrokeColor(
-        counter.color || TRACK_BANDWIDTH_DEFAULT_COLOR
-      );
-      ctx.fillStyle = getFillColor(
-        counter.color || TRACK_BANDWIDTH_DEFAULT_COLOR
-      );
+      ctx.strokeStyle = getStrokeColor(counter.display.color);
+      ctx.fillStyle = getFillColor(counter.display.color);
       ctx.beginPath();
 
       const getX = (i: number) =>
@@ -618,9 +613,7 @@ class TrackBandwidthGraphImpl extends React.PureComponent<Props, State> {
         style={{
           left,
           top,
-          backgroundColor: getDotColor(
-            counter.color || TRACK_BANDWIDTH_DEFAULT_COLOR
-          ),
+          backgroundColor: getDotColor(counter.display.color),
         }}
         className="timelineTrackBandwidthGraphDot"
       />

src/components/timeline/TrackMemoryGraph.tsx

@@ -25,7 +25,6 @@ import {
 import { getThreadSelectors } from 'firefox-profiler/selectors/per-thread';
 import { Tooltip } from 'firefox-profiler/components/tooltip/Tooltip';
 import { EmptyThreadIndicator } from './EmptyThreadIndicator';
-import { TRACK_MEMORY_DEFAULT_COLOR } from 'firefox-profiler/app-logic/constants';
 
 import type {
   CounterIndex,
@@ -130,10 +129,8 @@ class TrackMemoryCanvas extends React.PureComponent<CanvasProps> {
 
       ctx.lineWidth = deviceLineWidth;
       ctx.lineJoin = 'bevel';
-      ctx.strokeStyle = getStrokeColor(
-        counter.color || TRACK_MEMORY_DEFAULT_COLOR
-      );
-      ctx.fillStyle = getFillColor(counter.color || TRACK_MEMORY_DEFAULT_COLOR);
+      ctx.strokeStyle = getStrokeColor(counter.display.color);
+      ctx.fillStyle = getFillColor(counter.display.color);
       ctx.beginPath();
 
       // The x and y are used after the loop.
@@ -460,9 +457,7 @@ class TrackMemoryGraphImpl extends React.PureComponent<Props, State> {
         style={{
           left,
           top,
-          backgroundColor: getDotColor(
-            counter.color || TRACK_MEMORY_DEFAULT_COLOR
-          ),
+          backgroundColor: getDotColor(counter.display.color),
         }}
         className="timelineTrackMemoryGraphDot"
       />

src/components/timeline/TrackPowerGraph.tsx

@@ -21,7 +21,6 @@ import { getThreadSelectors } from 'firefox-profiler/selectors/per-thread';
 import { Tooltip } from 'firefox-profiler/components/tooltip/Tooltip';
 import { TooltipTrackPower } from 'firefox-profiler/components/tooltip/TrackPower';
 import { EmptyThreadIndicator } from './EmptyThreadIndicator';
-import { TRACK_POWER_DEFAULT_COLOR } from 'firefox-profiler/app-logic/constants';
 
 import type {
   CounterIndex,
@@ -122,10 +121,8 @@ class TrackPowerCanvas extends React.PureComponent<CanvasProps> {
 
       ctx.lineWidth = deviceLineWidth;
       ctx.lineJoin = 'bevel';
-      ctx.strokeStyle = getStrokeColor(
-        counter.color || TRACK_POWER_DEFAULT_COLOR
-      );
-      ctx.fillStyle = getFillColor(counter.color || TRACK_POWER_DEFAULT_COLOR);
+      ctx.strokeStyle = getStrokeColor(counter.display.color);
+      ctx.fillStyle = getFillColor(counter.display.color);
       ctx.beginPath();
 
       const getX = (i: number) =>
@@ -483,9 +480,7 @@ class TrackPowerGraphImpl extends React.PureComponent<Props, State> {
         style={{
           left,
           top,
-          backgroundColor: getDotColor(
-            counter.color || TRACK_POWER_DEFAULT_COLOR
-          ),
+          backgroundColor: getDotColor(counter.display.color),
         }}
         className="timelineTrackPowerGraphDot"
       />

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',
+      sortWeight: 20,
+      label: 'Memory',
+    };
+  } else if (category === 'power') {
+    return {
+      graphType: 'line-rate',
+      unit: 'pWh',
+      color: 'grey',
+      markerSchemaLocation: null,
+      sortWeight: 30,
+      label: name,
+    };
+  } else if (category === 'Bandwidth') {
+    return {
+      graphType: 'line-rate',
+      unit: 'bytes',
+      color: 'blue',
+      markerSchemaLocation: null,
+      sortWeight: 10,
+      label: 'Bandwidth',
+    };
+  } else if (category === 'CPU' && name === 'processCPU') {
+    return {
+      graphType: 'line-rate',
+      unit: 'percent',
+      color: 'grey',
+      markerSchemaLocation: null,
+      sortWeight: 40,
+      label: 'Process CPU',
+    };
+  }
+
+  return {
+    graphType: 'line-rate',
+    unit: '',
+    color: 'grey',
+    markerSchemaLocation: null,
+    sortWeight: 50,
+    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,67 @@ 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: counter.color ?? 'orange',
+            markerSchemaLocation: 'timeline-memory',
+            sortWeight: 20,
+            label: 'Memory',
+          };
+        } else if (category === 'power') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'pWh',
+            color: counter.color ?? 'grey',
+            markerSchemaLocation: null,
+            sortWeight: 30,
+            label: name,
+          };
+        } else if (category === 'Bandwidth') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'bytes',
+            color: counter.color ?? 'blue',
+            markerSchemaLocation: null,
+            sortWeight: 10,
+            label: 'Bandwidth',
+          };
+        } else if (category === 'CPU' && name === 'processCPU') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'percent',
+            color: counter.color ?? 'grey',
+            markerSchemaLocation: null,
+            sortWeight: 40,
+            label: 'Process CPU',
+          };
+        } else {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: '',
+            color: counter.color ?? 'grey',
+            markerSchemaLocation: null,
+            sortWeight: 50,
+            label: name,
+          };
+        }
+        delete counter.color;
+      }
+    }
+  },
+
   // If you add a new upgrader here, please document the change in
   // `docs-developer/CHANGELOG-formats.md`.
 };

src/profile-logic/profile-data.ts

@@ -2304,10 +2304,9 @@ export function processCounter(rawCounter: RawCounter): Counter {
     name: rawCounter.name,
     category: rawCounter.category,
     description: rawCounter.description,
-    color: rawCounter.color,
     pid: rawCounter.pid,
     mainThreadIndex: rawCounter.mainThreadIndex,
-
+    display: rawCounter.display,
     samples,
   };
 

src/test/components/TrackBandwidth.test.tsx

@@ -66,23 +66,26 @@ describe('TrackBandwidth', function () {
     for (let i = 7; i < thread.samples.length - 1; ++i) {
       sampleTimes[i] = 7 + i / 100;
     }
-    profile.counters = [
-      getCounterForThreadWithSamples(
-        thread,
-        threadIndex,
-        {
-          time: sampleTimes.slice(),
-          // Bandwidth usage numbers. They are bytes.
-          count: [
-            10000, 40000, 50000, 100000, 2000000, 5000000, 30000, 1000000,
-            20000, 1, 12000, 100000,
-          ],
-          length: SAMPLE_COUNT,
-        },
-        'SystemBandwidth',
-        'bandwidth'
-      ),
-    ];
+    const counter = getCounterForThreadWithSamples(
+      thread,
+      threadIndex,
+      {
+        time: sampleTimes.slice(),
+        // Bandwidth usage numbers. They are bytes.
+        count: [
+          10000, 40000, 50000, 100000, 2000000, 5000000, 30000, 1000000, 20000,
+          1, 12000, 100000,
+        ],
+        length: SAMPLE_COUNT,
+      },
+      'SystemBandwidth',
+      'bandwidth'
+    );
+    counter.display = {
+      ...counter.display,
+      color: 'blue',
+    };
+    profile.counters = [counter];
     const store = storeWithProfile(profile);
     const { getState, dispatch } = store;
     const flushRafCalls = mockRaf();

src/test/components/TrackMemory.test.tsx

@@ -63,9 +63,12 @@ describe('TrackMemory', function () {
     );
     const threadIndex = 0;
     const thread = profile.threads[threadIndex];
-    profile.counters = [
-      getCounterForThread(thread, threadIndex, counterConfig),
-    ];
+    const counter = getCounterForThread(thread, threadIndex, counterConfig);
+    counter.display = {
+      ...counter.display,
+      color: 'orange',
+    };
+    profile.counters = [counter];
     const store = storeWithProfile(profile);
     const { getState, dispatch } = store;
     const flushRafCalls = mockRaf();