@parca/profile 0.19.48 → 0.19.49

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 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

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/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.48",
+  "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.367",
+    "@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.9",
+    "@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": "71cd5d9ae150e768a939633ddd4a3489abe99e98"
+  "gitHead": "2155157711df604f4114e8fbc92448727cf8392e"
 }

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/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} />