@parca/profile 0.16.415 → 0.16.417

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,6 @@ interface ContextMenuProps {
   totalUnfiltered: bigint;
   row: number;
   level: number;
-  navigateTo: NavigateFunction;
   trackVisibility: (isVisible: boolean) => void;
   curPath: string[];
   setCurPath: (path: string[]) => void;
@@ -49,7 +48,6 @@ const ContextMenu = ({
   totalUnfiltered,
   row,
   level,
-  navigateTo,
   trackVisibility,
   curPath,
   setCurPath,
@@ -83,7 +81,7 @@ const ContextMenu = ({
     mappingFile,
     mappingBuildID,
     inlined,
-  } = useGraphTooltipMetaInfo({table, row, navigateTo});
+  } = useGraphTooltipMetaInfo({table, row});
 
   if (contextMenuData === null) {
     return <></>;

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -27,13 +27,7 @@ import {
   useAppDispatch,
   useAppSelector,
 } from '@parca/store';
-import {
-  getLastItem,
-  scaleLinear,
-  selectQueryParam,
-  type ColorConfig,
-  type NavigateFunction,
-} from '@parca/utilities';
+import {getLastItem, scaleLinear, type ColorConfig} from '@parca/utilities';
 
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
@@ -70,7 +64,6 @@ interface IcicleGraphArrowProps {
   width?: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
-  navigateTo?: NavigateFunction;
   sortBy: string;
   flamegraphLoading: boolean;
   isHalfScreen: boolean;
@@ -101,7 +94,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   setCurPath,
   curPath,
   profileType,
-  navigateTo,
   sortBy,
   flamegraphLoading,
   mappingsListFromMetadata,
@@ -125,12 +117,9 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   const svg = useRef(null);
   const ref = useRef<SVGGElement>(null);
 
-  const [binaryFrameFilter, setBinaryFrameFilter] = useURLState({
-    param: 'binary_frame_filter',
-    navigateTo,
-  });
+  const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
 
-  const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
+  const [currentSearchString] = useURLState('search_string');
   const {compareMode} = useProfileViewContext();
   const currentColorProfile = useCurrentColorProfile();
   const colorForSimilarNodes = currentColorProfile.colorForSimilarNodes;
@@ -258,7 +247,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               path={path}
               level={0}
               isRoot={true}
-              searchString={currentSearchString}
+              searchString={(currentSearchString as string) ?? ''}
               setHoveringRow={setHoveringRow}
               setHoveringLevel={highlightSimilarStacksSetLevel}
               sortBy={sortBy}
@@ -312,7 +301,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           total={total}
           totalUnfiltered={total + filtered}
           profileType={profileType}
-          navigateTo={navigateTo as NavigateFunction}
           trackVisibility={trackVisibility}
           curPath={curPath}
           setCurPath={setCurPath}
@@ -341,7 +329,6 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
                 total={total}
                 totalUnfiltered={total + filtered}
                 profileType={profileType}
-                navigateTo={navigateTo as NavigateFunction}
                 unit={arrow.unit}
               />
             </GraphTooltipArrow>

package/src/ProfileIcicleGraph/index.tsx

@@ -26,19 +26,14 @@ import {
 } from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {
-  capitalizeOnlyFirstLetter,
-  divide,
-  selectQueryParam,
-  type NavigateFunction,
-} from '@parca/utilities';
+import {capitalizeOnlyFirstLetter, divide, selectQueryParam} from '@parca/utilities';
 
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import GroupByDropdown from './ActionButtons/GroupByDropdown';
 import SortBySelect from './ActionButtons/SortBySelect';
-import IcicleGraph from './IcicleGraph';
-import IcicleGraphArrow, {FIELD_FUNCTION_NAME} from './IcicleGraphArrow';
+import {IcicleGraph} from './IcicleGraph';
+import {FIELD_FUNCTION_NAME, IcicleGraphArrow} from './IcicleGraphArrow';
 import ColorStackLegend from './IcicleGraphArrow/ColorStackLegend';
 import useMappingList from './IcicleGraphArrow/useMappingList';
 
@@ -55,7 +50,6 @@ interface ProfileIcicleGraphProps {
   profileType?: ProfileType;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
-  navigateTo?: NavigateFunction;
   loading: boolean;
   setActionButtons?: (buttons: React.JSX.Element) => void;
   error?: any;
@@ -68,21 +62,9 @@ const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
   return <div className="flex justify-center p-10">{errorMessage}</div>;
 };
 
-const ShowHideLegendButton = ({
-  navigateTo,
-  isHalfScreen,
-}: {
-  navigateTo?: NavigateFunction;
-  isHalfScreen: boolean;
-}): JSX.Element => {
-  const [colorStackLegend, setStoreColorStackLegend] = useURLState({
-    param: 'color_stack_legend',
-    navigateTo,
-  });
-  const [binaryFrameFilter, setBinaryFrameFilter] = useURLState({
-    param: 'binary_frame_filter',
-    navigateTo,
-  });
+const ShowHideLegendButton = ({isHalfScreen}: {isHalfScreen: boolean}): JSX.Element => {
+  const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
+  const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
 
   const {compareMode} = useProfileViewContext();
 
@@ -156,16 +138,15 @@ const ShowHideLegendButton = ({
   );
 };
 
-const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}): JSX.Element => {
-  const [storeSortBy = FIELD_FUNCTION_NAME, setStoreSortBy] = useURLState({
-    param: 'sort_by',
-    navigateTo,
+const GroupAndSortActionButtons = (): JSX.Element => {
+  const [storeSortBy, setStoreSortBy] = useURLState('sort_by', {
+    defaultValue: FIELD_FUNCTION_NAME,
   });
   const {compareMode} = useProfileViewContext();
 
-  const [storeGroupBy = [FIELD_FUNCTION_NAME], setStoreGroupBy] = useURLState({
-    param: 'group_by',
-    navigateTo,
+  const [groupBy, setStoreGroupBy] = useURLState<string[]>('group_by', {
+    defaultValue: [FIELD_FUNCTION_NAME],
+    alwaysReturnArray: true,
   });
 
   const setGroupBy = useCallback(
@@ -175,16 +156,6 @@ const GroupAndSortActionButtons = ({navigateTo}: {navigateTo?: NavigateFunction}
     [setStoreGroupBy]
   );
 
-  const groupBy = useMemo(() => {
-    if (storeGroupBy !== undefined) {
-      if (typeof storeGroupBy === 'string') {
-        return [storeGroupBy];
-      }
-      return storeGroupBy;
-    }
-    return [FIELD_FUNCTION_NAME];
-  }, [storeGroupBy]);
-
   const toggleGroupBy = useCallback(
     (key: string): void => {
       groupBy.includes(key)
@@ -214,7 +185,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   curPath,
   setNewCurPath,
   profileType,
-  navigateTo,
   loading,
   setActionButtons,
   error,
@@ -229,26 +199,17 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
 
   const mappingsList = useMappingList(mappings);
 
-  const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
-    param: 'sort_by',
-    navigateTo,
-  });
+  const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
 
-  const [invertStack = '', setInvertStack] = useURLState({
-    param: 'invert_call_stack',
-    navigateTo,
-  });
+  const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
   const isInvert = invertStack === 'true';
 
   // By default, we want delta profiles (CPU) to be relatively compared.
   // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
   const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
 
-  const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState({
-    param: 'compare_absolute',
-    navigateTo,
-    withURLUpdate: true,
-  });
+  const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] =
+    useURLState('compare_absolute');
   const isCompareAbsolute = compareAbsolute === 'true';
 
   const [
@@ -285,7 +246,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     setActionButtons?.(
       <div className="flex w-full justify-end gap-2 pb-2">
         <div className="ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end">
-          {<GroupAndSortActionButtons navigateTo={navigateTo} />}
+          {<GroupAndSortActionButtons />}
           {isHalfScreen ? (
             <IconButton
               icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'}
@@ -303,7 +264,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
               <Icon icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'} width={20} />
             </Button>
           )}
-          <ShowHideLegendButton isHalfScreen={isHalfScreen} navigateTo={navigateTo} />
+          <ShowHideLegendButton isHalfScreen={isHalfScreen} />
           {compareMode && (
             <Button
               variant="neutral"
@@ -340,7 +301,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       </div>
     );
   }, [
-    navigateTo,
     isInvert,
     setInvertStack,
     arrow,
@@ -391,7 +351,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
           curPath={curPath}
           setCurPath={setNewCurPath}
           profileType={profileType}
-          navigateTo={navigateTo}
         />
       );
 
@@ -405,7 +364,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
           curPath={curPath}
           setCurPath={setNewCurPath}
           profileType={profileType}
-          navigateTo={navigateTo}
           sortBy={storeSortBy as string}
           flamegraphLoading={isLoading}
           isHalfScreen={isHalfScreen}
@@ -423,7 +381,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     curPath,
     setNewCurPath,
     profileType,
-    navigateTo,
     storeSortBy,
     isHalfScreen,
     isDarkMode,
@@ -455,12 +412,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       >
         {compareMode ? <DiffLegend /> : null}
         {isColorStackLegendEnabled && (
-          <ColorStackLegend
-            navigateTo={navigateTo}
-            compareMode={compareMode}
-            mappings={mappings}
-            loading={isLoading}
-          />
+          <ColorStackLegend compareMode={compareMode} mappings={mappings} loading={isLoading} />
         )}
         <div className="min-h-48" id="h-icicle-graph">
           <>{icicleGraph}</>

package/src/ProfileMetricsGraph/index.tsx

@@ -101,8 +101,8 @@ export const useQueryRange = (
   skip = false
 ): IQueryRangeState => {
   const metadata = useGrpcMetadata();
-  const {navigateTo} = useParcaContext();
-  const [stepCountStr, setStepCount] = useURLState({param: 'step_count', navigateTo});
+  const [stepCountStr, setStepCount] = useURLState('step_count');
+
   const defaultStepCount = useMemo(() => {
     return getStepCountFromScreenWidth(10);
   }, []);

package/src/ProfileSelector/index.tsx

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
-import Select from 'react-select';
+import Select, {type SelectInstance} from 'react-select';
 
 import {Label, ProfileTypesResponse, QueryServiceClient} from '@parca/client';
 import {
@@ -105,6 +105,7 @@ const ProfileSelector = ({
   } = useProfileTypes(queryClient);
   const {heightStyle} = useMetricsGraphDimensions(comparing);
   const {viewComponent} = useParcaContext();
+  const sumByRef = useRef(null);
 
   const [timeRangeSelection, setTimeRangeSelection] = useState(
     DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to)
@@ -316,6 +317,26 @@ const ProfileSelector = ({
                 indicatorSeparator: () => ({display: 'none'}),
               }}
               isDisabled={!profileType.delta}
+              ref={sumByRef}
+              onKeyDown={e => {
+                const currentRef = sumByRef.current as unknown as SelectInstance | null;
+                if (currentRef == null) {
+                  return;
+                }
+                const inputRef = currentRef.inputRef;
+                if (inputRef == null) {
+                  return;
+                }
+
+                if (
+                  e.key === 'Enter' &&
+                  inputRef.value === '' &&
+                  currentRef.state.focusedOptionId === null // menu is not open
+                ) {
+                  setQueryExpression(true);
+                  currentRef.blur();
+                }
+              }}
             />
           </div>
           <DateTimeRangePicker

package/src/ProfileView/FilterByFunctionButton.tsx

@@ -16,14 +16,14 @@ import {useCallback, useMemo, useState} from 'react';
 import {Icon} from '@iconify/react';
 
 import {Input, useURLState} from '@parca/components';
-import type {NavigateFunction} from '@parca/utilities';
-
-const FilterByFunctionButton = ({
-  navigateTo,
-}: {
-  navigateTo: NavigateFunction | undefined;
-}): JSX.Element => {
-  const [storeValue, setStoreValue] = useURLState({param: 'filter_by_function', navigateTo});
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+
+const FilterByFunctionButton = (): JSX.Element => {
+  const [highlightAfterFilteringEnabled] = useUserPreference<boolean>(
+    USER_PREFERENCES.HIGHTLIGHT_AFTER_FILTERING.key
+  );
+  const [storeValue, setStoreValue] = useURLState('filter_by_function');
+  const [_, setSearchString] = useURLState('search_string');
   const [localValue, setLocalValue] = useState(storeValue as string);
 
   const isClearAction = useMemo(() => {
@@ -34,10 +34,16 @@ const FilterByFunctionButton = ({
     if (isClearAction) {
       setLocalValue('');
       setStoreValue('');
+      if (highlightAfterFilteringEnabled) {
+        setSearchString('');
+      }
     } else {
       setStoreValue(localValue);
+      if (highlightAfterFilteringEnabled) {
+        setSearchString(localValue);
+      }
     }
-  }, [localValue, isClearAction, setStoreValue]);
+  }, [localValue, isClearAction, setStoreValue, highlightAfterFilteringEnabled, setSearchString]);
 
   return (
     <Input

package/src/ProfileView/ViewSelector.tsx

@@ -13,12 +13,10 @@
 
 import {Select, useParcaContext, useURLState, type SelectElement} from '@parca/components';
 import {useUIFeatureFlag} from '@parca/hooks';
-import type {NavigateFunction} from '@parca/utilities';
 
 interface Props {
   position: number;
   defaultValue: string;
-  navigateTo?: NavigateFunction;
   placeholderText?: string;
   primary?: boolean;
   addView?: boolean;
@@ -29,7 +27,6 @@ interface Props {
 
 const ViewSelector = ({
   defaultValue,
-  navigateTo,
   position,
   placeholderText,
   primary = false,
@@ -39,10 +36,12 @@ const ViewSelector = ({
   id,
 }: Props): JSX.Element => {
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
-  const [dashboardItems = ['icicle'], setDashboardItems] = useURLState({
-    param: 'dashboard_items',
-    navigateTo,
-  });
+  const [dashboardItems = ['icicle'], setDashboardItems] = useURLState<string[]>(
+    'dashboard_items',
+    {
+      alwaysReturnArray: true,
+    }
+  );
   const {enableSourcesView} = useParcaContext();
 
   const allItems: Array<{key: string; canBeSelected: boolean; supportingText?: string}> = [

package/src/ProfileView/VisualizationPanel.tsx

@@ -19,7 +19,6 @@ import type {DraggableProvidedDragHandleProps} from 'react-beautiful-dnd';
 
 import {IconButton, useParcaContext} from '@parca/components';
 import {CloseIcon} from '@parca/icons';
-import type {NavigateFunction} from '@parca/utilities';
 
 import ViewSelector from './ViewSelector';
 
@@ -28,7 +27,6 @@ interface Props {
   index: number;
   isMultiPanelView: boolean;
   handleClosePanel: (dashboardItem: string) => void;
-  navigateTo: NavigateFunction | undefined;
   dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
   getDashboardItemByType: (props: {
     type: string;
@@ -42,7 +40,6 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({
   index,
   isMultiPanelView,
   handleClosePanel,
-  navigateTo,
   dragHandleProps,
   getDashboardItemByType,
 }: Props): JSX.Element {
@@ -73,12 +70,7 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({
               isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'
             )}
           >
-            <ViewSelector
-              id="h-switch-viz"
-              defaultValue={dashboardItem}
-              navigateTo={navigateTo}
-              position={index}
-            />
+            <ViewSelector id="h-switch-viz" defaultValue={dashboardItem} position={index} />
 
             {dashboardItem === 'icicle' && flamegraphHint != null ? (
               <div className="px-2">{flamegraphHint}</div>

package/src/ProfileView/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Profiler, ProfilerProps, useEffect, useMemo, useState} from 'react';
+import {Profiler, ProfilerProps, useEffect, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
@@ -51,15 +51,13 @@ import {jsonToDot} from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
 import {SourceView} from '../SourceView';
-import Table from '../Table';
+import {Table} from '../Table';
 import ProfileShareButton from '../components/ProfileShareButton';
 import FilterByFunctionButton from './FilterByFunctionButton';
 import {ProfileViewContextProvider} from './ProfileViewContext';
 import ViewSelector from './ViewSelector';
 import {VisualizationPanel} from './VisualizationPanel';
 
-type NavigateFunction = (path: string, queryParams: any, options?: {replace?: boolean}) => void;
-
 export interface FlamegraphData {
   loading: boolean;
   data?: Flamegraph;
@@ -104,7 +102,6 @@ export interface ProfileViewProps {
   sourceData?: SourceData;
   profileSource?: ProfileSource;
   queryClient?: QueryServiceClient;
-  navigateTo?: NavigateFunction;
   compare?: boolean;
   onDownloadPProf: () => void;
   pprofDownloading?: boolean;
@@ -128,7 +125,6 @@ export const ProfileView = ({
   sourceData,
   profileSource,
   queryClient,
-  navigateTo,
   onDownloadPProf,
   pprofDownloading,
   compare,
@@ -136,20 +132,12 @@ export const ProfileView = ({
   const {timezone} = useParcaContext();
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
-  const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
-    param: 'dashboard_items',
-    navigateTo,
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
   });
   const [graphvizLoaded, setGraphvizLoaded] = useState(false);
   const [callgraphSVG, setCallgraphSVG] = useState<string | undefined>(undefined);
-  const [currentSearchString] = useURLState({param: 'search_string'});
-
-  const dashboardItems = useMemo(() => {
-    if (rawDashboardItems !== undefined) {
-      return rawDashboardItems as string[];
-    }
-    return ['icicle'];
-  }, [rawDashboardItems]);
+  const [currentSearchString, setSearchString] = useURLState<string | undefined>('search_string');
 
   const isDarkMode = useAppSelector(selectDarkMode);
   const isMultiPanelView = dashboardItems.length > 1;
@@ -240,7 +228,6 @@ export const ProfileView = ({
               total={total}
               filtered={filtered}
               profileType={profileSource?.ProfileType()}
-              navigateTo={navigateTo}
               loading={flamegraphData.loading}
               setActionButtons={setActionButtons}
               error={flamegraphData.error}
@@ -281,9 +268,9 @@ export const ProfileView = ({
             data={topTableData.arrow?.record}
             unit={topTableData.unit}
             profileType={profileSource?.ProfileType()}
-            navigateTo={navigateTo}
             setActionButtons={setActionButtons}
-            currentSearchString={currentSearchString as string}
+            currentSearchString={currentSearchString}
+            setSearchString={setSearchString}
             isHalfScreen={isHalfScreen}
           />
         ) : (
@@ -371,7 +358,7 @@ export const ProfileView = ({
           </div>
 
           <div className="lg:flex flex-wrap items-center gap-2 md:justify-end hidden">
-            <FilterByFunctionButton navigateTo={navigateTo} />
+            <FilterByFunctionButton />
             {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
             <UserPreferences
               customButton={
@@ -402,7 +389,6 @@ export const ProfileView = ({
             </Button>
             <ViewSelector
               defaultValue=""
-              navigateTo={navigateTo}
               position={-1}
               placeholderText="Add panel"
               icon={<Icon icon="material-symbols:add" width={20} />}
@@ -451,7 +437,6 @@ export const ProfileView = ({
                               dashboardItem={dashboardItem}
                               getDashboardItemByType={getDashboardItemByType}
                               dragHandleProps={provided.dragHandleProps}
-                              navigateTo={navigateTo}
                               index={index}
                             />
                           </div>