@parca/profile 0.19.140 → 0.19.143

package/src/MatchersInput/SuggestionsList.test.tsx

@@ -0,0 +1,70 @@
+// 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 {useRef} from 'react';
+
+import {act, fireEvent, render} from '@testing-library/react';
+import {beforeAll, describe, expect, it, vi} from 'vitest';
+
+import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
+
+vi.mock('@parca/components', () => ({
+  RefreshButton: ({title}: {title: string}) => <button type="button">{title}</button>,
+  useParcaContext: () => ({
+    loader: <div>loading</div>,
+  }),
+}));
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+const TestHarness = ({inputKey = 'initial'}: {inputKey?: string}): JSX.Element => {
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const suggestions = new Suggestions();
+  suggestions.labelNames.push(new Suggestion('labelName', 'na', 'namespace'));
+
+  return (
+    <div>
+      <textarea key={inputKey} ref={inputRef} />
+      <SuggestionsList
+        suggestions={suggestions}
+        applySuggestion={vi.fn()}
+        inputRef={inputRef}
+        runQuery={vi.fn()}
+        focusedInput
+        isLabelNamesLoading={false}
+        isLabelValuesLoading={false}
+        shouldTrimPrefix={false}
+        refetchLabelValues={vi.fn(async () => {})}
+        refetchLabelNames={vi.fn(async () => {})}
+      />
+    </div>
+  );
+};
+
+describe('SuggestionsList', () => {
+  it('rebinds keyboard listeners when the textarea ref points to a remounted node', () => {
+    const {rerender, getByRole, getByText} = render(<TestHarness inputKey="first" />);
+
+    rerender(<TestHarness inputKey="second" />);
+
+    const textarea = getByRole('textbox');
+    act(() => {
+      fireEvent.keyDown(textarea, {key: 'ArrowDown'});
+    });
+
+    // eslint-disable-next-line jest-dom/prefer-to-have-class
+    expect(getByText('namespace').className).toContain('bg-indigo-600');
+  });
+});

package/src/MatchersInput/SuggestionsList.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Fragment, useCallback, useEffect, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useState} from 'react';
 
 import {Transition} from '@headlessui/react';
 import {usePopper} from 'react-popper';
@@ -48,7 +48,7 @@ export class Suggestions {
 interface Props {
   suggestions: Suggestions;
   applySuggestion: (suggestion: Suggestion) => void;
-  inputRef: HTMLTextAreaElement | null;
+  inputRef: React.RefObject<HTMLTextAreaElement | null>;
   runQuery: () => void;
   focusedInput: boolean;
   isLabelNamesLoading: boolean;
@@ -82,7 +82,7 @@ const SuggestionsList = ({
   refetchLabelNames,
 }: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const {styles, attributes} = usePopper(inputRef, popperElement, {
+  const {styles, attributes} = usePopper(inputRef.current, popperElement, {
     placement: 'bottom-start',
   });
   const [highlightedSuggestionIndex, setHighlightedSuggestionIndex] = useState<number>(-1);
@@ -227,18 +227,19 @@ const SuggestionsList = ({
   );
 
   useEffect(() => {
-    if (inputRef == null) {
+    const el = inputRef.current;
+    if (el == null) {
       return;
     }
 
-    inputRef.addEventListener('keydown', handleKeyDown);
-    inputRef.addEventListener('keypress', handleKeyPress as any);
+    el.addEventListener('keydown', handleKeyDown);
+    el.addEventListener('keypress', handleKeyPress as any);
 
     return () => {
-      inputRef.removeEventListener('keydown', handleKeyDown);
-      inputRef.removeEventListener('keypress', handleKeyPress as any);
+      el.removeEventListener('keydown', handleKeyDown);
+      el.removeEventListener('keypress', handleKeyPress as any);
     };
-  }, [inputRef, highlightedSuggestionIndex, suggestions, handleKeyPress, handleKeyDown]);
+  });
 
   useEffect(() => {
     if (suggestionsLength > 0 && focusedInput) {
@@ -263,7 +264,7 @@ const SuggestionsList = ({
             leaveTo="opacity-0"
           >
             <div
-              style={{width: inputRef?.offsetWidth}}
+              style={{width: inputRef.current?.offsetWidth}}
               className="absolute z-10 mt-1 max-h-[400px] rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm flex flex-col"
             >
               <div className="flex-1 overflow-auto min-h-0">

package/src/MatchersInput/index.tsx

@@ -211,7 +211,7 @@ const MatchersInput = ({setDraftMatchers, draftParsedQuery, commitDraft}: Props)
         isLabelNamesLoading={isLabelNamesLoading}
         suggestions={suggestionSections}
         applySuggestion={applySuggestion}
-        inputRef={inputRef.current}
+        inputRef={inputRef}
         runQuery={commitDraft}
         focusedInput={focusedInput}
         isLabelValuesLoading={

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -11,7 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+/* eslint-disable react-hooks/refs */
+
+import {useLayoutEffect, useRef, useState} from 'react';
 
 import {usePopper} from 'react-popper';
 
@@ -28,21 +30,16 @@ interface Props {
   content: React.ReactNode;
 }
 
-const virtualElement: VirtualElement = {
-  getBoundingClientRect: () => {
-    const emptyRect: DOMRect = {
-      width: 0,
-      height: 0,
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    };
-    return emptyRect;
-  },
+const emptyRect: DOMRect = {
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  x: 0,
+  y: 0,
+  toJSON: () => ({}),
 };
 
 const createDomRect = (x: number, y: number): DOMRect => {
@@ -61,9 +58,13 @@ const createDomRect = (x: number, y: number): DOMRect => {
 };
 
 const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element => {
+  'use no memo';
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const virtualElementRef = useRef<VirtualElement>({
+    getBoundingClientRect: () => emptyRect,
+  });
 
-  const {styles, attributes, update} = usePopper(virtualElement, popperElement, {
+  const {styles, attributes, update} = usePopper(virtualElementRef.current, popperElement, {
     placement: 'auto-start',
     strategy: 'absolute',
     modifiers: [
@@ -82,26 +83,13 @@ const MetricsTooltip = ({x, y, contextElement, content}: Props): JSX.Element =>
     ],
   });
 
-  useMemo(() => {
-    virtualElement.getBoundingClientRect = (): DOMRect => {
-      const domRect: DOMRect = (contextElement as Element)?.getBoundingClientRect() ?? {
-        width: 0,
-        height: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        x: 0,
-        y: 0,
-        toJSON: () => ({}),
-      };
+  useLayoutEffect(() => {
+    virtualElementRef.current.getBoundingClientRect = (): DOMRect => {
+      const domRect: DOMRect = (contextElement as Element)?.getBoundingClientRect() ?? emptyRect;
       return createDomRect(domRect.x + x, domRect.y + y);
     };
-  }, [x, y, contextElement]);
-
-  useEffect(() => {
     void update?.();
-  }, [x, y, update]);
+  }, [x, y, contextElement, update]);
 
   // Don't render anything if content is null or undefined
   if (content == null) {

package/src/PreSelectedMatchers/index.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import {Icon} from '@iconify/react';
@@ -29,6 +31,7 @@ interface Props {
 }
 
 const PreSelectedMatchers: React.FC<Props> = ({labelNames}) => {
+  'use no memo';
   const [labelValuesMap, setLabelValuesMap] = useState<Record<string, string[]>>({});
   const [isLoading, setIsLoading] = useState<Record<string, boolean>>({});
   const metadata = useGrpcMetadata();

package/src/ProfileExplorer/ProfileExplorerCompare.tsx

@@ -65,8 +65,15 @@ const ProfileExplorerCompare = ({
     if (querySelectionB.expression === '' && querySelectionA.expression !== '') {
       setDraftExpressionB(querySelectionA.expression);
       setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
-      // Commit to update the URL and trigger metrics graph load
-      commitDraftB();
+      // Commit with explicit values since draft useState hasn't applied yet
+      commitDraftB(
+        {
+          from: querySelectionA.from,
+          to: querySelectionA.to,
+          timeSelection: querySelectionA.timeSelection,
+        },
+        querySelectionA.expression
+      );
     }
   }, [
     isCompareMode,

package/src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import {useEffect, useRef, useState} from 'react';
 
 import {useQueryState} from 'nuqs';
@@ -66,6 +68,7 @@ function calculateTruncatedText(
 }
 
 function TextWithEllipsis({text, x, y, width}: Props): JSX.Element {
+  'use no memo';
   const textRef = useRef<SVGTextElement>(null);
   const [displayText, setDisplayText] = useState(text);
   const [alignFunctionName] = useQueryState('align_function_name', stringParam.withDefault('left'));

package/src/ProfileFlameGraph/FlameGraphArrow/TooltipContext.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import React, {createContext, useCallback, useContext, useMemo, useRef} from 'react';
 
 import {Table} from '@uwdata/flechette';
@@ -68,6 +70,7 @@ export const TooltipProvider: React.FC<TooltipProviderProps> = ({
   onTooltipUpdate,
   tooltipId = 'default',
 }) => {
+  'use no memo';
   const tooltipStateRef = useRef<TooltipState>({row: null, x: 0, y: 0});
 
   const updateTooltip = useCallback(

package/src/ProfileFlameGraph/FlameGraphArrow/ZoomControls.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import React from 'react';
 
 import {Icon} from '@iconify/react';
@@ -33,6 +35,7 @@ export const ZoomControls = ({
   resetZoom,
   portalRef,
 }: ZoomControlsProps): React.JSX.Element => {
+  'use no memo';
   const controls = (
     <div className="flex items-center gap-1 rounded-md border border-gray-200 bg-white/90 px-1 py-0.5 shadow-sm backdrop-blur-sm dark:border-gray-600 dark:bg-gray-800/90">
       <button

package/src/ProfileFlameGraph/FlameGraphArrow/useBatchedRendering.ts

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import {useEffect, useRef, useState} from 'react';
 
 interface UseBatchedRenderingOptions {
@@ -29,6 +31,7 @@ export const useBatchedRendering = <T>(
   items: T[],
   options: UseBatchedRenderingOptions = {}
 ): UseBatchedRenderingResult<T> => {
+  'use no memo';
   const {batchSize = 500, batchDelay = 0} = options;
 
   const [renderedCount, setRenderedCount] = useState(0);

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, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {Dispatch, SetStateAction, useCallback, useMemo, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {useQueryState as useNuqsQueryState} from 'nuqs';
@@ -104,7 +104,7 @@ const ProfileSelector = ({
   closeProfile,
   enforcedProfileName,
   comparing,
-  navigateTo,
+  navigateTo: _navigateTo,
   showMetricsGraph = true,
   showSumBySelector = true,
   showProfileTypeSelector = true,
@@ -157,7 +157,20 @@ const ProfileSelector = ({
   );
 
   // Sync local timeRangeSelection when URL state changes externally (e.g., "Switch to 1 minute" button)
-  useEffect(() => {
+  const [prevQueryTimeSelection, setPrevQueryTimeSelection] = useState(
+    querySelection.timeSelection
+  );
+  const [prevQueryFrom, setPrevQueryFrom] = useState(querySelection.from);
+  const [prevQueryTo, setPrevQueryTo] = useState(querySelection.to);
+
+  if (
+    prevQueryTimeSelection !== querySelection.timeSelection ||
+    prevQueryFrom !== querySelection.from ||
+    prevQueryTo !== querySelection.to
+  ) {
+    setPrevQueryTimeSelection(querySelection.timeSelection);
+    setPrevQueryFrom(querySelection.from);
+    setPrevQueryTo(querySelection.to);
     setTimeRangeSelection(
       DateTimeRange.fromRangeKey(
         querySelection.timeSelection,
@@ -165,7 +178,7 @@ const ProfileSelector = ({
         querySelection.to
       )
     );
-  }, [querySelection.timeSelection, querySelection.from, querySelection.to]);
+  }
 
   const [queryExpressionString, setQueryExpressionString] = useState(draftSelection.expression);
 
@@ -201,18 +214,28 @@ const ProfileSelector = ({
     return result.response?.labelNames === undefined ? [] : result.response.labelNames;
   }, [result]);
 
-  useEffect(() => {
+  const [prevEnforcedProfileName, setPrevEnforcedProfileName] = useState(enforcedProfileName);
+  const [prevQueryExpression, setPrevQueryExpression] = useState(querySelection.expression);
+
+  if (
+    prevEnforcedProfileName !== enforcedProfileName ||
+    prevQueryExpression !== querySelection.expression
+  ) {
+    setPrevEnforcedProfileName(enforcedProfileName);
+    setPrevQueryExpression(querySelection.expression);
     if (enforcedProfileName !== '') {
       const [q, changed] = Query.parse(querySelection.expression).setProfileName(
         enforcedProfileName
       );
       if (changed) {
         setQueryExpressionString(q.toString());
-        return;
+      } else {
+        setQueryExpressionString(querySelection.expression);
       }
+    } else {
+      setQueryExpressionString(querySelection.expression);
     }
-    setQueryExpressionString(querySelection.expression);
-  }, [enforcedProfileName, querySelection.expression]);
+  }
 
   const enforcedProfileNameQuery = (): Query => {
     const pq = Query.parse(queryExpressionString);
@@ -271,7 +294,6 @@ const ProfileSelector = ({
     setProfileName,
     setQueryExpression,
     querySelection,
-    navigateTo,
     loading: sumByLoading,
     defaultProfileType: externalProfilerComponent?.defaultProfileType,
   });

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -13,13 +13,16 @@
 
 import {useEffect, useRef} from 'react';
 
+import {useQueryStates} from 'nuqs';
+
 import {ProfileTypesResponse} from '@parca/client';
 import {selectAutoQuery, setAutoQuery, useAppDispatch, useAppSelector} from '@parca/store';
-import {type NavigateFunction} from '@parca/utilities';
 
-import {ProfileSelectionFromParams, SuffixParams} from '..';
+import {ProfileSelectionFromParams} from '..';
 import {QuerySelection} from '../ProfileSelector';
 import {constructProfileName} from '../ProfileTypeSelector';
+import {boolParam, stringParam} from '../hooks/urlParsers';
+import {useDashboardItems} from '../hooks/useDashboardItems';
 
 interface Props {
   selectedProfileName: string;
@@ -27,7 +30,6 @@ interface Props {
   setProfileName: (name: string) => void;
   setQueryExpression: () => void;
   querySelection: QuerySelection;
-  navigateTo: NavigateFunction;
   loading: boolean;
   defaultProfileType?: string;
 }
@@ -38,18 +40,40 @@ export const useAutoQuerySelector = ({
   setProfileName,
   setQueryExpression,
   querySelection,
-  navigateTo,
   loading,
   defaultProfileType,
 }: Props): void => {
   const autoQuery = useAppSelector(selectAutoQuery);
   const dispatch = useAppDispatch();
-  const queryParams = new URLSearchParams(location.search);
-  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');
+
+  const {setDashboardItems} = useDashboardItems();
+
+  const [compareState, setCompareParams] = useQueryStates(
+    {
+      compare_a: boolParam,
+      compare_b: boolParam,
+      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,
+      expression_b: stringParam,
+      from_b: stringParam,
+      to_b: stringParam,
+      time_selection_b: stringParam,
+      sum_by_b: stringParam,
+      search_string: stringParam,
+    },
+    {history: 'replace'}
+  );
+
+  // Read compare params through nuqs (not location.search) to stay in sync
+  const comparing = compareState.compare_a === true || compareState.compare_b === true;
+  const expressionA = compareState.expression_a;
+  const expressionB = compareState.expression_b;
 
   // Track if we've already set up compare mode to prevent infinite loops
   const hasSetupCompareMode = useRef(false);
@@ -64,13 +88,7 @@ export const useAutoQuerySelector = ({
     // 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 (comparing && expressionA !== null && expressionB === null && !hasSetupCompareMode.current) {
       if (querySelection.expression === undefined) {
         return;
       }
@@ -87,42 +105,46 @@ export const useAutoQuerySelector = ({
         sumBy: querySelection.sumBy,
       };
 
-      const sumBy = queryA.sumBy?.join(',');
+      const sumBy = queryA.sumBy?.join(',') ?? null;
+
+      const mergeFromA = profileA != null ? profileA.HistoryParams().merge_from?.toString() : null;
+      const mergeToA = profileA != null ? profileA.HistoryParams().merge_to?.toString() : null;
+      const selectionA = profileA != null ? profileA.HistoryParams().selection?.toString() : null;
+
+      hasSetupCompareMode.current = true;
 
-      let compareQuery: Record<string, string> = {
-        compare_a: 'true',
+      // Set all compare params atomically via nuqs
+      void setCompareParams({
+        compare_a: true,
+        compare_b: true,
         expression_a: queryA.expression,
         from_a: queryA.from.toString(),
         to_a: queryA.to.toString(),
         time_selection_a: queryA.timeSelection,
-
-        compare_b: 'true',
+        sum_by_a: sumBy,
+        merge_from_a: mergeFromA,
+        merge_to_a: mergeToA,
+        selection_a: selectionA,
         expression_b: queryA.expression,
         from_b: queryA.from.toString(),
         to_b: queryA.to.toString(),
         time_selection_b: queryA.timeSelection,
-      };
-
-      if (sumBy != null) {
-        compareQuery.sum_by_a = sumBy;
-        compareQuery.sum_by_b = sumBy;
-      }
-
-      if (profileA != null) {
-        compareQuery = {
-          ...SuffixParams(profileA.HistoryParams(), '_a'),
-          ...compareQuery,
-        };
-      }
-
-      hasSetupCompareMode.current = true;
-      void navigateTo('/', {
-        ...compareQuery,
-        search_string: '',
-        dashboard_items: ['flamegraph'],
+        sum_by_b: sumBy,
+        search_string: null,
       });
+
+      setDashboardItems(['flamegraph']);
     }
-  }, [comparing, querySelection, navigateTo, expressionA, expressionB, dispatch, loading]);
+  }, [
+    comparing,
+    querySelection,
+    expressionA,
+    expressionB,
+    dispatch,
+    loading,
+    setCompareParams,
+    setDashboardItems,
+  ]);
 
   // Effect to load some initial data on load when is no selection
   useEffect(() => {

package/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/set-state-in-effect */
+
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import {Menu} from '@headlessui/react';
@@ -74,6 +76,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
   customSubmenu,
   renderAsDiv = false,
 }) => {
+  'use no memo';
   const menuRef = useRef<HTMLDivElement>(null);
   const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
 

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

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* eslint-disable react-hooks/refs */
+
 import {FC} from 'react';
 
 import cx from 'classnames';
@@ -42,6 +44,7 @@ export const VisualizationContainer: FC<VisualizationContainerProps> = ({
   index,
   actionButtons,
 }) => {
+  'use no memo';
   const {handleClosePanel} = useDashboard();
 
   return (

package/src/Table/hooks/useTableConfiguration.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+import {useMemo} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
 import {useQueryState} from 'nuqs';
@@ -46,8 +46,8 @@ export function useTableConfiguration({
   const columnHelper = createColumnHelper<Row>();
   const [tableColumns] = useQueryState('table_columns', tableColumnsParser);
 
-  const [columnVisibility, setColumnVisibility] = useState(() => {
-    return {
+  const columnVisibility = useMemo(() => {
+    const defaults: Record<string, boolean> = {
       color: true,
       flat: true,
       flatPercentage: false,
@@ -62,19 +62,13 @@ export function useTableConfiguration({
       functionFileName: false,
       mappingFile: false,
     };
-  });
-
-  useEffect(() => {
     if (Array.isArray(tableColumns)) {
-      setColumnVisibility(prevState => {
-        const newState = {...prevState};
-        (Object.keys(newState) as ColumnName[]).forEach(column => {
-          newState[column] = tableColumns.includes(column);
-        });
-        return newState;
+      (Object.keys(defaults) as ColumnName[]).forEach(column => {
+        defaults[column] = tableColumns.includes(column);
       });
     }
-  }, [tableColumns]);
+    return defaults;
+  }, [tableColumns, compareMode]);
 
   const columns = useMemo<Array<ColumnDef<Row>>>(() => {
     const baseColumns: Array<ColumnDef<Row>> = [