@parca/profile 0.19.140 → 0.19.142

package/src/SourceView/index.tsx

@@ -15,14 +15,12 @@ import React, {useCallback, useEffect, useMemo} from 'react';
 
 import {tableFromIPC} from '@uwdata/flechette';
 import {AnimatePresence, motion} from 'framer-motion';
-import {useQueryState} from 'nuqs';
 import {Item, Menu, useContextMenu} from 'react-contexify';
 
 import {Source} from '@parca/client';
-import {SourceSkeleton, useParcaContext, type ProfileData} from '@parca/components';
+import {SourceSkeleton, useParcaContext, useURLState, type ProfileData} from '@parca/components';
 
 import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
-import {stringParam} from '../hooks/urlParsers';
 import {alignedUint8Array, truncateStringReverse} from '../utils';
 import {Highlighter, profileAwareRenderer, type LineDataLookup} from './Highlighter';
 import useLineRange from './useSelectedLineRange';
@@ -44,7 +42,7 @@ export const SourceView = React.memo(function SourceView({
   filtered,
   setActionButtons,
 }: SourceViewProps): JSX.Element {
-  const [sourceFileName] = useQueryState('source_filename', stringParam);
+  const [sourceFileName] = useURLState<string | undefined>('source_filename');
   const {isDarkMode, sourceViewContextMenuItems = []} = useParcaContext();
 
   const sourceCode = useMemo(() => {

package/src/SourceView/useSelectedLineRange.ts

@@ -11,25 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback} from 'react';
+import {useMemo} from 'react';
 
-import {createParser, useQueryState} from 'nuqs';
-
-interface SelectedLineRange {
-  start: number;
-  end: number;
-}
-
-const lineRangeParser = createParser<SelectedLineRange>({
-  parse: (value: string) => {
-    const [start, end] = value.split('-');
-    const startNum = parseInt(start, 10);
-    if (isNaN(startNum)) return null;
-    const endNum = end !== undefined ? parseInt(end, 10) : startNum;
-    return {start: startNum, end: isNaN(endNum) ? startNum : endNum};
-  },
-  serialize: (value: SelectedLineRange) => `${value.start}-${value.end}`,
-}).withOptions({history: 'replace'});
+import {useURLState} from '@parca/components';
 
 interface LineRange {
   startLine: number;
@@ -38,23 +22,24 @@ interface LineRange {
 }
 
 const useLineRange = (): LineRange => {
-  const [lineRange, setRawLineRange] = useQueryState(
-    'source_line',
-    lineRangeParser.withDefault({start: -1, end: -1})
-  );
-
-  const setLineRange = useCallback(
-    (start: number, end: number): void => {
-      void setRawLineRange({start, end});
-    },
-    [setRawLineRange]
-  );
-
-  return {
-    startLine: lineRange.start,
-    endLine: lineRange.end,
-    setLineRange,
+  const [sourceLine, setSourceLine] = useURLState<string | undefined>('source_line');
+  const [startLine, endLine] = useMemo(() => {
+    if (sourceLine == null) {
+      return [-1, -1];
+    }
+    const [start, end] = sourceLine.split('-');
+
+    if (end === undefined) {
+      return [parseInt(start, 10), parseInt(start, 10)];
+    }
+    return [parseInt(start, 10), parseInt(end, 10)];
+  }, [sourceLine]);
+
+  const setLineRange = (start: number, end: number): void => {
+    setSourceLine(`${start}-${end}`);
   };
+
+  return {startLine, endLine, setLineRange};
 };
 
 export default useLineRange;

package/src/Table/MoreDropdown.tsx

@@ -13,21 +13,23 @@
 
 import {Menu} from '@headlessui/react';
 import {Icon} from '@iconify/react';
-import {useQueryState} from 'nuqs';
 
-import {useParcaContext} from '@parca/components';
-
-import {stringParam} from '../hooks/urlParsers';
-import {useDashboardItems} from '../hooks/useDashboardItems';
+import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
 
 const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
-  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
-  const {dashboardItems, setDashboardItems} = useDashboardItems();
+  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
   const {enableSandwichView} = useParcaContext();
+  const batchUpdates = useURLStateBatch();
 
   const onSandwichViewSelect = (): void => {
-    void setSandwichFunctionName(functionName.trim());
-    setDashboardItems([...dashboardItems, 'sandwich']);
+    // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
+    batchUpdates(() => {
+      setSandwichFunctionName(functionName.trim());
+      setDashboardItems([...dashboardItems, 'sandwich']);
+    });
   };
 
   const menuItems: Array<{label: string; action: () => void}> = [];

package/src/Table/TableContextMenu.tsx

@@ -13,18 +13,15 @@
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
-import {useQueryState} from 'nuqs';
 import {Item, Menu, Submenu} from 'react-contexify';
 
 import 'react-contexify/dist/ReactContexify.css';
 
-import {useParcaContext} from '@parca/components';
+import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
 import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '.';
 import {getTextForCumulative} from '../ProfileFlameGraph/FlameGraphArrow/utils';
-import {stringParam} from '../hooks/urlParsers';
-import {useDashboardItems} from '../hooks/useDashboardItems';
 import {truncateString} from '../utils';
 import {type ColumnName} from './utils/functions';
 
@@ -45,16 +42,22 @@ const TableContextMenu = ({
   totalUnfiltered,
   columnVisibility,
 }: TableContextMenuProps): React.JSX.Element => {
-  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
-  const {dashboardItems, setDashboardItems} = useDashboardItems();
+  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
   const {enableSandwichView, isDarkMode} = useParcaContext();
+  const batchUpdates = useURLStateBatch();
 
   const onSandwichViewSelect = (): void => {
     if (row?.name != null && row.name.length > 0) {
-      void setSandwichFunctionName(row.name.trim());
-      if (!dashboardItems.includes('sandwich')) {
-        setDashboardItems([...dashboardItems, 'sandwich']);
-      }
+      // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
+      batchUpdates(() => {
+        setSandwichFunctionName(row.name.trim());
+        if (!dashboardItems.includes('sandwich')) {
+          setDashboardItems([...dashboardItems, 'sandwich']);
+        }
+      });
     }
   };
 

package/src/Table/hooks/useTableConfiguration.tsx

@@ -11,15 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+import {useMemo} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
-import {useQueryState} from 'nuqs';
 
+import {useURLState} from '@parca/components';
 import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '..';
-import {tableColumnsParser} from '../../hooks/urlParsers';
 import {ColorCell} from '../ColorCell';
 import {addPlusSign, ratioString, type ColumnName} from '../utils/functions';
 
@@ -44,10 +43,12 @@ export function useTableConfiguration({
   compareMode,
 }: UseTableConfigurationProps): TableConfiguration {
   const columnHelper = createColumnHelper<Row>();
-  const [tableColumns] = useQueryState('table_columns', tableColumnsParser);
+  const [tableColumns] = useURLState<string[]>('table_columns', {
+    alwaysReturnArray: true,
+  });
 
-  const [columnVisibility, setColumnVisibility] = useState(() => {
-    return {
+  const columnVisibility = useMemo(() => {
+    const defaults: Record<string, boolean> = {
       color: true,
       flat: true,
       flatPercentage: false,
@@ -62,19 +63,13 @@ export function useTableConfiguration({
       functionFileName: false,
       mappingFile: false,
     };
-  });
-
-  useEffect(() => {
     if (Array.isArray(tableColumns)) {
-      setColumnVisibility(prevState => {
-        const newState = {...prevState};
-        (Object.keys(newState) as ColumnName[]).forEach(column => {
-          newState[column] = tableColumns.includes(column);
-        });
-        return newState;
+      (Object.keys(defaults) as ColumnName[]).forEach(column => {
+        defaults[column] = tableColumns.includes(column);
       });
     }
-  }, [tableColumns]);
+    return defaults;
+  }, [tableColumns, compareMode]);
 
   const columns = useMemo<Array<ColumnDef<Row>>>(() => {
     const baseColumns: Array<ColumnDef<Row>> = [

package/src/Table/index.tsx

@@ -16,10 +16,14 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {tableFromIPC} from '@uwdata/flechette';
 import {AnimatePresence, motion} from 'framer-motion';
-import {useQueryState} from 'nuqs';
 import {useContextMenu} from 'react-contexify';
 
-import {Table as TableComponent, TableSkeleton, useParcaContext} from '@parca/components';
+import {
+  Table as TableComponent,
+  TableSkeleton,
+  useParcaContext,
+  useURLState,
+} from '@parca/components';
 import {useCurrentColorProfile} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 
@@ -27,9 +31,6 @@ import useMappingList, {
   useFilenamesList,
 } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
-import {stringParam} from '../hooks/urlParsers';
-import {useColorBy} from '../hooks/useColorBy';
-import {useDashboardItems} from '../hooks/useDashboardItems';
 import {alignedUint8Array} from '../utils';
 import TableContextMenuWrapper, {TableContextMenuWrapperRef} from './TableContextMenuWrapper';
 import {useColorManagement} from './hooks/useColorManagement';
@@ -75,9 +76,11 @@ export const Table = React.memo(function Table({
   error,
 }: TableProps): React.JSX.Element {
   const currentColorProfile = useCurrentColorProfile();
-  const {dashboardItems} = useDashboardItems();
-  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
-  const {colorBy, setColorBy} = useColorBy();
+  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
+  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
+  const [colorBy, setColorBy] = useURLState('color_by');
   const {isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
 
@@ -105,7 +108,7 @@ export const Table = React.memo(function Table({
   // If there is only one mapping file, we want to color by filename by default.
   useEffect(() => {
     if (mappingsListCount === 1 && colorBy !== 'filename') {
-      void setColorBy('filename');
+      setColorBy('filename');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mappingsListCount]);
@@ -115,7 +118,7 @@ export const Table = React.memo(function Table({
     currentColorProfile,
     mappingsList,
     filenamesList,
-    colorBy,
+    colorBy: colorBy as string,
   });
 
   unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
@@ -132,7 +135,7 @@ export const Table = React.memo(function Table({
   const selectSpan = useCallback(
     (span: string): void => {
       if (!dashboardItems.includes('flamegraph')) {
-        void setSandwichFunctionName(span.trim());
+        setSandwichFunctionName(span.trim());
       }
     },
     [setSandwichFunctionName, dashboardItems]
@@ -188,7 +191,13 @@ export const Table = React.memo(function Table({
       return {
         id: i,
         colorProperty: {
-          color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+          color: getRowColor(
+            colorByColors,
+            mappingFileColumn,
+            i,
+            functionFileNameColumn,
+            colorBy as string
+          ),
           mappingFile,
         },
         name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),

package/src/TopTable/index.tsx

@@ -16,7 +16,7 @@ import React, {useCallback, useEffect, useMemo} from 'react';
 import {createColumnHelper, type ColumnDef} from '@tanstack/react-table';
 
 import {Top, TopNode, TopNodeMeta} from '@parca/client';
-import {Button, Table} from '@parca/components';
+import {Button, Table, useURLState} from '@parca/components';
 import {
   getLastItem,
   isSearchMatch,
@@ -26,7 +26,6 @@ import {
 } from '@parca/utilities';
 
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
-import {useDashboardItems} from '../hooks/useDashboardItems';
 import {hexifyAddress} from '../utils';
 
 interface TopTableProps {
@@ -73,7 +72,9 @@ export const TopTable = React.memo(function TopTable({
   setActionButtons,
 }: TopTableProps): JSX.Element {
   const router = parseParams(window?.location.search);
-  const {dashboardItems} = useDashboardItems();
+  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
 
   const {compareMode} = useProfileViewContext();
 

package/src/hooks/useCompareModeMeta.ts

@@ -13,9 +13,7 @@
 
 import {useCallback} from 'react';
 
-import {useQueryStates} from 'nuqs';
-
-import {boolParam, stringParam} from './urlParsers';
+import {useURLState, useURLStateBatch} from '@parca/components';
 
 /**
  * Hook to manage compare mode state and operations
@@ -26,72 +24,104 @@ export const useCompareModeMeta = (): {
   isCompareAbsolute: boolean;
   closeCompareMode: (card: 'A' | 'B') => void;
 } => {
-  const [state, setState] = useQueryStates(
-    {
-      // Side A
-      expression_a: stringParam,
-      from_a: stringParam,
-      to_a: stringParam,
-      time_selection_a: stringParam,
-      sum_by_a: stringParam,
-      merge_from_a: stringParam,
-      merge_to_a: stringParam,
-      selection_a: stringParam,
-      // Side B
-      expression_b: stringParam,
-      from_b: stringParam,
-      to_b: stringParam,
-      time_selection_b: stringParam,
-      sum_by_b: stringParam,
-      merge_from_b: stringParam,
-      merge_to_b: stringParam,
-      selection_b: stringParam,
-      // Compare flags
-      compare_a: boolParam,
-      compare_b: boolParam,
-      compare_absolute: boolParam,
-    },
-    {history: 'replace'}
-  );
+  const batchUpdates = useURLStateBatch();
+
+  // Side A URL state (only setters needed)
+  const [, setExpressionA] = useURLState<string>('expression_a');
+  const [, setFromA] = useURLState<string>('from_a');
+  const [, setToA] = useURLState<string>('to_a');
+  const [, setTimeSelectionA] = useURLState<string>('time_selection_a');
+  const [, setSumByA] = useURLState<string>('sum_by_a');
+  const [, setMergeFromA] = useURLState<string>('merge_from_a');
+  const [, setMergeToA] = useURLState<string>('merge_to_a');
+  const [, setSelectionA] = useURLState<string>('selection_a');
+
+  // Side B URL state
+  const [expressionB, setExpressionB] = useURLState<string>('expression_b');
+  const [fromB, setFromB] = useURLState<string>('from_b');
+  const [toB, setToB] = useURLState<string>('to_b');
+  const [timeSelectionB, setTimeSelectionB] = useURLState<string>('time_selection_b');
+  const [sumByB, setSumByB] = useURLState<string>('sum_by_b');
+  const [mergeFromB, setMergeFromB] = useURLState<string>('merge_from_b');
+  const [mergeToB, setMergeToB] = useURLState<string>('merge_to_b');
+  const [selectionB, setSelectionB] = useURLState<string>('selection_b');
+
+  // Compare mode flags (expose values for routing decisions)
+  const [compareA, setCompareA] = useURLState<string>('compare_a');
+  const [compareB, setCompareB] = useURLState<string>('compare_b');
+  const [compareAbsolute, setCompareAbsolute] = useURLState<string>('compare_absolute');
 
   const closeCompareMode = useCallback(
     (side: 'A' | 'B') => {
-      // If closing side A, swap B → A first (keep B's data as the single view)
-      const swapAFromB =
-        side === 'A'
-          ? {
-              expression_a: state.expression_b,
-              from_a: state.from_b,
-              to_a: state.to_b,
-              time_selection_a: state.time_selection_b,
-              sum_by_a: state.sum_by_b,
-              merge_from_a: state.merge_from_b,
-              merge_to_a: state.merge_to_b,
-              selection_a: state.selection_b,
-            }
-          : {};
+      batchUpdates(() => {
+        // If closing side A, swap A and B params first (keep B's data as the single view)
+        if (side === 'A') {
+          // Copy B to A
+          setExpressionA(expressionB);
+          setFromA(fromB);
+          setToA(toB);
+          setTimeSelectionA(timeSelectionB);
+          setSumByA(sumByB);
+          setMergeFromA(mergeFromB);
+          setMergeToA(mergeToB);
+          setSelectionA(selectionB);
+        }
 
-      // Atomic update: swap A (if needed), clear all B params and compare flags
-      void setState({
-        ...swapAFromB,
-        expression_b: null,
-        from_b: null,
-        to_b: null,
-        time_selection_b: null,
-        sum_by_b: null,
-        merge_from_b: null,
-        merge_to_b: null,
-        selection_b: null,
-        compare_a: null,
-        compare_b: null,
-        compare_absolute: null,
+        // Clear all B params
+        setExpressionB(undefined);
+        setFromB(undefined);
+        setToB(undefined);
+        setTimeSelectionB(undefined);
+        setSumByB(undefined);
+        setMergeFromB(undefined);
+        setMergeToB(undefined);
+        setSelectionB(undefined);
+
+        // Clear compare mode flags
+        setCompareA(undefined);
+        setCompareB(undefined);
+        setCompareAbsolute(undefined);
       });
     },
-    [state, setState]
+    [
+      batchUpdates,
+      // Side A setters
+      setExpressionA,
+      setFromA,
+      setToA,
+      setTimeSelectionA,
+      setSumByA,
+      setMergeFromA,
+      setMergeToA,
+      setSelectionA,
+      // Side B values (for swapping)
+      expressionB,
+      fromB,
+      toB,
+      timeSelectionB,
+      sumByB,
+      mergeFromB,
+      mergeToB,
+      selectionB,
+      // Side B setters
+      setExpressionB,
+      setFromB,
+      setToB,
+      setTimeSelectionB,
+      setSumByB,
+      setMergeFromB,
+      setMergeToB,
+      setSelectionB,
+      // Compare flags
+      setCompareA,
+      setCompareB,
+      setCompareAbsolute,
+    ]
   );
 
-  const isCompareMode = state.compare_a === true || state.compare_b === true;
-  const isCompareAbsolute = state.compare_absolute === true;
+  // Derive isCompareMode from flags
+  const isCompareMode = compareA === 'true' || compareB === 'true';
+  const isCompareAbsolute = compareAbsolute === 'true';
 
   return {
     isCompareMode,