ui: Query selector state refactoring and batchUpdates support in URLState (#6033)

* Query selector state refactoring and batchUpdates support in URLState

* Linter and type fixes

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

* Compare mode and metrics graph selection bug fix

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

* test failures fixed

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

* Linter fix

* Removed the todo comment as this defaultValues is needed in the hook

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

* Fix the 'focus only on this series' not working

* SumBy not blanking if it already has a value

* SumBy state moved into QueryState hook

* Skip waiting for the label names query for the metrics graph when the sum by is already set in the url

* Fixed the condition

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

* test fix

* Linter fix

* Test fixes

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

* URL compare bug fix

* Sumby value copied over to compare mode

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

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: manojVivek

ui/packages/app/web/src/components/ui/Navbar.tsx

@@ -58,7 +58,8 @@ const Navbar = () => {
   const queryParams = new URLSearchParams(location.search);
   const expressionA = queryParams.get('expression_a');
   const expressionB = queryParams.get('expression_b');
-  const comparing = queryParams.get('comparing');
+  const compareA = queryParams.get('compare_a');
+  const compareB = queryParams.get('compare_b');
 
   const queryParamsURL = parseParams(window.location.search);
 
@@ -72,6 +73,7 @@ const Navbar = () => {
     dashboard_items,
     selection_a,
     expression_a,
+    sum_by_a,
   } = queryParamsURL;
 
   const isComparePage = expressionA !== null && expressionB !== null;
@@ -87,9 +89,13 @@ const Navbar = () => {
   const compareExplanation =
     'Compare two profiles and see the relative difference between them more clearly.';
 
-  const isCurrentPage = (item: {label: string; href: string; external: boolean}) =>
-    (item.href === 'compare' && (isComparePage || comparing === 'true')) ||
-    (!isComparePage && comparing !== 'true' && location.pathname === item.href);
+  const isCurrentPage = (item: {label: string; href: string; external: boolean}) => {
+    const isCompareMode = compareA === 'true' || compareB === 'true';
+    return (
+      (item.href === 'compare' && (isComparePage || isCompareMode)) ||
+      (!isComparePage && !isCompareMode && location.pathname === item.href)
+    );
+  };
 
   const navigateTo = useCallback(
     (path: string, queryParams: any, options?: {replace?: boolean}) => {
@@ -107,18 +113,25 @@ const Navbar = () => {
   const queryToBePassed =
     expression_a === undefined
       ? {
-          comparing: 'true',
+          compare_a: 'true',
+          compare_b: 'true',
         }
       : {
-          comparing: 'true',
+          compare_a: 'true',
+          compare_b: 'true',
           dashboard_items: dashboard_items,
           expression_a: expression_a,
+          expression_b: expression_a,
           from_a: from_a,
+          from_b: from_a,
           to_a: to_a,
+          to_b: to_a,
           time_selection_a: time_selection_a,
+          time_selection_b: time_selection_a,
           selection_a: selection_a,
           merge_from_a: merge_from_a,
           merge_to_a: merge_to_a,
+          ...(sum_by_a !== undefined && sum_by_a !== '' ? {sum_by_a, sum_by_b: sum_by_a} : {}),
         };
 
   return (

ui/packages/app/web/src/pages/index.tsx

@@ -14,13 +14,13 @@
 import {useCallback} from 'react';
 
 import {GrpcWebFetchTransport} from '@protobuf-ts/grpcweb-transport';
-import {useLocation, useNavigate} from 'react-router-dom';
+import {useNavigate} from 'react-router-dom';
 
 import {QueryServiceClient} from '@parca/client';
 import {ParcaContextProvider, Spinner, URLStateProvider} from '@parca/components';
 import {DEFAULT_PROFILE_EXPLORER_PARAM_VALUES, ProfileExplorer} from '@parca/profile';
 import {selectDarkMode, useAppSelector} from '@parca/store';
-import {convertToQueryParams, parseParams} from '@parca/utilities';
+import {convertToQueryParams} from '@parca/utilities';
 
 const apiEndpoint = import.meta.env.VITE_API_ENDPOINT;
 
@@ -31,7 +31,6 @@ const queryClient = new QueryServiceClient(
 );
 
 const Profiles = () => {
-  const location = useLocation();
   const navigate = useNavigate();
   const isDarkMode = useAppSelector(selectDarkMode);
 
@@ -47,10 +46,11 @@ const Profiles = () => {
     [navigate]
   );
 
-  const queryParams = parseParams(location.search);
-
   return (
-    <URLStateProvider navigateTo={navigateTo} defaultValues={DEFAULT_PROFILE_EXPLORER_PARAM_VALUES}>
+    <URLStateProvider
+      navigateTo={navigateTo}
+      paramPreferences={DEFAULT_PROFILE_EXPLORER_PARAM_VALUES}
+    >
       <ParcaContextProvider
         value={{
           Spinner,
@@ -61,11 +61,7 @@ const Profiles = () => {
         }}
       >
         <div className="bg-white dark:bg-gray-900 p-3">
-          <ProfileExplorer
-            queryClient={queryClient}
-            queryParams={queryParams}
-            navigateTo={navigateTo}
-          />
+          <ProfileExplorer queryClient={queryClient} navigateTo={navigateTo} />
         </div>
       </ParcaContextProvider>
     </URLStateProvider>

ui/packages/shared/components/src/hooks/URLState/README.md

@@ -0,0 +1,104 @@
+# URLState Hook Usage Guide
+
+The `useURLState` hook provides a simple way to sync component state with URL query parameters. It now includes built-in batching support for efficient URL updates.
+
+## Basic Usage
+
+```tsx
+import {useURLState} from '@parca/components';
+
+function MyComponent() {
+  const [colorBy, setColorBy] = useURLState('color_by', {
+    defaultValue: 'function',
+  });
+
+  const [groupBy, setGroupBy] = useURLState<string[]>('group_by', {
+    defaultValue: ['function_name'],
+    alwaysReturnArray: true,
+  });
+
+  // Use the state values and setters as normal
+  return (
+    <div>
+      <button onClick={() => setColorBy('filename')}>Change Color</button>
+    </div>
+  );
+}
+```
+
+## Batching Multiple Updates
+
+When you need to update multiple URL parameters simultaneously, use `useURLStateBatch` to ensure a single URL update:
+
+```tsx
+import {useURLState, useURLStateBatch} from '@parca/components';
+
+function ProfileFilters() {
+  const [colorBy, setColorBy] = useURLState('color_by');
+  const [groupBy, setGroupBy] = useURLState<string[]>('group_by', {
+    alwaysReturnArray: true,
+  });
+  const [view, setView] = useURLState('view');
+
+  // Get the batch function
+  const batchUpdates = useURLStateBatch();
+
+  const handleComplexFilterChange = () => {
+    // Batch multiple URL updates into a single navigation
+    batchUpdates(() => {
+      setColorBy('filename');
+      setGroupBy(['function_name', 'filename']);
+      setView('table');
+    });
+    // Results in ONE URL update instead of three!
+  };
+
+  return <button onClick={handleComplexFilterChange}>Apply All Filters</button>;
+}
+```
+
+## Key Features
+
+### Automatic URL Synchronization
+
+- All URL updates are now handled centrally by the `URLStateProvider`
+- Individual hooks only manage state; URL sync happens automatically
+- Built-in debouncing prevents excessive URL updates
+
+### Batching Support
+
+- Use `batchUpdates` to group multiple parameter changes
+- Prevents multiple browser history entries
+- Improves performance for complex state updates
+- Essential for maintaining URL coherence when multiple related parameters change
+
+## Migration from Direct Navigation
+
+Previously, the ProfileSelector component managed URL updates directly:
+
+With the new approach, you can use individual `useURLState` hooks with batching:
+
+```tsx
+// New approach - automatic URL sync with batching
+const [expression, setExpression] = useURLState('expression_a');
+const [from, setFrom] = useURLState('from_a');
+const [to, setTo] = useURLState('to_a');
+const batchUpdates = useURLStateBatch();
+
+const selectQuery = (q: QuerySelection): void => {
+  batchUpdates(() => {
+    setExpression(q.expression);
+    setFrom(q.from.toString());
+    setTo(q.to.toString());
+    // All updates result in a single URL change
+  });
+};
+```
+
+## Benefits
+
+1. **Simpler Code**: No need to manually construct URL parameter objects
+2. **Better Performance**: Batching prevents multiple rapid URL updates
+3. **Cleaner History**: One history entry instead of multiple for related changes
+4. **Type Safety**: Each parameter is individually typed
+5. **Easier Testing**: URL synchronization logic is centralized and testable