@parca/profile 0.16.416 → 0.16.418

package/src/GraphTooltipArrow/Content.tsx

@@ -17,7 +17,7 @@ import {Icon} from '@iconify/react';
 import {Table} from 'apache-arrow';
 
 import {ProfileType} from '@parca/parser';
-import {getLastItem, type NavigateFunction} from '@parca/utilities';
+import {getLastItem} from '@parca/utilities';
 
 import {hexifyAddress, truncateString, truncateStringReverse} from '../utils';
 import {ExpandOnHover} from './ExpandOnHoverValue';
@@ -33,7 +33,7 @@ interface GraphTooltipArrowContentProps {
   row: number | null;
   level: number;
   isFixed: boolean;
-  navigateTo: NavigateFunction;
+  compareAbsolute: boolean;
 }
 
 const NoData = (): React.JSX.Element => {
@@ -49,7 +49,7 @@ const GraphTooltipArrowContent = ({
   row,
   level,
   isFixed,
-  navigateTo,
+  compareAbsolute,
 }: GraphTooltipArrowContentProps): React.JSX.Element => {
   const graphTooltipData = useGraphTooltip({
     table,
@@ -59,6 +59,7 @@ const GraphTooltipArrowContent = ({
     totalUnfiltered,
     row,
     level,
+    compareAbsolute,
   });
 
   if (graphTooltipData === null) {
@@ -69,9 +70,7 @@ const GraphTooltipArrowContent = ({
     name,
     locationAddress,
     cumulativeText,
-    cumulativePerSecondText,
     flatText,
-    flatPerSecondText,
     diffText,
     diff,
     row: rowNumber,
@@ -104,32 +103,12 @@ const GraphTooltipArrowContent = ({
                       <div>{cumulativeText}</div>
                     </td>
                   </tr>
-                  {profileType?.delta ?? false ? (
-                    <tr>
-                      <td className="w-1/4"></td>
-                      <td className="w-3/4">
-                        <div>{cumulativePerSecondText}</div>
-                      </td>
-                    </tr>
-                  ) : (
-                    <></>
-                  )}
                   <tr>
                     <td className="w-1/4 pt-2">Flat</td>
                     <td className="w-3/4 pt-2">
                       <div>{flatText}</div>
                     </td>
                   </tr>
-                  {profileType?.delta ?? false ? (
-                    <tr>
-                      <td className="w-1/4"></td>
-                      <td className="w-3/4">
-                        <div>{flatPerSecondText}</div>
-                      </td>
-                    </tr>
-                  ) : (
-                    <></>
-                  )}
                   {diff !== 0n && (
                     <tr>
                       <td className="w-1/4 pt-2">Diff</td>
@@ -138,7 +117,7 @@ const GraphTooltipArrowContent = ({
                       </td>
                     </tr>
                   )}
-                  <TooltipMetaInfo table={table} row={rowNumber} navigateTo={navigateTo} />
+                  <TooltipMetaInfo table={table} row={rowNumber} />
                 </tbody>
               </table>
             </div>
@@ -153,15 +132,7 @@ const GraphTooltipArrowContent = ({
   );
 };
 
-const TooltipMetaInfo = ({
-  table,
-  row,
-  navigateTo,
-}: {
-  table: Table<any>;
-  row: number;
-  navigateTo: NavigateFunction;
-}): React.JSX.Element => {
+const TooltipMetaInfo = ({table, row}: {table: Table<any>; row: number}): React.JSX.Element => {
   const {
     labelPairs,
     functionFilename,
@@ -170,7 +141,7 @@ const TooltipMetaInfo = ({
     mappingFile,
     mappingBuildID,
     inlined,
-  } = useGraphTooltipMetaInfo({table, row, navigateTo});
+  } = useGraphTooltipMetaInfo({table, row});
 
   const labels = labelPairs.map(
     (l): React.JSX.Element => (

package/src/GraphTooltipArrow/DockedGraphTooltip/index.tsx

@@ -32,6 +32,7 @@ interface Props {
   level: number;
   profileType?: ProfileType;
   unit?: string;
+  compareAbsolute: boolean;
 }
 
 const InfoSection = ({
@@ -63,9 +64,10 @@ export const DockedGraphTooltip = ({
   level,
   profileType,
   unit,
+  compareAbsolute,
 }: Props): JSX.Element => {
   let {width} = useWindowSize();
-  const {profileExplorer, navigateTo} = useParcaContext();
+  const {profileExplorer} = useParcaContext();
   const {PaddingX} = profileExplorer ?? {PaddingX: 0};
   width = width - PaddingX - 24;
 
@@ -77,6 +79,7 @@ export const DockedGraphTooltip = ({
     totalUnfiltered,
     row,
     level,
+    compareAbsolute,
   });
 
   const {
@@ -87,21 +90,13 @@ export const DockedGraphTooltip = ({
     mappingFile,
     mappingBuildID,
     inlined,
-  } = useGraphTooltipMetaInfo({table, row: row ?? 0, navigateTo});
+  } = useGraphTooltipMetaInfo({table, row: row ?? 0});
 
   if (graphTooltipData === null) {
     return <></>;
   }
 
-  const {
-    name,
-    cumulativeText,
-    cumulativePerSecondText,
-    flatText,
-    flatPerSecondText,
-    diffText,
-    diff,
-  } = graphTooltipData;
+  const {name, cumulativeText, flatText, diffText, diff} = graphTooltipData;
 
   const labels = labelPairs.map(
     (l): React.JSX.Element => (
@@ -118,9 +113,6 @@ export const DockedGraphTooltip = ({
   const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
   const addressText = locationAddress !== 0n ? hexifyAddress(locationAddress) : <NoData />;
 
-  const cumulativeTextBoth = `${cumulativeText}\n${cumulativePerSecondText}`;
-  const flatTextBoth = `${flatText}\n${flatPerSecondText}`;
-
   return (
     <div
       className="fixed bottom-0 z-20 overflow-hidden rounded-t-lg border-l border-r border-t border-gray-400 bg-white bg-opacity-90 px-8 py-3 dark:border-gray-600 dark:bg-black dark:bg-opacity-80"
@@ -141,8 +133,8 @@ export const DockedGraphTooltip = ({
           )}
         </div>
         <div className="flex justify-between gap-3">
-          <InfoSection title="Cumulative" value={cumulativeTextBoth} minWidth="w-44" />
-          <InfoSection title="Flat" value={flatTextBoth} minWidth="w-44" />
+          <InfoSection title="Cumulative" value={cumulativeText} minWidth="w-44" />
+          <InfoSection title="Flat" value={flatText} minWidth="w-44" />
           {diff !== 0n ? <InfoSection title="Diff" value={diffText} minWidth="w-44" /> : null}
           <InfoSection
             title="File"

package/src/GraphTooltipArrow/useGraphTooltip/index.ts

@@ -18,18 +18,11 @@ import {divide, valueFormatter} from '@parca/utilities';
 
 import {
   FIELD_CUMULATIVE,
-  FIELD_CUMULATIVE_PER_SECOND,
   FIELD_DIFF,
-  FIELD_DIFF_PER_SECOND,
   FIELD_FLAT,
-  FIELD_FLAT_PER_SECOND,
   FIELD_LOCATION_ADDRESS,
 } from '../../ProfileIcicleGraph/IcicleGraphArrow';
-import {
-  getTextForCumulative,
-  getTextForCumulativePerSecond,
-  nodeLabel,
-} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
+import {getTextForCumulative, nodeLabel} from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 
 interface Props {
   table: Table<any>;
@@ -37,6 +30,7 @@ interface Props {
   unit?: string;
   total: bigint;
   totalUnfiltered: bigint;
+  compareAbsolute: boolean;
   row: number | null;
   level: number;
 }
@@ -45,9 +39,7 @@ interface GraphTooltipData {
   name: string;
   locationAddress: bigint;
   cumulativeText: string;
-  cumulativePerSecondText: string;
   flatText: string;
-  flatPerSecondText: string;
   diffText: string;
   diff: bigint;
   row: number;
@@ -57,6 +49,7 @@ export const useGraphTooltip = ({
   table,
   profileType,
   unit,
+  compareAbsolute,
   total,
   totalUnfiltered,
   row,
@@ -73,43 +66,23 @@ export const useGraphTooltip = ({
     table.getChild(FIELD_CUMULATIVE)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row))
       : 0n;
-  const cumulativePerSecond: number =
-    table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row) !== null
-      ? table.getChild(FIELD_CUMULATIVE_PER_SECOND)?.get(row)
-      : 0;
   const flat: bigint =
     table.getChild(FIELD_FLAT)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_FLAT)?.get(row))
       : 0n;
-  const flatPerSecond: number =
-    table.getChild(FIELD_FLAT_PER_SECOND)?.get(row) !== null
-      ? table.getChild(FIELD_FLAT_PER_SECOND)?.get(row)
-      : 0;
   const diff: bigint =
     table.getChild(FIELD_DIFF)?.get(row) !== null
       ? BigInt(table.getChild(FIELD_DIFF)?.get(row))
       : 0n;
-  const diffPerSecond: number =
-    table.getChild(FIELD_DIFF_PER_SECOND)?.get(row) !== null
-      ? table.getChild(FIELD_DIFF_PER_SECOND)?.get(row)
-      : 0;
 
   let diffText = '';
-  if (profileType?.delta ?? false) {
-    const prevValue = cumulativePerSecond - diffPerSecond;
-    const diffRatio = diffPerSecond !== 0 ? diffPerSecond / prevValue : 0;
-    const diffSign = diffPerSecond > 0 ? '+' : '';
-    const diffValueText = diffSign + valueFormatter(diffPerSecond, 'CPU Cores', 5);
-    const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-    diffText = `${diffValueText} (${diffPercentageText})`;
-  } else {
-    const prevValue = cumulative - diff;
-    const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
-    const diffSign = diff > 0 ? '+' : '';
-    const diffValueText = diffSign + valueFormatter(diff, unit, 1);
-    const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-    diffText = `${diffValueText} (${diffPercentageText})`;
-  }
+  const prevValue = cumulative - diff;
+  const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
+  const diffSign = diff > 0 ? '+' : '';
+  const diffValueText = diffSign + valueFormatter(diff, unit, 1);
+  const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
+
+  diffText = compareAbsolute ? `${diffValueText} (${diffPercentageText})` : diffPercentageText;
 
   const name = nodeLabel(table, row, level, false);
 
@@ -117,12 +90,7 @@ export const useGraphTooltip = ({
     name,
     locationAddress,
     cumulativeText: getTextForCumulative(cumulative, totalUnfiltered, total, unit ?? ''),
-    cumulativePerSecondText: getTextForCumulativePerSecond(
-      cumulativePerSecond,
-      unit ?? 'CPU Cores'
-    ),
     flatText: getTextForCumulative(flat, totalUnfiltered, total, unit ?? ''),
-    flatPerSecondText: getTextForCumulativePerSecond(flatPerSecond, unit ?? 'CPU Cores'),
     diffText,
     diff,
     row,

package/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts

@@ -15,7 +15,6 @@ import {Table} from 'apache-arrow';
 
 import {QueryRequest_ReportType} from '@parca/client';
 import {useParcaContext, useURLState} from '@parca/components';
-import type {NavigateFunction} from '@parca/utilities';
 
 import {
   FIELD_FUNCTION_FILE_NAME,
@@ -35,7 +34,6 @@ import {useQuery} from '../../useQuery';
 interface Props {
   table: Table<any>;
   row: number;
-  navigateTo: NavigateFunction;
 }
 
 interface GraphTooltipMetaInfoData {
@@ -51,11 +49,7 @@ interface GraphTooltipMetaInfoData {
   inlined: boolean | null;
 }
 
-export const useGraphTooltipMetaInfo = ({
-  table,
-  row,
-  navigateTo,
-}: Props): GraphTooltipMetaInfoData => {
+export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaInfoData => {
   const mappingFile: string | null = arrowToString(table.getChild(FIELD_MAPPING_FILE)?.get(row));
   const mappingBuildID: string | null = arrowToString(
     table.getChild(FIELD_MAPPING_BUILD_ID)?.get(row)
@@ -112,28 +106,18 @@ export const useGraphTooltipMetaInfo = ({
     ])
     .filter(value => value[1] !== '') as Array<[string, string]>;
 
-  const [dashboardItems, setDashboardItems] = useURLState({
-    param: 'dashboard_items',
-    navigateTo,
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
   });
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedBuildId, setSourceBuildId] = useURLState({
-    param: 'source_buildid',
-    navigateTo,
-  });
+  const [unusedBuildId, setSourceBuildId] = useURLState('source_buildid');
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedFilename, setSourceFilename] = useURLState({
-    param: 'source_filename',
-    navigateTo,
-  });
+  const [unusedFilename, setSourceFilename] = useURLState('source_filename');
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedLine, setSourceLine] = useURLState({
-    param: 'source_line',
-    navigateTo,
-  });
+  const [unusedLine, setSourceLine] = useURLState('source_line');
 
   const openFile = (): void => {
     setDashboardItems([dashboardItems[0], 'source']);

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -56,8 +56,8 @@ const ProfileExplorerCompare = ({
     closeProfile('B');
   };
 
-  const [compareAbsolute] = useURLState({param: 'compare_absolute', navigateTo});
-  const [functionFilter] = useURLState({param: 'filter_by_function', navigateTo});
+  const [compareAbsolute] = useURLState('compare_absolute');
+  const [functionFilter] = useURLState('filter_by_function');
 
   return (
     <>
@@ -96,7 +96,6 @@ const ProfileExplorerCompare = ({
           <div>
             <Card className="mt-2 px-6 py-4">
               <ProfileViewWithData
-                navigateTo={navigateTo}
                 queryClient={queryClient}
                 profileSource={
                   new ProfileDiffSource(

package/src/ProfileExplorer/ProfileExplorerSingle.tsx

@@ -53,11 +53,7 @@ const ProfileExplorerSingle = ({
       </Card>
       {profile != null ? (
         <Card className="mt-2 px-6 py-4">
-          <ProfileViewWithData
-            queryClient={queryClient}
-            profileSource={profile.ProfileSource()}
-            navigateTo={navigateTo}
-          />
+          <ProfileViewWithData queryClient={queryClient} profileSource={profile.ProfileSource()} />
         </Card>
       ) : (
         <></>

package/src/ProfileExplorer/index.tsx

@@ -48,8 +48,6 @@ export const getExpressionAsAString = (expression: string | []): string => {
   return x;
 };
 
-const DEFAULT_DASHBOARD_ITEMS = ['icicle'];
-
 /* eslint-disable @typescript-eslint/naming-convention */
 const sanitizeDateRange = (
   time_selection_a: string,
@@ -149,7 +147,6 @@ const ProfileExplorerApp = ({
     compare_b,
     sum_by_b,
     filter_by_function,
-    dashboard_items,
   } = queryParams;
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -231,7 +228,6 @@ const ProfileExplorerApp = ({
     return navigateTo('/', {
       ...queryParams,
       ...SuffixParams(p.HistoryParams(), suffix),
-      dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
     });
   };
 
@@ -274,7 +270,6 @@ const ProfileExplorerApp = ({
             to_a: q.to.toString(),
             time_selection_a: q.timeSelection,
             sum_by_a: sumByToParam(q.sumBy),
-            dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
             ...mergeParams,
           },
         })
@@ -286,7 +281,6 @@ const ProfileExplorerApp = ({
       return navigateTo('/', {
         ...queryParams,
         ...SuffixParams(p.HistoryParams(), '_a'),
-        dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
       });
     };
 
@@ -335,7 +329,6 @@ const ProfileExplorerApp = ({
           time_selection_a: q.timeSelection,
           sum_by_a: sumByToParam(q.sumBy),
           filter_by_function: filter_by_function ?? '',
-          dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
           ...mergeParams,
         },
       })
@@ -367,7 +360,6 @@ const ProfileExplorerApp = ({
           time_selection_b: q.timeSelection,
           sum_by_b: sumByToParam(q.sumBy),
           filter_by_function: filter_by_function ?? '',
-          dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
           ...mergeParams,
         },
       })

package/src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx

@@ -19,18 +19,16 @@ import cx from 'classnames';
 import {useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {EVERYTHING_ELSE, selectStackColors, useAppSelector} from '@parca/store';
-import type {NavigateFunction} from '@parca/utilities';
 
 interface Props {
-  navigateTo?: NavigateFunction;
   compareMode?: boolean;
 }
 
-const ColorStackLegend = ({navigateTo, compareMode = false}: Props): JSX.Element => {
+const ColorStackLegend = ({compareMode = false}: Props): JSX.Element => {
   const [colorProfileName] = useUserPreference<string>(
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
   );
-  const [currentSearchString, setSearchString] = useURLState({param: 'search_string', navigateTo});
+  const [currentSearchString, setSearchString] = useURLState('search_string');
   const stackColors = useAppSelector(selectStackColors);
 
   const stackColorArray = useMemo(() => {

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -14,9 +14,10 @@
 import {memo, useEffect, useMemo, useRef, useState} from 'react';
 
 import {Flamegraph} from '@parca/client';
+import {useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 import {setHoveringNode, useAppDispatch} from '@parca/store';
-import {scaleLinear, selectQueryParam, type NavigateFunction} from '@parca/utilities';
+import {scaleLinear, selectQueryParam} from '@parca/utilities';
 
 import GraphTooltip from '../../GraphTooltip';
 import {useProfileViewContext} from '../../ProfileView/ProfileViewContext';
@@ -32,7 +33,6 @@ interface IcicleGraphProps {
   width?: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
-  navigateTo?: NavigateFunction;
 }
 
 export const IcicleGraph = memo(function IcicleGraph({
@@ -43,7 +43,6 @@ export const IcicleGraph = memo(function IcicleGraph({
   setCurPath,
   curPath,
   profileType,
-  navigateTo,
 }: IcicleGraphProps): JSX.Element {
   const dispatch = useAppDispatch();
   const [height, setHeight] = useState(0);
@@ -51,7 +50,7 @@ export const IcicleGraph = memo(function IcicleGraph({
   const ref = useRef<SVGGElement>(null);
 
   const coloredGraph = useColoredGraph(graph);
-  const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
+  const [currentSearchString] = useURLState('search_string');
   const {compareMode} = useProfileViewContext();
   const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
 
@@ -74,9 +73,7 @@ export const IcicleGraph = memo(function IcicleGraph({
 
   return (
     <div onMouseLeave={() => dispatch(setHoveringNode(undefined))}>
-      {isColorStackLegendEnabled && (
-        <ColorStackLegend navigateTo={navigateTo} compareMode={compareMode} />
-      )}
+      {isColorStackLegendEnabled && <ColorStackLegend compareMode={compareMode} />}
       <GraphTooltip
         unit={profileType?.sampleUnit ?? ''}
         total={total}
@@ -113,7 +110,7 @@ export const IcicleGraph = memo(function IcicleGraph({
               path={[]}
               level={0}
               isRoot={true}
-              searchString={currentSearchString}
+              searchString={currentSearchString as string}
               compareMode={compareMode}
             />
           </g>

package/src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx

@@ -19,7 +19,6 @@ import cx from 'classnames';
 import {useURLState} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {EVERYTHING_ELSE, selectDarkMode, useAppSelector} from '@parca/store';
-import {type NavigateFunction} from '@parca/utilities';
 
 import {getMappingColors} from '.';
 import useMappingList from './useMappingList';
@@ -27,24 +26,18 @@ import useMappingList from './useMappingList';
 interface Props {
   mappings?: string[];
   loading?: boolean;
-  navigateTo?: NavigateFunction;
   compareMode?: boolean;
 }
 
-const ColorStackLegend = ({
-  mappings,
-  navigateTo,
-  compareMode = false,
-  loading,
-}: Props): React.JSX.Element => {
+const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): React.JSX.Element => {
   const isDarkMode = useAppSelector(selectDarkMode);
   const currentColorProfile = useCurrentColorProfile();
   const [colorProfileName] = useUserPreference<string>(
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
   );
-  const [currentSearchString, setSearchString] = useURLState({
-    param: 'binary_frame_filter',
-    navigateTo,
+  const [currentSearchString, setSearchString] = useURLState<string[]>('binary_frame_filter', {
+    alwaysReturnArray: true,
+    defaultValue: [],
   });
 
   const mappingsList = useMappingList(mappings);
@@ -79,7 +72,7 @@ const ColorStackLegend = ({
   }
 
   return (
-    <div className="my-4 flex w-full flex-wrap justify-start">
+    <div className="my-4 flex w-full flex-wrap justify-start column-gap-2">
       {stackColorArray.map(([feature, color]) => {
         const filteringAllowed = feature !== EVERYTHING_ELSE;
         const isHighlighted =
@@ -88,7 +81,7 @@ const ColorStackLegend = ({
           <div
             key={feature}
             className={cx(
-              'flex-no-wrap mb-1 flex w-1/5 items-center justify-between text-ellipsis p-1',
+              'flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1',
               {
                 'cursor-pointer': filteringAllowed,
                 'bg-gray-200 dark:bg-gray-800': isHighlighted,
@@ -100,12 +93,7 @@ const ColorStackLegend = ({
               }
 
               // Check if the current search string is defined and an array
-              const updatedSearchString = Array.isArray(currentSearchString)
-                ? [...currentSearchString, feature] // If array, append the feature
-                : // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                currentSearchString // If not array, preserve current value
-                ? currentSearchString.split(',') // If string, split by commas
-                : [feature]; // If undefined, initialize array with feature
+              const updatedSearchString = [...currentSearchString, feature]; // If array, append the feature
 
               setSearchString(updatedSearchString);
             }}
@@ -123,15 +111,8 @@ const ColorStackLegend = ({
                 <Icon
                   icon="radix-icons:cross-circled"
                   onClick={e => {
-                    let searchString: string[] = [];
-                    if (typeof currentSearchString === 'string') {
-                      searchString.push(currentSearchString);
-                    } else {
-                      searchString = currentSearchString;
-                    }
-
                     // remove the current feature from the search string array of strings
-                    setSearchString(searchString.filter((f: string) => f !== feature));
+                    setSearchString(currentSearchString.filter((f: string) => f !== feature));
                     e.stopPropagation();
                   }}
                 />

package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx

@@ -19,7 +19,7 @@ import {Tooltip} from 'react-tooltip';
 import {useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {getLastItem, type NavigateFunction} from '@parca/utilities';
+import {getLastItem} from '@parca/utilities';
 
 import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip';
 import {useGraphTooltipMetaInfo} from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
@@ -34,7 +34,7 @@ interface ContextMenuProps {
   totalUnfiltered: bigint;
   row: number;
   level: number;
-  navigateTo: NavigateFunction;
+  compareAbsolute: boolean;
   trackVisibility: (isVisible: boolean) => void;
   curPath: string[];
   setCurPath: (path: string[]) => void;
@@ -49,7 +49,7 @@ const ContextMenu = ({
   totalUnfiltered,
   row,
   level,
-  navigateTo,
+  compareAbsolute,
   trackVisibility,
   curPath,
   setCurPath,
@@ -71,6 +71,7 @@ const ContextMenu = ({
     totalUnfiltered,
     row,
     level,
+    compareAbsolute,
   });
 
   const {
@@ -83,7 +84,7 @@ const ContextMenu = ({
     mappingFile,
     mappingBuildID,
     inlined,
-  } = useGraphTooltipMetaInfo({table, row, navigateTo});
+  } = useGraphTooltipMetaInfo({table, row});
 
   if (contextMenuData === null) {
     return <></>;