@parca/profile 0.16.413 → 0.16.414

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAKpC,UAAU,kBAAkB;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,WAChB,kBAAkB,eACb,MAAM,UACX,MAAM,QACR,MAAM,KACX,aA4BF,CAAC;AAEF,QAAA,MAAM,aAAa,6EAMhB,kBAAkB,KAAG,GAAG,CAAC,OAoL3B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAMpC,UAAU,kBAAkB;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,WAChB,kBAAkB,eACb,MAAM,UACX,MAAM,QACR,MAAM,KACX,aAyBF,CAAC;AAEF,QAAA,MAAM,aAAa,6EAMhB,kBAAkB,KAAG,GAAG,CAAC,OAoL3B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/MatchersInput/index.js

@@ -17,31 +17,31 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { useGrpcMetadata } from '@parca/components';
 import { Query } from '@parca/parser';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
+import useGrpcQuery from '../useGrpcQuery';
 import SuggestionsList, { Suggestion, Suggestions } from './SuggestionsList';
 export const useLabelNames = (client, profileType, start, end) => {
-    const [loading, setLoading] = useState(true);
-    const [result, setResult] = useState({});
     const metadata = useGrpcMetadata();
-    useEffect(() => {
-        if (profileType === undefined || profileType === '') {
-            return;
-        }
-        const request = { match: [] };
-        if (start !== undefined && end !== undefined) {
-            request.start = millisToProtoTimestamp(start);
-            request.end = millisToProtoTimestamp(end);
-        }
-        if (profileType !== undefined) {
-            request.profileType = profileType;
-        }
-        const call = client.labels(request, { meta: metadata });
-        setLoading(true);
-        call.response
-            .then(response => setResult({ response }))
-            .catch(error => setResult({ error }))
-            .finally(() => setLoading(false));
-    }, [client, metadata, start, end, profileType]);
-    return { result, loading };
+    const { data, isLoading, error } = useGrpcQuery({
+        key: ['labelNames', profileType],
+        queryFn: async () => {
+            const request = { match: [] };
+            if (start !== undefined && end !== undefined) {
+                request.start = millisToProtoTimestamp(start);
+                request.end = millisToProtoTimestamp(end);
+            }
+            if (profileType !== undefined) {
+                request.profileType = profileType;
+            }
+            const { response } = await client.labels(request, { meta: metadata });
+            return response;
+        },
+        options: {
+            enabled: profileType !== undefined && profileType !== '',
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            keepPreviousData: false,
+        },
+    });
+    return { result: { response: data, error: error }, loading: isLoading };
 };
 const MatchersInput = ({ queryClient, setMatchersString, runQuery, currentQuery, profileType, }) => {
     const inputRef = useRef(null);

package/dist/ProfileMetricsGraph/index.d.ts

@@ -9,7 +9,6 @@ export declare const ProfileMetricsEmptyState: ({ message }: ProfileMetricsEmpty
 interface ProfileMetricsGraphProps {
     queryClient: QueryServiceClient;
     queryExpression: string;
-    dirtyQueryExpression: string;
     profile: ProfileSelection | null;
     from: number;
     to: number;

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;AAK5D,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,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,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,SACJ,MAAM,EAAE,qBAEd,gBA+CF,CAAC;AAEF,QAAA,MAAM,mBAAmB,sIAYtB,wBAAwB,KAAG,GAAG,CAAC,OAqFjC,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;AAK5D,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,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,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,SACJ,MAAM,EAAE,qBAEd,gBA+CF,CAAC;AAEF,QAAA,MAAM,mBAAmB,sIAYtB,wBAAwB,KAAG,GAAG,CAAC,OAqFjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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,OAsT7B,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,qJAWlB,oBAAoB,KAAG,GAAG,CAAC,OAiU7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -49,19 +49,27 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
     const profileType = useMemo(() => {
         return Query.parse(queryExpressionString).profileType();
     }, [queryExpressionString]);
+    const selectedProfileType = useMemo(() => {
+        return Query.parse(querySelection.expression).profileType();
+    }, [querySelection.expression]);
     const { loading: labelNamesLoading, result } = useLabelNames(queryClient, profileType.toString());
+    const { loading: selectedLabelNamesLoading, result: selectedLabelNamesResult } = useLabelNames(queryClient, selectedProfileType.toString());
     const labels = useMemo(() => {
         return result.response?.labelNames === undefined ? [] : result.response.labelNames;
     }, [result]);
-    const [sumBy, setSumBy, userSelectedSumBy] = useSumBy(profileType, labelNamesLoading, result.response?.labelNames, {
+    const selectedLabels = useMemo(() => {
+        return selectedLabelNamesResult.response?.labelNames === undefined
+            ? []
+            : selectedLabelNamesResult.response.labelNames;
+    }, [selectedLabelNamesResult]);
+    const [sumBy, setSumBy, { userSelectedSumBy, isLoading: isSumByLoading }] = useSumBy(selectedProfileType, selectedLabelNamesLoading, selectedLabels, {
         urlParamKey: 'sum_by' + suffix,
     });
-    const [sumBySelection, setSumBySelection] = useSumBy(profileType, labelNamesLoading, result.response?.labelNames, {
+    const [sumBySelection, setSumBySelection, { isLoading: isSumBySelectionLoading }] = useSumBy(profileType, labelNamesLoading, labels, {
         urlParamKey: 'sum_by_selection' + suffix,
         withURLUpdate: false,
         defaultValue: userSelectedSumBy,
     });
-    const sumByLoading = labelNamesLoading;
     useEffect(() => {
         if (enforcedProfileName !== '') {
             const [q, changed] = Query.parse(querySelection.expression).setProfileName(enforcedProfileName);
@@ -80,7 +88,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
     const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(queryExpressionString);
     const selectedProfileName = query.profileName();
     const setNewQueryExpression = (expr, updateTs = false) => {
-        if (!sumByLoading) {
+        if (!isSumBySelectionLoading) {
             setSumBy(sumBySelection);
         }
         const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
@@ -174,7 +182,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, dirtyQueryExpression: queryExpressionString, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: sumBy, sumByLoading: sumByLoading, 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: sumBy, sumByLoading: isSumByLoading, setTimeRange: (range) => {
                                 const from = range.getFromMs();
                                 const to = range.getToMs();
                                 let mergedProfileParams = {};

package/dist/useGrpcQuery/index.d.ts

@@ -6,8 +6,9 @@ interface Props<IRes> {
         enabled?: boolean | undefined;
         staleTime?: number | undefined;
         retry?: number | boolean;
+        keepPreviousData?: boolean | undefined;
     };
 }
-declare const useGrpcQuery: <IRes>({ key, queryFn, options: { enabled, staleTime, retry }, }: Props<IRes>) => UseQueryResult<IRes>;
+declare const useGrpcQuery: <IRes>({ key, queryFn, options: { enabled, staleTime, retry, keepPreviousData }, }: Props<IRes>) => UseQueryResult<IRes>;
 export default useGrpcQuery;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useGrpcQuery/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAW,KAAK,cAAc,EAAC,MAAM,uBAAuB,CAAC;AAEpE,UAAU,KAAK,CAAC,IAAI;IAClB,GAAG,EAAE,OAAO,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;CACH;AAED,QAAA,MAAM,YAAY,GAAI,IAAI,6DAIvB,KAAK,CAAC,IAAI,CAAC,KAAG,cAAc,CAAC,IAAI,CAYnC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useGrpcQuery/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAW,KAAK,cAAc,EAAC,MAAM,uBAAuB,CAAC;AAEpE,UAAU,KAAK,CAAC,IAAI;IAClB,GAAG,EAAE,OAAO,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;QACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;KACxC,CAAC;CACH;AAED,QAAA,MAAM,YAAY,GAAI,IAAI,+EAIvB,KAAK,CAAC,IAAI,CAAC,KAAG,cAAc,CAAC,IAAI,CAanC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/useGrpcQuery/index.js

@@ -11,13 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useQuery } from '@tanstack/react-query';
-const useGrpcQuery = ({ key, queryFn, options: { enabled = true, staleTime, retry } = {}, }) => {
+const useGrpcQuery = ({ key, queryFn, options: { enabled = true, staleTime, retry, keepPreviousData } = {}, }) => {
     return useQuery(key, async () => {
         return await queryFn();
     }, {
         enabled,
         staleTime,
         retry,
+        keepPreviousData,
     });
 };
 export default useGrpcQuery;

package/dist/useSumBy.d.ts

@@ -4,5 +4,8 @@ export declare const useSumBy: (profileType: ProfileType | undefined, labelNames
     urlParamKey?: string;
     withURLUpdate?: boolean;
     defaultValue?: string[];
-}) => [string[], (labels: string[]) => void, string[] | undefined];
+}) => [string[], (labels: string[]) => void, {
+    userSelectedSumBy: string[] | undefined;
+    isLoading: boolean;
+}];
 //# sourceMappingURL=useSumBy.d.ts.map

package/dist/useSumBy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSumBy.d.ts","sourceRoot":"","sources":["../src/useSumBy.ts"],"names":[],"mappings":"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,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,EAAE,MAAM,EAAE,GAAG,SAAS,CAkE7D,CAAC"}
+{"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"}

package/dist/useSumBy.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useParcaContext, useURLState } from '@parca/components';
 export const DEFAULT_EMPTY_SUM_BY = [];
 const getDefaultSumBy = (profile, labels) => {
@@ -63,16 +63,12 @@ export const useSumBy = (profileType, labelNamesLoading, labels, { urlParamKey =
         }
         setUserSelectedSumByParam(sumBy);
     }, [setUserSelectedSumByParam]);
-    const [defaultSumBy, setDefaultSumBy] = useState(getDefaultSumBy(profileType, labels));
-    useEffect(() => {
-        if (labelNamesLoading) {
-            return;
-        }
-        setDefaultSumBy(getDefaultSumBy(profileType, labels));
-    }, [profileType, labels, labelNamesLoading]);
+    const defaultSumBy = useMemo(() => {
+        return getDefaultSumBy(profileType, labels);
+    }, [profileType, labels]);
     let sumBy = userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
     if (profileType?.delta !== true) {
-        sumBy = [];
+        sumBy = DEFAULT_EMPTY_SUM_BY;
     }
-    return [sumBy, setUserSelectedSumBy, userSelectedSumBy];
+    return [sumBy, setUserSelectedSumBy, { userSelectedSumBy, isLoading: labelNamesLoading }];
 };

package/package.json

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

package/src/MatchersInput/index.tsx

@@ -21,6 +21,7 @@ import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
+import useGrpcQuery from '../useGrpcQuery';
 import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
 
 interface MatchersInputProps {
@@ -47,33 +48,30 @@ export const useLabelNames = (
   start?: number,
   end?: number
 ): UseLabelNames => {
-  const [loading, setLoading] = useState(true);
-  const [result, setResult] = useState<ILabelNamesResult>({});
   const metadata = useGrpcMetadata();
 
-  useEffect(() => {
-    if (profileType === undefined || profileType === '') {
-      return;
-    }
-
-    const request: LabelsRequest = {match: []};
-    if (start !== undefined && end !== undefined) {
-      request.start = millisToProtoTimestamp(start);
-      request.end = millisToProtoTimestamp(end);
-    }
-    if (profileType !== undefined) {
-      request.profileType = profileType;
-    }
-    const call = client.labels(request, {meta: metadata});
-    setLoading(true);
-
-    call.response
-      .then(response => setResult({response}))
-      .catch(error => setResult({error}))
-      .finally(() => setLoading(false));
-  }, [client, metadata, start, end, profileType]);
-
-  return {result, loading};
+  const {data, isLoading, error} = useGrpcQuery<LabelsResponse>({
+    key: ['labelNames', profileType],
+    queryFn: async () => {
+      const request: LabelsRequest = {match: []};
+      if (start !== undefined && end !== undefined) {
+        request.start = millisToProtoTimestamp(start);
+        request.end = millisToProtoTimestamp(end);
+      }
+      if (profileType !== undefined) {
+        request.profileType = profileType;
+      }
+      const {response} = await client.labels(request, {meta: metadata});
+      return response;
+    },
+    options: {
+      enabled: profileType !== undefined && profileType !== '',
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      keepPreviousData: false,
+    },
+  });
+
+  return {result: {response: data, error: error as Error}, loading: isLoading};
 };
 
 const MatchersInput = ({

package/src/ProfileMetricsGraph/index.tsx

@@ -58,7 +58,6 @@ export const ProfileMetricsEmptyState = ({message}: ProfileMetricsEmptyStateProp
 interface ProfileMetricsGraphProps {
   queryClient: QueryServiceClient;
   queryExpression: string;
-  dirtyQueryExpression: string;
   profile: ProfileSelection | null;
   from: number;
   to: number;

package/src/ProfileSelector/index.tsx

@@ -117,25 +117,39 @@ const ProfileSelector = ({
     return Query.parse(queryExpressionString).profileType();
   }, [queryExpressionString]);
 
+  const selectedProfileType = useMemo(() => {
+    return Query.parse(querySelection.expression).profileType();
+  }, [querySelection.expression]);
+
   const {loading: labelNamesLoading, result} = useLabelNames(queryClient, profileType.toString());
+  const {loading: selectedLabelNamesLoading, result: selectedLabelNamesResult} = useLabelNames(
+    queryClient,
+    selectedProfileType.toString()
+  );
 
   const labels = useMemo(() => {
     return result.response?.labelNames === undefined ? [] : result.response.labelNames;
   }, [result]);
 
-  const [sumBy, setSumBy, userSelectedSumBy] = useSumBy(
-    profileType,
-    labelNamesLoading,
-    result.response?.labelNames,
+  const selectedLabels = useMemo(() => {
+    return selectedLabelNamesResult.response?.labelNames === undefined
+      ? []
+      : selectedLabelNamesResult.response.labelNames;
+  }, [selectedLabelNamesResult]);
+
+  const [sumBy, setSumBy, {userSelectedSumBy, isLoading: isSumByLoading}] = useSumBy(
+    selectedProfileType,
+    selectedLabelNamesLoading,
+    selectedLabels,
     {
       urlParamKey: 'sum_by' + suffix,
     }
   );
 
-  const [sumBySelection, setSumBySelection] = useSumBy(
+  const [sumBySelection, setSumBySelection, {isLoading: isSumBySelectionLoading}] = useSumBy(
     profileType,
     labelNamesLoading,
-    result.response?.labelNames,
+    labels,
     {
       urlParamKey: 'sum_by_selection' + suffix,
       withURLUpdate: false,
@@ -143,8 +157,6 @@ const ProfileSelector = ({
     }
   );
 
-  const sumByLoading = labelNamesLoading;
-
   useEffect(() => {
     if (enforcedProfileName !== '') {
       const [q, changed] = Query.parse(querySelection.expression).setProfileName(
@@ -169,7 +181,7 @@ const ProfileSelector = ({
   const selectedProfileName = query.profileName();
 
   const setNewQueryExpression = (expr: string, updateTs = false): void => {
-    if (!sumByLoading) {
+    if (!isSumBySelectionLoading) {
       setSumBy(sumBySelection);
     }
     const query = enforcedProfileName !== '' ? enforcedProfileNameQuery() : Query.parse(expr);
@@ -345,13 +357,12 @@ const ProfileSelector = ({
               <ProfileMetricsGraph
                 queryClient={queryClient}
                 queryExpression={querySelection.expression}
-                dirtyQueryExpression={queryExpressionString}
                 from={querySelection.from}
                 to={querySelection.to}
                 profile={profileSelection}
                 comparing={comparing}
                 sumBy={sumBy}
-                sumByLoading={sumByLoading}
+                sumByLoading={isSumByLoading}
                 setTimeRange={(range: DateTimeRange) => {
                   const from = range.getFromMs();
                   const to = range.getToMs();

package/src/useGrpcQuery/index.ts

@@ -20,13 +20,14 @@ interface Props<IRes> {
     enabled?: boolean | undefined;
     staleTime?: number | undefined;
     retry?: number | boolean;
+    keepPreviousData?: boolean | undefined;
   };
 }
 
 const useGrpcQuery = <IRes>({
   key,
   queryFn,
-  options: {enabled = true, staleTime, retry} = {},
+  options: {enabled = true, staleTime, retry, keepPreviousData} = {},
 }: Props<IRes>): UseQueryResult<IRes> => {
   return useQuery<IRes>(
     key,
@@ -37,6 +38,7 @@ const useGrpcQuery = <IRes>({
       enabled,
       staleTime,
       retry,
+      keepPreviousData,
     }
   );
 };

package/src/useSumBy.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useCallback, useMemo} from 'react';
 
 import {useParcaContext, useURLState} from '@parca/components';
 import {ProfileType} from '@parca/parser';
@@ -54,7 +54,11 @@ export const useSumBy = (
     withURLUpdate?: boolean;
     defaultValue?: string[];
   } = {}
-): [string[], (labels: string[]) => void, string[] | undefined] => {
+): [
+  string[],
+  (labels: string[]) => void,
+  {userSelectedSumBy: string[] | undefined; isLoading: boolean}
+] => {
   const {navigateTo} = useParcaContext();
   const [userSelectedSumByParam, setUserSelectedSumByParam] = useURLState({
     param: urlParamKey,
@@ -102,22 +106,15 @@ export const useSumBy = (
     [setUserSelectedSumByParam]
   );
 
-  const [defaultSumBy, setDefaultSumBy] = useState<string[] | undefined>(
-    getDefaultSumBy(profileType, labels)
-  );
-
-  useEffect(() => {
-    if (labelNamesLoading) {
-      return;
-    }
-    setDefaultSumBy(getDefaultSumBy(profileType, labels));
-  }, [profileType, labels, labelNamesLoading]);
+  const defaultSumBy = useMemo(() => {
+    return getDefaultSumBy(profileType, labels);
+  }, [profileType, labels]);
 
   let sumBy = userSelectedSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
 
   if (profileType?.delta !== true) {
-    sumBy = [];
+    sumBy = DEFAULT_EMPTY_SUM_BY;
   }
 
-  return [sumBy, setUserSelectedSumBy, userSelectedSumBy];
+  return [sumBy, setUserSelectedSumBy, {userSelectedSumBy, isLoading: labelNamesLoading}];
 };