ui: Using nuqs default options to enforce history behaviour (#6374)

manojVivek · pre-commit-ci-lite[bot] · web-flow · commit 499025bb52e2 · 2026-07-02T10:20:59.000+05:30
* Using nuqs default options to enforce history behaviour

* [pre-commit.ci lite] apply automatic fixes

* touch

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] &lt;117423508+pre-commit-ci-lite[bot]@users.noreply.github.com&gt;
diff --git a/ui/.eslintrc.yml b/ui/.eslintrc.yml
@@ -30,7 +30,6 @@ plugins:
   - '@typescript-eslint'
   - react-hooks
   - typescript-enum
-  - local-rules
 
 settings:
   import/resolver:
@@ -76,13 +75,3 @@ rules:
   import/export: 2
 
   promise/catch-or-return: [error, {allowFinally: true}]
-
-# Profiler URL state must be back-button friendly: every writable nuqs param has
-# to declare its history mode explicitly (push for user actions, replace for
-# seeding/reset). Rule lives in eslint-local-rules/index.cjs.
-overrides:
-  - files:
-      - 'packages/shared/profile/**/*.ts'
-      - 'packages/shared/profile/**/*.tsx'
-    rules:
-      local-rules/require-nuqs-history: error
diff --git a/ui/eslint-local-rules/index.cjs b/ui/eslint-local-rules/index.cjs
diff --git a/ui/eslint-local-rules/package.json b/ui/eslint-local-rules/package.json
diff --git a/ui/package.json b/ui/package.json
@@ -78,7 +78,6 @@
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jest": "26.9.0",
     "eslint-plugin-jest-dom": "4.0.3",
-    "eslint-plugin-local-rules": "^3.0.2",
     "eslint-plugin-n": "15.7.0",
     "eslint-plugin-prettier": "5.5.5",
     "eslint-plugin-promise": "6.6.0",
diff --git a/ui/packages/app/web/package.json b/ui/packages/app/web/package.json
@@ -46,7 +46,7 @@
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "^4.1.1",
     "moment": "2.30.1",
-    "nuqs": "^2.4.1",
+    "nuqs": "^2.9.0",
     "postcss": "8.5.10",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-preset-env": "8.5.1",
diff --git a/ui/packages/app/web/src/App.tsx b/ui/packages/app/web/src/App.tsx
@@ -69,7 +69,7 @@ const App = () => {
     <Provider store={reduxStore}>
       <PersistGate loading={null} persistor={persistor}>
         <BrowserRouter basename={getBasename()}>
-          <NuqsAdapter>
+          <NuqsAdapter defaultOptions={{history: 'push'}}>
             <QueryClientProvider client={queryClient}>
               <ThemeProvider>
                 <Header />
diff --git a/ui/packages/shared/components/package.json b/ui/packages/shared/components/package.json
@@ -37,7 +37,7 @@
     "graphviz-wasm": "3.0.2",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.6.0",
-    "nuqs": "^2.4.1",
+    "nuqs": "^2.9.0",
     "react-datepicker": "6.9.0",
     "react-popper": "^2.3.0",
     "react-textarea-autosize": "^8.4.0",
diff --git a/ui/packages/shared/profile/README.md b/ui/packages/shared/profile/README.md
@@ -1 +1 @@
-# Parca Profile Libraries
+## Parca Profile Libraries
diff --git a/ui/packages/shared/profile/package.json b/ui/packages/shared/profile/package.json
@@ -42,7 +42,7 @@
     "graphviz-wasm": "3.0.2",
     "lodash.throttle": "^4.1.1",
     "lz4js": "^0.2.0",
-    "nuqs": "^2.4.1",
+    "nuqs": "^2.9.0",
     "react": "18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-contexify": "^6.0.0",
diff --git a/ui/packages/shared/profile/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts b/ui/packages/shared/profile/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts
@@ -105,20 +105,11 @@ export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaIn
 
   const {dashboardItems, setDashboardItems} = useDashboardItems();
 
-  const [_unusedBuildId, setSourceBuildId] = useQueryState(
-    'source_buildid',
-    stringParam.withOptions({history: 'push'})
-  );
+  const [_unusedBuildId, setSourceBuildId] = useQueryState('source_buildid', stringParam);
 
-  const [_unusedFilename, setSourceFilename] = useQueryState(
-    'source_filename',
-    stringParam.withOptions({history: 'push'})
-  );
+  const [_unusedFilename, setSourceFilename] = useQueryState('source_filename', stringParam);
 
-  const [_unusedLine, setSourceLine] = useQueryState(
-    'source_line',
-    stringParam.withOptions({history: 'push'})
-  );
+  const [_unusedLine, setSourceLine] = useQueryState('source_line', stringParam);
 
   const openFile = (): void => {
     setDashboardItems([dashboardItems[0], 'source']);
diff --git a/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx b/ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx
@@ -89,7 +89,7 @@ const ContextMenu = ({
   const {dashboardItems, setDashboardItems} = useDashboardItems();
   const [_sandwichFunctionName, setSandwichFunctionName] = useQueryState(
     'sandwich_function_name',
-    stringParam.withOptions({history: 'push'})
+    stringParam
   );
 
   if (contextMenuData === null) {
diff --git a/ui/packages/shared/profile/src/ProfileView/components/ActionButtons/SortByDropdown.tsx b/ui/packages/shared/profile/src/ProfileView/components/ActionButtons/SortByDropdown.tsx
@@ -26,7 +26,7 @@ import {useProfileViewContext} from '../../context/ProfileViewContext';
 const SortByDropdown = (): React.JSX.Element => {
   const [storeSortBy, setStoreSortBy] = useQueryState(
     'sort_by',
-    stringParam.withDefault(FIELD_FUNCTION_NAME).withOptions({history: 'push'})
+    stringParam.withDefault(FIELD_FUNCTION_NAME)
   );
 
   const {compareMode} = useProfileViewContext();
diff --git a/ui/packages/shared/profile/src/ProfileView/components/InvertCallStack/index.tsx b/ui/packages/shared/profile/src/ProfileView/components/InvertCallStack/index.tsx
@@ -21,10 +21,7 @@ import {invertCallStackParser} from '../../../hooks/urlParsers';
 import {useResetFlameGraphState} from '../../hooks/useResetFlameGraphState';
 
 const InvertCallStack = (): JSX.Element => {
-  const [isInvert, setInvertStack] = useQueryState(
-    'invert_call_stack',
-    invertCallStackParser.withOptions({history: 'push'})
-  );
+  const [isInvert, setInvertStack] = useQueryState('invert_call_stack', invertCallStackParser);
   const resetFlameGraphState = useResetFlameGraphState();
 
   const handleSetInvert = (value: boolean): void => {
diff --git a/ui/packages/shared/profile/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx b/ui/packages/shared/profile/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx
@@ -213,11 +213,11 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   const [storeSortBy] = useQueryState('sort_by', stringParam.withDefault(FIELD_FUNCTION_NAME));
   const [colorStackLegend, setStoreColorStackLegend] = useQueryState(
     'color_stack_legend',
-    stringParam.withOptions({history: 'push'})
+    stringParam
   );
   const [hiddenBinaries, setHiddenBinaries] = useQueryState(
     'hidden_binaries',
-    hiddenBinariesParser.withOptions({history: 'push'})
+    hiddenBinariesParser
   );
   const {compareMode} = useProfileViewContext();
   const [colorProfileName] = useUserPreference<string>(
@@ -230,10 +230,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
   const compareAbsoluteDefault = profileType?.delta === false;
 
-  const [compareAbsolute, setCompareAbsolute] = useQueryState(
-    'compare_absolute',
-    boolParam.withOptions({history: 'push'})
-  );
+  const [compareAbsolute, setCompareAbsolute] = useQueryState('compare_absolute', boolParam);
   const isCompareAbsolute = compareAbsolute ?? compareAbsoluteDefault;
 
   useEffect(() => {
diff --git a/ui/packages/shared/profile/src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx b/ui/packages/shared/profile/src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx
@@ -33,10 +33,7 @@ interface Props {
 
 const TableColumnsDropdown = ({profileType, total, filtered}: Props): JSX.Element => {
   const {compareMode} = useProfileViewContext();
-  const [tableColumns, setTableColumns] = useQueryState(
-    'table_columns',
-    tableColumnsParser.withOptions({history: 'push'})
-  );
+  const [tableColumns, setTableColumns] = useQueryState('table_columns', tableColumnsParser);
 
   const columnHelper = createColumnHelper<Row>();
 
diff --git a/ui/packages/shared/profile/src/ProfileView/hooks/useVisualizationState.ts b/ui/packages/shared/profile/src/ProfileView/hooks/useVisualizationState.ts
@@ -58,7 +58,7 @@ export const useVisualizationState = (): {
 
   const [curPathArrow, setRawCurPathArrow] = useQueryState(
     'cur_path',
-    jsonParser<CurrentPathFrame[]>().withDefault([]).withOptions({history: 'push'})
+    jsonParser<CurrentPathFrame[]>().withDefault([])
   );
   const setCurPathArrow = useCallback(
     (path: CurrentPathFrame[]) => {
@@ -70,14 +70,14 @@ export const useVisualizationState = (): {
   const {colorBy, setColorBy} = useColorBy();
   const [alignFunctionNameRaw, setStoreAlignFunctionName] = useQueryState(
     'align_function_name',
-    stringParam.withOptions({history: 'push'})
+    stringParam
   );
   const alignFunctionName = alignFunctionNameRaw ?? alignFunctionNamePreference ?? 'left';
   const [groupBy, setStoreGroupBy] = useQueryState(
     'group_by',
-    groupByParser.withDefault([FIELD_FUNCTION_NAME]).withOptions({history: 'push'})
+    groupByParser.withDefault([FIELD_FUNCTION_NAME])
   );
-  // Shared with resetSandwichFunctionName below, so keep the default 'replace';
+  // Shared with resetSandwichFunctionName below, so override to 'replace';
   // user "show in sandwich" actions push from the Table/flamegraph menus.
   const [sandwichFunctionName, setRawSandwichFunctionName] = useQueryState(
     'sandwich_function_name',
@@ -91,7 +91,7 @@ export const useVisualizationState = (): {
   );
   const [flamechartDimension, setStoreFlamechartDimension] = useQueryState(
     'flamechart_dimension',
-    flamechartDimensionParser.withDefault([]).withOptions({history: 'push'})
+    flamechartDimensionParser.withDefault([])
   );
   const resetFlameGraphState = useResetFlameGraphState();
 
diff --git a/ui/packages/shared/profile/src/SourceView/useSelectedLineRange.ts b/ui/packages/shared/profile/src/SourceView/useSelectedLineRange.ts
@@ -40,7 +40,7 @@ interface LineRange {
 const useLineRange = (): LineRange => {
   const [lineRange, setRawLineRange] = useQueryState(
     'source_line',
-    lineRangeParser.withDefault({start: -1, end: -1}).withOptions({history: 'push'})
+    lineRangeParser.withDefault({start: -1, end: -1})
   );
 
   const setLineRange = useCallback(
diff --git a/ui/packages/shared/profile/src/Table/MoreDropdown.tsx b/ui/packages/shared/profile/src/Table/MoreDropdown.tsx
@@ -21,10 +21,7 @@ import {stringParam} from '../hooks/urlParsers';
 import {useDashboardItems} from '../hooks/useDashboardItems';
 
 const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
-  const [_, setSandwichFunctionName] = useQueryState(
-    'sandwich_function_name',
-    stringParam.withOptions({history: 'push'})
-  );
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
   const {dashboardItems, setDashboardItems} = useDashboardItems();
   const {enableSandwichView} = useParcaContext();
 
diff --git a/ui/packages/shared/profile/src/Table/TableContextMenu.tsx b/ui/packages/shared/profile/src/Table/TableContextMenu.tsx
@@ -45,10 +45,7 @@ const TableContextMenu = ({
   totalUnfiltered,
   columnVisibility,
 }: TableContextMenuProps): React.JSX.Element => {
-  const [_, setSandwichFunctionName] = useQueryState(
-    'sandwich_function_name',
-    stringParam.withOptions({history: 'push'})
-  );
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
   const {dashboardItems, setDashboardItems} = useDashboardItems();
   const {enableSandwichView, isDarkMode} = useParcaContext();
 
diff --git a/ui/packages/shared/profile/src/Table/index.tsx b/ui/packages/shared/profile/src/Table/index.tsx
@@ -76,10 +76,7 @@ export const Table = React.memo(function Table({
 }: TableProps): React.JSX.Element {
   const currentColorProfile = useCurrentColorProfile();
   const {dashboardItems} = useDashboardItems();
-  const [_, setSandwichFunctionName] = useQueryState(
-    'sandwich_function_name',
-    stringParam.withOptions({history: 'push'})
-  );
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
   const {colorBy, setColorBy} = useColorBy();
   const {isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
diff --git a/ui/packages/shared/profile/src/hooks/useColorBy.ts b/ui/packages/shared/profile/src/hooks/useColorBy.ts
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-# Parca Profile Libraries`
	`1`	`+## Parca Profile Libraries`