@parca/profile 0.19.139 → 0.19.140

package/dist/ProfileView/components/InvertCallStack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/InvertCallStack/index.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,eAAe,QAAO,GAAG,CAAC,OA0B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/InvertCallStack/index.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,eAAe,QAAO,GAAG,CAAC,OAyB/B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileView/components/InvertCallStack/index.js

@@ -12,15 +12,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Icon } from '@iconify/react';
-import { Button, useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
+import { Button } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
+import { invertCallStackParser } from '../../../hooks/urlParsers';
 import { useResetFlameGraphState } from '../../hooks/useResetFlameGraphState';
 const InvertCallStack = () => {
-    const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
-    const isInvert = invertStack === 'true';
+    const [isInvert, setInvertStack] = useQueryState('invert_call_stack', invertCallStackParser);
     const resetFlameGraphState = useResetFlameGraphState();
     const handleSetInvert = (value) => {
-        setInvertStack(value ? 'true' : '');
+        void setInvertStack(value);
         resetFlameGraphState();
     };
     return (_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { className: "text-sm", children: "\u00A0" }), _jsxs(Button, { variant: "neutral", className: "flex items-center gap-2 whitespace-nowrap", onClick: () => handleSetInvert(!isInvert), id: "h-invert-call-stack", ...testId(TEST_IDS.INVERT_CALL_STACK_BUTTON), children: [_jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', className: "h-4 w-4" }), isInvert ? 'Original' : 'Invert', " Call Stack"] })] }));

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.d.ts

@@ -1,9 +1,8 @@
-import { type ParamValueSetterCustom } from '@parca/components';
 import { type ProfileFilter } from './useProfileFilters';
 export declare const decodeProfileFilters: (encoded: string) => ProfileFilter[];
 export declare const useProfileFiltersUrlState: () => {
     appliedFilters: ProfileFilter[];
-    setAppliedFilters: ParamValueSetterCustom<ProfileFilter[]>;
+    setAppliedFilters: (filters: ProfileFilter[]) => void;
     forceApplyFilters: (filters: ProfileFilter[]) => void;
 };
 //# sourceMappingURL=useProfileFiltersUrlState.d.ts.map

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProfileFiltersUrlState.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts"],"names":[],"mappings":"AAeA,OAAO,EAAsC,KAAK,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAInG,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAsEvD,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,aAAa,EAgDnE,CAAC;AAEF,eAAO,MAAM,yBAAyB,QAAO;IAC3C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,sBAAsB,CAAC,aAAa,EAAE,CAAC,CAAC;IAC3D,iBAAiB,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CA4CvD,CAAC"}
+{"version":3,"file":"useProfileFiltersUrlState.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAsEvD,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,aAAa,EAgDnE,CAAC;AAUF,eAAO,MAAM,yBAAyB,QAAO;IAC3C,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACtD,iBAAiB,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CAmCvD,CAAC"}

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useCallback, useMemo } from 'react';
-import { useURLStateBatch, useURLStateCustom } from '@parca/components';
+import { createParser, useQueryState } from 'nuqs';
 import { safeDecode } from '@parca/utilities';
 import { isPresetKey } from './filterPresets';
 // Compact encoding mappings
@@ -113,21 +113,21 @@ export const decodeProfileFilters = (encoded) => {
         return [];
     }
 };
+const profileFiltersParser = createParser({
+    parse: (value) => decodeProfileFilters(value),
+    serialize: (value) => encodeProfileFilters(value),
+    eq: (a, b) => encodeProfileFilters(a) === encodeProfileFilters(b),
+})
+    .withDefault([])
+    .withOptions({ history: 'replace' });
 export const useProfileFiltersUrlState = () => {
-    const batchUpdates = useURLStateBatch();
-    // Store applied filters in URL state for persistence using compact encoding
-    const [appliedFilters, setAppliedFilters] = useURLStateCustom(`profile_filters`, {
-        parse: value => {
-            return decodeProfileFilters(value);
-        },
-        stringify: value => {
-            return encodeProfileFilters(value);
-        },
-        defaultValue: [],
-    });
+    const [appliedFilters, setRawFilters] = useQueryState('profile_filters', profileFiltersParser);
     const memoizedAppliedFilters = useMemo(() => {
         return appliedFilters ?? [];
     }, [appliedFilters]);
+    const setAppliedFilters = useCallback((filters) => {
+        void setRawFilters(filters);
+    }, [setRawFilters]);
     // Force apply filters (bypasses preserve-existing strategy)
     const forceApplyFilters = useCallback((filters) => {
         const validFilters = filters.filter(f => {
@@ -136,10 +136,8 @@ export const useProfileFiltersUrlState = () => {
             }
             return f.value !== '' && f.type != null && f.field != null && f.matchType != null;
         });
-        batchUpdates(() => {
-            setAppliedFilters(validFilters);
-        });
-    }, [batchUpdates, setAppliedFilters]);
+        setAppliedFilters(validFilters);
+    }, [setAppliedFilters]);
     return {
         appliedFilters: memoizedAppliedFilters,
         setAppliedFilters,

package/dist/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.test.js

@@ -1,70 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // eslint-disable-next-line import/named
 import { act, renderHook, waitFor } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { URLStateProvider } from '@parca/components';
+// eslint-disable-next-line import/no-unresolved
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { describe, expect, it, vi } from 'vitest';
 import { decodeProfileFilters, useProfileFiltersUrlState } from './useProfileFiltersUrlState';
-// Mock window.location
-const mockLocation = {
-    pathname: '/test',
-    search: '',
-};
-// Mock the navigate function
-const mockNavigateTo = vi.fn((path, params) => {
-    const searchParams = new URLSearchParams();
-    Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined && value !== null) {
-            if (Array.isArray(value)) {
-                searchParams.set(key, value.join(','));
-            }
-            else {
-                searchParams.set(key, String(value));
-            }
-        }
-    });
-    mockLocation.search = `?${searchParams.toString()}`;
-});
-// Mock getQueryParamsFromURL
-vi.mock('@parca/components/src/hooks/URLState/utils', async () => {
-    const actual = await vi.importActual('@parca/components/src/hooks/URLState/utils');
-    return {
-        ...actual,
-        getQueryParamsFromURL: () => {
-            if (mockLocation.search === '')
-                return {};
-            const params = new URLSearchParams(mockLocation.search);
-            const result = {};
-            for (const [key, value] of params.entries()) {
-                const decodedValue = decodeURIComponent(value);
-                const existing = result[key];
-                if (existing !== undefined) {
-                    result[key] = Array.isArray(existing)
-                        ? [...existing, decodedValue]
-                        : [existing, decodedValue];
-                }
-                else {
-                    result[key] = decodedValue;
-                }
-            }
-            return result;
-        },
-    };
-});
-// Helper to create wrapper with URLStateProvider
-const createWrapper = () => {
-    const Wrapper = ({ children }) => (_jsx(URLStateProvider, { navigateTo: mockNavigateTo, children: children }));
-    Wrapper.displayName = 'URLStateProviderWrapper';
+// Helper to create wrapper with NuqsTestingAdapter
+const createWrapper = (searchParams = {}, onUrlUpdate) => {
+    const Wrapper = ({ children }) => (_jsx(NuqsTestingAdapter, { searchParams: searchParams, onUrlUpdate: onUrlUpdate, hasMemory: true, children: children }));
+    Wrapper.displayName = 'NuqsTestingWrapper';
     return Wrapper;
 };
 describe('useProfileFiltersUrlState', () => {
-    beforeEach(() => {
-        mockNavigateTo.mockClear();
-        Object.defineProperty(window, 'location', {
-            value: mockLocation,
-            writable: true,
-        });
-        mockLocation.search = '';
-    });
     describe('decodeProfileFilters', () => {
         it('should return empty array for empty string', () => {
             expect(decodeProfileFilters('')).toEqual([]);
@@ -206,8 +153,9 @@ describe('useProfileFiltersUrlState', () => {
             expect(result.current.appliedFilters).toEqual([]);
         });
         it('should read filters from URL', async () => {
-            mockLocation.search = '?profile_filters=s:fn:=:testFunc';
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({ profile_filters: 's:fn:=:testFunc' }),
+            });
             await waitFor(() => {
                 expect(result.current.appliedFilters).toHaveLength(1);
                 expect(result.current.appliedFilters[0]).toMatchObject({
@@ -219,7 +167,10 @@ describe('useProfileFiltersUrlState', () => {
             });
         });
         it('should update URL when setting filters', async () => {
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({}, onUrlUpdate),
+            });
             const newFilters = [
                 {
                     id: 'test-1',
@@ -233,22 +184,23 @@ describe('useProfileFiltersUrlState', () => {
                 result.current.setAppliedFilters(newFilters);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                expect(params.profile_filters).toBe('f:b:!~:libc.so');
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                expect(lastCall.searchParams.get('profile_filters')).toBe('f:b:!~:libc.so');
             });
         });
         it('should clear URL param when setting empty filters', async () => {
-            mockLocation.search = '?profile_filters=s:fn:=:testFunc';
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({ profile_filters: 's:fn:=:testFunc' }, onUrlUpdate),
+            });
             act(() => {
                 result.current.setAppliedFilters([]);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                // When filters are empty, the param is either empty string or undefined (removed)
-                expect(params.profile_filters === '' || params.profile_filters === undefined).toBe(true);
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                expect(lastCall.searchParams.has('profile_filters')).toBe(false);
             });
         });
     });
@@ -258,8 +210,10 @@ describe('useProfileFiltersUrlState', () => {
             expect(typeof result.current.forceApplyFilters).toBe('function');
         });
         it('should force apply filters overwriting existing', async () => {
-            mockLocation.search = '?profile_filters=s:fn:=:existingFunc';
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({ profile_filters: 's:fn:=:existingFunc' }, onUrlUpdate),
+            });
             // Verify existing filter is loaded
             await waitFor(() => {
                 expect(result.current.appliedFilters).toHaveLength(1);
@@ -277,28 +231,32 @@ describe('useProfileFiltersUrlState', () => {
                 result.current.forceApplyFilters(newFilters);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                expect(params.profile_filters).toBe('f:b:!~:forcedValue');
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                expect(lastCall.searchParams.get('profile_filters')).toBe('f:b:!~:forcedValue');
             });
         });
         it('should clear filters when force applying empty array', async () => {
-            mockLocation.search = '?profile_filters=s:fn:=:existingFunc';
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({ profile_filters: 's:fn:=:existingFunc' }, onUrlUpdate),
+            });
             act(() => {
                 result.current.forceApplyFilters([]);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                // When filters are empty, the param is either empty string or undefined (removed)
-                expect(params.profile_filters === '' || params.profile_filters === undefined).toBe(true);
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                expect(lastCall.searchParams.has('profile_filters')).toBe(false);
             });
         });
     });
     describe('Preset filter encoding', () => {
         it('should encode preset filters correctly', async () => {
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({}, onUrlUpdate),
+            });
             const presetFilters = [
                 {
                     id: 'preset-1',
@@ -310,13 +268,16 @@ describe('useProfileFiltersUrlState', () => {
                 result.current.setAppliedFilters(presetFilters);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                expect(params.profile_filters).toBe('p:hide_libc:enabled');
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                expect(lastCall.searchParams.get('profile_filters')).toBe('p:hide_libc:enabled');
             });
         });
         it('should handle mixed preset and regular filters', async () => {
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({}, onUrlUpdate),
+            });
             const mixedFilters = [
                 {
                     id: 'preset-1',
@@ -335,15 +296,18 @@ describe('useProfileFiltersUrlState', () => {
                 result.current.setAppliedFilters(mixedFilters);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                expect(params.profile_filters).toBe('p:hide_libc:enabled,f:b:!~:node');
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                expect(lastCall.searchParams.get('profile_filters')).toBe('p:hide_libc:enabled,f:b:!~:node');
             });
         });
     });
     describe('URL encoding edge cases', () => {
         it('should handle special characters in filter values', async () => {
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({}, onUrlUpdate),
+            });
             const filtersWithSpecialChars = [
                 {
                     id: 'special-1',
@@ -357,14 +321,18 @@ describe('useProfileFiltersUrlState', () => {
                 result.current.setAppliedFilters(filtersWithSpecialChars);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                // Value should be URL encoded
-                expect(params.profile_filters).toContain('std%3A%3Avector%3Cint%3E');
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                const filterValue = lastCall.searchParams.get('profile_filters');
+                // The value should contain the encoded special characters
+                expect(filterValue).toContain('std%3A%3Avector%3Cint%3E');
             });
         });
         it('should filter out incomplete filters when encoding', async () => {
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({}, onUrlUpdate),
+            });
             const incompleteFilters = [
                 {
                     id: 'complete-1',
@@ -389,10 +357,10 @@ describe('useProfileFiltersUrlState', () => {
                 result.current.setAppliedFilters(incompleteFilters);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
                 // Only the complete filter should be encoded
-                expect(params.profile_filters).toBe('f:b:!~:valid');
+                expect(lastCall.searchParams.get('profile_filters')).toBe('f:b:!~:valid');
             });
         });
     });
@@ -409,8 +377,9 @@ describe('useProfileFiltersUrlState', () => {
             expect(result.current.appliedFilters).toEqual([]);
         });
         it('should return correctly structured filters from URL', async () => {
-            mockLocation.search = '?profile_filters=s:fn:=:testFunc';
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({ profile_filters: 's:fn:=:testFunc' }),
+            });
             await waitFor(() => {
                 expect(result.current.appliedFilters).toHaveLength(1);
             });
@@ -426,13 +395,12 @@ describe('useProfileFiltersUrlState', () => {
     });
     describe('View switching scenarios', () => {
         it('should completely replace filters when switching views using forceApplyFilters', async () => {
-            // Start with View A's filters (2 filters)
-            mockLocation.search = '?profile_filters=s:fn:=:viewAFunc,f:b:!=:viewABinary';
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const onUrlUpdate = vi.fn();
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({ profile_filters: 's:fn:=:viewAFunc,f:b:!=:viewABinary' }, onUrlUpdate),
+            });
             await waitFor(() => {
                 expect(result.current.appliedFilters).toHaveLength(2);
-                expect(result.current.appliedFilters[0].value).toBe('viewAFunc');
-                expect(result.current.appliedFilters[1].value).toBe('viewABinary');
             });
             // Switch to View B (completely different filter)
             const viewBFilters = [
@@ -448,77 +416,23 @@ describe('useProfileFiltersUrlState', () => {
                 result.current.forceApplyFilters(viewBFilters);
             });
             await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
+                expect(onUrlUpdate).toHaveBeenCalled();
+                const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+                const filterValue = lastCall.searchParams.get('profile_filters');
                 // View A's filters should be completely gone
-                expect(params.profile_filters).not.toContain('viewAFunc');
-                expect(params.profile_filters).not.toContain('viewABinary');
+                expect(filterValue).not.toContain('viewAFunc');
+                expect(filterValue).not.toContain('viewABinary');
                 // Only View B's filter should be present
-                expect(params.profile_filters).toBe('f:fn:~:viewBOnly');
-            });
-        });
-        it('should handle sequential view switches correctly', async () => {
-            // Simulate: [default] -> [storage] -> [testing-view]
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
-            // View 1: default view (1 filter)
-            const defaultFilters = [{ id: 'd-1', type: 'hide_libc', value: 'enabled' }];
-            act(() => {
-                result.current.forceApplyFilters(defaultFilters);
-            });
-            await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                expect(params.profile_filters).toBe('p:hide_libc:enabled');
-            });
-            mockNavigateTo.mockClear();
-            // View 2: storage view (3 filters)
-            const storageFilters = [
-                { id: 's-1', type: 'stack', field: 'function_name', matchType: 'not_contains', value: 'io' },
-                { id: 's-2', type: 'frame', field: 'binary', matchType: 'not_contains', value: 'disk' },
-                { id: 's-3', type: 'frame', field: 'function_name', matchType: 'contains', value: 'storage' },
-            ];
-            act(() => {
-                result.current.forceApplyFilters(storageFilters);
-            });
-            await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                // Default view's filter should be gone
-                expect(params.profile_filters).not.toContain('hide_libc');
-                // Storage view should have 3 filters
-                expect(params.profile_filters).toContain('io');
-                expect(params.profile_filters).toContain('disk');
-                expect(params.profile_filters).toContain('storage');
-            });
-            mockNavigateTo.mockClear();
-            // View 3: testing-view (2 filters)
-            const testingFilters = [
-                { id: 't-1', type: 'stack', field: 'function_name', matchType: 'equal', value: 'test_main' },
-                { id: 't-2', type: 'frame', field: 'binary', matchType: 'contains', value: 'test' },
-            ];
-            act(() => {
-                result.current.forceApplyFilters(testingFilters);
-            });
-            await waitFor(() => {
-                expect(mockNavigateTo).toHaveBeenCalled();
-                const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-                // Storage view's filters should be gone
-                expect(params.profile_filters).not.toContain('io');
-                expect(params.profile_filters).not.toContain('disk');
-                expect(params.profile_filters).not.toContain('storage');
-                // Testing view should have its 2 filters
-                expect(params.profile_filters).toContain('test_main');
-                expect(params.profile_filters).toContain('test');
+                expect(filterValue).toBe('f:fn:~:viewBOnly');
             });
         });
         it('should not change filters when clicking the same view tab', async () => {
-            // Start with existing filters
-            mockLocation.search = '?profile_filters=s:fn:=:existingFilter';
-            const { result } = renderHook(() => useProfileFiltersUrlState(), { wrapper: createWrapper() });
+            const { result } = renderHook(() => useProfileFiltersUrlState(), {
+                wrapper: createWrapper({ profile_filters: 's:fn:=:existingFilter' }),
+            });
             await waitFor(() => {
                 expect(result.current.appliedFilters).toHaveLength(1);
             });
-            mockNavigateTo.mockClear();
             // Apply the same filters (simulating clicking the same view tab)
             const sameFilters = [
                 {

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAkK1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsPzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAmK1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoPzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.js

@@ -15,9 +15,10 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Menu } from '@headlessui/react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
-import { useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../../ProfileFlameGraph/FlameGraphArrow';
+import { boolParam, hiddenBinariesParser, stringParam } from '../../../hooks/urlParsers';
 import { useProfileViewContext } from '../../context/ProfileViewContext';
 import SwitchMenuItem from './SwitchMenuItem';
 const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdown, isNested = false, activeValueForSortBy, activeValueForColorBy, activeValuesForLevel, value, disabled = false, icon, customSubmenu, renderAsDiv = false, }) => {
@@ -73,23 +74,18 @@ const MenuItem = ({ label, items, onclick, onSelect, path = [], id, closeDropdow
 const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isTableVizOnly, alignFunctionName, setAlignFunctionName, colorBy, setColorBy, }) => {
     const dropdownRef = useRef(null);
     const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
-    const [storeSortBy] = useURLState('sort_by', {
-        defaultValue: FIELD_FUNCTION_NAME,
-    });
-    const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
-    const [hiddenBinaries, setHiddenBinaries] = useURLState('hidden_binaries', {
-        defaultValue: [],
-        alwaysReturnArray: true,
-    });
+    const [storeSortBy] = useQueryState('sort_by', stringParam.withDefault(FIELD_FUNCTION_NAME));
+    const [colorStackLegend, setStoreColorStackLegend] = useQueryState('color_stack_legend', stringParam);
+    const [hiddenBinaries, setHiddenBinaries] = useQueryState('hidden_binaries', hiddenBinariesParser);
     const { compareMode } = useProfileViewContext();
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
     const isColorStackLegendEnabled = colorStackLegend === 'true';
     const isLeftAligned = alignFunctionName === 'left';
     // 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('compare_absolute');
-    const isCompareAbsolute = compareAbsolute === 'true';
+    const compareAbsoluteDefault = profileType?.delta === false;
+    const [compareAbsolute, setCompareAbsolute] = useQueryState('compare_absolute', boolParam);
+    const isCompareAbsolute = compareAbsolute ?? compareAbsoluteDefault;
     useEffect(() => {
         const checkOverflow = () => {
             if (dropdownRef.current !== null) {
@@ -108,13 +104,13 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
     const handleBinaryToggle = (index) => {
         const updatedBinaries = [...hiddenBinaries];
         updatedBinaries.splice(index, 1);
-        setHiddenBinaries(updatedBinaries);
+        void setHiddenBinaries(updatedBinaries);
     };
     const setColorStackLegend = useCallback((value) => {
-        setStoreColorStackLegend(value);
+        void setStoreColorStackLegend(value);
     }, [setStoreColorStackLegend]);
     const resetLegend = () => {
-        setHiddenBinaries([]);
+        void setHiddenBinaries([]);
     };
     const menuItems = [
         {
@@ -181,7 +177,7 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
         },
         {
             label: isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute',
-            onclick: () => setCompareAbsolute(isCompareAbsolute ? 'false' : 'true'),
+            onclick: () => void setCompareAbsolute(!isCompareAbsolute),
             hide: !compareMode,
             icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven',
         },
@@ -199,7 +195,7 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
         },
         {
             label: 'Reset Legend',
-            hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
+            hide: hiddenBinaries.length === 0,
             onclick: () => resetLegend(),
             id: 'h-reset-legend-button',
             icon: 'system-uicons:reset',
@@ -207,16 +203,16 @@ const MultiLevelDropdown = ({ onSelect, profileType, groupBy, toggleGroupBy, isT
         {
             label: 'Hidden Binaries',
             id: 'h-hidden-binaries',
-            items: hiddenBinaries?.map((binary, index) => ({
+            items: hiddenBinaries.map((binary, index) => ({
                 label: binary,
                 customSubmenu: (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsx("input", { id: binary, name: binary, type: "checkbox", className: "h-4 w-4 rounded-md border-2 border-gray-300 text-indigo-600 focus:ring-indigo-600 focus:ring-offset-0 checked:bg-indigo-600 checked:border-indigo-600", checked: hiddenBinaries?.includes(binary), onChange: () => handleBinaryToggle(index) }), _jsx("span", { children: binary })] })),
             })),
-            hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
+            hide: hiddenBinaries.length === 0,
             icon: 'ph:eye-closed',
         },
     ];
     return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", ref: dropdownRef, children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { icon: "pajamas:preferences", className: "w-4 h-4" }), _jsx("span", { children: "Preferences" })] }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), open && (_jsx(Menu.Items, { className: cx(isTableVizOnly ? 'w-64' : 'w-80', 'absolute z-50 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600', shouldOpenLeft ? 'right-0 origin-top-right' : 'left-0 origin-top-left'), children: menuItems
                             .filter(item => item.hide !== undefined && !item.hide)
-                            .map((item, index) => (_jsx(MenuItem, { ...item, onSelect: onSelect, closeDropdown: close, activeValueForSortBy: storeSortBy, activeValueForColorBy: colorBy === undefined || colorBy === '' ? 'binary' : colorBy, activeValuesForLevel: groupBy, renderAsDiv: item.renderAsDiv }, index))) }))] })) }) }));
+                            .map((item, index) => (_jsx(MenuItem, { ...item, onSelect: onSelect, closeDropdown: close, activeValueForSortBy: storeSortBy, activeValueForColorBy: colorBy, activeValuesForLevel: groupBy, renderAsDiv: item.renderAsDiv }, index))) }))] })) }) }));
 };
 export default MultiLevelDropdown;

package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,oBAAoB,GAAI,kCAAgC,KAAK,KAAG,GAAG,CAAC,OA+KzE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"TableColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,oBAAoB,GAAI,kCAAgC,KAAK,KAAG,GAAG,CAAC,OA6KzE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.js

@@ -13,16 +13,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
 import { createColumnHelper } from '@tanstack/table-core';
-import { useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
 import { valueFormatter } from '@parca/utilities';
 import ColumnsVisibility from '../../../Table/ColumnsVisibility';
 import { addPlusSign, getRatioString } from '../../../Table/utils/functions';
+import { tableColumnsParser } from '../../../hooks/urlParsers';
 import { useProfileViewContext } from '../../context/ProfileViewContext';
 const TableColumnsDropdown = ({ profileType, total, filtered }) => {
     const { compareMode } = useProfileViewContext();
-    const [tableColumns, setTableColumns] = useURLState('table_columns', {
-        alwaysReturnArray: true,
-    });
+    const [tableColumns, setTableColumns] = useQueryState('table_columns', tableColumnsParser);
     const columnHelper = createColumnHelper();
     const unit = useMemo(() => profileType?.sampleUnit ?? '', [profileType?.sampleUnit]);
     const columns = useMemo(() => {
@@ -169,7 +168,7 @@ const TableColumnsDropdown = ({ profileType, total, filtered }) => {
     const updateColumnVisibility = (column, isVisible) => {
         const updatedColumns = { ...columnVisibility, [column]: isVisible };
         const newTableColumns = Object.keys(updatedColumns).filter(col => updatedColumns[col]);
-        setTableColumns(newTableColumns);
+        void setTableColumns(newTableColumns);
     };
     return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm", children: "Table Columns" }), _jsx(ColumnsVisibility, { columns: columns, visibility: columnVisibility, setVisibility: (id, visible) => {
                     updateColumnVisibility(id, visible);