@parca/profile 0.19.94 → 0.19.102

package/dist/useSumBy.js

@@ -31,7 +31,7 @@ const getDefaultSumBy = (profile, labels) => {
     }
     return undefined;
 };
-export const useSumBySelection = (profileType, labelNamesLoading, labels, { defaultValue, } = {}) => {
+export const useSumBySelection = (profileType, labelNamesLoading, labels, draftSumBy, { defaultValue, } = {}) => {
     const [userSelectedSumBy, setUserSelectedSumBy] = useState(profileType != null ? { [profileType.toString()]: defaultValue } : {});
     // Update userSelectedSumBy when defaultValue changes (e.g., during navigation)
     useEffect(() => {
@@ -57,9 +57,15 @@ export const useSumBySelection = (profileType, labelNamesLoading, labels, { defa
     // Store the last valid sumBy value to return during loading
     const lastValidSumByRef = useRef(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 = userSelectedSumBy[profileType?.toString() ?? ''] ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
         if (profileType?.delta !== true) {
@@ -68,7 +74,7 @@ export const useSumBySelection = (profileType, labelNamesLoading, labels, { defa
         // Store the computed value for next loading state
         lastValidSumByRef.current = result;
         return result;
-    }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading]);
+    }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading, draftSumBy]);
     return [
         sumBy,
         setSumBy,
@@ -118,15 +124,32 @@ export const sumByToParam = (sumBy) => {
     return sumBy;
 };
 // Combined hook that handles all sumBy logic: fetching labels, computing defaults, and managing selection
-export const useSumBy = (queryClient, profileType, timeRange, defaultValue) => {
+export const useSumBy = (queryClient, profileType, timeRange, draftProfileType, draftTimeRange, defaultValue) => {
     const { loading: labelNamesLoading, result } = useLabelNames(queryClient, profileType?.toString() ?? '', timeRange.getFromMs(), timeRange.getToMs());
+    const { draftSumBy, setDraftSumBy, isDraftSumByLoading } = useDraftSumBy(queryClient, draftProfileType, draftTimeRange, defaultValue);
     const labels = useMemo(() => {
         return result.response?.labelNames === undefined ? [] : result.response.labelNames;
     }, [result]);
-    const [sumBySelection, setSumByInternal, { isLoading }] = useSumBySelection(profileType, labelNamesLoading, labels, { defaultValue });
+    const [sumBySelection, setSumByInternal, { isLoading }] = useSumBySelection(profileType, labelNamesLoading, labels, draftSumBy, { defaultValue });
     return {
         sumBy: sumBySelection,
         setSumBy: setSumByInternal,
         isLoading,
+        draftSumBy,
+        setDraftSumBy,
+        isDraftSumByLoading,
+    };
+};
+export const useDraftSumBy = (queryClient, profileType, timeRange, defaultValue) => {
+    const [draftSumBy, setDraftSumBy] = useState(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,
     };
 };

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.94",
+  "version": "0.19.102",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
-    "@parca/client": "0.17.11",
-    "@parca/components": "0.16.386",
-    "@parca/dynamicsize": "0.16.67",
-    "@parca/hooks": "0.0.111",
-    "@parca/icons": "0.16.74",
-    "@parca/parser": "0.16.81",
-    "@parca/store": "0.16.194",
+    "@parca/client": "0.17.16",
+    "@parca/components": "0.16.392",
+    "@parca/dynamicsize": "0.16.72",
+    "@parca/hooks": "0.0.116",
+    "@parca/icons": "0.16.79",
+    "@parca/parser": "0.16.86",
+    "@parca/store": "0.16.199",
     "@parca/test-utils": "0.0.17",
-    "@parca/utilities": "0.0.117",
+    "@parca/utilities": "0.0.122",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -75,9 +75,14 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parca-dev/parca",
+    "directory": "ui/packages/shared/profile"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "876c0c10323fe16e6412180c163078a17f23c444"
+  "gitHead": "71d719bdbc5b9591b427c668b4ab9685eeb44b4a"
 }

package/src/ProfileFlameGraph/FlameGraphArrow/ContextMenu.tsx

@@ -194,11 +194,13 @@ const ContextMenu = ({
 
             if (dashboardItems.includes('sandwich')) {
               setSandwichFunctionName(functionName);
+              hideMenu();
               return;
             }
 
             setSandwichFunctionName(functionName);
             setDashboardItems([...dashboardItems, 'sandwich']);
+            hideMenu();
           }}
           disabled={functionName === '' || functionName == null}
         >

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -29,7 +29,7 @@ interface MetricsGraphSectionProps {
   querySelection: QuerySelection;
   profileSelection: ProfileSelection | null;
   comparing: boolean;
-  sumBy: string[] | null;
+  sumBy: string[] | undefined;
   defaultSumByLoading: boolean;
   queryClient: QueryServiceClient;
   queryExpressionString: string;
@@ -170,7 +170,7 @@ export function MetricsGraphSection({
                   to={querySelection.to}
                   profile={profileSelection}
                   comparing={comparing}
-                  sumBy={querySelection.sumBy ?? sumBy ?? []}
+                  sumBy={sumBy ?? []}
                   sumByLoading={defaultSumByLoading}
                   setTimeRange={handleTimeRangeChange}
                   addLabelMatcher={addLabelMatcher}

package/src/ProfileSelector/index.tsx

@@ -209,10 +209,6 @@ const ProfileSelector = ({
         const currentTo = timeRangeSelection.getToMs(true);
         const currentRangeKey = timeRangeSelection.getRangeKey();
         // Commit with refreshed time range
-        console.log(
-          '[draftExpression] setQueryExpression: committing with refreshed time range:',
-          draftSelection.expression
-        );
         commitDraft({
           from: currentFrom,
           to: currentTo,
@@ -332,7 +328,7 @@ const ProfileSelector = ({
         querySelection={querySelection}
         profileSelection={profileSelection}
         comparing={comparing}
-        sumBy={querySelection.sumBy ?? []}
+        sumBy={querySelection.sumBy}
         defaultSumByLoading={sumByLoading}
         queryClient={queryClient}
         queryExpressionString={queryExpressionString}

package/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

@@ -18,6 +18,8 @@ import {useProfileFilters} from '../components/ProfileFilters/useProfileFilters'
 export const useResetStateOnProfileTypeChange = (): (() => void) => {
   const [groupBy, setGroupBy] = useURLState('group_by');
   const [curPath, setCurPath] = useURLState('cur_path');
+  const [sumByA, setSumByA] = useURLState('sum_by_a');
+  const [sumByB, setSumByB] = useURLState('sum_by_b');
   const {resetFilters} = useProfileFilters();
   const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
   const batchUpdates = useURLStateBatch();
@@ -34,6 +36,12 @@ export const useResetStateOnProfileTypeChange = (): (() => void) => {
       if (sandwichFunctionName !== undefined) {
         setSandwichFunctionName(undefined);
       }
+      if (sumByA !== undefined) {
+        setSumByA(undefined);
+      }
+      if (sumByB !== undefined) {
+        setSumByB(undefined);
+      }
 
       resetFilters();
     });

package/src/SimpleMatchers/Select.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
@@ -350,7 +350,7 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
                 </div>
               ) : (
                 groupedFilteredItems.map(group => (
-                  <>
+                  <Fragment key={group.type}>
                     {groupedFilteredItems.length > 1 &&
                     groupedFilteredItems.every(g => g.type !== '') &&
                     group.type !== '' ? (
@@ -369,7 +369,7 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
                         handleSelection={handleSelection}
                       />
                     ))}
-                  </>
+                  </Fragment>
                 ))
               )}
             </div>

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},

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,