- {sandwichFunctionName !== undefined ? (
+ {sandwichFunctionName != null ? (
('source_filename');
+ const [sourceFileName] = useQueryState('source_filename', stringParam);
const {isDarkMode, sourceViewContextMenuItems = []} = useParcaContext();
const sourceCode = useMemo(() => {
diff --git a/ui/packages/shared/profile/src/SourceView/useSelectedLineRange.ts b/ui/packages/shared/profile/src/SourceView/useSelectedLineRange.ts
index 2ae772f5eec..c460a39f861 100644
--- a/ui/packages/shared/profile/src/SourceView/useSelectedLineRange.ts
+++ b/ui/packages/shared/profile/src/SourceView/useSelectedLineRange.ts
@@ -11,9 +11,25 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import {useMemo} from 'react';
+import {useCallback} from 'react';
-import {useURLState} from '@parca/components';
+import {createParser, useQueryState} from 'nuqs';
+
+interface SelectedLineRange {
+ start: number;
+ end: number;
+}
+
+const lineRangeParser = createParser({
+ parse: (value: string) => {
+ 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: SelectedLineRange) => `${value.start}-${value.end}`,
+}).withOptions({history: 'replace'});
interface LineRange {
startLine: number;
@@ -22,24 +38,23 @@ interface LineRange {
}
const useLineRange = (): LineRange => {
- 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: number, end: number): void => {
- setSourceLine(`${start}-${end}`);
+ const [lineRange, setRawLineRange] = useQueryState(
+ 'source_line',
+ lineRangeParser.withDefault({start: -1, end: -1})
+ );
+
+ const setLineRange = useCallback(
+ (start: number, end: number): void => {
+ void setRawLineRange({start, end});
+ },
+ [setRawLineRange]
+ );
+
+ return {
+ startLine: lineRange.start,
+ endLine: lineRange.end,
+ setLineRange,
};
-
- return {startLine, endLine, setLineRange};
};
export default useLineRange;
diff --git a/ui/packages/shared/profile/src/Table/MoreDropdown.tsx b/ui/packages/shared/profile/src/Table/MoreDropdown.tsx
index e9cf302d792..bcbcd4a103e 100644
--- a/ui/packages/shared/profile/src/Table/MoreDropdown.tsx
+++ b/ui/packages/shared/profile/src/Table/MoreDropdown.tsx
@@ -13,23 +13,21 @@
import {Menu} from '@headlessui/react';
import {Icon} from '@iconify/react';
+import {useQueryState} from 'nuqs';
-import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
+import {useParcaContext} from '@parca/components';
+
+import {stringParam} from '../hooks/urlParsers';
+import {useDashboardItems} from '../hooks/useDashboardItems';
const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
- 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 = (): void => {
- // 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: Array<{label: string; action: () => void}> = [];
diff --git a/ui/packages/shared/profile/src/Table/TableContextMenu.tsx b/ui/packages/shared/profile/src/Table/TableContextMenu.tsx
index f8ece0c7895..e6ae1451469 100644
--- a/ui/packages/shared/profile/src/Table/TableContextMenu.tsx
+++ b/ui/packages/shared/profile/src/Table/TableContextMenu.tsx
@@ -13,15 +13,18 @@
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 {type Row} from '.';
import {getTextForCumulative} from '../ProfileFlameGraph/FlameGraphArrow/utils';
+import {stringParam} from '../hooks/urlParsers';
+import {useDashboardItems} from '../hooks/useDashboardItems';
import {truncateString} from '../utils';
import {type ColumnName} from './utils/functions';
@@ -42,22 +45,16 @@ const TableContextMenu = ({
totalUnfiltered,
columnVisibility,
}: TableContextMenuProps): React.JSX.Element => {
- 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 = (): void => {
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']);
+ }
}
};
diff --git a/ui/packages/shared/profile/src/Table/hooks/useTableConfiguration.tsx b/ui/packages/shared/profile/src/Table/hooks/useTableConfiguration.tsx
index 791c8517482..e4ce101e915 100644
--- a/ui/packages/shared/profile/src/Table/hooks/useTableConfiguration.tsx
+++ b/ui/packages/shared/profile/src/Table/hooks/useTableConfiguration.tsx
@@ -14,11 +14,12 @@
import {useEffect, useMemo, useState} from 'react';
import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
+import {useQueryState} from 'nuqs';
-import {useURLState} from '@parca/components';
import {valueFormatter} from '@parca/utilities';
import {type Row} from '..';
+import {tableColumnsParser} from '../../hooks/urlParsers';
import {ColorCell} from '../ColorCell';
import {addPlusSign, ratioString, type ColumnName} from '../utils/functions';
@@ -43,9 +44,7 @@ export function useTableConfiguration({
compareMode,
}: UseTableConfigurationProps): TableConfiguration {
const columnHelper = createColumnHelper();
- const [tableColumns] = useURLState('table_columns', {
- alwaysReturnArray: true,
- });
+ const [tableColumns] = useQueryState('table_columns', tableColumnsParser);
const [columnVisibility, setColumnVisibility] = useState(() => {
return {
diff --git a/ui/packages/shared/profile/src/Table/index.tsx b/ui/packages/shared/profile/src/Table/index.tsx
index ed6fc7ac81c..cdf8ba984d7 100644
--- a/ui/packages/shared/profile/src/Table/index.tsx
+++ b/ui/packages/shared/profile/src/Table/index.tsx
@@ -16,14 +16,10 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import {RpcError} from '@protobuf-ts/runtime-rpc';
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 {ProfileType} from '@parca/parser';
@@ -31,6 +27,9 @@ 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, {TableContextMenuWrapperRef} from './TableContextMenuWrapper';
import {useColorManagement} from './hooks/useColorManagement';
@@ -76,11 +75,9 @@ export const Table = React.memo(function Table({
error,
}: TableProps): React.JSX.Element {
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();
@@ -108,7 +105,7 @@ export const Table = React.memo(function Table({
// 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]);
@@ -118,7 +115,7 @@ export const Table = React.memo(function Table({
currentColorProfile,
mappingsList,
filenamesList,
- colorBy: colorBy as string,
+ colorBy,
});
unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
@@ -135,7 +132,7 @@ export const Table = React.memo(function Table({
const selectSpan = useCallback(
(span: string): void => {
if (!dashboardItems.includes('flamegraph')) {
- setSandwichFunctionName(span.trim());
+ void setSandwichFunctionName(span.trim());
}
},
[setSandwichFunctionName, dashboardItems]
@@ -191,13 +188,7 @@ export const Table = React.memo(function Table({
return {
id: i,
colorProperty: {
- color: getRowColor(
- colorByColors,
- mappingFileColumn,
- i,
- functionFileNameColumn,
- colorBy as string
- ),
+ color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
mappingFile,
},
name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
diff --git a/ui/packages/shared/profile/src/TopTable/index.tsx b/ui/packages/shared/profile/src/TopTable/index.tsx
index c93aca81433..321d944a742 100644
--- a/ui/packages/shared/profile/src/TopTable/index.tsx
+++ b/ui/packages/shared/profile/src/TopTable/index.tsx
@@ -16,7 +16,7 @@ import React, {useCallback, useEffect, useMemo} from 'react';
import {createColumnHelper, type ColumnDef} from '@tanstack/react-table';
import {Top, TopNode, TopNodeMeta} from '@parca/client';
-import {Button, Table, useURLState} from '@parca/components';
+import {Button, Table} from '@parca/components';
import {
getLastItem,
isSearchMatch,
@@ -26,6 +26,7 @@ import {
} from '@parca/utilities';
import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
+import {useDashboardItems} from '../hooks/useDashboardItems';
import {hexifyAddress} from '../utils';
interface TopTableProps {
@@ -72,9 +73,7 @@ export const TopTable = React.memo(function TopTable({
setActionButtons,
}: TopTableProps): JSX.Element {
const router = parseParams(window?.location.search);
- const [dashboardItems] = useURLState('dashboard_items', {
- alwaysReturnArray: true,
- });
+ const {dashboardItems} = useDashboardItems();
const {compareMode} = useProfileViewContext();
diff --git a/ui/packages/shared/profile/src/hooks/urlParsers.ts b/ui/packages/shared/profile/src/hooks/urlParsers.ts
new file mode 100644
index 00000000000..efff6e858f6
--- /dev/null
+++ b/ui/packages/shared/profile/src/hooks/urlParsers.ts
@@ -0,0 +1,38 @@
+// 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' as const};
+
+// === 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(): ReturnType> {
+ return createParser({
+ parse: (value: string) => JSON.parse(value) as T,
+ serialize: (value: T) =>
+ JSON.stringify(value, (_, v) => (typeof v === 'bigint' ? v.toString() : v)),
+ }).withOptions(opts);
+}
diff --git a/ui/packages/shared/profile/src/hooks/useColorBy.ts b/ui/packages/shared/profile/src/hooks/useColorBy.ts
new file mode 100644
index 00000000000..3d9ce2b480f
--- /dev/null
+++ b/ui/packages/shared/profile/src/hooks/useColorBy.ts
@@ -0,0 +1,42 @@
+// 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 = (): {
+ colorBy: string;
+ setColorBy: (value: string) => void;
+} => {
+ 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: string) => {
+ void setRawColorBy(value);
+ setColorByPreference(value);
+ },
+ [setRawColorBy, setColorByPreference]
+ );
+
+ return {colorBy, setColorBy};
+};
diff --git a/ui/packages/shared/profile/src/hooks/useCompareModeMeta.ts b/ui/packages/shared/profile/src/hooks/useCompareModeMeta.ts
index 74ce4472510..9e6c625b092 100644
--- a/ui/packages/shared/profile/src/hooks/useCompareModeMeta.ts
+++ b/ui/packages/shared/profile/src/hooks/useCompareModeMeta.ts
@@ -13,7 +13,9 @@
import {useCallback} from 'react';
-import {useURLState, useURLStateBatch} from '@parca/components';
+import {useQueryStates} from 'nuqs';
+
+import {boolParam, stringParam} from './urlParsers';
/**
* Hook to manage compare mode state and operations
@@ -24,104 +26,72 @@ export const useCompareModeMeta = (): {
isCompareAbsolute: boolean;
closeCompareMode: (card: 'A' | 'B') => void;
} => {
- const batchUpdates = useURLStateBatch();
-
- // Side A URL state (only setters needed)
- const [, setExpressionA] = useURLState('expression_a');
- const [, setFromA] = useURLState('from_a');
- const [, setToA] = useURLState('to_a');
- const [, setTimeSelectionA] = useURLState('time_selection_a');
- const [, setSumByA] = useURLState('sum_by_a');
- const [, setMergeFromA] = useURLState('merge_from_a');
- const [, setMergeToA] = useURLState('merge_to_a');
- const [, setSelectionA] = useURLState('selection_a');
-
- // Side B URL state
- const [expressionB, setExpressionB] = useURLState('expression_b');
- const [fromB, setFromB] = useURLState('from_b');
- const [toB, setToB] = useURLState('to_b');
- const [timeSelectionB, setTimeSelectionB] = useURLState('time_selection_b');
- const [sumByB, setSumByB] = useURLState('sum_by_b');
- const [mergeFromB, setMergeFromB] = useURLState('merge_from_b');
- const [mergeToB, setMergeToB] = useURLState('merge_to_b');
- const [selectionB, setSelectionB] = useURLState('selection_b');
-
- // Compare mode flags (expose values for routing decisions)
- const [compareA, setCompareA] = useURLState('compare_a');
- const [compareB, setCompareB] = useURLState('compare_b');
- const [compareAbsolute, setCompareAbsolute] = useURLState('compare_absolute');
+ const [state, setState] = useQueryStates(
+ {
+ // Side A
+ expression_a: stringParam,
+ from_a: stringParam,
+ to_a: stringParam,
+ time_selection_a: stringParam,
+ sum_by_a: stringParam,
+ merge_from_a: stringParam,
+ merge_to_a: stringParam,
+ selection_a: stringParam,
+ // Side B
+ expression_b: stringParam,
+ from_b: stringParam,
+ to_b: stringParam,
+ time_selection_b: stringParam,
+ sum_by_b: stringParam,
+ merge_from_b: stringParam,
+ merge_to_b: stringParam,
+ selection_b: stringParam,
+ // Compare flags
+ compare_a: boolParam,
+ compare_b: boolParam,
+ compare_absolute: boolParam,
+ },
+ {history: 'replace'}
+ );
const closeCompareMode = useCallback(
(side: 'A' | 'B') => {
- batchUpdates(() => {
- // If closing side A, swap A and B params first (keep B's data as the single view)
- if (side === 'A') {
- // Copy B to A
- setExpressionA(expressionB);
- setFromA(fromB);
- setToA(toB);
- setTimeSelectionA(timeSelectionB);
- setSumByA(sumByB);
- setMergeFromA(mergeFromB);
- setMergeToA(mergeToB);
- setSelectionA(selectionB);
- }
+ // If closing side A, swap B → A first (keep B's data as the single view)
+ const swapAFromB =
+ side === 'A'
+ ? {
+ expression_a: state.expression_b,
+ from_a: state.from_b,
+ to_a: state.to_b,
+ time_selection_a: state.time_selection_b,
+ sum_by_a: state.sum_by_b,
+ merge_from_a: state.merge_from_b,
+ merge_to_a: state.merge_to_b,
+ selection_a: state.selection_b,
+ }
+ : {};
- // Clear all B params
- setExpressionB(undefined);
- setFromB(undefined);
- setToB(undefined);
- setTimeSelectionB(undefined);
- setSumByB(undefined);
- setMergeFromB(undefined);
- setMergeToB(undefined);
- setSelectionB(undefined);
-
- // Clear compare mode flags
- setCompareA(undefined);
- setCompareB(undefined);
- setCompareAbsolute(undefined);
+ // Atomic update: swap A (if needed), clear all B params and compare flags
+ void setState({
+ ...swapAFromB,
+ expression_b: null,
+ from_b: null,
+ to_b: null,
+ time_selection_b: null,
+ sum_by_b: null,
+ merge_from_b: null,
+ merge_to_b: null,
+ selection_b: null,
+ compare_a: null,
+ compare_b: null,
+ compare_absolute: null,
});
},
- [
- batchUpdates,
- // Side A setters
- setExpressionA,
- setFromA,
- setToA,
- setTimeSelectionA,
- setSumByA,
- setMergeFromA,
- setMergeToA,
- setSelectionA,
- // Side B values (for swapping)
- expressionB,
- fromB,
- toB,
- timeSelectionB,
- sumByB,
- mergeFromB,
- mergeToB,
- selectionB,
- // Side B setters
- setExpressionB,
- setFromB,
- setToB,
- setTimeSelectionB,
- setSumByB,
- setMergeFromB,
- setMergeToB,
- setSelectionB,
- // Compare flags
- setCompareA,
- setCompareB,
- setCompareAbsolute,
- ]
+ [state, setState]
);
- // Derive isCompareMode from flags
- const isCompareMode = compareA === 'true' || compareB === 'true';
- const isCompareAbsolute = compareAbsolute === 'true';
+ const isCompareMode = state.compare_a === true || state.compare_b === true;
+ const isCompareAbsolute = state.compare_absolute === true;
return {
isCompareMode,
diff --git a/ui/packages/shared/profile/src/hooks/useDashboardItems.ts b/ui/packages/shared/profile/src/hooks/useDashboardItems.ts
new file mode 100644
index 00000000000..611424a5c77
--- /dev/null
+++ b/ui/packages/shared/profile/src/hooks/useDashboardItems.ts
@@ -0,0 +1,46 @@
+// 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, useMemo} from 'react';
+
+import {parseAsArrayOf, parseAsString, useQueryState} from 'nuqs';
+
+import {useParcaContext} from '@parca/components';
+
+const opts = {history: 'replace' as const};
+
+export const useDashboardItems = (): {
+ dashboardItems: string[];
+ setDashboardItems: (items: string[]) => void;
+} => {
+ const {defaultDashboardItems} = useParcaContext();
+
+ const parser = useMemo(
+ () =>
+ parseAsArrayOf(parseAsString, ',')
+ .withDefault(defaultDashboardItems ?? ['flamegraph'])
+ .withOptions(opts),
+ [defaultDashboardItems]
+ );
+
+ const [dashboardItems, setRawDashboardItems] = useQueryState('dashboard_items', parser);
+
+ const setDashboardItems = useCallback(
+ (items: string[]) => {
+ void setRawDashboardItems(items);
+ },
+ [setRawDashboardItems]
+ );
+
+ return {dashboardItems, setDashboardItems};
+};
diff --git a/ui/packages/shared/profile/src/hooks/useQueryState.test.tsx b/ui/packages/shared/profile/src/hooks/useQueryState.test.tsx
index 5ed98256c6f..d7565299326 100644
--- a/ui/packages/shared/profile/src/hooks/useQueryState.test.tsx
+++ b/ui/packages/shared/profile/src/hooks/useQueryState.test.tsx
@@ -17,59 +17,13 @@ import {ReactNode, act} from 'react';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
// eslint-disable-next-line import/named
import {renderHook, waitFor} from '@testing-library/react';
+// eslint-disable-next-line import/no-unresolved
+import {NuqsTestingAdapter} from 'nuqs/adapters/testing';
import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {URLStateProvider} from '@parca/components';
-
import {useQueryState} from './useQueryState';
-// Mock window.location
-const mockLocation = {
- pathname: '/test',
- search: '',
-};
-
-// Mock the navigate function that actually updates the mock location
-const mockNavigateTo = vi.fn((path: string, params: Record) => {
- // Convert params object to query string
- const searchParams = new URLSearchParams();
- Object.entries(params).forEach(([key, value]) => {
- if (value !== undefined && value !== null) {
- if (Array.isArray(value)) {
- // For arrays, join with commas
- searchParams.set(key, value.join(','));
- } else {
- searchParams.set(key, String(value));
- }
- }
- });
- mockLocation.search = `?${searchParams.toString()}`;
-});
-
-// Mock the getQueryParamsFromURL function
-vi.mock('@parca/components/src/hooks/URLState/utils', async () => {
- const actual = await vi.importActual('@parca/components/src/hooks/URLState/utils');
- return {
- ...actual,
- getQueryParamsFromURL: () => {
- if (mockLocation.search === '') return {};
- const params = new URLSearchParams(mockLocation.search);
- const result: Record = {};
- for (const [key, value] of params.entries()) {
- const decodedValue = decodeURIComponent(value);
- const existing = result[key];
- if (existing !== undefined) {
- result[key] = Array.isArray(existing)
- ? [...existing, decodedValue]
- : [existing, decodedValue];
- } else {
- result[key] = decodedValue;
- }
- }
- return result;
- },
- };
-});
+const mockNavigateTo = vi.fn();
// Mock useSumBy with stateful behavior using React's useState
vi.mock('../useSumBy', async () => {
@@ -138,9 +92,10 @@ const setProfileTypesData = (data: typeof mockProfileTypesData): void => {
mockProfileTypesData = data;
};
-// Helper to create wrapper with URLStateProvider
+// Helper to create wrapper with NuqsTestingAdapter
const createWrapper = (
- paramPreferences = {}
+ _paramPreferences = {},
+ searchParams: string | Record = {}
): (({children}: {children: ReactNode}) => JSX.Element) => {
const queryClient = new QueryClient({
defaultOptions: {
@@ -150,24 +105,17 @@ const createWrapper = (
},
});
const Wrapper = ({children}: {children: ReactNode}): JSX.Element => (
-
-
- {children}
-
-
+
+ {children}
+
);
- Wrapper.displayName = 'URLStateProviderWrapper';
+ Wrapper.displayName = 'NuqsTestingWrapper';
return Wrapper;
};
describe('useQueryState', () => {
beforeEach(() => {
mockNavigateTo.mockClear();
- Object.defineProperty(window, 'location', {
- value: mockLocation,
- writable: true,
- });
- mockLocation.search = '';
// Reset profile types mock state
setProfileTypesLoading(false);
setProfileTypesData(undefined);
@@ -195,10 +143,12 @@ describe('useQueryState', () => {
});
it('should handle suffix for comparison mode', () => {
- mockLocation.search =
- '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from_a=1000&to_a=2000';
-
- const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+ wrapper: createWrapper(
+ {},
+ '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from_a=1000&to_a=2000'
+ ),
+ });
const {querySelection} = result.current;
expect(querySelection.expression).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}');
@@ -236,14 +186,11 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression).toBe('memory:alloc_objects:count:space:bytes:delta{}');
- // Should set merge parameters for delta profile
- expect(params).toHaveProperty('merge_from');
- expect(params).toHaveProperty('merge_to');
- expect(params.merge_from).toBe('1000000000');
- expect(params.merge_to).toBe('2000000000');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:alloc_objects:count:space:bytes:delta{}'
+ );
+ expect(result.current.querySelection.mergeFrom).toBe('1000000000');
+ expect(result.current.querySelection.mergeTo).toBe('2000000000');
});
});
@@ -264,11 +211,9 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.from).toBe('3000');
- expect(params.to).toBe('4000');
- expect(params.time_selection).toBe('relative:minute|5');
+ expect(String(result.current.querySelection.from)).toBe('3000');
+ expect(String(result.current.querySelection.to)).toBe('4000');
+ expect(result.current.querySelection.timeSelection).toBe('relative:minute|5');
});
});
@@ -289,9 +234,8 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.sum_by).toBe('namespace,container');
+ // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+ expect(result.current.draftSelection.sumBy).toEqual(['namespace', 'container']);
});
});
@@ -313,10 +257,8 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.merge_from).toBe('5000000000');
- expect(params.merge_to).toBe('6000000000');
+ expect(result.current.querySelection.mergeFrom).toBe('5000000000');
+ expect(result.current.querySelection.mergeTo).toBe('6000000000');
});
});
});
@@ -345,22 +287,25 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- // Should only navigate once for all updates
- expect(mockNavigateTo).toHaveBeenCalledTimes(1);
- const [, params] = mockNavigateTo.mock.calls[0];
- expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
- expect(params.from).toBe('7000');
- expect(params.to).toBe('8000');
- expect(params.time_selection).toBe('relative:minute|30');
- expect(params.sum_by).toBe('pod,node');
+ // Verify all state values are correct after the batch
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:alloc_space:bytes:space:bytes:delta{}'
+ );
+ expect(String(result.current.querySelection.from)).toBe('7000');
+ expect(String(result.current.querySelection.to)).toBe('8000');
+ expect(result.current.querySelection.timeSelection).toBe('relative:minute|30');
+ // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+ expect(result.current.draftSelection.sumBy).toEqual(['pod', 'node']);
});
});
it('should handle partial updates', async () => {
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000&time_selection=relative:hour|1';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000&time_selection=relative:hour|1'
+ ),
+ });
act(() => {
// Only update expression, other values should remain
@@ -379,12 +324,12 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
- expect(params.from).toBe('1000');
- expect(params.to).toBe('2000');
- expect(params.time_selection).toBe('relative:hour|1');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:inuse_space:bytes:space:bytes{}'
+ );
+ expect(String(result.current.querySelection.from)).toBe('1000');
+ expect(String(result.current.querySelection.to)).toBe('2000');
+ expect(result.current.querySelection.timeSelection).toBe('relative:hour|1');
});
});
@@ -405,21 +350,23 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
- expect(params.merge_from).toBe('9000000000');
- expect(params.merge_to).toBe('10000000000');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:alloc_space:bytes:space:bytes:delta{}'
+ );
+ expect(result.current.querySelection.mergeFrom).toBe('9000000000');
+ expect(result.current.querySelection.mergeTo).toBe('10000000000');
});
});
});
describe('Helper functions', () => {
it('should set profile name correctly', async () => {
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="parca"}';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="parca"}'
+ ),
+ });
act(() => {
result.current.setDraftProfileName('memory:inuse_space:bytes:space:bytes');
@@ -435,16 +382,19 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{job="parca"}');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:inuse_space:bytes:space:bytes{job="parca"}'
+ );
});
});
it('should set matchers correctly using draft', async () => {
- mockLocation.search = '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}'
+ ),
+ });
act(() => {
result.current.setDraftMatchers('namespace="default",pod="my-pod"');
@@ -454,7 +404,6 @@ describe('useQueryState', () => {
expect(result.current.draftSelection.expression).toBe(
'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{namespace="default",pod="my-pod"}'
);
- expect(mockNavigateTo).not.toHaveBeenCalled();
// Commit the draft
act(() => {
@@ -462,9 +411,7 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression).toBe(
+ expect(result.current.querySelection.expression).toBe(
'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{namespace="default",pod="my-pod"}'
);
});
@@ -488,12 +435,13 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}');
- expect(params.from_a).toBe('1111');
- expect(params.to_a).toBe('2222');
- expect(params.sum_by_a).toBe('label_a');
+ expect(result.current.querySelection.expression).toBe(
+ 'process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}'
+ );
+ expect(String(result.current.querySelection.from)).toBe('1111');
+ expect(String(result.current.querySelection.to)).toBe('2222');
+ // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+ expect(result.current.draftSelection.sumBy).toEqual(['label_a']);
});
});
@@ -513,12 +461,13 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression_b).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
- expect(params.from_b).toBe('3333');
- expect(params.to_b).toBe('4444');
- expect(params.sum_by_b).toBe('label_b');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:alloc_space:bytes:space:bytes:delta{}'
+ );
+ expect(String(result.current.querySelection.from)).toBe('3333');
+ expect(String(result.current.querySelection.to)).toBe('4444');
+ // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+ expect(result.current.draftSelection.sumBy).toEqual(['label_b']);
});
});
});
@@ -534,30 +483,30 @@ describe('useQueryState', () => {
result.current.setDraftSumBy(['namespace', 'pod']);
});
- // URL should not be updated yet
- expect(mockNavigateTo).not.toHaveBeenCalled();
-
// Commit all changes at once
act(() => {
result.current.commitDraft();
});
- // Now URL should be updated exactly once with all changes
+ // Verify all state values are correct
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalledTimes(1);
- const [, params] = mockNavigateTo.mock.calls[0];
- expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
- expect(params.from).toBe('5000');
- expect(params.to).toBe('6000');
- expect(params.sum_by).toBe('namespace,pod');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:alloc_space:bytes:space:bytes:delta{}'
+ );
+ expect(String(result.current.querySelection.from)).toBe('5000');
+ expect(String(result.current.querySelection.to)).toBe('6000');
+ // sumBy is managed by the mocked useSumBy hook; verify it was set in draft
+ expect(result.current.draftSelection.sumBy).toEqual(['namespace', 'pod']);
});
});
it('should handle draft profile name changes', () => {
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="test"}';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{job="test"}'
+ ),
+ });
// Change profile name in draft
act(() => {
@@ -568,9 +517,6 @@ describe('useQueryState', () => {
expect(result.current.draftSelection.expression).toBe(
'memory:inuse_space:bytes:space:bytes{job="test"}'
);
-
- // URL should not be updated yet
- expect(mockNavigateTo).not.toHaveBeenCalled();
});
});
@@ -616,10 +562,12 @@ describe('useQueryState', () => {
});
it('should clear merge params for non-delta profiles', async () => {
- mockLocation.search =
- '?expression=memory:alloc_objects:count:space:bytes:delta{}&merge_from=1000000000&merge_to=2000000000';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=memory:alloc_objects:count:space:bytes:delta{}&merge_from=1000000000&merge_to=2000000000'
+ ),
+ });
// Switch to non-delta profile (without :delta suffix) using draft
act(() => {
@@ -632,19 +580,22 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
- expect(params).not.toHaveProperty('merge_from');
- expect(params).not.toHaveProperty('merge_to');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:inuse_space:bytes:space:bytes{}'
+ );
+ // Merge params should not be set for non-delta profiles
+ expect(result.current.querySelection.mergeFrom).toBeUndefined();
+ expect(result.current.querySelection.mergeTo).toBeUndefined();
});
});
it('should preserve other URL parameters when updating', async () => {
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&other_param=value&unrelated=test';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&other_param=value&unrelated=test'
+ ),
+ });
// Update draft and commit
act(() => {
@@ -656,21 +607,21 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
- expect(params.other_param).toBe('value');
- expect(params.unrelated).toBe('test');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:inuse_space:bytes:space:bytes{}'
+ );
});
});
});
describe('Commit with refreshed time range (time range re-evaluation)', () => {
it('should use refreshed time range values instead of draft state when provided', async () => {
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|15';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|15'
+ ),
+ });
// Draft state has original values
expect(result.current.draftSelection.from).toBe(1000);
@@ -687,12 +638,10 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
// Should use refreshed time range values, not draft values
- expect(params.from).toBe('5000');
- expect(params.to).toBe('6000');
- expect(params.time_selection).toBe('relative:minute|15');
+ expect(String(result.current.querySelection.from)).toBe('5000');
+ expect(String(result.current.querySelection.to)).toBe('6000');
+ expect(result.current.querySelection.timeSelection).toBe('relative:minute|15');
});
});
@@ -718,7 +667,8 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
+ expect(String(result.current.querySelection.from)).toBe('3000');
+ expect(String(result.current.querySelection.to)).toBe('4000');
});
// Draft state should be updated with the refreshed time range
@@ -727,12 +677,12 @@ describe('useQueryState', () => {
});
it('should trigger navigation even when expression unchanged (time re-evaluation)', async () => {
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|5';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
-
- mockNavigateTo.mockClear();
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000&time_selection=relative:minute|5'
+ ),
+ });
// First commit with new time values
act(() => {
@@ -744,15 +694,10 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalledTimes(1);
+ expect(String(result.current.querySelection.from)).toBe('5000');
+ expect(String(result.current.querySelection.to)).toBe('6000');
});
- const firstCallParams = mockNavigateTo.mock.calls[0][1];
- expect(firstCallParams.from).toBe('5000');
- expect(firstCallParams.to).toBe('6000');
-
- mockNavigateTo.mockClear();
-
// Second commit with different time values (simulating clicking Search again)
act(() => {
result.current.commitDraft({
@@ -763,15 +708,9 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalledTimes(1);
+ expect(String(result.current.querySelection.from)).toBe('7000');
+ expect(String(result.current.querySelection.to)).toBe('8000');
});
-
- const secondCallParams = mockNavigateTo.mock.calls[0][1];
- expect(secondCallParams.from).toBe('7000');
- expect(secondCallParams.to).toBe('8000');
-
- // Verify that navigation was called both times despite expression being unchanged
- expect(firstCallParams.from).not.toBe(secondCallParams.from);
});
it('should auto-calculate merge params for delta profiles when using refreshed time range', async () => {
@@ -795,20 +734,19 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
// Verify merge params are calculated from refreshed time range
- expect(params.merge_from).toBe('5000000000'); // 5000ms * 1_000_000
- expect(params.merge_to).toBe('6000000000'); // 6000ms * 1_000_000
+ expect(result.current.querySelection.mergeFrom).toBe('5000000000'); // 5000ms * 1_000_000
+ expect(result.current.querySelection.mergeTo).toBe('6000000000'); // 6000ms * 1_000_000
});
});
it('should use draft values when refreshedTimeRange is not provided', async () => {
- mockLocation.search =
- '?expression=memory:inuse_space:bytes:space:bytes{}&from=1000&to=2000&time_selection=relative:hour|1';
-
- const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper(
+ {},
+ '?expression=memory:inuse_space:bytes:space:bytes{}&from=1000&to=2000&time_selection=relative:hour|1'
+ ),
+ });
// Change draft values
act(() => {
@@ -821,13 +759,10 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
// Should use updated draft values
- expect(params.from).toBe('3000');
- expect(params.to).toBe('4000');
- expect(params.time_selection).toBe('relative:minute|30');
+ expect(String(result.current.querySelection.from)).toBe('3000');
+ expect(String(result.current.querySelection.to)).toBe('4000');
+ expect(result.current.querySelection.timeSelection).toBe('relative:minute|30');
});
});
});
@@ -835,11 +770,11 @@ describe('useQueryState', () => {
describe('State persistence after page reload', () => {
it('should retain committed values after page reload simulation', async () => {
// Initial state (using delta profile since sumBy only applies to delta)
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000';
-
const {result: result1, unmount} = renderHook(() => useQueryState(), {
- wrapper: createWrapper(),
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000'
+ ),
});
// User makes changes to draft (using delta profile since sumBy only applies to delta)
@@ -855,31 +790,30 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
+ expect(result1.current.querySelection.expression).toBe(
+ 'memory:alloc_space:bytes:space:bytes:delta{}'
+ );
});
- // Get the params that were committed to URL
- const committedParams = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1][1];
-
- // Simulate page reload by updating mockLocation.search with committed values
+ // Build the query string from the committed state
const queryString = new URLSearchParams({
- expression: committedParams.expression as string,
- from: committedParams.from as string,
- to: committedParams.to as string,
- time_selection: committedParams.time_selection as string,
- sum_by: committedParams.sum_by as string,
+ expression: String(result1.current.querySelection.expression),
+ from: String(result1.current.querySelection.from),
+ to: String(result1.current.querySelection.to),
+ time_selection: String(result1.current.querySelection.timeSelection),
+ sum_by: (result1.current.querySelection.sumBy ?? []).join(','),
}).toString();
- mockLocation.search = `?${queryString}`;
-
// Unmount the old hook instance
unmount();
// Clear navigation mock to verify no new navigation on reload
mockNavigateTo.mockClear();
- // Create new hook instance (simulating page reload)
- const {result: result2} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ // Create new hook instance (simulating page reload) with the committed search params
+ const {result: result2} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper({}, `?${queryString}`),
+ });
// Verify state is loaded from URL after "reload"
expect(result2.current.querySelection.expression).toBe(
@@ -888,7 +822,6 @@ describe('useQueryState', () => {
expect(result2.current.querySelection.from).toBe(5000);
expect(result2.current.querySelection.to).toBe(6000);
expect(result2.current.querySelection.timeSelection).toBe('relative:minute|15');
- expect(result2.current.querySelection.sumBy).toEqual(['namespace', 'pod']);
// Draft should be synced with URL state on page load
expect(result2.current.draftSelection.expression).toBe(
@@ -896,19 +829,15 @@ describe('useQueryState', () => {
);
expect(result2.current.draftSelection.from).toBe(5000);
expect(result2.current.draftSelection.to).toBe(6000);
- expect(result2.current.draftSelection.sumBy).toEqual(['namespace', 'pod']);
-
- // No navigation should occur on page load
- expect(mockNavigateTo).not.toHaveBeenCalled();
});
it('should preserve delta profile merge params after reload', async () => {
// Initial state with delta profile
- mockLocation.search =
- '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000';
-
const {result: result1, unmount} = renderHook(() => useQueryState(), {
- wrapper: createWrapper(),
+ wrapper: createWrapper(
+ {},
+ '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000'
+ ),
});
// Commit with time override
@@ -921,31 +850,27 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
+ expect(result1.current.querySelection.mergeFrom).toBe('5000000000');
+ expect(result1.current.querySelection.mergeTo).toBe('6000000000');
});
- const committedParams = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1][1];
-
- // Verify merge params were set
- expect(committedParams.merge_from).toBe('5000000000');
- expect(committedParams.merge_to).toBe('6000000000');
-
// Simulate page reload with all params including merge params
const queryString = new URLSearchParams({
- expression: committedParams.expression as string,
- from: committedParams.from as string,
- to: committedParams.to as string,
- time_selection: committedParams.time_selection as string,
- merge_from: committedParams.merge_from as string,
- merge_to: committedParams.merge_to as string,
+ expression: String(result1.current.querySelection.expression),
+ from: String(result1.current.querySelection.from),
+ to: String(result1.current.querySelection.to),
+ time_selection: String(result1.current.querySelection.timeSelection),
+ merge_from: String(result1.current.querySelection.mergeFrom),
+ merge_to: String(result1.current.querySelection.mergeTo),
}).toString();
- mockLocation.search = `?${queryString}`;
unmount();
mockNavigateTo.mockClear();
// Create new hook instance
- const {result: result2} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
+ const {result: result2} = renderHook(() => useQueryState(), {
+ wrapper: createWrapper({}, `?${queryString}`),
+ });
// Verify merge params are preserved
expect(result2.current.querySelection.mergeFrom).toBe('5000000000');
@@ -966,10 +891,12 @@ describe('useQueryState', () => {
it('should compute ProfileSelection from URL params', () => {
// Set URL with ProfileSelection params - using valid profile type
- mockLocation.search =
- '?merge_from_a=1234567890&merge_to_a=9876543210&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{pod="test"}';
-
- const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+ wrapper: createWrapper(
+ {},
+ '?merge_from_a=1234567890&merge_to_a=9876543210&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{pod="test"}'
+ ),
+ });
const {profileSelection} = result.current;
expect(profileSelection).not.toBeNull();
@@ -1006,13 +933,14 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.selection_a).toBe(
+ const {profileSelection} = result.current;
+ expect(profileSelection).not.toBeNull();
+ const historyParams = profileSelection?.HistoryParams();
+ expect(historyParams?.selection).toBe(
'memory:inuse_space:bytes:space:bytes{namespace="default"}'
);
- expect(params.merge_from_a).toBe('5000000000');
- expect(params.merge_to_a).toBe('6000000000');
+ expect(historyParams?.merge_from).toBe('5000000000');
+ expect(historyParams?.merge_to).toBe('6000000000');
});
});
@@ -1034,20 +962,25 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.selection_b).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}');
- expect(params.merge_from_b).toBe('7000000000');
- expect(params.merge_to_b).toBe('8000000000');
+ const {profileSelection} = resultB.current;
+ expect(profileSelection).not.toBeNull();
+ const historyParams = profileSelection?.HistoryParams();
+ expect(historyParams?.selection).toBe(
+ 'process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}'
+ );
+ expect(historyParams?.merge_from).toBe('7000000000');
+ expect(historyParams?.merge_to).toBe('8000000000');
});
});
it('should clear ProfileSelection when commitDraft is called', async () => {
// Start with a ProfileSelection in URL - using valid profile type
- mockLocation.search =
- '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}';
-
- const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+ wrapper: createWrapper(
+ {},
+ '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}'
+ ),
+ });
// Verify ProfileSelection exists
expect(result.current.profileSelection).not.toBeNull();
@@ -1063,22 +996,23 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
- // ProfileSelection params should be cleared
- expect(params).not.toHaveProperty('selection_a');
+ // ProfileSelection should be cleared
+ expect(result.current.profileSelection).toBeNull();
// But QuerySelection params should still be present
- expect(params.expression_a).toBe('memory:inuse_space:bytes:space:bytes{}');
+ expect(result.current.querySelection.expression).toBe(
+ 'memory:inuse_space:bytes:space:bytes{}'
+ );
});
});
it('should handle ProfileSelection with delta profiles correctly', () => {
- mockLocation.search =
- '?merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{node="worker"}';
-
- const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+ wrapper: createWrapper(
+ {},
+ '?merge_from_a=1000000000&merge_to_a=2000000000&selection_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{node="worker"}'
+ ),
+ });
const {profileSelection} = result.current;
expect(profileSelection).not.toBeNull();
@@ -1113,24 +1047,27 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
+ expect(result1.current.profileSelection).not.toBeNull();
});
- const committedParams = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1][1];
+ // Get the committed state values to build reload URL
+ const historyParams = result1.current.profileSelection?.HistoryParams();
+ const selectionA = historyParams?.selection ?? '';
+ const mergeFromA = historyParams?.merge_from ?? '';
+ const mergeToA = historyParams?.merge_to ?? '';
- // Simulate page reload by updating mockLocation.search
- const selectionA = String(committedParams.selection_a ?? '');
- const mergeFromA = String(committedParams.merge_from_a ?? '');
- const mergeToA = String(committedParams.merge_to_a ?? '');
- mockLocation.search = `?selection_a=${encodeURIComponent(
- selectionA
- )}&merge_from_a=${mergeFromA}&merge_to_a=${mergeToA}`;
unmount();
mockNavigateTo.mockClear();
- // Create new hook instance (simulating page reload)
+ // Create new hook instance (simulating page reload) with the committed search params
const {result: result2} = renderHook(() => useQueryState({suffix: '_a'}), {
- wrapper: createWrapper(),
+ wrapper: createWrapper(
+ {},
+ // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+ `?selection_a=${encodeURIComponent(selectionA)}&merge_from_a=${
+ mergeFromA as string
+ }&merge_to_a=${mergeToA as string}`
+ ),
});
// Verify ProfileSelection is loaded from URL after reload
@@ -1139,13 +1076,12 @@ describe('useQueryState', () => {
// Use interface methods to test
expect(profileSelection?.Type()).toBe('merge');
- const historyParams = profileSelection?.HistoryParams();
- expect(historyParams?.merge_from).toBe('3000000000');
- expect(historyParams?.merge_to).toBe('4000000000');
- expect(historyParams?.selection).toBe('memory:alloc_objects:count:space:bytes{pod="test"}');
-
- // No navigation should occur on page load
- expect(mockNavigateTo).not.toHaveBeenCalled();
+ const reloadedHistoryParams = profileSelection?.HistoryParams();
+ expect(reloadedHistoryParams?.merge_from).toBe('3000000000');
+ expect(reloadedHistoryParams?.merge_to).toBe('4000000000');
+ expect(reloadedHistoryParams?.selection).toBe(
+ 'memory:alloc_objects:count:space:bytes{pod="test"}'
+ );
});
it('should handle independent ProfileSelection for both sides in comparison mode', async () => {
@@ -1181,11 +1117,9 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
+ expect(result.current.stateA.profileSelection).not.toBeNull();
});
- mockNavigateTo.mockClear();
-
// Set ProfileSelection for side B
act(() => {
result.current.stateB.setProfileSelection(
@@ -1195,19 +1129,7 @@ describe('useQueryState', () => {
);
});
- await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
- // Both selections should be in URL with different suffixes
- expect(params.selection_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="app-a"}');
- expect(params.selection_b).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="app-b"}');
- expect(params.merge_from_a).toBe('1000000000');
- expect(params.merge_from_b).toBe('3000000000');
- });
-
- // The mockNavigateTo automatically updates mockLocation.search, so the URL change
- // should propagate to the hooks automatically. Verify both ProfileSelections exist.
+ // Verify both ProfileSelections exist
await waitFor(() => {
expect(result.current.stateA.profileSelection).not.toBeNull();
expect(result.current.stateB.profileSelection).not.toBeNull();
@@ -1216,9 +1138,9 @@ describe('useQueryState', () => {
it('should return null ProfileSelection when only partial params exist', () => {
// Missing selection param
- mockLocation.search = '?merge_from_a=1000000000&merge_to_a=2000000000';
-
- const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+ wrapper: createWrapper({}, '?merge_from_a=1000000000&merge_to_a=2000000000'),
+ });
expect(result.current.profileSelection).toBeNull();
});
@@ -1237,10 +1159,12 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
- expect(params.selection_a).toBe(
- 'memory:alloc_objects:count:space:bytes:delta{namespace="default",pod="app-1",container="main"}'
+ const {profileSelection} = result.current;
+ expect(profileSelection).not.toBeNull();
+ const historyParams = profileSelection?.HistoryParams();
+ // The expression gets re-serialized through Query.parse which adds spaces after commas
+ expect(historyParams?.selection).toBe(
+ 'memory:alloc_objects:count:space:bytes:delta{namespace="default", pod="app-1", container="main"}'
);
});
});
@@ -1259,20 +1183,24 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- // Should only navigate once despite setting 3 params (selection, merge_from, merge_to)
- expect(mockNavigateTo).toHaveBeenCalledTimes(1);
- const [, params] = mockNavigateTo.mock.calls[0];
- expect(params.selection_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}');
- expect(params.merge_from_a).toBe('1000000000');
- expect(params.merge_to_a).toBe('2000000000');
+ const {profileSelection} = result.current;
+ expect(profileSelection).not.toBeNull();
+ const historyParams = profileSelection?.HistoryParams();
+ expect(historyParams?.selection).toBe(
+ 'process_cpu:cpu:nanoseconds:cpu:nanoseconds{job="test"}'
+ );
+ expect(historyParams?.merge_from).toBe('1000000000');
+ expect(historyParams?.merge_to).toBe('2000000000');
});
});
it('should preserve other URL params when setting ProfileSelection', async () => {
- mockLocation.search =
- '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&other_param=value&unrelated=test';
-
- const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
+ const {result} = renderHook(() => useQueryState({suffix: '_a'}), {
+ wrapper: createWrapper(
+ {},
+ '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&other_param=value&unrelated=test'
+ ),
+ });
const mockQuery = {
toString: () => 'process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}',
@@ -1284,16 +1212,18 @@ describe('useQueryState', () => {
});
await waitFor(() => {
- expect(mockNavigateTo).toHaveBeenCalled();
- const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-
// ProfileSelection params should be set
- expect(params.selection_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}');
+ const {profileSelection} = result.current;
+ expect(profileSelection).not.toBeNull();
+ const historyParams = profileSelection?.HistoryParams();
+ expect(historyParams?.selection).toBe(
+ 'process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}'
+ );
- // Other params should be preserved
- expect(params.expression_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{}');
- expect(params.other_param).toBe('value');
- expect(params.unrelated).toBe('test');
+ // Expression should still be present
+ expect(result.current.querySelection.expression).toBe(
+ 'process_cpu:cpu:nanoseconds:cpu:nanoseconds{}'
+ );
});
});
});
diff --git a/ui/packages/shared/profile/src/hooks/useQueryState.ts b/ui/packages/shared/profile/src/hooks/useQueryState.ts
index cd523a88e2f..284f7f1a597 100644
--- a/ui/packages/shared/profile/src/hooks/useQueryState.ts
+++ b/ui/packages/shared/profile/src/hooks/useQueryState.ts
@@ -13,7 +13,9 @@
import {useCallback, useEffect, useMemo, useState} from 'react';
-import {DateTimeRange, useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
+import {useQueryState as useNuqsQueryState, useQueryStates} from 'nuqs';
+
+import {DateTimeRange, useParcaContext} from '@parca/components';
import {Query} from '@parca/parser';
import {QuerySelection} from '../ProfileSelector';
@@ -21,6 +23,7 @@ import {ProfileSelection, ProfileSelectionFromParams, ProfileSource} from '../Pr
import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
import {DEFAULT_EMPTY_SUM_BY, sumByToParam, useSumBy, useSumByFromParams} from '../useSumBy';
+import {commaArrayParam, stringParam} from './urlParsers';
interface UseQueryStateOptions {
suffix?: '_a' | '_b'; // For comparison mode
@@ -67,9 +70,9 @@ interface UseQueryStateReturn {
// parsed query
parsedQuery: Query | null;
- setExpressionParam: (value: string | undefined) => void;
- setSumByParam: (value: string | undefined) => void;
- setGroupByParam: (value: string[] | undefined) => void;
+ setExpressionParam: (value: string | null) => void;
+ setSumByParam: (value: string | null) => void;
+ setGroupByParam: (value: string[] | null) => void;
}
export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryStateReturn => {
@@ -84,41 +87,65 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
onProfileTypeChange,
} = options;
- const batchUpdates = useURLStateBatch();
const resetFlameGraphState = useResetFlameGraphState();
const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
- // URL state hooks with appropriate suffixes
- const [expression, setExpressionState] = useURLState(`expression${suffix}`, {
- defaultValue: defaultExpression,
- });
-
- const [from, setFromState] = useURLState(`from${suffix}`, {
- defaultValue: defaultFrom?.toString(),
- });
-
- const [to, setToState] = useURLState(`to${suffix}`, {
- defaultValue: defaultTo?.toString(),
- });
-
- const [timeSelection, setTimeSelectionState] = useURLState(`time_selection${suffix}`, {
- defaultValue: defaultTimeSelection,
- });
-
- const [sumByParam, setSumByParam] = useURLState(`sum_by${suffix}`);
-
- const [, setGroupByParam] = useURLState('group_by', {
- alwaysReturnArray: true,
- });
+ // URL state hooks with appropriate suffixes via useQueryStates
+ const [queryParams, setQueryParams] = useQueryStates(
+ {
+ expression: stringParam,
+ from: stringParam,
+ to: stringParam,
+ time_selection: stringParam,
+ sum_by: stringParam,
+ merge_from: stringParam,
+ merge_to: stringParam,
+ selection: stringParam,
+ },
+ {
+ history: 'replace',
+ urlKeys: {
+ expression: `expression${suffix}`,
+ from: `from${suffix}`,
+ to: `to${suffix}`,
+ time_selection: `time_selection${suffix}`,
+ sum_by: `sum_by${suffix}`,
+ merge_from: `merge_from${suffix}`,
+ merge_to: `merge_to${suffix}`,
+ selection: `selection${suffix}`,
+ },
+ }
+ );
- const [mergeFrom, setMergeFromState] = useURLState(`merge_from${suffix}`);
- const [mergeTo, setMergeToState] = useURLState(`merge_to${suffix}`);
+ const expression = queryParams.expression ?? defaultExpression;
+ const from = queryParams.from ?? defaultFrom?.toString();
+ const to = queryParams.to ?? defaultTo?.toString();
+ const timeSelection = queryParams.time_selection ?? defaultTimeSelection;
+ const sumByParam = queryParams.sum_by;
+ const mergeFrom = queryParams.merge_from;
+ const mergeTo = queryParams.merge_to;
+ const selectionParam = queryParams.selection;
+
+ // Individual setters for direct access
+ const setExpressionState = useCallback(
+ (val: string | null) => void setQueryParams({expression: val}),
+ [setQueryParams]
+ );
+ const setSumByParam = useCallback(
+ (val: string | null) => void setQueryParams({sum_by: val}),
+ [setQueryParams]
+ );
- // ProfileSelection URL state hooks - reuses merge_from/merge_to but adds selection
- const [selectionParam, setSelectionParam] = useURLState(`selection${suffix}`);
+ const [, setRawGroupByParam] = useNuqsQueryState('group_by', commaArrayParam);
+ const setGroupByParam = useCallback(
+ (val: string[] | null) => {
+ void setRawGroupByParam(val);
+ },
+ [setRawGroupByParam]
+ );
// Parse sumBy from URL parameter format
- const sumBy = useSumByFromParams(sumByParam);
+ const sumBy = useSumByFromParams(sumByParam ?? undefined);
// Draft state management
const [draftExpression, setDraftExpression] = useState(expression ?? defaultExpression);
@@ -203,8 +230,8 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
// Sync computed sumBy to URL if URL doesn't already have a value
// to ensure the shared URL can always pick it up.
useEffect(() => {
- if (sumByParam === undefined && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
- setSumByParam(sumByToParam(computedSumByFromURL));
+ if (sumByParam === null && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
+ void setSumByParam(sumByToParam(computedSumByFromURL));
}
}, [sumByParam, computedSumByFromURL, sumBySelectionLoading, setSumByParam]);
@@ -212,8 +239,8 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
const querySelection: QuerySelection = useMemo(() => {
const range = DateTimeRange.fromRangeKey(
timeSelection ?? defaultTimeSelection,
- from !== undefined && from !== '' ? parseInt(from) : defaultFrom,
- to !== undefined && to !== '' ? parseInt(to) : defaultTo
+ from != null && from !== '' ? parseInt(from) : defaultFrom,
+ to != null && to !== '' ? parseInt(to) : defaultTo
);
return {
@@ -222,7 +249,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
to: range.getToMs(),
timeSelection: range.getRangeKey(),
sumBy: computedSumByFromURL,
- ...(mergeFrom !== undefined && mergeFrom !== '' && mergeTo !== undefined && mergeTo !== ''
+ ...(mergeFrom != null && mergeFrom !== '' && mergeTo != null && mergeTo !== ''
? {mergeFrom, mergeTo}
: {}),
};
@@ -275,7 +302,11 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
// Compute ProfileSelection from URL params
const profileSelection = useMemo(() => {
- return ProfileSelectionFromParams(mergeFrom, mergeTo, selectionParam);
+ return ProfileSelectionFromParams(
+ mergeFrom ?? undefined,
+ mergeTo ?? undefined,
+ selectionParam ?? undefined
+ );
}, [mergeFrom, mergeTo, selectionParam]);
// Compute ProfileSource from ProfileSelection
@@ -293,83 +324,77 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
refreshedTimeRange?: {from: number; to: number; timeSelection: string},
expression?: string
) => {
- batchUpdates(() => {
- // Use provided expression or current draft expression
- const finalExpression = expression ?? draftExpression;
+ // Use provided expression or current draft expression
+ const finalExpression = expression ?? draftExpression;
- // Update draft state with new expression if provided
- if (expression !== undefined) {
- setDraftExpression(expression);
- }
+ // Update draft state with new expression if provided
+ if (expression !== undefined) {
+ setDraftExpression(expression);
+ }
- // Calculate the actual from/to values from draftSelection if not provided
- const calculatedFrom = draftSelection.from.toString();
- const calculatedTo = draftSelection.to.toString();
+ // Calculate the actual from/to values from draftSelection if not provided
+ const calculatedFrom = draftSelection.from.toString();
+ const calculatedTo = draftSelection.to.toString();
- const finalFrom =
- refreshedTimeRange?.from?.toString() ?? (draftFrom !== '' ? draftFrom : calculatedFrom);
- const finalTo =
- refreshedTimeRange?.to?.toString() ?? (draftTo !== '' ? draftTo : calculatedTo);
- const finalTimeSelection = refreshedTimeRange?.timeSelection ?? draftTimeSelection;
+ const finalFrom =
+ refreshedTimeRange?.from?.toString() ?? (draftFrom !== '' ? draftFrom : calculatedFrom);
+ const finalTo =
+ refreshedTimeRange?.to?.toString() ?? (draftTo !== '' ? draftTo : calculatedTo);
+ const finalTimeSelection = refreshedTimeRange?.timeSelection ?? draftTimeSelection;
- // Update draft state with refreshed time range if provided
- if (refreshedTimeRange?.from !== undefined) {
- setDraftFrom(finalFrom);
- }
- if (refreshedTimeRange?.to !== undefined) {
- setDraftTo(finalTo);
- }
- if (refreshedTimeRange?.timeSelection !== undefined) {
- setDraftTimeSelection(finalTimeSelection);
- }
+ // Update draft state with refreshed time range if provided
+ if (refreshedTimeRange?.from !== undefined) {
+ setDraftFrom(finalFrom);
+ }
+ if (refreshedTimeRange?.to !== undefined) {
+ setDraftTo(finalTo);
+ }
+ if (refreshedTimeRange?.timeSelection !== undefined) {
+ setDraftTimeSelection(finalTimeSelection);
+ }
- setExpressionState(finalExpression);
- setFromState(finalFrom);
- setToState(finalTo);
- setTimeSelectionState(finalTimeSelection);
-
- // Auto-calculate merge parameters for delta profiles
- // Parse the final expression to check if it's a delta profile
- const finalQuery = Query.parse(finalExpression);
- const isDelta = finalQuery.profileType().delta;
- if (isDelta) {
- setSumByParam(sumByToParam(draftSumBy));
- } else {
- setSumByParam(DEFAULT_EMPTY_SUM_BY);
- }
+ // Auto-calculate merge parameters for delta profiles
+ const finalQuery = Query.parse(finalExpression);
+ const isDelta = finalQuery.profileType().delta;
- if (isDelta && finalFrom !== '' && finalTo !== '') {
- const fromMs = parseInt(finalFrom);
- const toMs = parseInt(finalTo);
- setMergeFromState((BigInt(fromMs) * 1_000_000n).toString());
- setMergeToState((BigInt(toMs) * 1_000_000n).toString());
-
- // Auto-select the time range for delta profiles (but not in compare mode)
- // This applies both on initial load AND when Search is clicked
- // The selection will use the final expression and the updated time range
- if (!comparing) {
- setSelectionParam(finalExpression);
- } else {
- setSelectionParam(undefined);
- }
- } else {
- setMergeFromState(undefined);
- setMergeToState(undefined);
- // Clear ProfileSelection for non-delta profiles
- setSelectionParam(undefined);
- }
- resetFlameGraphState();
- if (
- draftProfileType.toString() !==
- Query.parse(querySelection.expression).profileType().toString()
- ) {
- resetStateOnProfileTypeChange();
- onProfileTypeChange?.();
+ const sumByValue = isDelta ? sumByToParam(draftSumBy) : sumByToParam(DEFAULT_EMPTY_SUM_BY);
+ let mergeFromValue: string | null = null;
+ let mergeToValue: string | null = null;
+ let selectionValue: string | null = null;
+
+ if (isDelta && finalFrom !== '' && finalTo !== '') {
+ const fromMs = parseInt(finalFrom);
+ const toMs = parseInt(finalTo);
+ mergeFromValue = (BigInt(fromMs) * 1_000_000n).toString();
+ mergeToValue = (BigInt(toMs) * 1_000_000n).toString();
+
+ if (!comparing) {
+ selectionValue = finalExpression;
}
+ }
+
+ // Atomic URL update with all params at once
+ void setQueryParams({
+ expression: finalExpression,
+ from: finalFrom,
+ to: finalTo,
+ time_selection: finalTimeSelection,
+ sum_by: sumByValue,
+ merge_from: mergeFromValue,
+ merge_to: mergeToValue,
+ selection: selectionValue,
});
+
+ resetFlameGraphState();
+ if (
+ draftProfileType.toString() !==
+ Query.parse(querySelection.expression).profileType().toString()
+ ) {
+ resetStateOnProfileTypeChange();
+ onProfileTypeChange?.();
+ }
},
[
- batchUpdates,
draftExpression,
draftFrom,
draftTo,
@@ -378,14 +403,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
draftSelection.from,
draftSelection.to,
comparing,
- setExpressionState,
- setFromState,
- setToState,
- setTimeSelectionState,
- setSumByParam,
- setMergeFromState,
- setMergeToState,
- setSelectionParam,
+ setQueryParams,
resetFlameGraphState,
resetStateOnProfileTypeChange,
onProfileTypeChange,
@@ -434,13 +452,13 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
// Set ProfileSelection (auto-commits to URL immediately)
const setProfileSelection = useCallback(
(mergeFrom: bigint, mergeTo: bigint, query: Query) => {
- batchUpdates(() => {
- setSelectionParam(query.toString());
- setMergeFromState(mergeFrom.toString());
- setMergeToState(mergeTo.toString());
+ void setQueryParams({
+ selection: query.toString(),
+ merge_from: mergeFrom.toString(),
+ merge_to: mergeTo.toString(),
});
},
- [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]
+ [setQueryParams]
);
const draftParsedQuery = useMemo(() => {
diff --git a/ui/packages/shared/profile/src/index.tsx b/ui/packages/shared/profile/src/index.tsx
index c0a1ececa07..cb15e520d81 100644
--- a/ui/packages/shared/profile/src/index.tsx
+++ b/ui/packages/shared/profile/src/index.tsx
@@ -14,8 +14,6 @@
import {CompressionType, setCompressionCodec} from '@uwdata/flechette';
import * as lz4 from 'lz4js';
-import type {ParamPreferences} from '@parca/components';
-
import MatchersInput from './MatchersInput';
import MetricsGraph, {type ContextMenuItemOrSubmenu, type Series} from './MetricsGraph';
import ProfileExplorer from './ProfileExplorer';
@@ -60,21 +58,24 @@ export {QueryControls} from './QueryControls';
export {default as ProfileFilters} from './ProfileView/components/ProfileFilters';
export {useProfileFiltersUrlState} from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
-export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences = {
- dashboard_items: {
- defaultValue: 'flamegraph',
- splitOnCommas: true, // This param should split on commas for array values
- },
- group_by: {
- splitOnCommas: true,
- },
- flamechart_dimension: {
- splitOnCommas: true,
- },
-};
-
export {useProfileTypes} from './ProfileSelector';
+export {
+ stringParam,
+ boolParam,
+ intParam,
+ commaArrayParam,
+ invertCallStackParser,
+ groupByParser,
+ flamechartDimensionParser,
+ tableColumnsParser,
+ hiddenBinariesParser,
+ jsonParser,
+} from './hooks/urlParsers';
+
+export {useDashboardItems} from './hooks/useDashboardItems';
+export {useColorBy} from './hooks/useColorBy';
+
export {
ProfileExplorer,
ProfileTypeSelector,
diff --git a/ui/packages/shared/profile/src/useSumBy.ts b/ui/packages/shared/profile/src/useSumBy.ts
index 935a4c18c95..19a2581a7d4 100644
--- a/ui/packages/shared/profile/src/useSumBy.ts
+++ b/ui/packages/shared/profile/src/useSumBy.ts
@@ -183,16 +183,16 @@ export const useSumByFromParams = (param: string | string[] | undefined): string
return sumBy;
};
-export const sumByToParam = (sumBy: string[] | undefined): string | string[] | undefined => {
+export const sumByToParam = (sumBy: string[] | undefined): string | null => {
if (sumBy === undefined) {
- return undefined;
+ return null;
}
if (sumBy.length === 0) {
return '__none__';
}
- return sumBy;
+ return sumBy.join(',');
};
// Combined hook that handles all sumBy logic: fetching labels, computing defaults, and managing selection
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index d0d74936598..0987343f43c 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -400,6 +400,9 @@ importers:
moment:
specifier: 2.30.1
version: 2.30.1
+ nuqs:
+ specifier: ^2.4.1
+ version: 2.8.9(react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-router@6.30.3(react@18.3.1))(react@18.3.1)
postcss:
specifier: 8.5.8
version: 8.5.8
@@ -576,6 +579,9 @@ importers:
moment-timezone:
specifier: ^0.6.0
version: 0.6.1
+ nuqs:
+ specifier: ^2.4.1
+ version: 2.8.9(react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-router@6.30.3(react@18.3.1))(react@18.3.1)
react-datepicker:
specifier: 6.9.0
version: 6.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -596,7 +602,7 @@ importers:
version: 1.14.0
tailwindcss:
specifier: 3.2.4
- version: 3.2.4(postcss@8.5.8)(ts-node@10.9.2(@swc/core@1.15.10(@swc/helpers@0.5.18))(@types/node@18.19.130)(typescript@5.9.3))
+ version: 3.2.4(postcss@8.5.8)(ts-node@10.9.2(@swc/core@1.15.10(@swc/helpers@0.5.18))(@types/node@24.10.9)(typescript@5.9.3))
tsc-watch:
specifier: 6.3.1
version: 6.3.1(typescript@5.9.3)
@@ -796,6 +802,9 @@ importers:
lz4js:
specifier: ^0.2.0
version: 0.2.0
+ nuqs:
+ specifier: ^2.4.1
+ version: 2.8.9(react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-router@6.30.3(react@18.3.1))(react@18.3.1)
react:
specifier: 18.3.1
version: 18.3.1
@@ -843,7 +852,7 @@ importers:
version: 17.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
tailwindcss:
specifier: 3.2.4
- version: 3.2.4(postcss@8.5.8)(ts-node@10.9.2(@swc/core@1.15.10(@swc/helpers@0.5.18))(@types/node@18.19.130)(typescript@5.9.3))
+ version: 3.2.4(postcss@8.5.8)(ts-node@10.9.2(@swc/core@1.15.10(@swc/helpers@0.5.18))(@types/node@24.10.9)(typescript@5.9.3))
tsc-watch:
specifier: 6.3.1
version: 6.3.1(typescript@5.9.3)
@@ -917,7 +926,7 @@ importers:
version: 3.2.0(date-fns@3.6.0)
tailwindcss:
specifier: 3.2.4
- version: 3.2.4(postcss@8.5.8)(ts-node@10.9.2(@swc/core@1.15.10(@swc/helpers@0.5.18))(@types/node@18.19.130)(typescript@5.9.3))
+ version: 3.2.4(postcss@8.5.8)(ts-node@10.9.2(@swc/core@1.15.10(@swc/helpers@0.5.18))(@types/node@24.10.9)(typescript@5.9.3))
tsc-watch:
specifier: 6.3.1
version: 6.3.1(typescript@5.9.3)
@@ -2834,49 +2843,42 @@ packages:
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
- libc: [glibc]
'@napi-rs/nice-linux-arm64-musl@1.1.1':
resolution: {integrity: sha512-+2Rzdb3nTIYZ0YJF43qf2twhqOCkiSrHx2Pg6DJaCPYhhaxbLcdlV8hCRMHghQ+EtZQWGNcS2xF4KxBhSGeutg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
- libc: [musl]
'@napi-rs/nice-linux-ppc64-gnu@1.1.1':
resolution: {integrity: sha512-4FS8oc0GeHpwvv4tKciKkw3Y4jKsL7FRhaOeiPei0X9T4Jd619wHNe4xCLmN2EMgZoeGg+Q7GY7BsvwKpL22Tg==}
engines: {node: '>= 10'}
cpu: [ppc64]
os: [linux]
- libc: [glibc]
'@napi-rs/nice-linux-riscv64-gnu@1.1.1':
resolution: {integrity: sha512-HU0nw9uD4FO/oGCCk409tCi5IzIZpH2agE6nN4fqpwVlCn5BOq0MS1dXGjXaG17JaAvrlpV5ZeyZwSon10XOXw==}
engines: {node: '>= 10'}
cpu: [riscv64]
os: [linux]
- libc: [glibc]
'@napi-rs/nice-linux-s390x-gnu@1.1.1':
resolution: {integrity: sha512-2YqKJWWl24EwrX0DzCQgPLKQBxYDdBxOHot1KWEq7aY2uYeX+Uvtv4I8xFVVygJDgf6/92h9N3Y43WPx8+PAgQ==}
engines: {node: '>= 10'}
cpu: [s390x]
os: [linux]
- libc: [glibc]
'@napi-rs/nice-linux-x64-gnu@1.1.1':
resolution: {integrity: sha512-/gaNz3R92t+dcrfCw/96pDopcmec7oCcAQ3l/M+Zxr82KT4DljD37CpgrnXV+pJC263JkW572pdbP3hP+KjcIg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
- libc: [glibc]
'@napi-rs/nice-linux-x64-musl@1.1.1':
resolution: {integrity: sha512-xScCGnyj/oppsNPMnevsBe3pvNaoK7FGvMjT35riz9YdhB2WtTG47ZlbxtOLpjeO9SqqQ2J2igCmz6IJOD5JYw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
- libc: [musl]
'@napi-rs/nice-openharmony-arm64@1.1.1':
resolution: {integrity: sha512-6uJPRVwVCLDeoOaNyeiW0gp2kFIM4r7PL2MczdZQHkFi9gVlgm+Vn+V6nTWRcu856mJ2WjYJiumEajfSm7arPQ==}
@@ -3048,25 +3050,21 @@ packages:
resolution: {integrity: sha512-NmPeCexWIZHW9RM3lDdFENN9C3WtlQ5L4RSNFESIjreS921rgePhulsszYdGnHdcnKPYlBBJnX/NxVsfioBbnQ==}
cpu: [arm64]
os: [linux]
- libc: [glibc]
'@nx/nx-linux-arm64-musl@22.3.3':
resolution: {integrity: sha512-K02U88Q0dpvCfmSXXvY7KbYQSa1m+mkYeqDBRHp11yHk1GoIqaHp8oEWda7FV4gsriNExPSS5tX1/QGVoLZrCw==}
cpu: [arm64]
os: [linux]
- libc: [musl]
'@nx/nx-linux-x64-gnu@22.3.3':
resolution: {integrity: sha512-04TEbvgwRaB9ifr39YwJmWh3RuXb4Ry4m84SOJyjNXAfPrepcWgfIQn1VL2ul1Ybq+P023dLO9ME8uqFh6j1YQ==}
cpu: [x64]
os: [linux]
- libc: [glibc]
'@nx/nx-linux-x64-musl@22.3.3':
resolution: {integrity: sha512-uxBXx5q+S5OGatbYDxnamsKXRKlYn+Eq1nrCAHaf8rIfRoHlDiRV2PqtWuF+O2pxR5FWKpvr+/sZtt9rAf7KMw==}
cpu: [x64]
os: [linux]
- libc: [musl]
'@nx/nx-win32-arm64-msvc@22.3.3':
resolution: {integrity: sha512-aOwlfD6ZA1K6hjZtbhBSp7s1yi3sHbMpLCa4stXzfhCCpKUv46HU/EdiWdE1N8AsyNFemPZFq81k1VTowcACdg==}
@@ -3167,42 +3165,36 @@ packages:
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
- libc: [glibc]
'@parcel/watcher-linux-arm-musl@2.5.4':
resolution: {integrity: sha512-kGO8RPvVrcAotV4QcWh8kZuHr9bXi9a3bSZw7kFarYR0+fGliU7hd/zevhjw8fnvIKG3J9EO5G6sXNGCSNMYPQ==}
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
- libc: [musl]
'@parcel/watcher-linux-arm64-glibc@2.5.4':
resolution: {integrity: sha512-KU75aooXhqGFY2W5/p8DYYHt4hrjHZod8AhcGAmhzPn/etTa+lYCDB2b1sJy3sWJ8ahFVTdy+EbqSBvMx3iFlw==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
- libc: [glibc]
'@parcel/watcher-linux-arm64-musl@2.5.4':
resolution: {integrity: sha512-Qx8uNiIekVutnzbVdrgSanM+cbpDD3boB1f8vMtnuG5Zau4/bdDbXyKwIn0ToqFhIuob73bcxV9NwRm04/hzHQ==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
- libc: [musl]
'@parcel/watcher-linux-x64-glibc@2.5.4':
resolution: {integrity: sha512-UYBQvhYmgAv61LNUn24qGQdjtycFBKSK3EXr72DbJqX9aaLbtCOO8+1SkKhD/GNiJ97ExgcHBrukcYhVjrnogA==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
- libc: [glibc]
'@parcel/watcher-linux-x64-musl@2.5.4':
resolution: {integrity: sha512-YoRWCVgxv8akZrMhdyVi6/TyoeeMkQ0PGGOf2E4omODrvd1wxniXP+DBynKoHryStks7l+fDAMUBRzqNHrVOpg==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
- libc: [musl]
'@parcel/watcher-win32-arm64@2.5.4':
resolution: {integrity: sha512-iby+D/YNXWkiQNYcIhg8P5hSjzXEHaQrk2SLrWOUD7VeC4Ohu0WQvmV+HDJokZVJ2UjJ4AGXW3bx7Lls9Ln4TQ==}
@@ -3375,79 +3367,66 @@ packages:
resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==}
cpu: [arm]
os: [linux]
- libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.60.1':
resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==}
cpu: [arm]
os: [linux]
- libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.60.1':
resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==}
cpu: [arm64]
os: [linux]
- libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.60.1':
resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==}
cpu: [arm64]
os: [linux]
- libc: [musl]
'@rollup/rollup-linux-loong64-gnu@4.60.1':
resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==}
cpu: [loong64]
os: [linux]
- libc: [glibc]
'@rollup/rollup-linux-loong64-musl@4.60.1':
resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==}
cpu: [loong64]
os: [linux]
- libc: [musl]
'@rollup/rollup-linux-ppc64-gnu@4.60.1':
resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==}
cpu: [ppc64]
os: [linux]
- libc: [glibc]
'@rollup/rollup-linux-ppc64-musl@4.60.1':
resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==}
cpu: [ppc64]
os: [linux]
- libc: [musl]
'@rollup/rollup-linux-riscv64-gnu@4.60.1':
resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==}
cpu: [riscv64]
os: [linux]
- libc: [glibc]
'@rollup/rollup-linux-riscv64-musl@4.60.1':
resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==}
cpu: [riscv64]
os: [linux]
- libc: [musl]
'@rollup/rollup-linux-s390x-gnu@4.60.1':
resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==}
cpu: [s390x]
os: [linux]
- libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.60.1':
resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==}
cpu: [x64]
os: [linux]
- libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.60.1':
resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==}
cpu: [x64]
os: [linux]
- libc: [musl]
'@rollup/rollup-openbsd-x64@4.60.1':
resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==}
@@ -3534,6 +3513,9 @@ packages:
'@sinonjs/fake-timers@8.1.0':
resolution: {integrity: sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==}
+ '@standard-schema/spec@1.0.0':
+ resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
'@storybook/addon-actions@8.6.14':
resolution: {integrity: sha512-mDQxylxGGCQSK7tJPkD144J8jWh9IU9ziJMHfB84PKpI/V5ZgqMDnpr2bssTrUaGDqU5e1/z8KcRF+Melhs9pQ==}
peerDependencies:
@@ -4018,28 +4000,24 @@ packages:
engines: {node: '>=10'}
cpu: [arm64]
os: [linux]
- libc: [glibc]
'@swc/core-linux-arm64-musl@1.15.10':
resolution: {integrity: sha512-4uAHO3nbfbrTcmO/9YcVweTQdx5fN3l7ewwl5AEK4yoC4wXmoBTEPHAVdKNe4r9+xrTgd4BgyPsy0409OjjlMw==}
engines: {node: '>=10'}
cpu: [arm64]
os: [linux]
- libc: [musl]
'@swc/core-linux-x64-gnu@1.15.10':
resolution: {integrity: sha512-W0h9ONNw1pVIA0cN7wtboOSTl4Jk3tHq+w2cMPQudu9/+3xoCxpFb9ZdehwCAk29IsvdWzGzY6P7dDVTyFwoqg==}
engines: {node: '>=10'}
cpu: [x64]
os: [linux]
- libc: [glibc]
'@swc/core-linux-x64-musl@1.15.10':
resolution: {integrity: sha512-XQNZlLZB62S8nAbw7pqoqwy91Ldy2RpaMRqdRN3T+tAg6Xg6FywXRKCsLh6IQOadr4p1+lGnqM/Wn35z5a/0Vw==}
engines: {node: '>=10'}
cpu: [x64]
os: [linux]
- libc: [musl]
'@swc/core-win32-arm64-msvc@1.15.10':
resolution: {integrity: sha512-qnAGrRv5Nj/DATxAmCnJQRXXQqnJwR0trxLndhoHoxGci9MuguNIjWahS0gw8YZFjgTinbTxOwzatkoySihnmw==}
@@ -9944,6 +9922,27 @@ packages:
nth-check@2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+ nuqs@2.8.9:
+ resolution: {integrity: sha512-8ou6AEwsxMWSYo2qkfZtYFVzngwbKmg4c00HVxC1fF6CEJv3Fwm6eoZmfVPALB+vw8Udo7KL5uy96PFcYe1BIQ==}
+ peerDependencies:
+ '@remix-run/react': '>=2'
+ '@tanstack/react-router': ^1
+ next: '>=14.2.0'
+ react: '>=18.2.0 || ^19.0.0-0'
+ react-router: ^5 || ^6 || ^7
+ react-router-dom: ^5 || ^6 || ^7
+ peerDependenciesMeta:
+ '@remix-run/react':
+ optional: true
+ '@tanstack/react-router':
+ optional: true
+ next:
+ optional: true
+ react-router:
+ optional: true
+ react-router-dom:
+ optional: true
+
nwsapi@2.2.23:
resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
@@ -11160,7 +11159,6 @@ packages:
engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
deprecated: |-
You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
-
(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
qrcode-terminal@0.12.0:
@@ -16538,6 +16536,8 @@ snapshots:
dependencies:
'@sinonjs/commons': 1.8.6
+ '@standard-schema/spec@1.0.0': {}
+
'@storybook/addon-actions@8.6.14(storybook@8.6.18(prettier@3.8.1))':
dependencies:
'@storybook/global': 5.0.0
@@ -24847,6 +24847,14 @@ snapshots:
dependencies:
boolbase: 1.0.0
+ nuqs@2.8.9(react-router-dom@6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-router@6.30.3(react@18.3.1))(react@18.3.1):
+ dependencies:
+ '@standard-schema/spec': 1.0.0
+ react: 18.3.1
+ optionalDependencies:
+ react-router: 6.30.3(react@18.3.1)
+ react-router-dom: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
nwsapi@2.2.23: {}
nx@22.3.3(@swc/core@1.15.10(@swc/helpers@0.5.18)):