ref(profiling) convert measurements to the base format

Author: JonasBa

static/app/components/profiling/flamegraph/continuousFlamegraph.tsx

@@ -50,6 +50,7 @@ import type {ContinuousProfileGroup} from 'sentry/utils/profiling/profile/import
 import {FlamegraphRenderer2D} from 'sentry/utils/profiling/renderers/flamegraphRenderer2D';
 import {FlamegraphRendererWebGL} from 'sentry/utils/profiling/renderers/flamegraphRendererWebGL';
 import {Rect} from 'sentry/utils/profiling/speedscope';
+import type {UIFrameMeasurements} from 'sentry/utils/profiling/uiFrames';
 import {UIFrames} from 'sentry/utils/profiling/uiFrames';
 import {
   fromNanoJoulesToWatts,
@@ -76,6 +77,31 @@ function getMaxConfigSpace(profileGroup: ContinuousProfileGroup): Rect {
   return new Rect(0, 0, maxProfileDuration, 0);
 }
 
+function convertContinuousProfileMeasurementsToUIFrames(
+  measurement: ContinuousProfileGroup['measurements']['slow_frame_renders']
+): UIFrameMeasurements | undefined {
+  if (!measurement) {
+    return undefined;
+  }
+
+  const measurements: UIFrameMeasurements = {
+    unit: measurement.unit,
+    values: [],
+  };
+
+  for (let i = 0; i < measurement.values.length; i++) {
+    const value = measurement.values[i];
+    const next = measurement.values[i + 1] ?? value;
+
+    measurements.values.push({
+      elapsed: next.timestamp - value.timestamp,
+      value: value.value,
+    });
+  }
+
+  return measurements;
+}
+
 type FlamegraphCandidate = {
   frame: FlamegraphFrame;
   threadId: number;
@@ -232,12 +258,12 @@ export function ContinuousFlamegraph(): ReactElement {
     }
     return new UIFrames(
       {
-        // @TODO
-        // @ts-expect-error
-        slow: profileGroup.measurements?.slow_frame_renders,
-        // @TODO
-        // @ts-expect-error
-        frozen: profileGroup.measurements?.frozen_frame_renders,
+        slow: convertContinuousProfileMeasurementsToUIFrames(
+          profileGroup.measurements?.slow_frame_renders
+        ),
+        frozen: convertContinuousProfileMeasurementsToUIFrames(
+          profileGroup.measurements?.frozen_frame_renders
+        ),
       },
       {unit: flamegraph.profile.unit},
       flamegraph.configSpace.withHeight(1)

static/app/components/profiling/flamegraph/flamegraph.tsx

@@ -57,6 +57,7 @@ import type {SpanChartNode} from 'sentry/utils/profiling/spanChart';
 import {SpanChart} from 'sentry/utils/profiling/spanChart';
 import {SpanTree} from 'sentry/utils/profiling/spanTree';
 import {Rect} from 'sentry/utils/profiling/speedscope';
+import type {UIFrameMeasurements} from 'sentry/utils/profiling/uiFrames';
 import {UIFrames} from 'sentry/utils/profiling/uiFrames';
 import type {ProfilingFormatterUnit} from 'sentry/utils/profiling/units/units';
 import {formatTo, fromNanoJoulesToWatts} from 'sentry/utils/profiling/units/units';
@@ -125,6 +126,31 @@ function collectAllSpanEntriesFromTransaction(
   return allSpans;
 }
 
+function convertProfileMeasurementsToUIFrames(
+  measurement: ProfileGroup['measurements']['slow_frame_renders']
+): UIFrameMeasurements | undefined {
+  if (!measurement) {
+    return undefined;
+  }
+
+  const measurements: UIFrameMeasurements = {
+    unit: measurement.unit,
+    values: [],
+  };
+
+  for (let i = 0; i < measurement.values.length; i++) {
+    const value = measurement.values[i];
+    const next = measurement.values[i + 1] ?? value;
+
+    measurements.values.push({
+      elapsed: next.elapsed_since_start_ns - value.elapsed_since_start_ns,
+      value: value.value,
+    });
+  }
+
+  return measurements;
+}
+
 type FlamegraphCandidate = {
   frame: FlamegraphFrame;
   threadId: number;
@@ -365,8 +391,12 @@ function Flamegraph(): ReactElement {
     }
     return new UIFrames(
       {
-        slow: profileGroup.measurements?.slow_frame_renders,
-        frozen: profileGroup.measurements?.frozen_frame_renders,
+        slow: convertProfileMeasurementsToUIFrames(
+          profileGroup.measurements?.slow_frame_renders
+        ),
+        frozen: convertProfileMeasurementsToUIFrames(
+          profileGroup.measurements?.frozen_frame_renders
+        ),
       },
       {unit: flamegraph.profile.unit},
       flamegraph.configSpace.withHeight(1)

static/app/utils/profiling/uiFrames.tsx

@@ -13,7 +13,7 @@ export type UIFrameNode = {
   type: 'slow' | 'frozen';
 };
 
-type UIFrameMeasurements = {
+export type UIFrameMeasurements = {
   unit: string;
   values: UIFrameMeasurement[];
 };