@parca/profile 0.19.45 → 0.19.46

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.46](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.45...@parca/profile@0.19.46) (2025-08-28)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.45](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.44...@parca/profile@0.19.45) (2025-08-28)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileView/components/GroupByLabelsDropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/GroupByLabelsDropdown/index.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,qBAAqB,GAAI,uCAAqC,KAAK,KAAG,GAAG,CAAC,OA0E/E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/GroupByLabelsDropdown/index.tsx"],"names":[],"mappings":"AAwBA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,qBAAqB,GAAI,uCAAqC,KAAK,KAAG,GAAG,CAAC,OAoF/E,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/ProfileView/components/GroupByLabelsDropdown/index.js

@@ -12,9 +12,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import Select from 'react-select';
+import { testId } from '@parca/test-utils';
 import { FIELD_LABELS } from '../../../ProfileFlameGraph/FlameGraphArrow';
 const GroupByLabelsDropdown = ({ labels, groupBy, setGroupByLabels }) => {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("label", { className: "text-sm", children: "Group by" }) }), _jsx(Select, { id: "h-group-by-labels-selector", isMulti: true, defaultMenuIsOpen: false, defaultValue: undefined, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm rounded-md bg-white", classNamePrefix: "parca-select", value: groupBy
+    return (_jsxs("div", { className: "flex flex-col", ...testId('GROUP_BY_CONTAINER'), children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx("label", { className: "text-sm", ...testId('GROUP_BY_LABEL'), children: "Group by" }) }), _jsx(Select, { isMulti: true, defaultMenuIsOpen: false, defaultValue: undefined, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm rounded-md bg-white", classNamePrefix: "parca-select", menuPortalTarget: document.body, components: {
+                    // eslint-disable-next-line react/prop-types
+                    MenuList: ({ children, innerProps }) => (_jsx("div", { ...testId('GROUP_BY_SELECT_FLYOUT'), ...innerProps, children: children })),
+                }, value: groupBy
                     .filter(l => l.startsWith(FIELD_LABELS))
                     .map(l => ({ value: l, label: l.slice(FIELD_LABELS.length + 1) })), onChange: newValue => {
                     setGroupByLabels(newValue.map(option => option.value));

package/dist/ProfileView/components/ProfileFilters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAoB,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAE1E,eAAO,MAAM,gBAAgB,GAAI,QAAQ,aAAa,KAAG,OASxD,CAAC;AAyIF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,eAAoB,mBAAwB,KAAG,GAAG,CAAC,OAsM1E,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAoB,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAE1E,eAAO,MAAM,gBAAgB,GAAI,QAAQ,aAAa,KAAG,OASxD,CAAC;AAyIF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,eAAoB,mBAAwB,KAAG,GAAG,CAAC,OAyN1E,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/ProfileView/components/ProfileFilters/index.js

@@ -15,6 +15,7 @@ import { useCallback } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { Button, Input, Select } from '@parca/components';
+import { testId } from '@parca/test-utils';
 import { useProfileViewContext } from '../../context/ProfileViewContext';
 import { getPresetByKey, getPresetsForProfileType, isPresetKey } from './filterPresets';
 import { useProfileFilters } from './useProfileFilters';
@@ -154,11 +155,11 @@ const ProfileFilters = ({ readOnly = false } = {}) => {
         }
     }, [onApplyFilters]);
     const filtersToRender = localFilters.length > 0 ? localFilters : appliedFilters ?? [];
-    return (_jsxs("div", { className: "flex gap-2 w-full items-start", children: [_jsxs("div", { className: "flex-1 flex flex-wrap gap-2", children: [filtersToRender.map(filter => {
+    return (_jsxs("div", { className: "flex gap-2 w-full items-start", ...testId('PROFILE_FILTERS_CONTAINER'), children: [_jsxs("div", { className: "flex-1 flex flex-wrap gap-2", children: [filtersToRender.map(filter => {
                         const isNumberField = filter.field === 'address' || filter.field === 'line_number';
                         const matchTypeItems = isNumberField ? numberMatchTypeItems : stringMatchTypeItems;
                         const isPresetFilter = filter.type != null && isPresetKey(filter.type);
-                        return (_jsxs("div", { className: "flex items-center gap-0", children: [_jsx(Select, { items: filterTypeItems, selectedKey: filter.type, placeholder: "Select Filter", disabled: readOnly, onSelection: key => {
+                        return (_jsxs("div", { className: "flex items-center gap-0", children: [_jsx(Select, { items: filterTypeItems, selectedKey: filter.type, placeholder: "Select Filter", disabled: readOnly, ...testId('FILTER_TYPE_SELECT'), flyoutTestId: "filter-type-select-flyout", onSelection: key => {
                                         // Check if this is a preset selection
                                         if (isPresetKey(key)) {
                                             const preset = getPresetByKey(key);
@@ -190,7 +191,7 @@ const ProfileFilters = ({ readOnly = false } = {}) => {
                                                 });
                                             }
                                         }
-                                    }, className: cx('gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1', readOnly && isPresetFilter ? 'rounded-md' : 'rounded-l-md rounded-r-none', !readOnly && (isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none'), readOnly ? 'w-auto' : filter.type != null ? 'border-r-0 w-auto' : 'w-32'), hideCaretDropdown: readOnly }), filter.type != null && !isPresetFilter && (_jsxs(_Fragment, { children: [_jsx(Select, { items: fieldItems, selectedKey: filter.field ?? '', disabled: readOnly, onSelection: key => {
+                                    }, className: cx('gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1', readOnly && isPresetFilter ? 'rounded-md' : 'rounded-l-md rounded-r-none', !readOnly && (isPresetFilter ? 'rounded-r-none border-r-0' : 'rounded-r-none'), readOnly ? 'w-auto' : filter.type != null ? 'border-r-0 w-auto' : 'w-32'), hideCaretDropdown: readOnly }), filter.type != null && !isPresetFilter && (_jsxs(_Fragment, { children: [_jsx(Select, { items: fieldItems, selectedKey: filter.field ?? '', disabled: readOnly, ...testId('FILTER_FIELD_SELECT'), flyoutTestId: "filter-field-select-flyout", onSelection: key => {
                                                 const newField = key;
                                                 const isNewFieldNumber = newField === 'address' || newField === 'line_number';
                                                 const isCurrentFieldNumber = filter.field === 'address' || filter.field === 'line_number';
@@ -203,7 +204,7 @@ const ProfileFilters = ({ readOnly = false } = {}) => {
                                                 else {
                                                     updateFilter(filter.id, { field: newField });
                                                 }
-                                            }, className: cx('rounded-none border-r-0 w-32 gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1'), hideCaretDropdown: readOnly }), _jsx(Select, { items: matchTypeItems, selectedKey: filter.matchType ?? '', disabled: readOnly, onSelection: key => updateFilter(filter.id, { matchType: key }), className: cx('rounded-none border-r-0 gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1'), hideCaretDropdown: readOnly }), _jsx(Input, { placeholder: "Value", value: filter.value, disabled: readOnly, onChange: e => updateFilter(filter.id, { value: e.target.value }), onKeyDown: handleKeyDown, className: "rounded-none w-36 text-sm focus:outline-1" })] })), !readOnly && (_jsx(Button, { variant: "neutral", onClick: () => {
+                                            }, className: cx('rounded-none border-r-0 w-32 gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1'), hideCaretDropdown: readOnly }), _jsx(Select, { items: matchTypeItems, selectedKey: filter.matchType ?? '', disabled: readOnly, ...testId('FILTER_MATCH_TYPE_SELECT'), flyoutTestId: "filter-match-type-select-flyout", onSelection: key => updateFilter(filter.id, { matchType: key }), className: cx('rounded-none border-r-0 gap-0 focus:z-50 focus:relative focus:outline-1', readOnly ? '' : 'pr-1'), hideCaretDropdown: readOnly }), _jsx(Input, { placeholder: "Value", value: filter.value, disabled: readOnly, onChange: e => updateFilter(filter.id, { value: e.target.value }), onKeyDown: handleKeyDown, className: "rounded-none w-36 text-sm focus:outline-1", ...testId('FILTER_VALUE_INPUT') })] })), !readOnly && (_jsx(Button, { variant: "neutral", ...testId('FILTER_REMOVE_BUTTON'), onClick: () => {
                                         // If we're displaying local filters and this is the last one, reset everything
                                         if (localFilters.length > 0 && localFilters.length === 1) {
                                             resetFilters();
@@ -219,6 +220,6 @@ const ProfileFilters = ({ readOnly = false } = {}) => {
                                     }, className: cx('h-[38px] p-3', filter.type != null
                                         ? 'rounded-none rounded-r-md'
                                         : 'rounded-l-none rounded-r-md'), children: _jsx(Icon, { icon: "mdi:close", className: "h-4 w-4" }) }))] }, filter.id));
-                    }), !readOnly && localFilters.length > 0 && (_jsx(Button, { variant: "neutral", onClick: addFilter, className: "p-3 h-[38px]", children: _jsx(Icon, { icon: "mdi:filter-plus-outline", className: "h-4 w-4" }) })), !readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (_jsxs(Button, { variant: "neutral", onClick: addFilter, className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "mdi:filter-outline", className: "h-4 w-4" }), _jsx("span", { children: "Filter" })] }))] }), !readOnly && localFilters.length > 0 && (_jsx(Button, { variant: "primary", onClick: onApplyFilters, disabled: !hasUnsavedChanges || !localFilters.some(isFilterComplete), className: cx('flex items-center gap-2 sticky top-0'), children: _jsx("span", { children: "Apply" }) }))] }));
+                    }), !readOnly && localFilters.length > 0 && (_jsx(Button, { variant: "neutral", onClick: addFilter, className: "p-3 h-[38px]", ...testId('ADD_FILTER_BUTTON'), children: _jsx(Icon, { icon: "mdi:filter-plus-outline", className: "h-4 w-4" }) })), !readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (_jsxs(Button, { variant: "neutral", onClick: addFilter, className: "flex items-center gap-2", ...testId('ADD_FILTER_BUTTON'), children: [_jsx(Icon, { icon: "mdi:filter-outline", className: "h-4 w-4" }), _jsx("span", { children: "Filter" })] }))] }), !readOnly && localFilters.length > 0 && (_jsx(Button, { variant: "primary", onClick: onApplyFilters, disabled: !hasUnsavedChanges || !localFilters.some(isFilterComplete), className: cx('flex items-center gap-2 sticky top-0'), ...testId('APPLY_FILTERS_BUTTON'), children: _jsx("span", { children: "Apply" }) }))] }));
 };
 export default ProfileFilters;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.45",
+  "version": "0.19.46",
   "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.365",
+    "@parca/components": "0.16.366",
     "@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.7",
+    "@parca/test-utils": "0.0.8",
     "@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": "c427f3d04301d39138d77344d49a6bd44ab9d3d4"
+  "gitHead": "bc38b540d40201fc382ace82bc0803bf84034bfc"
 }

package/src/ProfileView/components/GroupByLabelsDropdown/index.tsx

@@ -13,6 +13,8 @@
 
 import Select from 'react-select';
 
+import {testId} from '@parca/test-utils';
+
 import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
 
 interface LabelOption {
@@ -28,13 +30,14 @@ interface Props {
 
 const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" {...testId('GROUP_BY_CONTAINER')}>
       <div className="flex items-center justify-between">
-        <label className="text-sm">Group by</label>
+        <label className="text-sm" {...testId('GROUP_BY_LABEL')}>
+          Group by
+        </label>
       </div>
 
       <Select<LabelOption, true>
-        id="h-group-by-labels-selector"
         isMulti
         defaultMenuIsOpen={false}
         defaultValue={undefined}
@@ -42,6 +45,15 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
         options={labels.map(label => ({label, value: `${FIELD_LABELS}.${label}`}))}
         className="parca-select-container text-sm rounded-md bg-white"
         classNamePrefix="parca-select"
+        menuPortalTarget={document.body}
+        components={{
+          // eslint-disable-next-line react/prop-types
+          MenuList: ({children, innerProps}) => (
+            <div {...testId('GROUP_BY_SELECT_FLYOUT')} {...innerProps}>
+              {children}
+            </div>
+          ),
+        }}
         value={groupBy
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}

package/src/ProfileView/components/ProfileFilters/index.tsx

@@ -17,6 +17,7 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
 import {Button, Input, Select, type SelectItem} from '@parca/components';
+import {testId} from '@parca/test-utils';
 
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 import {getPresetByKey, getPresetsForProfileType, isPresetKey} from './filterPresets';
@@ -204,7 +205,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
   const filtersToRender = localFilters.length > 0 ? localFilters : appliedFilters ?? [];
 
   return (
-    <div className="flex gap-2 w-full items-start">
+    <div className="flex gap-2 w-full items-start" {...testId('PROFILE_FILTERS_CONTAINER')}>
       <div className="flex-1 flex flex-wrap gap-2">
         {filtersToRender.map(filter => {
           const isNumberField = filter.field === 'address' || filter.field === 'line_number';
@@ -218,6 +219,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                 selectedKey={filter.type}
                 placeholder="Select Filter"
                 disabled={readOnly}
+                {...testId('FILTER_TYPE_SELECT')}
+                flyoutTestId="filter-type-select-flyout"
                 onSelection={key => {
                   // Check if this is a preset selection
                   if (isPresetKey(key)) {
@@ -266,6 +269,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={fieldItems}
                     selectedKey={filter.field ?? ''}
                     disabled={readOnly}
+                    {...testId('FILTER_FIELD_SELECT')}
+                    flyoutTestId="filter-field-select-flyout"
                     onSelection={key => {
                       const newField = key as ProfileFilter['field'];
                       const isNewFieldNumber = newField === 'address' || newField === 'line_number';
@@ -292,6 +297,8 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={matchTypeItems}
                     selectedKey={filter.matchType ?? ''}
                     disabled={readOnly}
+                    {...testId('FILTER_MATCH_TYPE_SELECT')}
+                    flyoutTestId="filter-match-type-select-flyout"
                     onSelection={key =>
                       updateFilter(filter.id, {matchType: key as ProfileFilter['matchType']})
                     }
@@ -309,6 +316,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     onChange={e => updateFilter(filter.id, {value: e.target.value})}
                     onKeyDown={handleKeyDown}
                     className="rounded-none w-36 text-sm focus:outline-1"
+                    {...testId('FILTER_VALUE_INPUT')}
                   />
                 </>
               )}
@@ -316,6 +324,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
               {!readOnly && (
                 <Button
                   variant="neutral"
+                  {...testId('FILTER_REMOVE_BUTTON')}
                   onClick={() => {
                     // If we're displaying local filters and this is the last one, reset everything
                     if (localFilters.length > 0 && localFilters.length === 1) {
@@ -345,13 +354,23 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
         })}
 
         {!readOnly && localFilters.length > 0 && (
-          <Button variant="neutral" onClick={addFilter} className="p-3 h-[38px]">
+          <Button
+            variant="neutral"
+            onClick={addFilter}
+            className="p-3 h-[38px]"
+            {...testId('ADD_FILTER_BUTTON')}
+          >
             <Icon icon="mdi:filter-plus-outline" className="h-4 w-4" />
           </Button>
         )}
 
         {!readOnly && localFilters.length === 0 && (appliedFilters?.length ?? 0) === 0 && (
-          <Button variant="neutral" onClick={addFilter} className="flex items-center gap-2">
+          <Button
+            variant="neutral"
+            onClick={addFilter}
+            className="flex items-center gap-2"
+            {...testId('ADD_FILTER_BUTTON')}
+          >
             <Icon icon="mdi:filter-outline" className="h-4 w-4" />
             <span>Filter</span>
           </Button>
@@ -364,6 +383,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
           onClick={onApplyFilters}
           disabled={!hasUnsavedChanges || !localFilters.some(isFilterComplete)}
           className={cx('flex items-center gap-2 sticky top-0')}
+          {...testId('APPLY_FILTERS_BUTTON')}
         >
           <span>Apply</span>
         </Button>