@parca/profile 0.16.414 → 0.16.416

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.416](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.415...@parca/profile@0.16.416) (2024-07-23)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.415](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.414...@parca/profile@0.16.415) (2024-07-23)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.414](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.413...@parca/profile@0.16.414) (2024-07-22)
 
 **Note:** Version bump only for package @parca/profile

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,EAA4B,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAOlF,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAaD,eAAO,MAAM,sBAAsB,eAAgB,MAAM,GAAG,EAAE,KAAG,MAGhE,CAAC;AAgVF,QAAA,MAAM,eAAe,8CAIlB,oBAAoB,KAAG,GAAG,CAAC,OAkB7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileExplorer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAGjD,OAAO,EAA4B,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAQlF,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,GAAG,CAAC;IACjB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAaD,eAAO,MAAM,sBAAsB,eAAgB,MAAM,GAAG,EAAE,KAAG,MAGhE,CAAC;AAyWF,QAAA,MAAM,eAAe,8CAIlB,oBAAoB,KAAG,GAAG,CAAC,OAkB7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileExplorer/index.js

@@ -18,6 +18,7 @@ import { createStore } from '@parca/store';
 import { capitalizeOnlyFirstLetter } from '@parca/utilities';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { useProfileTypes } from '../ProfileSelector';
+import { sumByToParam, useSumByFromParams } from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
 const ErrorContent = ({ errorMessage }) => {
@@ -38,6 +39,19 @@ const sanitizeDateRange = (time_selection_a, from_a, to_a) => {
     return { time_selection_a: range.getRangeKey(), from_a, to_a };
 };
 /* eslint-enable @typescript-eslint/naming-convention */
+const filterEmptyParams = (o) => {
+    return Object.fromEntries(Object.entries(o)
+        .filter(([_, value]) => value !== '' && value !== undefined && (Array.isArray(value) ? value.length > 0 : true))
+        .map(([key, value]) => {
+        if (typeof value === 'string') {
+            return [key, value];
+        }
+        if (Array.isArray(value)) {
+            return [key, value];
+        }
+        return [key, value];
+    }));
+};
 const filterSuffix = (o, suffix) => Object.fromEntries(Object.entries(o)
     .filter(([key]) => !key.endsWith(suffix))
     .map(([key, value]) => {
@@ -78,6 +92,8 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
     /* eslint-enable @typescript-eslint/naming-convention */
     const [profileA, setProfileA] = useState(null);
     const [profileB, setProfileB] = useState(null);
+    const sumByA = useSumByFromParams(sum_by_a);
+    const sumByB = useSumByFromParams(sum_by_b);
     useEffect(() => {
         const mergeFrom = merge_from_a ?? undefined;
         const mergeTo = merge_to_a ?? undefined;
@@ -134,7 +150,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         from: parseInt(from_a),
         to: parseInt(to_a),
         timeSelection: time_selection_a,
-        sumBy: sum_by_a,
+        sumBy: sumByA,
     };
     // Show the SingleProfileExplorer when not comparing
     if (compare_a !== 'true' && compare_b !== 'true') {
@@ -149,17 +165,18 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
             return navigateTo('/', 
             // Filtering the _a suffix causes us to reset potential profile
             // selection when running a new query.
-            {
+            filterEmptyParams({
                 ...filterSuffix(queryParams, '_a'),
                 ...{
                     expression_a: encodeURIComponent(q.expression),
                     from_a: q.from.toString(),
                     to_a: q.to.toString(),
                     time_selection_a: q.timeSelection,
+                    sum_by_a: sumByToParam(q.sumBy),
                     dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
                     ...mergeParams,
                 },
-            });
+            }));
         };
         const selectProfile = (p) => {
             queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
@@ -176,7 +193,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         from: parseInt(from_b),
         to: parseInt(to_b),
         timeSelection: time_selection_b,
-        sumBy: sum_by_b,
+        sumBy: sumByB,
     };
     const selectQueryA = (q) => {
         const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
@@ -189,7 +206,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         return navigateTo('/', 
         // Filtering the _a suffix causes us to reset potential profile
         // selection when running a new query.
-        {
+        filterEmptyParams({
             ...filterSuffix(queryParams, '_a'),
             ...{
                 compare_a: 'true',
@@ -199,11 +216,12 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 from_a: q.from.toString(),
                 to_a: q.to.toString(),
                 time_selection_a: q.timeSelection,
+                sum_by_a: sumByToParam(q.sumBy),
                 filter_by_function: filter_by_function ?? '',
                 dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
                 ...mergeParams,
             },
-        });
+        }));
     };
     const selectQueryB = (q) => {
         const mergeParams = q.mergeFrom !== undefined && q.mergeTo !== undefined
@@ -216,7 +234,7 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
         return navigateTo('/', 
         // Filtering the _b suffix causes us to reset potential profile
         // selection when running a new query.
-        {
+        filterEmptyParams({
             ...filterSuffix(queryParams, '_b'),
             ...{
                 compare_b: 'true',
@@ -226,11 +244,12 @@ const ProfileExplorerApp = ({ queryClient, queryParams, navigateTo, }) => {
                 from_b: q.from.toString(),
                 to_b: q.to.toString(),
                 time_selection_b: q.timeSelection,
+                sum_by_b: sumByToParam(q.sumBy),
                 filter_by_function: filter_by_function ?? '',
                 dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
                 ...mergeParams,
             },
-        });
+        }));
     };
     const closeProfile = (card) => {
         let newQueryParameters = queryParams;

package/dist/ProfileMetricsGraph/index.js

@@ -53,7 +53,7 @@ export const useQueryRange = (client, queryExpression, start, end, sumBy, skip =
         }
     }, [stepCountStr, defaultStepCount, setStepCount]);
     const { data, isLoading, error } = useGrpcQuery({
-        key: ['query-range', queryExpression, start, end, sumBy.join(','), stepCount, metadata],
+        key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
         queryFn: async () => {
             const stepDuration = getStepDuration(start, end, stepCount);
             const { response } = await client.queryRange({

package/dist/ProfileSelector/index.d.ts

@@ -29,6 +29,6 @@ export interface IProfileTypesResult {
     error?: RpcError;
 }
 export declare const useProfileTypes: (client: QueryServiceClient) => IProfileTypesResult;
-declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, suffix, }: ProfileSelectorProps) => JSX.Element;
+declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, }: ProfileSelectorProps) => JSX.Element;
 export default ProfileSelector;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAQ,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAY9E,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQ5D,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,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;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,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,qJAWlB,oBAAoB,KAAG,GAAG,CAAC,OAiU7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAQ,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAY9E,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQ5D,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,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;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,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,6IAUlB,oBAAoB,KAAG,GAAG,CAAC,OA6U7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.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 { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Select from 'react-select';
 import { Button, ButtonGroup, DateTimeRange, DateTimeRangePicker, IconButton, useGrpcMetadata, useParcaContext, } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
@@ -21,7 +21,7 @@ import MatchersInput, { useLabelNames } from '../MatchersInput/index';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
 import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
 import ProfileTypeSelector from '../ProfileTypeSelector/index';
-import { useSumBy } from '../useSumBy';
+import { useDefaultSumBy, useSumBySelection } from '../useSumBy';
 import { useAutoQuerySelector } from './useAutoQuerySelector';
 export const useProfileTypes = (client) => {
     const [result, setResult] = useState(undefined);
@@ -40,10 +40,11 @@ export const useProfileTypes = (client) => {
     }, [client, metadata, loading]);
     return { loading, data: result, error };
 };
-const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, suffix = '', }) => {
+const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing);
     const { viewComponent } = useParcaContext();
+    const sumByRef = useRef(null);
     const [timeRangeSelection, setTimeRangeSelection] = useState(DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to));
     const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
     const profileType = useMemo(() => {
@@ -62,14 +63,10 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
             ? []
             : selectedLabelNamesResult.response.labelNames;
     }, [selectedLabelNamesResult]);
-    const [sumBy, setSumBy, { userSelectedSumBy, isLoading: isSumByLoading }] = useSumBy(selectedProfileType, selectedLabelNamesLoading, selectedLabels, {
-        urlParamKey: 'sum_by' + suffix,
-    });
-    const [sumBySelection, setSumBySelection, { isLoading: isSumBySelectionLoading }] = useSumBy(profileType, labelNamesLoading, labels, {
-        urlParamKey: 'sum_by_selection' + suffix,
-        withURLUpdate: false,
-        defaultValue: userSelectedSumBy,
+    const [sumBySelection, setUserSumBySelection, { isLoading: sumBySelectionLoading }] = useSumBySelection(profileType, labelNamesLoading, labels, {
+        defaultValue: querySelection.sumBy,
     });
+    const { defaultSumBy, isLoading: defaultSumByLoading } = useDefaultSumBy(selectedProfileType, selectedLabelNamesLoading, selectedLabels);
     useEffect(() => {
         if (enforcedProfileName !== '') {
             const [q, changed] = Query.parse(querySelection.expression).setProfileName(enforcedProfileName);
@@ -88,9 +85,6 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
     const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
     const selectedProfileName = query.profileName();
     const setNewQueryExpression = (expr, updateTs = false) => {
-        if (!isSumBySelectionLoading) {
-            setSumBy(sumBySelection);
-        }
         const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
         const delta = query.profileType().delta;
         const from = timeRangeSelection.getFromMs(updateTs);
@@ -106,6 +100,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
             from,
             to,
             timeSelection: timeRangeSelection.getRangeKey(),
+            sumBy: sumBySelection,
             ...mergeParams,
         });
     };
@@ -165,24 +160,41 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         profileTypesData,
         setProfileName,
         setQueryExpression,
-        querySelection: { ...querySelection, sumBy },
+        querySelection: { ...querySelection, sumBy: sumBySelection },
         navigateTo,
+        loading: sumBySelectionLoading,
     });
     const searchDisabled = queryExpressionString === undefined ||
         queryExpressionString === '' ||
         queryExpressionString === '{}';
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex gap-2", children: [_jsxs("div", { className: "flex w-full flex-wrap content-start items-center gap-2", children: [_jsxs("div", { className: "pb-6", children: [_jsx("label", { className: "text-xs", children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error, disabled: viewComponent?.disableProfileTypesDropdown })] }), _jsxs("div", { className: "w-full flex-1 pb-6", children: [_jsxs("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: [_jsx("label", { className: "text-xs", children: "Query" }), (query.matchers.length > 0 || query.inputMatcherString.length > 0) &&
-                                                viewComponent !== undefined && _jsx("div", { children: viewComponent?.createViewComponent })] }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName })] }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", children: "Sum by" }) }), _jsx(Select, { defaultValue: [], isMulti: true, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-80", classNamePrefix: "parca-select", value: sumBySelection.map(sumBy => ({ label: sumBy, value: sumBy })), onChange: selectedOptions => {
-                                            setSumBySelection(selectedOptions.map(option => option.value));
+                                                viewComponent !== undefined && _jsx("div", { children: viewComponent?.createViewComponent })] }), _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName })] }), _jsxs("div", { className: "pb-6", children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", children: "Sum by" }) }), _jsx(Select, { defaultValue: [], isMulti: true, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-80", classNamePrefix: "parca-select", value: (sumBySelection ?? []).map(sumBy => ({ label: sumBy, value: sumBy })), onChange: selectedOptions => {
+                                            setUserSumBySelection(selectedOptions.map(option => option.value));
                                         }, placeholder: "Labels...", styles: {
                                             indicatorSeparator: () => ({ display: 'none' }),
+                                        }, isDisabled: !profileType.delta, ref: sumByRef, onKeyDown: e => {
+                                            const currentRef = sumByRef.current;
+                                            if (currentRef == null) {
+                                                return;
+                                            }
+                                            const inputRef = currentRef.inputRef;
+                                            if (inputRef == null) {
+                                                return;
+                                            }
+                                            if (e.key === 'Enter' &&
+                                                inputRef.value === '' &&
+                                                currentRef.state.focusedOptionId === null // menu is not open
+                                            ) {
+                                                setQueryExpression(true);
+                                                currentRef.blur();
+                                            }
                                         } })] }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsx(ButtonGroup, { children: _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
                                         e.preventDefault();
                                         setQueryExpression(true);
                                     }, id: "h-matcher-search-button", children: "Search" }) })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&
                         querySelection.expression.length > 0 &&
                         querySelection.from !== undefined &&
-                        querySelection.to !== undefined ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: sumBy, sumByLoading: isSumByLoading, setTimeRange: (range) => {
+                        querySelection.to !== undefined ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: (range) => {
                                 const from = range.getFromMs();
                                 const to = range.getToMs();
                                 let mergedProfileParams = {};

package/dist/ProfileSelector/useAutoQuerySelector.d.ts

@@ -8,7 +8,8 @@ interface Props {
     setQueryExpression: () => void;
     querySelection: QuerySelection;
     navigateTo: NavigateFunction;
+    loading: boolean;
 }
-export declare const useAutoQuerySelector: ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, querySelection, navigateTo, }: Props) => void;
+export declare const useAutoQuerySelector: ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, querySelection, navigateTo, loading, }: Props) => void;
 export {};
 //# sourceMappingURL=useAutoQuerySelector.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useAutoQuerySelector.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/useAutoQuerySelector.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAGlD,UAAU,KAAK;IACb,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,GAAG,SAAS,CAAC;IACnD,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,+GAO9B,KAAK,KAAG,IAkIV,CAAC"}
+{"version":3,"file":"useAutoQuerySelector.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/useAutoQuerySelector.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAGlD,UAAU,KAAK;IACb,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,GAAG,SAAS,CAAC;IACnD,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,wHAQ9B,KAAK,KAAG,IAuIV,CAAC"}

package/dist/ProfileSelector/useAutoQuerySelector.js

@@ -14,13 +14,16 @@ import { useEffect } from 'react';
 import { selectAutoQuery, setAutoQuery, useAppDispatch, useAppSelector } from '@parca/store';
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import { constructProfileName } from '../ProfileTypeSelector';
-export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, querySelection, navigateTo, }) => {
+export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, setProfileName, setQueryExpression, querySelection, navigateTo, loading, }) => {
     const autoQuery = useAppSelector(selectAutoQuery);
     const dispatch = useAppDispatch();
     const queryParams = new URLSearchParams(location.search);
     const comparing = queryParams.get('comparing') === 'true';
     const expressionA = queryParams.get('expression_a');
     useEffect(() => {
+        if (loading) {
+            return;
+        }
         if (comparing && expressionA !== null && expressionA !== undefined) {
             if (querySelection.expression === undefined) {
                 return;
@@ -62,7 +65,7 @@ export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, se
                 dashboard_items: ['icicle'],
             });
         }
-    }, [comparing, querySelection, navigateTo, expressionA, dispatch]);
+    }, [comparing, querySelection, navigateTo, expressionA, dispatch, loading]);
     // Effect to load some initial data on load when is no selection
     useEffect(() => {
         void (async () => {
@@ -105,7 +108,8 @@ export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, se
             if (autoQuery !== 'true' ||
                 profileTypesData?.types == null ||
                 profileTypesData.types.length < 1 ||
-                selectedProfileName.length === 0) {
+                selectedProfileName.length === 0 ||
+                loading) {
                 return;
             }
             setQueryExpression();
@@ -118,5 +122,6 @@ export const useAutoQuerySelector = ({ selectedProfileName, profileTypesData, se
         setProfileName,
         dispatch,
         selectedProfileName,
+        loading,
     ]);
 };

package/dist/useSumBy.d.ts

@@ -1,11 +1,14 @@
 import { ProfileType } from '@parca/parser';
 export declare const DEFAULT_EMPTY_SUM_BY: string[];
-export declare const useSumBy: (profileType: ProfileType | undefined, labelNamesLoading: boolean, labels: string[] | undefined, { urlParamKey, withURLUpdate, defaultValue, }?: {
-    urlParamKey?: string;
-    withURLUpdate?: boolean;
+export declare const useSumBySelection: (profileType: ProfileType | undefined, labelNamesLoading: boolean, labels: string[] | undefined, { defaultValue, }?: {
     defaultValue?: string[];
-}) => [string[], (labels: string[]) => void, {
-    userSelectedSumBy: string[] | undefined;
+}) => [string[] | undefined, (labels: string[]) => void, {
     isLoading: boolean;
 }];
+export declare const useDefaultSumBy: (profileType: ProfileType | undefined, labelNamesLoading: boolean, labels: string[] | undefined) => {
+    defaultSumBy: string[] | undefined;
+    isLoading: boolean;
+};
+export declare const useSumByFromParams: (param: string | string[] | undefined) => string[] | undefined;
+export declare const sumByToParam: (sumBy: string[] | undefined) => string | string[] | undefined;
 //# 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":"AAgBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AAyBjD,eAAO,MAAM,QAAQ,gBACN,WAAW,GAAG,SAAS,qBACjB,OAAO,UAClB,MAAM,EAAE,GAAG,SAAS,kDAKzB;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,KACA,CACD,MAAM,EAAE,EACR,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IAAC,iBAAiB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,CA4D9D,CAAC"}
+{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,iBAAiB,gBACf,WAAW,GAAG,SAAS,qBACjB,OAAO,UAClB,MAAM,EAAE,GAAG,SAAS,sBAGzB;IACD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,KACA,CACD,MAAM,EAAE,GAAG,SAAS,EACpB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAC1B;IACE,SAAS,EAAE,OAAO,CAAC;CACpB,CAsCF,CAAC;AAEF,eAAO,MAAM,eAAe,gBACb,WAAW,GAAG,SAAS,qBACjB,OAAO,UAClB,MAAM,EAAE,GAAG,SAAS,KAC3B;IAAC,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAMzD,CAAC;AAkBF,eAAO,MAAM,kBAAkB,UAAW,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,EAAE,GAAG,SAMpF,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,EAAE,GAAG,SAAS,KAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAU9E,CAAC"}

package/dist/useSumBy.js

@@ -10,13 +10,15 @@
 // 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, useMemo } from 'react';
-import { useParcaContext, useURLState } from '@parca/components';
+import { useCallback, useMemo, useState } from 'react';
 export const DEFAULT_EMPTY_SUM_BY = [];
 const getDefaultSumBy = (profile, labels) => {
     if (profile === undefined || labels === undefined) {
         return undefined;
     }
+    if (!profile.delta) {
+        return DEFAULT_EMPTY_SUM_BY;
+    }
     if (labels.includes('comm')) {
         return ['comm'];
     }
@@ -28,47 +30,62 @@ const getDefaultSumBy = (profile, labels) => {
     }
     return undefined;
 };
-export const useSumBy = (profileType, labelNamesLoading, labels, { urlParamKey = 'sum_by', withURLUpdate = true, defaultValue, } = {}) => {
-    const { navigateTo } = useParcaContext();
-    const [userSelectedSumByParam, setUserSelectedSumByParam] = useURLState({
-        param: urlParamKey,
-        navigateTo,
-        withURLUpdate,
-    });
-    const userSelectedSumBy = useMemo(() => {
-        if (userSelectedSumByParam?.length === 0) {
-            return undefined;
-        }
-        if (userSelectedSumByParam === '__none__') {
-            return [];
-        }
-        if (userSelectedSumByParam === undefined && defaultValue !== undefined) {
-            return defaultValue;
-        }
-        if (typeof userSelectedSumByParam === 'string') {
-            return [userSelectedSumByParam];
-        }
-        return userSelectedSumByParam;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [userSelectedSumByParam]);
-    const setUserSelectedSumBy = useCallback((sumBy) => {
-        if (sumBy.length === 0) {
-            setUserSelectedSumByParam('__none__');
-            return;
-        }
-        if (sumBy.length === 1) {
-            // Handle this separately to take care of the empty string scenario
-            setUserSelectedSumByParam(sumBy[0]);
-            return;
-        }
-        setUserSelectedSumByParam(sumBy);
-    }, [setUserSelectedSumByParam]);
+export const useSumBySelection = (profileType, labelNamesLoading, labels, { defaultValue, } = {}) => {
+    const [userSelectedSumBy, setUserSelectedSumBy] = useState(profileType != null ? { [profileType.toString()]: defaultValue } : {});
+    const setSumBy = useCallback((sumBy) => {
+        setUserSelectedSumBy(prev => {
+            if (profileType == null) {
+                return prev;
+            }
+            return {
+                ...prev,
+                [profileType.toString()]: sumBy,
+            };
+        });
+    }, [setUserSelectedSumBy, profileType]);
+    const { defaultSumBy } = useDefaultSumBy(profileType, labelNamesLoading, labels);
+    let sumBy = userSelectedSumBy[profileType?.toString() ?? ''] ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
+    if (profileType?.delta !== true) {
+        sumBy = DEFAULT_EMPTY_SUM_BY;
+    }
+    return [
+        labelNamesLoading ? undefined : sumBy,
+        setSumBy,
+        {
+            isLoading: labelNamesLoading,
+        },
+    ];
+};
+export const useDefaultSumBy = (profileType, labelNamesLoading, labels) => {
     const defaultSumBy = useMemo(() => {
         return getDefaultSumBy(profileType, labels);
     }, [profileType, labels]);
-    let sumBy = userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
-    if (profileType?.delta !== true) {
-        sumBy = DEFAULT_EMPTY_SUM_BY;
+    return { defaultSumBy, isLoading: labelNamesLoading };
+};
+const getSumByFromParam = (param) => {
+    if (param?.length === 0) {
+        return undefined;
+    }
+    if (param === '__none__') {
+        return [];
+    }
+    if (typeof param === 'string') {
+        return [param];
+    }
+    return param;
+};
+export const useSumByFromParams = (param) => {
+    const sumBy = useMemo(() => {
+        return getSumByFromParam(param);
+    }, [param]);
+    return sumBy;
+};
+export const sumByToParam = (sumBy) => {
+    if (sumBy === undefined) {
+        return undefined;
+    }
+    if (sumBy.length === 0) {
+        return '__none__';
     }
-    return [sumBy, setUserSelectedSumBy, { userSelectedSumBy, isLoading: labelNamesLoading }];
+    return sumBy;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.414",
+  "version": "0.16.416",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -73,5 +73,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "7344e3c5687b4d9a5c93b6c44494592726fcba23"
+  "gitHead": "b57a9ad4f98b2ea30eca63611e487fb94dbbe106"
 }

package/src/ProfileExplorer/index.tsx

@@ -22,6 +22,7 @@ import {capitalizeOnlyFirstLetter, type NavigateFunction} from '@parca/utilities
 
 import {ProfileSelection, ProfileSelectionFromParams, SuffixParams} from '..';
 import {QuerySelection, useProfileTypes} from '../ProfileSelector';
+import {sumByToParam, useSumByFromParams} from '../useSumBy';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
 
@@ -64,6 +65,25 @@ const sanitizeDateRange = (
 };
 /* eslint-enable @typescript-eslint/naming-convention */
 
+const filterEmptyParams = (o: Record<string, any>): Record<string, any> => {
+  return Object.fromEntries(
+    Object.entries(o)
+      .filter(
+        ([_, value]) =>
+          value !== '' && value !== undefined && (Array.isArray(value) ? value.length > 0 : true)
+      )
+      .map(([key, value]) => {
+        if (typeof value === 'string') {
+          return [key, value];
+        }
+        if (Array.isArray(value)) {
+          return [key, value];
+        }
+        return [key, value];
+      })
+  );
+};
+
 const filterSuffix = (
   o: {[key: string]: string | string[] | undefined},
   suffix: string
@@ -148,6 +168,9 @@ const ProfileExplorerApp = ({
   const [profileA, setProfileA] = useState<ProfileSelection | null>(null);
   const [profileB, setProfileB] = useState<ProfileSelection | null>(null);
 
+  const sumByA = useSumByFromParams(sum_by_a);
+  const sumByB = useSumByFromParams(sum_by_b);
+
   useEffect(() => {
     const mergeFrom = merge_from_a ?? undefined;
     const mergeTo = merge_to_a ?? undefined;
@@ -225,7 +248,7 @@ const ProfileExplorerApp = ({
     from: parseInt(from_a as string),
     to: parseInt(to_a as string),
     timeSelection: time_selection_a as string,
-    sumBy: sum_by_a as string[],
+    sumBy: sumByA,
   };
 
   // Show the SingleProfileExplorer when not comparing
@@ -243,17 +266,18 @@ const ProfileExplorerApp = ({
         '/',
         // Filtering the _a suffix causes us to reset potential profile
         // selection when running a new query.
-        {
+        filterEmptyParams({
           ...filterSuffix(queryParams, '_a'),
           ...{
             expression_a: encodeURIComponent(q.expression),
             from_a: q.from.toString(),
             to_a: q.to.toString(),
             time_selection_a: q.timeSelection,
+            sum_by_a: sumByToParam(q.sumBy),
             dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
             ...mergeParams,
           },
-        }
+        })
       );
     };
 
@@ -283,7 +307,7 @@ const ProfileExplorerApp = ({
     from: parseInt(from_b as string),
     to: parseInt(to_b as string),
     timeSelection: time_selection_b as string,
-    sumBy: sum_by_b as string[],
+    sumBy: sumByB,
   };
 
   const selectQueryA = (q: QuerySelection): void => {
@@ -299,7 +323,7 @@ const ProfileExplorerApp = ({
       '/',
       // Filtering the _a suffix causes us to reset potential profile
       // selection when running a new query.
-      {
+      filterEmptyParams({
         ...filterSuffix(queryParams, '_a'),
         ...{
           compare_a: 'true',
@@ -309,11 +333,12 @@ const ProfileExplorerApp = ({
           from_a: q.from.toString(),
           to_a: q.to.toString(),
           time_selection_a: q.timeSelection,
+          sum_by_a: sumByToParam(q.sumBy),
           filter_by_function: filter_by_function ?? '',
           dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
           ...mergeParams,
         },
-      }
+      })
     );
   };
 
@@ -330,7 +355,7 @@ const ProfileExplorerApp = ({
       '/',
       // Filtering the _b suffix causes us to reset potential profile
       // selection when running a new query.
-      {
+      filterEmptyParams({
         ...filterSuffix(queryParams, '_b'),
         ...{
           compare_b: 'true',
@@ -340,11 +365,12 @@ const ProfileExplorerApp = ({
           from_b: q.from.toString(),
           to_b: q.to.toString(),
           time_selection_b: q.timeSelection,
+          sum_by_b: sumByToParam(q.sumBy),
           filter_by_function: filter_by_function ?? '',
           dashboard_items: dashboard_items ?? DEFAULT_DASHBOARD_ITEMS,
           ...mergeParams,
         },
-      }
+      })
     );
   };
 

package/src/ProfileMetricsGraph/index.tsx

@@ -122,7 +122,7 @@ export const useQueryRange = (
   }, [stepCountStr, defaultStepCount, setStepCount]);
 
   const {data, isLoading, error} = useGrpcQuery<QueryRangeResponse | undefined>({
-    key: ['query-range', queryExpression, start, end, sumBy.join(','), stepCount, metadata],
+    key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
     queryFn: async () => {
       const stepDuration = getStepDuration(start, end, stepCount);
       const {response} = await client.queryRange(

package/src/ProfileSelector/index.tsx

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
-import Select from 'react-select';
+import Select, {type SelectInstance} from 'react-select';
 
 import {Label, ProfileTypesResponse, QueryServiceClient} from '@parca/client';
 import {
@@ -35,7 +35,7 @@ import MatchersInput, {useLabelNames} from '../MatchersInput/index';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import ProfileTypeSelector from '../ProfileTypeSelector/index';
-import {useSumBy} from '../useSumBy';
+import {useDefaultSumBy, useSumBySelection} from '../useSumBy';
 import {useAutoQuerySelector} from './useAutoQuerySelector';
 
 export interface QuerySelection {
@@ -97,7 +97,6 @@ const ProfileSelector = ({
   profileSelection,
   comparing,
   navigateTo,
-  suffix = '',
 }: ProfileSelectorProps): JSX.Element => {
   const {
     loading: profileTypesLoading,
@@ -106,6 +105,7 @@ const ProfileSelector = ({
   } = useProfileTypes(queryClient);
   const {heightStyle} = useMetricsGraphDimensions(comparing);
   const {viewComponent} = useParcaContext();
+  const sumByRef = useRef(null);
 
   const [timeRangeSelection, setTimeRangeSelection] = useState(
     DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to)
@@ -137,24 +137,15 @@ const ProfileSelector = ({
       : selectedLabelNamesResult.response.labelNames;
   }, [selectedLabelNamesResult]);
 
-  const [sumBy, setSumBy, {userSelectedSumBy, isLoading: isSumByLoading}] = useSumBy(
+  const [sumBySelection, setUserSumBySelection, {isLoading: sumBySelectionLoading}] =
+    useSumBySelection(profileType, labelNamesLoading, labels, {
+      defaultValue: querySelection.sumBy,
+    });
+
+  const {defaultSumBy, isLoading: defaultSumByLoading} = useDefaultSumBy(
     selectedProfileType,
     selectedLabelNamesLoading,
-    selectedLabels,
-    {
-      urlParamKey: 'sum_by' + suffix,
-    }
-  );
-
-  const [sumBySelection, setSumBySelection, {isLoading: isSumBySelectionLoading}] = useSumBy(
-    profileType,
-    labelNamesLoading,
-    labels,
-    {
-      urlParamKey: 'sum_by_selection' + suffix,
-      withURLUpdate: false,
-      defaultValue: userSelectedSumBy,
-    }
+    selectedLabels
   );
 
   useEffect(() => {
@@ -181,9 +172,6 @@ const ProfileSelector = ({
   const selectedProfileName = query.profileName();
 
   const setNewQueryExpression = (expr: string, updateTs = false): void => {
-    if (!isSumBySelectionLoading) {
-      setSumBy(sumBySelection);
-    }
     const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
     const delta = query.profileType().delta;
     const from = timeRangeSelection.getFromMs(updateTs);
@@ -200,6 +188,7 @@ const ProfileSelector = ({
       from,
       to,
       timeSelection: timeRangeSelection.getRangeKey(),
+      sumBy: sumBySelection,
       ...mergeParams,
     });
   };
@@ -269,8 +258,9 @@ const ProfileSelector = ({
     profileTypesData,
     setProfileName,
     setQueryExpression,
-    querySelection: {...querySelection, sumBy},
+    querySelection: {...querySelection, sumBy: sumBySelection},
     navigateTo,
+    loading: sumBySelectionLoading,
   });
 
   const searchDisabled =
@@ -318,14 +308,35 @@ const ProfileSelector = ({
               options={labels.map(label => ({label, value: label}))}
               className="parca-select-container text-sm w-80"
               classNamePrefix="parca-select"
-              value={sumBySelection.map(sumBy => ({label: sumBy, value: sumBy}))}
+              value={(sumBySelection ?? []).map(sumBy => ({label: sumBy, value: sumBy}))}
               onChange={selectedOptions => {
-                setSumBySelection(selectedOptions.map(option => option.value));
+                setUserSumBySelection(selectedOptions.map(option => option.value));
               }}
               placeholder="Labels..."
               styles={{
                 indicatorSeparator: () => ({display: 'none'}),
               }}
+              isDisabled={!profileType.delta}
+              ref={sumByRef}
+              onKeyDown={e => {
+                const currentRef = sumByRef.current as unknown as SelectInstance | null;
+                if (currentRef == null) {
+                  return;
+                }
+                const inputRef = currentRef.inputRef;
+                if (inputRef == null) {
+                  return;
+                }
+
+                if (
+                  e.key === 'Enter' &&
+                  inputRef.value === '' &&
+                  currentRef.state.focusedOptionId === null // menu is not open
+                ) {
+                  setQueryExpression(true);
+                  currentRef.blur();
+                }
+              }}
             />
           </div>
           <DateTimeRangePicker
@@ -361,8 +372,8 @@ const ProfileSelector = ({
                 to={querySelection.to}
                 profile={profileSelection}
                 comparing={comparing}
-                sumBy={sumBy}
-                sumByLoading={isSumByLoading}
+                sumBy={querySelection.sumBy ?? defaultSumBy ?? []}
+                sumByLoading={defaultSumByLoading}
                 setTimeRange={(range: DateTimeRange) => {
                   const from = range.getFromMs();
                   const to = range.getToMs();

package/src/ProfileSelector/useAutoQuerySelector.ts

@@ -28,6 +28,7 @@ interface Props {
   setQueryExpression: () => void;
   querySelection: QuerySelection;
   navigateTo: NavigateFunction;
+  loading: boolean;
 }
 
 export const useAutoQuerySelector = ({
@@ -37,6 +38,7 @@ export const useAutoQuerySelector = ({
   setQueryExpression,
   querySelection,
   navigateTo,
+  loading,
 }: Props): void => {
   const autoQuery = useAppSelector(selectAutoQuery);
   const dispatch = useAppDispatch();
@@ -46,6 +48,9 @@ export const useAutoQuerySelector = ({
   const expressionA = queryParams.get('expression_a');
 
   useEffect(() => {
+    if (loading) {
+      return;
+    }
     if (comparing && expressionA !== null && expressionA !== undefined) {
       if (querySelection.expression === undefined) {
         return;
@@ -98,7 +103,7 @@ export const useAutoQuerySelector = ({
         dashboard_items: ['icicle'],
       });
     }
-  }, [comparing, querySelection, navigateTo, expressionA, dispatch]);
+  }, [comparing, querySelection, navigateTo, expressionA, dispatch, loading]);
 
   // Effect to load some initial data on load when is no selection
   useEffect(() => {
@@ -152,7 +157,8 @@ export const useAutoQuerySelector = ({
         autoQuery !== 'true' ||
         profileTypesData?.types == null ||
         profileTypesData.types.length < 1 ||
-        selectedProfileName.length === 0
+        selectedProfileName.length === 0 ||
+        loading
       ) {
         return;
       }
@@ -166,5 +172,6 @@ export const useAutoQuerySelector = ({
     setProfileName,
     dispatch,
     selectedProfileName,
+    loading,
   ]);
 };

package/src/useSumBy.ts

@@ -11,9 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
-import {useParcaContext, useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 
 export const DEFAULT_EMPTY_SUM_BY: string[] = [];
@@ -26,6 +25,10 @@ const getDefaultSumBy = (
     return undefined;
   }
 
+  if (!profile.delta) {
+    return DEFAULT_EMPTY_SUM_BY;
+  }
+
   if (labels.includes('comm')) {
     return ['comm'];
   }
@@ -41,80 +44,104 @@ const getDefaultSumBy = (
   return undefined;
 };
 
-export const useSumBy = (
+export const useSumBySelection = (
   profileType: ProfileType | undefined,
   labelNamesLoading: boolean,
   labels: string[] | undefined,
   {
-    urlParamKey = 'sum_by',
-    withURLUpdate = true,
     defaultValue,
   }: {
-    urlParamKey?: string;
-    withURLUpdate?: boolean;
     defaultValue?: string[];
   } = {}
 ): [
-  string[],
+  string[] | undefined,
   (labels: string[]) => void,
-  {userSelectedSumBy: string[] | undefined; isLoading: boolean}
+  {
+    isLoading: boolean;
+  }
 ] => {
-  const {navigateTo} = useParcaContext();
-  const [userSelectedSumByParam, setUserSelectedSumByParam] = useURLState({
-    param: urlParamKey,
-    navigateTo,
-    withURLUpdate,
-  });
-
-  const userSelectedSumBy = useMemo<string[] | undefined>(() => {
-    if (userSelectedSumByParam?.length === 0) {
-      return undefined;
-    }
-
-    if (userSelectedSumByParam === '__none__') {
-      return [];
-    }
+  const [userSelectedSumBy, setUserSelectedSumBy] = useState<Record<string, string[] | undefined>>(
+    profileType != null ? {[profileType.toString()]: defaultValue} : {}
+  );
 
-    if (userSelectedSumByParam === undefined && defaultValue !== undefined) {
-      return defaultValue;
-    }
+  const setSumBy = useCallback(
+    (sumBy: string[]) => {
+      setUserSelectedSumBy(prev => {
+        if (profileType == null) {
+          return prev;
+        }
+
+        return {
+          ...prev,
+          [profileType.toString()]: sumBy,
+        };
+      });
+    },
+    [setUserSelectedSumBy, profileType]
+  );
 
-    if (typeof userSelectedSumByParam === 'string') {
-      return [userSelectedSumByParam];
-    }
+  const {defaultSumBy} = useDefaultSumBy(profileType, labelNamesLoading, labels);
 
-    return userSelectedSumByParam;
+  let sumBy =
+    userSelectedSumBy[profileType?.toString() ?? ''] ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userSelectedSumByParam]);
+  if (profileType?.delta !== true) {
+    sumBy = DEFAULT_EMPTY_SUM_BY;
+  }
 
-  const setUserSelectedSumBy = useCallback(
-    (sumBy: string[]) => {
-      if (sumBy.length === 0) {
-        setUserSelectedSumByParam('__none__');
-        return;
-      }
-
-      if (sumBy.length === 1) {
-        // Handle this separately to take care of the empty string scenario
-        setUserSelectedSumByParam(sumBy[0]);
-        return;
-      }
-
-      setUserSelectedSumByParam(sumBy);
+  return [
+    labelNamesLoading ? undefined : sumBy,
+    setSumBy,
+    {
+      isLoading: labelNamesLoading,
     },
-    [setUserSelectedSumByParam]
-  );
+  ];
+};
 
+export const useDefaultSumBy = (
+  profileType: ProfileType | undefined,
+  labelNamesLoading: boolean,
+  labels: string[] | undefined
+): {defaultSumBy: string[] | undefined; isLoading: boolean} => {
   const defaultSumBy = useMemo(() => {
     return getDefaultSumBy(profileType, labels);
   }, [profileType, labels]);
 
-  let sumBy = userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
+  return {defaultSumBy, isLoading: labelNamesLoading};
+};
 
-  if (profileType?.delta !== true) {
-    sumBy = DEFAULT_EMPTY_SUM_BY;
+const getSumByFromParam = (param: string | string[] | undefined): string[] | undefined => {
+  if (param?.length === 0) {
+    return undefined;
+  }
+
+  if (param === '__none__') {
+    return [];
+  }
+
+  if (typeof param === 'string') {
+    return [param];
+  }
+
+  return param;
+};
+
+export const useSumByFromParams = (param: string | string[] | undefined): string[] | undefined => {
+  const sumBy = useMemo(() => {
+    return getSumByFromParam(param);
+  }, [param]);
+
+  return sumBy;
+};
+
+export const sumByToParam = (sumBy: string[] | undefined): string | string[] | undefined => {
+  if (sumBy === undefined) {
+    return undefined;
+  }
+
+  if (sumBy.length === 0) {
+    return '__none__';
   }
 
-  return [sumBy, setUserSelectedSumBy, {userSelectedSumBy, isLoading: labelNamesLoading}];
+  return sumBy;
 };