@parca/profile 0.19.142 → 0.19.144

package/dist/hooks/useQueryState.js

@@ -23,15 +23,17 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // 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 { 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';
 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 var useQueryState = function useQueryState() {
-  var _ref, _ref2;
+  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;
@@ -46,61 +48,64 @@ export var useQueryState = function useQueryState() {
     _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
+  // 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".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)
+      }
     }),
-    _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];
+    _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;
 
-  // 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];
+  // Individual setters for direct access
+  var setExpressionState = useCallback(function (val) {
+    return void setQueryParams({
+      expression: val
+    });
+  }, [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);
+  var sumBy = useSumByFromParams(sumByParam !== null && sumByParam !== void 0 ? sumByParam : undefined);
 
   // Draft state management
   var _useState = useState(expression !== null && expression !== void 0 ? expression : defaultExpression),
@@ -185,22 +190,29 @@ export var useQueryState = function useQueryState() {
 
   // 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 === undefined && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
-      setSumByParam(sumByToParam(computedSumByFromURL));
+    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 !== undefined && from !== '' ? parseInt(from) : defaultFrom, to !== undefined && to !== '' ? parseInt(to) : defaultTo);
+    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 !== undefined && mergeFrom !== '' && mergeTo !== undefined && mergeTo !== '' ? {
+    }, mergeFrom != null && mergeFrom !== '' && mergeTo != null && mergeTo !== '' ? {
       mergeFrom: mergeFrom,
       mergeTo: mergeTo
     } : {});
@@ -226,7 +238,7 @@ export var useQueryState = function useQueryState() {
 
   // Compute ProfileSelection from URL params
   var profileSelection = useMemo(function () {
-    return ProfileSelectionFromParams(mergeFrom, mergeTo, selectionParam);
+    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
@@ -240,74 +252,67 @@ export var useQueryState = function useQueryState() {
   // 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;
+    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);
-      }
+    // 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;
+    // 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);
+    // 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
-      // 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);
+    // 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;
       }
-      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();
-      }
+    // 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
     });
-  }, [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]);
+    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());
@@ -334,12 +339,12 @@ export var useQueryState = function useQueryState() {
 
   // 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());
+    void setQueryParams({
+      selection: query_0.toString(),
+      merge_from: mergeFrom_0.toString(),
+      merge_to: mergeTo_0.toString()
     });
-  }, [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]);
+  }, [setQueryParams]);
   var draftParsedQuery = useMemo(function () {
     try {
       var _draftSelection$expre;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import type { ParamPreferences } from '@parca/components';
 import MatchersInput from './MatchersInput';
 import MetricsGraph, { type ContextMenuItemOrSubmenu, type Series } from './MetricsGraph';
 import ProfileExplorer from './ProfileExplorer';
@@ -25,7 +24,9 @@ export * from './useSumBy';
 export { QueryControls } from './QueryControls';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
-export declare const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences;
 export { useProfileTypes } from './ProfileSelector';
+export { stringParam, boolParam, intParam, commaArrayParam, invertCallStackParser, groupByParser, flamechartDimensionParser, tableColumnsParser, hiddenBinariesParser, jsonParser, } from './hooks/urlParsers';
+export { useDashboardItems } from './hooks/useDashboardItems';
+export { useColorBy } from './hooks/useColorBy';
 export { ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames, MetricsGraph, SimpleMatchers, MatchersInput, type ContextMenuItemOrSubmenu, type Series, LabelsQueryProvider, useLabelsQueryProvider, UnifiedLabelsProvider, useUnifiedLabels, useQueryState, type LabelsQueryProviderContextType, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,YAAY,EAAE,EAAC,KAAK,wBAAwB,EAAE,KAAK,MAAM,EAAC,MAAM,gBAAgB,CAAC;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,8BAA8B,EACpC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAOpD,OAAO,EAAC,yBAAyB,EAAC,MAAM,0CAA0C,CAAC;AAEnF,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,iBAAiB,EACjB,KAAK,aAAa,GACnB,MAAM,2DAA2D,CAAC;AACnE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,eAAO,MAAM,qCAAqC,EAAE,gBAWnD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,EACb,KAAK,wBAAwB,EAC7B,KAAK,MAAM,EACX,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,KAAK,8BAA8B,GACpC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,YAAY,EAAE,EAAC,KAAK,wBAAwB,EAAE,KAAK,MAAM,EAAC,MAAM,gBAAgB,CAAC;AACxF,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,8BAA8B,EACpC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAC,qBAAqB,EAAE,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACxF,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AAOpD,OAAO,EAAC,yBAAyB,EAAC,MAAM,0CAA0C,CAAC;AAEnF,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACvB,iBAAiB,EACjB,KAAK,aAAa,GACnB,MAAM,2DAA2D,CAAC;AACnE,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAC,yBAAyB,EAAC,MAAM,mEAAmE,CAAC;AAE5G,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EACL,WAAW,EACX,SAAS,EACT,QAAQ,EACR,eAAe,EACf,qBAAqB,EACrB,aAAa,EACb,yBAAyB,EACzB,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,GACX,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,aAAa,EACb,KAAK,wBAAwB,EAC7B,KAAK,MAAM,EACX,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,KAAK,8BAA8B,GACpC,CAAC"}

package/dist/index.js

@@ -47,17 +47,8 @@ export * from './useSumBy';
 export { QueryControls } from './QueryControls';
 export { default as ProfileFilters } from './ProfileView/components/ProfileFilters';
 export { useProfileFiltersUrlState } from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
-export var DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
-  dashboard_items: {
-    defaultValue: 'flamegraph',
-    splitOnCommas: true // This param should split on commas for array values
-  },
-  group_by: {
-    splitOnCommas: true
-  },
-  flamechart_dimension: {
-    splitOnCommas: true
-  }
-};
 export { useProfileTypes } from './ProfileSelector';
+export { stringParam, boolParam, intParam, commaArrayParam, invertCallStackParser, groupByParser, flamechartDimensionParser, tableColumnsParser, hiddenBinariesParser, jsonParser } from './hooks/urlParsers';
+export { useDashboardItems } from './hooks/useDashboardItems';
+export { useColorBy } from './hooks/useColorBy';
 export { ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames, MetricsGraph, SimpleMatchers, MatchersInput, LabelsQueryProvider, useLabelsQueryProvider, UnifiedLabelsProvider, useUnifiedLabels, useQueryState };

package/dist/useQuery.js

@@ -47,7 +47,8 @@ export var useQuery = function useQuery(client, profileSource, reportType, optio
   var protoFiltersKey = t2;
   var t3;
   if ($[4] !== profileSource) {
-    t3 = profileSource.toKey();
+    var _profileSource$toKey;
+    t3 = (_profileSource$toKey = profileSource === null || profileSource === void 0 ? void 0 : profileSource.toKey()) !== null && _profileSource$toKey !== void 0 ? _profileSource$toKey : "";
     $[4] = profileSource;
     $[5] = t3;
   } else {

package/dist/useSumBy.d.ts

@@ -12,7 +12,7 @@ export declare const useDefaultSumBy: (profileType: ProfileType | undefined, lab
     isLoading: boolean;
 };
 export declare const useSumByFromParams: (param: string | string[] | undefined) => string[] | undefined;
-export declare const sumByToParam: (sumBy: string[] | undefined) => string | string[] | undefined;
+export declare const sumByToParam: (sumBy: string[] | undefined) => string | null;
 export declare const useSumBy: (queryClient: QueryServiceClient, profileType: ProfileType | undefined, timeRange: DateTimeRange, draftProfileType: ProfileType | undefined, draftTimeRange: DateTimeRange, defaultValue?: string[]) => {
     sumBy: string[] | undefined;
     setSumBy: (sumBy: string[]) => void;

package/dist/useSumBy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,YAAY,MAAM,EAAE,GAAG,SAAS,EAChC,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CAqEF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAU9E,CAAC;AAGF,eAAO,MAAM,QAAQ,GACnB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,kBAAkB,WAAW,GAAG,SAAS,EACzC,gBAAgB,aAAa,EAC7B,eAAe,MAAM,EAAE,KACtB;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,eAAe,MAAM,EAAE,KACtB;IACD,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAyB9B,CAAC"}
+{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,YAAY,MAAM,EAAE,GAAG,SAAS,EAChC,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CAqEF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,IAUnE,CAAC;AAGF,eAAO,MAAM,QAAQ,GACnB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,kBAAkB,WAAW,GAAG,SAAS,EACzC,gBAAgB,aAAa,EAC7B,eAAe,MAAM,EAAE,KACtB;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,eAAe,MAAM,EAAE,KACtB;IACD,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAyB9B,CAAC"}

package/dist/useSumBy.js

@@ -163,12 +163,12 @@ export var useSumByFromParams = function useSumByFromParams(param) {
 };
 export var sumByToParam = function sumByToParam(sumBy) {
   if (sumBy === undefined) {
-    return undefined;
+    return null;
   }
   if (sumBy.length === 0) {
     return '__none__';
   }
-  return sumBy;
+  return sumBy.join(',');
 };
 
 // Combined hook that handles all sumBy logic: fetching labels, computing defaults, and managing selection

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.142",
+  "version": "0.19.144",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.23",
-    "@parca/components": "0.16.414",
+    "@parca/components": "0.16.415",
     "@parca/dynamicsize": "0.16.74",
     "@parca/hooks": "0.0.125",
     "@parca/icons": "0.16.82",
@@ -42,6 +42,7 @@
     "graphviz-wasm": "3.0.2",
     "lodash.throttle": "^4.1.1",
     "lz4js": "^0.2.0",
+    "nuqs": "^2.4.1",
     "react": "18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-contexify": "^6.0.0",
@@ -88,5 +89,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "da48a5951aeae6ef6a314839a223522d651e8910"
+  "gitHead": "aa4600b30ab13936a71c00552b3685fa7955f4d2"
 }

package/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts

@@ -12,9 +12,10 @@
 // limitations under the License.
 
 import {Table} from '@uwdata/flechette';
+import {useQueryState} from 'nuqs';
 
 import {QueryRequest_ReportType} from '@parca/client';
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext} from '@parca/components';
 
 import {
   FIELD_FUNCTION_FILE_NAME,
@@ -30,6 +31,8 @@ import {
 import {arrowToString} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../ProfileSource';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
+import {stringParam} from '../../hooks/urlParsers';
+import {useDashboardItems} from '../../hooks/useDashboardItems';
 import {useQuery} from '../../useQuery';
 
 interface Props {
@@ -107,28 +110,23 @@ export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaIn
     ])
     .filter(value => value[1] !== '') as Array<[string, string]>;
 
-  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
+  const {dashboardItems, setDashboardItems} = useDashboardItems();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedBuildId, setSourceBuildId] = useURLState('source_buildid');
+  const [_unusedBuildId, setSourceBuildId] = useQueryState('source_buildid', stringParam);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedFilename, setSourceFilename] = useURLState('source_filename');
+  const [_unusedFilename, setSourceFilename] = useQueryState('source_filename', stringParam);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [unusedLine, setSourceLine] = useURLState('source_line');
+  const [_unusedLine, setSourceLine] = useQueryState('source_line', stringParam);
 
   const openFile = (): void => {
     setDashboardItems([dashboardItems[0], 'source']);
     if (mappingBuildID != null) {
-      setSourceBuildId(mappingBuildID);
+      void setSourceBuildId(mappingBuildID);
     }
 
-    setSourceFilename(functionFilename);
+    void setSourceFilename(functionFilename);
     if (lineNumber !== undefined) {
-      setSourceLine(lineNumber.toString());
+      void setSourceLine(lineNumber.toString());
     }
   };
 

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -14,7 +14,6 @@
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {QueryServiceClient} from '@parca/client';
-import {useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import type {NavigateFunction} from '@parca/utilities';
@@ -34,7 +33,6 @@ const ProfileExplorerCompare = ({
   navigateTo,
 }: ProfileExplorerCompareProps): JSX.Element => {
   const [showMetricsGraph, setShowMetricsGraph] = useState(true);
-  const batchUpdates = useURLStateBatch();
   const {closeCompareMode, isCompareMode, isCompareAbsolute} = useCompareModeMeta();
 
   // Read ProfileSource states from URL for both sides
@@ -65,12 +63,17 @@ const ProfileExplorerCompare = ({
     }
 
     if (querySelectionB.expression === '' && querySelectionA.expression !== '') {
-      batchUpdates(() => {
-        setDraftExpressionB(querySelectionA.expression);
-        setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
-        // Commit to update the URL and trigger metrics graph load
-        commitDraftB();
-      });
+      setDraftExpressionB(querySelectionA.expression);
+      setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
+      // Commit with explicit values since draft useState hasn't applied yet
+      commitDraftB(
+        {
+          from: querySelectionA.from,
+          to: querySelectionA.to,
+          timeSelection: querySelectionA.timeSelection,
+        },
+        querySelectionA.expression
+      );
     }
   }, [
     isCompareMode,
@@ -82,7 +85,6 @@ const ProfileExplorerCompare = ({
     setDraftExpressionB,
     setDraftTimeRangeB,
     commitDraftB,
-    batchUpdates,
   ]);
 
   const closeProfileA = useCallback((): void => {

package/src/ProfileFlameChart/SamplesStrips/index.tsx

@@ -39,10 +39,10 @@ interface Props {
   loading?: boolean;
   cpus: LabelSet[];
   data: DataPoint[][];
-  selectedTimeframe?: {
+  selectedTimeframe: {
     labels: LabelSet;
     bounds: NumberDuo;
-  };
+  } | null;
   onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
   width?: number;
   bounds: NumberDuo;