@parca/profile 0.19.95 → 0.19.103

package/src/hooks/useLabels.ts

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {useEffect} from 'react';
+
 import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
@@ -68,7 +70,9 @@ export const useLabelNames = (
     },
   });
 
-  console.log('Label names query result:', {data, error, isLoading});
+  useEffect(() => {
+    console.log('Label names query result:', {data, error, isLoading});
+  }, [data, error, isLoading]);
 
   return {
     result: {response: data, error: error as Error},
@@ -109,7 +113,9 @@ export const useLabelValues = (
     },
   });
 
-  console.log('Label values query result:', {data, error, isLoading, labelName});
+  useEffect(() => {
+    console.log('Label values query result:', {data, error, isLoading, labelName});
+  }, [data, error, isLoading, labelName]);
 
   return {
     result: {response: data ?? [], error: error as Error},

package/src/hooks/useQueryState.test.tsx

@@ -69,16 +69,33 @@ vi.mock('@parca/components/src/hooks/URLState/utils', async () => {
   };
 });
 
-// Mock useSumBy to return the sumBy from URL params or undefined
+// Mock useSumBy with stateful behavior using React's useState
 vi.mock('../useSumBy', async () => {
   const actual = await vi.importActual('../useSumBy');
+  const react = await import('react');
+
   return {
     ...actual,
-    useSumBy: (_queryClient: any, _profileType: any, _timeRange: any, defaultValue: any) => ({
-      sumBy: defaultValue,
-      setSumBy: vi.fn(),
-      isLoading: false,
-    }),
+    useSumBy: (
+      _queryClient: any,
+      _profileType: any,
+      _timeRange: any,
+      _draftProfileType: any,
+      _draftTimeRange: any,
+      defaultValue: any
+    ) => {
+      const [draftSumBy, setDraftSumBy] = react.useState<string[] | undefined>(defaultValue);
+      const [sumBy, setSumBy] = react.useState<string[] | undefined>(defaultValue);
+
+      return {
+        sumBy,
+        setSumBy,
+        isLoading: false,
+        draftSumBy,
+        setDraftSumBy,
+        isDraftSumByLoading: false,
+      };
+    },
   };
 });
 
@@ -207,7 +224,9 @@ describe('useQueryState', () => {
     it('should update sumBy', async () => {
       const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
 
+      // sumBy only applies to delta profiles, so we need to set one first
       act(() => {
+        result.current.setDraftExpression('process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}');
         result.current.setDraftSumBy(['namespace', 'container']);
       });
 
@@ -256,15 +275,15 @@ describe('useQueryState', () => {
       const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
 
       act(() => {
-        // Update multiple draft values
-        result.current.setDraftExpression('memory:inuse_space:bytes:space:bytes{}');
+        // Update multiple draft values (using delta profile since sumBy only applies to delta)
+        result.current.setDraftExpression('memory:alloc_space:bytes:space:bytes:delta{}');
         result.current.setDraftTimeRange(7000, 8000, 'relative:minute|30');
         result.current.setDraftSumBy(['pod', 'node']);
       });
 
       // All drafts should be updated
       expect(result.current.draftSelection.expression).toBe(
-        'memory:inuse_space:bytes:space:bytes{}'
+        'memory:alloc_space:bytes:space:bytes:delta{}'
       );
       expect(result.current.draftSelection.from).toBe(7000);
       expect(result.current.draftSelection.to).toBe(8000);
@@ -278,7 +297,7 @@ describe('useQueryState', () => {
         // Should only navigate once for all updates
         expect(mockNavigateTo).toHaveBeenCalledTimes(1);
         const [, params] = mockNavigateTo.mock.calls[0];
-        expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
+        expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
         expect(params.from).toBe('7000');
         expect(params.to).toBe('8000');
         expect(params.time_selection).toBe('relative:minute|30');
@@ -430,9 +449,9 @@ describe('useQueryState', () => {
     it('should handle _b suffix correctly', async () => {
       const {result} = renderHook(() => useQueryState({suffix: '_b'}), {wrapper: createWrapper()});
 
-      // Update draft state
+      // Update draft state (using delta profile since sumBy only applies to delta)
       act(() => {
-        result.current.setDraftExpression('memory:inuse_space:bytes:space:bytes{}');
+        result.current.setDraftExpression('memory:alloc_space:bytes:space:bytes:delta{}');
         result.current.setDraftTimeRange(3333, 4444, 'relative:hour|2');
         result.current.setDraftSumBy(['label_b']);
       });
@@ -445,7 +464,7 @@ describe('useQueryState', () => {
       await waitFor(() => {
         expect(mockNavigateTo).toHaveBeenCalled();
         const [, params] = mockNavigateTo.mock.calls[mockNavigateTo.mock.calls.length - 1];
-        expect(params.expression_b).toBe('memory:inuse_space:bytes:space:bytes{}');
+        expect(params.expression_b).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
         expect(params.from_b).toBe('3333');
         expect(params.to_b).toBe('4444');
         expect(params.sum_by_b).toBe('label_b');
@@ -457,9 +476,9 @@ describe('useQueryState', () => {
     it('should not update URL until commit', async () => {
       const {result} = renderHook(() => useQueryState(), {wrapper: createWrapper()});
 
-      // Make multiple draft changes
+      // Make multiple draft changes (using delta profile since sumBy only applies to delta)
       act(() => {
-        result.current.setDraftExpression('memory:inuse_space:bytes:space:bytes{}');
+        result.current.setDraftExpression('memory:alloc_space:bytes:space:bytes:delta{}');
         result.current.setDraftTimeRange(5000, 6000, 'relative:hour|3');
         result.current.setDraftSumBy(['namespace', 'pod']);
       });
@@ -476,7 +495,7 @@ describe('useQueryState', () => {
       await waitFor(() => {
         expect(mockNavigateTo).toHaveBeenCalledTimes(1);
         const [, params] = mockNavigateTo.mock.calls[0];
-        expect(params.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
+        expect(params.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
         expect(params.from).toBe('5000');
         expect(params.to).toBe('6000');
         expect(params.sum_by).toBe('namespace,pod');
@@ -737,17 +756,17 @@ describe('useQueryState', () => {
 
   describe('State persistence after page reload', () => {
     it('should retain committed values after page reload simulation', async () => {
-      // Initial state
+      // Initial state (using delta profile since sumBy only applies to delta)
       mockLocation.search =
-        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&from=1000&to=2000';
+        '?expression=process_cpu:cpu:nanoseconds:cpu:nanoseconds:delta{}&from=1000&to=2000';
 
       const {result: result1, unmount} = renderHook(() => useQueryState(), {
         wrapper: createWrapper(),
       });
 
-      // User makes changes to draft
+      // User makes changes to draft (using delta profile since sumBy only applies to delta)
       act(() => {
-        result1.current.setDraftExpression('memory:inuse_space:bytes:space:bytes{}');
+        result1.current.setDraftExpression('memory:alloc_space:bytes:space:bytes:delta{}');
         result1.current.setDraftTimeRange(5000, 6000, 'relative:minute|15');
         result1.current.setDraftSumBy(['namespace', 'pod']);
       });
@@ -786,7 +805,7 @@ describe('useQueryState', () => {
 
       // Verify state is loaded from URL after "reload"
       expect(result2.current.querySelection.expression).toBe(
-        'memory:inuse_space:bytes:space:bytes{}'
+        'memory:alloc_space:bytes:space:bytes:delta{}'
       );
       expect(result2.current.querySelection.from).toBe(5000);
       expect(result2.current.querySelection.to).toBe(6000);
@@ -795,7 +814,7 @@ describe('useQueryState', () => {
 
       // Draft should be synced with URL state on page load
       expect(result2.current.draftSelection.expression).toBe(
-        'memory:inuse_space:bytes:space:bytes{}'
+        'memory:alloc_space:bytes:space:bytes:delta{}'
       );
       expect(result2.current.draftSelection.from).toBe(5000);
       expect(result2.current.draftSelection.to).toBe(6000);

package/src/hooks/useQueryState.ts

@@ -19,7 +19,8 @@ import {Query} from '@parca/parser';
 import {QuerySelection} from '../ProfileSelector';
 import {ProfileSelection, ProfileSelectionFromParams, ProfileSource} from '../ProfileSource';
 import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
-import {sumByToParam, useSumBy, useSumByFromParams} from '../useSumBy';
+import {useResetStateOnProfileTypeChange} from '../ProfileView/hooks/useResetStateOnProfileTypeChange';
+import {DEFAULT_EMPTY_SUM_BY, sumByToParam, useSumBy, useSumByFromParams} from '../useSumBy';
 
 interface UseQueryStateOptions {
   suffix?: '_a' | '_b'; // For comparison mode
@@ -79,6 +80,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
 
   const batchUpdates = useURLStateBatch();
   const resetFlameGraphState = useResetFlameGraphState();
+  const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
 
   // URL state hooks with appropriate suffixes
   const [expression, setExpressionState] = useURLState<string>(`expression${suffix}`, {
@@ -115,29 +117,6 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   const [draftTimeSelection, setDraftTimeSelection] = useState<string>(
     timeSelection ?? defaultTimeSelection
   );
-  const [draftSumBy, setDraftSumBy] = useState<string[] | undefined>(sumBy);
-
-  // Sync draft state with URL state when URL changes externally
-  useEffect(() => {
-    setDraftExpression(expression ?? defaultExpression);
-  }, [expression, defaultExpression]);
-
-  useEffect(() => {
-    setDraftFrom(from ?? defaultFrom?.toString() ?? '');
-  }, [from, defaultFrom]);
-
-  useEffect(() => {
-    setDraftTo(to ?? defaultTo?.toString() ?? '');
-  }, [to, defaultTo]);
-
-  useEffect(() => {
-    setDraftTimeSelection(timeSelection ?? defaultTimeSelection);
-  }, [timeSelection, defaultTimeSelection]);
-
-  useEffect(() => {
-    setDraftSumBy(sumBy);
-  }, [sumBy]);
-
   // Parse the draft query to extract profile information
   const draftQuery = useMemo(() => {
     try {
@@ -147,8 +126,16 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     }
   }, [draftExpression]);
 
+  const query = useMemo(() => {
+    try {
+      return Query.parse(expression ?? '');
+    } catch {
+      return Query.parse('');
+    }
+  }, [expression]);
   const draftProfileType = useMemo(() => draftQuery.profileType(), [draftQuery]);
   const draftProfileName = useMemo(() => draftQuery.profileName(), [draftQuery]);
+  const profileType = useMemo(() => query.profileType(), [query]);
 
   // Compute draft time range for label fetching
   const draftTimeRange = useMemo(() => {
@@ -159,13 +146,50 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     );
   }, [draftTimeSelection, draftFrom, draftTo, defaultTimeSelection, defaultFrom, defaultTo]);
   // Use combined sumBy hook for fetching labels and computing defaults (based on committed state)
-  const {sumBy: computedSumByFromURL, isLoading: sumBySelectionLoading} = useSumBy(
+  const {
+    sumBy: computedSumByFromURL,
+    isLoading: sumBySelectionLoading,
+    draftSumBy,
+    setDraftSumBy,
+    isDraftSumByLoading,
+  } = useSumBy(
     queryClient,
+    profileType?.profileName !== '' ? profileType : draftProfileType,
+    draftTimeRange,
     draftProfileType,
     draftTimeRange,
     sumBy
   );
 
+  // Sync draft state with URL state when URL changes externally
+  useEffect(() => {
+    setDraftExpression(expression ?? defaultExpression);
+  }, [expression, defaultExpression]);
+
+  useEffect(() => {
+    setDraftFrom(from ?? defaultFrom?.toString() ?? '');
+  }, [from, defaultFrom]);
+
+  useEffect(() => {
+    setDraftTo(to ?? defaultTo?.toString() ?? '');
+  }, [to, defaultTo]);
+
+  useEffect(() => {
+    setDraftTimeSelection(timeSelection ?? defaultTimeSelection);
+  }, [timeSelection, defaultTimeSelection]);
+
+  useEffect(() => {
+    setDraftSumBy(sumBy);
+  }, [sumBy, setDraftSumBy]);
+
+  // Sync computed sumBy to URL if URL doesn't already have a value
+  // to ensure the shared URL can always pick it up.
+  useEffect(() => {
+    if (sumByParam === undefined && computedSumByFromURL !== undefined && !sumBySelectionLoading) {
+      setSumByParam(sumByToParam(computedSumByFromURL));
+    }
+  }, [sumByParam, computedSumByFromURL, sumBySelectionLoading, setSumByParam]);
+
   // Construct the QuerySelection object (committed state from URL)
   const querySelection: QuerySelection = useMemo(() => {
     const range = DateTimeRange.fromRangeKey(
@@ -285,12 +309,16 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
         setFromState(finalFrom);
         setToState(finalTo);
         setTimeSelectionState(finalTimeSelection);
-        setSumByParam(sumByToParam(draftSumBy));
 
         // Auto-calculate merge parameters for delta profiles
         // Parse the final expression to check if it's a delta profile
         const finalQuery = Query.parse(finalExpression);
         const isDelta = finalQuery.profileType().delta;
+        if (isDelta) {
+          setSumByParam(sumByToParam(draftSumBy));
+        } else {
+          setSumByParam(DEFAULT_EMPTY_SUM_BY);
+        }
 
         if (isDelta && finalFrom !== '' && finalTo !== '') {
           const fromMs = parseInt(finalFrom);
@@ -313,6 +341,12 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
           setSelectionParam(undefined);
         }
         resetFlameGraphState();
+        if (
+          draftProfileType.toString() !==
+          Query.parse(querySelection.expression).profileType().toString()
+        ) {
+          resetStateOnProfileTypeChange();
+        }
       });
     },
     [
@@ -334,6 +368,9 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       setMergeToState,
       setSelectionParam,
       resetFlameGraphState,
+      resetStateOnProfileTypeChange,
+      draftProfileType,
+      querySelection.expression,
     ]
   );
 
@@ -346,9 +383,12 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     []
   );
 
-  const setDraftSumByCallback = useCallback((newSumBy: string[] | undefined) => {
-    setDraftSumBy(newSumBy);
-  }, []);
+  const setDraftSumByCallback = useCallback(
+    (newSumBy: string[] | undefined) => {
+      setDraftSumBy(newSumBy);
+    },
+    [setDraftSumBy]
+  );
 
   const setDraftProfileName = useCallback(
     (newProfileName: string) => {
@@ -357,9 +397,10 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       const [newQuery, changed] = draftQuery.setProfileName(newProfileName);
       if (changed) {
         setDraftExpression(newQuery.toString());
+        setDraftSumBy(undefined);
       }
     },
-    [draftQuery]
+    [draftQuery, setDraftSumBy]
   );
 
   const setDraftMatchers = useCallback(
@@ -421,7 +462,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     setProfileSelection,
 
     // Loading state
-    sumByLoading: sumBySelectionLoading,
+    sumByLoading: isDraftSumByLoading || sumBySelectionLoading,
 
     draftParsedQuery,
     parsedQuery,

package/src/useSumBy.ts

@@ -52,6 +52,7 @@ export const useSumBySelection = (
   profileType: ProfileType | undefined,
   labelNamesLoading: boolean,
   labels: string[] | undefined,
+  draftSumBy: string[] | undefined,
   {
     defaultValue,
   }: {
@@ -100,9 +101,15 @@ export const useSumBySelection = (
   const lastValidSumByRef = useRef<string[]>(DEFAULT_EMPTY_SUM_BY);
 
   const sumBy = useMemo(() => {
-    // If loading, return the last valid value to prevent input from blanking
-    if (labelNamesLoading && lastValidSumByRef.current !== DEFAULT_EMPTY_SUM_BY) {
-      return lastValidSumByRef.current;
+    if (labelNamesLoading) {
+      // For smoother UX, return draftSumBy first if available during loading
+      // as this must be recently computed with the draft time range labels.
+      if (draftSumBy !== undefined) {
+        return draftSumBy;
+      }
+      if (lastValidSumByRef.current == null) {
+        return lastValidSumByRef.current;
+      }
     }
 
     let result =
@@ -116,7 +123,7 @@ export const useSumBySelection = (
     lastValidSumByRef.current = result;
 
     return result;
-  }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading]);
+  }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading, draftSumBy]);
 
   return [
     sumBy,
@@ -187,11 +194,16 @@ export const useSumBy = (
   queryClient: QueryServiceClient,
   profileType: ProfileType | undefined,
   timeRange: DateTimeRange,
+  draftProfileType: ProfileType | undefined,
+  draftTimeRange: DateTimeRange,
   defaultValue?: string[]
 ): {
   sumBy: string[] | undefined;
   setSumBy: (sumBy: string[]) => void;
   isLoading: boolean;
+  draftSumBy: string[] | undefined;
+  setDraftSumBy: (sumBy: string[] | undefined) => void;
+  isDraftSumByLoading: boolean;
 } => {
   const {loading: labelNamesLoading, result} = useLabelNames(
     queryClient,
@@ -200,6 +212,13 @@ export const useSumBy = (
     timeRange.getToMs()
   );
 
+  const {draftSumBy, setDraftSumBy, isDraftSumByLoading} = useDraftSumBy(
+    queryClient,
+    draftProfileType,
+    draftTimeRange,
+    defaultValue
+  );
+
   const labels = useMemo(() => {
     return result.response?.labelNames === undefined ? [] : result.response.labelNames;
   }, [result]);
@@ -208,6 +227,7 @@ export const useSumBy = (
     profileType,
     labelNamesLoading,
     labels,
+    draftSumBy,
     {defaultValue}
   );
 
@@ -215,5 +235,39 @@ export const useSumBy = (
     sumBy: sumBySelection,
     setSumBy: setSumByInternal,
     isLoading,
+    draftSumBy,
+    setDraftSumBy,
+    isDraftSumByLoading,
+  };
+};
+
+export const useDraftSumBy = (
+  queryClient: QueryServiceClient,
+  profileType: ProfileType | undefined,
+  timeRange: DateTimeRange,
+  defaultValue?: string[]
+): {
+  draftSumBy: string[] | undefined;
+  setDraftSumBy: (sumBy: string[] | undefined) => void;
+  isDraftSumByLoading: boolean;
+} => {
+  const [draftSumBy, setDraftSumBy] = useState<string[] | undefined>(defaultValue);
+  const {loading: labelNamesLoading, result} = useLabelNames(
+    queryClient,
+    profileType?.toString() ?? '',
+    timeRange.getFromMs(),
+    timeRange.getToMs()
+  );
+
+  const labels = useMemo(() => {
+    return result.response?.labelNames === undefined ? [] : result.response.labelNames;
+  }, [result]);
+
+  const {defaultSumBy, isLoading} = useDefaultSumBy(profileType, labelNamesLoading, labels);
+
+  return {
+    draftSumBy: draftSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY,
+    setDraftSumBy: setDraftSumBy,
+    isDraftSumByLoading: isLoading,
   };
 };