@parca/profile 0.19.52 → 0.19.54

package/dist/ProfileView/index.js

@@ -26,7 +26,7 @@ import { useVisualizationState } from './hooks/useVisualizationState';
 export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, sandwichData, }) => {
     const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
-    const { curPath, setCurPath, curPathArrow, setCurPathArrow, colorStackLegend, colorBy, groupBy, toggleGroupBy, setGroupByLabels, sandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
+    const { curPathArrow, setCurPathArrow, colorStackLegend, colorBy, groupBy, toggleGroupBy, setGroupByLabels, sandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
     const { colorMappings } = useProfileMetadata({
         flamegraphArrow: flamegraphData.arrow,
         metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -49,8 +49,6 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
             profileSource,
             total,
             filtered,
-            curPath,
-            setNewCurPath: setCurPath,
             curPathArrow,
             setNewCurPathArrow: setCurPathArrow,
             perf,

package/dist/ProfileViewWithData.js

@@ -39,7 +39,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
     const { protoFilters } = useProfileFilters();
     useEffect(() => {
         // If profile type is not delta, remove flamechart from the dashboard items
-        // and set it to flame if no other items are selected.
+        // and set it to flame graph if no other items are selected.
         if (profileSource == null) {
             return;
         }

package/dist/SimpleMatchers/index.js

@@ -16,7 +16,7 @@ import { Icon } from '@iconify/react';
 import { useQueryClient } from '@tanstack/react-query';
 import cx from 'classnames';
 import { useGrpcMetadata } from '@parca/components';
-import { testId } from '@parca/test-utils';
+import { TEST_IDS, testId } from '@parca/test-utils';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
 import { LabelProvider, useLabels } from '../contexts/SimpleMatchersLabelContext';
 import { useUtilizationLabels } from '../contexts/UtilizationLabelsContext';
@@ -242,9 +242,9 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
         };
     }, [queryRows, fetchLabelValuesUnified]);
     const isRowRegex = (row) => row.operator === '=~' || row.operator === '!~';
-    return (_jsxs("div", { className: `flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`, id: "simple-matchers", ...testId('SIMPLE_MATCHERS_CONTAINER'), children: [visibleRows.map((row, index) => (_jsxs("div", { className: "flex items-center", ...testId('SIMPLE_MATCHER_ROW'), children: [_jsx(Select, { items: labelNameOptions, onSelection: value => handleUpdateRow(index, 'labelName', value), placeholder: "Select label name", selectedKey: row.labelName, className: "rounded-tr-none rounded-br-none ring-0 focus:ring-0 outline-none", loading: labelNamesLoading, searchable: true, ...testId('LABEL_NAME_SELECT') }), _jsx(Select, { items: operatorOptions, onSelection: value => handleUpdateRow(index, 'operator', value), selectedKey: row.operator, className: "rounded-none ring-0 focus:ring-0 outline-none", ...testId('OPERATOR_SELECT') }), _jsx(Select, { items: transformLabelsForSelect(row.labelValues), onSelection: value => handleUpdateRow(index, 'labelValue', value), placeholder: "Select label value", selectedKey: row.labelValue, className: "rounded-none ring-0 focus:ring-0 outline-none max-w-48", optionsClassname: cx('max-w-[300px]', {
+    return (_jsxs("div", { className: `flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`, id: "simple-matchers", ...testId(TEST_IDS.SIMPLE_MATCHERS_CONTAINER), children: [visibleRows.map((row, index) => (_jsxs("div", { className: "flex items-center", ...testId(TEST_IDS.SIMPLE_MATCHER_ROW), children: [_jsx(Select, { items: labelNameOptions, onSelection: value => handleUpdateRow(index, 'labelName', value), placeholder: "Select label name", selectedKey: row.labelName, className: "rounded-tr-none rounded-br-none ring-0 focus:ring-0 outline-none", loading: labelNamesLoading, searchable: true, ...testId(TEST_IDS.LABEL_NAME_SELECT) }), _jsx(Select, { items: operatorOptions, onSelection: value => handleUpdateRow(index, 'operator', value), selectedKey: row.operator, className: "rounded-none ring-0 focus:ring-0 outline-none", ...testId(TEST_IDS.OPERATOR_SELECT) }), _jsx(Select, { items: transformLabelsForSelect(row.labelValues), onSelection: value => handleUpdateRow(index, 'labelValue', value), placeholder: "Select label value", selectedKey: row.labelValue, className: "rounded-none ring-0 focus:ring-0 outline-none max-w-48", optionsClassname: cx('max-w-[300px]', {
                             'w-[300px]': isRowRegex(row),
-                        }), searchable: true, disabled: row.labelName === '', loading: row.isLoading, onButtonClick: () => handleLabelValueClick(index), editable: isRowRegex(row), ...testId('LABEL_VALUE_SELECT') }), _jsx("button", { onClick: () => removeRow(index), className: cx('p-2 border-gray-200 border rounded rounded-tl-none rounded-bl-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900'), ...testId('REMOVE_MATCHER_BUTTON'), children: _jsx(Icon, { icon: "carbon:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }, index))), queryRows.length > 3 && (_jsx("button", { onClick: () => setShowAll(!showAll), className: "mr-2 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900", ...testId(showAll ? 'SHOW_LESS_BUTTON' : 'SHOW_MORE_BUTTON'), children: showAll ? 'Show less' : `Show ${hiddenRowsCount} more` })), _jsx("button", { onClick: addNewRow, className: "p-2 border-gray-200 dark:bg-gray-900 dark:border-gray-600 border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", ...testId('ADD_MATCHER_BUTTON'), children: _jsx(Icon, { icon: "material-symbols:add", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }));
+                        }), searchable: true, disabled: row.labelName === '', loading: row.isLoading, onButtonClick: () => handleLabelValueClick(index), editable: isRowRegex(row), ...testId(TEST_IDS.LABEL_VALUE_SELECT) }), _jsx("button", { onClick: () => removeRow(index), className: cx('p-2 border-gray-200 border rounded rounded-tl-none rounded-bl-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900'), ...testId(TEST_IDS.REMOVE_MATCHER_BUTTON), children: _jsx(Icon, { icon: "carbon:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }, index))), queryRows.length > 3 && (_jsx("button", { onClick: () => setShowAll(!showAll), className: "mr-2 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900", ...testId(showAll ? TEST_IDS.SHOW_LESS_BUTTON : TEST_IDS.SHOW_MORE_BUTTON), children: showAll ? 'Show less' : `Show ${hiddenRowsCount} more` })), _jsx("button", { onClick: addNewRow, className: "p-2 border-gray-200 dark:bg-gray-900 dark:border-gray-600 border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", ...testId(TEST_IDS.ADD_MATCHER_BUTTON), children: _jsx(Icon, { icon: "material-symbols:add", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }));
 };
 export default function SimpleMathersWithProvider(props) {
     const labelNameFromMatchers = useMemo(() => {

package/dist/ViewMatchers/index.js

@@ -15,7 +15,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { useGrpcMetadata } from '@parca/components';
-import { testId } from '@parca/test-utils';
+import { TEST_IDS, testId } from '@parca/test-utils';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
 import CustomSelect from '../SimpleMatchers/Select';
 const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatchersString, start, end, currentQuery, }) => {
@@ -112,6 +112,6 @@ const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatch
             element: { active: _jsx(_Fragment, { children: value }), expanded: _jsx(_Fragment, { children: value }) },
         }));
     }, []);
-    return (_jsx("div", { className: "flex flex-wrap gap-2", ...testId('VIEW_MATCHERS_CONTAINER'), children: labelNames.map(labelName => (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "relative border shadow-sm px-4 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm flex gap-2 items-center justify-between bg-gray-100 dark:bg-gray-700 rounded-l-md border-gray-300 dark:border-gray-600", children: labelName }), _jsx(CustomSelect, { searchable: true, placeholder: "Select value", items: transformValuesForSelect(labelValuesMap[labelName] ?? []), onSelection: (value) => handleSelection(labelName, value), selectedKey: selectionsRef.current[labelName] ?? undefined, className: cx('rounded-l-none border-l-0', selectionsRef.current[labelName] != null && 'border-r-0 rounded-r-none'), loading: isLoading[labelName] ?? false }), selectionsRef.current[labelName] != null && (_jsx("button", { onClick: () => handleReset(labelName), className: "p-2 border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-600 border rounded-r-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", "aria-label": `Reset ${labelName} selection`, children: _jsx(Icon, { icon: "mdi:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) }))] }, labelName))) }));
+    return (_jsx("div", { className: "flex flex-wrap gap-2", ...testId(TEST_IDS.VIEW_MATCHERS_CONTAINER), children: labelNames.map(labelName => (_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "relative border shadow-sm px-4 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm flex gap-2 items-center justify-between bg-gray-100 dark:bg-gray-700 rounded-l-md border-gray-300 dark:border-gray-600", children: labelName }), _jsx(CustomSelect, { searchable: true, placeholder: "Select value", items: transformValuesForSelect(labelValuesMap[labelName] ?? []), onSelection: (value) => handleSelection(labelName, value), selectedKey: selectionsRef.current[labelName] ?? undefined, className: cx('rounded-l-none border-l-0', selectionsRef.current[labelName] != null && 'border-r-0 rounded-r-none'), loading: isLoading[labelName] ?? false }), selectionsRef.current[labelName] != null && (_jsx("button", { onClick: () => handleReset(labelName), className: "p-2 border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-600 border rounded-r-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", "aria-label": `Reset ${labelName} selection`, children: _jsx(Icon, { icon: "mdi:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) }))] }, labelName))) }));
 };
 export default ViewMatchers;

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.52",
+  "version": "0.19.54",
   "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.5",
-    "@parca/components": "0.16.370",
+    "@parca/components": "0.16.371",
     "@parca/dynamicsize": "0.16.67",
     "@parca/hooks": "0.0.102",
     "@parca/icons": "0.16.74",
     "@parca/parser": "0.16.81",
     "@parca/store": "0.16.186",
-    "@parca/test-utils": "0.0.12",
+    "@parca/test-utils": "0.0.13",
     "@parca/utilities": "0.0.109",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
@@ -79,5 +79,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "df1f4ce1710f808dfc6af0a631b140cd346dfaab"
+  "gitHead": "842199b0933536a1d704de0fbcac61f8b365d41e"
 }

package/src/MatchersInput/index.tsx

@@ -20,7 +20,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
 import {UtilizationLabels} from '../ProfileSelector';
@@ -292,7 +292,7 @@ const MatchersInput = ({
   return (
     <div
       className="w-full min-w-[300px] flex-1 font-mono relative"
-      {...testId('MATCHERS_INPUT_CONTAINER')}
+      {...testId(TEST_IDS.MATCHERS_INPUT_CONTAINER)}
     >
       <TextareaAutosize
         ref={inputRef}
@@ -308,7 +308,7 @@ const MatchersInput = ({
         onChange={onChange}
         value={value}
         onBlur={unfocus}
-        {...testId('MATCHERS_TEXTAREA')}
+        {...testId(TEST_IDS.MATCHERS_TEXTAREA)}
         onFocus={focus}
         disabled={profileSelected} // Disable input if no profile has been selected
         title={

package/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -15,7 +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 {TEST_IDS, testId} from '@parca/test-utils';
 
 import {Series, SeriesPoint} from '../';
 
@@ -115,7 +115,7 @@ const MetricsContextMenu = ({
       id={menuId}
       onVisibilityChange={trackVisibility}
       theme={isDarkMode ? 'dark' : ''}
-      {...testId('METRICS_GRAPH_CONTEXT_MENU')}
+      {...testId(TEST_IDS.METRICS_GRAPH_CONTEXT_MENU)}
     >
       {menuItems.map(renderMenuItem)}
     </Menu>

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -15,7 +15,7 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {usePopper} from 'react-popper';
 
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 interface VirtualElement {
   getBoundingClientRect: () => DOMRect;
@@ -113,7 +113,7 @@ const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element =>
       ref={setPopperElement}
       style={styles.popper}
       {...attributes.popper}
-      {...testId('METRICS_GRAPH_TOOLTIP')}
+      {...testId(TEST_IDS.METRICS_GRAPH_TOOLTIP)}
       className="z-50"
     >
       <div className="flex max-w-lg">

package/src/MetricsGraph/index.tsx

@@ -19,7 +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 {TEST_IDS, testId} from '@parca/test-utils';
 import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities';
 
 import MetricsCircle from '../MetricsCircle';
@@ -84,7 +84,7 @@ const MetricsGraph = ({
   return (
     <div
       className="relative"
-      {...testId('METRICS_GRAPH')}
+      {...testId(TEST_IDS.METRICS_GRAPH)}
       onClick={() => isInfoPanelOpen && setIsInfoPanelOpen(false)}
     >
       <div className="absolute right-0 top-0">

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -16,7 +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 {TEST_IDS, testId} from '@parca/test-utils';
 import type {NavigateFunction} from '@parca/utilities';
 
 import {ProfileDiffSource, ProfileSelection, ProfileViewWithData} from '..';
@@ -64,9 +64,12 @@ const ProfileExplorerCompare = ({
   const [compareAbsolute] = useURLState('compare_absolute');
 
   return (
-    <div {...testId('COMPARE_CONTAINER')}>
+    <div {...testId(TEST_IDS.COMPARE_CONTAINER)}>
       <div className="flex justify-between gap-2 relative mb-2">
-        <div className="flex-column flex-1 p-2 shadow-md rounded-md" {...testId('COMPARE_SIDE_A')}>
+        <div
+          className="flex-column flex-1 p-2 shadow-md rounded-md"
+          {...testId(TEST_IDS.COMPARE_SIDE_A)}
+        >
           <ProfileSelector
             queryClient={queryClient}
             querySelection={queryA}
@@ -82,7 +85,10 @@ const ProfileExplorerCompare = ({
             setDisplayHideMetricsGraphButton={setShowMetricsGraph}
           />
         </div>
-        <div className="flex-column flex-1 p-2 shadow-md rounded-md" {...testId('COMPARE_SIDE_B')}>
+        <div
+          className="flex-column flex-1 p-2 shadow-md rounded-md"
+          {...testId(TEST_IDS.COMPARE_SIDE_B)}
+        >
           <ProfileSelector
             queryClient={queryClient}
             querySelection={queryB}
@@ -101,7 +107,7 @@ const ProfileExplorerCompare = ({
       </div>
       <div className="grid grid-cols-1">
         {profileA != null && profileB != null ? (
-          <div {...testId('COMPARE_PROFILE_VIEW')}>
+          <div {...testId(TEST_IDS.COMPARE_PROFILE_VIEW)}>
             <ProfileViewWithData
               queryClient={queryClient}
               profileSource={

package/src/ProfileExplorer/index.tsx

@@ -23,7 +23,7 @@ import {capitalizeOnlyFirstLetter, safeDecode, type NavigateFunction} from '@par
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import {QuerySelection, useProfileTypes} from '../ProfileSelector';
-import {useResetStateOnNewSearch} from '../ProfileView/hooks/useResetStateOnNewSearch';
+import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
 import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
 import {sumByToParam, useSumByFromParams} from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
@@ -162,7 +162,7 @@ const ProfileExplorerApp = ({
   const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
 
   const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
-  const resetStateOnNewSearch = useResetStateOnNewSearch();
+  const resetFlameGraphState = useResetFlameGraphState();
 
   const sumByA = useSumByFromParams(sum_by_a);
   const sumByB = useSumByFromParams(sum_by_b);
@@ -250,7 +250,7 @@ const ProfileExplorerApp = ({
           resetStateOnProfileTypeChange();
         } else {
           // Reset the state when a new search is performed.
-          resetStateOnNewSearch();
+          resetFlameGraphState();
         }
       }
 

package/src/ProfileFlameGraph/index.tsx

@@ -25,7 +25,7 @@ import {
   useURLState,
 } from '@parca/components';
 import {ProfileType} from '@parca/parser';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
 
 import {MergedProfileSource, ProfileSource} from '../ProfileSource';
@@ -396,7 +396,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
         <div
           className={cx(!isInSandwichView ? 'min-h-48' : '')}
           id="h-flame-graph"
-          {...testId('FLAMEGRAPH_CONTAINER')}
+          {...testId(TEST_IDS.FLAMEGRAPH_CONTAINER)}
         >
           <>{flameGraph}</>
         </div>

package/src/ProfileMetricsGraph/index.tsx

@@ -29,7 +29,7 @@ import {
   useParcaContext,
 } from '@parca/components';
 import {Query} from '@parca/parser';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
@@ -491,7 +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')}
+                                    {...testId(TEST_IDS.TOOLTIP_LABEL)}
                                   >
                                     <TextWithTooltip
                                       text={`${name.replace('attributes.', '')}="${
@@ -513,7 +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')}
+                                    {...testId(TEST_IDS.TOOLTIP_LABEL)}
                                   >
                                     <TextWithTooltip
                                       text={`${name.replace('attributes.', '')}="${
@@ -534,7 +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')}
+                                    {...testId(TEST_IDS.TOOLTIP_LABEL)}
                                   >
                                     <TextWithTooltip
                                       text={`${label.name}="${label.value}"`}

package/src/ProfileSelector/QueryControls.tsx

@@ -18,7 +18,7 @@ import Select, {type SelectInstance} from 'react-select';
 import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
 import {Button, DateTimeRange, DateTimeRangePicker, useParcaContext} from '@parca/components';
 import {ProfileType, Query} from '@parca/parser';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import MatchersInput from '../MatchersInput';
 import ProfileTypeSelector from '../ProfileTypeSelector';
@@ -97,11 +97,11 @@ export function QueryControls({
   return (
     <div
       className="flex w-full flex-wrap items-start gap-2"
-      {...testId('QUERY_CONTROLS_CONTAINER')}
+      {...testId(TEST_IDS.QUERY_CONTROLS_CONTAINER)}
     >
       {showProfileTypeSelector && (
         <div>
-          <label className="text-xs" {...testId('PROFILE_TYPE_LABEL')}>
+          <label className="text-xs" {...testId(TEST_IDS.PROFILE_TYPE_LABEL)}>
             Profile type
           </label>
           <ProfileTypeSelector
@@ -118,11 +118,11 @@ export function QueryControls({
       <div
         className="w-full flex-1 flex flex-col gap-1 mt-auto"
         ref={queryBrowserRef}
-        {...testId('QUERY_BROWSER_CONTAINER')}
+        {...testId(TEST_IDS.QUERY_BROWSER_CONTAINER)}
       >
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <label className="text-xs" {...testId('QUERY_LABEL')}>
+            <label className="text-xs" {...testId(TEST_IDS.QUERY_LABEL)}>
               Query
             </label>
             {viewComponent?.disableExplorativeQuerying !== true && (
@@ -136,7 +136,7 @@ export function QueryControls({
                   className={`${
                     advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'
                   } relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`}
-                  {...testId('ADVANCED_MODE_SWITCH')}
+                  {...testId(TEST_IDS.ADVANCED_MODE_SWITCH)}
                 >
                   <span className="sr-only">Use setting</span>
                   <span
@@ -146,7 +146,7 @@ export function QueryControls({
                     } pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
                   />
                 </Switch>
-                <label className="text-xs" {...testId('QUERY_MODE_LABEL')}>
+                <label className="text-xs" {...testId(TEST_IDS.QUERY_MODE_LABEL)}>
                   Advanced Mode
                 </label>
               </>
@@ -194,15 +194,15 @@ export function QueryControls({
       </div>
 
       {showSumBySelector && (
-        <div {...testId('SUM_BY_CONTAINER')}>
+        <div {...testId(TEST_IDS.SUM_BY_CONTAINER)}>
           <div className="mb-0.5 mt-1.5 flex items-center justify-between">
-            <label className="text-xs" {...testId('SUM_BY_LABEL')}>
+            <label className="text-xs" {...testId(TEST_IDS.SUM_BY_LABEL)}>
               Sum by
             </label>
           </div>
           <Select<SelectOption, true>
             id="h-sum-by-selector"
-            data-testid={testId('SUM_BY_SELECT')['data-testid']}
+            data-testid={testId(TEST_IDS.SUM_BY_SELECT)['data-testid']}
             defaultValue={[]}
             isMulti
             isClearable={false}
@@ -250,11 +250,11 @@ export function QueryControls({
         onRangeSelection={setTimeRangeSelection}
         range={timeRangeSelection}
         timezone={timezone}
-        {...testId('DATE_TIME_RANGE_PICKER')}
+        {...testId(TEST_IDS.DATE_TIME_RANGE_PICKER)}
       />
 
       <div>
-        <label className="text-xs" {...testId('SEARCH_BUTTON_LABEL')}>
+        <label className="text-xs" {...testId(TEST_IDS.SEARCH_BUTTON_LABEL)}>
           &nbsp;
         </label>
         <Button
@@ -264,7 +264,7 @@ export function QueryControls({
             setQueryExpression(true);
           }}
           id="h-matcher-search-button"
-          {...testId('SEARCH_BUTTON')}
+          {...testId(TEST_IDS.SEARCH_BUTTON)}
         >
           Search
         </Button>

package/src/ProfileTypeSelector/index.tsx

@@ -17,7 +17,7 @@ import {RpcError} from '@protobuf-ts/runtime-rpc';
 
 import {ProfileType, ProfileTypesResponse} from '@parca/client';
 import {Select, type SelectElement} from '@parca/components';
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 interface WellKnownProfile {
   name: string;
@@ -198,7 +198,7 @@ const ProfileTypeSelector = ({
       loading={loading}
       className="bg-white h-profile-type-dropdown"
       disabled={disabled}
-      {...testId('PROFILE_TYPE_SELECTOR')}
+      {...testId(TEST_IDS.PROFILE_TYPE_SELECTOR)}
     />
   );
 };

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

@@ -42,8 +42,6 @@ interface GetDashboardItemProps {
   profileSource: ProfileSource;
   total: bigint;
   filtered: bigint;
-  curPath: string[];
-  setNewCurPath: (path: string[]) => void;
   curPathArrow: CurrentPathFrame[];
   setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
   perf?: {

package/src/ProfileView/components/DiffLegend.tsx

@@ -17,7 +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 {TEST_IDS, 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];
@@ -75,7 +75,7 @@ const DiffLegend = (): JSX.Element => {
   };
 
   return (
-    <div className="mt-1 mb-2 hidden md:block" id="h-diff-legend" {...testId('DIFF_LEGEND')}>
+    <div className="mt-1 mb-2 hidden md:block" id="h-diff-legend" {...testId(TEST_IDS.DIFF_LEGEND)}>
       <div ref={setReferenceElement} className="flex items-center justify-center">
         <span>Better</span>
         <DiffLegendBar onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} />

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

@@ -13,7 +13,7 @@
 
 import Select from 'react-select';
 
-import {testId} from '@parca/test-utils';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
 
@@ -30,9 +30,9 @@ interface Props {
 
 const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
   return (
-    <div className="flex flex-col relative" {...testId('GROUP_BY_CONTAINER')}>
+    <div className="flex flex-col relative" {...testId(TEST_IDS.GROUP_BY_CONTAINER)}>
       <div className="flex items-center justify-between">
-        <label className="text-sm" {...testId('GROUP_BY_LABEL')}>
+        <label className="text-sm" {...testId(TEST_IDS.GROUP_BY_LABEL)}>
           Group by
         </label>
       </div>
@@ -50,7 +50,7 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
           MenuList: ({children, innerProps}) => (
             <div
               className="overflow-y-auto"
-              {...testId('GROUP_BY_SELECT_FLYOUT')}
+              {...testId(TEST_IDS.GROUP_BY_SELECT_FLYOUT)}
               {...innerProps}
               // eslint-disable-next-line react/prop-types
               style={{...innerProps.style, height: '332px', maxHeight: '332px', fontSize: '14px'}}

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

@@ -17,7 +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 {TEST_IDS, testId} from '@parca/test-utils';
 
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 import {getPresetByKey, getPresetsForProfileType, isPresetKey} from './filterPresets';
@@ -205,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" {...testId('PROFILE_FILTERS_CONTAINER')}>
+    <div className="flex gap-2 w-full items-start" {...testId(TEST_IDS.PROFILE_FILTERS_CONTAINER)}>
       <div className="flex-1 flex flex-wrap gap-2">
         {filtersToRender.map(filter => {
           const isNumberField = filter.field === 'address' || filter.field === 'line_number';
@@ -219,7 +219,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                 selectedKey={filter.type}
                 placeholder="Select Filter"
                 disabled={readOnly}
-                {...testId('FILTER_TYPE_SELECT')}
+                {...testId(TEST_IDS.FILTER_TYPE_SELECT)}
                 flyoutTestId="filter-type-select-flyout"
                 onSelection={key => {
                   // Check if this is a preset selection
@@ -269,7 +269,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={fieldItems}
                     selectedKey={filter.field ?? ''}
                     disabled={readOnly}
-                    {...testId('FILTER_FIELD_SELECT')}
+                    {...testId(TEST_IDS.FILTER_FIELD_SELECT)}
                     flyoutTestId="filter-field-select-flyout"
                     onSelection={key => {
                       const newField = key as ProfileFilter['field'];
@@ -297,7 +297,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
                     items={matchTypeItems}
                     selectedKey={filter.matchType ?? ''}
                     disabled={readOnly}
-                    {...testId('FILTER_MATCH_TYPE_SELECT')}
+                    {...testId(TEST_IDS.FILTER_MATCH_TYPE_SELECT)}
                     flyoutTestId="filter-match-type-select-flyout"
                     onSelection={key =>
                       updateFilter(filter.id, {matchType: key as ProfileFilter['matchType']})
@@ -316,7 +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')}
+                    {...testId(TEST_IDS.FILTER_VALUE_INPUT)}
                   />
                 </>
               )}
@@ -324,7 +324,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
               {!readOnly && (
                 <Button
                   variant="neutral"
-                  {...testId('FILTER_REMOVE_BUTTON')}
+                  {...testId(TEST_IDS.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) {
@@ -358,7 +358,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
             variant="neutral"
             onClick={addFilter}
             className="p-3 h-[38px]"
-            {...testId('ADD_FILTER_BUTTON')}
+            {...testId(TEST_IDS.ADD_FILTER_BUTTON)}
           >
             <Icon icon="mdi:filter-plus-outline" className="h-4 w-4" />
           </Button>
@@ -369,7 +369,7 @@ const ProfileFilters = ({readOnly = false}: ProfileFiltersProps = {}): JSX.Eleme
             variant="neutral"
             onClick={addFilter}
             className="flex items-center gap-2"
-            {...testId('ADD_FILTER_BUTTON')}
+            {...testId(TEST_IDS.ADD_FILTER_BUTTON)}
           >
             <Icon icon="mdi:filter-outline" className="h-4 w-4" />
             <span>Filter</span>
@@ -383,7 +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')}
+          {...testId(TEST_IDS.APPLY_FILTERS_BUTTON)}
         >
           <span>Apply</span>
         </Button>