@parca/profile 0.19.95 → 0.19.102

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.102](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.101...@parca/profile@0.19.102) (2025-12-15)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.101](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.100...@parca/profile@0.19.101) (2025-12-15)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.100](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.99...@parca/profile@0.19.100) (2025-12-15)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.99](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.98...@parca/profile@0.19.99) (2025-12-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.98](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.97...@parca/profile@0.19.98) (2025-12-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.97](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.96...@parca/profile@0.19.97) (2025-12-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.96](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.95...@parca/profile@0.19.96) (2025-12-12)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.95](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.94...@parca/profile@0.19.95) (2025-12-09)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileSelector/MetricsGraphSection.d.ts

@@ -10,7 +10,7 @@ interface MetricsGraphSectionProps {
     querySelection: QuerySelection;
     profileSelection: ProfileSelection | null;
     comparing: boolean;
-    sumBy: string[] | null;
+    sumBy: string[] | undefined;
     defaultSumByLoading: boolean;
     queryClient: QueryServiceClient;
     queryExpressionString: string;

package/dist/ProfileSelector/MetricsGraphSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAmB,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAGpC,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAEvC,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChF,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,WAAW,EAAE,CACX,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,EACtE,UAAU,CAAC,EAAE,MAAM,KAChB,IAAI,CAAC;CACX;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,qBAAqB,EACrB,WAAW,GACZ,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA+HxC"}
+{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAmB,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAGpC,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAEvC,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAChF,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,WAAW,EAAE,CACX,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,EACtE,UAAU,CAAC,EAAE,MAAM,KAChB,IAAI,CAAC;CACX;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,qBAAqB,EACrB,WAAW,GACZ,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA+HxC"}

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -84,5 +84,5 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
     };
     return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [setDisplayHideMetricsGraphButton != null ? (_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900 z-[5]', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] })) : null, showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: (querySelection.expression !== '' || defaultSumByLoading) &&
                         querySelection.from !== undefined &&
-                        querySelection.to !== undefined ? (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
+                        querySelection.to !== undefined ? (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
 }

package/dist/ProfileSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAoD,MAAM,OAAO,CAAC;AAElG,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAsB,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAY5F,OAAO,EAAyB,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAY/E,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,WAAW,EAAE,kBAAkB,CAAC;IAChC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAC1B,QAAQ,kBAAkB,EAC1B,QAAQ,MAAM,EACd,MAAM,MAAM,KACX,mBAsBF,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,kMAYtB,oBAAoB,KAAG,GAAG,CAAC,OAyO7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAoD,MAAM,OAAO,CAAC;AAElG,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAsB,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAY5F,OAAO,EAAyB,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAY/E,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,WAAW,EAAE,kBAAkB,CAAC;IAChC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAC1B,QAAQ,kBAAkB,EAC1B,QAAQ,MAAM,EACd,MAAM,MAAM,KACX,mBAsBF,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,kMAYtB,oBAAoB,KAAG,GAAG,CAAC,OAqO7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -101,7 +101,6 @@ const ProfileSelector = ({ queryClient, closeProfile, enforcedProfileName, compa
                 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,
@@ -150,7 +149,7 @@ const ProfileSelector = ({ queryClient, closeProfile, enforcedProfileName, compa
         queryExpressionString === '{}';
     const queryBrowserRef = useRef(null);
     const sumByRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(LabelsQueryProvider, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName ?? profileType.toString(), queryClient: queryClient, start: timeRangeSelection.getFromMs(), end: timeRangeSelection.getToMs(), suffix: suffix, children: _jsx(LabelsSource, { children: _jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: handleTimeRangeChange, searchDisabled: searchDisabled, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: draftSelection.sumBy ?? [], sumBySelectionLoading: sumByLoading, setUserSumBySelection: setDraftSumBy, profileType: profileType, profileTypesError: error, viewComponent: viewComponent, draftSelection: draftSelection, setDraftMatchers: setDraftMatchers, draftParsedQuery: draftParsedQuery, commitDraft: commitDraft }) }) }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}), ...testId(TEST_IDS.COMPARE_CLOSE_BUTTON) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? [], defaultSumByLoading: sumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: handleTimeRangeChange, selectQuery: commitDraft, setProfileSelection: setProfileSelection, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setDraftExpression, commitDraft: commitDraft })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(LabelsQueryProvider, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName ?? profileType.toString(), queryClient: queryClient, start: timeRangeSelection.getFromMs(), end: timeRangeSelection.getToMs(), suffix: suffix, children: _jsx(LabelsSource, { children: _jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: handleTimeRangeChange, searchDisabled: searchDisabled, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: draftSelection.sumBy ?? [], sumBySelectionLoading: sumByLoading, setUserSumBySelection: setDraftSumBy, profileType: profileType, profileTypesError: error, viewComponent: viewComponent, draftSelection: draftSelection, setDraftMatchers: setDraftMatchers, draftParsedQuery: draftParsedQuery, commitDraft: commitDraft }) }) }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}), ...testId(TEST_IDS.COMPARE_CLOSE_BUTTON) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy, defaultSumByLoading: sumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: handleTimeRangeChange, selectQuery: commitDraft, setProfileSelection: setProfileSelection, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setDraftExpression, commitDraft: commitDraft })] }));
 };
 export default ProfileSelector;
 const LabelsSource = ({ children }) => {

package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResetStateOnProfileTypeChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,gCAAgC,QAAO,CAAC,MAAM,IAAI,CAuB9D,CAAC"}
+{"version":3,"file":"useResetStateOnProfileTypeChange.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,gCAAgC,QAAO,CAAC,MAAM,IAAI,CA+B9D,CAAC"}

package/dist/ProfileView/hooks/useResetStateOnProfileTypeChange.js

@@ -15,6 +15,8 @@ import { useProfileFilters } from '../components/ProfileFilters/useProfileFilter
 export const useResetStateOnProfileTypeChange = () => {
     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();
@@ -30,6 +32,12 @@ export const useResetStateOnProfileTypeChange = () => {
             if (sandwichFunctionName !== undefined) {
                 setSandwichFunctionName(undefined);
             }
+            if (sumByA !== undefined) {
+                setSumByA(undefined);
+            }
+            if (sumByB !== undefined) {
+                setSumByB(undefined);
+            }
             resetFilters();
         });
     };

package/dist/SimpleMatchers/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwUnE,CAAC;AAkDF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAShF,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwUnE,CAAC;AAkDF,eAAe,YAAY,CAAC"}

package/dist/SimpleMatchers/Select.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import levenshtein from 'fast-levenshtein';
@@ -177,9 +177,9 @@ const CustomSelect = ({ items: itemsProp, selectedKey, onSelection, placeholder
     return (_jsxs("div", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, onClick: onButtonClick, children: [_jsxs("div", { id: id, onClick: () => !disabled && setIsOpen(!isOpen), className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), tabIndex: 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...restProps, children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis whitespace-nowrap'), children: renderSelection(selection) }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }), isOpen && (_jsx("div", { ref: optionsRef, className: cx('absolute z-50 mt-1 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm', { [optionsClassname]: optionsClassname.length > 0 }), role: "listbox", children: _jsxs("div", { className: "relative flex flex-col", children: [searchable && (_jsx("div", { className: "sticky z-10 top-[-5px] w-auto max-w-full", children: _jsx("div", { className: "flex flex-col", children: editable ? (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: searchInputRef, className: "w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]", placeholder: "Type a RegEx to add", value: searchTerm, onChange: e => setSearchTerm(e.target.value), onFocus: e => moveCaretToEnd(e) }), editable && searchTerm.length > 0 && (_jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx(Button, { variant: "primary", className: "w-full h-[30px]", onClick: () => {
                                                     onSelection(searchTerm);
                                                     setIsOpen(false);
-                                                }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), _jsx("div", { className: "flex-1 min-h-0", children: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : groupedFilteredItems.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center", ...testId(TEST_IDS.LABEL_VALUE_NO_RESULTS), children: "No values found" })) : (groupedFilteredItems.map(group => (_jsxs(_Fragment, { children: [groupedFilteredItems.length > 1 &&
+                                                }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), _jsx("div", { className: "flex-1 min-h-0", children: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : groupedFilteredItems.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center", ...testId(TEST_IDS.LABEL_VALUE_NO_RESULTS), children: "No values found" })) : (groupedFilteredItems.map(group => (_jsxs(Fragment, { children: [groupedFilteredItems.length > 1 &&
                                         groupedFilteredItems.every(g => g.type !== '') &&
-                                        group.type !== '' ? (_jsx("div", { className: "pl-2", children: _jsx(DividerWithLabel, { label: group.type }) })) : null, group.values.map((item, index) => (_jsx(OptionItem, { item: item, index: index, optionRefs: optionRefs, focusedIndex: focusedIndex, selectedKey: selectedKey, handleSelection: handleSelection }, item.key)))] })))) }), refetchValues !== undefined && loading !== true && (_jsx(RefreshButton, { onClick: () => void handleRefetch(), disabled: isRefetching, title: "Refresh results", testId: TEST_IDS.LABEL_VALUE_REFRESH_BUTTON, sticky: true, loading: isRefetching }))] }) }))] }));
+                                        group.type !== '' ? (_jsx("div", { className: "pl-2", children: _jsx(DividerWithLabel, { label: group.type }) })) : null, group.values.map((item, index) => (_jsx(OptionItem, { item: item, index: index, optionRefs: optionRefs, focusedIndex: focusedIndex, selectedKey: selectedKey, handleSelection: handleSelection }, item.key)))] }, group.type)))) }), refetchValues !== undefined && loading !== true && (_jsx(RefreshButton, { onClick: () => void handleRefetch(), disabled: isRefetching, title: "Refresh results", testId: TEST_IDS.LABEL_VALUE_REFRESH_BUTTON, sticky: true, loading: isRefetching }))] }) }))] }));
 };
 const OptionItem = ({ item, optionRefs, index, focusedIndex, selectedKey, handleSelection, }) => {
     return (_jsxs("div", { ref: el => {

package/dist/hooks/useLabels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLabels.d.ts","sourceRoot":"","sources":["../../src/hooks/useLabels.ts"],"names":[],"mappings":"AAaA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAgB,MAAM,eAAe,CAAC;AAM/F,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GACxB,QAAQ,kBAAkB,EAC1B,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,EACZ,QAAQ,MAAM,EAAE,KACf,aAgCF,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,kBAAkB,EAC1B,WAAW,MAAM,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,KACX,cAiCF,CAAC"}
+{"version":3,"file":"useLabels.d.ts","sourceRoot":"","sources":["../../src/hooks/useLabels.ts"],"names":[],"mappings":"AAeA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAgB,MAAM,eAAe,CAAC;AAM/F,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GACxB,QAAQ,kBAAkB,EAC1B,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,EACZ,QAAQ,MAAM,EAAE,KACf,aAkCF,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,kBAAkB,EAC1B,WAAW,MAAM,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,KACX,cAiCF,CAAC"}

package/dist/hooks/useLabels.js

@@ -10,6 +10,7 @@
 // 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 { useEffect } from 'react';
 import { useGrpcMetadata } from '@parca/components';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
 import useGrpcQuery from '../useGrpcQuery';
@@ -34,7 +35,9 @@ export const useLabelNames = (client, profileType, start, end, match) => {
             keepPreviousData: false,
         },
     });
-    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 },
         loading: isLoading,

package/dist/hooks/useQueryState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAI7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CAAC,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAG9F,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;IAGtB,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC;IAG/B,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBAwWlE,CAAC"}
+{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAK7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CAAC,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAG9F,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;IAGtB,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC;IAG/B,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBAgZlE,CAAC"}

package/dist/hooks/useQueryState.js

@@ -15,13 +15,15 @@ import { DateTimeRange, useParcaContext, useURLState, useURLStateBatch } from '@
 import { Query } from '@parca/parser';
 import { ProfileSelectionFromParams } 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';
 export const useQueryState = (options = {}) => {
     const { queryServiceClient: queryClient } = useParcaContext();
     const { suffix = '', defaultExpression = '', defaultTimeSelection = 'relative:minute|15', // Default to 15 minutes relative
     defaultFrom, defaultTo, comparing = false, } = options;
     const batchUpdates = useURLStateBatch();
     const resetFlameGraphState = useResetFlameGraphState();
+    const resetStateOnProfileTypeChange = useResetStateOnProfileTypeChange();
     // URL state hooks with appropriate suffixes
     const [expression, setExpressionState] = useURLState(`expression${suffix}`, {
         defaultValue: defaultExpression,
@@ -47,23 +49,6 @@ export const useQueryState = (options = {}) => {
     const [draftFrom, setDraftFrom] = useState(from ?? defaultFrom?.toString() ?? '');
     const [draftTo, setDraftTo] = useState(to ?? defaultTo?.toString() ?? '');
     const [draftTimeSelection, setDraftTimeSelection] = useState(timeSelection ?? defaultTimeSelection);
-    const [draftSumBy, setDraftSumBy] = useState(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 {
@@ -73,14 +58,46 @@ export const useQueryState = (options = {}) => {
             return Query.parse('');
         }
     }, [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(() => {
         return DateTimeRange.fromRangeKey(draftTimeSelection ?? defaultTimeSelection, draftFrom !== '' ? parseInt(draftFrom) : defaultFrom, draftTo !== '' ? parseInt(draftTo) : defaultTo);
     }, [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(queryClient, draftProfileType, draftTimeRange, sumBy);
+    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 = useMemo(() => {
         const range = DateTimeRange.fromRangeKey(timeSelection ?? defaultTimeSelection, from !== undefined && from !== '' ? parseInt(from) : defaultFrom, to !== undefined && to !== '' ? parseInt(to) : defaultTo);
@@ -180,11 +197,16 @@ export const useQueryState = (options = {}) => {
             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);
                 const toMs = parseInt(finalTo);
@@ -207,6 +229,10 @@ export const useQueryState = (options = {}) => {
                 setSelectionParam(undefined);
             }
             resetFlameGraphState();
+            if (draftProfileType.toString() !==
+                Query.parse(querySelection.expression).profileType().toString()) {
+                resetStateOnProfileTypeChange();
+            }
         });
     }, [
         batchUpdates,
@@ -227,6 +253,9 @@ export const useQueryState = (options = {}) => {
         setMergeToState,
         setSelectionParam,
         resetFlameGraphState,
+        resetStateOnProfileTypeChange,
+        draftProfileType,
+        querySelection.expression,
     ]);
     const setDraftTimeRange = useCallback((newFrom, newTo, newTimeSelection) => {
         setDraftFrom(newFrom.toString());
@@ -235,15 +264,16 @@ export const useQueryState = (options = {}) => {
     }, []);
     const setDraftSumByCallback = useCallback((newSumBy) => {
         setDraftSumBy(newSumBy);
-    }, []);
+    }, [setDraftSumBy]);
     const setDraftProfileName = useCallback((newProfileName) => {
         if (newProfileName === '')
             return;
         const [newQuery, changed] = draftQuery.setProfileName(newProfileName);
         if (changed) {
             setDraftExpression(newQuery.toString());
+            setDraftSumBy(undefined);
         }
-    }, [draftQuery]);
+    }, [draftQuery, setDraftSumBy]);
     const setDraftMatchers = useCallback((matchers) => {
         const newExpression = `${draftProfileName}{${matchers}}`;
         setDraftExpression(newExpression);
@@ -290,7 +320,7 @@ export const useQueryState = (options = {}) => {
         profileSource,
         setProfileSelection,
         // Loading state
-        sumByLoading: sumBySelectionLoading,
+        sumByLoading: isDraftSumByLoading || sumBySelectionLoading,
         draftParsedQuery,
         parsedQuery,
     };

package/dist/hooks/useQueryState.test.js

@@ -52,16 +52,24 @@ 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, _profileType, _timeRange, defaultValue) => ({
-            sumBy: defaultValue,
-            setSumBy: vi.fn(),
-            isLoading: false,
-        }),
+        useSumBy: (_queryClient, _profileType, _timeRange, _draftProfileType, _draftTimeRange, defaultValue) => {
+            const [draftSumBy, setDraftSumBy] = react.useState(defaultValue);
+            const [sumBy, setSumBy] = react.useState(defaultValue);
+            return {
+                sumBy,
+                setSumBy,
+                isLoading: false,
+                draftSumBy,
+                setDraftSumBy,
+                isDraftSumByLoading: false,
+            };
+        },
     };
 });
 // Helper to create wrapper with URLStateProvider
@@ -154,7 +162,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']);
             });
             // Draft should be updated
@@ -193,13 +203,13 @@ describe('useQueryState', () => {
         it('should batch multiple updates into single navigation', async () => {
             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{}');
+            expect(result.current.draftSelection.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
             expect(result.current.draftSelection.from).toBe(7000);
             expect(result.current.draftSelection.to).toBe(8000);
             expect(result.current.draftSelection.sumBy).toEqual(['pod', 'node']);
@@ -210,7 +220,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');
@@ -325,9 +335,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']);
             });
@@ -338,7 +348,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');
@@ -348,9 +358,9 @@ describe('useQueryState', () => {
     describe('Draft state pattern', () => {
         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']);
             });
@@ -364,7 +374,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');
@@ -563,15 +573,15 @@ 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']);
             });
@@ -600,13 +610,13 @@ describe('useQueryState', () => {
             // Create new hook instance (simulating page reload)
             const { result: result2 } = renderHook(() => useQueryState(), { wrapper: createWrapper() });
             // Verify state is loaded from URL after "reload"
-            expect(result2.current.querySelection.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
+            expect(result2.current.querySelection.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
             expect(result2.current.querySelection.from).toBe(5000);
             expect(result2.current.querySelection.to).toBe(6000);
             expect(result2.current.querySelection.timeSelection).toBe('relative:minute|15');
             expect(result2.current.querySelection.sumBy).toEqual(['namespace', 'pod']);
             // Draft should be synced with URL state on page load
-            expect(result2.current.draftSelection.expression).toBe('memory:inuse_space:bytes:space:bytes{}');
+            expect(result2.current.draftSelection.expression).toBe('memory:alloc_space:bytes:space:bytes:delta{}');
             expect(result2.current.draftSelection.from).toBe(5000);
             expect(result2.current.draftSelection.to).toBe(6000);
             expect(result2.current.draftSelection.sumBy).toEqual(['namespace', 'pod']);

package/dist/useSumBy.d.ts

@@ -2,7 +2,7 @@ import { QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
 import { ProfileType } from '@parca/parser';
 export declare const DEFAULT_EMPTY_SUM_BY: string[];
-export declare const useSumBySelection: (profileType: ProfileType | undefined, labelNamesLoading: boolean, labels: string[] | undefined, { defaultValue, }?: {
+export declare const useSumBySelection: (profileType: ProfileType | undefined, labelNamesLoading: boolean, labels: string[] | undefined, draftSumBy: string[] | undefined, { defaultValue, }?: {
     defaultValue?: string[];
 }) => [string[] | undefined, (labels: string[]) => void, {
     isLoading: boolean;
@@ -13,9 +13,17 @@ export declare const useDefaultSumBy: (profileType: ProfileType | undefined, lab
 };
 export declare const useSumByFromParams: (param: string | string[] | undefined) => string[] | undefined;
 export declare const sumByToParam: (sumBy: string[] | undefined) => string | string[] | undefined;
-export declare const useSumBy: (queryClient: QueryServiceClient, profileType: ProfileType | undefined, timeRange: DateTimeRange, defaultValue?: string[]) => {
+export declare 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;
+};
+export declare const useDraftSumBy: (queryClient: QueryServiceClient, profileType: ProfileType | undefined, timeRange: DateTimeRange, defaultValue?: string[]) => {
+    draftSumBy: string[] | undefined;
+    setDraftSumBy: (sumBy: string[] | undefined) => void;
+    isDraftSumByLoading: boolean;
 };
 //# sourceMappingURL=useSumBy.d.ts.map

package/dist/useSumBy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CA+DF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAU9E,CAAC;AAGF,eAAO,MAAM,QAAQ,GACnB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,eAAe,MAAM,EAAE,KACtB;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;CAyBpB,CAAC"}
+{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,GAC5B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,EAC5B,YAAY,MAAM,EAAE,GAAG,SAAS,EAChC,oBAEG;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,KACL,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CAqEF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,aAAa,WAAW,GAAG,SAAS,EACpC,mBAAmB,OAAO,EAC1B,QAAQ,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAU9E,CAAC;AAGF,eAAO,MAAM,QAAQ,GACnB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,kBAAkB,WAAW,GAAG,SAAS,EACzC,gBAAgB,aAAa,EAC7B,eAAe,MAAM,EAAE,KACtB;IACD,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,aAAa,kBAAkB,EAC/B,aAAa,WAAW,GAAG,SAAS,EACpC,WAAW,aAAa,EACxB,eAAe,MAAM,EAAE,KACtB;IACD,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,OAAO,CAAC;CAqB9B,CAAC"}

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.95",
+  "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": "3a8c3331a1a9c7f354f0c2915d822b9b0c1c5014"
+  "gitHead": "71d719bdbc5b9591b427c668b4ab9685eeb44b4a"
 }

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,

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