@parca/profile 0.19.73 → 0.19.74

package/src/ProfileSelector/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Dispatch, SetStateAction, useEffect, useMemo, useRef, useState} from 'react';
+import {Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
@@ -28,12 +28,11 @@ import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, type NavigateFunction} from '@parca/utilities';
 
-import {ProfileSelection} from '..';
 import {useLabelNames} from '../MatchersInput/index';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
 import {UtilizationLabelsProvider} from '../contexts/UtilizationLabelsContext';
+import {useQueryState} from '../hooks/useQueryState';
 import useGrpcQuery from '../useGrpcQuery';
-import {useDefaultSumBy, useSumBySelection} from '../useSumBy';
 import {MetricsGraphSection} from './MetricsGraphSection';
 import {QueryControls} from './QueryControls';
 import {useAutoQuerySelector} from './useAutoQuerySelector';
@@ -79,16 +78,12 @@ export interface UtilizationLabels {
 
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
   queryClient: QueryServiceClient;
-  querySelection: QuerySelection;
-  selectProfile: (source: ProfileSelection) => void;
-  selectQuery: (query: QuerySelection) => void;
   closeProfile: () => void;
   enforcedProfileName: string;
-  profileSelection: ProfileSelection | null;
   comparing: boolean;
   navigateTo: NavigateFunction;
   setDisplayHideMetricsGraphButton?: Dispatch<SetStateAction<boolean>>;
-  suffix?: string;
+  suffix?: '_a' | '_b'; // For comparison mode
   utilizationMetrics?: Array<{
     name: string;
     humanReadableName: string;
@@ -135,12 +130,8 @@ export const useProfileTypes = (
 
 const ProfileSelector = ({
   queryClient,
-  querySelection,
-  selectProfile,
-  selectQuery,
   closeProfile,
   enforcedProfileName,
-  profileSelection,
   comparing,
   navigateTo,
   showMetricsGraph = true,
@@ -148,6 +139,7 @@ const ProfileSelector = ({
   showProfileTypeSelector = true,
   disableExplorativeQuerying = false,
   setDisplayHideMetricsGraphButton,
+  suffix,
   utilizationMetrics,
   utilizationMetricsLoading,
   utilizationLabels,
@@ -157,24 +149,45 @@ const ProfileSelector = ({
   const {viewComponent} = useParcaContext();
   const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
 
+  // Use the new useQueryState hook - reads directly from URL params
+  const {
+    querySelection,
+    draftSelection,
+    setDraftExpression,
+    setDraftTimeRange,
+    setDraftSumBy,
+    setDraftProfileName,
+    setDraftMatchers,
+    commitDraft,
+    profileSelection,
+    setProfileSelection,
+    sumByLoading,
+  } = useQueryState({suffix});
+
+  // Use draft state for local state instead of committed state
   const [timeRangeSelection, setTimeRangeSelection] = useState(
-    DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to)
+    DateTimeRange.fromRangeKey(draftSelection.timeSelection, draftSelection.from, draftSelection.to)
   );
 
-  const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
+  const [queryExpressionString, setQueryExpressionString] = useState(draftSelection.expression);
 
   const [advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser] = useState(
     queryBrowserMode === 'advanced'
   );
 
+  // Handler to update draft when time range changes
+  const handleTimeRangeChange = useCallback(
+    (range: DateTimeRange) => {
+      setTimeRangeSelection(range);
+      setDraftTimeRange(range.getFromMs(), range.getToMs(), range.getRangeKey());
+    },
+    [setDraftTimeRange]
+  );
+
   const profileType = useMemo(() => {
     return Query.parse(queryExpressionString).profileType();
   }, [queryExpressionString]);
 
-  const selectedProfileType = useMemo(() => {
-    return Query.parse(querySelection.expression).profileType();
-  }, [querySelection.expression]);
-
   const from = timeRangeSelection.getFromMs();
   const to = timeRangeSelection.getToMs();
 
@@ -184,39 +197,12 @@ const ProfileSelector = ({
     error,
   } = useProfileTypes(queryClient, from, to);
 
-  const {
-    loading: labelNamesLoading,
-    result,
-    refetch,
-  } = useLabelNames(queryClient, profileType.toString(), from, to);
-  const {loading: selectedLabelNamesLoading, result: selectedLabelNamesResult} = useLabelNames(
-    queryClient,
-    selectedProfileType.toString(),
-    from,
-    to
-  );
+  const {result, refetch} = useLabelNames(queryClient, profileType.toString(), from, to);
 
   const labels = useMemo(() => {
     return result.response?.labelNames === undefined ? [] : result.response.labelNames;
   }, [result]);
 
-  const selectedLabels = useMemo(() => {
-    return selectedLabelNamesResult.response?.labelNames === undefined
-      ? []
-      : selectedLabelNamesResult.response.labelNames;
-  }, [selectedLabelNamesResult]);
-
-  const [sumBySelection, setUserSumBySelection, {isLoading: sumBySelectionLoading}] =
-    useSumBySelection(profileType, labelNamesLoading, labels, {
-      defaultValue: querySelection.sumBy,
-    });
-
-  const {defaultSumBy, isLoading: defaultSumByLoading} = useDefaultSumBy(
-    selectedProfileType,
-    selectedLabelNamesLoading,
-    selectedLabels
-  );
-
   useEffect(() => {
     if (enforcedProfileName !== '') {
       const [q, changed] = Query.parse(querySelection.expression).setProfileName(
@@ -240,41 +226,37 @@ const ProfileSelector = ({
     enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
   const selectedProfileName = query.profileName();
 
-  const setNewQueryExpression = (expr: string, updateTs = false): void => {
-    const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
-    const delta = query.profileType().delta;
-    const from = timeRangeSelection.getFromMs(updateTs);
-    const to = timeRangeSelection.getToMs(updateTs);
-    const mergeParams = delta
-      ? {
-          mergeFrom: (BigInt(from) * 1_000_000n).toString(),
-          mergeTo: (BigInt(to) * 1_000_000n).toString(),
-        }
-      : {};
-
-    selectQuery({
-      expression: expr,
-      from,
-      to,
-      timeSelection: timeRangeSelection.getRangeKey(),
-      sumBy: sumBySelection,
-      ...mergeParams,
-    });
-  };
-
   const setQueryExpression = (updateTs = false): void => {
-    setNewQueryExpression(query.toString(), updateTs);
+    // When updateTs is true, re-evaluate the time range to current values
+    if (updateTs) {
+      // Force re-evaluation of time range (important for relative ranges like "last 15 minutes")
+      const currentFrom = timeRangeSelection.getFromMs(true);
+      const currentTo = timeRangeSelection.getToMs(true);
+      const currentRangeKey = timeRangeSelection.getRangeKey();
+      // Commit with refreshed time range
+      commitDraft({
+        from: currentFrom,
+        to: currentTo,
+        timeSelection: currentRangeKey,
+      });
+    } else {
+      // Commit the draft with existing values
+      commitDraft();
+    }
   };
 
   const setMatchersString = (matchers: string): void => {
-    const newExpressionString = `${selectedProfileName}{${matchers}}`;
-    setQueryExpressionString(newExpressionString);
+    // Update draft state only
+    setDraftMatchers(matchers);
+    setQueryExpressionString(`${selectedProfileName}{${matchers}}`);
   };
 
   const setProfileName = (profileName: string | undefined): void => {
     if (profileName === undefined) {
       return;
     }
+    // Update draft state only
+    setDraftProfileName(profileName);
     const [newQuery, changed] = query.setProfileName(profileName);
     if (changed) {
       const q = newQuery.toString();
@@ -293,9 +275,9 @@ const ProfileSelector = ({
     profileTypesData,
     setProfileName,
     setQueryExpression,
-    querySelection: {...querySelection, sumBy: sumBySelection},
+    querySelection,
     navigateTo,
-    loading: sumBySelectionLoading,
+    loading: sumByLoading,
   });
 
   const searchDisabled =
@@ -323,7 +305,7 @@ const ProfileSelector = ({
             query={query}
             queryBrowserRef={queryBrowserRef}
             timeRangeSelection={timeRangeSelection}
-            setTimeRangeSelection={setTimeRangeSelection}
+            setTimeRangeSelection={handleTimeRangeChange}
             searchDisabled={searchDisabled}
             queryBrowserMode={queryBrowserMode as string}
             setQueryBrowserMode={setQueryBrowserMode}
@@ -332,9 +314,9 @@ const ProfileSelector = ({
             queryClient={queryClient}
             sumByRef={sumByRef}
             labels={labels}
-            sumBySelection={sumBySelection ?? []}
-            sumBySelectionLoading={sumBySelectionLoading}
-            setUserSumBySelection={setUserSumBySelection}
+            sumBySelection={draftSelection.sumBy ?? []}
+            sumBySelectionLoading={sumByLoading}
+            setUserSumBySelection={setDraftSumBy}
             profileType={profileType}
             profileTypesError={error}
             viewComponent={viewComponent}
@@ -361,16 +343,16 @@ const ProfileSelector = ({
           querySelection={querySelection}
           profileSelection={profileSelection}
           comparing={comparing}
-          sumBy={querySelection.sumBy ?? defaultSumBy ?? []}
-          defaultSumByLoading={defaultSumByLoading}
+          sumBy={querySelection.sumBy ?? []}
+          defaultSumByLoading={sumByLoading}
           queryClient={queryClient}
           queryExpressionString={queryExpressionString}
-          setTimeRangeSelection={setTimeRangeSelection}
-          selectQuery={selectQuery}
-          selectProfile={selectProfile}
+          setTimeRangeSelection={handleTimeRangeChange}
+          selectQuery={commitDraft}
+          setProfileSelection={setProfileSelection}
           query={query}
           setQueryExpression={setQueryExpression}
-          setNewQueryExpression={setNewQueryExpression}
+          setNewQueryExpression={setDraftExpression}
           utilizationMetrics={utilizationMetrics}
           utilizationMetricsLoading={utilizationMetricsLoading}
           onUtilizationSeriesSelect={onUtilizationSeriesSelect}

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 
 import {ProfileTypesResponse} from '@parca/client';
 import {selectAutoQuery, setAutoQuery, useAppDispatch, useAppSelector} from '@parca/store';
@@ -43,15 +43,32 @@ export const useAutoQuerySelector = ({
   const autoQuery = useAppSelector(selectAutoQuery);
   const dispatch = useAppDispatch();
   const queryParams = new URLSearchParams(location.search);
-
-  const comparing = queryParams.get('comparing') === 'true';
+  const compareA = queryParams.get('compare_a');
+  const compareB = queryParams.get('compare_b');
+  const comparing = compareA === 'true' || compareB === 'true';
   const expressionA = queryParams.get('expression_a');
+  const expressionB = queryParams.get('expression_b');
+
+  // Track if we've already set up compare mode to prevent infinite loops
+  const hasSetupCompareMode = useRef(false);
 
   useEffect(() => {
     if (loading) {
       return;
     }
-    if (comparing && expressionA !== null && expressionA !== undefined) {
+
+    // Only run this effect if:
+    // 1. We're in compare mode
+    // 2. expressionA exists
+    // 3. expressionB doesn't exist yet (meaning we need to set it up)
+    // 4. We haven't already set it up in this session
+    if (
+      comparing &&
+      expressionA !== null &&
+      expressionA !== undefined &&
+      expressionB === null &&
+      !hasSetupCompareMode.current
+    ) {
       if (querySelection.expression === undefined) {
         return;
       }
@@ -96,13 +113,14 @@ export const useAutoQuerySelector = ({
         };
       }
 
+      hasSetupCompareMode.current = true;
       void navigateTo('/', {
         ...compareQuery,
         search_string: '',
         dashboard_items: ['flamegraph'],
       });
     }
-  }, [comparing, querySelection, navigateTo, expressionA, dispatch, loading]);
+  }, [comparing, querySelection, navigateTo, expressionA, expressionB, dispatch, loading]);
 
   // Effect to load some initial data on load when is no selection
   useEffect(() => {

package/src/ProfileTypeSelector/index.tsx

@@ -184,7 +184,9 @@ const ProfileTypeSelector = ({
       : [];
   }, [profileTypesData, error]);
 
-  const profileLabels = profileNames.map(name => ({
+  const profileLabels = (
+    profileNames.length > 0 ? profileNames : selectedKey != null ? [selectedKey] : []
+  ).map(name => ({
     key: name,
     element: profileSelectElement(name, flexibleKnownProfilesDetection),
   }));

package/src/ProfileView/components/ViewSelector/index.tsx

@@ -13,7 +13,7 @@
 
 import {ReactNode} from 'react';
 
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
 
 import {ProfileSource} from '../../../ProfileSource';
 import Dropdown, {DropdownElement, InnerAction} from './Dropdown';
@@ -31,6 +31,7 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
   );
   const [, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
   const {enableSourcesView, enableSandwichView} = useParcaContext();
+  const batchUpdates = useURLStateBatch();
 
   const allItems: Array<{
     key: string;
@@ -127,11 +128,15 @@ const ViewSelector = ({profileSource}: Props): JSX.Element => {
           setDashboardItems([...dashboardItems, item.key]);
         } else {
           const newDashboardItems = dashboardItems.filter(v => v !== item.key);
-          setDashboardItems(newDashboardItems);
 
-          // Reset sandwich function name when removing sandwich panel
+          // Batch updates when removing sandwich panel to combine both URL changes
           if (item.key === 'sandwich') {
-            setSandwichFunctionName(undefined);
+            batchUpdates(() => {
+              setDashboardItems(newDashboardItems);
+              setSandwichFunctionName(undefined);
+            });
+          } else {
+            setDashboardItems(newDashboardItems);
           }
         }
       },

package/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useURLState} from '@parca/components';
+import {useURLState, useURLStateBatch} from '@parca/components';
 
 import {useProfileFilters} from '../components/ProfileFilters/useProfileFilters';
 
@@ -20,9 +20,11 @@ export const useResetStateOnProfileTypeChange = (): (() => void) => {
   const [curPath, setCurPath] = useURLState('cur_path');
   const {resetFilters} = useProfileFilters();
   const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
+  const batchUpdates = useURLStateBatch();
 
   return () => {
-    setTimeout(() => {
+    // Batch all URL state resets into a single navigation
+    batchUpdates(() => {
       if (groupBy !== undefined) {
         setGroupBy(undefined);
       }

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -13,7 +13,13 @@
 
 import {useCallback, useMemo} from 'react';
 
-import {JSONParser, JSONSerializer, useURLState, useURLStateCustom} from '@parca/components';
+import {
+  JSONParser,
+  JSONSerializer,
+  useURLState,
+  useURLStateBatch,
+  useURLStateCustom,
+} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 
 import {
@@ -69,6 +75,7 @@ export const useVisualizationState = (): {
     'sandwich_function_name'
   );
   const resetFlameGraphState = useResetFlameGraphState();
+  const batchUpdates = useURLStateBatch();
 
   const levelsOfProfiling = useMemo(
     () => [
@@ -89,25 +96,31 @@ export const useVisualizationState = (): {
 
   const toggleGroupBy = useCallback(
     (key: string): void => {
-      if (groupBy.includes(key)) {
-        setGroupBy(groupBy.filter(v => v !== key)); // remove
-      } else {
-        const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
-        setGroupBy([...filteredGroupBy, key]); // add
-      }
+      // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
+      batchUpdates(() => {
+        if (groupBy.includes(key)) {
+          setGroupBy(groupBy.filter(v => v !== key)); // remove
+        } else {
+          const filteredGroupBy = groupBy.filter(item => !levelsOfProfiling.includes(item));
+          setGroupBy([...filteredGroupBy, key]); // add
+        }
 
-      resetFlameGraphState();
+        resetFlameGraphState();
+      });
     },
-    [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]
+    [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState, batchUpdates]
   );
 
   const setGroupByLabels = useCallback(
     (labels: string[]): void => {
-      setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
+      // Batch updates to combine setGroupBy + resetFlameGraphState into single URL navigation
+      batchUpdates(() => {
+        setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
 
-      resetFlameGraphState();
+        resetFlameGraphState();
+      });
     },
-    [groupBy, setGroupBy, resetFlameGraphState]
+    [groupBy, setGroupBy, resetFlameGraphState, batchUpdates]
   );
 
   const resetSandwichFunctionName = useCallback((): void => {

package/src/Table/MoreDropdown.tsx

@@ -14,7 +14,7 @@
 import {Menu} from '@headlessui/react';
 import {Icon} from '@iconify/react';
 
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
 
 const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
   const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
@@ -22,10 +22,14 @@ const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element
     alwaysReturnArray: true,
   });
   const {enableSandwichView} = useParcaContext();
+  const batchUpdates = useURLStateBatch();
 
   const onSandwichViewSelect = (): void => {
-    setSandwichFunctionName(functionName.trim());
-    setDashboardItems([...dashboardItems, 'sandwich']);
+    // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
+    batchUpdates(() => {
+      setSandwichFunctionName(functionName.trim());
+      setDashboardItems([...dashboardItems, 'sandwich']);
+    });
   };
 
   const menuItems: Array<{label: string; action: () => void}> = [];

package/src/Table/TableContextMenu.tsx

@@ -17,7 +17,7 @@ import {Item, Menu, Submenu} from 'react-contexify';
 
 import 'react-contexify/dist/ReactContexify.css';
 
-import {useParcaContext, useURLState} from '@parca/components';
+import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
 import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '.';
@@ -47,13 +47,17 @@ const TableContextMenu = ({
     alwaysReturnArray: true,
   });
   const {enableSandwichView, isDarkMode} = useParcaContext();
+  const batchUpdates = useURLStateBatch();
 
   const onSandwichViewSelect = (): void => {
     if (row?.name != null && row.name.length > 0) {
-      setSandwichFunctionName(row.name.trim());
-      if (!dashboardItems.includes('sandwich')) {
-        setDashboardItems([...dashboardItems, 'sandwich']);
-      }
+      // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
+      batchUpdates(() => {
+        setSandwichFunctionName(row.name.trim());
+        if (!dashboardItems.includes('sandwich')) {
+          setDashboardItems([...dashboardItems, 'sandwich']);
+        }
+      });
     }
   };
 

package/src/hooks/useCompareModeMeta.ts

@@ -0,0 +1,131 @@
+// 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 {useURLState, useURLStateBatch} from '@parca/components';
+
+/**
+ * Hook to manage compare mode state and operations
+ * Returns compare mode flags and a function to close compare mode
+ */
+export const useCompareModeMeta = (): {
+  isCompareMode: boolean;
+  isCompareAbsolute: boolean;
+  closeCompareMode: (card: 'A' | 'B') => void;
+} => {
+  const batchUpdates = useURLStateBatch();
+
+  // Side A URL state (only setters needed)
+  const [, setExpressionA] = useURLState<string>('expression_a');
+  const [, setFromA] = useURLState<string>('from_a');
+  const [, setToA] = useURLState<string>('to_a');
+  const [, setTimeSelectionA] = useURLState<string>('time_selection_a');
+  const [, setSumByA] = useURLState<string>('sum_by_a');
+  const [, setMergeFromA] = useURLState<string>('merge_from_a');
+  const [, setMergeToA] = useURLState<string>('merge_to_a');
+  const [, setSelectionA] = useURLState<string>('selection_a');
+
+  // Side B URL state
+  const [expressionB, setExpressionB] = useURLState<string>('expression_b');
+  const [fromB, setFromB] = useURLState<string>('from_b');
+  const [toB, setToB] = useURLState<string>('to_b');
+  const [timeSelectionB, setTimeSelectionB] = useURLState<string>('time_selection_b');
+  const [sumByB, setSumByB] = useURLState<string>('sum_by_b');
+  const [mergeFromB, setMergeFromB] = useURLState<string>('merge_from_b');
+  const [mergeToB, setMergeToB] = useURLState<string>('merge_to_b');
+  const [selectionB, setSelectionB] = useURLState<string>('selection_b');
+
+  // Compare mode flags (expose values for routing decisions)
+  const [compareA, setCompareA] = useURLState<string>('compare_a');
+  const [compareB, setCompareB] = useURLState<string>('compare_b');
+  const [compareAbsolute, setCompareAbsolute] = useURLState<string>('compare_absolute');
+
+  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);
+        }
+
+        // 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);
+      });
+    },
+    [
+      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,
+    ]
+  );
+
+  // Derive isCompareMode from flags
+  const isCompareMode = compareA === 'true' || compareB === 'true';
+  const isCompareAbsolute = compareAbsolute === 'true';
+
+  return {
+    isCompareMode,
+    isCompareAbsolute,
+    closeCompareMode,
+  };
+};