@parca/profile 0.19.138 → 0.19.140

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

package/dist/SourceView/useSelectedLineRange.js

@@ -10,23 +10,28 @@
 // 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 { useMemo } from 'react';
-import { useURLState } from '@parca/components';
+import { useCallback } from 'react';
+import { createParser, useQueryState } from 'nuqs';
+const lineRangeParser = createParser({
+    parse: (value) => {
+        const [start, end] = value.split('-');
+        const startNum = parseInt(start, 10);
+        if (isNaN(startNum))
+            return null;
+        const endNum = end !== undefined ? parseInt(end, 10) : startNum;
+        return { start: startNum, end: isNaN(endNum) ? startNum : endNum };
+    },
+    serialize: (value) => `${value.start}-${value.end}`,
+}).withOptions({ history: 'replace' });
 const useLineRange = () => {
-    const [sourceLine, setSourceLine] = useURLState('source_line');
-    const [startLine, endLine] = useMemo(() => {
-        if (sourceLine == null) {
-            return [-1, -1];
-        }
-        const [start, end] = sourceLine.split('-');
-        if (end === undefined) {
-            return [parseInt(start, 10), parseInt(start, 10)];
-        }
-        return [parseInt(start, 10), parseInt(end, 10)];
-    }, [sourceLine]);
-    const setLineRange = (start, end) => {
-        setSourceLine(`${start}-${end}`);
+    const [lineRange, setRawLineRange] = useQueryState('source_line', lineRangeParser.withDefault({ start: -1, end: -1 }));
+    const setLineRange = useCallback((start, end) => {
+        void setRawLineRange({ start, end });
+    }, [setRawLineRange]);
+    return {
+        startLine: lineRange.start,
+        endLine: lineRange.end,
+        setLineRange,
     };
-    return { startLine, endLine, setLineRange };
 };
 export default useLineRange;

package/dist/Table/MoreDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,GAAI,kBAAgB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAgElF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,YAAY,GAAI,kBAAgB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA0DlF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Table/MoreDropdown.js

@@ -13,20 +13,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // limitations under the License.
 import { Menu } from '@headlessui/react';
 import { Icon } from '@iconify/react';
-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';
 const MoreDropdown = ({ functionName }) => {
-    const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
-    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
+    const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+    const { dashboardItems, setDashboardItems } = useDashboardItems();
     const { enableSandwichView } = useParcaContext();
-    const batchUpdates = useURLStateBatch();
     const onSandwichViewSelect = () => {
-        // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
-        batchUpdates(() => {
-            setSandwichFunctionName(functionName.trim());
-            setDashboardItems([...dashboardItems, 'sandwich']);
-        });
+        void setSandwichFunctionName(functionName.trim());
+        setDashboardItems([...dashboardItems, 'sandwich']);
     };
     const menuItems = [];
     if (enableSandwichView === true) {

package/dist/Table/TableContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableContextMenu.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenu.tsx"],"names":[],"mappings":"AAiBA,OAAO,yCAAyC,CAAC;AAKjD,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAG3B,OAAO,EAAC,KAAK,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAElD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,gBAAgB,GAAI,kEAOvB,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAmMpC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TableContextMenu.d.ts","sourceRoot":"","sources":["../../src/Table/TableContextMenu.tsx"],"names":[],"mappings":"AAkBA,OAAO,yCAAyC,CAAC;AAKjD,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,GAAG,CAAC;AAK3B,OAAO,EAAC,KAAK,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAElD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAChD;AAED,QAAA,MAAM,gBAAgB,GAAI,kEAOvB,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OA6LpC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Table/TableContextMenu.js

@@ -13,28 +13,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
+import { useQueryState } from 'nuqs';
 import { Item, Menu, Submenu } from 'react-contexify';
 import 'react-contexify/dist/ReactContexify.css';
-import { useParcaContext, useURLState, useURLStateBatch } from '@parca/components';
+import { useParcaContext } from '@parca/components';
 import { valueFormatter } from '@parca/utilities';
 import { getTextForCumulative } from '../ProfileFlameGraph/FlameGraphArrow/utils';
+import { stringParam } from '../hooks/urlParsers';
+import { useDashboardItems } from '../hooks/useDashboardItems';
 import { truncateString } from '../utils';
 const TableContextMenu = ({ menuId, row, unit, total, totalUnfiltered, columnVisibility, }) => {
-    const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
-    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
+    const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+    const { dashboardItems, setDashboardItems } = useDashboardItems();
     const { enableSandwichView, isDarkMode } = useParcaContext();
-    const batchUpdates = useURLStateBatch();
     const onSandwichViewSelect = () => {
         if (row?.name != null && row.name.length > 0) {
-            // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
-            batchUpdates(() => {
-                setSandwichFunctionName(row.name.trim());
-                if (!dashboardItems.includes('sandwich')) {
-                    setDashboardItems([...dashboardItems, 'sandwich']);
-                }
-            });
+            void setSandwichFunctionName(row.name.trim());
+            if (!dashboardItems.includes('sandwich')) {
+                setDashboardItems([...dashboardItems, 'sandwich']);
+            }
         }
     };
     const handleCopyItem = (text) => {

package/dist/Table/hooks/useTableConfiguration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableConfiguration.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableConfiguration.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAKxE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,IAAI,CAAC;AAE5B,OAAO,EAA2B,KAAK,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE7E,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,cAAc,EAAE,KAAK,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAC,CAAC,CAAC;IACnD,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAC/C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,0BAA0B,GAAG,kBAAkB,CA+KjD"}
+{"version":3,"file":"useTableConfiguration.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableConfiguration.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAKxE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,IAAI,CAAC;AAG5B,OAAO,EAA2B,KAAK,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE7E,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,cAAc,EAAE,KAAK,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAC,CAAC,CAAC;IACnD,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAC/C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,0BAA0B,GAAG,kBAAkB,CA6KjD"}

package/dist/Table/hooks/useTableConfiguration.js

@@ -13,15 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
 import { createColumnHelper } from '@tanstack/table-core';
-import { useURLState } from '@parca/components';
+import { useQueryState } from 'nuqs';
 import { valueFormatter } from '@parca/utilities';
+import { tableColumnsParser } from '../../hooks/urlParsers';
 import { ColorCell } from '../ColorCell';
 import { addPlusSign, ratioString } from '../utils/functions';
 export function useTableConfiguration({ unit = '', total, filtered, compareMode, }) {
     const columnHelper = createColumnHelper();
-    const [tableColumns] = useURLState('table_columns', {
-        alwaysReturnArray: true,
-    });
+    const [tableColumns] = useQueryState('table_columns', tableColumnsParser);
     const [columnVisibility, setColumnVisibility] = useState(() => {
         return {
             color: true,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAErE,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAYlD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAU1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,KAAK,wCAyMhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAErE,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAQlD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAa1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,KAAK,wCAiMhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/Table/index.js

@@ -14,11 +14,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { tableFromIPC } from '@uwdata/flechette';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useQueryState } from 'nuqs';
 import { useContextMenu } from 'react-contexify';
-import { Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
+import { Table as TableComponent, TableSkeleton, useParcaContext } from '@parca/components';
 import { useCurrentColorProfile } from '@parca/hooks';
 import useMappingList, { useFilenamesList, } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
+import { stringParam } from '../hooks/urlParsers';
+import { useColorBy } from '../hooks/useColorBy';
+import { useDashboardItems } from '../hooks/useDashboardItems';
 import { alignedUint8Array } from '../utils';
 import TableContextMenuWrapper from './TableContextMenuWrapper';
 import { useColorManagement } from './hooks/useColorManagement';
@@ -37,11 +41,9 @@ export const FIELD_CALLERS = 'callers';
 export const FIELD_CALLEES = 'callees';
 export const Table = React.memo(function Table({ data, total, filtered, profileType, loading, isHalfScreen, unit, metadataMappingFiles, error, }) {
     const currentColorProfile = useCurrentColorProfile();
-    const [dashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
-    const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
-    const [colorBy, setColorBy] = useURLState('color_by');
+    const { dashboardItems } = useDashboardItems();
+    const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+    const { colorBy, setColorBy } = useColorBy();
     const { isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const MENU_ID = 'table-context-menu';
@@ -61,7 +63,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
     // If there is only one mapping file, we want to color by filename by default.
     useEffect(() => {
         if (mappingsListCount === 1 && colorBy !== 'filename') {
-            setColorBy('filename');
+            void setColorBy('filename');
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mappingsListCount]);
@@ -70,7 +72,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
         currentColorProfile,
         mappingsList,
         filenamesList,
-        colorBy: colorBy,
+        colorBy,
     });
     unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
     const tableConfig = useTableConfiguration({
@@ -82,7 +84,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
     const { columns, initialSorting, columnVisibility } = tableConfig;
     const selectSpan = useCallback((span) => {
         if (!dashboardItems.includes('flamegraph')) {
-            setSandwichFunctionName(span.trim());
+            void setSandwichFunctionName(span.trim());
         }
     }, [setSandwichFunctionName, dashboardItems]);
     const onRowClick = useCallback((row) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TopTable/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAC,GAAG,EAAW,WAAW,EAAC,MAAM,eAAe,CAAC;AAExD,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAC;AAK1B,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,GAAI,MAAM,WAAW,GAAG,SAAS,KAAG,MAcxD,CAAC;AAYF,eAAO,MAAM,QAAQ,2CA4KnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TopTable/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAC,GAAG,EAAW,WAAW,EAAC,MAAM,eAAe,CAAC;AAExD,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAC;AAM1B,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ,GAAI,MAAM,WAAW,GAAG,SAAS,KAAG,MAcxD,CAAC;AAYF,eAAO,MAAM,QAAQ,2CA0KnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/TopTable/index.js

@@ -13,9 +13,10 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // limitations under the License.
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { createColumnHelper } from '@tanstack/react-table';
-import { Button, Table, useURLState } from '@parca/components';
+import { Button, Table } from '@parca/components';
 import { getLastItem, isSearchMatch, parseParams, valueFormatter, } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
+import { useDashboardItems } from '../hooks/useDashboardItems';
 import { hexifyAddress } from '../utils';
 export const RowLabel = (meta) => {
     if (meta === undefined)
@@ -38,9 +39,7 @@ const addPlusSign = (num) => {
 };
 export const TopTable = React.memo(function TopTable({ data: top, sampleUnit: unit, navigateTo, loading, currentSearchString, setActionButtons, }) {
     const router = parseParams(window?.location.search);
-    const [dashboardItems] = useURLState('dashboard_items', {
-        alwaysReturnArray: true,
-    });
+    const { dashboardItems } = useDashboardItems();
     const { compareMode } = useProfileViewContext();
     const columns = useMemo(() => {
         const cols = [

package/dist/hooks/urlParsers.d.ts

@@ -0,0 +1,18 @@
+import { createParser } from 'nuqs';
+export declare const stringParam: import("nuqs").SingleParserBuilder<string>;
+export declare const boolParam: import("nuqs").SingleParserBuilder<boolean>;
+export declare const intParam: import("nuqs").SingleParserBuilder<number>;
+export declare const commaArrayParam: import("nuqs").SingleParserBuilder<string[]>;
+export declare const invertCallStackParser: Omit<import("nuqs").SingleParserBuilder<boolean>, "parseServerSide"> & {
+    readonly defaultValue: boolean;
+    parseServerSide(value: string | string[] | undefined): boolean;
+};
+export declare const groupByParser: import("nuqs").SingleParserBuilder<string[]>;
+export declare const flamechartDimensionParser: import("nuqs").SingleParserBuilder<string[]>;
+export declare const tableColumnsParser: import("nuqs").SingleParserBuilder<string[]>;
+export declare const hiddenBinariesParser: Omit<import("nuqs").SingleParserBuilder<string[]>, "parseServerSide"> & {
+    readonly defaultValue: string[];
+    parseServerSide(value: string | string[] | undefined): string[];
+};
+export declare function jsonParser<T>(): ReturnType<typeof createParser<T>>;
+//# sourceMappingURL=urlParsers.d.ts.map

package/dist/hooks/urlParsers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlParsers.d.ts","sourceRoot":"","sources":["../../src/hooks/urlParsers.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,YAAY,EAAgE,MAAM,MAAM,CAAC;AAKjG,eAAO,MAAM,WAAW,4CAAkC,CAAC;AAC3D,eAAO,MAAM,SAAS,6CAAmC,CAAC;AAC1D,eAAO,MAAM,QAAQ,4CAAmC,CAAC;AACzD,eAAO,MAAM,eAAe,8CAAuD,CAAC;AAGpF,eAAO,MAAM,qBAAqB;;;CAA+B,CAAC;AAClE,eAAO,MAAM,aAAa,8CAAkB,CAAC;AAC7C,eAAO,MAAM,yBAAyB,8CAAkB,CAAC;AACzD,eAAO,MAAM,kBAAkB,8CAAkB,CAAC;AAClD,eAAO,MAAM,oBAAoB;;;CAAkC,CAAC;AAGpE,wBAAgB,UAAU,CAAC,CAAC,KAAK,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAMlE"}

package/dist/hooks/urlParsers.js

@@ -0,0 +1,32 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { createParser, parseAsArrayOf, parseAsBoolean, parseAsInteger, parseAsString } from 'nuqs';
+const opts = { history: 'replace' };
+// === Base parsers with common options ===
+export const stringParam = parseAsString.withOptions(opts);
+export const boolParam = parseAsBoolean.withOptions(opts);
+export const intParam = parseAsInteger.withOptions(opts);
+export const commaArrayParam = parseAsArrayOf(parseAsString, ',').withOptions(opts);
+// === Param-specific parsers with defaults ===
+export const invertCallStackParser = boolParam.withDefault(false);
+export const groupByParser = commaArrayParam;
+export const flamechartDimensionParser = commaArrayParam;
+export const tableColumnsParser = commaArrayParam;
+export const hiddenBinariesParser = commaArrayParam.withDefault([]);
+// === JSON parser with BigInt support ===
+export function jsonParser() {
+    return createParser({
+        parse: (value) => JSON.parse(value),
+        serialize: (value) => JSON.stringify(value, (_, v) => (typeof v === 'bigint' ? v.toString() : v)),
+    }).withOptions(opts);
+}

package/dist/hooks/useColorBy.d.ts

@@ -0,0 +1,5 @@
+export declare const useColorBy: () => {
+    colorBy: string;
+    setColorBy: (value: string) => void;
+};
+//# sourceMappingURL=useColorBy.d.ts.map

package/dist/hooks/useColorBy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorBy.d.ts","sourceRoot":"","sources":["../../src/hooks/useColorBy.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,UAAU,QAAO;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAkBrC,CAAC"}

package/dist/hooks/useColorBy.js

@@ -0,0 +1,26 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useCallback } from 'react';
+import { useQueryState } from 'nuqs';
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { stringParam } from './urlParsers';
+export const useColorBy = () => {
+    const [colorByPreference, setColorByPreference] = useUserPreference(USER_PREFERENCES.COLOR_BY.key);
+    const [colorByRaw, setRawColorBy] = useQueryState('color_by', stringParam);
+    const colorBy = colorByRaw ?? colorByPreference ?? 'binary';
+    const setColorBy = useCallback((value) => {
+        void setRawColorBy(value);
+        setColorByPreference(value);
+    }, [setRawColorBy, setColorByPreference]);
+    return { colorBy, setColorBy };
+};

package/dist/hooks/useCompareModeMeta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCompareModeMeta.d.ts","sourceRoot":"","sources":["../../src/hooks/useCompareModeMeta.ts"],"names":[],"mappings":"AAiBA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO;IACpC,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG,KAAK,IAAI,CAAC;CA0G7C,CAAC"}
+{"version":3,"file":"useCompareModeMeta.d.ts","sourceRoot":"","sources":["../../src/hooks/useCompareModeMeta.ts"],"names":[],"mappings":"AAmBA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,QAAO;IACpC,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,CAAC,IAAI,EAAE,GAAG,GAAG,GAAG,KAAK,IAAI,CAAC;CA0E7C,CAAC"}