@parca/profile 0.19.138 → 0.19.140

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import type { ParamPreferences } from '@parca/components';
 import MatchersInput from './MatchersInput';
 import MetricsGraph, { type ContextMenuItemOrSubmenu, type Series } from './MetricsGraph';
 import ProfileExplorer from './ProfileExplorer';
@@ -25,7 +24,9 @@ export * from './useSumBy';
 export { QueryControls } from './QueryControls';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
-export declare const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences;
 export { useProfileTypes } from './ProfileSelector';
+export { stringParam, boolParam, intParam, commaArrayParam, invertCallStackParser, groupByParser, flamechartDimensionParser, tableColumnsParser, hiddenBinariesParser, jsonParser, } from './hooks/urlParsers';
+export { useDashboardItems } from './hooks/useDashboardItems';
+export { useColorBy } from './hooks/useColorBy';
 export { ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames, MetricsGraph, SimpleMatchers, MatchersInput, type ContextMenuItemOrSubmenu, type Series, LabelsQueryProvider, useLabelsQueryProvider, UnifiedLabelsProvider, useUnifiedLabels, useQueryState, type LabelsQueryProviderContextType, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,YAAY,EAAE,EAAC,KAAK,wBAAwB,EAAE,KAAK,MAAM,EAAC,MAAM,gBAAgB,CAAC;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,8BAA8B,EACpC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAOpD,OAAO,EAAC,yBAAyB,EAAC,MAAM,0CAA0C,CAAC;AAEnF,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,iBAAiB,EACjB,KAAK,aAAa,GACnB,MAAM,2DAA2D,CAAC;AACnE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,eAAO,MAAM,qCAAqC,EAAE,gBAWnD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,EACb,KAAK,wBAAwB,EAC7B,KAAK,MAAM,EACX,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,KAAK,8BAA8B,GACpC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,YAAY,EAAE,EAAC,KAAK,wBAAwB,EAAE,KAAK,MAAM,EAAC,MAAM,gBAAgB,CAAC;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,8BAA8B,EACpC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAOpD,OAAO,EAAC,yBAAyB,EAAC,MAAM,0CAA0C,CAAC;AAEnF,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,iBAAiB,EACjB,KAAK,aAAa,GACnB,MAAM,2DAA2D,CAAC;AACnE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EACL,WAAW,EACX,SAAS,EACT,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,aAAa,EACb,yBAAyB,EACzB,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,GACX,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,EACb,KAAK,wBAAwB,EAC7B,KAAK,MAAM,EACX,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,KAAK,8BAA8B,GACpC,CAAC"}

package/dist/index.js

@@ -42,17 +42,8 @@ export * from './useSumBy';
 export { QueryControls } from './QueryControls';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
-export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
-    dashboard_items: {
-        defaultValue: 'flamegraph',
-        splitOnCommas: true, // This param should split on commas for array values
-    },
-    group_by: {
-        splitOnCommas: true,
-    },
-    flamechart_dimension: {
-        splitOnCommas: true,
-    },
-};
 export { useProfileTypes } from './ProfileSelector';
+export { stringParam, boolParam, intParam, commaArrayParam, invertCallStackParser, groupByParser, flamechartDimensionParser, tableColumnsParser, hiddenBinariesParser, jsonParser, } from './hooks/urlParsers';
+export { useDashboardItems } from './hooks/useDashboardItems';
+export { useColorBy } from './hooks/useColorBy';
 export { ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames, MetricsGraph, SimpleMatchers, MatchersInput, LabelsQueryProvider, useLabelsQueryProvider, UnifiedLabelsProvider, useUnifiedLabels, useQueryState, };

package/dist/useSumBy.d.ts

@@ -12,7 +12,7 @@ export declare const useDefaultSumBy: (profileType: ProfileType | undefined, lab
     isLoading: boolean;
 };
 export declare const useSumByFromParams: (param: string | string[] | undefined) => string[] | undefined;
-export declare const sumByToParam: (sumBy: string[] | undefined) => string | string[] | undefined;
+export declare const sumByToParam: (sumBy: string[] | undefined) => string | null;
 export declare const useSumBy: (queryClient: QueryServiceClient, profileType: ProfileType | undefined, timeRange: DateTimeRange, draftProfileType: ProfileType | undefined, draftTimeRange: DateTimeRange, defaultValue?: string[]) => {
     sumBy: string[] | undefined;
     setSumBy: (sumBy: string[]) => void;

package/dist/useSumBy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,YAAY,MAAM,EAAE,GAAG,SAAS,EAChC,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CA2EF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAU9E,CAAC;AAGF,eAAO,MAAM,QAAQ,GACnB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,kBAAkB,WAAW,GAAG,SAAS,EACzC,gBAAgB,aAAa,EAC7B,eAAe,MAAM,EAAE,KACtB;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,eAAe,MAAM,EAAE,KACtB;IACD,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAyB9B,CAAC"}
+{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,YAAY,MAAM,EAAE,GAAG,SAAS,EAChC,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CA2EF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,IAUnE,CAAC;AAGF,eAAO,MAAM,QAAQ,GACnB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,kBAAkB,WAAW,GAAG,SAAS,EACzC,gBAAgB,aAAa,EAC7B,eAAe,MAAM,EAAE,KACtB;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,eAAe,MAAM,EAAE,KACtB;IACD,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAyB9B,CAAC"}

package/dist/useSumBy.js

@@ -122,12 +122,12 @@ export const useSumByFromParams = (param) => {
 };
 export const sumByToParam = (sumBy) => {
     if (sumBy === undefined) {
-        return undefined;
+        return null;
     }
     if (sumBy.length === 0) {
         return '__none__';
     }
-    return sumBy;
+    return sumBy.join(',');
 };
 // Combined hook that handles all sumBy logic: fetching labels, computing defaults, and managing selection
 export const useSumBy = (queryClient, profileType, timeRange, draftProfileType, draftTimeRange, defaultValue) => {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.138",
+  "version": "0.19.140",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.17.20",
-    "@parca/components": "0.16.410",
-    "@parca/dynamicsize": "0.16.73",
-    "@parca/hooks": "0.0.121",
-    "@parca/icons": "0.16.80",
-    "@parca/parser": "0.16.87",
-    "@parca/store": "0.16.204",
-    "@parca/test-utils": "0.0.21",
-    "@parca/utilities": "0.0.127",
+    "@parca/client": "0.17.22",
+    "@parca/components": "0.16.412",
+    "@parca/dynamicsize": "0.16.74",
+    "@parca/hooks": "0.0.123",
+    "@parca/icons": "0.16.81",
+    "@parca/parser": "0.16.88",
+    "@parca/store": "0.16.206",
+    "@parca/test-utils": "0.0.22",
+    "@parca/utilities": "0.0.129",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -42,6 +42,7 @@
     "graphviz-wasm": "3.0.2",
     "lodash.throttle": "^4.1.1",
     "lz4js": "^0.2.0",
+    "nuqs": "^2.4.1",
     "react": "18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-contexify": "^6.0.0",
@@ -88,5 +89,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "1db0ab5d776be443d6739892d31d746d4d2124ae"
+  "gitHead": "0ba0f2c0c43470e6b3e84e6a63299c42ff91e47b"
 }

package/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts

@@ -12,9 +12,10 @@
 // limitations under the License.
 
 import {Table} from '@uwdata/flechette';
+import {useQueryState} from 'nuqs';
 
 import {QueryRequest_ReportType} from '@parca/client';
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext} from '@parca/components';
 
 import {
   FIELD_FUNCTION_FILE_NAME,
@@ -30,6 +31,8 @@ import {
 import {arrowToString} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../ProfileSource';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
+import {stringParam} from '../../hooks/urlParsers';
+import {useDashboardItems} from '../../hooks/useDashboardItems';
 import {useQuery} from '../../useQuery';
 
 interface Props {
@@ -107,28 +110,23 @@ export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaIn
     ])
     .filter(value => value[1] !== '') as Array<[string, string]>;
 
-  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
+  const {dashboardItems, setDashboardItems} = useDashboardItems();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedBuildId, setSourceBuildId] = useURLState('source_buildid');
+  const [_unusedBuildId, setSourceBuildId] = useQueryState('source_buildid', stringParam);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedFilename, setSourceFilename] = useURLState('source_filename');
+  const [_unusedFilename, setSourceFilename] = useQueryState('source_filename', stringParam);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedLine, setSourceLine] = useURLState('source_line');
+  const [_unusedLine, setSourceLine] = useQueryState('source_line', stringParam);
 
   const openFile = (): void => {
     setDashboardItems([dashboardItems[0], 'source']);
     if (mappingBuildID != null) {
-      setSourceBuildId(mappingBuildID);
+      void setSourceBuildId(mappingBuildID);
     }
 
-    setSourceFilename(functionFilename);
+    void setSourceFilename(functionFilename);
     if (lineNumber !== undefined) {
-      setSourceLine(lineNumber.toString());
+      void setSourceLine(lineNumber.toString());
     }
   };
 

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -14,7 +14,6 @@
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {QueryServiceClient} from '@parca/client';
-import {useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import type {NavigateFunction} from '@parca/utilities';
@@ -34,7 +33,6 @@ const ProfileExplorerCompare = ({
   navigateTo,
 }: ProfileExplorerCompareProps): JSX.Element => {
   const [showMetricsGraph, setShowMetricsGraph] = useState(true);
-  const batchUpdates = useURLStateBatch();
   const {closeCompareMode, isCompareMode, isCompareAbsolute} = useCompareModeMeta();
 
   // Read ProfileSource states from URL for both sides
@@ -65,12 +63,10 @@ const ProfileExplorerCompare = ({
     }
 
     if (querySelectionB.expression === '' && querySelectionA.expression !== '') {
-      batchUpdates(() => {
-        setDraftExpressionB(querySelectionA.expression);
-        setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
-        // Commit to update the URL and trigger metrics graph load
-        commitDraftB();
-      });
+      setDraftExpressionB(querySelectionA.expression);
+      setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
+      // Commit to update the URL and trigger metrics graph load
+      commitDraftB();
     }
   }, [
     isCompareMode,
@@ -82,7 +78,6 @@ const ProfileExplorerCompare = ({
     setDraftExpressionB,
     setDraftTimeRangeB,
     commitDraftB,
-    batchUpdates,
   ]);
 
   const closeProfileA = useCallback((): void => {

package/src/ProfileFlameChart/SamplesStrips/index.tsx

@@ -39,10 +39,10 @@ interface Props {
   loading?: boolean;
   cpus: LabelSet[];
   data: DataPoint[][];
-  selectedTimeframe?: {
+  selectedTimeframe: {
     labels: LabelSet;
     bounds: NumberDuo;
-  };
+  } | null;
   onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
   width?: number;
   bounds: NumberDuo;

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

@@ -13,7 +13,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;
@@ -66,9 +68,9 @@ function calculateTruncatedText(
 function TextWithEllipsis({text, x, y, width}: Props): JSX.Element {
   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 (