@parca/profile 0.19.140 → 0.19.142

package/src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx

@@ -14,15 +14,14 @@
 import {useEffect, useMemo, useState} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
-import {useQueryState} from 'nuqs';
 
+import {useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 import {valueFormatter} from '@parca/utilities';
 
 import {Row} from '../../../Table';
 import ColumnsVisibility from '../../../Table/ColumnsVisibility';
 import {ColumnName, addPlusSign, getRatioString} from '../../../Table/utils/functions';
-import {tableColumnsParser} from '../../../hooks/urlParsers';
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 
 interface Props {
@@ -33,7 +32,9 @@ interface Props {
 
 const TableColumnsDropdown = ({profileType, total, filtered}: Props): JSX.Element => {
   const {compareMode} = useProfileViewContext();
-  const [tableColumns, setTableColumns] = useQueryState('table_columns', tableColumnsParser);
+  const [tableColumns, setTableColumns] = useURLState<string[]>('table_columns', {
+    alwaysReturnArray: true,
+  });
 
   const columnHelper = createColumnHelper<Row>();
 
@@ -189,7 +190,7 @@ const TableColumnsDropdown = ({profileType, total, filtered}: Props): JSX.Elemen
     const newTableColumns = (Object.keys(updatedColumns) as ColumnName[]).filter(
       col => updatedColumns[col]
     );
-    void setTableColumns(newTableColumns);
+    setTableColumns(newTableColumns);
   };
 
   return (

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

@@ -50,7 +50,7 @@ export interface VisualisationToolbarProps {
   flamechartDimension: string[];
   setFlamechartDimension: (labels: string[]) => void;
   showVisualizationSelector?: boolean;
-  sandwichFunctionName: string | null;
+  sandwichFunctionName?: string;
   alignFunctionName: string;
   setAlignFunctionName: (align: string) => void;
   colorBy: string;
@@ -75,7 +75,7 @@ export interface FlameGraphToolbarProps {
 
 export interface SandwichFlameGraphToolbarProps {
   resetSandwichFunctionName: () => void;
-  sandwichFunctionName: string | null;
+  sandwichFunctionName?: string;
 }
 
 export const TableToolbar: FC<TableToolbarProps> = ({profileType, total, filtered}) => {
@@ -120,7 +120,7 @@ export const SandwichFlameGraphToolbar: FC<SandwichFlameGraphToolbarProps> = ({
           onClick={() => resetSandwichFunctionName()}
           className="w-auto"
           variant="neutral"
-          disabled={sandwichFunctionName == null || sandwichFunctionName.length === 0}
+          disabled={sandwichFunctionName === undefined || sandwichFunctionName.length === 0}
         >
           Reset view
         </Button>

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

@@ -13,13 +13,9 @@
 
 import {ReactNode} from 'react';
 
-import {useQueryState} from 'nuqs';
-
-import {useParcaContext} from '@parca/components';
+import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
 
 import {ProfileSource} from '../../../ProfileSource';
-import {stringParam} from '../../../hooks/urlParsers';
-import {useDashboardItems} from '../../../hooks/useDashboardItems';
 import Dropdown, {DropdownElement, InnerAction} from './Dropdown';
 
 interface Props {
@@ -27,9 +23,15 @@ interface Props {
 }
 
 const ViewSelector = ({profileSource}: Props): JSX.Element => {
-  const {dashboardItems, setDashboardItems} = useDashboardItems();
-  const [, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [dashboardItems = ['flamegraph'], setDashboardItems] = useURLState<string[]>(
+    'dashboard_items',
+    {
+      alwaysReturnArray: true,
+    }
+  );
+  const [, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
   const {enableSourcesView, enableSandwichView} = useParcaContext();
+  const batchUpdates = useURLStateBatch();
 
   const allItems: Array<{
     key: string;
@@ -127,9 +129,14 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
         } else {
           const newDashboardItems = dashboardItems.filter(v => v !== item.key);
 
-          setDashboardItems(newDashboardItems);
+          // Batch updates when removing sandwich panel to combine both URL changes
           if (item.key === 'sandwich') {
-            void setSandwichFunctionName(null);
+            batchUpdates(() => {
+              setDashboardItems(newDashboardItems);
+              setSandwichFunctionName(undefined);
+            });
+          } else {
+            setDashboardItems(newDashboardItems);
           }
         }
       },

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

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import {FC} from 'react';
 
 import cx from 'classnames';
@@ -42,6 +44,7 @@ export const VisualizationContainer: FC<VisualizationContainerProps> = ({
   index,
   actionButtons,
 }) => {
+  'use no memo';
   const {handleClosePanel} = useDashboard();
 
   return (

package/src/ProfileView/context/DashboardContext.tsx

@@ -13,10 +13,8 @@
 
 import {FC, PropsWithChildren, createContext, useContext} from 'react';
 
-import {useQueryState} from 'nuqs';
+import {useURLState} from '@parca/components';
 
-import {stringParam} from '../../hooks/urlParsers';
-import {useDashboardItems} from '../../hooks/useDashboardItems';
 import {VisualizationType} from '../types/visualization';
 
 interface DashboardContextType {
@@ -29,8 +27,10 @@ interface DashboardContextType {
 const DashboardContext = createContext<DashboardContextType | undefined>(undefined);
 
 export const DashboardProvider: FC<PropsWithChildren> = ({children}) => {
-  const {dashboardItems, setDashboardItems} = useDashboardItems();
-  const [, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
+  const [, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
   const handleClosePanel = (visualizationType: VisualizationType): void => {
     const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
@@ -38,7 +38,7 @@ export const DashboardProvider: FC<PropsWithChildren> = ({children}) => {
 
     // Reset sandwich function name when closing sandwich panel
     if (visualizationType === 'sandwich') {
-      void setSandwichFunctionName(null);
+      setSandwichFunctionName(undefined);
     }
   };
 

package/src/ProfileView/hooks/useResetFlameGraphState.ts

@@ -11,19 +11,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useQueryState} from 'nuqs';
-
-import {stringParam} from '../../hooks/urlParsers';
+import {useURLState} from '@parca/components';
 
 export const useResetFlameGraphState = (): (() => void) => {
-  const [val, setCurPath] = useQueryState('cur_path', stringParam);
+  const [val, setCurPath] = useURLState('cur_path');
 
   return () => {
     setTimeout(() => {
-      if (val === null) {
+      if (val === undefined) {
         return;
       }
-      void setCurPath(null);
+      setCurPath(undefined);
     });
   };
 };

package/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

@@ -11,37 +11,39 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useQueryStates} from 'nuqs';
+import {useURLState, useURLStateBatch} from '@parca/components';
 
-import {stringParam} from '../../hooks/urlParsers';
 import {useProfileFilters} from '../components/ProfileFilters/useProfileFilters';
 
 export const useResetStateOnProfileTypeChange = (): (() => void) => {
-  const [state, setState] = useQueryStates(
-    {
-      group_by: stringParam,
-      cur_path: stringParam,
-      sum_by_a: stringParam,
-      sum_by_b: stringParam,
-      sandwich_function_name: stringParam,
-    },
-    {history: 'replace'}
-  );
+  const [groupBy, setGroupBy] = useURLState('group_by');
+  const [curPath, setCurPath] = useURLState('cur_path');
+  const [sumByA, setSumByA] = useURLState('sum_by_a');
+  const [sumByB, setSumByB] = useURLState('sum_by_b');
   const {resetFilters} = useProfileFilters();
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+  const batchUpdates = useURLStateBatch();
 
   return () => {
-    // Atomic reset: clear all params in single URL update
-    const updates: Record<string, null> = {};
-    if (state.group_by !== null) updates.group_by = null;
-    if (state.cur_path !== null) updates.cur_path = null;
-    if (state.sandwich_function_name !== null) updates.sandwich_function_name = null;
-    if (state.sum_by_a !== null) updates.sum_by_a = null;
-    if (state.sum_by_b !== null) updates.sum_by_b = null;
+    // Batch all URL state resets into a single navigation
+    batchUpdates(() => {
+      if (groupBy !== undefined) {
+        setGroupBy(undefined);
+      }
+      if (curPath !== undefined) {
+        setCurPath(undefined);
+      }
+      if (sandwichFunctionName !== undefined) {
+        setSandwichFunctionName(undefined);
+      }
+      if (sumByA !== undefined) {
+        setSumByA(undefined);
+      }
+      if (sumByB !== undefined) {
+        setSumByB(undefined);
+      }
 
-    if (Object.keys(updates).length > 0) {
-      void setState(updates);
-    }
-
-    resetFilters();
+      resetFilters();
+    });
   };
 };

package/src/ProfileView/hooks/useResetStateOnSeriesChange.ts

@@ -11,27 +11,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useQueryStates} from 'nuqs';
-
-import {stringParam} from '../../hooks/urlParsers';
+import {useURLState} from '@parca/components';
 
 export const useResetStateOnSeriesChange = (): (() => void) => {
-  const [state, setState] = useQueryStates(
-    {
-      cur_path: stringParam,
-      sandwich_function_name: stringParam,
-    },
-    {history: 'replace'}
-  );
+  const [curPath, setCurPath] = useURLState('cur_path');
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
 
   return () => {
     setTimeout(() => {
-      const updates: Record<string, null> = {};
-      if (state.cur_path !== null) updates.cur_path = null;
-      if (state.sandwich_function_name !== null) updates.sandwich_function_name = null;
-
-      if (Object.keys(updates).length > 0) {
-        void setState(updates);
+      if (curPath !== undefined) {
+        setCurPath(undefined);
+      }
+      if (sandwichFunctionName !== undefined) {
+        setSandwichFunctionName(undefined);
       }
     });
   };

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -13,8 +13,13 @@
 
 import {useCallback, useMemo} from 'react';
 
-import {useQueryState} from 'nuqs';
-
+import {
+  JSONParser,
+  JSONSerializer,
+  useURLState,
+  useURLStateBatch,
+  useURLStateCustom,
+} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 
 import {
@@ -25,19 +30,12 @@ import {
   FIELD_MAPPING_FILE,
 } from '../../ProfileFlameGraph/FlameGraphArrow';
 import {CurrentPathFrame} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
-import {
-  flamechartDimensionParser,
-  groupByParser,
-  jsonParser,
-  stringParam,
-} from '../../hooks/urlParsers';
-import {useColorBy} from '../../hooks/useColorBy';
 import {useResetFlameGraphState} from './useResetFlameGraphState';
 
 export const useVisualizationState = (): {
   curPathArrow: CurrentPathFrame[];
   setCurPathArrow: (path: CurrentPathFrame[]) => void;
-  colorStackLegend: string | null;
+  colorStackLegend: string | undefined;
   colorBy: string;
   setColorBy: (colorBy: string) => void;
   groupBy: string[];
@@ -46,52 +44,46 @@ export const useVisualizationState = (): {
   setGroupByLabels: (labels: string[]) => void;
   flamechartDimension: string[];
   setFlamechartDimension: (labels: string[]) => void;
-  sandwichFunctionName: string | null;
-  setSandwichFunctionName: (sandwichFunctionName: string | null) => void;
+  sandwichFunctionName: string | undefined;
+  setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
   resetSandwichFunctionName: () => void;
   alignFunctionName: string;
   setAlignFunctionName: (align: string) => void;
 } => {
+  const [colorByPreference, setColorByPreference] = useUserPreference<string>(
+    USER_PREFERENCES.COLOR_BY.key
+  );
   const [alignFunctionNamePreference, setAlignFunctionNamePreference] = useUserPreference<string>(
     USER_PREFERENCES.ALIGN_FUNCTION_NAME.key
   );
 
-  const [curPathArrow, setRawCurPathArrow] = useQueryState(
-    'cur_path',
-    jsonParser<CurrentPathFrame[]>().withDefault([])
-  );
-  const setCurPathArrow = useCallback(
-    (path: CurrentPathFrame[]) => {
-      void setRawCurPathArrow(path);
-    },
-    [setRawCurPathArrow]
-  );
-  const [colorStackLegend] = useQueryState('color_stack_legend', stringParam);
-  const {colorBy, setColorBy} = useColorBy();
-  const [alignFunctionNameRaw, setStoreAlignFunctionName] = useQueryState(
-    'align_function_name',
-    stringParam
-  );
-  const alignFunctionName = alignFunctionNameRaw ?? alignFunctionNamePreference ?? 'left';
-  const [groupBy, setStoreGroupBy] = useQueryState(
-    'group_by',
-    groupByParser.withDefault([FIELD_FUNCTION_NAME])
-  );
-  const [sandwichFunctionName, setRawSandwichFunctionName] = useQueryState(
-    'sandwich_function_name',
-    stringParam
+  const [curPathArrow, setCurPathArrow] = useURLStateCustom<CurrentPathFrame[]>('cur_path', {
+    parse: JSONParser<CurrentPathFrame[]>,
+    stringify: JSONSerializer,
+    defaultValue: '[]',
+  });
+  const [colorStackLegend] = useURLState<string | undefined>('color_stack_legend');
+  const [colorBy, setStoreColorBy] = useURLState('color_by', {
+    defaultValue: colorByPreference,
+  });
+  const [alignFunctionName, setStoreAlignFunctionName] = useURLState('align_function_name', {
+    defaultValue: alignFunctionNamePreference,
+  });
+  const [groupBy, setStoreGroupBy] = useURLState<string[]>('group_by', {
+    defaultValue: [FIELD_FUNCTION_NAME],
+    alwaysReturnArray: true,
+  });
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
+    'sandwich_function_name'
   );
-  const setSandwichFunctionName = useCallback(
-    (name: string | null) => {
-      void setRawSandwichFunctionName(name);
-    },
-    [setRawSandwichFunctionName]
-  );
-  const [flamechartDimension, setStoreFlamechartDimension] = useQueryState(
+  const [flamechartDimension, setStoreFlamechartDimension] = useURLState<string[]>(
     'flamechart_dimension',
-    flamechartDimensionParser.withDefault([])
+    {
+      alwaysReturnArray: true,
+    }
   );
   const resetFlameGraphState = useResetFlameGraphState();
+  const batchUpdates = useURLStateBatch();
 
   const levelsOfProfiling = useMemo(
     () => [
@@ -105,46 +97,62 @@ export const useVisualizationState = (): {
 
   const setGroupBy = useCallback(
     (keys: string[]): void => {
-      void setStoreGroupBy(keys);
+      setStoreGroupBy(keys);
     },
     [setStoreGroupBy]
   );
 
   const toggleGroupBy = useCallback(
     (key: string): void => {
-      if (groupBy.includes(key)) {
-        setGroupBy(groupBy.filter(v => v !== key));
-      } else {
-        const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
-        setGroupBy([...filteredGroupBy, key]);
-      }
-      resetFlameGraphState();
+      // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
+      batchUpdates(() => {
+        if (groupBy.includes(key)) {
+          setGroupBy(groupBy.filter(v => v !== key)); // remove
+        } else {
+          const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
+          setGroupBy([...filteredGroupBy, key]); // add
+        }
+
+        resetFlameGraphState();
+      });
     },
-    [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]
+    [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState, batchUpdates]
   );
 
   const setGroupByLabels = useCallback(
     (labels: string[]): void => {
-      setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
-      resetFlameGraphState();
+      // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
+      batchUpdates(() => {
+        setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
+
+        resetFlameGraphState();
+      });
     },
-    [groupBy, setGroupBy, resetFlameGraphState]
+    [groupBy, setGroupBy, resetFlameGraphState, batchUpdates]
   );
 
   const setFlamechartDimension = useCallback(
     (labels: string[]): void => {
-      void setStoreFlamechartDimension(labels.filter(l => l.startsWith(`${FIELD_LABELS}.`)));
+      setStoreFlamechartDimension(labels.filter(l => l.startsWith(`${FIELD_LABELS}.`)));
     },
     [setStoreFlamechartDimension]
   );
 
   const resetSandwichFunctionName = useCallback((): void => {
-    setSandwichFunctionName(null);
+    setSandwichFunctionName(undefined);
   }, [setSandwichFunctionName]);
 
+  const setColorBy = useCallback(
+    (value: string): void => {
+      setStoreColorBy(value);
+      setColorByPreference(value);
+    },
+    [setStoreColorBy, setColorByPreference]
+  );
+
   const setAlignFunctionName = useCallback(
     (value: string): void => {
-      void setStoreAlignFunctionName(value);
+      setStoreAlignFunctionName(value);
       setAlignFunctionNamePreference(value);
     },
     [setStoreAlignFunctionName, setAlignFunctionNamePreference]
@@ -154,7 +162,7 @@ export const useVisualizationState = (): {
     curPathArrow,
     setCurPathArrow,
     colorStackLegend,
-    colorBy,
+    colorBy: (colorBy as string) ?? '',
     setColorBy,
     groupBy,
     setGroupBy,
@@ -165,7 +173,7 @@ export const useVisualizationState = (): {
     sandwichFunctionName,
     setSandwichFunctionName,
     resetSandwichFunctionName,
-    alignFunctionName,
+    alignFunctionName: (alignFunctionName as string) ?? 'left',
     setAlignFunctionName,
   };
 };

package/src/ProfileViewWithData.tsx

@@ -13,10 +13,15 @@
 
 import {useEffect, useMemo, useState} from 'react';
 
-import {useQueryState} from 'nuqs';
-
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {useGrpcMetadata, useParcaContext} from '@parca/components';
+import {
+  NumberParser,
+  NumberSerializer,
+  useGrpcMetadata,
+  useParcaContext,
+  useURLState,
+  useURLStateCustom,
+} from '@parca/components';
 import {saveAsBlob} from '@parca/utilities';
 
 import {validateFlameChartQuery} from './ProfileFlameGraph';
@@ -30,14 +35,6 @@ import {MergedProfileSource, ProfileSource} from './ProfileSource';
 import {ProfileView} from './ProfileView';
 import {useProfileFilters} from './ProfileView/components/ProfileFilters/useProfileFilters';
 import type {SamplesSeries} from './ProfileView/types/visualization';
-import {
-  flamechartDimensionParser,
-  groupByParser,
-  intParam,
-  invertCallStackParser,
-  stringParam,
-} from './hooks/urlParsers';
-import {useDashboardItems} from './hooks/useDashboardItems';
 import {useQuery} from './useQuery';
 import {downloadPprof} from './utils';
 
@@ -56,14 +53,22 @@ export const ProfileViewWithData = ({
   onSwitchToFifteenMinutes,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
-  const {dashboardItems, setDashboardItems} = useDashboardItems();
-  const [sourceBuildID] = useQueryState('source_buildid', stringParam);
-  const [sourceFilename] = useQueryState('source_filename', stringParam);
-  const [groupBy] = useQueryState('group_by', groupByParser.withDefault([FIELD_FUNCTION_NAME]));
-  const [sandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
-  const [flamechartDimension] = useQueryState('flamechart_dimension', flamechartDimensionParser);
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
+  const [sourceBuildID] = useURLState<string>('source_buildid');
+  const [sourceFilename] = useURLState<string>('source_filename');
+  const [groupBy] = useURLState<string[]>('group_by', {
+    defaultValue: [FIELD_FUNCTION_NAME],
+    alwaysReturnArray: true,
+  });
+  const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
+  const [flamechartDimension] = useURLState<string[]>('flamechart_dimension', {
+    alwaysReturnArray: true,
+  });
 
-  const [invertCallStack] = useQueryState('invert_call_stack', invertCallStackParser);
+  const [invertStack] = useURLState('invert_call_stack');
+  const invertCallStack = invertStack === 'true';
 
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
@@ -105,7 +110,7 @@ export const ProfileViewWithData = ({
     skip: !dashboardItems.includes('flamegraph'),
     nodeTrimThreshold,
     groupBy,
-    invertCallStack: invertCallStack ?? false,
+    invertCallStack,
     protoFilters,
   });
 
@@ -129,10 +134,11 @@ export const ProfileViewWithData = ({
   );
 
   // Samples step count: 2px per data point for finer granularity in strips
-  const [samplesStepCount] = useQueryState(
-    'samples_step_count',
-    intParam.withDefault(getStepCountFromScreenWidth(2))
-  );
+  const [samplesStepCount] = useURLStateCustom<number>('samples_step_count', {
+    defaultValue: String(getStepCountFromScreenWidth(2)),
+    parse: NumberParser,
+    stringify: NumberSerializer,
+  });
 
   const {
     isLoading: samplesLoading,
@@ -197,8 +203,8 @@ export const ProfileViewWithData = ({
     error: sourceError,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
     skip: !dashboardItems.includes('source'),
-    sourceBuildID: sourceBuildID ?? undefined,
-    sourceFilename: sourceFilename ?? undefined,
+    sourceBuildID,
+    sourceFilename,
     protoFilters,
   });
 
@@ -210,8 +216,8 @@ export const ProfileViewWithData = ({
     nodeTrimThreshold,
     groupBy: [FIELD_FUNCTION_NAME],
     invertCallStack: true,
-    sandwichByFunction: sandwichFunctionName ?? undefined,
-    skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
     protoFilters,
   });
 
@@ -223,8 +229,8 @@ export const ProfileViewWithData = ({
     nodeTrimThreshold,
     groupBy: [FIELD_FUNCTION_NAME],
     invertCallStack: false,
-    sandwichByFunction: sandwichFunctionName ?? undefined,
-    skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
+    sandwichByFunction: sandwichFunctionName,
+    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
     protoFilters,
   });
 

package/src/Sandwich/index.tsx

@@ -14,15 +14,14 @@
 import React, {useRef, useState} from 'react';
 
 import {AnimatePresence, motion} from 'framer-motion';
-import {useQueryState} from 'nuqs';
 
+import {useURLState} from '@parca/components';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {ProfileSource} from '../ProfileSource';
 import {useDashboard} from '../ProfileView/context/DashboardContext';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
 import {SandwichData} from '../ProfileView/types/visualization';
-import {stringParam} from '../hooks/urlParsers';
 import {CalleesSection} from './components/CalleesSection';
 import {CallersSection} from './components/CallersSection';
 
@@ -36,7 +35,7 @@ const Sandwich = React.memo(function Sandwich({
   profileSource,
 }: Props): React.JSX.Element {
   const {dashboardItems} = useDashboard();
-  const [sandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
 
   const callersRef = React.useRef<HTMLDivElement | null>(null);
   const calleesRef = React.useRef<HTMLDivElement | null>(null);
@@ -58,7 +57,7 @@ const Sandwich = React.memo(function Sandwich({
           transition={{duration: 0.5}}
         >
           <div className="relative flex flex-row">
-            {sandwichFunctionName != null ? (
+            {sandwichFunctionName !== undefined ? (
               <div className="w-full flex flex-col" ref={callersCalleesContainerRef}>
                 <CallersSection
                   callersRef={callersRef}