@parca/profile 0.19.139 → 0.19.140

package/dist/ProfileView/components/Toolbars/index.d.ts

@@ -22,7 +22,7 @@ export interface VisualisationToolbarProps {
     flamechartDimension: string[];
     setFlamechartDimension: (labels: string[]) => void;
     showVisualizationSelector?: boolean;
-    sandwichFunctionName?: string;
+    sandwichFunctionName: string | null;
     alignFunctionName: string;
     setAlignFunctionName: (align: string) => void;
     colorBy: string;
@@ -44,7 +44,7 @@ export interface FlameGraphToolbarProps {
 }
 export interface SandwichFlameGraphToolbarProps {
     resetSandwichFunctionName: () => void;
-    sandwichFunctionName?: string;
+    sandwichFunctionName: string | null;
 }
 export declare const TableToolbar: FC<TableToolbarProps>;
 export declare const FlameGraphToolbar: FC<FlameGraphToolbarProps>;

package/dist/ProfileView/components/Toolbars/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,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,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QAC9B,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,8BAA8B;IAC7C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAQ9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAkBxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAmBxE,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAoH9D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kDAAkD,CAAC;AAClF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAUrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,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,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;QAC9B,OAAO,EAAE,OAAO,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,8BAA8B;IAC7C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAQ9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAkBxD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,8BAA8B,CAmBxE,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAoH9D,CAAC"}

package/dist/ProfileView/components/Toolbars/index.js

@@ -17,7 +17,7 @@ export const FlameGraphToolbar = ({ curPath, setNewCurPath }) => {
     return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end", children: _jsxs(Button, { variant: "neutral", className: "gap-2 w-max h-fit", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, id: "h-reset-graph", ...testId(TEST_IDS.FLAMEGRAPH_RESET_BUTTON), children: ["Reset graph", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }) }) }));
 };
 export const SandwichFlameGraphToolbar = ({ resetSandwichFunctionName, sandwichFunctionName, }) => {
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end justify-between", children: _jsx(Button, { color: "neutral", onClick: () => resetSandwichFunctionName(), className: "w-auto", variant: "neutral", disabled: sandwichFunctionName === undefined || sandwichFunctionName.length === 0, children: "Reset view" }) }) }));
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end justify-between", children: _jsx(Button, { color: "neutral", onClick: () => resetSandwichFunctionName(), className: "w-auto", variant: "neutral", disabled: sandwichFunctionName == null || sandwichFunctionName.length === 0, children: "Reset view" }) }) }));
 };
 const Divider = () => (_jsx("div", { className: "border-t mt-4 border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" }));
 export const VisualisationToolbar = ({ groupBy, toggleGroupBy, setGroupByLabels, flamechartDimension, setFlamechartDimension, profileType, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, showVisualizationSelector = true, alignFunctionName, setAlignFunctionName, colorBy, setColorBy, metadata: { labels: groupByLabels, refetch: metadataRefetch, loading: metadataLoading }, }) => {

package/dist/ProfileView/components/ViewSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,mBAAiB,KAAK,KAAG,GAAG,CAAC,OA+JlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAKrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,GAAI,mBAAiB,KAAK,KAAG,GAAG,CAAC,OAoJlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ProfileView/components/ViewSelector/index.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useParcaContext, useURLState, useURLStateBatch } from '@parca/components';
+import { useQueryState } from 'nuqs';
+import { useParcaContext } from '@parca/components';
+import { stringParam } from '../../../hooks/urlParsers';
+import { useDashboardItems } from '../../../hooks/useDashboardItems';
 import Dropdown from './Dropdown';
 const ViewSelector = ({ profileSource }) => {
-    const [dashboardItems = ['flamegraph'], setDashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
-    const [, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const { dashboardItems, setDashboardItems } = useDashboardItems();
+    const [, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
     const { enableSourcesView, enableSandwichView } = useParcaContext();
-    const batchUpdates = useURLStateBatch();
     const allItems = [
         {
             key: 'flamegraph',
@@ -61,15 +61,9 @@ const ViewSelector = ({ profileSource }) => {
                 }
                 else {
                     const newDashboardItems = dashboardItems.filter(v => v !== item.key);
-                    // Batch updates when removing sandwich panel to combine both URL changes
+                    setDashboardItems(newDashboardItems);
                     if (item.key === 'sandwich') {
-                        batchUpdates(() => {
-                            setDashboardItems(newDashboardItems);
-                            setSandwichFunctionName(undefined);
-                        });
-                    }
-                    else {
-                        setDashboardItems(newDashboardItems);
+                        void setSandwichFunctionName(null);
                     }
                 }
             },

package/dist/ProfileView/context/DashboardContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/DashboardContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CA8BnD,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC"}
+{"version":3,"file":"DashboardContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/context/DashboardContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAA4B,MAAM,OAAO,CAAC;AAMvE,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAEzD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,CA4BnD,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC"}

package/dist/ProfileView/context/DashboardContext.js

@@ -12,19 +12,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { createContext, useContext } from 'react';
-import { useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
+import { stringParam } from '../../hooks/urlParsers';
+import { useDashboardItems } from '../../hooks/useDashboardItems';
 const DashboardContext = createContext(undefined);
 export const DashboardProvider = ({ children }) => {
-    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
-    const [, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const { dashboardItems, setDashboardItems } = useDashboardItems();
+    const [, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
     const handleClosePanel = (visualizationType) => {
         const newDashboardItems = dashboardItems.filter(item => item !== visualizationType);
         setDashboardItems(newDashboardItems);
         // Reset sandwich function name when closing sandwich panel
         if (visualizationType === 'sandwich') {
-            setSandwichFunctionName(undefined);
+            void setSandwichFunctionName(null);
         }
     };
     const isMultiPanelView = dashboardItems.length > 1;

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

@@ -1 +1 @@
-{"version":3,"file":"useResetFlameGraphState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetFlameGraphState.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,uBAAuB,QAAO,CAAC,MAAM,IAAI,CAWrD,CAAC"}
+{"version":3,"file":"useResetFlameGraphState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetFlameGraphState.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,uBAAuB,QAAO,CAAC,MAAM,IAAI,CAWrD,CAAC"}

package/dist/ProfileView/hooks/useResetFlameGraphState.js

@@ -10,15 +10,16 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
+import { stringParam } from '../../hooks/urlParsers';
 export const useResetFlameGraphState = () => {
-    const [val, setCurPath] = useURLState('cur_path');
+    const [val, setCurPath] = useQueryState('cur_path', stringParam);
     return () => {
         setTimeout(() => {
-            if (val === undefined) {
+            if (val === null) {
                 return;
             }
-            setCurPath(undefined);
+            void setCurPath(null);
         });
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useResetStateOnProfileTypeChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,gCAAgC,QAAO,CAAC,MAAM,IAAI,CA+B9D,CAAC"}
+{"version":3,"file":"useResetStateOnProfileTypeChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,gCAAgC,QAAO,CAAC,MAAM,IAAI,CA4B9D,CAAC"}

package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.js

@@ -10,35 +10,34 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useURLState, useURLStateBatch } from '@parca/components';
+import { useQueryStates } from 'nuqs';
+import { stringParam } from '../../hooks/urlParsers';
 import { useProfileFilters } from '../components/ProfileFilters/useProfileFilters';
 export const useResetStateOnProfileTypeChange = () => {
-    const [groupBy, setGroupBy] = useURLState('group_by');
-    const [curPath, setCurPath] = useURLState('cur_path');
-    const [sumByA, setSumByA] = useURLState('sum_by_a');
-    const [sumByB, setSumByB] = useURLState('sum_by_b');
+    const [state, setState] = useQueryStates({
+        group_by: stringParam,
+        cur_path: stringParam,
+        sum_by_a: stringParam,
+        sum_by_b: stringParam,
+        sandwich_function_name: stringParam,
+    }, { history: 'replace' });
     const { resetFilters } = useProfileFilters();
-    const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
-    const batchUpdates = useURLStateBatch();
     return () => {
-        // Batch all URL state resets into a single navigation
-        batchUpdates(() => {
-            if (groupBy !== undefined) {
-                setGroupBy(undefined);
-            }
-            if (curPath !== undefined) {
-                setCurPath(undefined);
-            }
-            if (sandwichFunctionName !== undefined) {
-                setSandwichFunctionName(undefined);
-            }
-            if (sumByA !== undefined) {
-                setSumByA(undefined);
-            }
-            if (sumByB !== undefined) {
-                setSumByB(undefined);
-            }
-            resetFilters();
-        });
+        // Atomic reset: clear all params in single URL update
+        const updates = {};
+        if (state.group_by !== null)
+            updates.group_by = null;
+        if (state.cur_path !== null)
+            updates.cur_path = null;
+        if (state.sandwich_function_name !== null)
+            updates.sandwich_function_name = null;
+        if (state.sum_by_a !== null)
+            updates.sum_by_a = null;
+        if (state.sum_by_b !== null)
+            updates.sum_by_b = null;
+        if (Object.keys(updates).length > 0) {
+            void setState(updates);
+        }
+        resetFilters();
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useResetStateOnSeriesChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnSeriesChange.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,2BAA2B,QAAO,CAAC,MAAM,IAAI,CAczD,CAAC"}
+{"version":3,"file":"useResetStateOnSeriesChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnSeriesChange.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,2BAA2B,QAAO,CAAC,MAAM,IAAI,CAoBzD,CAAC"}

package/dist/ProfileView/hooks/useResetStateOnSeriesChange.js

@@ -10,17 +10,22 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useURLState } from '@parca/components';
+import { useQueryStates } from 'nuqs';
+import { stringParam } from '../../hooks/urlParsers';
 export const useResetStateOnSeriesChange = () => {
-    const [curPath, setCurPath] = useURLState('cur_path');
-    const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+    const [state, setState] = useQueryStates({
+        cur_path: stringParam,
+        sandwich_function_name: stringParam,
+    }, { history: 'replace' });
     return () => {
         setTimeout(() => {
-            if (curPath !== undefined) {
-                setCurPath(undefined);
-            }
-            if (sandwichFunctionName !== undefined) {
-                setSandwichFunctionName(undefined);
+            const updates = {};
+            if (state.cur_path !== null)
+                updates.cur_path = null;
+            if (state.sandwich_function_name !== null)
+                updates.sandwich_function_name = null;
+            if (Object.keys(updates).length > 0) {
+                void setState(updates);
             }
         });
     };

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

@@ -11,35 +11,29 @@
 // See the License for the specific language governing permissions and
 // 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 const useVisualizationState = () => {
-    const [colorByPreference, setColorByPreference] = useUserPreference(USER_PREFERENCES.COLOR_BY.key);
     const [alignFunctionNamePreference, setAlignFunctionNamePreference] = useUserPreference(USER_PREFERENCES.ALIGN_FUNCTION_NAME.key);
-    const [curPathArrow, setCurPathArrow] = useURLStateCustom('cur_path', {
-        parse: (JSONParser),
-        stringify: JSONSerializer,
-        defaultValue: '[]',
-    });
-    const [colorStackLegend] = useURLState('color_stack_legend');
-    const [colorBy, setStoreColorBy] = useURLState('color_by', {
-        defaultValue: colorByPreference,
-    });
-    const [alignFunctionName, setStoreAlignFunctionName] = useURLState('align_function_name', {
-        defaultValue: alignFunctionNamePreference,
-    });
-    const [groupBy, setStoreGroupBy] = useURLState('group_by', {
-        defaultValue: [FIELD_FUNCTION_NAME],
-        alwaysReturnArray: true,
-    });
-    const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
-    const [flamechartDimension, setStoreFlamechartDimension] = useURLState('flamechart_dimension', {
-        alwaysReturnArray: true,
-    });
+    const [curPathArrow, setRawCurPathArrow] = useQueryState('cur_path', jsonParser().withDefault([]));
+    const setCurPathArrow = useCallback((path) => {
+        void setRawCurPathArrow(path);
+    }, [setRawCurPathArrow]);
+    const [colorStackLegend] = useQueryState('color_stack_legend', stringParam);
+    const { colorBy, setColorBy } = useColorBy();
+    const [alignFunctionNameRaw, setStoreAlignFunctionName] = useQueryState('align_function_name', stringParam);
+    const alignFunctionName = alignFunctionNameRaw ?? alignFunctionNamePreference ?? 'left';
+    const [groupBy, setStoreGroupBy] = useQueryState('group_by', groupByParser.withDefault([FIELD_FUNCTION_NAME]));
+    const [sandwichFunctionName, setRawSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+    const setSandwichFunctionName = useCallback((name) => {
+        void setRawSandwichFunctionName(name);
+    }, [setRawSandwichFunctionName]);
+    const [flamechartDimension, setStoreFlamechartDimension] = useQueryState('flamechart_dimension', flamechartDimensionParser.withDefault([]));
     const resetFlameGraphState = useResetFlameGraphState();
-    const batchUpdates = useURLStateBatch();
     const levelsOfProfiling = useMemo(() => [
         FIELD_FUNCTION_NAME,
         FIELD_FUNCTION_FILE_NAME,
@@ -47,47 +41,37 @@ export const useVisualizationState = () => {
         FIELD_MAPPING_FILE,
     ], []);
     const setGroupBy = useCallback((keys) => {
-        setStoreGroupBy(keys);
+        void setStoreGroupBy(keys);
     }, [setStoreGroupBy]);
     const toggleGroupBy = useCallback((key) => {
-        // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
-        batchUpdates(() => {
-            if (groupBy.includes(key)) {
-                setGroupBy(groupBy.filter(v => v !== key)); // remove
-            }
-            else {
-                const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
-                setGroupBy([...filteredGroupBy, key]); // add
-            }
-            resetFlameGraphState();
-        });
-    }, [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState, batchUpdates]);
+        if (groupBy.includes(key)) {
+            setGroupBy(groupBy.filter(v => v !== key));
+        }
+        else {
+            const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
+            setGroupBy([...filteredGroupBy, key]);
+        }
+        resetFlameGraphState();
+    }, [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]);
     const setGroupByLabels = useCallback((labels) => {
-        // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
-        batchUpdates(() => {
-            setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
-            resetFlameGraphState();
-        });
-    }, [groupBy, setGroupBy, resetFlameGraphState, batchUpdates]);
+        setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
+        resetFlameGraphState();
+    }, [groupBy, setGroupBy, resetFlameGraphState]);
     const setFlamechartDimension = useCallback((labels) => {
-        setStoreFlamechartDimension(labels.filter(l => l.startsWith(`${FIELD_LABELS}.`)));
+        void setStoreFlamechartDimension(labels.filter(l => l.startsWith(`${FIELD_LABELS}.`)));
     }, [setStoreFlamechartDimension]);
     const resetSandwichFunctionName = useCallback(() => {
-        setSandwichFunctionName(undefined);
+        setSandwichFunctionName(null);
     }, [setSandwichFunctionName]);
-    const setColorBy = useCallback((value) => {
-        setStoreColorBy(value);
-        setColorByPreference(value);
-    }, [setStoreColorBy, setColorByPreference]);
     const setAlignFunctionName = useCallback((value) => {
-        setStoreAlignFunctionName(value);
+        void setStoreAlignFunctionName(value);
         setAlignFunctionNamePreference(value);
     }, [setStoreAlignFunctionName, setAlignFunctionNamePreference]);
     return {
         curPathArrow,
         setCurPathArrow,
         colorStackLegend,
-        colorBy: colorBy ?? '',
+        colorBy,
         setColorBy,
         groupBy,
         setGroupBy,
@@ -98,7 +82,7 @@ export const useVisualizationState = () => {
         sandwichFunctionName,
         setSandwichFunctionName,
         resetSandwichFunctionName,
-        alignFunctionName: alignFunctionName ?? 'left',
+        alignFunctionName,
         setAlignFunctionName,
     };
 };

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

@@ -12,8 +12,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // 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';
@@ -21,25 +22,19 @@ 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';
 export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizationSelector, onSwitchToFifteenMinutes, }) => {
     const metadata = useGrpcMetadata();
-    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
-    const [sourceBuildID] = useURLState('source_buildid');
-    const [sourceFilename] = useURLState('source_filename');
-    const [groupBy] = useURLState('group_by', {
-        defaultValue: [FIELD_FUNCTION_NAME],
-        alwaysReturnArray: true,
-    });
-    const [sandwichFunctionName] = useURLState('sandwich_function_name');
-    const [flamechartDimension] = useURLState('flamechart_dimension', {
-        alwaysReturnArray: true,
-    });
-    const [invertStack] = useURLState('invert_call_stack');
-    const invertCallStack = invertStack === 'true';
+    const { dashboardItems, setDashboardItems } = useDashboardItems();
+    const [sourceBuildID] = useQueryState('source_buildid', stringParam);
+    const [sourceFilename] = useQueryState('source_filename', stringParam);
+    const [groupBy] = useQueryState('group_by', groupByParser.withDefault([FIELD_FUNCTION_NAME]));
+    const [sandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+    const [flamechartDimension] = useQueryState('flamechart_dimension', flamechartDimensionParser);
+    const [invertCallStack] = useQueryState('invert_call_stack', invertCallStackParser);
     const [pprofDownloading, setPprofDownloading] = useState(false);
     const { protoFilters } = useProfileFilters();
     useEffect(() => {
@@ -73,7 +68,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         skip: !dashboardItems.includes('flamegraph'),
         nodeTrimThreshold,
         groupBy,
-        invertCallStack,
+        invertCallStack: invertCallStack ?? false,
         protoFilters,
     });
     const samplesEnabled = !!(dashboardItems.includes('flamechart') &&
@@ -85,11 +80,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
     }, [profileSource]);
     const samplesSumBy = useMemo(() => (flamechartDimension ?? []).map(f => f.startsWith('labels.') ? f.slice('labels.'.length) : f), [flamechartDimension]);
     // Samples step count: 2px per data point for finer granularity in strips
-    const [samplesStepCount] = useURLStateCustom('samples_step_count', {
-        defaultValue: String(getStepCountFromScreenWidth(2)),
-        parse: NumberParser,
-        stringify: NumberSerializer,
-    });
+    const [samplesStepCount] = useQueryState('samples_step_count', intParam.withDefault(getStepCountFromScreenWidth(2)));
     const { isLoading: samplesLoading, response: samplesRangeResponse, error: samplesError, stepDurationMs: samplesStepMs, } = useQueryRange(queryClient, samplesEnabled ? profileSource.query.toString() : '', samplesFromMs, samplesToMs, samplesSumBy, samplesStepCount, !samplesEnabled);
     // Map QueryRange response to SamplesData
     // TODO (manoj): Check if we can skip this mapping and adapt the CPUSampleStrips to work directly with the QueryRange response format.
@@ -123,24 +114,24 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
     });
     const { isLoading: sourceLoading, response: sourceResponse, error: sourceError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
         skip: !dashboardItems.includes('source'),
-        sourceBuildID,
-        sourceFilename,
+        sourceBuildID: sourceBuildID ?? undefined,
+        sourceFilename: sourceFilename ?? undefined,
         protoFilters,
     });
     const { isLoading: callersFlamegraphLoading, response: callersFlamegraphResponse, error: callersFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
         nodeTrimThreshold,
         groupBy: [FIELD_FUNCTION_NAME],
         invertCallStack: true,
-        sandwichByFunction: sandwichFunctionName,
-        skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+        sandwichByFunction: sandwichFunctionName ?? undefined,
+        skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
         protoFilters,
     });
     const { isLoading: calleesFlamegraphLoading, response: calleesFlamegraphResponse, error: calleesFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
         nodeTrimThreshold,
         groupBy: [FIELD_FUNCTION_NAME],
         invertCallStack: false,
-        sandwichByFunction: sandwichFunctionName,
-        skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+        sandwichByFunction: sandwichFunctionName ?? undefined,
+        skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
         protoFilters,
     });
     useEffect(() => {

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

@@ -13,21 +13,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // limitations under the License.
 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';
 const Sandwich = React.memo(function Sandwich({ sandwichData, profileSource, }) {
     const { dashboardItems } = useDashboard();
-    const [sandwichFunctionName] = useURLState('sandwich_function_name');
+    const [sandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
     const callersRef = React.useRef(null);
     const calleesRef = React.useRef(null);
     const [isExpanded, setIsExpanded] = useState(false);
     const defaultMaxFrames = 10;
     const callersCalleesContainerRef = useRef(null);
     const { curPathArrow, setCurPathArrow } = useVisualizationState();
-    return (_jsx("section", { className: "flex flex-row h-full w-full", ...testId(TEST_IDS.SANDWICH_CONTAINER), children: _jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx("div", { className: "relative flex flex-row", children: sandwichFunctionName !== undefined ? (_jsxs("div", { className: "w-full flex flex-col", ref: callersCalleesContainerRef, children: [_jsx(CallersSection, { callersRef: callersRef, callersFlamegraphData: sandwichData.callers, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, isExpanded: isExpanded, setIsExpanded: setIsExpanded, defaultMaxFrames: defaultMaxFrames }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, calleesFlamegraphData: sandwichData.callees, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", ...testId(TEST_IDS.SANDWICH_NO_FUNCTION_SELECTED), children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table') ? ('Please select a function to view its callers and callees.') : (_jsxs(_Fragment, { children: ["Use the right-click menu on the Flame", ' ', dashboardItems.includes('flamegraph') ? 'Graph' : 'Chart', " to choose a function to view its callers and callees."] })) }) })) }) }, "sandwich-loaded") }) }));
+    return (_jsx("section", { className: "flex flex-row h-full w-full", ...testId(TEST_IDS.SANDWICH_CONTAINER), children: _jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx("div", { className: "relative flex flex-row", children: sandwichFunctionName != null ? (_jsxs("div", { className: "w-full flex flex-col", ref: callersCalleesContainerRef, children: [_jsx(CallersSection, { callersRef: callersRef, callersFlamegraphData: sandwichData.callers, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, isExpanded: isExpanded, setIsExpanded: setIsExpanded, defaultMaxFrames: defaultMaxFrames }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, calleesFlamegraphData: sandwichData.callees, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", ...testId(TEST_IDS.SANDWICH_NO_FUNCTION_SELECTED), children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table') ? ('Please select a function to view its callers and callees.') : (_jsxs(_Fragment, { children: ["Use the right-click menu on the Flame", ' ', dashboardItems.includes('flamegraph') ? 'Graph' : 'Chart', " to choose a function to view its callers and callees."] })) }) })) }) }, "sandwich-loaded") }) }));
 });
 export default Sandwich;

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

@@ -14,15 +14,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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';
 const MENU_ID = 'source-view-context-menu';
 export const SourceView = React.memo(function SourceView({ data, loading, total, filtered, setActionButtons, }) {
-    const [sourceFileName] = useURLState('source_filename');
+    const [sourceFileName] = useQueryState('source_filename', stringParam);
     const { isDarkMode, sourceViewContextMenuItems = [] } = useParcaContext();
     const sourceCode = useMemo(() => {
         if (data === undefined) {

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"}