@parca/profile 0.19.142 → 0.19.143

package/src/SourceView/useSelectedLineRange.ts

@@ -11,9 +11,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useMemo} from 'react';
+import {useCallback} from 'react';
 
-import {useURLState} from '@parca/components';
+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'});
 
 interface LineRange {
   startLine: number;
@@ -22,24 +38,23 @@ interface LineRange {
 }
 
 const useLineRange = (): LineRange => {
-  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}`);
+  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,
   };
-
-  return {startLine, endLine, setLineRange};
 };
 
 export default useLineRange;

package/src/Table/MoreDropdown.tsx

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

package/src/Table/TableContextMenu.tsx

@@ -13,15 +13,18 @@
 
 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, useURLState, useURLStateBatch} from '@parca/components';
+import {useParcaContext} 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';
 
@@ -42,22 +45,16 @@ const TableContextMenu = ({
   totalUnfiltered,
   columnVisibility,
 }: TableContextMenuProps): React.JSX.Element => {
-  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
-  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const {dashboardItems, setDashboardItems} = useDashboardItems();
   const {enableSandwichView, isDarkMode} = useParcaContext();
-  const batchUpdates = useURLStateBatch();
 
   const onSandwichViewSelect = (): void => {
     if (row?.name != null && row.name.length > 0) {
-      // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
-      batchUpdates(() => {
-        setSandwichFunctionName(row.name.trim());
-        if (!dashboardItems.includes('sandwich')) {
-          setDashboardItems([...dashboardItems, 'sandwich']);
-        }
-      });
+      void setSandwichFunctionName(row.name.trim());
+      if (!dashboardItems.includes('sandwich')) {
+        setDashboardItems([...dashboardItems, 'sandwich']);
+      }
     }
   };
 

package/src/Table/hooks/useTableConfiguration.tsx

@@ -14,11 +14,12 @@
 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';
 
@@ -43,9 +44,7 @@ export function useTableConfiguration({
   compareMode,
 }: UseTableConfigurationProps): TableConfiguration {
   const columnHelper = createColumnHelper<Row>();
-  const [tableColumns] = useURLState<string[]>('table_columns', {
-    alwaysReturnArray: true,
-  });
+  const [tableColumns] = useQueryState('table_columns', tableColumnsParser);
 
   const columnVisibility = useMemo(() => {
     const defaults: Record<string, boolean> = {

package/src/Table/index.tsx

@@ -16,14 +16,10 @@ 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,
-  useURLState,
-} from '@parca/components';
+import {Table as TableComponent, TableSkeleton, useParcaContext} from '@parca/components';
 import {useCurrentColorProfile} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 
@@ -31,6 +27,9 @@ 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';
@@ -76,11 +75,9 @@ export const Table = React.memo(function Table({
   error,
 }: TableProps): React.JSX.Element {
   const currentColorProfile = useCurrentColorProfile();
-  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
-  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
-  const [colorBy, setColorBy] = useURLState('color_by');
+  const {dashboardItems} = useDashboardItems();
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const {colorBy, setColorBy} = useColorBy();
   const {isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
 
@@ -108,7 +105,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') {
-      setColorBy('filename');
+      void setColorBy('filename');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mappingsListCount]);
@@ -118,7 +115,7 @@ export const Table = React.memo(function Table({
     currentColorProfile,
     mappingsList,
     filenamesList,
-    colorBy: colorBy as string,
+    colorBy,
   });
 
   unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
@@ -135,7 +132,7 @@ export const Table = React.memo(function Table({
   const selectSpan = useCallback(
     (span: string): void => {
       if (!dashboardItems.includes('flamegraph')) {
-        setSandwichFunctionName(span.trim());
+        void setSandwichFunctionName(span.trim());
       }
     },
     [setSandwichFunctionName, dashboardItems]
@@ -191,13 +188,7 @@ export const Table = React.memo(function Table({
       return {
         id: i,
         colorProperty: {
-          color: getRowColor(
-            colorByColors,
-            mappingFileColumn,
-            i,
-            functionFileNameColumn,
-            colorBy as string
-          ),
+          color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
           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, useURLState} from '@parca/components';
+import {Button, Table} from '@parca/components';
 import {
   getLastItem,
   isSearchMatch,
@@ -26,6 +26,7 @@ import {
 } from '@parca/utilities';
 
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
+import {useDashboardItems} from '../hooks/useDashboardItems';
 import {hexifyAddress} from '../utils';
 
 interface TopTableProps {
@@ -72,9 +73,7 @@ export const TopTable = React.memo(function TopTable({
   setActionButtons,
 }: TopTableProps): JSX.Element {
   const router = parseParams(window?.location.search);
-  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
+  const {dashboardItems} = useDashboardItems();
 
   const {compareMode} = useProfileViewContext();
 

package/src/hooks/urlParsers.ts

@@ -0,0 +1,38 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {createParser, parseAsArrayOf, parseAsBoolean, parseAsInteger, parseAsString} from 'nuqs';
+
+const opts = {history: 'replace' as const};
+
+// === Base parsers with common options ===
+export const stringParam = parseAsString.withOptions(opts);
+export const boolParam = parseAsBoolean.withOptions(opts);
+export const intParam = parseAsInteger.withOptions(opts);
+export const commaArrayParam = parseAsArrayOf(parseAsString, ',').withOptions(opts);
+
+// === Param-specific parsers with defaults ===
+export const invertCallStackParser = boolParam.withDefault(false);
+export const groupByParser = commaArrayParam;
+export const flamechartDimensionParser = commaArrayParam;
+export const tableColumnsParser = commaArrayParam;
+export const hiddenBinariesParser = commaArrayParam.withDefault([]);
+
+// === JSON parser with BigInt support ===
+export function jsonParser<T>(): ReturnType<typeof createParser<T>> {
+  return createParser<T>({
+    parse: (value: string) => JSON.parse(value) as T,
+    serialize: (value: T) =>
+      JSON.stringify(value, (_, v) => (typeof v === 'bigint' ? v.toString() : v)),
+  }).withOptions(opts);
+}

package/src/hooks/useColorBy.ts

@@ -0,0 +1,42 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useCallback} from 'react';
+
+import {useQueryState} from 'nuqs';
+
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+
+import {stringParam} from './urlParsers';
+
+export const useColorBy = (): {
+  colorBy: string;
+  setColorBy: (value: string) => void;
+} => {
+  const [colorByPreference, setColorByPreference] = useUserPreference<string>(
+    USER_PREFERENCES.COLOR_BY.key
+  );
+  const [colorByRaw, setRawColorBy] = useQueryState('color_by', stringParam);
+
+  const colorBy = colorByRaw ?? colorByPreference ?? 'binary';
+
+  const setColorBy = useCallback(
+    (value: string) => {
+      void setRawColorBy(value);
+      setColorByPreference(value);
+    },
+    [setRawColorBy, setColorByPreference]
+  );
+
+  return {colorBy, setColorBy};
+};

package/src/hooks/useCompareModeMeta.ts

@@ -13,7 +13,9 @@
 
 import {useCallback} from 'react';
 
-import {useURLState, useURLStateBatch} from '@parca/components';
+import {useQueryStates} from 'nuqs';
+
+import {boolParam, stringParam} from './urlParsers';
 
 /**
  * Hook to manage compare mode state and operations
@@ -24,104 +26,72 @@ export const useCompareModeMeta = (): {
   isCompareAbsolute: boolean;
   closeCompareMode: (card: 'A' | 'B') => void;
 } => {
-  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 [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 closeCompareMode = useCallback(
     (side: 'A' | '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);
-        }
+      // 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,
+            }
+          : {};
 
-        // 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);
+      // 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,
       });
     },
-    [
-      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,
-    ]
+    [state, setState]
   );
 
-  // Derive isCompareMode from flags
-  const isCompareMode = compareA === 'true' || compareB === 'true';
-  const isCompareAbsolute = compareAbsolute === 'true';
+  const isCompareMode = state.compare_a === true || state.compare_b === true;
+  const isCompareAbsolute = state.compare_absolute === true;
 
   return {
     isCompareMode,

package/src/hooks/useDashboardItems.ts

@@ -0,0 +1,46 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useCallback, useMemo} from 'react';
+
+import {parseAsArrayOf, parseAsString, useQueryState} from 'nuqs';
+
+import {useParcaContext} from '@parca/components';
+
+const opts = {history: 'replace' as const};
+
+export const useDashboardItems = (): {
+  dashboardItems: string[];
+  setDashboardItems: (items: string[]) => void;
+} => {
+  const {defaultDashboardItems} = useParcaContext();
+
+  const parser = useMemo(
+    () =>
+      parseAsArrayOf(parseAsString, ',')
+        .withDefault(defaultDashboardItems ?? ['flamegraph'])
+        .withOptions(opts),
+    [defaultDashboardItems]
+  );
+
+  const [dashboardItems, setRawDashboardItems] = useQueryState('dashboard_items', parser);
+
+  const setDashboardItems = useCallback(
+    (items: string[]) => {
+      void setRawDashboardItems(items);
+    },
+    [setRawDashboardItems]
+  );
+
+  return {dashboardItems, setDashboardItems};
+};