@parca/profile 0.16.411 → 0.16.412

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.412](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.411...@parca/profile@0.16.412) (2024-07-16)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.411](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.410...@parca/profile@0.16.411) (2024-07-15)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileMetricsGraph/index.d.ts

@@ -9,6 +9,7 @@ export declare const ProfileMetricsEmptyState: ({ message }: ProfileMetricsEmpty
 interface ProfileMetricsGraphProps {
     queryClient: QueryServiceClient;
     queryExpression: string;
+    dirtyQueryExpression: string;
     profile: ProfileSelection | null;
     from: number;
     to: number;
@@ -29,6 +30,6 @@ export interface IQueryRangeState {
     error: RpcError | null;
 }
 export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number, sumBy?: string[], skip?: boolean) => IQueryRangeState;
-declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, }: ProfileMetricsGraphProps) => JSX.Element;
+declare const ProfileMetricsGraph: ({ queryClient, queryExpression, dirtyQueryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, }: ProfileMetricsGraphProps) => JSX.Element;
 export default ProfileMetricsGraph;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAW,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EACL,aAAa,EAKd,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQ5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,gBAAe,6BAA6B,KAAG,GAAG,CAAC,OAMvF,CAAC;AAEF,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB;AAYD,eAAO,MAAM,aAAa,WAChB,kBAAkB,mBACT,MAAM,SAChB,MAAM,OACR,MAAM,UACJ,MAAM,EAAE,qBAEd,gBA+CF,CAAC;AAEF,QAAA,MAAM,mBAAmB,iHAUtB,wBAAwB,KAAG,GAAG,CAAC,OA4GjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAW,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EACL,aAAa,EAKd,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQ5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,gBAAe,6BAA6B,KAAG,GAAG,CAAC,OAMvF,CAAC;AAEF,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB;AAYD,eAAO,MAAM,aAAa,WAChB,kBAAkB,mBACT,MAAM,SAChB,MAAM,OACR,MAAM,UACJ,MAAM,EAAE,qBAEd,gBA+CF,CAAC;AAEF,QAAA,MAAM,mBAAmB,uIAWtB,wBAAwB,KAAG,GAAG,CAAC,OAsHjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileMetricsGraph/index.js

@@ -77,12 +77,15 @@ export const useQueryRange = (client, queryExpression, start, end, sumBy = DEFAU
     });
     return { isLoading, error: error, response: data ?? null };
 };
-const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, }) => {
+const ProfileMetricsGraph = ({ queryClient, queryExpression, dirtyQueryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, }) => {
     const profileType = useMemo(() => {
         return Query.parse(queryExpression).profileType();
     }, [queryExpression]);
+    const dirtyProfileType = useMemo(() => {
+        return Query.parse(dirtyQueryExpression).profileType();
+    }, [dirtyQueryExpression]);
     const { loading: labelNamesLoading, result: labelNamesResult } = useLabelNames(queryClient, profileType.toString() ?? '', from, to);
-    const [sumBy, setSumBy] = useSumBy(profileType, labelNamesResult.response?.labelNames);
+    const [sumBy, setSumBy] = useSumBy(profileType, labelNamesLoading, labelNamesResult.response?.labelNames);
     const { isLoading: metricsGraphLoading, response, error, } = useQueryRange(queryClient, queryExpression, from, to, sumBy, labelNamesLoading);
     const { onError, perf, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { width, height, margin, heightStyle } = useMetricsGraphDimensions(comparing);
@@ -118,7 +121,7 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
             sampleUnit = Query.parse(queryExpression).profileType().sampleUnit;
         }
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "h-full w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: [_jsx(Toolbar, { sumBy: sumBy, setSumBy: setSumBy, labels: labelNamesResult.response?.labelNames ?? [] }), loading ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode })) : dataAvailable ? (_jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: (timestamp, _value, labels, duration) => {
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "h-full w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: [dirtyProfileType.delta ? (_jsx(Toolbar, { sumBy: sumBy, setSumBy: setSumBy, labels: labelNamesResult.response?.labelNames ?? [] })) : null, loading ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode })) : dataAvailable ? (_jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: (timestamp, _value, labels, duration) => {
                         onPointClick(timestamp, labels, queryExpression, duration);
                     }, addLabelMatcher: addLabelMatcher, sampleUnit: sampleUnit, height: height, width: width, margin: margin })) : (_jsx(ProfileMetricsEmptyState, { message: "No data found. Try a different query." }))] }, "metrics-graph-loaded") }));
 };

package/dist/ProfileMetricsGraph/useSumBy.d.ts

@@ -1,4 +1,4 @@
 import { ProfileType } from '@parca/parser';
 export declare const DEFAULT_EMPTY_SUM_BY: string[];
-export declare const useSumBy: (profileType: ProfileType | undefined, labels: string[] | undefined) => [string[], (labels: string[]) => void];
+export declare const useSumBy: (profileType: ProfileType | undefined, labelNamesLoading: boolean, labels: string[] | undefined) => [string[], (labels: string[]) => void];
 //# sourceMappingURL=useSumBy.d.ts.map

package/dist/ProfileMetricsGraph/useSumBy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/useSumBy.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAAO,CAAC;AA6BjD,eAAO,MAAM,QAAQ,gBACN,WAAW,GAAG,SAAS,UAC5B,MAAM,EAAE,GAAG,SAAS,KAC3B,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAkEvC,CAAC"}
+{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/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,KAC3B,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CA2DvC,CAAC"}

package/dist/ProfileMetricsGraph/useSumBy.js

@@ -10,16 +10,13 @@
 // 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, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParcaContext, useURLState } from '@parca/components';
 export const DEFAULT_EMPTY_SUM_BY = [];
 const getDefaultSumBy = (profile, labels) => {
     if (profile === undefined || labels === undefined) {
         return undefined;
     }
-    if (!profile.delta) {
-        return [];
-    }
     if (labels.includes('comm')) {
         return ['comm'];
     }
@@ -31,13 +28,12 @@ const getDefaultSumBy = (profile, labels) => {
     }
     return undefined;
 };
-export const useSumBy = (profileType, labels) => {
+export const useSumBy = (profileType, labelNamesLoading, labels) => {
     const { navigateTo } = useParcaContext();
     const [userSelectedSumByParam, setUserSelectedSumByParam] = useURLState({
         param: 'sum_by',
         navigateTo,
     });
-    const previousProfileType = useRef(profileType);
     const userSelectedSumBy = useMemo(() => {
         if (userSelectedSumByParam?.length === 0) {
             return undefined;
@@ -64,17 +60,14 @@ export const useSumBy = (profileType, labels) => {
     }, [setUserSelectedSumByParam]);
     const [defaultSumBy, setDefaultSumBy] = useState(getDefaultSumBy(profileType, labels));
     useEffect(() => {
-        setDefaultSumBy(getDefaultSumBy(profileType, labels));
-    }, [profileType, labels]);
-    useEffect(() => {
-        if (profileType === undefined ||
-            profileType.toString() === previousProfileType.current?.toString()) {
+        if (labelNamesLoading) {
             return;
         }
-        // Reset user selected sumBy if profile type changes
-        setUserSelectedSumBy(['']);
-        previousProfileType.current = profileType;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [profileType]);
-    return [userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY, setUserSelectedSumBy];
+        setDefaultSumBy(getDefaultSumBy(profileType, labels));
+    }, [profileType, labels, labelNamesLoading]);
+    let sumBy = userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
+    if (profileType?.delta !== true) {
+        sumBy = [];
+    }
+    return [sumBy, setUserSelectedSumBy];
 };

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;AAElD,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;AAO5D,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,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;CAC9B;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,OA2P7B,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;AAElD,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;AAO5D,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,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;CAC9B;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,OA4P7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -149,7 +149,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
                                     }, 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, setTimeRange: (range) => {
+                        querySelection.to !== undefined ? (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, dirtyQueryExpression: queryExpressionString, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, setTimeRange: (range) => {
                                 const from = range.getFromMs();
                                 const to = range.getToMs();
                                 let mergedProfileParams = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.411",
+  "version": "0.16.412",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -73,5 +73,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8885ee532a664069e946e488f60b24cdac9c80f0"
+  "gitHead": "ba668d046e2eea3514961fac022c19b21ff16412"
 }

package/src/ProfileMetricsGraph/index.tsx

@@ -61,6 +61,7 @@ export const ProfileMetricsEmptyState = ({message}: ProfileMetricsEmptyStateProp
 interface ProfileMetricsGraphProps {
   queryClient: QueryServiceClient;
   queryExpression: string;
+  dirtyQueryExpression: string;
   profile: ProfileSelection | null;
   from: number;
   to: number;
@@ -152,6 +153,7 @@ export const useQueryRange = (
 const ProfileMetricsGraph = ({
   queryClient,
   queryExpression,
+  dirtyQueryExpression,
   profile,
   from,
   to,
@@ -164,13 +166,21 @@ const ProfileMetricsGraph = ({
     return Query.parse(queryExpression).profileType();
   }, [queryExpression]);
 
+  const dirtyProfileType = useMemo(() => {
+    return Query.parse(dirtyQueryExpression).profileType();
+  }, [dirtyQueryExpression]);
+
   const {loading: labelNamesLoading, result: labelNamesResult} = useLabelNames(
     queryClient,
     profileType.toString() ?? '',
     from,
     to
   );
-  const [sumBy, setSumBy] = useSumBy(profileType, labelNamesResult.response?.labelNames);
+  const [sumBy, setSumBy] = useSumBy(
+    profileType,
+    labelNamesLoading,
+    labelNamesResult.response?.labelNames
+  );
 
   const {
     isLoading: metricsGraphLoading,
@@ -233,11 +243,13 @@ const ProfileMetricsGraph = ({
         animate={{display: 'block', opacity: 1}}
         transition={{duration: 0.5}}
       >
-        <Toolbar
-          sumBy={sumBy}
-          setSumBy={setSumBy}
-          labels={labelNamesResult.response?.labelNames ?? []}
-        />
+        {dirtyProfileType.delta ? (
+          <Toolbar
+            sumBy={sumBy}
+            setSumBy={setSumBy}
+            labels={labelNamesResult.response?.labelNames ?? []}
+          />
+        ) : null}
         {loading ? (
           <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} />
         ) : dataAvailable ? (

package/src/ProfileMetricsGraph/useSumBy.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {useParcaContext, useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
@@ -26,10 +26,6 @@ const getDefaultSumBy = (
     return undefined;
   }
 
-  if (!profile.delta) {
-    return [];
-  }
-
   if (labels.includes('comm')) {
     return ['comm'];
   }
@@ -47,6 +43,7 @@ const getDefaultSumBy = (
 
 export const useSumBy = (
   profileType: ProfileType | undefined,
+  labelNamesLoading: boolean,
   labels: string[] | undefined
 ): [string[], (labels: string[]) => void] => {
   const {navigateTo} = useParcaContext();
@@ -54,7 +51,6 @@ export const useSumBy = (
     param: 'sum_by',
     navigateTo,
   });
-  const previousProfileType = useRef<ProfileType | undefined>(profileType);
 
   const userSelectedSumBy = useMemo<string[] | undefined>(() => {
     if (userSelectedSumByParam?.length === 0) {
@@ -95,23 +91,17 @@ export const useSumBy = (
   );
 
   useEffect(() => {
-    setDefaultSumBy(getDefaultSumBy(profileType, labels));
-  }, [profileType, labels]);
-
-  useEffect(() => {
-    if (
-      profileType === undefined ||
-      profileType.toString() === previousProfileType.current?.toString()
-    ) {
+    if (labelNamesLoading) {
       return;
     }
+    setDefaultSumBy(getDefaultSumBy(profileType, labels));
+  }, [profileType, labels, labelNamesLoading]);
 
-    // Reset user selected sumBy if profile type changes
-    setUserSelectedSumBy(['']);
-    previousProfileType.current = profileType;
+  let sumBy = userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [profileType]);
+  if (profileType?.delta !== true) {
+    sumBy = [];
+  }
 
-  return [userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY, setUserSelectedSumBy];
+  return [sumBy, setUserSelectedSumBy];
 };

package/src/ProfileSelector/index.tsx

@@ -284,6 +284,7 @@ const ProfileSelector = ({
               <ProfileMetricsGraph
                 queryClient={queryClient}
                 queryExpression={querySelection.expression}
+                dirtyQueryExpression={queryExpressionString}
                 from={querySelection.from}
                 to={querySelection.to}
                 profile={profileSelection}