@parca/profile 0.19.138 → 0.19.140

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

@@ -13,7 +13,8 @@
 
 import {useCallback, useMemo} from 'react';
 
-import {useURLStateBatch, useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
+import {createParser, useQueryState} from 'nuqs';
+
 import {safeDecode} from '@parca/utilities';
 
 import {isPresetKey} from './filterPresets';
@@ -137,31 +138,32 @@ 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: ParamValueSetterCustom<ProfileFilter[]>;
+  setAppliedFilters: (filters: ProfileFilter[]) => void;
   forceApplyFilters: (filters: ProfileFilter[]) => void;
 } => {
-  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 [appliedFilters, setRawFilters] = useQueryState('profile_filters', profileFiltersParser);
 
   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[]) => {
@@ -172,11 +174,9 @@ export const useProfileFiltersUrlState = (): {
         return f.value !== '' && f.type != null && f.field != null && f.matchType != null;
       });
 
-      batchUpdates(() => {
-        setAppliedFilters(validFilters);
-      });
+      setAppliedFilters(validFilters);
     },
-    [batchUpdates, setAppliedFilters]
+    [setAppliedFilters]
   );
 
   return {

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

@@ -16,8 +16,8 @@ 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,6 +27,7 @@ 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';
 
@@ -206,14 +207,15 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
 }) => {
   const dropdownRef = useRef<HTMLDivElement>(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<string>(
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
@@ -223,11 +225,10 @@ 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 ? 'true' : 'false';
+  const compareAbsoluteDefault = profileType?.delta === false;
 
-  const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] =
-    useURLState('compare_absolute');
-  const isCompareAbsolute = compareAbsolute === 'true';
+  const [compareAbsolute, setCompareAbsolute] = useQueryState('compare_absolute', boolParam);
+  const isCompareAbsolute = compareAbsolute ?? compareAbsoluteDefault;
 
   useEffect(() => {
     const checkOverflow = (): void => {
@@ -248,20 +249,20 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   }, [isTableVizOnly]);
 
   const handleBinaryToggle = (index: number): void => {
-    const updatedBinaries = [...(hiddenBinaries as string[])];
+    const updatedBinaries = [...hiddenBinaries];
     updatedBinaries.splice(index, 1);
-    setHiddenBinaries(updatedBinaries);
+    void setHiddenBinaries(updatedBinaries);
   };
 
   const setColorStackLegend = useCallback(
     (value: string): void => {
-      setStoreColorStackLegend(value);
+      void setStoreColorStackLegend(value);
     },
     [setStoreColorStackLegend]
   );
 
   const resetLegend = (): void => {
-    setHiddenBinaries([]);
+    void setHiddenBinaries([]);
   };
 
   const menuItems: MenuItemType[] = [
@@ -329,7 +330,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     },
     {
       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',
     },
@@ -359,7 +360,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     },
     {
       label: 'Reset Legend',
-      hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
+      hide: hiddenBinaries.length === 0,
       onclick: () => resetLegend(),
       id: 'h-reset-legend-button',
       icon: 'system-uicons:reset',
@@ -367,7 +368,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     {
       label: 'Hidden Binaries',
       id: 'h-hidden-binaries',
-      items: (hiddenBinaries as string[])?.map((binary, index) => ({
+      items: hiddenBinaries.map((binary, index) => ({
         label: binary,
         customSubmenu: (
           <div className="flex items-center gap-2 w-full">
@@ -383,7 +384,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           </div>
         ),
       })),
-      hide: hiddenBinaries === undefined || hiddenBinaries.length === 0,
+      hide: hiddenBinaries.length === 0,
       icon: 'ph:eye-closed',
     },
   ];
@@ -424,10 +425,8 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       {...item}
                       onSelect={onSelect}
                       closeDropdown={close}
-                      activeValueForSortBy={storeSortBy as string}
-                      activeValueForColorBy={
-                        colorBy === undefined || colorBy === '' ? 'binary' : colorBy
-                      }
+                      activeValueForSortBy={storeSortBy}
+                      activeValueForColorBy={colorBy}
                       activeValuesForLevel={groupBy}
                       renderAsDiv={item.renderAsDiv}
                     />

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

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

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

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

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

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

package/src/ProfileView/context/DashboardContext.tsx

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

package/src/ProfileView/hooks/useResetFlameGraphState.ts

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

package/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

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

package/src/ProfileView/hooks/useResetStateOnSeriesChange.ts

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