@parca/profile 0.19.138 → 0.19.140

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};
+};