chore: remove aliases, copy flamegraph and model into `public/app…

…/legacy` (#2261)

* chore: reduce macros and move og/packages directly into app

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grafana-pyroscope",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "repository": "[email protected]:grafana/pyroscope.git",
   "author": "Grafana Labs",
   "license": "AGPL-3.0-only",
@@ -64,14 +64,14 @@
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
+    "canvas": "^2.8.0",
+    "canvas-to-buffer": "^1.1.1",
     "clean-webpack-plugin": "^3.0.0",
     "contributor-faces": "^1.1.0",
     "conventional-changelog-cli": "^2.1.1",
     "copy-webpack-plugin": "^11.0.0",
     "cypress": "^12.11.0",
     "cypress-image-snapshot": "^4.0.1",
-    "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.0.0",
     "esbuild-loader": "^3.0.1",
     "eslint": "^8.40.0",
     "eslint-config-airbnb": "18.2.1",
@@ -135,6 +135,11 @@
     "color": "^3.1.3",
     "compression-streams-polyfill": "^0.1.4",
     "css-loader": "^4.0.0",
+    "d3": "^7.3.0",
+    "d3-array": "^3.1.1",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.0.0",
+    "d3-time": "^3.0.0",
     "file-saver": "^2.0.5",
     "graphviz-react": "^1.2.5",
     "jquery": "^3.6.4",
@@ -173,5 +178,9 @@
   },
   "optionalDependencies": {
     "@pyroscope/nodejs": "^0.2.5"
+  },
+  "resolutions": {
+    "d3-graphviz": "^5.1.0",
+    "jquery": "^3.6.4"
   }
 }

public/app/components/CustomDatePicker.tsx

@@ -44,11 +44,11 @@ function CustomDatePicker({ from, until, onSubmit }: CustomDatePickerProps) {
   // Since our component state back when they change
   useEffect(() => {
     setSelectedDate({
-      ...selectedDate,
+      // ...selectedDate, -- we are replacing all values in the object, no need to keep the old one
       from: formatAsOBject(from),
       until: formatAsOBject(until),
     });
-  }, [selectedDate, from, until]);
+  }, [from, until]);
 
   const selectFromAsDate = getUTCdate(selectedDate.from, offset);
   const selectUntilAsDate = getUTCdate(selectedDate.until, offset);

public/app/components/ExportData.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // import { SimpleSingle as TestData } from '@utils/testData';
 import { render as testRender, screen } from '@testing-library/react';
-import { Profile } from '@pyroscope/models/src';
+import { Profile } from '@phlare/legacy/models';
 import 'web-streams-polyfill';
 import ExportData, { getFilename } from './ExportData';
 import { BrowserRouter } from 'react-router-dom';

public/app/components/ExportData.tsx

@@ -15,7 +15,7 @@ import { flameGraphUpload } from '@phlare/services/flamegraphcom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { format } from 'date-fns';
 import { isRouteActive, ROUTES } from '@phlare/pages/routes';
-import { Profile } from '@pyroscope/models/src';
+import { Profile } from '@phlare/legacy/models';
 import { Tooltip } from '@phlare/ui/Tooltip';
 import { useAppDispatch, useAppSelector } from '@phlare/redux/hooks';
 import { useLocation } from 'react-router-dom';

public/app/components/Heatmap/HeatmapTooltip.tsx

@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from 'react';
 
-import { getFormatter } from '@pyroscope/flamegraph/src/format/format';
+import { getFormatter } from '@phlare/legacy/flamegraph/format/format';
 import TooltipWrapper from '@phlare/components/TimelineChart/TooltipWrapper';
 import type { Heatmap } from '@phlare/services/render';
 import {

public/app/components/Heatmap/index.tsx

@@ -4,7 +4,7 @@ import Color from 'color';
 import cl from 'classnames';
 import { interpolateViridis } from 'd3-scale-chromatic';
 
-import { getFormatter } from '@pyroscope/flamegraph/src/format/format';
+import { getFormatter } from '@phlare/legacy/flamegraph/format/format';
 import type { Heatmap as HeatmapType } from '@phlare/services/render';
 import {
   SelectedAreaCoordsType,

public/app/components/TimelineChart/ExploreTooltip/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import Color from 'color';
-import { getFormatter } from '@pyroscope/flamegraph/src/format/format';
-import { Profile } from '@pyroscope/models/src';
+import { getFormatter } from '@phlare/legacy/flamegraph/format/format';
+import { Profile } from '@phlare/legacy/models';
 import { TimelineTooltip } from '../../TimelineTooltip';
 import { TooltipCallbackProps } from '../Tooltip.plugin';
 

public/app/components/TimelineChart/TimelineChartWrapper.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React, { ReactNode } from 'react';
 import Color from 'color';
-import type { Group } from '@pyroscope/models/src';
+import type { Group } from '@phlare/legacy/models';
 import type { Timeline } from '@phlare/models/timeline';
 import { Annotation } from '@phlare/models/annotation';
 import Legend from '@phlare/pages/tagExplorer/components/Legend';

public/app/components/exportToFlamegraphDotCom.hook.ts

@@ -1,4 +1,4 @@
-import { Profile } from '@pyroscope/models/src';
+import { Profile } from '@phlare/legacy/models';
 import { shareWithFlamegraphDotcom } from '@phlare/services/share';
 import { useAppDispatch } from '@phlare/redux/hooks';
 import handleError from '@phlare/util/handleError';

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/ContextMenu.spec.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/ContextMenu.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { MenuItem } from '@phlare/ui/Menu';
 import userEvent from '@testing-library/user-event';
 
@@ -47,12 +47,12 @@ describe('ContextMenu', () => {
     expect(queryByRole('menu')).not.toBeInTheDocument();
 
     // trigger a right click
-    userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
+    act(() => userEvent.click(screen.getByTestId('canvas'), { buttons: 2 }));
 
     expect(queryByRole('menu')).toBeVisible();
     expect(queryAllByRole('menuitem')).toHaveLength(1);
 
-    userEvent.click(getByRole('menuitem'));
+    act(() => userEvent.click(getByRole('menuitem')));
     expect(hasBeenClicked).toBe(true);
   });
 
@@ -71,14 +71,14 @@ describe('ContextMenu', () => {
 
     // trigger a right click
     xyToMenuItems.mockReturnValueOnce([<MenuItem key="1">1</MenuItem>]);
-    userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
+    act(() => userEvent.click(screen.getByTestId('canvas'), { buttons: 2 }));
     expect(queryAllByRole('menuitem')).toHaveLength(1);
 
     xyToMenuItems.mockReturnValueOnce([
       <MenuItem key="1">1</MenuItem>,
       <MenuItem key="2">2</MenuItem>,
     ]);
-    userEvent.click(screen.getByTestId('canvas'), { buttons: 2 });
+    act(() => userEvent.click(screen.getByTestId('canvas'), { buttons: 2 }));
     expect(queryAllByRole('menuitem')).toHaveLength(2);
   });
 });

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/ContextMenu.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/ContextMenu.tsx

@@ -70,7 +70,7 @@ export default function ContextMenu(props: ContextMenuProps) {
     return () => {
       canvasEl.removeEventListener('contextmenu', onContextMenu);
     };
-  }, [xyToMenuItems]);
+  }, [xyToMenuItems, canvasRef, onOpenCallback, toggleMenu]);
 
   return (
     <ControlledMenu

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/ContextMenuHighlight.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/ContextMenuHighlight.tsx

@@ -34,7 +34,7 @@ export default function ContextMenuHighlight(props: HighlightProps) {
       });
     },
     // refresh callback functions when they change
-    [node]
+    [node, barHeight]
   );
 
   return (

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx

@@ -92,13 +92,15 @@ const useSizeMode = (target: React.RefObject<HTMLDivElement>) => {
     return 'large';
   };
 
+  const targetEl = target.current;
+
   React.useLayoutEffect(() => {
-    if (target.current) {
-      const { width } = target.current.getBoundingClientRect();
+    if (targetEl) {
+      const { width } = targetEl.getBoundingClientRect();
 
       setSize(calcMode(width));
     }
-  }, [target.current]);
+  }, [targetEl]);
 
   useResizeObserver(target, (entry: ResizeObserverEntry) => {
     setSize(calcMode(entry.contentRect.width));

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Flamegraph.ts → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/Flamegraph.ts

@@ -6,8 +6,8 @@ import {
   singleFF,
   doubleFF,
   SpyName,
-} from '@pyroscope/models/src';
-import type { Units } from '@pyroscope/models/src';
+} from '@phlare/legacy/models';
+import type { Units } from '@phlare/legacy/models';
 import { PX_PER_LEVEL, BAR_HEIGHT, COLLAPSE_THRESHOLD } from './constants';
 import type { FlamegraphPalette } from './colorPalette';
 // there's a dependency cycle here but it should be fine
@@ -69,7 +69,7 @@ export default class Flamegraph {
     }
   }
 
-  public render() {
+  render() {
     const { rangeMin, rangeMax } = this.getRange();
 
     const props = {
@@ -408,7 +408,7 @@ export default class Flamegraph {
     }
   };
 
-  public isWithinBounds = (x: number, y: number) => {
+  isWithinBounds = (x: number, y: number) => {
     if (x < 0 || x > this.getCanvasWidth()) {
       return false;
     }
@@ -429,7 +429,7 @@ export default class Flamegraph {
    * Given x and y coordinates
    * return all information about the bar under those coordinates
    */
-  public xyToBar(x: number, y: number) {
+  xyToBar(x: number, y: number) {
     return this.parseXY(x, y).map((xyWithinBounds) => {
       const { i, j } = this.xyToBarIndex(x, y);
       const position = this.xyToBarPosition(xyWithinBounds);

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Flamegraph_render.ts → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/Flamegraph_render.ts

@@ -22,7 +22,7 @@ THIS SOFTWARE.
 */
 
 /* eslint-disable no-continue */
-import { createFF, Flamebearer, SpyName } from '@pyroscope/models/src';
+import { createFF, Flamebearer, SpyName } from '@phlare/legacy/models';
 import {
   formatPercent,
   getFormatter,

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/GraphVizPane.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/GraphVizPane.tsx

@@ -1,4 +1,4 @@
-import type { Flamebearer } from '@pyroscope/models/src';
+import type { Flamebearer } from '@phlare/legacy/models';
 import React, { useMemo } from 'react';
 import toGraphviz from '../../convert/toGraphviz';
 import styles from './GraphVizPanel.module.scss';
@@ -36,9 +36,11 @@ export function GraphVizPane({ flamebearer }: GraphVizPaneProps) {
   // so image sometimes moves out of the screen
   // to fix it we remounting graphViz component by updating key
   const key = `graphviz-pane-${fb?.appName || String(new Date().valueOf())}`;
+
+  // Assumes we can trust that a new `flamebearer` object is provided from the parent of `<GraphVizPane>` if it is different.
   const dotValue = useMemo(() => {
     return toGraphviz(fb);
-  }, [JSON.stringify(fb)]);
+  }, [fb]);
 
   return (
     <div className={styles.graphVizPane} key={key}>

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Header.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/Header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flamebearer } from '@pyroscope/models/src';
+import { Flamebearer } from '@phlare/legacy/models';
 import styles from './Header.module.css';
 import { FlamegraphPalette } from './colorPalette';
 import { DiffLegendPaletteDropdown } from './DiffLegendPaletteDropdown';

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Highlight.spec.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/Highlight.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Maybe } from 'true-myth';
 
@@ -36,7 +36,7 @@ describe('Highlight', () => {
         width: 100,
       })
     );
-    userEvent.hover(screen.getByTestId('canvas'));
+    act(() => userEvent.hover(screen.getByTestId('canvas')));
     expect(screen.getByTestId('flamegraph-highlight')).toBeVisible();
     expect(screen.getByTestId('flamegraph-highlight')).toHaveStyle({
       height: '50px',
@@ -47,7 +47,7 @@ describe('Highlight', () => {
 
     // hover outside the canvas
     xyToHighlightData.mockReturnValueOnce(Maybe.nothing());
-    userEvent.hover(screen.getByTestId('canvas'));
+    act(() => userEvent.hover(screen.getByTestId('canvas')));
     expect(screen.getByTestId('flamegraph-highlight')).not.toBeVisible();
   });
 });

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/Highlight.tsx → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/Highlight.tsx

@@ -1,5 +1,5 @@
 import { Maybe } from 'true-myth';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { DeepReadonly } from 'ts-essentials';
 import styles from './Highlight.module.css';
 
@@ -35,37 +35,41 @@ export default function Highlight(props: HighlightProps) {
     });
   }, [zoom]);
 
-  const onMouseMove = (e: MouseEvent) => {
-    const opt = xyToHighlightData(e.offsetX, e.offsetY);
-
-    if (opt.isJust) {
-      const data = opt.value;
-
-      setStyle({
-        visibility: 'visible',
-        height: `${barHeight}px`,
-        ...data,
-      });
-    } else {
-      // it doesn't map to a valid xy
-      // so it means we are hovering out
-      onMouseOut();
-    }
-  };
-
-  const onMouseOut = () => {
+  const onMouseOut = useCallback(() => {
     setStyle({
       ...style,
       visibility: 'hidden',
     });
-  };
+  }, [setStyle, style]);
+
+  const onMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const opt = xyToHighlightData(e.offsetX, e.offsetY);
+
+      if (opt.isJust) {
+        const data = opt.value;
+
+        setStyle({
+          visibility: 'visible',
+          height: `${barHeight}px`,
+          ...data,
+        });
+      } else {
+        // it doesn't map to a valid xy
+        // so it means we are hovering out
+        onMouseOut();
+      }
+    },
+    [setStyle, onMouseOut, barHeight, xyToHighlightData]
+  );
+
+  const canvasEl = canvasRef.current;
 
   React.useEffect(
     () => {
       // use closure to "cache" the current canvas reference
       // so that when cleaning up, it points to a valid canvas
       // (otherwise it would be null)
-      const canvasEl = canvasRef.current;
       if (!canvasEl) {
         return () => {};
       }
@@ -81,7 +85,7 @@ export default function Highlight(props: HighlightProps) {
     },
 
     // refresh callback functions when they change
-    [canvasRef.current, onMouseMove, onMouseOut]
+    [canvasEl, onMouseMove, onMouseOut]
   );
 
   return (

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/color.ts → public/app/legacy/flamegraph/FlameGraph/FlameGraphComponent/color.ts

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import Color from 'color';
 import { scaleLinear } from 'd3-scale';
-import type { SpyName } from '@pyroscope/models/src';
+import type { SpyName } from '@phlare/legacy/models';
 import murmurhash3_32_gc from './murmur3';
 import type { FlamegraphPalette } from './colorPalette';