feat(profiling): add flamegraph tooltip (#31663)

* feat(profiling): flamegraph

* feat(profiling): add flamegraph renderer and tests

* fix(profiling): ignore unused renderer in test

* fix(profiling): ignore unused renderer in test

* feat(profiling): add util hooks

* ref(hook): add usememowithprevious tests

* feat(profiling): zoom view

* fix(flamegraphrenderer): adjust for profiles that do not start at 0 and trim text more accurately

* feat(profiling): add tooltip component

* fix(flamegraph): remove merge marker

* test(utils): fix tests

* fix(tooltip): code review

* feat(tooltip): add useDevicePixelRatio hook

* feat(profiling): add view select menu (#31698)

* feat(flamegraph): add view select menu

* feat(profiling): use buttonbar

* fix(viewselectmenu): use locale

* test(gridrenderer): update tests

* feat(profiling): add ability to search for frames (#31723)

* feat(flamegraph): add view select menu

* feat(profiling): use buttonbar

* feat(profiling): add search

* style(lint): Auto commit lint changes

* style(lint): Auto commit lint changes

* feat(profiling): decouple search fn

* fix(flamegraphsearch): missing hook deps

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

* fix(flamegraphtooltip): update deps

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: JonasBa

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import {FlamegraphSearch} from 'sentry/components/profiling/FlamegraphSearch';
+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 +18,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 +39,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}
@@ -46,6 +68,10 @@ export const EventedTrace = () => {
           canvasPoolManager={canvasPoolManager}
           flamegraphTheme={LightFlamegraphTheme}
         />
+        <FlamegraphSearch
+          flamegraphs={[flamegraph]}
+          canvasPoolManager={canvasPoolManager}
+        />
       </div>
     </div>
   );

static/app/components/profiling/BoundTooltip.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {mat3, vec2} from 'gl-matrix';
+
+import {FlamegraphTheme} from 'sentry/utils/profiling/flamegraph/FlamegraphTheme';
+import {getContext, measureText, Rect} from 'sentry/utils/profiling/gl/utils';
+import {useDevicePixelRatio} from 'sentry/utils/useDevicePixelRatio';
+
+const useCachedMeasure = (string: string): Rect => {
+  const cache = React.useRef<Record<string, Rect>>({});
+  const ctx = React.useMemo(() => {
+    const context = getContext(document.createElement('canvas'), '2d');
+
+    context.font = `12px ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono',
+    'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
+    'Courier New', monospace`;
+    return context;
+  }, []);
+
+  return React.useMemo(() => {
+    if (cache.current[string]) {
+      return cache.current[string];
+    }
+
+    if (!ctx) {
+      return Rect.Empty();
+    }
+
+    const measures = measureText(string, ctx);
+    cache.current[string] = measures;
+
+    return new Rect(0, 0, measures.width, measures.height);
+  }, [string, ctx]);
+};
+
+interface BoundTooltipProps {
+  bounds: Rect;
+  configToPhysicalSpace: mat3;
+  cursor: vec2 | null;
+  theme: FlamegraphTheme;
+  children?: React.ReactNode;
+}
+
+function BoundTooltip({
+  bounds,
+  configToPhysicalSpace,
+  cursor,
+  children,
+  theme,
+}: BoundTooltipProps): React.ReactElement | null {
+  const tooltipRef = React.useRef<HTMLDivElement>(null);
+  const tooltipRect = useCachedMeasure(tooltipRef.current?.textContent ?? '');
+  const devicePixelRatio = useDevicePixelRatio();
+
+  const physicalToLogicalSpace = React.useMemo(
+    () =>
+      mat3.fromScaling(
+        mat3.create(),
+        vec2.fromValues(1 / devicePixelRatio, 1 / devicePixelRatio)
+      ),
+    [devicePixelRatio]
+  );
+
+  const [tooltipBounds, setTooltipBounds] = React.useState<Rect>(Rect.Empty());
+
+  React.useLayoutEffect(() => {
+    if (!children || bounds.isEmpty() || !tooltipRef.current) {
+      setTooltipBounds(Rect.Empty());
+      return;
+    }
+
+    const newTooltipBounds = tooltipRef.current.getBoundingClientRect();
+
+    setTooltipBounds(
+      new Rect(
+        newTooltipBounds.x,
+        newTooltipBounds.y,
+        newTooltipBounds.width,
+        newTooltipBounds.height
+      )
+    );
+  }, [children, bounds, cursor]);
+
+  if (!children || !cursor || bounds.isEmpty()) {
+    return null;
+  }
+
+  const physicalSpaceCursor = vec2.transformMat3(
+    vec2.create(),
+    vec2.fromValues(cursor[0], cursor[1]),
+
+    configToPhysicalSpace
+  );
+
+  const logicalSpaceCursor = vec2.transformMat3(
+    vec2.create(),
+    physicalSpaceCursor,
+    physicalToLogicalSpace
+  );
+
+  let cursorHorizontalPosition = logicalSpaceCursor[0];
+  const cursorVerticalPosition = logicalSpaceCursor[1];
+
+  const mid = bounds.width / 2;
+
+  // If users screen is on right half of the screen, then we have more space to position on the left and vice versa
+  // since default is right, we only need to handle 1 case
+  if (cursorHorizontalPosition > mid) {
+    // console.log('Cursor over mid');
+    cursorHorizontalPosition -= tooltipBounds.width;
+  }
+
+  return children ? (
+    <Tooltip
+      ref={tooltipRef}
+      style={{
+        fontSize: theme.SIZES.TOOLTIP_FONT_SIZE,
+        fontFamily: theme.FONTS.FONT,
+        left: cursorHorizontalPosition,
+        top: cursorVerticalPosition,
+        width: Math.min(tooltipRect.width, bounds.width - cursorHorizontalPosition - 2),
+      }}
+    >
+      {children}
+    </Tooltip>
+  ) : null;
+}
+
+const Tooltip = styled('div')`
+  background: #fff;
+  position: absolute;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+`;
+
+export {BoundTooltip};