@parca/profile 0.19.140 → 0.19.142

package/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts

@@ -12,10 +12,9 @@
 // limitations under the License.
 
 import {Table} from '@uwdata/flechette';
-import {useQueryState} from 'nuqs';
 
 import {QueryRequest_ReportType} from '@parca/client';
-import {useParcaContext} from '@parca/components';
+import {useParcaContext, useURLState} from '@parca/components';
 
 import {
   FIELD_FUNCTION_FILE_NAME,
@@ -31,8 +30,6 @@ import {
 import {arrowToString} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../ProfileSource';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
-import {stringParam} from '../../hooks/urlParsers';
-import {useDashboardItems} from '../../hooks/useDashboardItems';
 import {useQuery} from '../../useQuery';
 
 interface Props {
@@ -110,23 +107,28 @@ export const useGraphTooltipMetaInfo = ({table, row}: Props): GraphTooltipMetaIn
     ])
     .filter(value => value[1] !== '') as Array<[string, string]>;
 
-  const {dashboardItems, setDashboardItems} = useDashboardItems();
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
 
-  const [_unusedBuildId, setSourceBuildId] = useQueryState('source_buildid', stringParam);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [unusedBuildId, setSourceBuildId] = useURLState('source_buildid');
 
-  const [_unusedFilename, setSourceFilename] = useQueryState('source_filename', stringParam);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [unusedFilename, setSourceFilename] = useURLState('source_filename');
 
-  const [_unusedLine, setSourceLine] = useQueryState('source_line', stringParam);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [unusedLine, setSourceLine] = useURLState('source_line');
 
   const openFile = (): void => {
     setDashboardItems([dashboardItems[0], 'source']);
     if (mappingBuildID != null) {
-      void setSourceBuildId(mappingBuildID);
+      setSourceBuildId(mappingBuildID);
     }
 
-    void setSourceFilename(functionFilename);
+    setSourceFilename(functionFilename);
     if (lineNumber !== undefined) {
-      void setSourceLine(lineNumber.toString());
+      setSourceLine(lineNumber.toString());
     }
   };
 

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

@@ -14,6 +14,7 @@
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {QueryServiceClient} from '@parca/client';
+import {useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import type {NavigateFunction} from '@parca/utilities';
@@ -33,6 +34,7 @@ const ProfileExplorerCompare = ({
   navigateTo,
 }: ProfileExplorerCompareProps): JSX.Element => {
   const [showMetricsGraph, setShowMetricsGraph] = useState(true);
+  const batchUpdates = useURLStateBatch();
   const {closeCompareMode, isCompareMode, isCompareAbsolute} = useCompareModeMeta();
 
   // Read ProfileSource states from URL for both sides
@@ -63,10 +65,12 @@ 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();
+      batchUpdates(() => {
+        setDraftExpressionB(querySelectionA.expression);
+        setDraftTimeRangeB(querySelectionA.from, querySelectionA.to, querySelectionA.timeSelection);
+        // Commit to update the URL and trigger metrics graph load
+        commitDraftB();
+      });
     }
   }, [
     isCompareMode,
@@ -78,6 +82,7 @@ const ProfileExplorerCompare = ({
     setDraftExpressionB,
     setDraftTimeRangeB,
     commitDraftB,
+    batchUpdates,
   ]);
 
   const closeProfileA = useCallback((): void => {

package/src/ProfileFlameChart/SamplesStrips/index.tsx

@@ -39,10 +39,10 @@ interface Props {
   loading?: boolean;
   cpus: LabelSet[];
   data: DataPoint[][];
-  selectedTimeframe: {
+  selectedTimeframe?: {
     labels: LabelSet;
     bounds: NumberDuo;
-  } | null;
+  };
   onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
   width?: number;
   bounds: NumberDuo;

package/src/ProfileFlameChart/index.tsx

@@ -13,10 +13,14 @@
 
 import {useEffect, useMemo, useRef} from 'react';
 
-import {createParser, useQueryState} from 'nuqs';
-
 import {LabelSet, QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {Button, useParcaContext} from '@parca/components';
+import {
+  Button,
+  useParcaContext,
+  useURLState,
+  useURLStateCustom,
+  type OptionsCustom,
+} from '@parca/components';
 import {Matcher, MatcherTypes, ProfileType, Query} from '@parca/parser';
 import {TimeUnits, formatDate, formatDuration} from '@parca/utilities';
 
@@ -25,7 +29,6 @@ import {boundsFromProfileSource} from '../ProfileFlameGraph/FlameGraphArrow/util
 import {MergedProfileSource, ProfileSource, timeFormat} from '../ProfileSource';
 import {useProfileFilters} from '../ProfileView/components/ProfileFilters/useProfileFilters';
 import type {SamplesData} from '../ProfileView/types/visualization';
-import {flamechartDimensionParser} from '../hooks/urlParsers';
 import {useQuery} from '../useQuery';
 import {NumberDuo} from '../utils';
 import {SamplesStrip} from './SamplesStrips';
@@ -35,8 +38,11 @@ interface SelectedTimeframe {
   bounds: NumberDuo;
 }
 
-const timeframeParser = createParser<SelectedTimeframe>({
-  parse: (value: string) => {
+const TimeframeStateSerializer: OptionsCustom<SelectedTimeframe | undefined> = {
+  parse: (value: string | string[] | undefined) => {
+    if (value == null || value === '' || value === 'undefined' || Array.isArray(value)) {
+      return undefined;
+    }
     try {
       const [labelPart, boundsPart] = value.split('|');
       if (labelPart != null && boundsPart != null) {
@@ -55,13 +61,16 @@ const timeframeParser = createParser<SelectedTimeframe>({
     } catch {
       // Ignore parsing errors
     }
-    return null;
+    return undefined;
   },
-  serialize: (value: SelectedTimeframe) => {
+  stringify: (value: SelectedTimeframe | undefined) => {
+    if (value == null) {
+      return '';
+    }
     const labelsStr = value.labels.labels.map(l => `${l.name}:${l.value}`).join(',');
     return `${labelsStr}|${value.bounds[0]},${value.bounds[1]}`;
   },
-}).withOptions({history: 'replace'});
+};
 
 interface ProfileFlameChartProps {
   samplesData?: SamplesData;
@@ -123,16 +132,14 @@ export const ProfileFlameChart = ({
   const {protoFilters} = useProfileFilters();
   const zoomControlsRef = useRef<HTMLDivElement>(null);
 
-  const [selectedTimeframe, setSelectedTimeframe] = useQueryState(
-    'flamechart_timeframe',
-    timeframeParser
-  );
+  const [selectedTimeframe, setSelectedTimeframe] = useURLStateCustom<
+    SelectedTimeframe | undefined
+  >('flamechart_timeframe', TimeframeStateSerializer);
 
   // Read flamechart dimension from URL state to detect changes
-  const [flamechartDimension] = useQueryState(
-    'flamechart_dimension',
-    flamechartDimensionParser.withDefault([])
-  );
+  const [flamechartDimension] = useURLState<string[]>('flamechart_dimension', {
+    alwaysReturnArray: true,
+  });
 
   // Reset selection when the parent time range (profileSource) changes
   const timeBoundsKey = boundsFromProfileSource(profileSource).join(',');
@@ -140,7 +147,7 @@ export const ProfileFlameChart = ({
   useEffect(() => {
     if (prevTimeBoundsKey.current !== timeBoundsKey) {
       prevTimeBoundsKey.current = timeBoundsKey;
-      void setSelectedTimeframe(null);
+      setSelectedTimeframe(undefined);
     }
   }, [timeBoundsKey, setSelectedTimeframe]);
 
@@ -150,16 +157,16 @@ export const ProfileFlameChart = ({
   useEffect(() => {
     if (prevDimensionKey.current !== dimensionKey) {
       prevDimensionKey.current = dimensionKey;
-      void setSelectedTimeframe(null);
+      setSelectedTimeframe(undefined);
     }
   }, [dimensionKey, setSelectedTimeframe]);
 
   // Handle timeframe selection from strips
   const handleSelectedTimeframe = (labels: LabelSet, bounds: NumberDuo | undefined): void => {
     if (bounds === undefined) {
-      void setSelectedTimeframe(null);
+      setSelectedTimeframe(undefined);
     } else {
-      void setSelectedTimeframe({labels, bounds});
+      setSelectedTimeframe({labels, bounds});
     }
   };
 

package/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx

@@ -14,11 +14,10 @@
 import {Icon} from '@iconify/react';
 import {Table} from '@uwdata/flechette';
 import cx from 'classnames';
-import {useQueryState} from 'nuqs';
 import {Item, Menu, Separator, Submenu} from 'react-contexify';
 import {Tooltip} from 'react-tooltip';
 
-import {useParcaContext} from '@parca/components';
+import {useParcaContext, useURLState} from '@parca/components';
 import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 import {TEST_IDS} from '@parca/test-utils';
@@ -26,8 +25,6 @@ import {getLastItem} from '@parca/utilities';
 
 import {useGraphTooltip} from '../../GraphTooltipArrow/useGraphTooltip';
 import {useGraphTooltipMetaInfo} from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
-import {stringParam} from '../../hooks/urlParsers';
-import {useDashboardItems} from '../../hooks/useDashboardItems';
 import {hexifyAddress, truncateString} from '../../utils';
 
 interface ContextMenuProps {
@@ -86,10 +83,12 @@ const ContextMenu = ({
     inlined,
   } = useGraphTooltipMetaInfo({table, row});
 
-  const {dashboardItems, setDashboardItems} = useDashboardItems();
-  const [_sandwichFunctionName, setSandwichFunctionName] = useQueryState(
-    'sandwich_function_name',
-    stringParam
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
+    'sandwich_function_name'
   );
 
   if (contextMenuData === null) {
@@ -196,12 +195,12 @@ const ContextMenu = ({
             }
 
             if (dashboardItems.includes('sandwich')) {
-              void setSandwichFunctionName(functionName);
+              setSandwichFunctionName(functionName);
               hideMenu();
               return;
             }
 
-            void setSandwichFunctionName(functionName);
+            setSandwichFunctionName(functionName);
             setDashboardItems([...dashboardItems, 'sandwich']);
             hideMenu();
           }}

package/src/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.tsx

@@ -11,11 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useRef, useState} from 'react';
+/* eslint-disable react-hooks/set-state-in-effect */
 
-import {useQueryState} from 'nuqs';
+import {useEffect, useRef, useState} from 'react';
 
-import {stringParam} from '../../hooks/urlParsers';
+import {useURLState} from '@parca/components';
 
 interface Props {
   text: string;
@@ -66,11 +66,12 @@ 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'));
+  const [alignFunctionName] = useURLState('align_function_name');
 
-  const showFunctionNameFromLeft = alignFunctionName === 'left';
+  const showFunctionNameFromLeft = alignFunctionName === 'left' || alignFunctionName === undefined;
 
   useEffect(() => {
     const textElement = textRef.current;

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/ProfileFlameGraph/index.tsx

@@ -15,11 +15,15 @@ import React, {LegacyRef, ReactNode, useCallback, useEffect, useMemo, useState}
 
 import cx from 'classnames';
 import {AnimatePresence, motion} from 'framer-motion';
-import {useQueryState} from 'nuqs';
 import {useMeasure} from 'react-use';
 
 import {FlamegraphArrow} from '@parca/client';
-import {FlameGraphSkeleton, SandwichFlameGraphSkeleton, useParcaContext} from '@parca/components';
+import {
+  FlameGraphSkeleton,
+  SandwichFlameGraphSkeleton,
+  useParcaContext,
+  useURLState,
+} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
@@ -29,7 +33,6 @@ import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {useProfileMetadata} from '../ProfileView/hooks/useProfileMetadata';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
-import {boolParam} from '../hooks/urlParsers';
 import {FlameGraphArrow} from './FlameGraphArrow';
 import {CurrentPathFrame} from './FlameGraphArrow/utils';
 
@@ -134,8 +137,8 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
   const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
 
-  const [compareAbsolute] = useQueryState('compare_absolute', boolParam);
-  const isCompareAbsolute = compareAbsolute ?? compareAbsoluteDefault === 'true';
+  const [compareAbsolute = compareAbsoluteDefault] = useURLState('compare_absolute');
+  const isCompareAbsolute = compareAbsolute === 'true';
 
   const mappingsListCount = useMemo(
     () => mappingsList.filter(m => m !== '').length,
@@ -177,7 +180,7 @@ const ProfileFlameGraph = function ProfileFlameGraphNonMemo({
   // If there is only one mapping file, we want to color by filename by default.
   useEffect(() => {
     if (mappingsListCount === 1 && colorBy !== 'filename') {
-      void setColorBy('filename');
+      setColorBy('filename');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mappingsListCount]);