@parca/profile 0.19.138 → 0.19.140

package/dist/hooks/useCompareModeMeta.js

@@ -11,100 +11,69 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 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
  * Returns compare mode flags and a function to close compare mode
  */
 export const useCompareModeMeta = () => {
-    const batchUpdates = useURLStateBatch();
-    // Side A URL state (only setters needed)
-    const [, setExpressionA] = useURLState('expression_a');
-    const [, setFromA] = useURLState('from_a');
-    const [, setToA] = useURLState('to_a');
-    const [, setTimeSelectionA] = useURLState('time_selection_a');
-    const [, setSumByA] = useURLState('sum_by_a');
-    const [, setMergeFromA] = useURLState('merge_from_a');
-    const [, setMergeToA] = useURLState('merge_to_a');
-    const [, setSelectionA] = useURLState('selection_a');
-    // Side B URL state
-    const [expressionB, setExpressionB] = useURLState('expression_b');
-    const [fromB, setFromB] = useURLState('from_b');
-    const [toB, setToB] = useURLState('to_b');
-    const [timeSelectionB, setTimeSelectionB] = useURLState('time_selection_b');
-    const [sumByB, setSumByB] = useURLState('sum_by_b');
-    const [mergeFromB, setMergeFromB] = useURLState('merge_from_b');
-    const [mergeToB, setMergeToB] = useURLState('merge_to_b');
-    const [selectionB, setSelectionB] = useURLState('selection_b');
-    // Compare mode flags (expose values for routing decisions)
-    const [compareA, setCompareA] = useURLState('compare_a');
-    const [compareB, setCompareB] = useURLState('compare_b');
-    const [compareAbsolute, setCompareAbsolute] = useURLState('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) => {
-        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,
-    ]);
-    // Derive isCompareMode from flags
-    const isCompareMode = compareA === 'true' || compareB === 'true';
-    const isCompareAbsolute = compareAbsolute === 'true';
+    }, [state, setState]);
+    const isCompareMode = state.compare_a === true || state.compare_b === true;
+    const isCompareAbsolute = state.compare_absolute === true;
     return {
         isCompareMode,
         isCompareAbsolute,

package/dist/hooks/useDashboardItems.d.ts

@@ -0,0 +1,5 @@
+export declare const useDashboardItems: () => {
+    dashboardItems: string[];
+    setDashboardItems: (items: string[]) => void;
+};
+//# sourceMappingURL=useDashboardItems.d.ts.map

package/dist/hooks/useDashboardItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDashboardItems.d.ts","sourceRoot":"","sources":["../../src/hooks/useDashboardItems.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,iBAAiB,QAAO;IACnC,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAsB9C,CAAC"}

package/dist/hooks/useDashboardItems.js

@@ -0,0 +1,27 @@
+// 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' };
+export const useDashboardItems = () => {
+    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) => {
+        void setRawDashboardItems(items);
+    }, [setRawDashboardItems]);
+    return { dashboardItems, setDashboardItems };
+};

package/dist/hooks/useQueryState.d.ts

@@ -29,9 +29,9 @@ interface UseQueryStateReturn {
     sumByLoading: boolean;
     draftParsedQuery: Query | null;
     parsedQuery: Query | null;
-    setExpressionParam: (value: string | undefined) => void;
-    setSumByParam: (value: string | undefined) => void;
-    setGroupByParam: (value: string[] | undefined) => void;
+    setExpressionParam: (value: string | null) => void;
+    setSumByParam: (value: string | null) => void;
+    setGroupByParam: (value: string[] | null) => void;
 }
 export declare const useQueryState: (options?: UseQueryStateOptions) => UseQueryStateReturn;
 export {};

package/dist/hooks/useQueryState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAK7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CAAC,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAG9F,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;IAGtB,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC;IAG/B,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAE1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBA2alE,CAAC"}
+{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAM7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CAAC,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAG9F,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;IAGtB,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC;IAG/B,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAE1B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBA0blE,CAAC"}

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 ?? '');