@parca/profile 0.19.142 → 0.19.143

package/src/ProfileFlameChart/index.tsx

@@ -13,14 +13,10 @@
 
 import {useEffect, useMemo, useRef} from 'react';
 
+import {createParser, useQueryState} from 'nuqs';
+
 import {LabelSet, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {
-  Button,
-  useParcaContext,
-  useURLState,
-  useURLStateCustom,
-  type OptionsCustom,
-} from '@parca/components';
+import {Button, useParcaContext} from '@parca/components';
 import {Matcher, MatcherTypes, ProfileType, Query} from '@parca/parser';
 import {TimeUnits, formatDate, formatDuration} from '@parca/utilities';
 
@@ -29,6 +25,7 @@ import {boundsFromProfileSource} from '../ProfileFlameGraph/FlameGraphArrow/util
 import {MergedProfileSource, ProfileSource, timeFormat} from '../ProfileSource';
 import {useProfileFilters} from '../ProfileView/components/ProfileFilters/useProfileFilters';
 import type {SamplesData} from '../ProfileView/types/visualization';
+import {flamechartDimensionParser} from '../hooks/urlParsers';
 import {useQuery} from '../useQuery';
 import {NumberDuo} from '../utils';
 import {SamplesStrip} from './SamplesStrips';
@@ -38,11 +35,8 @@ interface SelectedTimeframe {
   bounds: NumberDuo;
 }
 
-const TimeframeStateSerializer: OptionsCustom<SelectedTimeframe | undefined> = {
-  parse: (value: string | string[] | undefined) => {
-    if (value == null || value === '' || value === 'undefined' || Array.isArray(value)) {
-      return undefined;
-    }
+const timeframeParser = createParser<SelectedTimeframe>({
+  parse: (value: string) => {
     try {
       const [labelPart, boundsPart] = value.split('|');
       if (labelPart != null && boundsPart != null) {
@@ -61,16 +55,13 @@ const TimeframeStateSerializer: OptionsCustom<SelectedTimeframe | undefined> = {
     } catch {
       // Ignore parsing errors
     }
-    return undefined;
+    return null;
   },
-  stringify: (value: SelectedTimeframe | undefined) => {
-    if (value == null) {
-      return '';
-    }
+  serialize: (value: SelectedTimeframe) => {
     const labelsStr = value.labels.labels.map(l => `${l.name}:${l.value}`).join(',');
     return `${labelsStr}|${value.bounds[0]},${value.bounds[1]}`;
   },
-};
+}).withOptions({history: 'replace'});
 
 interface ProfileFlameChartProps {
   samplesData?: SamplesData;
@@ -132,14 +123,16 @@ export const ProfileFlameChart = ({
   const {protoFilters} = useProfileFilters();
   const zoomControlsRef = useRef<HTMLDivElement>(null);
 
-  const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom<
-    SelectedTimeframe | undefined
-  >('flamechart_timeframe', TimeframeStateSerializer);
+  const [selectedTimeframe, setSelectedTimeframe] = useQueryState(
+    'flamechart_timeframe',
+    timeframeParser
+  );
 
   // Read flamechart dimension from URL state to detect changes
-  const [flamechartDimension] = useURLState<string[]>('flamechart_dimension', {
-    alwaysReturnArray: true,
-  });
+  const [flamechartDimension] = useQueryState(
+    'flamechart_dimension',
+    flamechartDimensionParser.withDefault([])
+  );
 
   // Reset selection when the parent time range (profileSource) changes
   const timeBoundsKey = boundsFromProfileSource(profileSource).join(',');
@@ -147,7 +140,7 @@ export const ProfileFlameChart = ({
   useEffect(() => {
     if (prevTimeBoundsKey.current !== timeBoundsKey) {
       prevTimeBoundsKey.current = timeBoundsKey;
-      setSelectedTimeframe(undefined);
+      void setSelectedTimeframe(null);
     }
   }, [timeBoundsKey, setSelectedTimeframe]);
 
@@ -157,16 +150,16 @@ export const ProfileFlameChart = ({
   useEffect(() => {
     if (prevDimensionKey.current !== dimensionKey) {
       prevDimensionKey.current = dimensionKey;
-      setSelectedTimeframe(undefined);
+      void setSelectedTimeframe(null);
     }
   }, [dimensionKey, setSelectedTimeframe]);
 
   // Handle timeframe selection from strips
   const handleSelectedTimeframe = (labels: LabelSet, bounds: NumberDuo | undefined): void => {
     if (bounds === undefined) {
-      setSelectedTimeframe(undefined);
+      void setSelectedTimeframe(null);
     } else {
-      setSelectedTimeframe({labels, bounds});
+      void setSelectedTimeframe({labels, bounds});
     }
   };
 

package/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx

@@ -14,10 +14,11 @@
 import {Icon} from '@iconify/react';
 import {Table} from '@uwdata/flechette';
 import cx from 'classnames';
+import {useQueryState} from 'nuqs';
 import {Item, Menu, Separator, Submenu} from 'react-contexify';
 import {Tooltip} from 'react-tooltip';
 
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 import {TEST_IDS} from '@parca/test-utils';
@@ -25,6 +26,8 @@ import {getLastItem} from '@parca/utilities';
 
 import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip';
 import {useGraphTooltipMetaInfo} from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
+import {stringParam} from '../../hooks/urlParsers';
+import {useDashboardItems} from '../../hooks/useDashboardItems';
 import {hexifyAddress, truncateString} from '../../utils';
 
 interface ContextMenuProps {
@@ -83,12 +86,10 @@ const ContextMenu = ({
     inlined,
   } = useGraphTooltipMetaInfo({table, row});
 
-  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
-    'sandwich_function_name'
+  const {dashboardItems, setDashboardItems} = useDashboardItems();
+  const [_sandwichFunctionName, setSandwichFunctionName] = useQueryState(
+    'sandwich_function_name',
+    stringParam
   );
 
   if (contextMenuData === null) {
@@ -195,12 +196,12 @@ const ContextMenu = ({
             }
 
             if (dashboardItems.includes('sandwich')) {
-              setSandwichFunctionName(functionName);
+              void setSandwichFunctionName(functionName);
               hideMenu();
               return;
             }
 
-            setSandwichFunctionName(functionName);
+            void setSandwichFunctionName(functionName);
             setDashboardItems([...dashboardItems, 'sandwich']);
             hideMenu();
           }}

package/src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx

@@ -15,7 +15,9 @@
 
 import {useEffect, useRef, useState} from 'react';
 
-import {useURLState} from '@parca/components';
+import {useQueryState} from 'nuqs';
+
+import {stringParam} from '../../hooks/urlParsers';
 
 interface Props {
   text: string;
@@ -69,9 +71,9 @@ function TextWithEllipsis({text, x, y, width}: Props): JSX.Element {
   'use no memo';
   const textRef = useRef<SVGTextElement>(null);
   const [displayText, setDisplayText] = useState(text);
-  const [alignFunctionName] = useURLState('align_function_name');
+  const [alignFunctionName] = useQueryState('align_function_name', stringParam.withDefault('left'));
 
-  const showFunctionNameFromLeft = alignFunctionName === 'left' || alignFunctionName === undefined;
+  const showFunctionNameFromLeft = alignFunctionName === 'left';
 
   useEffect(() => {
     const textElement = textRef.current;

package/src/ProfileFlameGraph/index.tsx

@@ -15,15 +15,11 @@ import React, {LegacyRef, ReactNode, useCallback, useEffect, useMemo, useState}
 
 import cx from 'classnames';
 import {AnimatePresence, motion} from 'framer-motion';
+import {useQueryState} from 'nuqs';
 import {useMeasure} from 'react-use';
 
 import {FlamegraphArrow} from '@parca/client';
-import {
-  FlameGraphSkeleton,
-  SandwichFlameGraphSkeleton,
-  useParcaContext,
-  useURLState,
-} from '@parca/components';
+import {FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
@@ -33,6 +29,7 @@ import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {useProfileMetadata} from '../ProfileView/hooks/useProfileMetadata';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
+import {boolParam} from '../hooks/urlParsers';
 import {FlameGraphArrow} from './FlameGraphArrow';
 import {CurrentPathFrame} from './FlameGraphArrow/utils';
 
@@ -137,8 +134,8 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   // 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] = useURLState('compare_absolute');
-  const isCompareAbsolute = compareAbsolute === 'true';
+  const [compareAbsolute] = useQueryState('compare_absolute', boolParam);
+  const isCompareAbsolute = compareAbsolute ?? compareAbsoluteDefault === 'true';
 
   const mappingsListCount = useMemo(
     () => mappingsList.filter(m => m !== '').length,
@@ -180,7 +177,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   // If there is only one mapping file, we want to color by filename by default.
   useEffect(() => {
     if (mappingsListCount === 1 && colorBy !== 'filename') {
-      setColorBy('filename');
+      void setColorBy('filename');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mappingsListCount]);

package/src/ProfileMetricsGraph/index.tsx

@@ -15,6 +15,7 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import {AnimatePresence, motion} from 'framer-motion';
+import {useQueryState} from 'nuqs';
 
 import {
   Label,
@@ -25,11 +26,8 @@ import {
 import {
   DateTimeRange,
   MetricsGraphSkeleton,
-  NumberParser,
-  NumberSerializer,
   TextWithTooltip,
   useParcaContext,
-  useURLStateCustom,
 } from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
@@ -38,6 +36,7 @@ import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph, {ContextMenuItemOrSubmenu, Series, SeriesPoint} from '../MetricsGraph';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
+import {intParam} from '../hooks/urlParsers';
 import {getStepCountFromScreenWidth, useQueryRange} from './hooks/useQueryRange';
 
 const createProfileContextMenuItems = (
@@ -200,11 +199,10 @@ const ProfileMetricsGraph = ({
   comparing = false,
   sumBy,
 }: ProfileMetricsGraphProps): JSX.Element => {
-  const [rawStepCount] = useURLStateCustom<number>('step_count', {
-    defaultValue: String(getStepCountFromScreenWidth(10)),
-    parse: NumberParser,
-    stringify: NumberSerializer,
-  });
+  const [rawStepCount] = useQueryState(
+    'step_count',
+    intParam.withDefault(getStepCountFromScreenWidth(10))
+  );
   // Clamp step count so the step duration is at least 1 second as we don't have this enforced server-side anymore.
   const stepCount = useMemo(() => {
     const maxForOneSecond = Math.floor((to - from) / 1000);

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -14,7 +14,7 @@
 import cx from 'classnames';
 
 import {Label, QueryServiceClient} from '@parca/client';
-import {DateTimeRange, useParcaContext, useURLStateBatch} from '@parca/components';
+import {DateTimeRange, useParcaContext} from '@parca/components';
 import {Query} from '@parca/parser';
 
 import {ProfileSelection} from '..';
@@ -67,7 +67,6 @@ export function MetricsGraphSection({
   hasNoProfileTypes = false,
 }: MetricsGraphSectionProps): JSX.Element {
   const resetStateOnSeriesChange = useResetStateOnSeriesChange();
-  const batchUpdates = useURLStateBatch();
   const {profileExplorer} = useParcaContext();
   const {heightStyle} = useMetricsGraphDimensions(comparing, profileExplorer?.metricsGraph.height);
   const handleTimeRangeChange = (range: DateTimeRange): void => {
@@ -117,10 +116,8 @@ export function MetricsGraphSection({
 
     if (hasChanged) {
       // Immediately apply the filter when adding label matchers from the graph
-      batchUpdates(() => {
-        setNewQueryExpression(newQuery.toString());
-        commitDraft(undefined, newQuery.toString());
-      });
+      setNewQueryExpression(newQuery.toString());
+      commitDraft(undefined, newQuery.toString());
     }
   };
 
@@ -141,10 +138,8 @@ export function MetricsGraphSection({
 
     const mergeFrom = timestamp;
     const mergeTo = query.profileType().delta ? mergeFrom + BigInt(duration) : mergeFrom;
-    batchUpdates(() => {
-      resetStateOnSeriesChange(); // reset some state when a new series is selected
-      setProfileSelection(mergeFrom, mergeTo, query);
-    });
+    resetStateOnSeriesChange(); // reset some state when a new series is selected
+    setProfileSelection(mergeFrom, mergeTo, query);
   };
 
   return (

package/src/ProfileSelector/index.tsx

@@ -14,16 +14,10 @@
 import {Dispatch, SetStateAction, useCallback, useMemo, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
+import {useQueryState as useNuqsQueryState} from 'nuqs';
 
 import {ProfileTypesRequest, ProfileTypesResponse, QueryServiceClient} from '@parca/client';
-import {
-  DateTimeRange,
-  IconButton,
-  useGrpcMetadata,
-  useParcaContext,
-  useURLState,
-  useURLStateBatch,
-} from '@parca/components';
+import {DateTimeRange, IconButton, useGrpcMetadata, useParcaContext} from '@parca/components';
 import {CloseIcon} from '@parca/icons';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
@@ -36,6 +30,7 @@ import {
 import {QueryControls} from '../QueryControls';
 import {LabelsQueryProvider, useLabelsQueryProvider} from '../contexts/LabelsQueryProvider';
 import {UnifiedLabelsProvider} from '../contexts/UnifiedLabelsContext';
+import {stringParam} from '../hooks/urlParsers';
 import {useLabelNames} from '../hooks/useLabels';
 import {useQueryState} from '../hooks/useQueryState';
 import useGrpcQuery from '../useGrpcQuery';
@@ -109,7 +104,7 @@ const ProfileSelector = ({
   closeProfile,
   enforcedProfileName,
   comparing,
-  navigateTo,
+  navigateTo: _navigateTo,
   showMetricsGraph = true,
   showSumBySelector = true,
   showProfileTypeSelector = true,
@@ -118,8 +113,16 @@ const ProfileSelector = ({
   onSearchHook,
 }: ProfileSelectorProps): JSX.Element => {
   const {externalProfilerComponent, additionalMetricsGraph} = useParcaContext();
-  const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
-  const batchUpdates = useURLStateBatch();
+  const [queryBrowserMode, setRawQueryBrowserMode] = useNuqsQueryState(
+    'query_browser_mode',
+    stringParam
+  );
+  const setQueryBrowserMode = useCallback(
+    (mode: string | null) => {
+      void setRawQueryBrowserMode(mode);
+    },
+    [setRawQueryBrowserMode]
+  );
 
   const profileFilterDefaults = externalProfilerComponent?.profileFilterDefaults as
     | ProfileFilter[]
@@ -245,27 +248,25 @@ const ProfileSelector = ({
   const selectedProfileName = query.profileName();
 
   const setQueryExpression = (updateTs = false): void => {
-    batchUpdates(() => {
-      if (onSearchHook != null) {
-        onSearchHook();
-      }
-      // When updateTs is true, re-evaluate the time range to current values
-      if (updateTs) {
-        // Force re-evaluation of time range (important for relative ranges like "last 15 minutes")
-        const currentFrom = timeRangeSelection.getFromMs(true);
-        const currentTo = timeRangeSelection.getToMs(true);
-        const currentRangeKey = timeRangeSelection.getRangeKey();
-        // Commit with refreshed time range
-        commitDraft({
-          from: currentFrom,
-          to: currentTo,
-          timeSelection: currentRangeKey,
-        });
-      } else {
-        // Commit the draft with existing values
-        commitDraft();
-      }
-    });
+    if (onSearchHook != null) {
+      onSearchHook();
+    }
+    // When updateTs is true, re-evaluate the time range to current values
+    if (updateTs) {
+      // Force re-evaluation of time range (important for relative ranges like "last 15 minutes")
+      const currentFrom = timeRangeSelection.getFromMs(true);
+      const currentTo = timeRangeSelection.getToMs(true);
+      const currentRangeKey = timeRangeSelection.getRangeKey();
+      // Commit with refreshed time range
+      commitDraft({
+        from: currentFrom,
+        to: currentTo,
+        timeSelection: currentRangeKey,
+      });
+    } else {
+      // Commit the draft with existing values
+      commitDraft();
+    }
   };
 
   const setMatchersString = (matchers: string): void => {
@@ -293,7 +294,6 @@ const ProfileSelector = ({
     setProfileName,
     setQueryExpression,
     querySelection,
-    navigateTo,
     loading: sumByLoading,
     defaultProfileType: externalProfilerComponent?.defaultProfileType,
   });

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -13,13 +13,16 @@
 
 import {useEffect, useRef} from 'react';
 
+import {useQueryStates} from 'nuqs';
+
 import {ProfileTypesResponse} from '@parca/client';
 import {selectAutoQuery, setAutoQuery, useAppDispatch, useAppSelector} from '@parca/store';
-import {type NavigateFunction} from '@parca/utilities';
 
-import {ProfileSelectionFromParams, SuffixParams} from '..';
+import {ProfileSelectionFromParams} from '..';
 import {QuerySelection} from '../ProfileSelector';
 import {constructProfileName} from '../ProfileTypeSelector';
+import {boolParam, stringParam} from '../hooks/urlParsers';
+import {useDashboardItems} from '../hooks/useDashboardItems';
 
 interface Props {
   selectedProfileName: string;
@@ -27,7 +30,6 @@ interface Props {
   setProfileName: (name: string) => void;
   setQueryExpression: () => void;
   querySelection: QuerySelection;
-  navigateTo: NavigateFunction;
   loading: boolean;
   defaultProfileType?: string;
 }
@@ -38,18 +40,40 @@ export const useAutoQuerySelector = ({
   setProfileName,
   setQueryExpression,
   querySelection,
-  navigateTo,
   loading,
   defaultProfileType,
 }: Props): void => {
   const autoQuery = useAppSelector(selectAutoQuery);
   const dispatch = useAppDispatch();
-  const queryParams = new URLSearchParams(location.search);
-  const compareA = queryParams.get('compare_a');
-  const compareB = queryParams.get('compare_b');
-  const comparing = compareA === 'true' || compareB === 'true';
-  const expressionA = queryParams.get('expression_a');
-  const expressionB = queryParams.get('expression_b');
+
+  const {setDashboardItems} = useDashboardItems();
+
+  const [compareState, setCompareParams] = useQueryStates(
+    {
+      compare_a: boolParam,
+      compare_b: boolParam,
+      expression_a: stringParam,
+      from_a: stringParam,
+      to_a: stringParam,
+      time_selection_a: stringParam,
+      sum_by_a: stringParam,
+      merge_from_a: stringParam,
+      merge_to_a: stringParam,
+      selection_a: stringParam,
+      expression_b: stringParam,
+      from_b: stringParam,
+      to_b: stringParam,
+      time_selection_b: stringParam,
+      sum_by_b: stringParam,
+      search_string: stringParam,
+    },
+    {history: 'replace'}
+  );
+
+  // Read compare params through nuqs (not location.search) to stay in sync
+  const comparing = compareState.compare_a === true || compareState.compare_b === true;
+  const expressionA = compareState.expression_a;
+  const expressionB = compareState.expression_b;
 
   // Track if we've already set up compare mode to prevent infinite loops
   const hasSetupCompareMode = useRef(false);
@@ -64,13 +88,7 @@ export const useAutoQuerySelector = ({
     // 2. expressionA exists
     // 3. expressionB doesn't exist yet (meaning we need to set it up)
     // 4. We haven't already set it up in this session
-    if (
-      comparing &&
-      expressionA !== null &&
-      expressionA !== undefined &&
-      expressionB === null &&
-      !hasSetupCompareMode.current
-    ) {
+    if (comparing && expressionA !== null && expressionB === null && !hasSetupCompareMode.current) {
       if (querySelection.expression === undefined) {
         return;
       }
@@ -87,42 +105,46 @@ export const useAutoQuerySelector = ({
         sumBy: querySelection.sumBy,
       };
 
-      const sumBy = queryA.sumBy?.join(',');
+      const sumBy = queryA.sumBy?.join(',') ?? null;
+
+      const mergeFromA = profileA != null ? profileA.HistoryParams().merge_from?.toString() : null;
+      const mergeToA = profileA != null ? profileA.HistoryParams().merge_to?.toString() : null;
+      const selectionA = profileA != null ? profileA.HistoryParams().selection?.toString() : null;
+
+      hasSetupCompareMode.current = true;
 
-      let compareQuery: Record<string, string> = {
-        compare_a: 'true',
+      // Set all compare params atomically via nuqs
+      void setCompareParams({
+        compare_a: true,
+        compare_b: true,
         expression_a: queryA.expression,
         from_a: queryA.from.toString(),
         to_a: queryA.to.toString(),
         time_selection_a: queryA.timeSelection,
-
-        compare_b: 'true',
+        sum_by_a: sumBy,
+        merge_from_a: mergeFromA,
+        merge_to_a: mergeToA,
+        selection_a: selectionA,
         expression_b: queryA.expression,
         from_b: queryA.from.toString(),
         to_b: queryA.to.toString(),
         time_selection_b: queryA.timeSelection,
-      };
-
-      if (sumBy != null) {
-        compareQuery.sum_by_a = sumBy;
-        compareQuery.sum_by_b = sumBy;
-      }
-
-      if (profileA != null) {
-        compareQuery = {
-          ...SuffixParams(profileA.HistoryParams(), '_a'),
-          ...compareQuery,
-        };
-      }
-
-      hasSetupCompareMode.current = true;
-      void navigateTo('/', {
-        ...compareQuery,
-        search_string: '',
-        dashboard_items: ['flamegraph'],
+        sum_by_b: sumBy,
+        search_string: null,
       });
+
+      setDashboardItems(['flamegraph']);
     }
-  }, [comparing, querySelection, navigateTo, expressionA, expressionB, dispatch, loading]);
+  }, [
+    comparing,
+    querySelection,
+    expressionA,
+    expressionB,
+    dispatch,
+    loading,
+    setCompareParams,
+    setDashboardItems,
+  ]);
 
   // Effect to load some initial data on load when is no selection
   useEffect(() => {

package/src/ProfileView/components/ActionButtons/SortByDropdown.tsx

@@ -11,19 +11,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Select, useURLState} from '@parca/components';
+import {useQueryState} from 'nuqs';
+
+import {Select} from '@parca/components';
 
 import {
   FIELD_CUMULATIVE,
   FIELD_DIFF,
   FIELD_FUNCTION_NAME,
 } from '../../../ProfileFlameGraph/FlameGraphArrow';
+import {stringParam} from '../../../hooks/urlParsers';
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 
 const SortByDropdown = (): React.JSX.Element => {
-  const [storeSortBy, setStoreSortBy] = useURLState('sort_by', {
-    defaultValue: FIELD_FUNCTION_NAME,
-  });
+  const [storeSortBy, setStoreSortBy] = useQueryState(
+    'sort_by',
+    stringParam.withDefault(FIELD_FUNCTION_NAME)
+  );
 
   const {compareMode} = useProfileViewContext();
 
@@ -70,8 +74,8 @@ const SortByDropdown = (): React.JSX.Element => {
             },
           },
         ]}
-        selectedKey={storeSortBy as string}
-        onSelection={key => setStoreSortBy(key)}
+        selectedKey={storeSortBy}
+        onSelection={key => void setStoreSortBy(key)}
         placeholder={'Sort By'}
         primary={false}
         disabled={false}

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -16,12 +16,12 @@ import React, {useMemo} from 'react';
 import {Icon} from '@iconify/react';
 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 {getMappingColors} from '../../ProfileFlameGraph/FlameGraphArrow';
 import useMappingList from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
+import {useColorBy} from '../../hooks/useColorBy';
 import {useProfileFilters} from './ProfileFilters/useProfileFilters';
 
 interface Props {
@@ -37,9 +37,7 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
   );
 
-  const [colorByValue, _] = useURLState('color_by');
-
-  const colorBy = colorByValue === 'binary' || colorByValue === undefined ? 'binary' : 'filename';
+  const {colorBy} = useColorBy();
 
   const {appliedFilters, removeExcludeBinary, excludeBinary} = useProfileFilters();