differentialFlamegraph.tsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. import {useCallback, useLayoutEffect, useMemo, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import * as Sentry from '@sentry/react';
  4. import type {mat3} from 'gl-matrix';
  5. import {vec2} from 'gl-matrix';
  6. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  7. import Feature from 'sentry/components/acl/feature';
  8. import {DifferentialFlamegraphLayout} from 'sentry/components/profiling/flamegraph/differentialFlamegraphLayout';
  9. import {FlamegraphContextMenu} from 'sentry/components/profiling/flamegraph/flamegraphContextMenu';
  10. import {DifferentialFlamegraphDrawer} from 'sentry/components/profiling/flamegraph/flamegraphDrawer/differentialFlamegraphDrawer';
  11. import {DifferentialFlamegraphToolbar} from 'sentry/components/profiling/flamegraph/flamegraphToolbar/differentialFlamegraphToolbar';
  12. import {FlamegraphZoomView} from 'sentry/components/profiling/flamegraph/flamegraphZoomView';
  13. import {FlamegraphZoomViewMinimap} from 'sentry/components/profiling/flamegraph/flamegraphZoomViewMinimap';
  14. import {
  15. CanvasPoolManager,
  16. useCanvasScheduler,
  17. } from 'sentry/utils/profiling/canvasScheduler';
  18. import {CanvasView} from 'sentry/utils/profiling/canvasView';
  19. import type {DifferentialFlamegraph as DifferentialFlamegraphModel} from 'sentry/utils/profiling/differentialFlamegraph';
  20. import {FlamegraphStateProvider} from 'sentry/utils/profiling/flamegraph/flamegraphStateProvider/flamegraphContextProvider';
  21. import {FlamegraphThemeProvider} from 'sentry/utils/profiling/flamegraph/flamegraphThemeProvider';
  22. import {useFlamegraphPreferences} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphPreferences';
  23. import {useFlamegraphProfiles} from 'sentry/utils/profiling/flamegraph/hooks/useFlamegraphProfiles';
  24. import {useFlamegraphTheme} from 'sentry/utils/profiling/flamegraph/useFlamegraphTheme';
  25. import {FlamegraphCanvas} from 'sentry/utils/profiling/flamegraphCanvas';
  26. import type {FlamegraphFrame} from 'sentry/utils/profiling/flamegraphFrame';
  27. import type {Frame} from 'sentry/utils/profiling/frame';
  28. import {
  29. computeConfigViewWithStrategy,
  30. formatColorForFrame,
  31. initializeFlamegraphRenderer,
  32. useResizeCanvasObserver,
  33. } from 'sentry/utils/profiling/gl/utils';
  34. import {useCurrentProjectFromRouteParam} from 'sentry/utils/profiling/hooks/useCurrentProjectFromRouteParam';
  35. import {useDifferentialFlamegraphModel} from 'sentry/utils/profiling/hooks/useDifferentialFlamegraphModel';
  36. import {useDifferentialFlamegraphQuery} from 'sentry/utils/profiling/hooks/useDifferentialFlamegraphQuery';
  37. import {FlamegraphRenderer2D} from 'sentry/utils/profiling/renderers/flamegraphRenderer2D';
  38. import {FlamegraphRendererWebGL} from 'sentry/utils/profiling/renderers/flamegraphRendererWebGL';
  39. import {Rect} from 'sentry/utils/profiling/speedscope';
  40. import {useLocation} from 'sentry/utils/useLocation';
  41. import usePageFilters from 'sentry/utils/usePageFilters';
  42. import {LOADING_PROFILE_GROUP} from 'sentry/views/profiling/profileGroupProvider';
  43. const noopFormatDuration = () => '';
  44. function applicationFrameOnly(frame: Frame): boolean {
  45. return frame.is_application;
  46. }
  47. function systemFrameOnly(frame: Frame): boolean {
  48. return !frame.is_application;
  49. }
  50. function DifferentialFlamegraphView() {
  51. const location = useLocation();
  52. const selection = usePageFilters();
  53. const flamegraphTheme = useFlamegraphTheme();
  54. const {colorCoding} = useFlamegraphPreferences();
  55. const {selectedRoot} = useFlamegraphProfiles();
  56. const [frameFilterSetting, setFrameFilterSetting] = useState<
  57. 'application' | 'system' | 'all'
  58. >('all');
  59. const frameFilter =
  60. frameFilterSetting === 'application'
  61. ? applicationFrameOnly
  62. : frameFilterSetting === 'system'
  63. ? systemFrameOnly
  64. : undefined;
  65. const project = useCurrentProjectFromRouteParam();
  66. const [negated, setNegated] = useState<boolean>(false);
  67. const canvasPoolManager = useMemo(() => new CanvasPoolManager(), []);
  68. const scheduler = useCanvasScheduler(canvasPoolManager);
  69. const {before, after} = useDifferentialFlamegraphQuery({
  70. projectID: parseInt((project?.id as string) ?? 0, 10),
  71. breakpoint: location.query.breakpoint as unknown as number,
  72. environments: selection.selection.environments,
  73. fingerprint: location.query.fingerprint as unknown as string,
  74. });
  75. const differentialFlamegraph = useDifferentialFlamegraphModel({
  76. before,
  77. after,
  78. frameFilter,
  79. negated,
  80. });
  81. const [flamegraphCanvasRef, setFlamegraphCanvasRef] =
  82. useState<HTMLCanvasElement | null>(null);
  83. const [flamegraphOverlayCanvasRef, setFlamegraphOverlayCanvasRef] =
  84. useState<HTMLCanvasElement | null>(null);
  85. const [flamegraphMiniMapCanvasRef, setFlamegraphMiniMapCanvasRef] =
  86. useState<HTMLCanvasElement | null>(null);
  87. const [flamegraphMiniMapOverlayCanvasRef, setFlamegraphMiniMapOverlayCanvasRef] =
  88. useState<HTMLCanvasElement | null>(null);
  89. const flamegraphCanvas = useMemo(() => {
  90. if (!flamegraphCanvasRef) {
  91. return null;
  92. }
  93. return new FlamegraphCanvas(flamegraphCanvasRef, vec2.fromValues(0, 0));
  94. }, [flamegraphCanvasRef]);
  95. const flamegraphView = useMemo<CanvasView<DifferentialFlamegraphModel> | null>(
  96. () => {
  97. if (!flamegraphCanvas || !differentialFlamegraph.differentialFlamegraph) {
  98. return null;
  99. }
  100. const newView = new CanvasView({
  101. canvas: flamegraphCanvas,
  102. model: differentialFlamegraph.differentialFlamegraph,
  103. options: {
  104. inverted: differentialFlamegraph.differentialFlamegraph.inverted,
  105. minWidth:
  106. differentialFlamegraph.differentialFlamegraph.profile.minFrameDuration,
  107. barHeight: flamegraphTheme.SIZES.BAR_HEIGHT,
  108. depthOffset: flamegraphTheme.SIZES.AGGREGATE_FLAMEGRAPH_DEPTH_OFFSET,
  109. configSpaceTransform: undefined,
  110. },
  111. });
  112. return newView;
  113. },
  114. // We skip position.view dependency because it will go into an infinite loop
  115. [differentialFlamegraph.differentialFlamegraph, flamegraphCanvas, flamegraphTheme]
  116. );
  117. // Uses a useLayoutEffect to ensure that these top level/global listeners are added before
  118. // any of the children components effects actually run. This way we do not lose events
  119. // when we register/unregister these top level listeners.
  120. useLayoutEffect(() => {
  121. if (!flamegraphCanvas || !flamegraphView) {
  122. return undefined;
  123. }
  124. // This code below manages the synchronization of the config views between spans and flamegraph
  125. // We do so by listening to the config view change event and then updating the other views accordingly which
  126. // allows us to keep the X axis in sync between the two views but keep the Y axis independent
  127. const onConfigViewChange = (rect: Rect, sourceConfigViewChange: CanvasView<any>) => {
  128. if (sourceConfigViewChange === flamegraphView) {
  129. flamegraphView.setConfigView(rect.withHeight(flamegraphView.configView.height));
  130. }
  131. canvasPoolManager.draw();
  132. };
  133. const onTransformConfigView = (
  134. mat: mat3,
  135. sourceTransformConfigView: CanvasView<any>
  136. ) => {
  137. if (sourceTransformConfigView === flamegraphView) {
  138. flamegraphView.transformConfigView(mat);
  139. }
  140. canvasPoolManager.draw();
  141. };
  142. const onResetZoom = () => {
  143. flamegraphView.resetConfigView(flamegraphCanvas);
  144. canvasPoolManager.draw();
  145. };
  146. const onZoomIntoFrame = (frame: FlamegraphFrame, strategy: 'min' | 'exact') => {
  147. const newConfigView = computeConfigViewWithStrategy(
  148. strategy,
  149. flamegraphView.configView,
  150. new Rect(frame.start, frame.depth, frame.end - frame.start, 1)
  151. ).transformRect(flamegraphView.configSpaceTransform);
  152. flamegraphView.setConfigView(newConfigView);
  153. canvasPoolManager.draw();
  154. };
  155. scheduler.on('set config view', onConfigViewChange);
  156. scheduler.on('transform config view', onTransformConfigView);
  157. scheduler.on('reset zoom', onResetZoom);
  158. scheduler.on('zoom at frame', onZoomIntoFrame);
  159. return () => {
  160. scheduler.off('set config view', onConfigViewChange);
  161. scheduler.off('transform config view', onTransformConfigView);
  162. scheduler.off('reset zoom', onResetZoom);
  163. scheduler.off('zoom at frame', onZoomIntoFrame);
  164. };
  165. }, [canvasPoolManager, flamegraphCanvas, flamegraphView, scheduler]);
  166. const flamegraphCanvases = useMemo(() => {
  167. return [flamegraphCanvasRef, flamegraphOverlayCanvasRef];
  168. }, [flamegraphCanvasRef, flamegraphOverlayCanvasRef]);
  169. const flamegraphCanvasBounds = useResizeCanvasObserver(
  170. flamegraphCanvases,
  171. canvasPoolManager,
  172. flamegraphCanvas,
  173. flamegraphView
  174. );
  175. const minimapCanvases = useMemo(() => {
  176. return [flamegraphMiniMapCanvasRef, flamegraphMiniMapOverlayCanvasRef];
  177. }, [flamegraphMiniMapCanvasRef, flamegraphMiniMapOverlayCanvasRef]);
  178. const flamegraphMiniMapCanvas = useMemo(() => {
  179. if (!flamegraphMiniMapCanvasRef) {
  180. return null;
  181. }
  182. return new FlamegraphCanvas(flamegraphMiniMapCanvasRef, vec2.fromValues(0, 0));
  183. }, [flamegraphMiniMapCanvasRef]);
  184. useResizeCanvasObserver(
  185. minimapCanvases,
  186. canvasPoolManager,
  187. flamegraphMiniMapCanvas,
  188. null
  189. );
  190. const flamegraphRenderer = useMemo(() => {
  191. if (!flamegraphCanvasRef || !differentialFlamegraph) {
  192. return null;
  193. }
  194. const renderer = initializeFlamegraphRenderer(
  195. [FlamegraphRendererWebGL, FlamegraphRenderer2D],
  196. [
  197. flamegraphCanvasRef,
  198. differentialFlamegraph.differentialFlamegraph,
  199. flamegraphTheme,
  200. {
  201. colorCoding,
  202. draw_border: true,
  203. },
  204. ]
  205. );
  206. if (renderer === null) {
  207. Sentry.captureException('Failed to initialize a flamegraph renderer');
  208. addErrorMessage('Failed to initialize renderer');
  209. return null;
  210. }
  211. return renderer;
  212. }, [colorCoding, differentialFlamegraph, flamegraphCanvasRef, flamegraphTheme]);
  213. const getFrameColor = useCallback(
  214. (frame: FlamegraphFrame) => {
  215. if (!flamegraphRenderer) {
  216. return '';
  217. }
  218. return formatColorForFrame(frame, flamegraphRenderer);
  219. },
  220. [flamegraphRenderer]
  221. );
  222. const rootNodes = useMemo(() => {
  223. return selectedRoot
  224. ? [selectedRoot]
  225. : differentialFlamegraph.differentialFlamegraph.root.children;
  226. }, [selectedRoot, differentialFlamegraph.differentialFlamegraph.root]);
  227. const referenceNode = useMemo(
  228. () =>
  229. selectedRoot ? selectedRoot : differentialFlamegraph.differentialFlamegraph.root,
  230. [selectedRoot, differentialFlamegraph.differentialFlamegraph.root]
  231. );
  232. return (
  233. <Feature features={['profiling-differential-flamegraph-page']}>
  234. <DifferentialFlamegraphContainer>
  235. <DifferentialFlamegraphToolbar
  236. frameFilter={frameFilterSetting}
  237. onFrameFilterChange={setFrameFilterSetting}
  238. negated={negated}
  239. onNegatedChange={setNegated}
  240. flamegraph={differentialFlamegraph.differentialFlamegraph}
  241. canvasPoolManager={canvasPoolManager}
  242. />
  243. <DifferentialFlamegraphLayout
  244. minimap={
  245. <FlamegraphZoomViewMinimap
  246. canvasPoolManager={canvasPoolManager}
  247. flamegraph={differentialFlamegraph.differentialFlamegraph}
  248. flamegraphMiniMapCanvas={flamegraphMiniMapCanvas}
  249. flamegraphMiniMapCanvasRef={flamegraphMiniMapCanvasRef}
  250. flamegraphMiniMapOverlayCanvasRef={flamegraphMiniMapOverlayCanvasRef}
  251. flamegraphMiniMapView={flamegraphView}
  252. setFlamegraphMiniMapCanvasRef={setFlamegraphMiniMapCanvasRef}
  253. setFlamegraphMiniMapOverlayCanvasRef={setFlamegraphMiniMapOverlayCanvasRef}
  254. />
  255. }
  256. flamegraph={
  257. <FlamegraphZoomView
  258. scheduler={scheduler}
  259. profileGroup={
  260. differentialFlamegraph.afterProfileGroup ?? LOADING_PROFILE_GROUP
  261. }
  262. disableGrid
  263. disableCallOrderSort
  264. disableColorCoding
  265. canvasBounds={flamegraphCanvasBounds}
  266. canvasPoolManager={canvasPoolManager}
  267. flamegraph={differentialFlamegraph.differentialFlamegraph}
  268. flamegraphRenderer={flamegraphRenderer}
  269. flamegraphCanvas={flamegraphCanvas}
  270. flamegraphCanvasRef={flamegraphCanvasRef}
  271. flamegraphOverlayCanvasRef={flamegraphOverlayCanvasRef}
  272. flamegraphView={flamegraphView}
  273. setFlamegraphCanvasRef={setFlamegraphCanvasRef}
  274. setFlamegraphOverlayCanvasRef={setFlamegraphOverlayCanvasRef}
  275. contextMenu={FlamegraphContextMenu}
  276. />
  277. }
  278. flamegraphDrawer={
  279. <DifferentialFlamegraphDrawer
  280. profileGroup={
  281. differentialFlamegraph.afterProfileGroup ?? LOADING_PROFILE_GROUP
  282. }
  283. getFrameColor={getFrameColor}
  284. referenceNode={referenceNode}
  285. rootNodes={rootNodes}
  286. flamegraph={differentialFlamegraph.differentialFlamegraph}
  287. formatDuration={
  288. differentialFlamegraph.differentialFlamegraph
  289. ? differentialFlamegraph.differentialFlamegraph.formatter
  290. : noopFormatDuration
  291. }
  292. canvasPoolManager={canvasPoolManager}
  293. canvasScheduler={scheduler}
  294. />
  295. }
  296. />
  297. </DifferentialFlamegraphContainer>
  298. </Feature>
  299. );
  300. }
  301. const DifferentialFlamegraphContainer = styled('div')`
  302. display: flex;
  303. flex-direction: column;
  304. flex: 1;
  305. ~ footer {
  306. display: none;
  307. }
  308. `;
  309. function DifferentialFlamegraphWithProviders() {
  310. return (
  311. <FlamegraphThemeProvider>
  312. <FlamegraphStateProvider
  313. initialState={{
  314. preferences: {
  315. sorting: 'alphabetical',
  316. view: 'top down',
  317. },
  318. }}
  319. >
  320. <DifferentialFlamegraphView />
  321. </FlamegraphStateProvider>
  322. </FlamegraphThemeProvider>
  323. );
  324. }
  325. export default DifferentialFlamegraphWithProviders;