@parca/profile 0.19.140 → 0.19.143

package/dist/hooks/useQueryState.js

@@ -1,3 +1,15 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // 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.
@@ -10,7 +22,8 @@
 // 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, useEffect, useMemo, useState } from 'react';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryState as useNuqsQueryState, useQueryStates } from 'nuqs';
 import { DateTimeRange, useParcaContext } from '@parca/components';
 import { Query } from '@parca/parser';
@@ -19,333 +32,366 @@ import { useResetFlameGraphState } from '../ProfileView/hooks/useResetFlameGraph
 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 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,
+export var useQueryState = function useQueryState() {
+  var _queryParams$expressi, _queryParams$from, _queryParams$to, _queryParams$time_sel, _ref, _ref2;
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _useParcaContext = useParcaContext(),
+    queryClient = _useParcaContext.queryServiceClient;
+  var _options$suffix = options.suffix,
+    suffix = _options$suffix === void 0 ? '' : _options$suffix,
+    _options$defaultExpre = options.defaultExpression,
+    defaultExpression = _options$defaultExpre === void 0 ? '' : _options$defaultExpre,
+    _options$defaultTimeS = options.defaultTimeSelection,
+    defaultTimeSelection = _options$defaultTimeS === void 0 ? 'relative:minute|15' : _options$defaultTimeS,
+    defaultFrom = options.defaultFrom,
+    defaultTo = options.defaultTo,
+    _options$comparing = options.comparing,
+    comparing = _options$comparing === void 0 ? false : _options$comparing,
+    onProfileTypeChange = options.onProfileTypeChange;
+  var resetFlameGraphState = useResetFlameGraphState();
+  var resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
+
+  // URL state hooks with appropriate suffixes via useQueryStates
+  var _useQueryStates = 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}`,
-        },
+      history: 'replace',
+      urlKeys: {
+        expression: "expression".concat(suffix),
+        from: "from".concat(suffix),
+        to: "to".concat(suffix),
+        time_selection: "time_selection".concat(suffix),
+        sum_by: "sum_by".concat(suffix),
+        merge_from: "merge_from".concat(suffix),
+        merge_to: "merge_to".concat(suffix),
+        selection: "selection".concat(suffix)
+      }
+    }),
+    _useQueryStates2 = _slicedToArray(_useQueryStates, 2),
+    queryParams = _useQueryStates2[0],
+    setQueryParams = _useQueryStates2[1];
+  var expression = (_queryParams$expressi = queryParams.expression) !== null && _queryParams$expressi !== void 0 ? _queryParams$expressi : defaultExpression;
+  var from = (_queryParams$from = queryParams.from) !== null && _queryParams$from !== void 0 ? _queryParams$from : defaultFrom === null || defaultFrom === void 0 ? void 0 : defaultFrom.toString();
+  var to = (_queryParams$to = queryParams.to) !== null && _queryParams$to !== void 0 ? _queryParams$to : defaultTo === null || defaultTo === void 0 ? void 0 : defaultTo.toString();
+  var timeSelection = (_queryParams$time_sel = queryParams.time_selection) !== null && _queryParams$time_sel !== void 0 ? _queryParams$time_sel : defaultTimeSelection;
+  var sumByParam = queryParams.sum_by;
+  var mergeFrom = queryParams.merge_from;
+  var mergeTo = queryParams.merge_to;
+  var selectionParam = queryParams.selection;
+
+  // Individual setters for direct access
+  var setExpressionState = useCallback(function (val) {
+    return void setQueryParams({
+      expression: val
     });
-    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 ?? undefined);
-    // Draft state management
-    const [draftExpression, setDraftExpression] = useState(expression ?? defaultExpression);
-    const [draftFrom, setDraftFrom] = useState(from ?? defaultFrom?.toString() ?? '');
-    const [draftTo, setDraftTo] = useState(to ?? defaultTo?.toString() ?? '');
-    const [draftTimeSelection, setDraftTimeSelection] = useState(timeSelection ?? defaultTimeSelection);
-    // Parse the draft query to extract profile information
-    const draftQuery = useMemo(() => {
-        try {
-            return Query.parse(draftExpression ?? '');
-        }
-        catch (error) {
-            console.warn('Failed to parse draft expression', {
-                expression: draftExpression,
-                error: error instanceof Error ? error.message : String(error),
-            });
-            return Query.parse('');
-        }
-    }, [draftExpression]);
-    const query = useMemo(() => {
-        try {
-            return Query.parse(expression ?? '');
-        }
-        catch (error) {
-            console.warn('Failed to parse expression', {
-                expression,
-                error: error instanceof Error ? error.message : String(error),
-            });
-            return Query.parse('');
-        }
-    }, [expression]);
-    const draftProfileType = useMemo(() => draftQuery.profileType(), [draftQuery]);
-    const draftProfileName = useMemo(() => draftQuery.profileName(), [draftQuery]);
-    const profileType = useMemo(() => query.profileType(), [query]);
-    // Compute draft time range for label fetching
-    const draftTimeRange = useMemo(() => {
-        return DateTimeRange.fromRangeKey(draftTimeSelection ?? defaultTimeSelection, draftFrom !== '' ? parseInt(draftFrom) : defaultFrom, draftTo !== '' ? parseInt(draftTo) : defaultTo);
-    }, [draftTimeSelection, draftFrom, draftTo, defaultTimeSelection, defaultFrom, defaultTo]);
-    // Use combined sumBy hook for fetching labels and computing defaults (based on committed state)
-    const { sumBy: computedSumByFromURL, isLoading: sumBySelectionLoading, draftSumBy, setDraftSumBy, isDraftSumByLoading, } = useSumBy(queryClient, profileType?.profileName !== '' ? profileType : draftProfileType, draftTimeRange, draftProfileType, draftTimeRange, sumBy);
-    // Sync draft state with URL state when URL changes externally
-    useEffect(() => {
-        setDraftExpression(expression ?? defaultExpression);
-    }, [expression, defaultExpression]);
-    useEffect(() => {
-        setDraftFrom(from ?? defaultFrom?.toString() ?? '');
-    }, [from, defaultFrom]);
-    useEffect(() => {
-        setDraftTo(to ?? defaultTo?.toString() ?? '');
-    }, [to, defaultTo]);
-    useEffect(() => {
-        setDraftTimeSelection(timeSelection ?? defaultTimeSelection);
-    }, [timeSelection, defaultTimeSelection]);
-    useEffect(() => {
-        setDraftSumBy(sumBy);
-    }, [sumBy, setDraftSumBy]);
-    // 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));
-        }
-    }, [sumByParam, computedSumByFromURL, sumBySelectionLoading, setSumByParam]);
-    // Construct the QuerySelection object (committed state from URL)
-    const querySelection = useMemo(() => {
-        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 != null && mergeFrom !== '' && mergeTo != null && mergeTo !== ''
-                ? { mergeFrom, mergeTo }
-                : {}),
-        };
-    }, [
-        expression,
-        from,
-        to,
-        timeSelection,
-        computedSumByFromURL,
-        mergeFrom,
-        mergeTo,
-        defaultExpression,
-        defaultTimeSelection,
-        defaultFrom,
-        defaultTo,
-    ]);
-    // Construct the draft QuerySelection object (local draft state)
-    const draftSelection = useMemo(() => {
-        const isDelta = draftProfileType.delta;
-        const draftMergeFrom = isDelta
-            ? (BigInt(draftTimeRange.getFromMs()) * 1000000n).toString()
-            : undefined;
-        const draftMergeTo = isDelta
-            ? (BigInt(draftTimeRange.getToMs()) * 1000000n).toString()
-            : undefined;
-        const finalSumBy = draftSumBy ?? computedSumByFromURL;
-        return {
-            expression: draftExpression ?? defaultExpression,
-            from: draftTimeRange.getFromMs(),
-            to: draftTimeRange.getToMs(),
-            timeSelection: draftTimeRange.getRangeKey(),
-            sumBy: finalSumBy, // Use draft if set, otherwise fallback to computed
-            ...(draftMergeFrom !== undefined &&
-                draftMergeFrom !== '' &&
-                draftMergeTo !== undefined &&
-                draftMergeTo !== ''
-                ? { mergeFrom: draftMergeFrom, mergeTo: draftMergeTo }
-                : {}),
-        };
-    }, [
-        draftExpression,
-        draftTimeRange,
-        draftSumBy,
-        computedSumByFromURL,
-        draftProfileType.delta,
-        defaultExpression,
-    ]);
-    // Compute ProfileSelection from URL params
-    const profileSelection = useMemo(() => {
-        return ProfileSelectionFromParams(mergeFrom ?? undefined, mergeTo ?? undefined, selectionParam ?? undefined);
-    }, [mergeFrom, mergeTo, selectionParam]);
-    // Compute ProfileSource from ProfileSelection
-    const profileSource = useMemo(() => {
-        if (profileSelection === null)
-            return null;
-        return profileSelection.ProfileSource();
-    }, [profileSelection]);
-    // Commit draft changes to URL
-    // Optional refreshedTimeRange parameter allows re-evaluating relative time ranges (e.g., "last 15 minutes")
-    // to the current moment when the Search button is clicked
-    // Optional expression parameter allows updating the expression before committing
-    const commitDraft = useCallback((refreshedTimeRange, expression) => {
-        // 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?.();
-        }
-    }, [
-        draftExpression,
-        draftFrom,
-        draftTo,
-        draftTimeSelection,
-        draftSumBy,
-        draftSelection.from,
-        draftSelection.to,
-        comparing,
-        setQueryParams,
-        resetFlameGraphState,
-        resetStateOnProfileTypeChange,
-        onProfileTypeChange,
-        draftProfileType,
-        querySelection.expression,
-    ]);
-    const setDraftTimeRange = useCallback((newFrom, newTo, newTimeSelection) => {
-        setDraftFrom(newFrom.toString());
-        setDraftTo(newTo.toString());
-        setDraftTimeSelection(newTimeSelection);
-    }, []);
-    const setDraftSumByCallback = useCallback((newSumBy) => {
-        setDraftSumBy(newSumBy);
-    }, [setDraftSumBy]);
-    const setDraftProfileName = useCallback((newProfileName) => {
-        if (newProfileName === '')
-            return;
-        const [newQuery, changed] = draftQuery.setProfileName(newProfileName);
-        if (changed) {
-            setDraftExpression(newQuery.toString());
-            setDraftSumBy(undefined);
-        }
-    }, [draftQuery, setDraftSumBy]);
-    const setDraftMatchers = useCallback((matchers) => {
-        const newExpression = `${draftProfileName}{${matchers}}`;
-        setDraftExpression(newExpression);
-    }, [draftProfileName]);
-    // Set ProfileSelection (auto-commits to URL immediately)
-    const setProfileSelection = useCallback((mergeFrom, mergeTo, query) => {
-        void setQueryParams({
-            selection: query.toString(),
-            merge_from: mergeFrom.toString(),
-            merge_to: mergeTo.toString(),
-        });
-    }, [setQueryParams]);
-    const draftParsedQuery = useMemo(() => {
-        try {
-            return Query.parse(draftSelection.expression ?? '');
-        }
-        catch (error) {
-            console.warn('Failed to parse draft selection expression', {
-                expression: draftSelection.expression,
-                error: error instanceof Error ? error.message : String(error),
-            });
-            return Query.parse('');
-        }
-    }, [draftSelection.expression]);
-    const parsedQuery = useMemo(() => {
-        try {
-            return Query.parse(querySelection.expression ?? '');
-        }
-        catch (error) {
-            console.warn('Failed to parse query selection expression', {
-                expression: querySelection.expression,
-                error: error instanceof Error ? error.message : String(error),
-            });
-            return Query.parse('');
-        }
-    }, [querySelection.expression]);
-    return {
-        // Current committed state
-        querySelection,
-        // Draft state
-        draftSelection,
-        // Draft setters
-        setDraftExpression,
-        setDraftTimeRange,
-        setDraftSumBy: setDraftSumByCallback,
-        setDraftProfileName,
-        setDraftMatchers,
-        // Commit function
-        commitDraft,
-        // ProfileSelection state
-        profileSelection,
-        profileSource,
-        setProfileSelection,
-        // Loading state
-        sumByLoading: isDraftSumByLoading || sumBySelectionLoading,
-        draftParsedQuery,
-        parsedQuery,
-        setExpressionParam: setExpressionState,
-        setSumByParam,
-        setGroupByParam,
-    };
-};
+  }, [setQueryParams]);
+  var setSumByParam = useCallback(function (val_0) {
+    return void setQueryParams({
+      sum_by: val_0
+    });
+  }, [setQueryParams]);
+  var _useNuqsQueryState = useNuqsQueryState('group_by', commaArrayParam),
+    _useNuqsQueryState2 = _slicedToArray(_useNuqsQueryState, 2),
+    setRawGroupByParam = _useNuqsQueryState2[1];
+  var setGroupByParam = useCallback(function (val_1) {
+    void setRawGroupByParam(val_1);
+  }, [setRawGroupByParam]);
+
+  // Parse sumBy from URL parameter format
+  var sumBy = useSumByFromParams(sumByParam !== null && sumByParam !== void 0 ? sumByParam : undefined);
+
+  // Draft state management
+  var _useState = useState(expression !== null && expression !== void 0 ? expression : defaultExpression),
+    _useState2 = _slicedToArray(_useState, 2),
+    draftExpression = _useState2[0],
+    setDraftExpression = _useState2[1];
+  var _useState3 = useState((_ref = from !== null && from !== void 0 ? from : defaultFrom === null || defaultFrom === void 0 ? void 0 : defaultFrom.toString()) !== null && _ref !== void 0 ? _ref : ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    draftFrom = _useState4[0],
+    setDraftFrom = _useState4[1];
+  var _useState5 = useState((_ref2 = to !== null && to !== void 0 ? to : defaultTo === null || defaultTo === void 0 ? void 0 : defaultTo.toString()) !== null && _ref2 !== void 0 ? _ref2 : ''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    draftTo = _useState6[0],
+    setDraftTo = _useState6[1];
+  var _useState7 = useState(timeSelection !== null && timeSelection !== void 0 ? timeSelection : defaultTimeSelection),
+    _useState8 = _slicedToArray(_useState7, 2),
+    draftTimeSelection = _useState8[0],
+    setDraftTimeSelection = _useState8[1];
+  // Parse the draft query to extract profile information
+  var draftQuery = useMemo(function () {
+    try {
+      return Query.parse(draftExpression !== null && draftExpression !== void 0 ? draftExpression : '');
+    } catch (error) {
+      console.warn('Failed to parse draft expression', {
+        expression: draftExpression,
+        error: error instanceof Error ? error.message : String(error)
+      });
+      return Query.parse('');
+    }
+  }, [draftExpression]);
+  var query = useMemo(function () {
+    try {
+      return Query.parse(expression !== null && expression !== void 0 ? expression : '');
+    } catch (error_0) {
+      console.warn('Failed to parse expression', {
+        expression: expression,
+        error: error_0 instanceof Error ? error_0.message : String(error_0)
+      });
+      return Query.parse('');
+    }
+  }, [expression]);
+  var draftProfileType = useMemo(function () {
+    return draftQuery.profileType();
+  }, [draftQuery]);
+  var draftProfileName = useMemo(function () {
+    return draftQuery.profileName();
+  }, [draftQuery]);
+  var profileType = useMemo(function () {
+    return query.profileType();
+  }, [query]);
+
+  // Compute draft time range for label fetching
+  var draftTimeRange = useMemo(function () {
+    return DateTimeRange.fromRangeKey(draftTimeSelection !== null && draftTimeSelection !== void 0 ? draftTimeSelection : defaultTimeSelection, draftFrom !== '' ? parseInt(draftFrom) : defaultFrom, draftTo !== '' ? parseInt(draftTo) : defaultTo);
+  }, [draftTimeSelection, draftFrom, draftTo, defaultTimeSelection, defaultFrom, defaultTo]);
+  // Use combined sumBy hook for fetching labels and computing defaults (based on committed state)
+  var _useSumBy = useSumBy(queryClient, (profileType === null || profileType === void 0 ? void 0 : profileType.profileName) !== '' ? profileType : draftProfileType, draftTimeRange, draftProfileType, draftTimeRange, sumBy),
+    computedSumByFromURL = _useSumBy.sumBy,
+    sumBySelectionLoading = _useSumBy.isLoading,
+    draftSumBy = _useSumBy.draftSumBy,
+    setDraftSumBy = _useSumBy.setDraftSumBy,
+    isDraftSumByLoading = _useSumBy.isDraftSumByLoading;
+
+  // Sync draft state with URL state when URL changes externally
+  useEffect(function () {
+    setDraftExpression(expression !== null && expression !== void 0 ? expression : defaultExpression);
+  }, [expression, defaultExpression]);
+  useEffect(function () {
+    var _ref3;
+    setDraftFrom((_ref3 = from !== null && from !== void 0 ? from : defaultFrom === null || defaultFrom === void 0 ? void 0 : defaultFrom.toString()) !== null && _ref3 !== void 0 ? _ref3 : '');
+  }, [from, defaultFrom]);
+  useEffect(function () {
+    var _ref4;
+    setDraftTo((_ref4 = to !== null && to !== void 0 ? to : defaultTo === null || defaultTo === void 0 ? void 0 : defaultTo.toString()) !== null && _ref4 !== void 0 ? _ref4 : '');
+  }, [to, defaultTo]);
+  useEffect(function () {
+    setDraftTimeSelection(timeSelection !== null && timeSelection !== void 0 ? timeSelection : defaultTimeSelection);
+  }, [timeSelection, defaultTimeSelection]);
+  useEffect(function () {
+    setDraftSumBy(sumBy);
+  }, [sumBy, setDraftSumBy]);
+
+  // Sync computed sumBy to URL if URL doesn't already have a value
+  // to ensure the shared URL can always pick it up.
+  // Only run once (when sumByParam first becomes available), not on every change,
+  // to avoid oscillation with external writers (useViewQueryState).
+  var hasSyncedSumByRef = useRef(false);
+  useEffect(function () {
+    if (sumByParam !== null) {
+      hasSyncedSumByRef.current = true;
+    }
+    if (!hasSyncedSumByRef.current && sumByParam === null && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
+      hasSyncedSumByRef.current = true;
+      void setSumByParam(sumByToParam(computedSumByFromURL));
+    }
+  }, [sumByParam, computedSumByFromURL, sumBySelectionLoading, setSumByParam]);
+
+  // Construct the QuerySelection object (committed state from URL)
+  var querySelection = useMemo(function () {
+    var range = DateTimeRange.fromRangeKey(timeSelection !== null && timeSelection !== void 0 ? timeSelection : defaultTimeSelection, from != null && from !== '' ? parseInt(from) : defaultFrom, to != null && to !== '' ? parseInt(to) : defaultTo);
+    return _objectSpread({
+      expression: expression !== null && expression !== void 0 ? expression : defaultExpression,
+      from: range.getFromMs(),
+      to: range.getToMs(),
+      timeSelection: range.getRangeKey(),
+      sumBy: computedSumByFromURL
+    }, mergeFrom != null && mergeFrom !== '' && mergeTo != null && mergeTo !== '' ? {
+      mergeFrom: mergeFrom,
+      mergeTo: mergeTo
+    } : {});
+  }, [expression, from, to, timeSelection, computedSumByFromURL, mergeFrom, mergeTo, defaultExpression, defaultTimeSelection, defaultFrom, defaultTo]);
+
+  // Construct the draft QuerySelection object (local draft state)
+  var draftSelection = useMemo(function () {
+    var isDelta = draftProfileType.delta;
+    var draftMergeFrom = isDelta ? (BigInt(draftTimeRange.getFromMs()) * 1000000n).toString() : undefined;
+    var draftMergeTo = isDelta ? (BigInt(draftTimeRange.getToMs()) * 1000000n).toString() : undefined;
+    var finalSumBy = draftSumBy !== null && draftSumBy !== void 0 ? draftSumBy : computedSumByFromURL;
+    return _objectSpread({
+      expression: draftExpression !== null && draftExpression !== void 0 ? draftExpression : defaultExpression,
+      from: draftTimeRange.getFromMs(),
+      to: draftTimeRange.getToMs(),
+      timeSelection: draftTimeRange.getRangeKey(),
+      sumBy: finalSumBy
+    }, draftMergeFrom !== undefined && draftMergeFrom !== '' && draftMergeTo !== undefined && draftMergeTo !== '' ? {
+      mergeFrom: draftMergeFrom,
+      mergeTo: draftMergeTo
+    } : {});
+  }, [draftExpression, draftTimeRange, draftSumBy, computedSumByFromURL, draftProfileType.delta, defaultExpression]);
+
+  // Compute ProfileSelection from URL params
+  var profileSelection = useMemo(function () {
+    return ProfileSelectionFromParams(mergeFrom !== null && mergeFrom !== void 0 ? mergeFrom : undefined, mergeTo !== null && mergeTo !== void 0 ? mergeTo : undefined, selectionParam !== null && selectionParam !== void 0 ? selectionParam : undefined);
+  }, [mergeFrom, mergeTo, selectionParam]);
+
+  // Compute ProfileSource from ProfileSelection
+  var profileSource = useMemo(function () {
+    if (profileSelection === null) return null;
+    return profileSelection.ProfileSource();
+  }, [profileSelection]);
+
+  // Commit draft changes to URL
+  // Optional refreshedTimeRange parameter allows re-evaluating relative time ranges (e.g., "last 15 minutes")
+  // to the current moment when the Search button is clicked
+  // Optional expression parameter allows updating the expression before committing
+  var commitDraft = useCallback(function (refreshedTimeRange, expression_0) {
+    var _refreshedTimeRange$f, _refreshedTimeRange$f2, _refreshedTimeRange$t, _refreshedTimeRange$t2, _refreshedTimeRange$t3;
+    // Use provided expression or current draft expression
+    var finalExpression = expression_0 !== null && expression_0 !== void 0 ? expression_0 : draftExpression;
+
+    // Update draft state with new expression if provided
+    if (expression_0 !== undefined) {
+      setDraftExpression(expression_0);
+    }
+
+    // Calculate the actual from/to values from draftSelection if not provided
+    var calculatedFrom = draftSelection.from.toString();
+    var calculatedTo = draftSelection.to.toString();
+    var finalFrom = (_refreshedTimeRange$f = refreshedTimeRange === null || refreshedTimeRange === void 0 || (_refreshedTimeRange$f2 = refreshedTimeRange.from) === null || _refreshedTimeRange$f2 === void 0 ? void 0 : _refreshedTimeRange$f2.toString()) !== null && _refreshedTimeRange$f !== void 0 ? _refreshedTimeRange$f : draftFrom !== '' ? draftFrom : calculatedFrom;
+    var finalTo = (_refreshedTimeRange$t = refreshedTimeRange === null || refreshedTimeRange === void 0 || (_refreshedTimeRange$t2 = refreshedTimeRange.to) === null || _refreshedTimeRange$t2 === void 0 ? void 0 : _refreshedTimeRange$t2.toString()) !== null && _refreshedTimeRange$t !== void 0 ? _refreshedTimeRange$t : draftTo !== '' ? draftTo : calculatedTo;
+    var finalTimeSelection = (_refreshedTimeRange$t3 = refreshedTimeRange === null || refreshedTimeRange === void 0 ? void 0 : refreshedTimeRange.timeSelection) !== null && _refreshedTimeRange$t3 !== void 0 ? _refreshedTimeRange$t3 : draftTimeSelection;
+
+    // Update draft state with refreshed time range if provided
+    if ((refreshedTimeRange === null || refreshedTimeRange === void 0 ? void 0 : refreshedTimeRange.from) !== undefined) {
+      setDraftFrom(finalFrom);
+    }
+    if ((refreshedTimeRange === null || refreshedTimeRange === void 0 ? void 0 : refreshedTimeRange.to) !== undefined) {
+      setDraftTo(finalTo);
+    }
+    if ((refreshedTimeRange === null || refreshedTimeRange === void 0 ? void 0 : refreshedTimeRange.timeSelection) !== undefined) {
+      setDraftTimeSelection(finalTimeSelection);
+    }
+
+    // Auto-calculate merge parameters for delta profiles
+    var finalQuery = Query.parse(finalExpression);
+    var isDelta_0 = finalQuery.profileType().delta;
+    var sumByValue = isDelta_0 ? sumByToParam(draftSumBy) : sumByToParam(DEFAULT_EMPTY_SUM_BY);
+    var mergeFromValue = null;
+    var mergeToValue = null;
+    var selectionValue = null;
+    if (isDelta_0 && finalFrom !== '' && finalTo !== '') {
+      var fromMs = parseInt(finalFrom);
+      var 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 === null || onProfileTypeChange === void 0 || onProfileTypeChange();
+    }
+  }, [draftExpression, draftFrom, draftTo, draftTimeSelection, draftSumBy, draftSelection.from, draftSelection.to, comparing, setQueryParams, resetFlameGraphState, resetStateOnProfileTypeChange, onProfileTypeChange, draftProfileType, querySelection.expression]);
+  var setDraftTimeRange = useCallback(function (newFrom, newTo, newTimeSelection) {
+    setDraftFrom(newFrom.toString());
+    setDraftTo(newTo.toString());
+    setDraftTimeSelection(newTimeSelection);
+  }, []);
+  var setDraftSumByCallback = useCallback(function (newSumBy) {
+    setDraftSumBy(newSumBy);
+  }, [setDraftSumBy]);
+  var setDraftProfileName = useCallback(function (newProfileName) {
+    if (newProfileName === '') return;
+    var _draftQuery$setProfil = draftQuery.setProfileName(newProfileName),
+      _draftQuery$setProfil2 = _slicedToArray(_draftQuery$setProfil, 2),
+      newQuery = _draftQuery$setProfil2[0],
+      changed = _draftQuery$setProfil2[1];
+    if (changed) {
+      setDraftExpression(newQuery.toString());
+      setDraftSumBy(undefined);
+    }
+  }, [draftQuery, setDraftSumBy]);
+  var setDraftMatchers = useCallback(function (matchers) {
+    var newExpression = "".concat(draftProfileName, "{").concat(matchers, "}");
+    setDraftExpression(newExpression);
+  }, [draftProfileName]);
+
+  // Set ProfileSelection (auto-commits to URL immediately)
+  var setProfileSelection = useCallback(function (mergeFrom_0, mergeTo_0, query_0) {
+    void setQueryParams({
+      selection: query_0.toString(),
+      merge_from: mergeFrom_0.toString(),
+      merge_to: mergeTo_0.toString()
+    });
+  }, [setQueryParams]);
+  var draftParsedQuery = useMemo(function () {
+    try {
+      var _draftSelection$expre;
+      return Query.parse((_draftSelection$expre = draftSelection.expression) !== null && _draftSelection$expre !== void 0 ? _draftSelection$expre : '');
+    } catch (error_1) {
+      console.warn('Failed to parse draft selection expression', {
+        expression: draftSelection.expression,
+        error: error_1 instanceof Error ? error_1.message : String(error_1)
+      });
+      return Query.parse('');
+    }
+  }, [draftSelection.expression]);
+  var parsedQuery = useMemo(function () {
+    try {
+      var _querySelection$expre;
+      return Query.parse((_querySelection$expre = querySelection.expression) !== null && _querySelection$expre !== void 0 ? _querySelection$expre : '');
+    } catch (error_2) {
+      console.warn('Failed to parse query selection expression', {
+        expression: querySelection.expression,
+        error: error_2 instanceof Error ? error_2.message : String(error_2)
+      });
+      return Query.parse('');
+    }
+  }, [querySelection.expression]);
+  return {
+    // Current committed state
+    querySelection: querySelection,
+    // Draft state
+    draftSelection: draftSelection,
+    // Draft setters
+    setDraftExpression: setDraftExpression,
+    setDraftTimeRange: setDraftTimeRange,
+    setDraftSumBy: setDraftSumByCallback,
+    setDraftProfileName: setDraftProfileName,
+    setDraftMatchers: setDraftMatchers,
+    // Commit function
+    commitDraft: commitDraft,
+    // ProfileSelection state
+    profileSelection: profileSelection,
+    profileSource: profileSource,
+    setProfileSelection: setProfileSelection,
+    // Loading state
+    sumByLoading: isDraftSumByLoading || sumBySelectionLoading,
+    draftParsedQuery: draftParsedQuery,
+    parsedQuery: parsedQuery,
+    setExpressionParam: setExpressionState,
+    setSumByParam: setSumByParam,
+    setGroupByParam: setGroupByParam
+  };
+};