@parca/profile 0.19.140 → 0.19.142

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.test.tsx

@@ -15,28 +15,78 @@ import {type ReactNode} from 'react';
 
 // eslint-disable-next-line import/named
 import {act, renderHook, waitFor} from '@testing-library/react';
-// eslint-disable-next-line import/no-unresolved
-import {NuqsTestingAdapter, type OnUrlUpdateFunction} from 'nuqs/adapters/testing';
-import {describe, expect, it, vi} from 'vitest';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+import {URLStateProvider} from '@parca/components';
 
 import {type ProfileFilter} from './useProfileFilters';
 import {decodeProfileFilters, useProfileFiltersUrlState} from './useProfileFiltersUrlState';
 
-// Helper to create wrapper with NuqsTestingAdapter
-const createWrapper = (
-  searchParams: string | Record<string, string> = {},
-  onUrlUpdate?: OnUrlUpdateFunction
-): (({children}: {children: ReactNode}) => JSX.Element) => {
+// Mock window.location
+const mockLocation = {
+  pathname: '/test',
+  search: '',
+};
+
+// Mock the navigate function
+const mockNavigateTo = vi.fn((path: string, params: Record<string, string | string[]>) => {
+  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: Record<string, string | string[]> = {};
+      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 = (): (({children}: {children: ReactNode}) => JSX.Element) => {
   const Wrapper = ({children}: {children: ReactNode}): JSX.Element => (
-    <NuqsTestingAdapter searchParams={searchParams} onUrlUpdate={onUrlUpdate} hasMemory={true}>
-      {children}
-    </NuqsTestingAdapter>
+    <URLStateProvider navigateTo={mockNavigateTo}>{children}</URLStateProvider>
   );
-  Wrapper.displayName = 'NuqsTestingWrapper';
+  Wrapper.displayName = 'URLStateProviderWrapper';
   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([]);
@@ -205,9 +255,9 @@ describe('useProfileFiltersUrlState', () => {
     });
 
     it('should read filters from URL', async () => {
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({profile_filters: 's:fn:=:testFunc'}),
-      });
+      mockLocation.search = '?profile_filters=s:fn:=:testFunc';
+
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       await waitFor(() => {
         expect(result.current.appliedFilters).toHaveLength(1);
@@ -221,10 +271,7 @@ describe('useProfileFiltersUrlState', () => {
     });
 
     it('should update URL when setting filters', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({}, onUrlUpdate),
-      });
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       const newFilters: ProfileFilter[] = [
         {
@@ -241,26 +288,26 @@ describe('useProfileFiltersUrlState', () => {
       });
 
       await waitFor(() => {
-        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');
+        expect(mockNavigateTo).toHaveBeenCalled();
+        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
+        expect(params.profile_filters).toBe('f:b:!~:libc.so');
       });
     });
 
     it('should clear URL param when setting empty filters', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({profile_filters: 's:fn:=:testFunc'}, onUrlUpdate),
-      });
+      mockLocation.search = '?profile_filters=s:fn:=:testFunc';
+
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       act(() => {
         result.current.setAppliedFilters([]);
       });
 
       await waitFor(() => {
-        expect(onUrlUpdate).toHaveBeenCalled();
-        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
-        expect(lastCall.searchParams.has('profile_filters')).toBe(false);
+        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);
       });
     });
   });
@@ -273,10 +320,9 @@ describe('useProfileFiltersUrlState', () => {
     });
 
     it('should force apply filters overwriting existing', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({profile_filters: 's:fn:=:existingFunc'}, onUrlUpdate),
-      });
+      mockLocation.search = '?profile_filters=s:fn:=:existingFunc';
+
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       // Verify existing filter is loaded
       await waitFor(() => {
@@ -298,36 +344,33 @@ describe('useProfileFiltersUrlState', () => {
       });
 
       await waitFor(() => {
-        expect(onUrlUpdate).toHaveBeenCalled();
-        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
-        expect(lastCall.searchParams.get('profile_filters')).toBe('f:b:!~:forcedValue');
+        expect(mockNavigateTo).toHaveBeenCalled();
+        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
+        expect(params.profile_filters).toBe('f:b:!~:forcedValue');
       });
     });
 
     it('should clear filters when force applying empty array', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({profile_filters: 's:fn:=:existingFunc'}, onUrlUpdate),
-      });
+      mockLocation.search = '?profile_filters=s:fn:=:existingFunc';
+
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       act(() => {
         result.current.forceApplyFilters([]);
       });
 
       await waitFor(() => {
-        expect(onUrlUpdate).toHaveBeenCalled();
-        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
-        expect(lastCall.searchParams.has('profile_filters')).toBe(false);
+        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);
       });
     });
   });
 
   describe('Preset filter encoding', () => {
     it('should encode preset filters correctly', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({}, onUrlUpdate),
-      });
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       const presetFilters: ProfileFilter[] = [
         {
@@ -342,17 +385,14 @@ describe('useProfileFiltersUrlState', () => {
       });
 
       await waitFor(() => {
-        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');
+        expect(mockNavigateTo).toHaveBeenCalled();
+        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
+        expect(params.profile_filters).toBe('p:hide_libc:enabled');
       });
     });
 
     it('should handle mixed preset and regular filters', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({}, onUrlUpdate),
-      });
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       const mixedFilters: ProfileFilter[] = [
         {
@@ -374,21 +414,16 @@ describe('useProfileFiltersUrlState', () => {
       });
 
       await waitFor(() => {
-        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'
-        );
+        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');
       });
     });
   });
 
   describe('URL encoding edge cases', () => {
     it('should handle special characters in filter values', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({}, onUrlUpdate),
-      });
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       const filtersWithSpecialChars: ProfileFilter[] = [
         {
@@ -405,19 +440,15 @@ describe('useProfileFiltersUrlState', () => {
       });
 
       await waitFor(() => {
-        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');
+        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');
       });
     });
 
     it('should filter out incomplete filters when encoding', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({}, onUrlUpdate),
-      });
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       const incompleteFilters: ProfileFilter[] = [
         {
@@ -445,10 +476,10 @@ describe('useProfileFiltersUrlState', () => {
       });
 
       await waitFor(() => {
-        expect(onUrlUpdate).toHaveBeenCalled();
-        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
+        expect(mockNavigateTo).toHaveBeenCalled();
+        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
         // Only the complete filter should be encoded
-        expect(lastCall.searchParams.get('profile_filters')).toBe('f:b:!~:valid');
+        expect(params.profile_filters).toBe('f:b:!~:valid');
       });
     });
   });
@@ -470,9 +501,9 @@ describe('useProfileFiltersUrlState', () => {
     });
 
     it('should return correctly structured filters from URL', async () => {
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({profile_filters: 's:fn:=:testFunc'}),
-      });
+      mockLocation.search = '?profile_filters=s:fn:=:testFunc';
+
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       await waitFor(() => {
         expect(result.current.appliedFilters).toHaveLength(1);
@@ -491,16 +522,15 @@ describe('useProfileFiltersUrlState', () => {
 
   describe('View switching scenarios', () => {
     it('should completely replace filters when switching views using forceApplyFilters', async () => {
-      const onUrlUpdate = vi.fn();
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper(
-          {profile_filters: 's:fn:=:viewAFunc,f:b:!=:viewABinary'},
-          onUrlUpdate
-        ),
-      });
+      // Start with View A's filters (2 filters)
+      mockLocation.search = '?profile_filters=s:fn:=:viewAFunc,f:b:!=:viewABinary';
+
+      const {result} = renderHook(() => useProfileFiltersUrlState(), {wrapper: createWrapper()});
 
       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)
@@ -519,28 +549,96 @@ describe('useProfileFiltersUrlState', () => {
       });
 
       await waitFor(() => {
-        expect(onUrlUpdate).toHaveBeenCalled();
-        const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0];
-        const filterValue = lastCall.searchParams.get('profile_filters');
+        expect(mockNavigateTo).toHaveBeenCalled();
+        const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
 
         // View A's filters should be completely gone
-        expect(filterValue).not.toContain('viewAFunc');
-        expect(filterValue).not.toContain('viewABinary');
+        expect(params.profile_filters).not.toContain('viewAFunc');
+        expect(params.profile_filters).not.toContain('viewABinary');
 
         // Only View B's filter should be present
-        expect(filterValue).toBe('f:fn:~:viewBOnly');
+        expect(params.profile_filters).toBe('f:fn:~:viewBOnly');
       });
     });
 
-    it('should not change filters when clicking the same view tab', async () => {
-      const {result} = renderHook(() => useProfileFiltersUrlState(), {
-        wrapper: createWrapper({profile_filters: 's:fn:=:existingFilter'}),
+    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: ProfileFilter[] = [{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: ProfileFilter[] = [
+        {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: ProfileFilter[] = [
+        {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');
+      });
+    });
+
+    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()});
+
       await waitFor(() => {
         expect(result.current.appliedFilters).toHaveLength(1);
       });
 
+      mockNavigateTo.mockClear();
+
       // Apply the same filters (simulating clicking the same view tab)
       const sameFilters: ProfileFilter[] = [
         {

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts

@@ -13,8 +13,7 @@
 
 import {useCallback, useMemo} from 'react';
 
-import {createParser, useQueryState} from 'nuqs';
-
+import {useURLStateBatch, useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
 import {safeDecode} from '@parca/utilities';
 
 import {isPresetKey} from './filterPresets';
@@ -138,32 +137,31 @@ export const decodeProfileFilters = (encoded: string): ProfileFilter[] => {
   }
 };
 
-const profileFiltersParser = createParser<ProfileFilter[]>({
-  parse: (value: string) => decodeProfileFilters(value),
-  serialize: (value: ProfileFilter[]) => encodeProfileFilters(value),
-  eq: (a, b) => encodeProfileFilters(a) === encodeProfileFilters(b),
-})
-  .withDefault([])
-  .withOptions({history: 'replace'});
-
 export const useProfileFiltersUrlState = (): {
   appliedFilters: ProfileFilter[];
-  setAppliedFilters: (filters: ProfileFilter[]) => void;
+  setAppliedFilters: ParamValueSetterCustom<ProfileFilter[]>;
   forceApplyFilters: (filters: ProfileFilter[]) => void;
 } => {
-  const [appliedFilters, setRawFilters] = useQueryState('profile_filters', profileFiltersParser);
+  const batchUpdates = useURLStateBatch();
+
+  // Store applied filters in URL state for persistence using compact encoding
+  const [appliedFilters, setAppliedFilters] = useURLStateCustom<ProfileFilter[]>(
+    `profile_filters`,
+    {
+      parse: value => {
+        return decodeProfileFilters(value as string);
+      },
+      stringify: value => {
+        return encodeProfileFilters(value);
+      },
+      defaultValue: [],
+    }
+  );
 
   const memoizedAppliedFilters = useMemo(() => {
     return appliedFilters ?? [];
   }, [appliedFilters]);
 
-  const setAppliedFilters = useCallback(
-    (filters: ProfileFilter[]) => {
-      void setRawFilters(filters);
-    },
-    [setRawFilters]
-  );
-
   // Force apply filters (bypasses preserve-existing strategy)
   const forceApplyFilters = useCallback(
     (filters: ProfileFilter[]) => {
@@ -174,9 +172,11 @@ export const useProfileFiltersUrlState = (): {
         return f.value !== '' && f.type != null && f.field != null && f.matchType != null;
       });
 
-      setAppliedFilters(validFilters);
+      batchUpdates(() => {
+        setAppliedFilters(validFilters);
+      });
     },
-    [setAppliedFilters]
+    [batchUpdates, setAppliedFilters]
   );
 
   return {

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

@@ -11,13 +11,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import {Menu} from '@headlessui/react';
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
-import {useQueryState} from 'nuqs';
 
+import {useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 
@@ -27,7 +29,6 @@ import {
   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';
 
@@ -74,6 +75,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   customSubmenu,
   renderAsDiv = false,
 }) => {
+  'use no memo';
   const menuRef = useRef<HTMLDivElement>(null);
   const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
 
@@ -207,15 +209,14 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
 }) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
-  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 [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 {compareMode} = useProfileViewContext();
   const [colorProfileName] = useUserPreference<string>(
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
@@ -225,10 +226,11 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
 
   // 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;
+  const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
 
-  const [compareAbsolute, setCompareAbsolute] = useQueryState('compare_absolute', boolParam);
-  const isCompareAbsolute = compareAbsolute ?? compareAbsoluteDefault;
+  const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] =
+    useURLState('compare_absolute');
+  const isCompareAbsolute = compareAbsolute === 'true';
 
   useEffect(() => {
     const checkOverflow = (): void => {
@@ -249,20 +251,20 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   }, [isTableVizOnly]);
 
   const handleBinaryToggle = (index: number): void => {
-    const updatedBinaries = [...hiddenBinaries];
+    const updatedBinaries = [...(hiddenBinaries as string[])];
     updatedBinaries.splice(index, 1);
-    void setHiddenBinaries(updatedBinaries);
+    setHiddenBinaries(updatedBinaries);
   };
 
   const setColorStackLegend = useCallback(
     (value: string): void => {
-      void setStoreColorStackLegend(value);
+      setStoreColorStackLegend(value);
     },
     [setStoreColorStackLegend]
   );
 
   const resetLegend = (): void => {
-    void setHiddenBinaries([]);
+    setHiddenBinaries([]);
   };
 
   const menuItems: MenuItemType[] = [
@@ -330,7 +332,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     },
     {
       label: isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute',
-      onclick: () => void setCompareAbsolute(!isCompareAbsolute),
+      onclick: () => setCompareAbsolute(isCompareAbsolute ? 'false' : 'true'),
       hide: !compareMode,
       icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven',
     },
@@ -360,7 +362,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     },
     {
       label: 'Reset Legend',
-      hide: hiddenBinaries.length === 0,
+      hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
       onclick: () => resetLegend(),
       id: 'h-reset-legend-button',
       icon: 'system-uicons:reset',
@@ -368,7 +370,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     {
       label: 'Hidden Binaries',
       id: 'h-hidden-binaries',
-      items: hiddenBinaries.map((binary, index) => ({
+      items: (hiddenBinaries as string[])?.map((binary, index) => ({
         label: binary,
         customSubmenu: (
           <div className="flex items-center gap-2 w-full">
@@ -384,7 +386,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           </div>
         ),
       })),
-      hide: hiddenBinaries.length === 0,
+      hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
       icon: 'ph:eye-closed',
     },
   ];
@@ -425,8 +427,10 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       {...item}
                       onSelect={onSelect}
                       closeDropdown={close}
-                      activeValueForSortBy={storeSortBy}
-                      activeValueForColorBy={colorBy}
+                      activeValueForSortBy={storeSortBy as string}
+                      activeValueForColorBy={
+                        colorBy === undefined || colorBy === '' ? 'binary' : colorBy
+                      }
                       activeValuesForLevel={groupBy}
                       renderAsDiv={item.renderAsDiv}
                     />