feat(profiling): render initial differential flamegraph (#61088)

Render first differential flamegraph. Currently uses wrong colors, but I
will update that in the following PRs

![CleanShot 2023-12-04 at 18 14
06@2x](https://github.com/getsentry/sentry/assets/9317857/55926704-9152-4d48-bbe0-057e90859515)

static/app/components/events/eventStatisticalDetector/eventDifferentialFlamegraph.tsx

@@ -1,8 +1,23 @@
-import {useEffect} from 'react';
+import {useEffect, useMemo} from 'react';
 import * as Sentry from '@sentry/react';
 
+import {DifferentialFlamegraph} from 'sentry/components/profiling/flamegraph/differentialFlamegraph';
 import {Event} from 'sentry/types';
-import {useDifferentialFlamegraphQuery} from 'sentry/utils/profiling/hooks/useDifferentialFlamegraphQuery';
+import {
+  CanvasPoolManager,
+  useCanvasScheduler,
+} from 'sentry/utils/profiling/canvasScheduler';
+import {DifferentialFlamegraph as DifferentialFlamegraphModel} from 'sentry/utils/profiling/differentialFlamegraph';
+import {Flamegraph} from 'sentry/utils/profiling/flamegraph';
+import {FlamegraphStateProvider} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphContextProvider';
+import {FlamegraphThemeProvider} from 'sentry/utils/profiling/flamegraph/flamegraphThemeProvider';
+import {useFlamegraphTheme} from 'sentry/utils/profiling/flamegraph/useFlamegraphTheme';
+import {
+  DifferentialFlamegraphQueryResult,
+  useDifferentialFlamegraphQuery,
+} from 'sentry/utils/profiling/hooks/useDifferentialFlamegraphQuery';
+import {importProfile} from 'sentry/utils/profiling/profile/importProfile';
+import {LOADING_PROFILE_GROUP} from 'sentry/views/profiling/profileGroupProvider';
 
 import {useTransactionsDelta} from './transactionsDeltaProvider';
 
@@ -37,7 +52,7 @@ export function EventDifferenialFlamegraph(props: EventDifferenialFlamegraphProp
   const projectID = parseInt(props.event.projectID, 10);
   const transactions = useTransactionsDelta();
 
-  useDifferentialFlamegraphQuery({
+  const {before, after} = useDifferentialFlamegraphQuery({
     projectID,
     breakpoint,
     environments: [],
@@ -50,8 +65,81 @@ export function EventDifferenialFlamegraph(props: EventDifferenialFlamegraphProp
 
   return (
     <div>
-      <h3>EventDifferenialFlamegraph</h3>
-      <p>TODO: Implement</p>
+      <h3>Differential Flamegraph</h3>
+
+      <FlamegraphThemeProvider>
+        <FlamegraphStateProvider
+          initialState={{
+            preferences: {
+              sorting: 'alphabetical',
+              view: 'bottom up',
+            },
+          }}
+        >
+          <EventDifferentialFlamegraphView before={before} after={after} />
+        </FlamegraphStateProvider>
+      </FlamegraphThemeProvider>
+    </div>
+  );
+}
+
+interface EventDifferentialFlamegraphViewProps {
+  after: DifferentialFlamegraphQueryResult['before'];
+  before: DifferentialFlamegraphQueryResult['after'];
+}
+function EventDifferentialFlamegraphView(props: EventDifferentialFlamegraphViewProps) {
+  const theme = useFlamegraphTheme();
+  const beforeFlamegraph = useMemo(() => {
+    if (!props.before.data) {
+      return null;
+    }
+
+    // @TODO pass frame filter
+    const profile = importProfile(props.before.data, '', 'flamegraph');
+    return new Flamegraph(profile.profiles[0], {sort: 'alphabetical'});
+  }, [props.before]);
+
+  const afterProfileGroup = useMemo(() => {
+    if (!props.after.data) {
+      return null;
+    }
+
+    return importProfile(props.after.data, '', 'flamegraph');
+  }, [props.after]);
+
+  const afterFlamegraph = useMemo(() => {
+    if (!afterProfileGroup) {
+      return null;
+    }
+
+    // @TODO pass frame filter
+    return new Flamegraph(afterProfileGroup.profiles[0], {sort: 'alphabetical'});
+  }, [afterProfileGroup]);
+
+  const canvasPoolManager = useMemo(() => new CanvasPoolManager(), []);
+  const scheduler = useCanvasScheduler(canvasPoolManager);
+
+  const differentialFlamegraph = useMemo(() => {
+    if (!beforeFlamegraph || !afterFlamegraph) {
+      return DifferentialFlamegraphModel.Empty();
+    }
+
+    return DifferentialFlamegraphModel.FromDiff(
+      {
+        before: beforeFlamegraph,
+        after: afterFlamegraph,
+      },
+      theme
+    );
+  }, [beforeFlamegraph, afterFlamegraph, theme]);
+  return (
+    <div style={{height: '500px'}}>
+      <DifferentialFlamegraph
+        profileGroup={afterProfileGroup ?? LOADING_PROFILE_GROUP}
+        differentialFlamegraph={differentialFlamegraph}
+        canvasPoolManager={canvasPoolManager}
+        scheduler={scheduler}
+      />
     </div>
   );
 }

static/app/components/events/interfaces/spans/gapSpanDetails.tsx

@@ -51,27 +51,23 @@ export function GapSpanDetails({
 
   const profileGroup = useProfileGroup();
 
-  const threadId = useMemo(
-    () => profileGroup.profiles[profileGroup.activeProfileIndex]?.threadId,
-    [profileGroup]
-  );
-
   const profile = useMemo(() => {
+    const threadId = profileGroup.profiles[profileGroup.activeProfileIndex]?.threadId;
     if (!defined(threadId)) {
       return null;
     }
     return profileGroup.profiles.find(p => p.threadId === threadId) ?? null;
-  }, [profileGroup.profiles, threadId]);
+  }, [profileGroup.profiles, profileGroup.activeProfileIndex]);
 
-  const transactionHasProfile = defined(threadId) && defined(profile);
+  const transactionHasProfile = defined(profile);
 
   const flamegraph = useMemo(() => {
     if (!transactionHasProfile) {
       return FlamegraphModel.Example();
     }
 
-    return new FlamegraphModel(profile, threadId, {});
-  }, [transactionHasProfile, profile, threadId]);
+    return new FlamegraphModel(profile, {});
+  }, [transactionHasProfile, profile]);
 
   // The most recent profile formats should contain a timestamp indicating
   // the beginning of the profile. This timestamp can be after the start

static/app/components/profiling/aggregateFlamegraphPanel.tsx

@@ -10,6 +10,8 @@ import {Flex} from 'sentry/components/profiling/flex';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {DeepPartial} from 'sentry/types/utils';
+import type {FlamegraphState} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphContext';
 import {FlamegraphStateProvider} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphContextProvider';
 import {FlamegraphThemeProvider} from 'sentry/utils/profiling/flamegraph/flamegraphThemeProvider';
 import {Frame} from 'sentry/utils/profiling/frame';
@@ -18,6 +20,13 @@ import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {ProfileGroupProvider} from 'sentry/views/profiling/profileGroupProvider';
 
+const DEFAULT_AGGREGATE_FLAMEGRAPH_PREFERENCES: DeepPartial<FlamegraphState> = {
+  preferences: {
+    sorting: 'alphabetical',
+    view: 'bottom up',
+  },
+};
+
 class EmptyFlamegraphException extends Error {}
 
 export function AggregateFlamegraphPanel({transaction}: {transaction: string}) {
@@ -68,14 +77,7 @@ export function AggregateFlamegraphPanel({transaction}: {transaction: string}) {
         traceID=""
         frameFilter={hideSystemFrames ? applicationFrameOnly : undefined}
       >
-        <FlamegraphStateProvider
-          initialState={{
-            preferences: {
-              sorting: 'alphabetical',
-              view: 'bottom up',
-            },
-          }}
-        >
+        <FlamegraphStateProvider initialState={DEFAULT_AGGREGATE_FLAMEGRAPH_PREFERENCES}>
           <FlamegraphThemeProvider>
             <Panel>
               <Flex h={400} column justify="center">

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

@@ -215,6 +215,7 @@ export function AggregateFlamegraph(props: AggregateFlamegraphProps): ReactEleme
 
   return (
     <FlamegraphZoomView
+      profileGroup={profileGroup}
       disableGrid
       disableCallOrderSort
       disableColorCoding

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

@@ -105,7 +105,7 @@ export function DeprecatedAggregateFlamegraph(
     transaction.setTag('sorting', sorting.split(' ').join('_'));
     transaction.setTag('view', view.split(' ').join('_'));
 
-    const newFlamegraph = new FlamegraphModel(profile, threadId, {
+    const newFlamegraph = new FlamegraphModel(profile, {
       inverted: view === 'bottom up',
       sort: sorting,
       configSpace: undefined,
@@ -297,6 +297,7 @@ export function DeprecatedAggregateFlamegraph(
     <Fragment>
       {props.children ? props.children({canvasPoolManager, scheduler, flamegraph}) : null}
       <FlamegraphZoomView
+        profileGroup={profileGroup}
         canvasBounds={flamegraphCanvasBounds}
         canvasPoolManager={canvasPoolManager}
         flamegraph={flamegraph}

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

@@ -1,17 +1,13 @@
-import {ReactElement, useEffect, useLayoutEffect, useMemo, useState} from 'react';
+import {ReactElement, useLayoutEffect, useMemo, useState} from 'react';
 import * as Sentry from '@sentry/react';
 import {mat3, vec2} from 'gl-matrix';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import {FlamegraphZoomView} from 'sentry/components/profiling/flamegraph/flamegraphZoomView';
-import {defined} from 'sentry/utils';
 import {CanvasPoolManager, CanvasScheduler} from 'sentry/utils/profiling/canvasScheduler';
 import {CanvasView} from 'sentry/utils/profiling/canvasView';
 import {DifferentialFlamegraph as DifferentialFlamegraphModel} from 'sentry/utils/profiling/differentialFlamegraph';
-import {Flamegraph as FlamegraphModel} from 'sentry/utils/profiling/flamegraph';
 import {useFlamegraphPreferences} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphPreferences';
-import {useFlamegraphProfiles} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphProfiles';
-import {useDispatchFlamegraphState} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphState';
 import {useFlamegraphTheme} from 'sentry/utils/profiling/flamegraph/useFlamegraphTheme';
 import {FlamegraphCanvas} from 'sentry/utils/profiling/flamegraphCanvas';
 import {FlamegraphFrame} from 'sentry/utils/profiling/flamegraphFrame';
@@ -20,25 +16,20 @@ import {
   initializeFlamegraphRenderer,
   useResizeCanvasObserver,
 } from 'sentry/utils/profiling/gl/utils';
+import {ProfileGroup} from 'sentry/utils/profiling/profile/importProfile';
 import {FlamegraphRenderer2D} from 'sentry/utils/profiling/renderers/flamegraphRenderer2D';
 import {FlamegraphRendererWebGL} from 'sentry/utils/profiling/renderers/flamegraphRendererWebGL';
 import {Rect} from 'sentry/utils/profiling/speedscope';
-import {useProfileGroup} from 'sentry/views/profiling/profileGroupProvider';
 
 interface DifferentialFlamegraphProps {
-  beforeFlamegraph: FlamegraphModel;
   canvasPoolManager: CanvasPoolManager;
-  currentFlamegraph: FlamegraphModel;
+  differentialFlamegraph: DifferentialFlamegraphModel;
+  profileGroup: ProfileGroup;
   scheduler: CanvasScheduler;
 }
 
 export function DifferentialFlamegraph(props: DifferentialFlamegraphProps): ReactElement {
-  const dispatch = useDispatchFlamegraphState();
-
-  const profileGroup = useProfileGroup();
-
   const flamegraphTheme = useFlamegraphTheme();
-  const profiles = useFlamegraphProfiles();
   const {colorCoding} = useFlamegraphPreferences();
 
   const [flamegraphCanvasRef, setFlamegraphCanvasRef] =
@@ -53,29 +44,18 @@ export function DifferentialFlamegraph(props: DifferentialFlamegraphProps): Reac
     return new FlamegraphCanvas(flamegraphCanvasRef, vec2.fromValues(0, 0));
   }, [flamegraphCanvasRef]);
 
-  const differentialFlamegraph = useMemo<DifferentialFlamegraphModel>(() => {
-    if (!props.beforeFlamegraph || !props.currentFlamegraph) {
-      return DifferentialFlamegraphModel.Empty();
-    }
-
-    return DifferentialFlamegraphModel.FromDiff(
-      {before: props.beforeFlamegraph, current: props.currentFlamegraph},
-      flamegraphTheme
-    );
-  }, [props.beforeFlamegraph, props.currentFlamegraph, flamegraphTheme]);
-
   const flamegraphView = useMemo<CanvasView<DifferentialFlamegraphModel> | null>(
     () => {
-      if (!flamegraphCanvas) {
+      if (!flamegraphCanvas || !props.differentialFlamegraph) {
         return null;
       }
 
       const newView = new CanvasView({
         canvas: flamegraphCanvas,
-        model: differentialFlamegraph,
+        model: props.differentialFlamegraph,
         options: {
-          inverted: differentialFlamegraph.inverted,
-          minWidth: differentialFlamegraph.profile.minFrameDuration,
+          inverted: props.differentialFlamegraph.inverted,
+          minWidth: props.differentialFlamegraph.profile.minFrameDuration,
           barHeight: flamegraphTheme.SIZES.BAR_HEIGHT,
           depthOffset: flamegraphTheme.SIZES.AGGREGATE_FLAMEGRAPH_DEPTH_OFFSET,
           configSpaceTransform: undefined,
@@ -84,7 +64,7 @@ export function DifferentialFlamegraph(props: DifferentialFlamegraphProps): Reac
 
       // Find p75 of the graphtree depth and set the view to 3/4 of that
       const depths: number[] = [];
-      for (const frame of differentialFlamegraph.frames) {
+      for (const frame of props.differentialFlamegraph.frames) {
         if (frame.children.length > 0) {
           continue;
         }
@@ -106,7 +86,7 @@ export function DifferentialFlamegraph(props: DifferentialFlamegraphProps): Reac
 
     // We skip position.view dependency because it will go into an infinite loop
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [differentialFlamegraph, flamegraphCanvas, flamegraphTheme]
+    [props.differentialFlamegraph, flamegraphCanvas, flamegraphTheme]
   );
 
   // Uses a useLayoutEffect to ensure that these top level/global listeners are added before
@@ -181,7 +161,7 @@ export function DifferentialFlamegraph(props: DifferentialFlamegraphProps): Reac
   );
 
   const flamegraphRenderer = useMemo(() => {
-    if (!flamegraphCanvasRef) {
+    if (!flamegraphCanvasRef || !props.differentialFlamegraph) {
       return null;
     }
 
@@ -189,7 +169,7 @@ export function DifferentialFlamegraph(props: DifferentialFlamegraphProps): Reac
       [FlamegraphRendererWebGL, FlamegraphRenderer2D],
       [
         flamegraphCanvasRef,
-        differentialFlamegraph,
+        props.differentialFlamegraph,
         flamegraphTheme,
         {
           colorCoding,
@@ -205,34 +185,17 @@ export function DifferentialFlamegraph(props: DifferentialFlamegraphProps): Reac
     }
 
     return renderer;
-  }, [colorCoding, differentialFlamegraph, flamegraphCanvasRef, flamegraphTheme]);
-
-  useEffect(() => {
-    if (defined(profiles.threadId)) {
-      return;
-    }
-    const threadID =
-      typeof profileGroup.activeProfileIndex === 'number'
-        ? profileGroup.profiles[profileGroup.activeProfileIndex]?.threadId
-        : null;
-    // fall back case, when we finally load the active profile index from the profile,
-    // make sure we update the thread id so that it is show first
-    if (defined(threadID)) {
-      dispatch({
-        type: 'set thread id',
-        payload: threadID,
-      });
-    }
-  }, [profileGroup, profiles.threadId, dispatch]);
+  }, [colorCoding, props.differentialFlamegraph, flamegraphCanvasRef, flamegraphTheme]);
 
   return (
     <FlamegraphZoomView
+      profileGroup={props.profileGroup}
       disableGrid
       disableCallOrderSort
       disableColorCoding
       canvasBounds={flamegraphCanvasBounds}
       canvasPoolManager={props.canvasPoolManager}
-      flamegraph={differentialFlamegraph}
+      flamegraph={props.differentialFlamegraph}
       flamegraphRenderer={flamegraphRenderer}
       flamegraphCanvas={flamegraphCanvas}
       flamegraphCanvasRef={flamegraphCanvasRef}

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

@@ -332,7 +332,7 @@ function Flamegraph(): ReactElement {
     transaction.setTag('sorting', sorting.split(' ').join('_'));
     transaction.setTag('view', view.split(' ').join('_'));
 
-    const newFlamegraph = new FlamegraphModel(profile, threadId, {
+    const newFlamegraph = new FlamegraphModel(profile, {
       inverted: view === 'bottom up',
       sort: sorting,
       configSpace: getMaxConfigSpace(
@@ -1275,7 +1275,7 @@ function Flamegraph(): ReactElement {
             return prevCandidate;
           }
 
-          const graph = new FlamegraphModel(currentProfile, currentProfile.threadId, {
+          const graph = new FlamegraphModel(currentProfile, {
             inverted: false,
             sort: sorting,
             configSpace: undefined,
@@ -1468,6 +1468,7 @@ function Flamegraph(): ReactElement {
           <ProfileDragDropImport onImport={onImport}>
             <FlamegraphWarnings flamegraph={flamegraph} />
             <FlamegraphZoomView
+              profileGroup={profileGroup}
               canvasBounds={flamegraphCanvasBounds}
               canvasPoolManager={canvasPoolManager}
               flamegraph={flamegraph}

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

@@ -26,7 +26,7 @@ describe('computePreviewConfigView', function () {
       {type: 'flamechart'}
     );
 
-    const flamegraph = new Flamegraph(profile, 1, {});
+    const flamegraph = new Flamegraph(profile, {});
 
     // the view should be taller than the flamegraph
     const configView = new Rect(0, 0, 2, 3);
@@ -65,7 +65,7 @@ describe('computePreviewConfigView', function () {
       {type: 'flamechart'}
     );
 
-    const flamegraph = new Flamegraph(profile, 1, {});
+    const flamegraph = new Flamegraph(profile, {});
 
     // limit the view to 2 rows tall
     const configView = new Rect(0, 0, 2, 2);
@@ -106,7 +106,7 @@ describe('computePreviewConfigView', function () {
       {type: 'flamechart'}
     );
 
-    const flamegraph = new Flamegraph(profile, 1, {});
+    const flamegraph = new Flamegraph(profile, {});
 
     // limit the view to 2 rows talls
     const configView = new Rect(0, 0, 3, 2);
@@ -146,7 +146,7 @@ describe('computePreviewConfigView', function () {
       {type: 'flamechart'}
     );
 
-    const flamegraph = new Flamegraph(profile, 1, {});
+    const flamegraph = new Flamegraph(profile, {});
 
     // make taller than profile's deepest stack
     const configView = new Rect(0, 0, 2, 3);
@@ -185,7 +185,7 @@ describe('computePreviewConfigView', function () {
       {type: 'flamechart'}
     );
 
-    const flamegraph = new Flamegraph(profile, 1, {});
+    const flamegraph = new Flamegraph(profile, {});
 
     const configView = new Rect(0, 0, 4, 2);
 
@@ -223,7 +223,7 @@ describe('computePreviewConfigView', function () {
       {type: 'flamechart'}
     );
 
-    const flamegraph = new Flamegraph(profile, 1, {});
+    const flamegraph = new Flamegraph(profile, {});
 
     const configView = new Rect(0, 0, 4, 3);
 

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

@@ -33,13 +33,13 @@ import {
 } from 'sentry/utils/profiling/gl/utils';
 import {useContextMenu} from 'sentry/utils/profiling/hooks/useContextMenu';
 import {useInternalFlamegraphDebugMode} from 'sentry/utils/profiling/hooks/useInternalFlamegraphDebugMode';
+import {ProfileGroup} from 'sentry/utils/profiling/profile/importProfile';
 import {FlamegraphRenderer} from 'sentry/utils/profiling/renderers/flamegraphRenderer';
 import {FlamegraphTextRenderer} from 'sentry/utils/profiling/renderers/flamegraphTextRenderer';
 import {GridRenderer} from 'sentry/utils/profiling/renderers/gridRenderer';
 import {SampleTickRenderer} from 'sentry/utils/profiling/renderers/sampleTickRenderer';
 import {SelectedFrameRenderer} from 'sentry/utils/profiling/renderers/selectedFrameRenderer';
 import {Rect} from 'sentry/utils/profiling/speedscope';
-import {useProfileGroup} from 'sentry/views/profiling/profileGroupProvider';
 
 import {useCanvasScroll} from './interactions/useCanvasScroll';
 import {useCanvasZoomOrScroll} from './interactions/useCanvasZoomOrScroll';
@@ -69,6 +69,7 @@ interface FlamegraphZoomViewProps {
   flamegraphOverlayCanvasRef: HTMLCanvasElement | null;
   flamegraphRenderer: FlamegraphRenderer | null;
   flamegraphView: CanvasView<Flamegraph> | null;
+  profileGroup: ProfileGroup;
   setFlamegraphCanvasRef: React.Dispatch<React.SetStateAction<HTMLCanvasElement | null>>;
   setFlamegraphOverlayCanvasRef: React.Dispatch<
     React.SetStateAction<HTMLCanvasElement | null>
@@ -89,6 +90,7 @@ function FlamegraphZoomView({
   flamegraphCanvasRef,
   flamegraphOverlayCanvasRef,
   flamegraphView,
+  profileGroup,
   setFlamegraphCanvasRef,
   setFlamegraphOverlayCanvasRef,
   disablePanX = false,
@@ -98,7 +100,6 @@ function FlamegraphZoomView({
   disableColorCoding = false,
 }: FlamegraphZoomViewProps): React.ReactElement {
   const flamegraphTheme = useFlamegraphTheme();
-  const profileGroup = useProfileGroup();
   const flamegraphSearch = useFlamegraphSearch();
   const isInternalFlamegraphDebugModeEnabled = useInternalFlamegraphDebugMode();
 

static/app/utils/profiling/differentialFlamegraph.spec.tsx

@@ -36,7 +36,6 @@ const makeFlamegraph = (profile: Partial<Profiling.Schema>) => {
     SampledProfile.FromProfile(s.profiles[0] as Profiling.SampledProfile, frameIndex, {
       type: 'flamegraph',
     }),
-    0,
     {
       inverted: false,
       sort: 'alphabetical',
@@ -65,7 +64,7 @@ describe('differentialFlamegraph', () => {
         },
       ],
     });
-    const current = makeFlamegraph({
+    const after = makeFlamegraph({
       shared: {
         frames: [{name: 'new function'}],
       },
@@ -78,7 +77,7 @@ describe('differentialFlamegraph', () => {
       ],
     });
 
-    const flamegraph = DifferentialFlamegraph.FromDiff({before, current}, THEME);
+    const flamegraph = DifferentialFlamegraph.FromDiff({before, after}, THEME);
 
     expect(flamegraph.colors?.get('new function')).toEqual([
       ...THEME.COLORS.DIFFERENTIAL_INCREASE,
@@ -99,7 +98,7 @@ describe('differentialFlamegraph', () => {
         },
       ],
     });
-    const current = makeFlamegraph({
+    const after = makeFlamegraph({
       shared: {
         frames: [{name: 'function'}, {name: 'other function'}],
       },
@@ -112,7 +111,7 @@ describe('differentialFlamegraph', () => {
       ],
     });
 
-    const flamegraph = DifferentialFlamegraph.FromDiff({before, current}, THEME);
+    const flamegraph = DifferentialFlamegraph.FromDiff({before, after}, THEME);
 
     expect(flamegraph.colors?.get('function')).toEqual([
       ...THEME.COLORS.DIFFERENTIAL_INCREASE,
@@ -137,7 +136,7 @@ describe('differentialFlamegraph', () => {
         },
       ],
     });
-    const current = makeFlamegraph({
+    const after = makeFlamegraph({
       shared: {
         frames: [{name: 'function'}, {name: 'other function'}],
       },
@@ -150,7 +149,7 @@ describe('differentialFlamegraph', () => {
       ],
     });
 
-    const flamegraph = DifferentialFlamegraph.FromDiff({before, current}, THEME);
+    const flamegraph = DifferentialFlamegraph.FromDiff({before, after}, THEME);
 
     expect(flamegraph.colors?.get('function')).toEqual([
       ...THEME.COLORS.DIFFERENTIAL_INCREASE,
@@ -175,7 +174,7 @@ describe('differentialFlamegraph', () => {
         },
       ],
     });
-    const current = makeFlamegraph({
+    const after = makeFlamegraph({
       shared: {
         frames: [{name: 'function'}, {name: 'other function'}],
       },
@@ -188,7 +187,7 @@ describe('differentialFlamegraph', () => {
       ],
     });
 
-    const flamegraph = DifferentialFlamegraph.FromDiff({before, current}, THEME);
+    const flamegraph = DifferentialFlamegraph.FromDiff({before, after}, THEME);
 
     expect(flamegraph.colors?.get('function')).toEqual([
       ...THEME.COLORS.DIFFERENTIAL_DECREASE,