@parca/profile 0.19.47 → 0.19.49

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.49](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.48...@parca/profile@0.19.49) (2025-09-08)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.48](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.47...@parca/profile@0.19.48) (2025-09-03)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.47](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.46...@parca/profile@0.19.47) (2025-09-02)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/MetricsContextMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,KAAK,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC;CAC5E;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,eAAe,EAAE,CAAC;CAChG;AAED,MAAM,MAAM,wBAAwB,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAE5E,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,QAAA,MAAM,kBAAkB,GAAI,+DAMzB,uBAAuB,KAAG,GAAG,CAAC,OAgEhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,KAAK,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC;CAC5E;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,eAAe,EAAE,CAAC;CAChG;AAED,MAAM,MAAM,wBAAwB,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAE5E,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,QAAA,MAAM,kBAAkB,GAAI,+DAMzB,uBAAuB,KAAG,GAAG,CAAC,OAqEhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/MetricsContextMenu/index.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import { Item, Menu, Submenu } from 'react-contexify';
 import { useParcaContext } from '@parca/components';
+import { testId } from '@parca/test-utils';
 const MetricsContextMenu = ({ menuId, closestPoint, series, trackVisibility, menuItems, }) => {
     const { isDarkMode } = useParcaContext();
     const renderMenuItem = (item) => {
@@ -31,6 +32,6 @@ const MetricsContextMenu = ({ menuId, closestPoint, series, trackVisibility, men
             return (_jsx(Item, { id: menuItem.id, onClick: () => menuItem.onClick(closestPoint, series), disabled: menuItem.disabled?.(closestPoint, series) ?? false, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [menuItem.icon != null && menuItem.icon !== '' && _jsx(Icon, { icon: menuItem.icon }), _jsx("div", { children: menuItem.label })] }) }, menuItem.id));
         }
     };
-    return (_jsx(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: menuItems.map(renderMenuItem) }));
+    return (_jsx(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', ...testId('METRICS_GRAPH_CONTEXT_MENU'), children: menuItems.map(renderMenuItem) }));
 };
 export default MetricsContextMenu;

package/dist/MetricsGraph/MetricsTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAqBA,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAkCD,QAAA,MAAM,cAAc,GAAI,mCAAiC,KAAK,KAAG,GAAG,CAAC,OA2DpE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAuBA,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAkCD,QAAA,MAAM,cAAc,GAAI,mCAAiC,KAAK,KAAG,GAAG,CAAC,OAiEpE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -13,6 +13,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
 import { usePopper } from 'react-popper';
+import { testId } from '@parca/test-utils';
 const virtualElement = {
     getBoundingClientRect: () => {
         const emptyRect = {
@@ -86,6 +87,6 @@ const MetricsTooltip = ({ x, y, contextElement, content }) => {
     if (content == null) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-50", children: _jsx("div", { className: "flex max-w-lg", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2", children: content }) }) }) }));
+    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, ...testId('METRICS_GRAPH_TOOLTIP'), className: "z-50", children: _jsx("div", { className: "flex max-w-lg", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2", children: content }) }) }) }));
 };
 export default MetricsTooltip;

package/dist/MetricsGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAOrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AAKjE,OAA2B,EACzB,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAI9B,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,CAAC,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC9C,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrF;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,YAAY,GAAI,uJAcnB,KAAK,KAAG,GAAG,CAAC,OA2Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,YAAY,EAAC,wBAAwB,EAAE,eAAe,EAAE,kBAAkB,EAAC,CAAC;AAE5E,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,uJAc7B,KAAK,KAAG,GAAG,CAAC,OA6ad,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAOrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AAMjE,OAA2B,EACzB,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAI9B,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,CAAC,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC9C,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrF;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,YAAY,GAAI,uJAcnB,KAAK,KAAG,GAAG,CAAC,OA+Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,YAAY,EAAC,wBAAwB,EAAE,eAAe,EAAE,kBAAkB,EAAC,CAAC;AAE5E,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,uJAc7B,KAAK,KAAG,GAAG,CAAC,OA6ad,CAAC"}

package/dist/MetricsGraph/index.js

@@ -17,6 +17,7 @@ import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
 import { useContextMenu } from 'react-contexify';
 import { DateTimeRange, useParcaContext } from '@parca/components';
+import { testId } from '@parca/test-utils';
 import { formatDate, formatForTimespan, getPrecision, valueFormatter } from '@parca/utilities';
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
@@ -25,7 +26,7 @@ import MetricsInfoPanel from './MetricsInfoPanel';
 import MetricsTooltip from './MetricsTooltip';
 const MetricsGraph = ({ data, from, to, onSampleClick, setTimeRange, yAxisLabel, yAxisUnit, width = 0, height = 0, margin = 0, selectedPoint, contextMenuItems, renderTooltipContent, }) => {
     const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
-    return (_jsxs("div", { className: "relative", onClick: () => isInfoPanelOpen && setIsInfoPanelOpen(false), children: [_jsx("div", { className: "absolute right-0 top-0", children: _jsx(MetricsInfoPanel, { isInfoPanelOpen: isInfoPanelOpen, onInfoIconClick: () => setIsInfoPanelOpen(true) }) }), _jsx(RawMetricsGraph, { data: data, from: from, to: to, onSampleClick: onSampleClick, setTimeRange: setTimeRange, yAxisLabel: yAxisLabel, yAxisUnit: yAxisUnit, width: width, height: height, margin: margin, selectedPoint: selectedPoint, contextMenuItems: contextMenuItems, renderTooltipContent: renderTooltipContent })] }));
+    return (_jsxs("div", { className: "relative", ...testId('METRICS_GRAPH'), onClick: () => isInfoPanelOpen && setIsInfoPanelOpen(false), children: [_jsx("div", { className: "absolute right-0 top-0", children: _jsx(MetricsInfoPanel, { isInfoPanelOpen: isInfoPanelOpen, onInfoIconClick: () => setIsInfoPanelOpen(true) }) }), _jsx(RawMetricsGraph, { data: data, from: from, to: to, onSampleClick: onSampleClick, setTimeRange: setTimeRange, yAxisLabel: yAxisLabel, yAxisUnit: yAxisUnit, width: width, height: height, margin: margin, selectedPoint: selectedPoint, contextMenuItems: contextMenuItems, renderTooltipContent: renderTooltipContent })] }));
 };
 export default MetricsGraph;
 export const parseValue = (value) => {

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAoB,gBAAgB,EAAsB,MAAM,IAAI,CAAC;AAC5E,OAAwB,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAEnE,UAAU,2BAA2B;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAEhC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,sBAAsB,GAAI,4IAY7B,2BAA2B,KAAG,GAAG,CAAC,OAyEpC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAoB,gBAAgB,EAAsB,MAAM,IAAI,CAAC;AAC5E,OAAwB,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAEnE,UAAU,2BAA2B;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAEhC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,sBAAsB,GAAI,4IAY7B,2BAA2B,KAAG,GAAG,CAAC,OAyEpC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { useURLState } from '@parca/components';
 import { Query } from '@parca/parser';
+import { testId } from '@parca/test-utils';
 import { ProfileDiffSource, ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
 const ProfileExplorerCompare = ({ queryClient, queryA, queryB, profileA, profileB, selectQueryA, selectQueryB, selectProfileA, selectProfileB, closeProfile, navigateTo, }) => {
@@ -25,6 +26,6 @@ const ProfileExplorerCompare = ({ queryClient, queryA, queryB, profileA, profile
         closeProfile('B');
     };
     const [compareAbsolute] = useURLState('compare_absolute');
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between gap-2 relative mb-2", children: [_jsx("div", { className: "flex-column flex-1 p-2 shadow-md rounded-md", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), _jsx("div", { className: "flex-column flex-1 p-2 shadow-md rounded-md", children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, navigateTo: navigateTo, suffix: "_b", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource(), compareAbsolute === 'true') }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
+    return (_jsxs("div", { ...testId('COMPARE_CONTAINER'), children: [_jsxs("div", { className: "flex justify-between gap-2 relative mb-2", children: [_jsx("div", { className: "flex-column flex-1 p-2 shadow-md rounded-md", ...testId('COMPARE_SIDE_A'), children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryA, profileSelection: profileA, selectProfile: selectProfileA, selectQuery: selectQueryA, closeProfile: closeProfileA, enforcedProfileName: '', comparing: true, navigateTo: navigateTo, suffix: "_a", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) }), _jsx("div", { className: "flex-column flex-1 p-2 shadow-md rounded-md", ...testId('COMPARE_SIDE_B'), children: _jsx(ProfileSelector, { queryClient: queryClient, querySelection: queryB, profileSelection: profileB, selectProfile: selectProfileB, selectQuery: selectQueryB, closeProfile: closeProfileB, enforcedProfileName: Query.parse(queryA.expression).profileName(), comparing: true, navigateTo: navigateTo, suffix: "_b", showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setShowMetricsGraph }) })] }), _jsx("div", { className: "grid grid-cols-1", children: profileA != null && profileB != null ? (_jsx("div", { ...testId('COMPARE_PROFILE_VIEW'), children: _jsx(ProfileViewWithData, { queryClient: queryClient, profileSource: new ProfileDiffSource(profileA.ProfileSource(), profileB.ProfileSource(), compareAbsolute === 'true') }) })) : (_jsx("div", { children: _jsx("div", { className: "my-20 text-center", children: _jsx("p", { children: "Select a profile on both sides." }) }) })) })] }));
 };
 export default ProfileExplorerCompare;

package/dist/ProfileMetricsGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,EAGL,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAwH5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,GAAI,aAAW,6BAA6B,KAAG,GAAG,CAAC,OAMvF,CAAC;AAEF,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,GAAI,mIAY1B,wBAAwB,KAAG,GAAG,CAAC,OAuWjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,EAGL,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAK3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAwH5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,GAAI,aAAW,6BAA6B,KAAG,GAAG,CAAC,OAMvF,CAAC;AAEF,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,GAAI,mIAY1B,wBAAwB,KAAG,GAAG,CAAC,OA0WjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileMetricsGraph/index.js

@@ -16,6 +16,7 @@ import { Icon } from '@iconify/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
 import { Query } from '@parca/parser';
+import { testId } from '@parca/test-utils';
 import { capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter } from '@parca/utilities';
 import { MergedProfileSelection } from '..';
 import MetricsGraph from '../MetricsGraph';
@@ -267,9 +268,9 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
                             return (_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [isDeltaType ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pr-3", children: "Per\u00A0Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.valuePerSecond, sampleUnit === 'nanoseconds' && sampleType === 'cpu'
                                                                                 ? 'CPU Cores'
                                                                                 : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.value ?? 0, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.valuePerSecond, sampleUnit, 5) })] })), originalPoint.duration != null &&
-                                                            Number(originalPoint.duration) > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(Number(originalPoint.duration.toString()), 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(new Date(timestampMs), timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: utilizationMetrics ? (_jsxs(_Fragment, { children: [Object.keys(attributesResourceMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Resource Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesResourceMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesResourceMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesResourceMap[name]}` }) }, name))) }), Object.keys(attributesMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesMap[name]}` }) }, name))) })] })) : (_jsx(_Fragment, { children: labels
+                                                            Number(originalPoint.duration) > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(Number(originalPoint.duration.toString()), 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(new Date(timestampMs), timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: utilizationMetrics ? (_jsxs(_Fragment, { children: [Object.keys(attributesResourceMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Resource Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesResourceMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", ...testId('TOOLTIP_LABEL'), children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesResourceMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesResourceMap[name]}` }) }, name))) }), Object.keys(attributesMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", ...testId('TOOLTIP_LABEL'), children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesMap[name]}` }) }, name))) })] })) : (_jsx(_Fragment, { children: labels
                                                     .filter((label) => label.name !== '__name__')
-                                                    .map((label) => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, label.name))) })) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }));
+                                                    .map((label) => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", ...testId('TOOLTIP_LABEL'), children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, label.name))) })) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }));
                         }
                     }
                     return null;

package/dist/ProfileView/components/DiffLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiffLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/DiffLegend.tsx"],"names":[],"mappings":"AA0DA,QAAA,MAAM,UAAU,QAAO,GAAG,CAAC,OAqD1B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DiffLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/DiffLegend.tsx"],"names":[],"mappings":"AA2DA,QAAA,MAAM,UAAU,QAAO,GAAG,CAAC,OAqD1B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/ProfileView/components/DiffLegend.js

@@ -15,6 +15,7 @@ import { Fragment, useState } from 'react';
 import { Popover, Transition } from '@headlessui/react';
 import { usePopper } from 'react-popper';
 import { selectDarkMode, useAppSelector } from '@parca/store';
+import { testId } from '@parca/test-utils';
 import { getIncreasedSpanColor, getNewSpanColor, getReducedSpanColor } from '@parca/utilities';
 const transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
 const DiffLegendBar = ({ onMouseEnter, onMouseLeave, }) => {
@@ -45,6 +46,6 @@ const DiffLegend = () => {
     const handleMouseLeave = () => {
         setShowLegendTooltip(false);
     };
-    return (_jsxs("div", { className: "mt-1 mb-2 hidden md:block", id: "h-diff-legend", children: [_jsxs("div", { ref: setReferenceElement, className: "flex items-center justify-center", children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] }), _jsx(Popover, { className: "relative", children: () => (_jsx(Transition, { show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1", children: _jsx(Popover.Panel, { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx("div", { className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "bg-gray-50 p-4 dark:bg-gray-800", children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", { className: "block text-sm text-gray-500 dark:text-gray-50", children: "This is a differential flame graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." })] }) }) }) })) })] }));
+    return (_jsxs("div", { className: "mt-1 mb-2 hidden md:block", id: "h-diff-legend", ...testId('DIFF_LEGEND'), children: [_jsxs("div", { ref: setReferenceElement, className: "flex items-center justify-center", children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] }), _jsx(Popover, { className: "relative", children: () => (_jsx(Transition, { show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1", children: _jsx(Popover.Panel, { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx("div", { className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5", children: _jsxs("div", { className: "bg-gray-50 p-4 dark:bg-gray-800", children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", { className: "block text-sm text-gray-500 dark:text-gray-50", children: "This is a differential flame graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." })] }) }) }) })) })] }));
 };
 export default DiffLegend;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.47",
+  "version": "0.19.49",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.3",
-    "@parca/components": "0.16.366",
+    "@parca/components": "0.16.368",
     "@parca/dynamicsize": "0.16.65",
     "@parca/hooks": "0.0.100",
     "@parca/icons": "0.16.72",
     "@parca/parser": "0.16.79",
     "@parca/store": "0.16.184",
-    "@parca/test-utils": "0.0.8",
+    "@parca/test-utils": "0.0.10",
     "@parca/utilities": "0.0.107",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
@@ -79,5 +79,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "bb4ac9df3124432f6733cec5d84e74a68ad30338"
+  "gitHead": "2155157711df604f4114e8fbc92448727cf8392e"
 }

package/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -15,6 +15,7 @@ import {Icon} from '@iconify/react';
 import {Item, Menu, Submenu} from 'react-contexify';
 
 import {useParcaContext} from '@parca/components';
+import {testId} from '@parca/test-utils';
 
 import {Series, SeriesPoint} from '../';
 
@@ -110,7 +111,12 @@ const MetricsContextMenu = ({
   };
 
   return (
-    <Menu id={menuId} onVisibilityChange={trackVisibility} theme={isDarkMode ? 'dark' : ''}>
+    <Menu
+      id={menuId}
+      onVisibilityChange={trackVisibility}
+      theme={isDarkMode ? 'dark' : ''}
+      {...testId('METRICS_GRAPH_CONTEXT_MENU')}
+    >
       {menuItems.map(renderMenuItem)}
     </Menu>
   );

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -15,6 +15,8 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {usePopper} from 'react-popper';
 
+import {testId} from '@parca/test-utils';
+
 interface VirtualElement {
   getBoundingClientRect: () => DOMRect;
 }
@@ -107,7 +109,13 @@ const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element =>
   }
 
   return (
-    <div ref={setPopperElement} style={styles.popper} {...attributes.popper} className="z-50">
+    <div
+      ref={setPopperElement}
+      style={styles.popper}
+      {...attributes.popper}
+      {...testId('METRICS_GRAPH_TOOLTIP')}
+      className="z-50"
+    >
       <div className="flex max-w-lg">
         <div className="m-auto">
           <div className="border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2">

package/src/MetricsGraph/index.tsx

@@ -19,6 +19,7 @@ import throttle from 'lodash.throttle';
 import {useContextMenu} from 'react-contexify';
 
 import {DateTimeRange, useParcaContext} from '@parca/components';
+import {testId} from '@parca/test-utils';
 import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities';
 
 import MetricsCircle from '../MetricsCircle';
@@ -81,7 +82,11 @@ const MetricsGraph = ({
 }: Props): JSX.Element => {
   const [isInfoPanelOpen, setIsInfoPanelOpen] = useState<boolean>(false);
   return (
-    <div className="relative" onClick={() => isInfoPanelOpen && setIsInfoPanelOpen(false)}>
+    <div
+      className="relative"
+      {...testId('METRICS_GRAPH')}
+      onClick={() => isInfoPanelOpen && setIsInfoPanelOpen(false)}
+    >
       <div className="absolute right-0 top-0">
         <MetricsInfoPanel
           isInfoPanelOpen={isInfoPanelOpen}

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -16,6 +16,7 @@ import {useState} from 'react';
 import {QueryServiceClient} from '@parca/client';
 import {useURLState} from '@parca/components';
 import {Query} from '@parca/parser';
+import {testId} from '@parca/test-utils';
 import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileDiffSource, ProfileSelection, ProfileViewWithData} from '..';
@@ -63,9 +64,9 @@ const ProfileExplorerCompare = ({
   const [compareAbsolute] = useURLState('compare_absolute');
 
   return (
-    <>
+    <div {...testId('COMPARE_CONTAINER')}>
       <div className="flex justify-between gap-2 relative mb-2">
-        <div className="flex-column flex-1 p-2 shadow-md rounded-md">
+        <div className="flex-column flex-1 p-2 shadow-md rounded-md" {...testId('COMPARE_SIDE_A')}>
           <ProfileSelector
             queryClient={queryClient}
             querySelection={queryA}
@@ -81,7 +82,7 @@ const ProfileExplorerCompare = ({
             setDisplayHideMetricsGraphButton={setShowMetricsGraph}
           />
         </div>
-        <div className="flex-column flex-1 p-2 shadow-md rounded-md">
+        <div className="flex-column flex-1 p-2 shadow-md rounded-md" {...testId('COMPARE_SIDE_B')}>
           <ProfileSelector
             queryClient={queryClient}
             querySelection={queryB}
@@ -100,7 +101,7 @@ const ProfileExplorerCompare = ({
       </div>
       <div className="grid grid-cols-1">
         {profileA != null && profileB != null ? (
-          <div>
+          <div {...testId('COMPARE_PROFILE_VIEW')}>
             <ProfileViewWithData
               queryClient={queryClient}
               profileSource={
@@ -120,7 +121,7 @@ const ProfileExplorerCompare = ({
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 };
 

package/src/ProfileMetricsGraph/index.tsx

@@ -29,6 +29,7 @@ import {
   useParcaContext,
 } from '@parca/components';
 import {Query} from '@parca/parser';
+import {testId} from '@parca/test-utils';
 import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
@@ -490,6 +491,7 @@ const ProfileMetricsGraph = ({
                                   <div
                                     key={name}
                                     className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                                    {...testId('TOOLTIP_LABEL')}
                                   >
                                     <TextWithTooltip
                                       text={`${name.replace('attributes.', '')}="${
@@ -511,6 +513,7 @@ const ProfileMetricsGraph = ({
                                   <div
                                     key={name}
                                     className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                                    {...testId('TOOLTIP_LABEL')}
                                   >
                                     <TextWithTooltip
                                       text={`${name.replace('attributes.', '')}="${
@@ -531,6 +534,7 @@ const ProfileMetricsGraph = ({
                                   <div
                                     key={label.name}
                                     className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                                    {...testId('TOOLTIP_LABEL')}
                                   >
                                     <TextWithTooltip
                                       text={`${label.name}="${label.value}"`}

package/src/ProfileView/components/DiffLegend.tsx

@@ -17,6 +17,7 @@ import {Popover, Transition} from '@headlessui/react';
 import {usePopper} from 'react-popper';
 
 import {selectDarkMode, useAppSelector} from '@parca/store';
+import {testId} from '@parca/test-utils';
 import {getIncreasedSpanColor, getNewSpanColor, getReducedSpanColor} from '@parca/utilities';
 
 const transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
@@ -74,7 +75,7 @@ const DiffLegend = (): JSX.Element => {
   };
 
   return (
-    <div className="mt-1 mb-2 hidden md:block" id="h-diff-legend">
+    <div className="mt-1 mb-2 hidden md:block" id="h-diff-legend" {...testId('DIFF_LEGEND')}>
       <div ref={setReferenceElement} className="flex items-center justify-center">
         <span>Better</span>
         <DiffLegendBar onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />