feat(profiling): add view select menu

docs-ui/stories/components/profiling/flamegraphZoomView.stories.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import {FlamegraphViewSelectMenu} from 'sentry/components/profiling/FlamegraphViewSelectMenu';
 import {FlamegraphZoomView} from 'sentry/components/profiling/FlamegraphZoomView';
 import {FlamegraphZoomViewMinimap} from 'sentry/components/profiling/FlamegraphZoomViewMinimap';
 import {CanvasPoolManager} from 'sentry/utils/profiling/canvasScheduler';
@@ -16,8 +17,16 @@ export default {
 export const EventedTrace = () => {
   const canvasPoolManager = new CanvasPoolManager();
 
+  const [view, setView] = React.useState({inverted: false, leftHeavy: false});
+
   const profiles = importProfile(trace);
-  const flamegraph = new Flamegraph(profiles.profiles[0]);
+
+  const flamegraph = new Flamegraph(
+    profiles.profiles[0],
+    0,
+    view.inverted,
+    view.leftHeavy
+  );
 
   return (
     <div
@@ -29,6 +38,18 @@ export const EventedTrace = () => {
         overscrollBehavior: 'contain',
       }}
     >
+      <div>
+        <FlamegraphViewSelectMenu
+          view={view.inverted ? 'bottom up' : 'top down'}
+          sorting={view.leftHeavy ? 'left heavy' : 'call order'}
+          onSortingChange={s => {
+            setView({...view, leftHeavy: s === 'left heavy'});
+          }}
+          onViewChange={v => {
+            setView({...view, inverted: v === 'bottom up'});
+          }}
+        />
+      </div>
       <div style={{height: 100, position: 'relative'}}>
         <FlamegraphZoomViewMinimap
           flamegraph={flamegraph}

static/app/components/profiling/FlamegraphViewSelectMenu.tsx

@@ -0,0 +1,52 @@
+import Button from 'sentry/components/button';
+import ButtonBar from 'sentry/components/buttonBar';
+import {t} from 'sentry/locale';
+
+interface FlamegraphViewSelectMenuProps {
+  onSortingChange: (sorting: FlamegraphViewSelectMenuProps['sorting']) => void;
+  onViewChange: (view: FlamegraphViewSelectMenuProps['view']) => void;
+  sorting: 'call order' | 'left heavy';
+  view: 'top down' | 'bottom up';
+}
+
+function FlamegraphViewSelectMenu({
+  view,
+  onViewChange,
+  sorting,
+  onSortingChange,
+}: FlamegraphViewSelectMenuProps): React.ReactElement {
+  return (
+    <ButtonBar merged>
+      <Button
+        size="xsmall"
+        priority={sorting === 'call order' ? 'primary' : undefined}
+        onClick={() => onSortingChange('call order')}
+      >
+        {t('Call Order')}
+      </Button>
+      <Button
+        size="xsmall"
+        priority={sorting === 'left heavy' ? 'primary' : undefined}
+        onClick={() => onSortingChange('left heavy')}
+      >
+        {t('Left Heavy')}
+      </Button>
+      <Button
+        size="xsmall"
+        priority={view === 'bottom up' ? 'primary' : undefined}
+        onClick={() => onViewChange('bottom up')}
+      >
+        {t('Bottom Up')}
+      </Button>
+      <Button
+        size="xsmall"
+        priority={view === 'top down' ? 'primary' : undefined}
+        onClick={() => onViewChange('top down')}
+      >
+        {t('Top Down')}
+      </Button>
+    </ButtonBar>
+  );
+}
+
+export {FlamegraphViewSelectMenu};

tests/js/spec/utils/profiling/renderers/gridRenderer.spec.tsx

@@ -31,7 +31,7 @@ describe('getIntervalTimeAtX', () => {
       physicalSpace
     );
 
-    expect(getIntervalTimeAtX(configToPhysical, 500)).toBe(15);
+    expect(getIntervalTimeAtX(configToPhysical, 500)).toBe(10);
   });
 
   it('high dpr - when origin is at 0', () => {
@@ -57,7 +57,7 @@ describe('getIntervalTimeAtX', () => {
       physicalSpace
     );
 
-    expect(getIntervalTimeAtX(configToPhysical, 500)).toBe(20);
+    expect(getIntervalTimeAtX(configToPhysical, 500)).toBe(15);
   });
 });