@parca/profile 0.19.140 → 0.19.142

package/src/ProfileMetricsGraph/index.tsx

@@ -15,7 +15,6 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import {AnimatePresence, motion} from 'framer-motion';
-import {useQueryState} from 'nuqs';
 
 import {
   Label,
@@ -26,8 +25,11 @@ import {
 import {
   DateTimeRange,
   MetricsGraphSkeleton,
+  NumberParser,
+  NumberSerializer,
   TextWithTooltip,
   useParcaContext,
+  useURLStateCustom,
 } from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
@@ -36,7 +38,6 @@ import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph, {ContextMenuItemOrSubmenu, Series, SeriesPoint} from '../MetricsGraph';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
-import {intParam} from '../hooks/urlParsers';
 import {getStepCountFromScreenWidth, useQueryRange} from './hooks/useQueryRange';
 
 const createProfileContextMenuItems = (
@@ -199,10 +200,11 @@ const ProfileMetricsGraph = ({
   comparing = false,
   sumBy,
 }: ProfileMetricsGraphProps): JSX.Element => {
-  const [rawStepCount] = useQueryState(
-    'step_count',
-    intParam.withDefault(getStepCountFromScreenWidth(10))
-  );
+  const [rawStepCount] = useURLStateCustom<number>('step_count', {
+    defaultValue: String(getStepCountFromScreenWidth(10)),
+    parse: NumberParser,
+    stringify: NumberSerializer,
+  });
   // Clamp step count so the step duration is at least 1 second as we don't have this enforced server-side anymore.
   const stepCount = useMemo(() => {
     const maxForOneSecond = Math.floor((to - from) / 1000);

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -14,7 +14,7 @@
 import cx from 'classnames';
 
 import {Label, QueryServiceClient} from '@parca/client';
-import {DateTimeRange, useParcaContext} from '@parca/components';
+import {DateTimeRange, useParcaContext, useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 
 import {ProfileSelection} from '..';
@@ -67,6 +67,7 @@ export function MetricsGraphSection({
   hasNoProfileTypes = false,
 }: MetricsGraphSectionProps): JSX.Element {
   const resetStateOnSeriesChange = useResetStateOnSeriesChange();
+  const batchUpdates = useURLStateBatch();
   const {profileExplorer} = useParcaContext();
   const {heightStyle} = useMetricsGraphDimensions(comparing, profileExplorer?.metricsGraph.height);
   const handleTimeRangeChange = (range: DateTimeRange): void => {
@@ -116,8 +117,10 @@ export function MetricsGraphSection({
 
     if (hasChanged) {
       // Immediately apply the filter when adding label matchers from the graph
-      setNewQueryExpression(newQuery.toString());
-      commitDraft(undefined, newQuery.toString());
+      batchUpdates(() => {
+        setNewQueryExpression(newQuery.toString());
+        commitDraft(undefined, newQuery.toString());
+      });
     }
   };
 
@@ -138,8 +141,10 @@ export function MetricsGraphSection({
 
     const mergeFrom = timestamp;
     const mergeTo = query.profileType().delta ? mergeFrom + BigInt(duration) : mergeFrom;
-    resetStateOnSeriesChange(); // reset some state when a new series is selected
-    setProfileSelection(mergeFrom, mergeTo, query);
+    batchUpdates(() => {
+      resetStateOnSeriesChange(); // reset some state when a new series is selected
+      setProfileSelection(mergeFrom, mergeTo, query);
+    });
   };
 
   return (

package/src/ProfileSelector/index.tsx

@@ -11,13 +11,19 @@
 // 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';
 
 import {ProfileTypesRequest, ProfileTypesResponse, QueryServiceClient} from '@parca/client';
-import {DateTimeRange, IconButton, useGrpcMetadata, useParcaContext} from '@parca/components';
+import {
+  DateTimeRange,
+  IconButton,
+  useGrpcMetadata,
+  useParcaContext,
+  useURLState,
+  useURLStateBatch,
+} from '@parca/components';
 import {CloseIcon} from '@parca/icons';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
@@ -30,7 +36,6 @@ import {
 import {QueryControls} from '../QueryControls';
 import {LabelsQueryProvider, useLabelsQueryProvider} from '../contexts/LabelsQueryProvider';
 import {UnifiedLabelsProvider} from '../contexts/UnifiedLabelsContext';
-import {stringParam} from '../hooks/urlParsers';
 import {useLabelNames} from '../hooks/useLabels';
 import {useQueryState} from '../hooks/useQueryState';
 import useGrpcQuery from '../useGrpcQuery';
@@ -113,16 +118,8 @@ const ProfileSelector = ({
   onSearchHook,
 }: ProfileSelectorProps): JSX.Element => {
   const {externalProfilerComponent, additionalMetricsGraph} = useParcaContext();
-  const [queryBrowserMode, setRawQueryBrowserMode] = useNuqsQueryState(
-    'query_browser_mode',
-    stringParam
-  );
-  const setQueryBrowserMode = useCallback(
-    (mode: string | null) => {
-      void setRawQueryBrowserMode(mode);
-    },
-    [setRawQueryBrowserMode]
-  );
+  const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
+  const batchUpdates = useURLStateBatch();
 
   const profileFilterDefaults = externalProfilerComponent?.profileFilterDefaults as
     | ProfileFilter[]
@@ -157,7 +154,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 +175,7 @@ const ProfileSelector = ({
         querySelection.to
       )
     );
-  }, [querySelection.timeSelection, querySelection.from, querySelection.to]);
+  }
 
   const [queryExpressionString, setQueryExpressionString] = useState(draftSelection.expression);
 
@@ -201,18 +211,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);
@@ -225,25 +245,27 @@ const ProfileSelector = ({
   const selectedProfileName = query.profileName();
 
   const setQueryExpression = (updateTs = false): void => {
-    if (onSearchHook != null) {
-      onSearchHook();
-    }
-    // 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();
-    }
+    batchUpdates(() => {
+      if (onSearchHook != null) {
+        onSearchHook();
+      }
+      // 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 => {

package/src/ProfileView/components/ActionButtons/SortByDropdown.tsx

@@ -11,23 +11,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useQueryState} from 'nuqs';
-
-import {Select} from '@parca/components';
+import {Select, useURLState} from '@parca/components';
 
 import {
   FIELD_CUMULATIVE,
   FIELD_DIFF,
   FIELD_FUNCTION_NAME,
 } from '../../../ProfileFlameGraph/FlameGraphArrow';
-import {stringParam} from '../../../hooks/urlParsers';
 import {useProfileViewContext} from '../../context/ProfileViewContext';
 
 const SortByDropdown = (): React.JSX.Element => {
-  const [storeSortBy, setStoreSortBy] = useQueryState(
-    'sort_by',
-    stringParam.withDefault(FIELD_FUNCTION_NAME)
-  );
+  const [storeSortBy, setStoreSortBy] = useURLState('sort_by', {
+    defaultValue: FIELD_FUNCTION_NAME,
+  });
 
   const {compareMode} = useProfileViewContext();
 
@@ -74,8 +70,8 @@ const SortByDropdown = (): React.JSX.Element => {
             },
           },
         ]}
-        selectedKey={storeSortBy}
-        onSelection={key => void setStoreSortBy(key)}
+        selectedKey={storeSortBy as string}
+        onSelection={key => setStoreSortBy(key)}
         placeholder={'Sort By'}
         primary={false}
         disabled={false}

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -16,12 +16,12 @@ import React, {useMemo} from 'react';
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
+import {useURLState} from '@parca/components';
 import {USER_PREFERENCES, useCurrentColorProfile, useUserPreference} from '@parca/hooks';
 import {EVERYTHING_ELSE, selectDarkMode, useAppSelector} from '@parca/store';
 
 import {getMappingColors} from '../../ProfileFlameGraph/FlameGraphArrow';
 import useMappingList from '../../ProfileFlameGraph/FlameGraphArrow/useMappingList';
-import {useColorBy} from '../../hooks/useColorBy';
 import {useProfileFilters} from './ProfileFilters/useProfileFilters';
 
 interface Props {
@@ -37,7 +37,9 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
   );
 
-  const {colorBy} = useColorBy();
+  const [colorByValue, _] = useURLState('color_by');
+
+  const colorBy = colorByValue === 'binary' || colorByValue === undefined ? 'binary' : 'filename';
 
   const {appliedFilters, removeExcludeBinary, excludeBinary} = useProfileFilters();
 

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

@@ -12,20 +12,19 @@
 // limitations under the License.
 
 import {Icon} from '@iconify/react';
-import {useQueryState} from 'nuqs';
 
-import {Button} from '@parca/components';
+import {Button, useURLState} from '@parca/components';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
-import {invertCallStackParser} from '../../../hooks/urlParsers';
 import {useResetFlameGraphState} from '../../hooks/useResetFlameGraphState';
 
 const InvertCallStack = (): JSX.Element => {
-  const [isInvert, setInvertStack] = useQueryState('invert_call_stack', invertCallStackParser);
+  const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
+  const isInvert = invertStack === 'true';
   const resetFlameGraphState = useResetFlameGraphState();
 
   const handleSetInvert = (value: boolean): void => {
-    void setInvertStack(value);
+    setInvertStack(value ? 'true' : '');
 
     resetFlameGraphState();
   };