@parca/profile 0.19.139 → 0.19.142

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,6 +22,7 @@
 // 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 { DateTimeRange, useParcaContext, useURLState, useURLStateBatch } from '@parca/components';
 import { Query } from '@parca/parser';
@@ -17,335 +30,363 @@ 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';
-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,
-    });
-    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,
+export var useQueryState = function useQueryState() {
+  var _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 batchUpdates = useURLStateBatch();
+  var resetFlameGraphState = useResetFlameGraphState();
+  var resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
+
+  // URL state hooks with appropriate suffixes
+  var _useURLState = useURLState("expression".concat(suffix), {
+      defaultValue: defaultExpression
+    }),
+    _useURLState2 = _slicedToArray(_useURLState, 2),
+    expression = _useURLState2[0],
+    setExpressionState = _useURLState2[1];
+  var _useURLState3 = useURLState("from".concat(suffix), {
+      defaultValue: defaultFrom === null || defaultFrom === void 0 ? void 0 : defaultFrom.toString()
+    }),
+    _useURLState4 = _slicedToArray(_useURLState3, 2),
+    from = _useURLState4[0],
+    setFromState = _useURLState4[1];
+  var _useURLState5 = useURLState("to".concat(suffix), {
+      defaultValue: defaultTo === null || defaultTo === void 0 ? void 0 : defaultTo.toString()
+    }),
+    _useURLState6 = _slicedToArray(_useURLState5, 2),
+    to = _useURLState6[0],
+    setToState = _useURLState6[1];
+  var _useURLState7 = useURLState("time_selection".concat(suffix), {
+      defaultValue: defaultTimeSelection
+    }),
+    _useURLState8 = _slicedToArray(_useURLState7, 2),
+    timeSelection = _useURLState8[0],
+    setTimeSelectionState = _useURLState8[1];
+  var _useURLState9 = useURLState("sum_by".concat(suffix)),
+    _useURLState0 = _slicedToArray(_useURLState9, 2),
+    sumByParam = _useURLState0[0],
+    setSumByParam = _useURLState0[1];
+  var _useURLState1 = useURLState('group_by', {
+      alwaysReturnArray: true
+    }),
+    _useURLState10 = _slicedToArray(_useURLState1, 2),
+    setGroupByParam = _useURLState10[1];
+  var _useURLState11 = useURLState("merge_from".concat(suffix)),
+    _useURLState12 = _slicedToArray(_useURLState11, 2),
+    mergeFrom = _useURLState12[0],
+    setMergeFromState = _useURLState12[1];
+  var _useURLState13 = useURLState("merge_to".concat(suffix)),
+    _useURLState14 = _slicedToArray(_useURLState13, 2),
+    mergeTo = _useURLState14[0],
+    setMergeToState = _useURLState14[1];
+
+  // ProfileSelection URL state hooks - reuses merge_from/merge_to but adds selection
+  var _useURLState15 = useURLState("selection".concat(suffix)),
+    _useURLState16 = _slicedToArray(_useURLState15, 2),
+    selectionParam = _useURLState16[0],
+    setSelectionParam = _useURLState16[1];
+
+  // Parse sumBy from URL parameter format
+  var sumBy = useSumByFromParams(sumByParam);
+
+  // 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.
+  useEffect(function () {
+    if (sumByParam === undefined && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
+      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 !== undefined && from !== '' ? parseInt(from) : defaultFrom, to !== undefined && 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 !== undefined && mergeFrom !== '' && mergeTo !== undefined && 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, mergeTo, selectionParam);
+  }, [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) {
+    batchUpdates(function () {
+      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);
+      }
+      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
+      var finalQuery = Query.parse(finalExpression);
+      var isDelta_0 = finalQuery.profileType().delta;
+      if (isDelta_0) {
+        setSumByParam(sumByToParam(draftSumBy));
+      } else {
+        setSumByParam(DEFAULT_EMPTY_SUM_BY);
+      }
+      if (isDelta_0 && finalFrom !== '' && finalTo !== '') {
+        var fromMs = parseInt(finalFrom);
+        var 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 === null || onProfileTypeChange === void 0 || onProfileTypeChange();
+      }
     });
-    const [sumByParam, setSumByParam] = useURLState(`sum_by${suffix}`);
-    const [, setGroupByParam] = useURLState('group_by', {
-        alwaysReturnArray: true,
+  }, [batchUpdates, draftExpression, draftFrom, draftTo, draftTimeSelection, draftSumBy, draftSelection.from, draftSelection.to, comparing, setExpressionState, setFromState, setToState, setTimeSelectionState, setSumByParam, setMergeFromState, setMergeToState, setSelectionParam, 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) {
+    batchUpdates(function () {
+      setSelectionParam(query_0.toString());
+      setMergeFromState(mergeFrom_0.toString());
+      setMergeToState(mergeTo_0.toString());
     });
-    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}`);
-    // Parse sumBy from URL parameter format
-    const sumBy = useSumByFromParams(sumByParam);
-    // 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 === undefined && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
-            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);
-        return {
-            expression: expression ?? defaultExpression,
-            from: range.getFromMs(),
-            to: range.getToMs(),
-            timeSelection: range.getRangeKey(),
-            sumBy: computedSumByFromURL,
-            ...(mergeFrom !== undefined && mergeFrom !== '' && mergeTo !== undefined && 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, mergeTo, selectionParam);
-    }, [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) => {
-        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?.();
-            }
-        });
-    }, [
-        batchUpdates,
-        draftExpression,
-        draftFrom,
-        draftTo,
-        draftTimeSelection,
-        draftSumBy,
-        draftSelection.from,
-        draftSelection.to,
-        comparing,
-        setExpressionState,
-        setFromState,
-        setToState,
-        setTimeSelectionState,
-        setSumByParam,
-        setMergeFromState,
-        setMergeToState,
-        setSelectionParam,
-        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) => {
-        batchUpdates(() => {
-            setSelectionParam(query.toString());
-            setMergeFromState(mergeFrom.toString());
-            setMergeToState(mergeTo.toString());
-        });
-    }, [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]);
-    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,
-    };
-};
+  }, [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]);
+  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
+  };
+};