@parca/profile 0.19.57 → 0.19.59

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.19.59](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.58...@parca/profile@0.19.59) (2025-09-30)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.19.58](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.57...@parca/profile@0.19.58) (2025-09-26)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.57](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.56...@parca/profile@0.19.57) (2025-09-25)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MatchersInput/index.js

@@ -26,7 +26,7 @@ export const useLabelNames = (client, profileType, start, end, match) => {
     const metadata = useGrpcMetadata();
     const { data, isLoading, error } = useGrpcQuery({
         key: ['labelNames', profileType, match?.join(','), start, end],
-        queryFn: async () => {
+        queryFn: async (signal) => {
             const request = { match: match !== undefined ? match : [] };
             if (start !== undefined && end !== undefined) {
                 request.start = millisToProtoTimestamp(start);
@@ -35,7 +35,7 @@ export const useLabelNames = (client, profileType, start, end, match) => {
             if (profileType !== undefined) {
                 request.profileType = profileType;
             }
-            const { response } = await client.labels(request, { meta: metadata });
+            const { response } = await client.labels(request, { meta: metadata, abort: signal });
             return response;
         },
         options: {
@@ -50,13 +50,13 @@ export const useLabelValues = (client, labelName, profileType, start, end) => {
     const metadata = useGrpcMetadata();
     const { data, isLoading, error } = useGrpcQuery({
         key: ['labelValues', labelName, profileType, start, end],
-        queryFn: async () => {
+        queryFn: async (signal) => {
             const request = { labelName, match: [], profileType };
             if (start !== undefined && end !== undefined) {
                 request.start = millisToProtoTimestamp(start);
                 request.end = millisToProtoTimestamp(end);
             }
-            const { response } = await client.values(request, { meta: metadata });
+            const { response } = await client.values(request, { meta: metadata, abort: signal });
             return sanitizeLabelValue(response.labelValues);
         },
         options: {

package/dist/ProfileMetricsGraph/hooks/useQueryRange.js

@@ -42,7 +42,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],
-        queryFn: async () => {
+        queryFn: async (signal) => {
             const stepDuration = getStepDuration(start, end, stepCount);
             const { response } = await client.queryRange({
                 query: queryExpression,
@@ -51,7 +51,7 @@ export const useQueryRange = (client, queryExpression, start, end, sumBy, skip =
                 step: Duration.create(stepDuration),
                 limit: 0,
                 sumBy,
-            }, { meta: metadata });
+            }, { meta: metadata, abort: signal });
             return response;
         },
         options: {

package/dist/ProfileView/components/InvertCallStack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/InvertCallStack/index.tsx"],"names":[],"mappings":"AAmBA,QAAA,MAAM,eAAe,QAAO,GAAG,CAAC,OAyB/B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/InvertCallStack/index.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,eAAe,QAAO,GAAG,CAAC,OA0B/B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileView/components/InvertCallStack/index.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { Icon } from '@iconify/react';
 import { Button, useURLState } from '@parca/components';
+import { TEST_IDS, testId } from '@parca/test-utils';
 import { useResetFlameGraphState } from '../../hooks/useResetFlameGraphState';
 const InvertCallStack = () => {
     const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
@@ -22,6 +23,6 @@ const InvertCallStack = () => {
         setInvertStack(value ? 'true' : '');
         resetFlameGraphState();
     };
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { className: "text-sm", children: "\u00A0" }), _jsxs(Button, { variant: "neutral", className: "flex items-center gap-2 whitespace-nowrap", onClick: () => handleSetInvert(!isInvert), id: "h-invert-call-stack", children: [_jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', className: "h-4 w-4" }), isInvert ? 'Original' : 'Invert', " Call Stack"] })] }));
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("label", { className: "text-sm", children: "\u00A0" }), _jsxs(Button, { variant: "neutral", className: "flex items-center gap-2 whitespace-nowrap", onClick: () => handleSetInvert(!isInvert), id: "h-invert-call-stack", ...testId(TEST_IDS.INVERT_CALL_STACK_BUTTON), children: [_jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', className: "h-4 w-4" }), isInvert ? 'Original' : 'Invert', " Call Stack"] })] }));
 };
 export default InvertCallStack;

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

@@ -1 +1 @@
-{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAG/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CA0EvC,CAAC"}
+{"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,+CAA+C,CAAC;AAG/E,eAAO,MAAM,qBAAqB,QAAO;IACvC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CA4EvC,CAAC"}

package/dist/ProfileView/hooks/useVisualizationState.js

@@ -49,7 +49,8 @@ export const useVisualizationState = () => {
     }, [groupBy, setGroupBy, levelsOfProfiling, resetFlameGraphState]);
     const setGroupByLabels = useCallback((labels) => {
         setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
-    }, [groupBy, setGroupBy]);
+        resetFlameGraphState();
+    }, [groupBy, setGroupBy, resetFlameGraphState]);
     const resetSandwichFunctionName = useCallback(() => {
         setSandwichFunctionName(undefined);
     }, [setSandwichFunctionName]);

package/dist/useGrpcQuery/index.d.ts

@@ -1,7 +1,7 @@
 import { type UseQueryResult } from '@tanstack/react-query';
 interface Props<IRes> {
     key: unknown[];
-    queryFn: () => Promise<IRes>;
+    queryFn: (signal?: AbortSignal) => Promise<IRes>;
     options?: {
         enabled?: boolean | undefined;
         staleTime?: number | undefined;

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;QACzB,gBAAgB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;KACxC,CAAC;CACH;AAED,QAAA,MAAM,YAAY,GAAI,IAAI,EAAE,6EAIzB,KAAK,CAAC,IAAI,CAAC,KAAG,cAAc,CAAC,IAAI,CAanC,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,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,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,EAAE,6EAIzB,KAAK,CAAC,IAAI,CAAC,KAAG,cAAc,CAAC,IAAI,CAanC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/useGrpcQuery/index.js

@@ -12,8 +12,8 @@
 // limitations under the License.
 import { useQuery } from '@tanstack/react-query';
 const useGrpcQuery = ({ key, queryFn, options: { enabled = true, staleTime, retry, keepPreviousData } = {}, }) => {
-    return useQuery(key, async () => {
-        return await queryFn();
+    return useQuery(key, async ({ signal }) => {
+        return await queryFn(signal);
     }, {
         enabled,
         staleTime,

package/dist/useQuery.js

@@ -33,7 +33,7 @@ export const useQuery = (client, profileSource, reportType, options) => {
             options?.sandwichByFunction ?? '',
             protoFiltersKey,
         ],
-        queryFn: async () => {
+        queryFn: async (signal) => {
             const req = profileSource.QueryRequest();
             req.reportType = reportType;
             req.nodeTrimThreshold = options?.nodeTrimThreshold;
@@ -56,7 +56,7 @@ export const useQuery = (client, profileSource, reportType, options) => {
                 req.sandwichByFunction = options.sandwichByFunction;
             }
             try {
-                const { response } = await client.query(req, { meta: metadata });
+                const { response } = await client.query(req, { meta: metadata, abort: signal });
                 return response;
             }
             catch (e) {

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@parca/profile",
-  "version": "0.19.57",
+  "version": "0.19.59",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.17.5",
-    "@parca/components": "0.16.373",
+    "@parca/components": "0.16.374",
     "@parca/dynamicsize": "0.16.67",
     "@parca/hooks": "0.0.103",
     "@parca/icons": "0.16.74",
     "@parca/parser": "0.16.81",
     "@parca/store": "0.16.187",
-    "@parca/test-utils": "0.0.14",
+    "@parca/test-utils": "0.0.15",
     "@parca/utilities": "0.0.110",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
@@ -79,5 +79,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "9c57759acc933755388e5dd63da750ba417c1b2e"
+  "gitHead": "b3966502b60cce3330a8a3ae0ba7b4e20d4d0ea3"
 }

package/src/MatchersInput/index.tsx

@@ -59,7 +59,7 @@ export const useLabelNames = (
 
   const {data, isLoading, error} = useGrpcQuery<LabelsResponse>({
     key: ['labelNames', profileType, match?.join(','), start, end],
-    queryFn: async () => {
+    queryFn: async signal => {
       const request: LabelsRequest = {match: match !== undefined ? match : []};
       if (start !== undefined && end !== undefined) {
         request.start = millisToProtoTimestamp(start);
@@ -68,7 +68,7 @@ export const useLabelNames = (
       if (profileType !== undefined) {
         request.profileType = profileType;
       }
-      const {response} = await client.labels(request, {meta: metadata});
+      const {response} = await client.labels(request, {meta: metadata, abort: signal});
       return response;
     },
     options: {
@@ -100,13 +100,13 @@ export const useLabelValues = (
 
   const {data, isLoading, error} = useGrpcQuery<string[]>({
     key: ['labelValues', labelName, profileType, start, end],
-    queryFn: async () => {
+    queryFn: async signal => {
       const request: ValuesRequest = {labelName, match: [], profileType};
       if (start !== undefined && end !== undefined) {
         request.start = millisToProtoTimestamp(start);
         request.end = millisToProtoTimestamp(end);
       }
-      const {response} = await client.values(request, {meta: metadata});
+      const {response} = await client.values(request, {meta: metadata, abort: signal});
       return sanitizeLabelValue(response.labelValues);
     },
     options: {

package/src/ProfileMetricsGraph/hooks/useQueryRange.ts

@@ -68,7 +68,7 @@ export const useQueryRange = (
 
   const {data, isLoading, error} = useGrpcQuery<QueryRangeResponse | undefined>({
     key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
-    queryFn: async () => {
+    queryFn: async signal => {
       const stepDuration = getStepDuration(start, end, stepCount);
       const {response} = await client.queryRange(
         {
@@ -79,7 +79,7 @@ export const useQueryRange = (
           limit: 0,
           sumBy,
         },
-        {meta: metadata}
+        {meta: metadata, abort: signal}
       );
       return response;
     },

package/src/ProfileView/components/InvertCallStack/index.tsx

@@ -14,6 +14,7 @@
 import {Icon} from '@iconify/react';
 
 import {Button, useURLState} from '@parca/components';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {useResetFlameGraphState} from '../../hooks/useResetFlameGraphState';
 
@@ -36,6 +37,7 @@ const InvertCallStack = (): JSX.Element => {
         className="flex items-center gap-2 whitespace-nowrap"
         onClick={() => handleSetInvert(!isInvert)}
         id="h-invert-call-stack"
+        {...testId(TEST_IDS.INVERT_CALL_STACK_BUTTON)}
       >
         <Icon icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'} className="h-4 w-4" />
         {isInvert ? 'Original' : 'Invert'} Call Stack

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -89,8 +89,10 @@ export const useVisualizationState = (): {
   const setGroupByLabels = useCallback(
     (labels: string[]): void => {
       setGroupBy(groupBy.filter(l => !l.startsWith(`${FIELD_LABELS}.`)).concat(labels));
+
+      resetFlameGraphState();
     },
-    [groupBy, setGroupBy]
+    [groupBy, setGroupBy, resetFlameGraphState]
   );
 
   const resetSandwichFunctionName = useCallback((): void => {

package/src/useGrpcQuery/index.ts

@@ -15,7 +15,7 @@ import {useQuery, type UseQueryResult} from '@tanstack/react-query';
 
 interface Props<IRes> {
   key: unknown[];
-  queryFn: () => Promise<IRes>;
+  queryFn: (signal?: AbortSignal) => Promise<IRes>;
   options?: {
     enabled?: boolean | undefined;
     staleTime?: number | undefined;
@@ -31,8 +31,8 @@ const useGrpcQuery = <IRes>({
 }: Props<IRes>): UseQueryResult<IRes> => {
   return useQuery<IRes>(
     key,
-    async () => {
-      return await queryFn();
+    async ({signal}) => {
+      return await queryFn(signal);
     },
     {
       enabled,

package/src/useQuery.tsx

@@ -66,7 +66,7 @@ export const useQuery = (
       options?.sandwichByFunction ?? '',
       protoFiltersKey,
     ],
-    queryFn: async () => {
+    queryFn: async signal => {
       const req = profileSource.QueryRequest();
       req.reportType = reportType;
       req.nodeTrimThreshold = options?.nodeTrimThreshold;
@@ -91,7 +91,7 @@ export const useQuery = (
       }
 
       try {
-        const {response} = await client.query(req, {meta: metadata});
+        const {response} = await client.query(req, {meta: metadata, abort: signal});
         return response;
       } catch (e) {
         if (options?.sourceOnly === true) {