@parca/profile 0.19.140 → 0.19.142

package/src/hooks/useQueryState.ts

@@ -13,9 +13,7 @@
 
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
-import {useQueryState as useNuqsQueryState, useQueryStates} from 'nuqs';
-
-import {DateTimeRange, useParcaContext} from '@parca/components';
+import {DateTimeRange, useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 
 import {QuerySelection} from '../ProfileSelector';
@@ -23,7 +21,6 @@ import {ProfileSelection, ProfileSelectionFromParams, ProfileSource} from '../Pr
 import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
 import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
 import {DEFAULT_EMPTY_SUM_BY, sumByToParam, useSumBy, useSumByFromParams} from '../useSumBy';
-import {commaArrayParam, stringParam} from './urlParsers';
 
 interface UseQueryStateOptions {
   suffix?: '_a' | '_b'; // For comparison mode
@@ -70,9 +67,9 @@ interface UseQueryStateReturn {
   // parsed query
   parsedQuery: Query | null;
 
-  setExpressionParam: (value: string | null) => void;
-  setSumByParam: (value: string | null) => void;
-  setGroupByParam: (value: string[] | null) => void;
+  setExpressionParam: (value: string | undefined) => void;
+  setSumByParam: (value: string | undefined) => void;
+  setGroupByParam: (value: string[] | undefined) => void;
 }
 
 export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryStateReturn => {
@@ -87,65 +84,41 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     onProfileTypeChange,
   } = options;
 
+  const batchUpdates = useURLStateBatch();
   const resetFlameGraphState = useResetFlameGraphState();
   const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
 
-  // URL state hooks with appropriate suffixes via useQueryStates
-  const [queryParams, setQueryParams] = useQueryStates(
-    {
-      expression: stringParam,
-      from: stringParam,
-      to: stringParam,
-      time_selection: stringParam,
-      sum_by: stringParam,
-      merge_from: stringParam,
-      merge_to: stringParam,
-      selection: stringParam,
-    },
-    {
-      history: 'replace',
-      urlKeys: {
-        expression: `expression${suffix}`,
-        from: `from${suffix}`,
-        to: `to${suffix}`,
-        time_selection: `time_selection${suffix}`,
-        sum_by: `sum_by${suffix}`,
-        merge_from: `merge_from${suffix}`,
-        merge_to: `merge_to${suffix}`,
-        selection: `selection${suffix}`,
-      },
-    }
-  );
+  // URL state hooks with appropriate suffixes
+  const [expression, setExpressionState] = useURLState<string>(`expression${suffix}`, {
+    defaultValue: defaultExpression,
+  });
 
-  const expression = queryParams.expression ?? defaultExpression;
-  const from = queryParams.from ?? defaultFrom?.toString();
-  const to = queryParams.to ?? defaultTo?.toString();
-  const timeSelection = queryParams.time_selection ?? defaultTimeSelection;
-  const sumByParam = queryParams.sum_by;
-  const mergeFrom = queryParams.merge_from;
-  const mergeTo = queryParams.merge_to;
-  const selectionParam = queryParams.selection;
-
-  // Individual setters for direct access
-  const setExpressionState = useCallback(
-    (val: string | null) => void setQueryParams({expression: val}),
-    [setQueryParams]
-  );
-  const setSumByParam = useCallback(
-    (val: string | null) => void setQueryParams({sum_by: val}),
-    [setQueryParams]
-  );
+  const [from, setFromState] = useURLState<string>(`from${suffix}`, {
+    defaultValue: defaultFrom?.toString(),
+  });
 
-  const [, setRawGroupByParam] = useNuqsQueryState('group_by', commaArrayParam);
-  const setGroupByParam = useCallback(
-    (val: string[] | null) => {
-      void setRawGroupByParam(val);
-    },
-    [setRawGroupByParam]
-  );
+  const [to, setToState] = useURLState<string>(`to${suffix}`, {
+    defaultValue: defaultTo?.toString(),
+  });
+
+  const [timeSelection, setTimeSelectionState] = useURLState<string>(`time_selection${suffix}`, {
+    defaultValue: defaultTimeSelection,
+  });
+
+  const [sumByParam, setSumByParam] = useURLState<string>(`sum_by${suffix}`);
+
+  const [, setGroupByParam] = useURLState<string>('group_by', {
+    alwaysReturnArray: true,
+  });
+
+  const [mergeFrom, setMergeFromState] = useURLState<string>(`merge_from${suffix}`);
+  const [mergeTo, setMergeToState] = useURLState<string>(`merge_to${suffix}`);
+
+  // ProfileSelection URL state hooks - reuses merge_from/merge_to but adds selection
+  const [selectionParam, setSelectionParam] = useURLState<string>(`selection${suffix}`);
 
   // Parse sumBy from URL parameter format
-  const sumBy = useSumByFromParams(sumByParam ?? undefined);
+  const sumBy = useSumByFromParams(sumByParam);
 
   // Draft state management
   const [draftExpression, setDraftExpression] = useState<string>(expression ?? defaultExpression);
@@ -230,8 +203,8 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   // Sync computed sumBy to URL if URL doesn't already have a value
   // to ensure the shared URL can always pick it up.
   useEffect(() => {
-    if (sumByParam === null && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
-      void setSumByParam(sumByToParam(computedSumByFromURL));
+    if (sumByParam === undefined && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
+      setSumByParam(sumByToParam(computedSumByFromURL));
     }
   }, [sumByParam, computedSumByFromURL, sumBySelectionLoading, setSumByParam]);
 
@@ -239,8 +212,8 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   const querySelection: QuerySelection = useMemo(() => {
     const range = DateTimeRange.fromRangeKey(
       timeSelection ?? defaultTimeSelection,
-      from != null && from !== '' ? parseInt(from) : defaultFrom,
-      to != null && to !== '' ? parseInt(to) : defaultTo
+      from !== undefined && from !== '' ? parseInt(from) : defaultFrom,
+      to !== undefined && to !== '' ? parseInt(to) : defaultTo
     );
 
     return {
@@ -249,7 +222,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       to: range.getToMs(),
       timeSelection: range.getRangeKey(),
       sumBy: computedSumByFromURL,
-      ...(mergeFrom != null && mergeFrom !== '' && mergeTo != null && mergeTo !== ''
+      ...(mergeFrom !== undefined && mergeFrom !== '' && mergeTo !== undefined && mergeTo !== ''
         ? {mergeFrom, mergeTo}
         : {}),
     };
@@ -302,11 +275,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
 
   // Compute ProfileSelection from URL params
   const profileSelection = useMemo<ProfileSelection | null>(() => {
-    return ProfileSelectionFromParams(
-      mergeFrom ?? undefined,
-      mergeTo ?? undefined,
-      selectionParam ?? undefined
-    );
+    return ProfileSelectionFromParams(mergeFrom, mergeTo, selectionParam);
   }, [mergeFrom, mergeTo, selectionParam]);
 
   // Compute ProfileSource from ProfileSelection
@@ -324,77 +293,83 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       refreshedTimeRange?: {from: number; to: number; timeSelection: string},
       expression?: string
     ) => {
-      // Use provided expression or current draft expression
-      const finalExpression = expression ?? draftExpression;
-
-      // Update draft state with new expression if provided
-      if (expression !== undefined) {
-        setDraftExpression(expression);
-      }
-
-      // Calculate the actual from/to values from draftSelection if not provided
-      const calculatedFrom = draftSelection.from.toString();
-      const calculatedTo = draftSelection.to.toString();
+      batchUpdates(() => {
+        // Use provided expression or current draft expression
+        const finalExpression = expression ?? draftExpression;
 
-      const finalFrom =
-        refreshedTimeRange?.from?.toString() ?? (draftFrom !== '' ? draftFrom : calculatedFrom);
-      const finalTo =
-        refreshedTimeRange?.to?.toString() ?? (draftTo !== '' ? draftTo : calculatedTo);
-      const finalTimeSelection = refreshedTimeRange?.timeSelection ?? draftTimeSelection;
-
-      // Update draft state with refreshed time range if provided
-      if (refreshedTimeRange?.from !== undefined) {
-        setDraftFrom(finalFrom);
-      }
-      if (refreshedTimeRange?.to !== undefined) {
-        setDraftTo(finalTo);
-      }
-      if (refreshedTimeRange?.timeSelection !== undefined) {
-        setDraftTimeSelection(finalTimeSelection);
-      }
+        // Update draft state with new expression if provided
+        if (expression !== undefined) {
+          setDraftExpression(expression);
+        }
 
-      // Auto-calculate merge parameters for delta profiles
-      const finalQuery = Query.parse(finalExpression);
-      const isDelta = finalQuery.profileType().delta;
+        // Calculate the actual from/to values from draftSelection if not provided
+        const calculatedFrom = draftSelection.from.toString();
+        const calculatedTo = draftSelection.to.toString();
 
-      const sumByValue = isDelta ? sumByToParam(draftSumBy) : sumByToParam(DEFAULT_EMPTY_SUM_BY);
-      let mergeFromValue: string | null = null;
-      let mergeToValue: string | null = null;
-      let selectionValue: string | null = null;
+        const finalFrom =
+          refreshedTimeRange?.from?.toString() ?? (draftFrom !== '' ? draftFrom : calculatedFrom);
+        const finalTo =
+          refreshedTimeRange?.to?.toString() ?? (draftTo !== '' ? draftTo : calculatedTo);
+        const finalTimeSelection = refreshedTimeRange?.timeSelection ?? draftTimeSelection;
 
-      if (isDelta && finalFrom !== '' && finalTo !== '') {
-        const fromMs = parseInt(finalFrom);
-        const toMs = parseInt(finalTo);
-        mergeFromValue = (BigInt(fromMs) * 1_000_000n).toString();
-        mergeToValue = (BigInt(toMs) * 1_000_000n).toString();
+        // Update draft state with refreshed time range if provided
+        if (refreshedTimeRange?.from !== undefined) {
+          setDraftFrom(finalFrom);
+        }
+        if (refreshedTimeRange?.to !== undefined) {
+          setDraftTo(finalTo);
+        }
+        if (refreshedTimeRange?.timeSelection !== undefined) {
+          setDraftTimeSelection(finalTimeSelection);
+        }
 
-        if (!comparing) {
-          selectionValue = finalExpression;
+        setExpressionState(finalExpression);
+        setFromState(finalFrom);
+        setToState(finalTo);
+        setTimeSelectionState(finalTimeSelection);
+
+        // Auto-calculate merge parameters for delta profiles
+        // Parse the final expression to check if it's a delta profile
+        const finalQuery = Query.parse(finalExpression);
+        const isDelta = finalQuery.profileType().delta;
+        if (isDelta) {
+          setSumByParam(sumByToParam(draftSumBy));
+        } else {
+          setSumByParam(DEFAULT_EMPTY_SUM_BY);
         }
-      }
 
-      // Atomic URL update with all params at once
-      void setQueryParams({
-        expression: finalExpression,
-        from: finalFrom,
-        to: finalTo,
-        time_selection: finalTimeSelection,
-        sum_by: sumByValue,
-        merge_from: mergeFromValue,
-        merge_to: mergeToValue,
-        selection: selectionValue,
+        if (isDelta && finalFrom !== '' && finalTo !== '') {
+          const fromMs = parseInt(finalFrom);
+          const toMs = parseInt(finalTo);
+          setMergeFromState((BigInt(fromMs) * 1_000_000n).toString());
+          setMergeToState((BigInt(toMs) * 1_000_000n).toString());
+
+          // Auto-select the time range for delta profiles (but not in compare mode)
+          // This applies both on initial load AND when Search is clicked
+          // The selection will use the final expression and the updated time range
+          if (!comparing) {
+            setSelectionParam(finalExpression);
+          } else {
+            setSelectionParam(undefined);
+          }
+        } else {
+          setMergeFromState(undefined);
+          setMergeToState(undefined);
+          // Clear ProfileSelection for non-delta profiles
+          setSelectionParam(undefined);
+        }
+        resetFlameGraphState();
+        if (
+          draftProfileType.toString() !==
+          Query.parse(querySelection.expression).profileType().toString()
+        ) {
+          resetStateOnProfileTypeChange();
+          onProfileTypeChange?.();
+        }
       });
-
-      resetFlameGraphState();
-      if (
-        draftProfileType.toString() !==
-        Query.parse(querySelection.expression).profileType().toString()
-      ) {
-        resetStateOnProfileTypeChange();
-        onProfileTypeChange?.();
-      }
     },
     [
+      batchUpdates,
       draftExpression,
       draftFrom,
       draftTo,
@@ -403,7 +378,14 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       draftSelection.from,
       draftSelection.to,
       comparing,
-      setQueryParams,
+      setExpressionState,
+      setFromState,
+      setToState,
+      setTimeSelectionState,
+      setSumByParam,
+      setMergeFromState,
+      setMergeToState,
+      setSelectionParam,
       resetFlameGraphState,
       resetStateOnProfileTypeChange,
       onProfileTypeChange,
@@ -452,13 +434,13 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   // Set ProfileSelection (auto-commits to URL immediately)
   const setProfileSelection = useCallback(
     (mergeFrom: bigint, mergeTo: bigint, query: Query) => {
-      void setQueryParams({
-        selection: query.toString(),
-        merge_from: mergeFrom.toString(),
-        merge_to: mergeTo.toString(),
+      batchUpdates(() => {
+        setSelectionParam(query.toString());
+        setMergeFromState(mergeFrom.toString());
+        setMergeToState(mergeTo.toString());
       });
     },
-    [setQueryParams]
+    [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]
   );
 
   const draftParsedQuery = useMemo(() => {

package/src/index.tsx

@@ -14,6 +14,8 @@
 import {CompressionType, setCompressionCodec} from '@uwdata/flechette';
 import * as lz4 from 'lz4js';
 
+import type {ParamPreferences} from '@parca/components';
+
 import MatchersInput from './MatchersInput';
 import MetricsGraph, {type ContextMenuItemOrSubmenu, type Series} from './MetricsGraph';
 import ProfileExplorer from './ProfileExplorer';
@@ -58,23 +60,20 @@ export {QueryControls} from './QueryControls';
 export {default as ProfileFilters} from './ProfileView/components/ProfileFilters';
 export {useProfileFiltersUrlState} from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
 
-export {useProfileTypes} from './ProfileSelector';
-
-export {
-  stringParam,
-  boolParam,
-  intParam,
-  commaArrayParam,
-  invertCallStackParser,
-  groupByParser,
-  flamechartDimensionParser,
-  tableColumnsParser,
-  hiddenBinariesParser,
-  jsonParser,
-} from './hooks/urlParsers';
+export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences = {
+  dashboard_items: {
+    defaultValue: 'flamegraph',
+    splitOnCommas: true, // This param should split on commas for array values
+  },
+  group_by: {
+    splitOnCommas: true,
+  },
+  flamechart_dimension: {
+    splitOnCommas: true,
+  },
+};
 
-export {useDashboardItems} from './hooks/useDashboardItems';
-export {useColorBy} from './hooks/useColorBy';
+export {useProfileTypes} from './ProfileSelector';
 
 export {
   ProfileExplorer,

package/src/useDelayedLoader.ts

@@ -18,20 +18,20 @@ interface DelayedLoaderOptions {
 }
 
 const useDelayedLoader = (isLoading = false, options?: DelayedLoaderOptions): boolean => {
+  'use no memo';
   const {delay = 500} = options ?? {};
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
   useEffect(() => {
-    let showLoaderTimeout: ReturnType<typeof setTimeout>;
-    if (isLoading && !isLoaderVisible) {
-      // if the request takes longer than half a second, show the loading icon
-      showLoaderTimeout = setTimeout(() => {
-        setIsLoaderVisible(true);
-      }, delay);
-    } else if (!isLoading && isLoaderVisible) {
+    if (!isLoading) return;
+    // if the request takes longer than half a second, show the loading icon
+    const showLoaderTimeout = setTimeout(() => {
+      setIsLoaderVisible(true);
+    }, delay);
+    return () => {
+      clearTimeout(showLoaderTimeout);
       setIsLoaderVisible(false);
-    }
-    return () => clearTimeout(showLoaderTimeout);
-  }, [isLoading, isLoaderVisible, delay]);
+    };
+  }, [isLoading, delay]);
 
   return isLoaderVisible;
 };

package/src/useSumBy.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
 import {QueryServiceClient} from '@parca/client';
 import {DateTimeRange} from '@parca/components';
@@ -70,14 +70,19 @@ export const useSumBySelection = (
   );
 
   // Update userSelectedSumBy when defaultValue changes (e.g., during navigation)
-  useEffect(() => {
+  const [prevProfileType, setPrevProfileType] = useState(profileType);
+  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);
+
+  if (prevProfileType !== profileType || prevDefaultValue !== defaultValue) {
+    setPrevProfileType(profileType);
+    setPrevDefaultValue(defaultValue);
     if (profileType != null && defaultValue !== undefined) {
       setUserSelectedSumBy(prev => ({
         ...prev,
         [profileType.toString()]: defaultValue,
       }));
     }
-  }, [profileType, defaultValue]);
+  }
 
   const setSumBy = useCallback(
     (sumBy: string[]) => {
@@ -97,19 +102,11 @@ export const useSumBySelection = (
 
   const {defaultSumBy} = useDefaultSumBy(profileType, labelNamesLoading, labels);
 
-  // Store the last valid sumBy value to return during loading
-  const lastValidSumByRef = useRef<string[]>(DEFAULT_EMPTY_SUM_BY);
-
   const sumBy = useMemo(() => {
-    if (labelNamesLoading) {
-      // For smoother UX, return draftSumBy first if available during loading
-      // as this must be recently computed with the draft time range labels.
-      if (draftSumBy !== undefined) {
-        return draftSumBy;
-      }
-      if (lastValidSumByRef.current == null) {
-        return lastValidSumByRef.current;
-      }
+    // For smoother UX, return draftSumBy first if available during loading
+    // as this must be recently computed with the draft time range labels.
+    if (labelNamesLoading && draftSumBy !== undefined) {
+      return draftSumBy;
     }
 
     // Prefer non-empty URL default over auto-computed default to avoid a
@@ -125,9 +122,6 @@ export const useSumBySelection = (
       result = DEFAULT_EMPTY_SUM_BY;
     }
 
-    // Store the computed value for next loading state
-    lastValidSumByRef.current = result;
-
     return result;
   }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading, draftSumBy, defaultValue]);
 
@@ -183,16 +177,16 @@ export const useSumByFromParams = (param: string | string[] | undefined): string
   return sumBy;
 };
 
-export const sumByToParam = (sumBy: string[] | undefined): string | null => {
+export const sumByToParam = (sumBy: string[] | undefined): string | string[] | undefined => {
   if (sumBy === undefined) {
-    return null;
+    return undefined;
   }
 
   if (sumBy.length === 0) {
     return '__none__';
   }
 
-  return sumBy.join(',');
+  return sumBy;
 };
 
 // Combined hook that handles all sumBy logic: fetching labels, computing defaults, and managing selection