@parca/profile 0.19.142 → 0.19.144

package/dist/ProfileView/hooks/useVisualizationState.d.ts

@@ -2,7 +2,7 @@ import { CurrentPathFrame } from '../../ProfileFlameGraph/FlameGraphArrow/utils'
 export declare const useVisualizationState: () => {
     curPathArrow: CurrentPathFrame[];
     setCurPathArrow: (path: CurrentPathFrame[]) => void;
-    colorStackLegend: string | undefined;
+    colorStackLegend: string | null;
     colorBy: string;
     setColorBy: (colorBy: string) => void;
     groupBy: string[];
@@ -11,8 +11,8 @@ export declare const useVisualizationState: () => {
     setGroupByLabels: (labels: string[]) => void;
     flamechartDimension: string[];
     setFlamechartDimension: (labels: string[]) => void;
-    sandwichFunctionName: string | undefined;
-    setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
+    sandwichFunctionName: string | null;
+    setSandwichFunctionName: (sandwichFunctionName: string | null) => void;
     resetSandwichFunctionName: () => void;
     alignFunctionName: string;
     setAlignFunctionName: (align: string) => void;

package/dist/ProfileView/hooks/useVisualizationState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAG/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAgI/C,CAAC"}
+{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AA0BA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAU/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,sBAAsB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvE,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAsH/C,CAAC"}

package/dist/ProfileView/hooks/useVisualizationState.js

@@ -23,100 +23,90 @@ import { c as _c } from "react-compiler-runtime";
 // limitations under the License.
 
 import { useCallback, useMemo } from 'react';
-import { JSONParser, JSONSerializer, useURLState, useURLStateBatch, useURLStateCustom } from '@parca/components';
+import { useQueryState } from 'nuqs';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
 import { FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_LABELS, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE } from '../../ProfileFlameGraph/FlameGraphArrow';
+import { flamechartDimensionParser, groupByParser, jsonParser, stringParam } from '../../hooks/urlParsers';
+import { useColorBy } from '../../hooks/useColorBy';
 import { useResetFlameGraphState } from './useResetFlameGraphState';
 export var useVisualizationState = function useVisualizationState() {
-  var _ref, _ref2;
-  var $ = _c(47);
-  var _useUserPreference = useUserPreference(USER_PREFERENCES.COLOR_BY.key),
+  var _ref;
+  var $ = _c(42);
+  var _useUserPreference = useUserPreference(USER_PREFERENCES.ALIGN_FUNCTION_NAME.key),
     _useUserPreference2 = _slicedToArray(_useUserPreference, 2),
-    colorByPreference = _useUserPreference2[0],
-    setColorByPreference = _useUserPreference2[1];
-  var _useUserPreference3 = useUserPreference(USER_PREFERENCES.ALIGN_FUNCTION_NAME.key),
-    _useUserPreference4 = _slicedToArray(_useUserPreference3, 2),
-    alignFunctionNamePreference = _useUserPreference4[0],
-    setAlignFunctionNamePreference = _useUserPreference4[1];
+    alignFunctionNamePreference = _useUserPreference2[0],
+    setAlignFunctionNamePreference = _useUserPreference2[1];
   var t0;
   if ($[0] === Symbol["for"]("react.memo_cache_sentinel")) {
-    t0 = {
-      parse: JSONParser,
-      stringify: JSONSerializer,
-      defaultValue: "[]"
-    };
+    t0 = jsonParser().withDefault([]);
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  var _useURLStateCustom = useURLStateCustom("cur_path", t0),
-    _useURLStateCustom2 = _slicedToArray(_useURLStateCustom, 2),
-    curPathArrow = _useURLStateCustom2[0],
-    setCurPathArrow = _useURLStateCustom2[1];
-  var _useURLState = useURLState("color_stack_legend"),
-    _useURLState2 = _slicedToArray(_useURLState, 1),
-    colorStackLegend = _useURLState2[0];
+  var _useQueryState = useQueryState("cur_path", t0),
+    _useQueryState2 = _slicedToArray(_useQueryState, 2),
+    curPathArrow = _useQueryState2[0],
+    setRawCurPathArrow = _useQueryState2[1];
   var t1;
-  if ($[1] !== colorByPreference) {
-    t1 = {
-      defaultValue: colorByPreference
+  if ($[1] !== setRawCurPathArrow) {
+    t1 = function t1(path) {
+      setRawCurPathArrow(path);
     };
-    $[1] = colorByPreference;
+    $[1] = setRawCurPathArrow;
     $[2] = t1;
   } else {
     t1 = $[2];
   }
-  var _useURLState3 = useURLState("color_by", t1),
-    _useURLState4 = _slicedToArray(_useURLState3, 2),
-    colorBy = _useURLState4[0],
-    setStoreColorBy = _useURLState4[1];
+  var setCurPathArrow = t1;
+  var _useQueryState3 = useQueryState("color_stack_legend", stringParam),
+    _useQueryState4 = _slicedToArray(_useQueryState3, 1),
+    colorStackLegend = _useQueryState4[0];
+  var _useColorBy = useColorBy(),
+    colorBy = _useColorBy.colorBy,
+    setColorBy = _useColorBy.setColorBy;
+  var _useQueryState5 = useQueryState("align_function_name", stringParam),
+    _useQueryState6 = _slicedToArray(_useQueryState5, 2),
+    alignFunctionNameRaw = _useQueryState6[0],
+    setStoreAlignFunctionName = _useQueryState6[1];
+  var alignFunctionName = (_ref = alignFunctionNameRaw !== null && alignFunctionNameRaw !== void 0 ? alignFunctionNameRaw : alignFunctionNamePreference) !== null && _ref !== void 0 ? _ref : "left";
   var t2;
-  if ($[3] !== alignFunctionNamePreference) {
-    t2 = {
-      defaultValue: alignFunctionNamePreference
-    };
-    $[3] = alignFunctionNamePreference;
-    $[4] = t2;
+  if ($[3] === Symbol["for"]("react.memo_cache_sentinel")) {
+    t2 = groupByParser.withDefault([FIELD_FUNCTION_NAME]);
+    $[3] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[3];
   }
-  var _useURLState5 = useURLState("align_function_name", t2),
-    _useURLState6 = _slicedToArray(_useURLState5, 2),
-    alignFunctionName = _useURLState6[0],
-    setStoreAlignFunctionName = _useURLState6[1];
+  var _useQueryState7 = useQueryState("group_by", t2),
+    _useQueryState8 = _slicedToArray(_useQueryState7, 2),
+    groupBy = _useQueryState8[0],
+    setStoreGroupBy = _useQueryState8[1];
+  var _useQueryState9 = useQueryState("sandwich_function_name", stringParam),
+    _useQueryState0 = _slicedToArray(_useQueryState9, 2),
+    sandwichFunctionName = _useQueryState0[0],
+    setRawSandwichFunctionName = _useQueryState0[1];
   var t3;
-  if ($[5] === Symbol["for"]("react.memo_cache_sentinel")) {
-    t3 = {
-      defaultValue: [FIELD_FUNCTION_NAME],
-      alwaysReturnArray: true
+  if ($[4] !== setRawSandwichFunctionName) {
+    t3 = function t3(name) {
+      setRawSandwichFunctionName(name);
     };
+    $[4] = setRawSandwichFunctionName;
     $[5] = t3;
   } else {
     t3 = $[5];
   }
-  var _useURLState7 = useURLState("group_by", t3),
-    _useURLState8 = _slicedToArray(_useURLState7, 2),
-    groupBy = _useURLState8[0],
-    setStoreGroupBy = _useURLState8[1];
-  var _useURLState9 = useURLState("sandwich_function_name"),
-    _useURLState0 = _slicedToArray(_useURLState9, 2),
-    sandwichFunctionName = _useURLState0[0],
-    setSandwichFunctionName = _useURLState0[1];
+  var setSandwichFunctionName = t3;
   var t4;
   if ($[6] === Symbol["for"]("react.memo_cache_sentinel")) {
-    t4 = {
-      alwaysReturnArray: true
-    };
+    t4 = flamechartDimensionParser.withDefault([]);
     $[6] = t4;
   } else {
     t4 = $[6];
   }
-  var _useURLState1 = useURLState("flamechart_dimension", t4),
-    _useURLState10 = _slicedToArray(_useURLState1, 2),
-    flamechartDimension = _useURLState10[0],
-    setStoreFlamechartDimension = _useURLState10[1];
+  var _useQueryState1 = useQueryState("flamechart_dimension", t4),
+    _useQueryState10 = _slicedToArray(_useQueryState1, 2),
+    flamechartDimension = _useQueryState10[0],
+    setStoreFlamechartDimension = _useQueryState10[1];
   var resetFlameGraphState = useResetFlameGraphState();
-  var batchUpdates = useURLStateBatch();
   var t5;
   if ($[7] === Symbol["for"]("react.memo_cache_sentinel")) {
     t5 = [FIELD_FUNCTION_NAME, FIELD_FUNCTION_FILE_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE];
@@ -137,105 +127,84 @@ export var useVisualizationState = function useVisualizationState() {
   }
   var setGroupBy = t6;
   var t7;
-  if ($[10] !== batchUpdates || $[11] !== groupBy || $[12] !== resetFlameGraphState || $[13] !== setGroupBy) {
+  if ($[10] !== groupBy || $[11] !== resetFlameGraphState || $[12] !== setGroupBy) {
     t7 = function t7(key) {
-      batchUpdates(function () {
-        if (groupBy.includes(key)) {
-          setGroupBy(groupBy.filter(function (v) {
-            return v !== key;
-          }));
-        } else {
-          var filteredGroupBy = groupBy.filter(function (item) {
-            return !levelsOfProfiling.includes(item);
-          });
-          setGroupBy([].concat(_toConsumableArray(filteredGroupBy), [key]));
-        }
-        resetFlameGraphState();
-      });
+      if (groupBy.includes(key)) {
+        setGroupBy(groupBy.filter(function (v) {
+          return v !== key;
+        }));
+      } else {
+        var filteredGroupBy = groupBy.filter(function (item) {
+          return !levelsOfProfiling.includes(item);
+        });
+        setGroupBy([].concat(_toConsumableArray(filteredGroupBy), [key]));
+      }
+      resetFlameGraphState();
     };
-    $[10] = batchUpdates;
-    $[11] = groupBy;
-    $[12] = resetFlameGraphState;
-    $[13] = setGroupBy;
-    $[14] = t7;
+    $[10] = groupBy;
+    $[11] = resetFlameGraphState;
+    $[12] = setGroupBy;
+    $[13] = t7;
   } else {
-    t7 = $[14];
+    t7 = $[13];
   }
   var toggleGroupBy = t7;
   var t8;
-  if ($[15] !== batchUpdates || $[16] !== groupBy || $[17] !== resetFlameGraphState || $[18] !== setGroupBy) {
+  if ($[14] !== groupBy || $[15] !== resetFlameGraphState || $[16] !== setGroupBy) {
     t8 = function t8(labels) {
-      batchUpdates(function () {
-        setGroupBy(groupBy.filter(_temp).concat(labels));
-        resetFlameGraphState();
-      });
+      setGroupBy(groupBy.filter(_temp).concat(labels));
+      resetFlameGraphState();
     };
-    $[15] = batchUpdates;
-    $[16] = groupBy;
-    $[17] = resetFlameGraphState;
-    $[18] = setGroupBy;
-    $[19] = t8;
+    $[14] = groupBy;
+    $[15] = resetFlameGraphState;
+    $[16] = setGroupBy;
+    $[17] = t8;
   } else {
-    t8 = $[19];
+    t8 = $[17];
   }
   var setGroupByLabels = t8;
   var t9;
-  if ($[20] !== setStoreFlamechartDimension) {
+  if ($[18] !== setStoreFlamechartDimension) {
     t9 = function t9(labels_0) {
       setStoreFlamechartDimension(labels_0.filter(_temp2));
     };
-    $[20] = setStoreFlamechartDimension;
-    $[21] = t9;
+    $[18] = setStoreFlamechartDimension;
+    $[19] = t9;
   } else {
-    t9 = $[21];
+    t9 = $[19];
   }
   var setFlamechartDimension = t9;
   var t10;
-  if ($[22] !== setSandwichFunctionName) {
+  if ($[20] !== setSandwichFunctionName) {
     t10 = function t10() {
-      setSandwichFunctionName(undefined);
+      setSandwichFunctionName(null);
     };
-    $[22] = setSandwichFunctionName;
-    $[23] = t10;
+    $[20] = setSandwichFunctionName;
+    $[21] = t10;
   } else {
-    t10 = $[23];
+    t10 = $[21];
   }
   var resetSandwichFunctionName = t10;
   var t11;
-  if ($[24] !== setColorByPreference || $[25] !== setStoreColorBy) {
+  if ($[22] !== setAlignFunctionNamePreference || $[23] !== setStoreAlignFunctionName) {
     t11 = function t11(value) {
-      setStoreColorBy(value);
-      setColorByPreference(value);
+      setStoreAlignFunctionName(value);
+      setAlignFunctionNamePreference(value);
     };
-    $[24] = setColorByPreference;
-    $[25] = setStoreColorBy;
-    $[26] = t11;
+    $[22] = setAlignFunctionNamePreference;
+    $[23] = setStoreAlignFunctionName;
+    $[24] = t11;
   } else {
-    t11 = $[26];
+    t11 = $[24];
   }
-  var setColorBy = t11;
+  var setAlignFunctionName = t11;
   var t12;
-  if ($[27] !== setAlignFunctionNamePreference || $[28] !== setStoreAlignFunctionName) {
-    t12 = function t12(value_0) {
-      setStoreAlignFunctionName(value_0);
-      setAlignFunctionNamePreference(value_0);
-    };
-    $[27] = setAlignFunctionNamePreference;
-    $[28] = setStoreAlignFunctionName;
-    $[29] = t12;
-  } else {
-    t12 = $[29];
-  }
-  var setAlignFunctionName = t12;
-  var t13 = (_ref = colorBy) !== null && _ref !== void 0 ? _ref : "";
-  var t14 = (_ref2 = alignFunctionName) !== null && _ref2 !== void 0 ? _ref2 : "left";
-  var t15;
-  if ($[30] !== colorStackLegend || $[31] !== curPathArrow || $[32] !== flamechartDimension || $[33] !== groupBy || $[34] !== resetSandwichFunctionName || $[35] !== sandwichFunctionName || $[36] !== setAlignFunctionName || $[37] !== setColorBy || $[38] !== setCurPathArrow || $[39] !== setFlamechartDimension || $[40] !== setGroupBy || $[41] !== setGroupByLabels || $[42] !== setSandwichFunctionName || $[43] !== t13 || $[44] !== t14 || $[45] !== toggleGroupBy) {
-    t15 = {
+  if ($[25] !== alignFunctionName || $[26] !== colorBy || $[27] !== colorStackLegend || $[28] !== curPathArrow || $[29] !== flamechartDimension || $[30] !== groupBy || $[31] !== resetSandwichFunctionName || $[32] !== sandwichFunctionName || $[33] !== setAlignFunctionName || $[34] !== setColorBy || $[35] !== setCurPathArrow || $[36] !== setFlamechartDimension || $[37] !== setGroupBy || $[38] !== setGroupByLabels || $[39] !== setSandwichFunctionName || $[40] !== toggleGroupBy) {
+    t12 = {
       curPathArrow: curPathArrow,
       setCurPathArrow: setCurPathArrow,
       colorStackLegend: colorStackLegend,
-      colorBy: t13,
+      colorBy: colorBy,
       setColorBy: setColorBy,
       groupBy: groupBy,
       setGroupBy: setGroupBy,
@@ -246,30 +215,30 @@ export var useVisualizationState = function useVisualizationState() {
       sandwichFunctionName: sandwichFunctionName,
       setSandwichFunctionName: setSandwichFunctionName,
       resetSandwichFunctionName: resetSandwichFunctionName,
-      alignFunctionName: t14,
+      alignFunctionName: alignFunctionName,
       setAlignFunctionName: setAlignFunctionName
     };
-    $[30] = colorStackLegend;
-    $[31] = curPathArrow;
-    $[32] = flamechartDimension;
-    $[33] = groupBy;
-    $[34] = resetSandwichFunctionName;
-    $[35] = sandwichFunctionName;
-    $[36] = setAlignFunctionName;
-    $[37] = setColorBy;
-    $[38] = setCurPathArrow;
-    $[39] = setFlamechartDimension;
-    $[40] = setGroupBy;
-    $[41] = setGroupByLabels;
-    $[42] = setSandwichFunctionName;
-    $[43] = t13;
-    $[44] = t14;
-    $[45] = toggleGroupBy;
-    $[46] = t15;
+    $[25] = alignFunctionName;
+    $[26] = colorBy;
+    $[27] = colorStackLegend;
+    $[28] = curPathArrow;
+    $[29] = flamechartDimension;
+    $[30] = groupBy;
+    $[31] = resetSandwichFunctionName;
+    $[32] = sandwichFunctionName;
+    $[33] = setAlignFunctionName;
+    $[34] = setColorBy;
+    $[35] = setCurPathArrow;
+    $[36] = setFlamechartDimension;
+    $[37] = setGroupBy;
+    $[38] = setGroupByLabels;
+    $[39] = setSandwichFunctionName;
+    $[40] = toggleGroupBy;
+    $[41] = t12;
   } else {
-    t15 = $[46];
+    t12 = $[41];
   }
-  return t15;
+  return t12;
 };
 function _temp(l) {
   return !l.startsWith("".concat(FIELD_LABELS, "."));

package/dist/ProfileViewWithData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAkB1E,OAAO,EAAsB,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAOnE,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,mBAAmB,GAAI,sFAKjC,wBAAwB,KAAG,GAAG,CAAC,OA4UjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAW1E,OAAO,EAAsB,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAenE,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,mBAAmB,GAAI,sFAKjC,wBAAwB,KAAG,GAAG,CAAC,OAmUjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileViewWithData.js

@@ -22,8 +22,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // limitations under the License.
 
 import { useEffect, useMemo, useState } from 'react';
+import { useQueryState } from 'nuqs';
 import { QueryRequest_ReportType } from '@parca/client';
-import { NumberParser, NumberSerializer, useGrpcMetadata, useParcaContext, useURLState, useURLStateCustom } from '@parca/components';
+import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { saveAsBlob } from '@parca/utilities';
 import { validateFlameChartQuery } from './ProfileFlameGraph';
 import { FIELD_FUNCTION_NAME } from './ProfileFlameGraph/FlameGraphArrow';
@@ -31,6 +32,8 @@ import { boundsFromProfileSource } from './ProfileFlameGraph/FlameGraphArrow/uti
 import { getStepCountFromScreenWidth, useQueryRange } from './ProfileMetricsGraph/hooks/useQueryRange';
 import { ProfileView } from './ProfileView';
 import { useProfileFilters } from './ProfileView/components/ProfileFilters/useProfileFilters';
+import { flamechartDimensionParser, groupByParser, intParam, invertCallStackParser, stringParam } from './hooks/urlParsers';
+import { useDashboardItems } from './hooks/useDashboardItems';
 import { useQuery } from './useQuery';
 import { downloadPprof } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -41,36 +44,27 @@ export var ProfileViewWithData = function ProfileViewWithData(_ref) {
     showVisualizationSelector = _ref.showVisualizationSelector,
     onSwitchToFifteenMinutes = _ref.onSwitchToFifteenMinutes;
   var metadata = useGrpcMetadata();
-  var _useURLState = useURLState('dashboard_items', {
-      alwaysReturnArray: true
-    }),
-    _useURLState2 = _slicedToArray(_useURLState, 2),
-    dashboardItems = _useURLState2[0],
-    setDashboardItems = _useURLState2[1];
-  var _useURLState3 = useURLState('source_buildid'),
-    _useURLState4 = _slicedToArray(_useURLState3, 1),
-    sourceBuildID = _useURLState4[0];
-  var _useURLState5 = useURLState('source_filename'),
-    _useURLState6 = _slicedToArray(_useURLState5, 1),
-    sourceFilename = _useURLState6[0];
-  var _useURLState7 = useURLState('group_by', {
-      defaultValue: [FIELD_FUNCTION_NAME],
-      alwaysReturnArray: true
-    }),
-    _useURLState8 = _slicedToArray(_useURLState7, 1),
-    groupBy = _useURLState8[0];
-  var _useURLState9 = useURLState('sandwich_function_name'),
-    _useURLState0 = _slicedToArray(_useURLState9, 1),
-    sandwichFunctionName = _useURLState0[0];
-  var _useURLState1 = useURLState('flamechart_dimension', {
-      alwaysReturnArray: true
-    }),
-    _useURLState10 = _slicedToArray(_useURLState1, 1),
-    flamechartDimension = _useURLState10[0];
-  var _useURLState11 = useURLState('invert_call_stack'),
-    _useURLState12 = _slicedToArray(_useURLState11, 1),
-    invertStack = _useURLState12[0];
-  var invertCallStack = invertStack === 'true';
+  var _useDashboardItems = useDashboardItems(),
+    dashboardItems = _useDashboardItems.dashboardItems,
+    setDashboardItems = _useDashboardItems.setDashboardItems;
+  var _useQueryState = useQueryState('source_buildid', stringParam),
+    _useQueryState2 = _slicedToArray(_useQueryState, 1),
+    sourceBuildID = _useQueryState2[0];
+  var _useQueryState3 = useQueryState('source_filename', stringParam),
+    _useQueryState4 = _slicedToArray(_useQueryState3, 1),
+    sourceFilename = _useQueryState4[0];
+  var _useQueryState5 = useQueryState('group_by', groupByParser.withDefault([FIELD_FUNCTION_NAME])),
+    _useQueryState6 = _slicedToArray(_useQueryState5, 1),
+    groupBy = _useQueryState6[0];
+  var _useQueryState7 = useQueryState('sandwich_function_name', stringParam),
+    _useQueryState8 = _slicedToArray(_useQueryState7, 1),
+    sandwichFunctionName = _useQueryState8[0];
+  var _useQueryState9 = useQueryState('flamechart_dimension', flamechartDimensionParser),
+    _useQueryState0 = _slicedToArray(_useQueryState9, 1),
+    flamechartDimension = _useQueryState0[0];
+  var _useQueryState1 = useQueryState('invert_call_stack', invertCallStackParser),
+    _useQueryState10 = _slicedToArray(_useQueryState1, 1),
+    invertCallStack = _useQueryState10[0];
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     pprofDownloading = _useState2[0],
@@ -109,7 +103,7 @@ export var ProfileViewWithData = function ProfileViewWithData(_ref) {
       skip: !dashboardItems.includes('flamegraph'),
       nodeTrimThreshold: nodeTrimThreshold,
       groupBy: groupBy,
-      invertCallStack: invertCallStack,
+      invertCallStack: invertCallStack !== null && invertCallStack !== void 0 ? invertCallStack : false,
       protoFilters: protoFilters
     }),
     flamegraphLoading = _useQuery.isLoading,
@@ -130,13 +124,9 @@ export var ProfileViewWithData = function ProfileViewWithData(_ref) {
   }, [flamechartDimension]);
 
   // Samples step count: 2px per data point for finer granularity in strips
-  var _useURLStateCustom = useURLStateCustom('samples_step_count', {
-      defaultValue: String(getStepCountFromScreenWidth(2)),
-      parse: NumberParser,
-      stringify: NumberSerializer
-    }),
-    _useURLStateCustom2 = _slicedToArray(_useURLStateCustom, 1),
-    samplesStepCount = _useURLStateCustom2[0];
+  var _useQueryState11 = useQueryState('samples_step_count', intParam.withDefault(getStepCountFromScreenWidth(2))),
+    _useQueryState12 = _slicedToArray(_useQueryState11, 1),
+    samplesStepCount = _useQueryState12[0];
   var _useQueryRange = useQueryRange(queryClient, samplesEnabled ? profileSource.query.toString() : '', samplesFromMs, samplesToMs, samplesSumBy, samplesStepCount, !samplesEnabled),
     samplesLoading = _useQueryRange.isLoading,
     samplesRangeResponse = _useQueryRange.response,
@@ -202,8 +192,8 @@ export var ProfileViewWithData = function ProfileViewWithData(_ref) {
     tableError = _useQuery3.error;
   var _useQuery4 = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
       skip: !dashboardItems.includes('source'),
-      sourceBuildID: sourceBuildID,
-      sourceFilename: sourceFilename,
+      sourceBuildID: sourceBuildID !== null && sourceBuildID !== void 0 ? sourceBuildID : undefined,
+      sourceFilename: sourceFilename !== null && sourceFilename !== void 0 ? sourceFilename : undefined,
       protoFilters: protoFilters
     }),
     sourceLoading = _useQuery4.isLoading,
@@ -213,8 +203,8 @@ export var ProfileViewWithData = function ProfileViewWithData(_ref) {
       nodeTrimThreshold: nodeTrimThreshold,
       groupBy: [FIELD_FUNCTION_NAME],
       invertCallStack: true,
-      sandwichByFunction: sandwichFunctionName,
-      skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+      sandwichByFunction: sandwichFunctionName !== null && sandwichFunctionName !== void 0 ? sandwichFunctionName : undefined,
+      skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
       protoFilters: protoFilters
     }),
     callersFlamegraphLoading = _useQuery5.isLoading,
@@ -224,8 +214,8 @@ export var ProfileViewWithData = function ProfileViewWithData(_ref) {
       nodeTrimThreshold: nodeTrimThreshold,
       groupBy: [FIELD_FUNCTION_NAME],
       invertCallStack: false,
-      sandwichByFunction: sandwichFunctionName,
-      skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+      sandwichByFunction: sandwichFunctionName !== null && sandwichFunctionName !== void 0 ? sandwichFunctionName : undefined,
+      skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
       protoFilters: protoFilters
     }),
     calleesFlamegraphLoading = _useQuery6.isLoading,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAC,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAIhE,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,mCAuEZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAO9C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAC,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAKhE,UAAU,KAAK;IACb,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,QAAA,MAAM,QAAQ,mCAuEZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/Sandwich/index.js

@@ -26,10 +26,11 @@ import { c as _c } from "react-compiler-runtime";
 
 import React, { useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { useDashboard } from '../ProfileView/context/DashboardContext';
 import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
+import { stringParam } from '../hooks/urlParsers';
 import { CalleesSection } from './components/CalleesSection';
 import { CallersSection } from './components/CallersSection';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -39,9 +40,9 @@ var Sandwich = /*#__PURE__*/React.memo(function Sandwich(t0) {
     profileSource = t0.profileSource;
   var _useDashboard = useDashboard(),
     dashboardItems = _useDashboard.dashboardItems;
-  var _useURLState = useURLState("sandwich_function_name"),
-    _useURLState2 = _slicedToArray(_useURLState, 1),
-    sandwichFunctionName = _useURLState2[0];
+  var _useQueryState = useQueryState("sandwich_function_name", stringParam),
+    _useQueryState2 = _slicedToArray(_useQueryState, 1),
+    sandwichFunctionName = _useQueryState2[0];
   var callersRef = React.useRef(null);
   var calleesRef = React.useRef(null);
   var _useState = useState(false),
@@ -95,7 +96,7 @@ var Sandwich = /*#__PURE__*/React.memo(function Sandwich(t0) {
           transition: t4,
           children: /*#__PURE__*/_jsx("div", {
             className: "relative flex flex-row",
-            children: sandwichFunctionName !== undefined ? /*#__PURE__*/_jsxs("div", {
+            children: sandwichFunctionName != null ? /*#__PURE__*/_jsxs("div", {
               className: "w-full flex flex-col",
               ref: callersCalleesContainerRef,
               children: [/*#__PURE__*/_jsx(CallersSection, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SourceView/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAQrC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,UAAU,6CAqKrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SourceView/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AASrC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,UAAU,6CAqKrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/SourceView/index.js

@@ -24,9 +24,11 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { tableFromIPC } from '@uwdata/flechette';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useQueryState } from 'nuqs';
 import { Item, Menu, useContextMenu } from 'react-contexify';
-import { SourceSkeleton, useParcaContext, useURLState } from '@parca/components';
+import { SourceSkeleton, useParcaContext } from '@parca/components';
 import { ExpandOnHover } from '../GraphTooltipArrow/ExpandOnHoverValue';
+import { stringParam } from '../hooks/urlParsers';
 import { alignedUint8Array, truncateStringReverse } from '../utils';
 import { Highlighter, profileAwareRenderer } from './Highlighter';
 import useLineRange from './useSelectedLineRange';
@@ -38,9 +40,9 @@ export var SourceView = /*#__PURE__*/React.memo(function SourceView(_ref) {
     total = _ref.total,
     filtered = _ref.filtered,
     setActionButtons = _ref.setActionButtons;
-  var _useURLState = useURLState('source_filename'),
-    _useURLState2 = _slicedToArray(_useURLState, 1),
-    sourceFileName = _useURLState2[0];
+  var _useQueryState = useQueryState('source_filename', stringParam),
+    _useQueryState2 = _slicedToArray(_useQueryState, 1),
+    sourceFileName = _useQueryState2[0];
   var _useParcaContext = useParcaContext(),
     isDarkMode = _useParcaContext.isDarkMode,
     _useParcaContext$sour = _useParcaContext.sourceViewContextMenuItems,

package/dist/SourceView/useSelectedLineRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectedLineRange.d.ts","sourceRoot":"","sources":["../../src/SourceView/useSelectedLineRange.ts"],"names":[],"mappings":"AAiBA,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,QAAA,MAAM,YAAY,QAAO,SAmBxB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useSelectedLineRange.d.ts","sourceRoot":"","sources":["../../src/SourceView/useSelectedLineRange.ts"],"names":[],"mappings":"AAiCA,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,QAAA,MAAM,YAAY,QAAO,SAkBxB,CAAC;AAEF,eAAe,YAAY,CAAC"}