@parca/profile 0.16.409 → 0.16.411

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.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
+
+## [0.16.410](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.409...@parca/profile@0.16.410) (2024-07-11)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.409](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.408...@parca/profile@0.16.409) (2024-07-10)
 
 **Note:** Version bump only for package @parca/profile

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;AAI5D,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;AAcD,eAAO,MAAM,aAAa,WAChB,kBAAkB,mBACT,MAAM,SAChB,MAAM,OACR,MAAM,UACJ,MAAM,EAAE,qBAEd,gBAgEF,CAAC;AAEF,QAAA,MAAM,mBAAmB,iHAUtB,wBAAwB,KAAG,GAAG,CAAC,OAoFjC,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,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"}

package/dist/ProfileMetricsGraph/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,14 +11,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // 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 } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Duration, Timestamp } from '@parca/client';
 import { MetricsGraphSkeleton, useGrpcMetadata, useParcaContext, useURLState, } from '@parca/components';
 import { Query } from '@parca/parser';
 import { capitalizeOnlyFirstLetter, getStepDuration } from '@parca/utilities';
+import { useLabelNames } from '../MatchersInput';
 import MetricsGraph from '../MetricsGraph';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
+import useGrpcQuery from '../useGrpcQuery';
+import { Toolbar } from './Toolbar';
+import { DEFAULT_EMPTY_SUM_BY, useSumBy } from './useSumBy';
 const ErrorContent = ({ errorMessage }) => {
     return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
 };
@@ -33,14 +37,7 @@ const getStepCountFromScreenWidth = (pixelsPerPoint) => {
     width = width - (20 + 24 + 68) * 2;
     return Math.round(width / pixelsPerPoint);
 };
-const EMPTY_SUM_BY = [];
-export const useQueryRange = (client, queryExpression, start, end, sumBy = EMPTY_SUM_BY, skip = false) => {
-    const [isLoading, setLoading] = useState(!skip);
-    const [state, setState] = useState({
-        response: null,
-        isLoading,
-        error: null,
-    });
+export const useQueryRange = (client, queryExpression, start, end, sumBy = DEFAULT_EMPTY_SUM_BY, skip = false) => {
     const metadata = useGrpcMetadata();
     const { navigateTo } = useParcaContext();
     const [stepCountStr, setStepCount] = useURLState({ param: 'step_count', navigateTo });
@@ -58,14 +55,11 @@ export const useQueryRange = (client, queryExpression, start, end, sumBy = EMPTY
             setStepCount(defaultStepCount.toString());
         }
     }, [stepCountStr, defaultStepCount, setStepCount]);
-    useEffect(() => {
-        void (async () => {
-            if (skip) {
-                return;
-            }
-            setLoading(true);
+    const { data, isLoading, error } = useGrpcQuery({
+        key: ['query-range', queryExpression, start, end, sumBy.join(','), stepCount, metadata],
+        queryFn: async () => {
             const stepDuration = getStepDuration(start, end, stepCount);
-            const call = client.queryRange({
+            const { response } = await client.queryRange({
                 query: queryExpression,
                 start: Timestamp.fromDate(new Date(start)),
                 end: Timestamp.fromDate(new Date(end)),
@@ -73,22 +67,23 @@ export const useQueryRange = (client, queryExpression, start, end, sumBy = EMPTY
                 limit: 0,
                 sumBy,
             }, { meta: metadata });
-            call.response
-                .then(response => {
-                setState({ response, isLoading: false, error: null });
-                setLoading(false);
-                return null;
-            })
-                .catch(error => {
-                setState({ response: null, isLoading: false, error });
-                setLoading(false);
-            });
-        })();
-    }, [client, queryExpression, start, end, metadata, sumBy, skip, stepCount]);
-    return { ...state, isLoading };
+            return response;
+        },
+        options: {
+            retry: false,
+            enabled: !skip && sumBy !== DEFAULT_EMPTY_SUM_BY,
+            staleTime: 1000 * 60 * 5, // 5 minutes
+        },
+    });
+    return { isLoading, error: error, response: data ?? null };
 };
 const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, }) => {
-    const { isLoading: metricsGraphLoading, response, error, } = useQueryRange(queryClient, queryExpression, from, to);
+    const profileType = useMemo(() => {
+        return Query.parse(queryExpression).profileType();
+    }, [queryExpression]);
+    const { loading: labelNamesLoading, result: labelNamesResult } = useLabelNames(queryClient, profileType.toString() ?? '', from, to);
+    const [sumBy, setSumBy] = useSumBy(profileType, 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);
     useEffect(() => {
@@ -104,8 +99,9 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
     }, [perf, response]);
     const series = response?.series;
     const dataAvailable = series !== null && series !== undefined && series?.length > 0;
-    if (metricsGraphLoading) {
-        return _jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode });
+    const loading = metricsGraphLoading || labelNamesLoading;
+    if (!labelNamesLoading && labelNamesResult?.error?.message != null) {
+        return (_jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(labelNamesResult.error.message) }));
     }
     if (!metricsGraphLoading && error !== null) {
         if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
@@ -113,19 +109,17 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
         }
         return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
     }
+    let sampleUnit = '';
     if (dataAvailable) {
-        const handleSampleClick = (timestamp, _value, labels, duration) => {
-            onPointClick(timestamp, labels, queryExpression, duration);
-        };
-        let sampleUnit = '';
         if (series.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {
             sampleUnit = series[0]?.sampleType?.unit ?? '';
         }
         if (sampleUnit === '') {
             sampleUnit = Query.parse(queryExpression).profileType().sampleUnit;
         }
-        return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, addLabelMatcher: addLabelMatcher, sampleUnit: sampleUnit, height: height, width: width, margin: margin }) }, "metrics-graph-loaded") }));
     }
-    return _jsx(ProfileMetricsEmptyState, { message: "No data found. Try a different query." });
+    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) => {
+                        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") }));
 };
 export default ProfileMetricsGraph;

package/dist/ProfileMetricsGraph/useSumBy.d.ts

@@ -1,3 +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];
 //# 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":"AAeA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AA+B1C,eAAO,MAAM,QAAQ,gBACN,WAAW,GAAG,SAAS,UAC5B,MAAM,EAAE,GAAG,SAAS,KAC3B,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAoBvC,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;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"}

package/dist/ProfileMetricsGraph/useSumBy.js

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

package/package.json

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

package/src/ProfileMetricsGraph/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo} from 'react';
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {AnimatePresence, motion} from 'framer-motion';
@@ -28,8 +28,12 @@ import {Query} from '@parca/parser';
 import {capitalizeOnlyFirstLetter, getStepDuration} from '@parca/utilities';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
+import {useLabelNames} from '../MatchersInput';
 import MetricsGraph from '../MetricsGraph';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
+import useGrpcQuery from '../useGrpcQuery';
+import {Toolbar} from './Toolbar';
+import {DEFAULT_EMPTY_SUM_BY, useSumBy} from './useSumBy';
 
 interface ProfileMetricsEmptyStateProps {
   message: string;
@@ -89,26 +93,17 @@ const getStepCountFromScreenWidth = (pixelsPerPoint: number): number => {
   return Math.round(width / pixelsPerPoint);
 };
 
-const EMPTY_SUM_BY: string[] = [];
-
 export const useQueryRange = (
   client: QueryServiceClient,
   queryExpression: string,
   start: number,
   end: number,
-  sumBy: string[] = EMPTY_SUM_BY,
+  sumBy: string[] = DEFAULT_EMPTY_SUM_BY,
   skip = false
 ): IQueryRangeState => {
-  const [isLoading, setLoading] = useState<boolean>(!skip);
-  const [state, setState] = useState<IQueryRangeState>({
-    response: null,
-    isLoading,
-    error: null,
-  });
   const metadata = useGrpcMetadata();
   const {navigateTo} = useParcaContext();
   const [stepCountStr, setStepCount] = useURLState({param: 'step_count', navigateTo});
-
   const defaultStepCount = useMemo(() => {
     return getStepCountFromScreenWidth(10);
   }, []);
@@ -127,16 +122,11 @@ export const useQueryRange = (
     }
   }, [stepCountStr, defaultStepCount, setStepCount]);
 
-  useEffect(() => {
-    void (async () => {
-      if (skip) {
-        return;
-      }
-
-      setLoading(true);
-
+  const {data, isLoading, error} = useGrpcQuery<QueryRangeResponse | undefined>({
+    key: ['query-range', queryExpression, start, end, sumBy.join(','), stepCount, metadata],
+    queryFn: async () => {
       const stepDuration = getStepDuration(start, end, stepCount);
-      const call = client.queryRange(
+      const {response} = await client.queryRange(
         {
           query: queryExpression,
           start: Timestamp.fromDate(new Date(start)),
@@ -147,21 +137,16 @@ export const useQueryRange = (
         },
         {meta: metadata}
       );
+      return response;
+    },
+    options: {
+      retry: false,
+      enabled: !skip && sumBy !== DEFAULT_EMPTY_SUM_BY,
+      staleTime: 1000 * 60 * 5, // 5 minutes
+    },
+  });
 
-      call.response
-        .then(response => {
-          setState({response, isLoading: false, error: null});
-          setLoading(false);
-          return null;
-        })
-        .catch(error => {
-          setState({response: null, isLoading: false, error});
-          setLoading(false);
-        });
-    })();
-  }, [client, queryExpression, start, end, metadata, sumBy, skip, stepCount]);
-
-  return {...state, isLoading};
+  return {isLoading, error: error as RpcError | null, response: data ?? null};
 };
 
 const ProfileMetricsGraph = ({
@@ -175,11 +160,23 @@ const ProfileMetricsGraph = ({
   onPointClick,
   comparing = false,
 }: ProfileMetricsGraphProps): JSX.Element => {
+  const profileType = useMemo(() => {
+    return Query.parse(queryExpression).profileType();
+  }, [queryExpression]);
+
+  const {loading: labelNamesLoading, result: labelNamesResult} = useLabelNames(
+    queryClient,
+    profileType.toString() ?? '',
+    from,
+    to
+  );
+  const [sumBy, setSumBy] = useSumBy(profileType, labelNamesResult.response?.labelNames);
+
   const {
     isLoading: metricsGraphLoading,
     response,
     error,
-  } = useQueryRange(queryClient, queryExpression, from, to);
+  } = useQueryRange(queryClient, queryExpression, from, to, sumBy, labelNamesLoading);
   const {onError, perf, authenticationErrorMessage, isDarkMode} = useParcaContext();
   const {width, height, margin, heightStyle} = useMetricsGraphDimensions(comparing);
 
@@ -200,8 +197,12 @@ const ProfileMetricsGraph = ({
   const series = response?.series;
   const dataAvailable = series !== null && series !== undefined && series?.length > 0;
 
-  if (metricsGraphLoading) {
-    return <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} />;
+  const loading = metricsGraphLoading || labelNamesLoading;
+
+  if (!labelNamesLoading && labelNamesResult?.error?.message != null) {
+    return (
+      <ErrorContent errorMessage={capitalizeOnlyFirstLetter(labelNamesResult.error.message)} />
+    );
   }
 
   if (!metricsGraphLoading && error !== null) {
@@ -212,52 +213,60 @@ const ProfileMetricsGraph = ({
     return <ErrorContent errorMessage={capitalizeOnlyFirstLetter(error.message)} />;
   }
 
+  let sampleUnit = '';
+
   if (dataAvailable) {
-    const handleSampleClick = (
-      timestamp: number,
-      _value: number,
-      labels: Label[],
-      duration: number
-    ): void => {
-      onPointClick(timestamp, labels, queryExpression, duration);
-    };
-
-    let sampleUnit = '';
     if (series.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {
       sampleUnit = series[0]?.sampleType?.unit ?? '';
     }
     if (sampleUnit === '') {
       sampleUnit = Query.parse(queryExpression).profileType().sampleUnit;
     }
+  }
 
-    return (
-      <AnimatePresence>
-        <motion.div
-          className="h-full w-full relative"
-          key="metrics-graph-loaded"
-          initial={{display: 'none', opacity: 0}}
-          animate={{display: 'block', opacity: 1}}
-          transition={{duration: 0.5}}
-        >
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="h-full w-full relative"
+        key="metrics-graph-loaded"
+        initial={{display: 'none', opacity: 0}}
+        animate={{display: 'block', opacity: 1}}
+        transition={{duration: 0.5}}
+      >
+        <Toolbar
+          sumBy={sumBy}
+          setSumBy={setSumBy}
+          labels={labelNamesResult.response?.labelNames ?? []}
+        />
+        {loading ? (
+          <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} />
+        ) : dataAvailable ? (
           <MetricsGraph
             data={series}
             from={from}
             to={to}
             profile={profile as MergedProfileSelection}
             setTimeRange={setTimeRange}
-            onSampleClick={handleSampleClick}
+            onSampleClick={(
+              timestamp: number,
+              _value: number,
+              labels: Label[],
+              duration: number
+            ): void => {
+              onPointClick(timestamp, labels, queryExpression, duration);
+            }}
             addLabelMatcher={addLabelMatcher}
             sampleUnit={sampleUnit}
             height={height}
             width={width}
             margin={margin}
           />
-        </motion.div>
-      </AnimatePresence>
-    );
-  }
-
-  return <ProfileMetricsEmptyState message="No data found. Try a different query." />;
+        ) : (
+          <ProfileMetricsEmptyState message="No data found. Try a different query." />
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
 };
 
 export default ProfileMetricsGraph;

package/src/ProfileMetricsGraph/useSumBy.ts

@@ -11,11 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
+import {useParcaContext, useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 
-const DEFAULT_EMPTY_SUM_BY: string[] = [];
+export const DEFAULT_EMPTY_SUM_BY: string[] = [];
 
 const getDefaultSumBy = (
   profile: ProfileType | undefined,
@@ -26,7 +27,7 @@ const getDefaultSumBy = (
   }
 
   if (!profile.delta) {
-    return undefined;
+    return [];
   }
 
   if (labels.includes('comm')) {
@@ -48,7 +49,47 @@ export const useSumBy = (
   profileType: ProfileType | undefined,
   labels: string[] | undefined
 ): [string[], (labels: string[]) => void] => {
-  const [userSelectedSumBy, setUserSelectedSumBy] = useState<string[] | undefined>(undefined);
+  const {navigateTo} = useParcaContext();
+  const [userSelectedSumByParam, setUserSelectedSumByParam] = useURLState({
+    param: 'sum_by',
+    navigateTo,
+  });
+  const previousProfileType = useRef<ProfileType | undefined>(profileType);
+
+  const userSelectedSumBy = useMemo<string[] | undefined>(() => {
+    if (userSelectedSumByParam?.length === 0) {
+      return undefined;
+    }
+
+    if (userSelectedSumByParam === '__none__') {
+      return [];
+    }
+
+    if (typeof userSelectedSumByParam === 'string') {
+      return [userSelectedSumByParam];
+    }
+
+    return userSelectedSumByParam;
+  }, [userSelectedSumByParam]);
+
+  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);
+    },
+    [setUserSelectedSumByParam]
+  );
+
   const [defaultSumBy, setDefaultSumBy] = useState<string[] | undefined>(
     getDefaultSumBy(profileType, labels)
   );
@@ -58,12 +99,18 @@ export const useSumBy = (
   }, [profileType, labels]);
 
   useEffect(() => {
-    if (profileType === undefined) {
+    if (
+      profileType === undefined ||
+      profileType.toString() === previousProfileType.current?.toString()
+    ) {
       return;
     }
 
     // Reset user selected sumBy if profile type changes
-    setUserSelectedSumBy(undefined);
+    setUserSelectedSumBy(['']);
+    previousProfileType.current = profileType;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [profileType]);
 
   return [userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY, setUserSelectedSumBy];