@parca/profile 0.19.142 → 0.19.143

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.19.143 (2026-04-16)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.142](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.141...@parca/profile@0.19.142) (2026-04-13)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAqBxC,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB,GAAI,gBAAc,KAAK,KAAG,wBA8F7D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAwBxC,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB,GAAI,gBAAc,KAAK,KAAG,wBAyF7D,CAAC"}

package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.js

@@ -17,11 +17,14 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+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, FIELD_FUNCTION_START_LINE, FIELD_FUNCTION_SYSTEM_NAME, FIELD_INLINED, FIELD_LOCATION_ADDRESS, FIELD_LOCATION_LINE, FIELD_MAPPING_BUILD_ID, FIELD_MAPPING_FILE, FIELD_TIMESTAMP } from '../../ProfileFlameGraph/FlameGraphArrow';
 import { arrowToString } from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
+import { stringParam } from '../../hooks/urlParsers';
+import { useDashboardItems } from '../../hooks/useDashboardItems';
 import { useQuery } from '../../useQuery';
 export var useGraphTooltipMetaInfo = function useGraphTooltipMetaInfo(_ref) {
   var _table$getChild, _table$getChild2, _table$getChild$get, _table$getChild3, _table$getChild4, _table$getChild$get2, _table$getChild5, _arrowToString, _table$getChild6, _arrowToString2, _table$getChild7, _table$getChild$get3, _table$getChild8, _table$getChild9;
@@ -70,38 +73,29 @@ export var useGraphTooltipMetaInfo = function useGraphTooltipMetaInfo(_ref) {
   }).filter(function (value) {
     return value[1] !== '';
   });
-  var _useURLState = useURLState('dashboard_items', {
-      alwaysReturnArray: true
-    }),
-    _useURLState2 = _slicedToArray(_useURLState, 2),
-    dashboardItems = _useURLState2[0],
-    setDashboardItems = _useURLState2[1];
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  var _useURLState3 = useURLState('source_buildid'),
-    _useURLState4 = _slicedToArray(_useURLState3, 2),
-    unusedBuildId = _useURLState4[0],
-    setSourceBuildId = _useURLState4[1];
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  var _useURLState5 = useURLState('source_filename'),
-    _useURLState6 = _slicedToArray(_useURLState5, 2),
-    unusedFilename = _useURLState6[0],
-    setSourceFilename = _useURLState6[1];
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  var _useURLState7 = useURLState('source_line'),
-    _useURLState8 = _slicedToArray(_useURLState7, 2),
-    unusedLine = _useURLState8[0],
-    setSourceLine = _useURLState8[1];
+  var _useDashboardItems = useDashboardItems(),
+    dashboardItems = _useDashboardItems.dashboardItems,
+    setDashboardItems = _useDashboardItems.setDashboardItems;
+  var _useQueryState = useQueryState('source_buildid', stringParam),
+    _useQueryState2 = _slicedToArray(_useQueryState, 2),
+    _unusedBuildId = _useQueryState2[0],
+    setSourceBuildId = _useQueryState2[1];
+  var _useQueryState3 = useQueryState('source_filename', stringParam),
+    _useQueryState4 = _slicedToArray(_useQueryState3, 2),
+    _unusedFilename = _useQueryState4[0],
+    setSourceFilename = _useQueryState4[1];
+  var _useQueryState5 = useQueryState('source_line', stringParam),
+    _useQueryState6 = _slicedToArray(_useQueryState5, 2),
+    _unusedLine = _useQueryState6[0],
+    setSourceLine = _useQueryState6[1];
   var openFile = function openFile() {
     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());
     }
   };
   return {

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAOvD,UAAU,2BAA2B;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,sBAAsB,GAAI,8BAG7B,2BAA2B,KAAG,GAAG,CAAC,OAmHpC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ProfileExplorerCompare.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/ProfileExplorerCompare.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAOvD,UAAU,2BAA2B;IACnC,WAAW,EAAE,kBAAkB,CAAC;IAChC,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,QAAA,MAAM,sBAAsB,GAAI,8BAG7B,2BAA2B,KAAG,GAAG,CAAC,OAsHpC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -25,7 +25,6 @@ import { c as _c } from "react-compiler-runtime";
 // limitations under the License.
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useURLStateBatch } from '@parca/components';
 import { Query } from '@parca/parser';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { ProfileDiffSource, ProfileViewWithData } from '..';
@@ -34,14 +33,13 @@ import { useCompareModeMeta } from '../hooks/useCompareModeMeta';
 import { useQueryState } from '../hooks/useQueryState';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var ProfileExplorerCompare = function ProfileExplorerCompare(t0) {
-  var $ = _c(45);
+  var $ = _c(44);
   var queryClient = t0.queryClient,
     navigateTo = t0.navigateTo;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     showMetricsGraph = _useState2[0],
     setShowMetricsGraph = _useState2[1];
-  var batchUpdates = useURLStateBatch();
   var _useCompareModeMeta = useCompareModeMeta(),
     closeCompareMode = _useCompareModeMeta.closeCompareMode,
     isCompareMode = _useCompareModeMeta.isCompareMode,
@@ -86,75 +84,76 @@ var ProfileExplorerCompare = function ProfileExplorerCompare(t0) {
   var enforcedProfileNameA = t3;
   var t4;
   var t5;
-  if ($[4] !== batchUpdates || $[5] !== commitDraftB || $[6] !== isCompareMode || $[7] !== querySelectionA.expression || $[8] !== querySelectionA.from || $[9] !== querySelectionA.timeSelection || $[10] !== querySelectionA.to || $[11] !== querySelectionB.expression || $[12] !== setDraftExpressionB || $[13] !== setDraftTimeRangeB) {
+  if ($[4] !== commitDraftB || $[5] !== isCompareMode || $[6] !== querySelectionA.expression || $[7] !== querySelectionA.from || $[8] !== querySelectionA.timeSelection || $[9] !== querySelectionA.to || $[10] !== querySelectionB.expression || $[11] !== setDraftExpressionB || $[12] !== setDraftTimeRangeB) {
     t4 = function t4() {
       if (!isCompareMode) {
         return;
       }
       if (querySelectionB.expression === "" && querySelectionA.expression !== "") {
-        batchUpdates(function () {
-          setDraftExpressionB(querySelectionA.expression);
-          setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
-          commitDraftB();
-        });
+        setDraftExpressionB(querySelectionA.expression);
+        setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
+        commitDraftB({
+          from: querySelectionA.from,
+          to: querySelectionA.to,
+          timeSelection: querySelectionA.timeSelection
+        }, querySelectionA.expression);
       }
     };
-    t5 = [isCompareMode, querySelectionA.expression, querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection, querySelectionB.expression, setDraftExpressionB, setDraftTimeRangeB, commitDraftB, batchUpdates];
-    $[4] = batchUpdates;
-    $[5] = commitDraftB;
-    $[6] = isCompareMode;
-    $[7] = querySelectionA.expression;
-    $[8] = querySelectionA.from;
-    $[9] = querySelectionA.timeSelection;
-    $[10] = querySelectionA.to;
-    $[11] = querySelectionB.expression;
-    $[12] = setDraftExpressionB;
-    $[13] = setDraftTimeRangeB;
-    $[14] = t4;
-    $[15] = t5;
+    t5 = [isCompareMode, querySelectionA.expression, querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection, querySelectionB.expression, setDraftExpressionB, setDraftTimeRangeB, commitDraftB];
+    $[4] = commitDraftB;
+    $[5] = isCompareMode;
+    $[6] = querySelectionA.expression;
+    $[7] = querySelectionA.from;
+    $[8] = querySelectionA.timeSelection;
+    $[9] = querySelectionA.to;
+    $[10] = querySelectionB.expression;
+    $[11] = setDraftExpressionB;
+    $[12] = setDraftTimeRangeB;
+    $[13] = t4;
+    $[14] = t5;
   } else {
-    t4 = $[14];
-    t5 = $[15];
+    t4 = $[13];
+    t5 = $[14];
   }
   useEffect(t4, t5);
   var t6;
-  if ($[16] !== closeCompareMode) {
+  if ($[15] !== closeCompareMode) {
     t6 = function t6() {
       closeCompareMode("A");
     };
-    $[16] = closeCompareMode;
-    $[17] = t6;
+    $[15] = closeCompareMode;
+    $[16] = t6;
   } else {
-    t6 = $[17];
+    t6 = $[16];
   }
   var closeProfileA = t6;
   var t7;
-  if ($[18] !== closeCompareMode) {
+  if ($[17] !== closeCompareMode) {
     t7 = function t7() {
       closeCompareMode("B");
     };
-    $[18] = closeCompareMode;
-    $[19] = t7;
+    $[17] = closeCompareMode;
+    $[18] = t7;
   } else {
-    t7 = $[19];
+    t7 = $[18];
   }
   var closeProfileB = t7;
   var t8;
-  if ($[20] === Symbol["for"]("react.memo_cache_sentinel")) {
+  if ($[19] === Symbol["for"]("react.memo_cache_sentinel")) {
     t8 = testId(TEST_IDS.COMPARE_CONTAINER);
-    $[20] = t8;
+    $[19] = t8;
   } else {
-    t8 = $[20];
+    t8 = $[19];
   }
   var t9;
-  if ($[21] === Symbol["for"]("react.memo_cache_sentinel")) {
+  if ($[20] === Symbol["for"]("react.memo_cache_sentinel")) {
     t9 = testId(TEST_IDS.COMPARE_SIDE_A);
-    $[21] = t9;
+    $[20] = t9;
   } else {
-    t9 = $[21];
+    t9 = $[20];
   }
   var t10;
-  if ($[22] !== closeProfileA || $[23] !== navigateTo || $[24] !== queryClient || $[25] !== showMetricsGraph) {
+  if ($[21] !== closeProfileA || $[22] !== navigateTo || $[23] !== queryClient || $[24] !== showMetricsGraph) {
     t10 = /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
       className: "flex-column flex-1 p-2 shadow-md rounded-md"
     }, t9), {}, {
@@ -169,23 +168,23 @@ var ProfileExplorerCompare = function ProfileExplorerCompare(t0) {
         setDisplayHideMetricsGraphButton: setShowMetricsGraph
       })
     }));
-    $[22] = closeProfileA;
-    $[23] = navigateTo;
-    $[24] = queryClient;
-    $[25] = showMetricsGraph;
-    $[26] = t10;
+    $[21] = closeProfileA;
+    $[22] = navigateTo;
+    $[23] = queryClient;
+    $[24] = showMetricsGraph;
+    $[25] = t10;
   } else {
-    t10 = $[26];
+    t10 = $[25];
   }
   var t11;
-  if ($[27] === Symbol["for"]("react.memo_cache_sentinel")) {
+  if ($[26] === Symbol["for"]("react.memo_cache_sentinel")) {
     t11 = testId(TEST_IDS.COMPARE_SIDE_B);
-    $[27] = t11;
+    $[26] = t11;
   } else {
-    t11 = $[27];
+    t11 = $[26];
   }
   var t12;
-  if ($[28] !== closeProfileB || $[29] !== enforcedProfileNameA || $[30] !== navigateTo || $[31] !== queryClient || $[32] !== showMetricsGraph) {
+  if ($[27] !== closeProfileB || $[28] !== enforcedProfileNameA || $[29] !== navigateTo || $[30] !== queryClient || $[31] !== showMetricsGraph) {
     t12 = /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
       className: "flex-column flex-1 p-2 shadow-md rounded-md"
     }, t11), {}, {
@@ -200,29 +199,29 @@ var ProfileExplorerCompare = function ProfileExplorerCompare(t0) {
         setDisplayHideMetricsGraphButton: setShowMetricsGraph
       })
     }));
-    $[28] = closeProfileB;
-    $[29] = enforcedProfileNameA;
-    $[30] = navigateTo;
-    $[31] = queryClient;
-    $[32] = showMetricsGraph;
-    $[33] = t12;
+    $[27] = closeProfileB;
+    $[28] = enforcedProfileNameA;
+    $[29] = navigateTo;
+    $[30] = queryClient;
+    $[31] = showMetricsGraph;
+    $[32] = t12;
   } else {
-    t12 = $[33];
+    t12 = $[32];
   }
   var t13;
-  if ($[34] !== t10 || $[35] !== t12) {
+  if ($[33] !== t10 || $[34] !== t12) {
     t13 = /*#__PURE__*/_jsxs("div", {
       className: "flex justify-between gap-2 relative mb-2",
       children: [t10, t12]
     });
-    $[34] = t10;
-    $[35] = t12;
-    $[36] = t13;
+    $[33] = t10;
+    $[34] = t12;
+    $[35] = t13;
   } else {
-    t13 = $[36];
+    t13 = $[35];
   }
   var t14;
-  if ($[37] !== isCompareAbsolute || $[38] !== profileSourceA || $[39] !== profileSourceB || $[40] !== queryClient) {
+  if ($[36] !== isCompareAbsolute || $[37] !== profileSourceA || $[38] !== profileSourceB || $[39] !== queryClient) {
     t14 = /*#__PURE__*/_jsx("div", {
       className: "grid grid-cols-1",
       children: profileSourceA != null && profileSourceB != null ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, testId(TEST_IDS.COMPARE_PROFILE_VIEW)), {}, {
@@ -239,24 +238,24 @@ var ProfileExplorerCompare = function ProfileExplorerCompare(t0) {
         })
       })
     });
-    $[37] = isCompareAbsolute;
-    $[38] = profileSourceA;
-    $[39] = profileSourceB;
-    $[40] = queryClient;
-    $[41] = t14;
+    $[36] = isCompareAbsolute;
+    $[37] = profileSourceA;
+    $[38] = profileSourceB;
+    $[39] = queryClient;
+    $[40] = t14;
   } else {
-    t14 = $[41];
+    t14 = $[40];
   }
   var t15;
-  if ($[42] !== t13 || $[43] !== t14) {
+  if ($[41] !== t13 || $[42] !== t14) {
     t15 = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, t8), {}, {
       children: [t13, t14]
     }));
-    $[42] = t13;
-    $[43] = t14;
-    $[44] = t15;
+    $[41] = t13;
+    $[42] = t14;
+    $[43] = t15;
   } else {
-    t15 = $[44];
+    t15 = $[43];
   }
   return t15;
 };

package/dist/ProfileFlameChart/SamplesStrips/index.d.ts

@@ -6,10 +6,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;

package/dist/ProfileFlameChart/SamplesStrips/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAmID,eAAO,MAAM,YAAY,GAAI,yFAS1B,KAAK,KAAG,GAAG,CAAC,OAyKd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameChart/SamplesStrips/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAIvC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,SAAS,EAAe,MAAM,gBAAgB,CAAC;AAGvD,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,EAAE;QACjB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,GAAG,IAAI,CAAC;IACT,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAmID,eAAO,MAAM,YAAY,GAAI,yFAS1B,KAAK,KAAG,GAAG,CAAC,OAyKd,CAAC"}

package/dist/ProfileFlameChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAQpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAa,MAAM,kBAAkB,CAAC;AAEhF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AA4CpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AA+BD,eAAO,MAAM,iBAAiB,GAAI,kKAY/B,sBAAsB,KAAG,GAAG,CAAC,OAqM/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAa,MAAM,kBAAkB,CAAC;AAEhF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AAuCpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AA+BD,eAAO,MAAM,iBAAiB,GAAI,kKAY/B,sBAAsB,KAAG,GAAG,CAAC,OAuM/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameChart/index.js

@@ -29,22 +29,21 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // limitations under the License.
 
 import { useEffect, useMemo, useRef } from 'react';
+import { createParser, useQueryState } from 'nuqs';
 import { QueryRequest_ReportType } from '@parca/client';
-import { Button, useParcaContext, useURLState, useURLStateCustom } from '@parca/components';
+import { Button, useParcaContext } from '@parca/components';
 import { Matcher, MatcherTypes, Query } from '@parca/parser';
 import { TimeUnits, formatDate, formatDuration } from '@parca/utilities';
 import ProfileFlameGraph, { validateFlameChartQuery } from '../ProfileFlameGraph';
 import { boundsFromProfileSource } from '../ProfileFlameGraph/FlameGraphArrow/utils';
 import { MergedProfileSource, timeFormat } from '../ProfileSource';
 import { useProfileFilters } from '../ProfileView/components/ProfileFilters/useProfileFilters';
+import { flamechartDimensionParser } from '../hooks/urlParsers';
 import { useQuery } from '../useQuery';
 import { SamplesStrip } from './SamplesStrips';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var TimeframeStateSerializer = {
+var timeframeParser = createParser({
   parse: function parse(value) {
-    if (value == null || value === '' || value === 'undefined' || Array.isArray(value)) {
-      return undefined;
-    }
     try {
       var _value$split = value.split('|'),
         _value$split2 = _slicedToArray(_value$split, 2),
@@ -77,18 +76,17 @@ var TimeframeStateSerializer = {
     } catch (_unused) {
       // Ignore parsing errors
     }
-    return undefined;
+    return null;
   },
-  stringify: function stringify(value) {
-    if (value == null) {
-      return '';
-    }
+  serialize: function serialize(value) {
     var labelsStr = value.labels.labels.map(function (l) {
       return "".concat(l.name, ":").concat(l.value);
     }).join(',');
     return "".concat(labelsStr, "|").concat(value.bounds[0], ",").concat(value.bounds[1]);
   }
-};
+}).withOptions({
+  history: 'replace'
+});
 // Helper to create a filtered profile source with narrowed time bounds
 // and dimension label matchers from the selected strip.
 var createFilteredProfileSource = function createFilteredProfileSource(profileSource, selectedTimeframe) {
@@ -125,17 +123,15 @@ export var ProfileFlameChart = function ProfileFlameChart(_ref) {
   var _useProfileFilters = useProfileFilters(),
     protoFilters = _useProfileFilters.protoFilters;
   var zoomControlsRef = useRef(null);
-  var _useURLStateCustom = useURLStateCustom('flamechart_timeframe', TimeframeStateSerializer),
-    _useURLStateCustom2 = _slicedToArray(_useURLStateCustom, 2),
-    selectedTimeframe = _useURLStateCustom2[0],
-    setSelectedTimeframe = _useURLStateCustom2[1];
+  var _useQueryState = useQueryState('flamechart_timeframe', timeframeParser),
+    _useQueryState2 = _slicedToArray(_useQueryState, 2),
+    selectedTimeframe = _useQueryState2[0],
+    setSelectedTimeframe = _useQueryState2[1];
 
   // Read flamechart dimension from URL state to detect changes
-  var _useURLState = useURLState('flamechart_dimension', {
-      alwaysReturnArray: true
-    }),
-    _useURLState2 = _slicedToArray(_useURLState, 1),
-    flamechartDimension = _useURLState2[0];
+  var _useQueryState3 = useQueryState('flamechart_dimension', flamechartDimensionParser.withDefault([])),
+    _useQueryState4 = _slicedToArray(_useQueryState3, 1),
+    flamechartDimension = _useQueryState4[0];
 
   // Reset selection when the parent time range (profileSource) changes
   var timeBoundsKey = boundsFromProfileSource(profileSource).join(',');
@@ -143,7 +139,7 @@ export var ProfileFlameChart = function ProfileFlameChart(_ref) {
   useEffect(function () {
     if (prevTimeBoundsKey.current !== timeBoundsKey) {
       prevTimeBoundsKey.current = timeBoundsKey;
-      setSelectedTimeframe(undefined);
+      void setSelectedTimeframe(null);
     }
   }, [timeBoundsKey, setSelectedTimeframe]);
 
@@ -153,16 +149,16 @@ export var ProfileFlameChart = function ProfileFlameChart(_ref) {
   useEffect(function () {
     if (prevDimensionKey.current !== dimensionKey) {
       prevDimensionKey.current = dimensionKey;
-      setSelectedTimeframe(undefined);
+      void setSelectedTimeframe(null);
     }
   }, [dimensionKey, setSelectedTimeframe]);
 
   // Handle timeframe selection from strips
   var handleSelectedTimeframe = function handleSelectedTimeframe(labels, bounds) {
     if (bounds === undefined) {
-      setSelectedTimeframe(undefined);
+      void setSelectedTimeframe(null);
     } else {
-      setSelectedTimeframe({
+      void setSelectedTimeframe({
         labels: labels,
         bounds: bounds
       });

package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAOxC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,kIAalB,gBAAgB,KAAG,GAAG,CAAC,OAyOzB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAQxC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAU1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,GAAI,kIAalB,gBAAgB,KAAG,GAAG,CAAC,OAuOzB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenu.js

@@ -23,14 +23,17 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
+import { useQueryState } from 'nuqs';
 import { Item, Menu, Separator, Submenu } from 'react-contexify';
 import { Tooltip } from 'react-tooltip';
-import { useParcaContext, useURLState } from '@parca/components';
+import { useParcaContext } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { TEST_IDS } from '@parca/test-utils';
 import { getLastItem } from '@parca/utilities';
 import { useGraphTooltip } from '../../GraphTooltipArrow/useGraphTooltip';
 import { useGraphTooltipMetaInfo } from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
+import { stringParam } from '../../hooks/urlParsers';
+import { useDashboardItems } from '../../hooks/useDashboardItems';
 import { hexifyAddress, truncateString } from '../../utils';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var ContextMenu = function ContextMenu(_ref) {
@@ -79,17 +82,13 @@ var ContextMenu = function ContextMenu(_ref) {
     mappingFile = _useGraphTooltipMetaI.mappingFile,
     mappingBuildID = _useGraphTooltipMetaI.mappingBuildID,
     inlined = _useGraphTooltipMetaI.inlined;
-  var _useURLState = useURLState('dashboard_items', {
-      alwaysReturnArray: true
-    }),
-    _useURLState2 = _slicedToArray(_useURLState, 2),
-    dashboardItems = _useURLState2[0],
-    setDashboardItems = _useURLState2[1];
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  var _useURLState3 = useURLState('sandwich_function_name'),
-    _useURLState4 = _slicedToArray(_useURLState3, 2),
-    sandwichFunctionName = _useURLState4[0],
-    setSandwichFunctionName = _useURLState4[1];
+  var _useDashboardItems = useDashboardItems(),
+    dashboardItems = _useDashboardItems.dashboardItems,
+    setDashboardItems = _useDashboardItems.setDashboardItems;
+  var _useQueryState = useQueryState('sandwich_function_name', stringParam),
+    _useQueryState2 = _slicedToArray(_useQueryState, 2),
+    _sandwichFunctionName = _useQueryState2[0],
+    setSandwichFunctionName = _useQueryState2[1];
   if (contextMenuData === null) {
     return /*#__PURE__*/_jsx(_Fragment, {});
   }
@@ -195,11 +194,11 @@ var ContextMenu = function ContextMenu(_ref) {
           return;
         }
         if (dashboardItems.includes('sandwich')) {
-          setSandwichFunctionName(functionName);
+          void setSandwichFunctionName(functionName);
           hideMenu();
           return;
         }
-        setSandwichFunctionName(functionName);
+        void setSandwichFunctionName(functionName);
         setDashboardItems([].concat(_toConsumableArray(dashboardItems), ['sandwich']));
         hideMenu();
       },

package/dist/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextWithEllipsis.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx"],"names":[],"mappings":"AAmBA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AA2CD,iBAAS,gBAAgB,CAAC,EAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwBjE;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TextWithEllipsis.d.ts","sourceRoot":"","sources":["../../../src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx"],"names":[],"mappings":"AAqBA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AA2CD,iBAAS,gBAAgB,CAAC,EAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAwBjE;AAED,eAAe,gBAAgB,CAAC"}

package/dist/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.js

@@ -20,7 +20,8 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 /* eslint-disable react-hooks/set-state-in-effect */
 
 import { useEffect, useRef, useState } from 'react';
-import { useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
+import { stringParam } from '../../hooks/urlParsers';
 import { jsx as _jsx } from "react/jsx-runtime";
 function calculateTruncatedText(text, textElement, maxWidth) {
   var _textElement$parentEl, _textElement$parentEl3;
@@ -68,10 +69,10 @@ function TextWithEllipsis(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     displayText = _useState2[0],
     setDisplayText = _useState2[1];
-  var _useURLState = useURLState('align_function_name'),
-    _useURLState2 = _slicedToArray(_useURLState, 1),
-    alignFunctionName = _useURLState2[0];
-  var showFunctionNameFromLeft = alignFunctionName === 'left' || alignFunctionName === undefined;
+  var _useQueryState = useQueryState('align_function_name', stringParam.withDefault('left')),
+    _useQueryState2 = _slicedToArray(_useQueryState, 1),
+    alignFunctionName = _useQueryState2[0];
+  var showFunctionNameFromLeft = alignFunctionName === 'left';
   useEffect(function () {
     var textElement = textRef.current;
     if (textElement === null) return;

package/dist/ProfileFlameGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAO9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AAIzD,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC1D;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAKpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,sRAqBzD,sBAAsB,KAAG,GAAG,CAAC,OAiT/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAO7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAOpE,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AAIzD,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC1D;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAKpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,sRAqBzD,sBAAsB,KAAG,GAAG,CAAC,OAiT/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameGraph/index.js

@@ -27,14 +27,16 @@ import { c as _c } from "react-compiler-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useQueryState } from 'nuqs';
 import { useMeasure } from 'react-use';
-import { FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
+import { FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { capitalizeOnlyFirstLetter, divide } from '@parca/utilities';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
 import { useProfileMetadata } from '../ProfileView/hooks/useProfileMetadata';
 import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
+import { boolParam } from '../hooks/urlParsers';
 import { FlameGraphArrow } from './FlameGraphArrow';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var numberFormatter = new Intl.NumberFormat('en-US');
@@ -135,11 +137,10 @@ var ProfileFlameGraph = function ProfileFlameGraphNonMemo(_ref) {
   // By default, we want delta profiles (CPU) to be relatively compared.
   // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
   var compareAbsoluteDefault = (profileType === null || profileType === void 0 ? void 0 : profileType.delta) === false ? 'true' : 'false';
-  var _useURLState = useURLState('compare_absolute'),
-    _useURLState2 = _slicedToArray(_useURLState, 1),
-    _useURLState2$ = _useURLState2[0],
-    compareAbsolute = _useURLState2$ === void 0 ? compareAbsoluteDefault : _useURLState2$;
-  var isCompareAbsolute = compareAbsolute === 'true';
+  var _useQueryState = useQueryState('compare_absolute', boolParam),
+    _useQueryState2 = _slicedToArray(_useQueryState, 1),
+    compareAbsolute = _useQueryState2[0];
+  var isCompareAbsolute = compareAbsolute !== null && compareAbsolute !== void 0 ? compareAbsolute : compareAbsoluteDefault === 'true';
   var mappingsListCount = useMemo(function () {
     return mappingsList.filter(function (m) {
       return m !== '';
@@ -169,7 +170,7 @@ var ProfileFlameGraph = function ProfileFlameGraphNonMemo(_ref) {
   // If there is only one mapping file, we want to color by filename by default.
   useEffect(function () {
     if (mappingsListCount === 1 && colorBy !== 'filename') {
-      setColorBy('filename');
+      void setColorBy('filename');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mappingsListCount]);