@parca/profile 0.19.139 → 0.19.140

package/dist/hooks/useQueryState.js

@@ -11,42 +11,60 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { DateTimeRange, useParcaContext, useURLState, useURLStateBatch } from '@parca/components';
+import { useQueryState as useNuqsQueryState, useQueryStates } from 'nuqs';
+import { DateTimeRange, useParcaContext } from '@parca/components';
 import { Query } from '@parca/parser';
 import { ProfileSelectionFromParams } from '../ProfileSource';
 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';
 export const useQueryState = (options = {}) => {
     const { queryServiceClient: queryClient } = useParcaContext();
     const { suffix = '', defaultExpression = '', defaultTimeSelection = 'relative:minute|15', // Default to 15 minutes relative
     defaultFrom, defaultTo, comparing = false, onProfileTypeChange, } = options;
-    const batchUpdates = useURLStateBatch();
     const resetFlameGraphState = useResetFlameGraphState();
     const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
-    // URL state hooks with appropriate suffixes
-    const [expression, setExpressionState] = useURLState(`expression${suffix}`, {
-        defaultValue: defaultExpression,
+    // 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}`,
+        },
     });
-    const [from, setFromState] = useURLState(`from${suffix}`, {
-        defaultValue: defaultFrom?.toString(),
-    });
-    const [to, setToState] = useURLState(`to${suffix}`, {
-        defaultValue: defaultTo?.toString(),
-    });
-    const [timeSelection, setTimeSelectionState] = useURLState(`time_selection${suffix}`, {
-        defaultValue: defaultTimeSelection,
-    });
-    const [sumByParam, setSumByParam] = useURLState(`sum_by${suffix}`);
-    const [, setGroupByParam] = useURLState('group_by', {
-        alwaysReturnArray: true,
-    });
-    const [mergeFrom, setMergeFromState] = useURLState(`merge_from${suffix}`);
-    const [mergeTo, setMergeToState] = useURLState(`merge_to${suffix}`);
-    // ProfileSelection URL state hooks - reuses merge_from/merge_to but adds selection
-    const [selectionParam, setSelectionParam] = useURLState(`selection${suffix}`);
+    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) => void setQueryParams({ expression: val }), [setQueryParams]);
+    const setSumByParam = useCallback((val) => void setQueryParams({ sum_by: val }), [setQueryParams]);
+    const [, setRawGroupByParam] = useNuqsQueryState('group_by', commaArrayParam);
+    const setGroupByParam = useCallback((val) => {
+        void setRawGroupByParam(val);
+    }, [setRawGroupByParam]);
     // Parse sumBy from URL parameter format
-    const sumBy = useSumByFromParams(sumByParam);
+    const sumBy = useSumByFromParams(sumByParam ?? undefined);
     // Draft state management
     const [draftExpression, setDraftExpression] = useState(expression ?? defaultExpression);
     const [draftFrom, setDraftFrom] = useState(from ?? defaultFrom?.toString() ?? '');
@@ -105,20 +123,20 @@ export const useQueryState = (options = {}) => {
     // 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 === undefined && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
-            setSumByParam(sumByToParam(computedSumByFromURL));
+        if (sumByParam === null && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
+            void setSumByParam(sumByToParam(computedSumByFromURL));
         }
     }, [sumByParam, computedSumByFromURL, sumBySelectionLoading, setSumByParam]);
     // Construct the QuerySelection object (committed state from URL)
     const querySelection = useMemo(() => {
-        const range = DateTimeRange.fromRangeKey(timeSelection ?? defaultTimeSelection, from !== undefined && from !== '' ? parseInt(from) : defaultFrom, to !== undefined && to !== '' ? parseInt(to) : defaultTo);
+        const range = DateTimeRange.fromRangeKey(timeSelection ?? defaultTimeSelection, from != null && from !== '' ? parseInt(from) : defaultFrom, to != null && to !== '' ? parseInt(to) : defaultTo);
         return {
             expression: expression ?? defaultExpression,
             from: range.getFromMs(),
             to: range.getToMs(),
             timeSelection: range.getRangeKey(),
             sumBy: computedSumByFromURL,
-            ...(mergeFrom !== undefined && mergeFrom !== '' && mergeTo !== undefined && mergeTo !== ''
+            ...(mergeFrom != null && mergeFrom !== '' && mergeTo != null && mergeTo !== ''
                 ? { mergeFrom, mergeTo }
                 : {}),
         };
@@ -168,7 +186,7 @@ export const useQueryState = (options = {}) => {
     ]);
     // Compute ProfileSelection from URL params
     const profileSelection = useMemo(() => {
-        return ProfileSelectionFromParams(mergeFrom, mergeTo, selectionParam);
+        return ProfileSelectionFromParams(mergeFrom ?? undefined, mergeTo ?? undefined, selectionParam ?? undefined);
     }, [mergeFrom, mergeTo, selectionParam]);
     // Compute ProfileSource from ProfileSelection
     const profileSource = useMemo(() => {
@@ -181,73 +199,62 @@ export const useQueryState = (options = {}) => {
     // to the current moment when the Search button is clicked
     // Optional expression parameter allows updating the expression before committing
     const commitDraft = useCallback((refreshedTimeRange, expression) => {
-        batchUpdates(() => {
-            // 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();
-            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);
-            }
-            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);
-            }
-            if (isDelta && finalFrom !== '' && finalTo !== '') {
-                const fromMs = parseInt(finalFrom);
-                const toMs = parseInt(finalTo);
-                setMergeFromState((BigInt(fromMs) * 1000000n).toString());
-                setMergeToState((BigInt(toMs) * 1000000n).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?.();
+        // 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();
+        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);
+        }
+        // Auto-calculate merge parameters for delta profiles
+        const finalQuery = Query.parse(finalExpression);
+        const isDelta = finalQuery.profileType().delta;
+        const sumByValue = isDelta ? sumByToParam(draftSumBy) : sumByToParam(DEFAULT_EMPTY_SUM_BY);
+        let mergeFromValue = null;
+        let mergeToValue = null;
+        let selectionValue = null;
+        if (isDelta && finalFrom !== '' && finalTo !== '') {
+            const fromMs = parseInt(finalFrom);
+            const toMs = parseInt(finalTo);
+            mergeFromValue = (BigInt(fromMs) * 1000000n).toString();
+            mergeToValue = (BigInt(toMs) * 1000000n).toString();
+            if (!comparing) {
+                selectionValue = finalExpression;
             }
+        }
+        // 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,
         });
+        resetFlameGraphState();
+        if (draftProfileType.toString() !==
+            Query.parse(querySelection.expression).profileType().toString()) {
+            resetStateOnProfileTypeChange();
+            onProfileTypeChange?.();
+        }
     }, [
-        batchUpdates,
         draftExpression,
         draftFrom,
         draftTo,
@@ -256,14 +263,7 @@ export const useQueryState = (options = {}) => {
         draftSelection.from,
         draftSelection.to,
         comparing,
-        setExpressionState,
-        setFromState,
-        setToState,
-        setTimeSelectionState,
-        setSumByParam,
-        setMergeFromState,
-        setMergeToState,
-        setSelectionParam,
+        setQueryParams,
         resetFlameGraphState,
         resetStateOnProfileTypeChange,
         onProfileTypeChange,
@@ -293,12 +293,12 @@ export const useQueryState = (options = {}) => {
     }, [draftProfileName]);
     // Set ProfileSelection (auto-commits to URL immediately)
     const setProfileSelection = useCallback((mergeFrom, mergeTo, query) => {
-        batchUpdates(() => {
-            setSelectionParam(query.toString());
-            setMergeFromState(mergeFrom.toString());
-            setMergeToState(mergeTo.toString());
+        void setQueryParams({
+            selection: query.toString(),
+            merge_from: mergeFrom.toString(),
+            merge_to: mergeTo.toString(),
         });
-    }, [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]);
+    }, [setQueryParams]);
     const draftParsedQuery = useMemo(() => {
         try {
             return Query.parse(draftSelection.expression ?? '');