@parca/profile 0.16.460 → 0.16.461

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.461](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.460...@parca/profile@0.16.461) (2025-01-13)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.460](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.459...@parca/profile@0.16.460) (2025-01-09)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MatchersInput/index.d.ts

@@ -16,6 +16,14 @@ interface UseLabelNames {
     loading: boolean;
 }
 export declare const useLabelNames: (client: QueryServiceClient, profileType: string, start?: number, end?: number, match?: string[]) => UseLabelNames;
+interface UseLabelValues {
+    result: {
+        response: string[];
+        error?: Error;
+    };
+    loading: boolean;
+}
+export declare const useLabelValues: (client: QueryServiceClient, labelName: string, profileType: string) => UseLabelValues;
 declare const MatchersInput: ({ queryClient, setMatchersString, runQuery, currentQuery, profileType, }: MatchersInputProps) => JSX.Element;
 export default MatchersInput;
 //# sourceMappingURL=index.d.ts.map

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;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,UACJ,MAAM,EAAE,KACf,aAyBF,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,EAAgB,MAAM,eAAe,CAAC;AAE/F,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,UACJ,MAAM,EAAE,KACf,aAyBF,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,EAAE,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,WACjB,kBAAkB,aACf,MAAM,eACJ,MAAM,KAClB,cAsBF,CAAC;AAEF,QAAA,MAAM,aAAa,6EAMhB,kBAAkB,KAAG,GAAG,CAAC,OAkK3B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/MatchersInput/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } 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, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useGrpcMetadata } from '@parca/components';
@@ -43,30 +43,34 @@ export const useLabelNames = (client, profileType, start, end, match) => {
     });
     return { result: { response: data, error: error }, loading: isLoading };
 };
+export const useLabelValues = (client, labelName, profileType) => {
+    const metadata = useGrpcMetadata();
+    const { data, isLoading, error } = useGrpcQuery({
+        key: ['labelValues', labelName, profileType],
+        queryFn: async () => {
+            const request = { labelName, match: [], profileType };
+            const { response } = await client.values(request, { meta: metadata });
+            return sanitizeLabelValue(response.labelValues);
+        },
+        options: {
+            enabled: profileType !== undefined &&
+                profileType !== '' &&
+                labelName !== undefined &&
+                labelName !== '',
+            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);
     const [focusedInput, setFocusedInput] = useState(false);
-    const [labelValuesLoading, setLabelValuesLoading] = useState(false);
     const [lastCompleted, setLastCompleted] = useState(new Suggestion('', '', ''));
-    const [labelValues, setLabelValues] = useState(null);
     const [currentLabelName, setCurrentLabelName] = useState(null);
-    const metadata = useGrpcMetadata();
     const { loading: labelNamesLoading, result } = useLabelNames(queryClient, profileType);
     const { response: labelNamesResponse, error: labelNamesError } = result;
-    useEffect(() => {
-        if (currentLabelName !== null) {
-            const call = queryClient.values({ labelName: currentLabelName, match: [], profileType }, { meta: metadata });
-            setLabelValuesLoading(true);
-            call.response
-                .then(response => {
-                // replace single `\` in the `labelValues` string with doubles `\\` if available.
-                const newValues = sanitizeLabelValue(response.labelValues);
-                return setLabelValues(newValues);
-            })
-                .catch(() => setLabelValues(null))
-                .finally(() => setLabelValuesLoading(false));
-        }
-    }, [currentLabelName, metadata, profileType, queryClient]);
+    const { loading: labelValuesLoading, result: { response: labelValues }, } = useLabelValues(queryClient, currentLabelName ?? '', profileType);
     const labelNames = useMemo(() => {
         return (labelNamesError === undefined || labelNamesError == null) &&
             labelNamesResponse !== undefined &&

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAMpC,UAAU,KAAK;IACb,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;IACpB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAClD;AAgED,QAAA,MAAM,cAAc,oFAOjB,KAAK,KAAG,GAAG,CAAC,OAiQd,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAMpC,UAAU,KAAK;IACb,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;IACpB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAClD;AAgED,QAAA,MAAM,cAAc,oFAOjB,KAAK,KAAG,GAAG,CAAC,OA8Qd,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/SimpleMatchers/index.js

@@ -13,6 +13,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
+import { useQueryClient } from '@tanstack/react-query';
 import cx from 'classnames';
 import { useGrpcMetadata } from '@parca/components';
 import { sanitizeLabelValue } from '@parca/utilities';
@@ -60,6 +61,7 @@ currentQuery, profileType, queryBrowserRef, }) => {
     const [queryRows, setQueryRows] = useState([
         { labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false },
     ]);
+    const reactQueryClient = useQueryClient();
     const metadata = useGrpcMetadata();
     const { loading: labelNamesLoading, result } = useLabelNames(queryClient, profileType);
     const { response: labelNamesResponse, error: labelNamesError } = result;
@@ -75,16 +77,24 @@ currentQuery, profileType, queryBrowserRef, }) => {
         return matchers.map(matcher => matcher.key);
     }, [currentQuery]);
     const fetchLabelValues = useCallback(async (labelName) => {
+        if (labelName == null || labelName === '' || profileType == null || profileType === '') {
+            return [];
+        }
         try {
-            const response = await queryClient.values({ labelName, match: [], profileType }, { meta: metadata }).response;
-            const sanitizedValues = sanitizeLabelValue(response.labelValues);
-            return sanitizedValues;
+            const values = await reactQueryClient.fetchQuery([labelName, profileType], async () => {
+                const response = await queryClient.values({ labelName, match: [], profileType }, { meta: metadata }).response;
+                const sanitizedValues = sanitizeLabelValue(response.labelValues);
+                return sanitizedValues;
+            }, {
+                staleTime: 1000 * 60 * 5, // 5 minutes
+            });
+            return values;
         }
         catch (error) {
             console.error('Error fetching label values:', error);
             return [];
         }
-    }, [queryClient, metadata, profileType]);
+    }, [queryClient, metadata, profileType, reactQueryClient]);
     const updateMatchersString = useCallback((rows) => {
         const matcherString = rows
             .filter(row => row.labelName.length > 0 && row.labelValue)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.460",
+  "version": "0.16.461",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -74,5 +74,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "801d740c8340a5ca9e9ed638c24c8c805b50c94b"
+  "gitHead": "e004a5ef188bda51bfef2f4a4d2b488b3990d533"
 }

package/src/MatchersInput/index.tsx

@@ -11,12 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useMemo, useRef, useState} from 'react';
 
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 
-import {LabelsRequest, LabelsResponse, QueryServiceClient} from '@parca/client';
+import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
@@ -75,6 +75,42 @@ export const useLabelNames = (
   return {result: {response: data, error: error as Error}, loading: isLoading};
 };
 
+interface UseLabelValues {
+  result: {
+    response: string[];
+    error?: Error;
+  };
+  loading: boolean;
+}
+
+export const useLabelValues = (
+  client: QueryServiceClient,
+  labelName: string,
+  profileType: string
+): UseLabelValues => {
+  const metadata = useGrpcMetadata();
+
+  const {data, isLoading, error} = useGrpcQuery<string[]>({
+    key: ['labelValues', labelName, profileType],
+    queryFn: async () => {
+      const request: ValuesRequest = {labelName, match: [], profileType};
+      const {response} = await client.values(request, {meta: metadata});
+      return sanitizeLabelValue(response.labelValues);
+    },
+    options: {
+      enabled:
+        profileType !== undefined &&
+        profileType !== '' &&
+        labelName !== undefined &&
+        labelName !== '',
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      keepPreviousData: false,
+    },
+  });
+
+  return {result: {response: data ?? [], error: error as Error}, loading: isLoading};
+};
+
 const MatchersInput = ({
   queryClient,
   setMatchersString,
@@ -84,34 +120,16 @@ const MatchersInput = ({
 }: MatchersInputProps): JSX.Element => {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const [focusedInput, setFocusedInput] = useState(false);
-  const [labelValuesLoading, setLabelValuesLoading] = useState(false);
   const [lastCompleted, setLastCompleted] = useState<Suggestion>(new Suggestion('', '', ''));
-  const [labelValues, setLabelValues] = useState<string[] | null>(null);
   const [currentLabelName, setCurrentLabelName] = useState<string | null>(null);
-  const metadata = useGrpcMetadata();
 
   const {loading: labelNamesLoading, result} = useLabelNames(queryClient, profileType);
   const {response: labelNamesResponse, error: labelNamesError} = result;
 
-  useEffect(() => {
-    if (currentLabelName !== null) {
-      const call = queryClient.values(
-        {labelName: currentLabelName, match: [], profileType},
-        {meta: metadata}
-      );
-      setLabelValuesLoading(true);
-
-      call.response
-        .then(response => {
-          // replace single `\` in the `labelValues` string with doubles `\\` if available.
-          const newValues = sanitizeLabelValue(response.labelValues);
-
-          return setLabelValues(newValues);
-        })
-        .catch(() => setLabelValues(null))
-        .finally(() => setLabelValuesLoading(false));
-    }
-  }, [currentLabelName, metadata, profileType, queryClient]);
+  const {
+    loading: labelValuesLoading,
+    result: {response: labelValues},
+  } = useLabelValues(queryClient, currentLabelName ?? '', profileType);
 
   const labelNames = useMemo(() => {
     return (labelNamesError === undefined || labelNamesError == null) &&

package/src/SimpleMatchers/index.tsx

@@ -14,6 +14,7 @@
 import {useCallback, useEffect, useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
+import {useQueryClient} from '@tanstack/react-query';
 import cx from 'classnames';
 
 import {QueryServiceClient} from '@parca/client';
@@ -106,6 +107,7 @@ const SimpleMatchers = ({
   const [queryRows, setQueryRows] = useState<QueryRow[]>([
     {labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false},
   ]);
+  const reactQueryClient = useQueryClient();
   const metadata = useGrpcMetadata();
 
   const {loading: labelNamesLoading, result} = useLabelNames(queryClient, profileType);
@@ -129,19 +131,31 @@ const SimpleMatchers = ({
 
   const fetchLabelValues = useCallback(
     async (labelName: string): Promise<string[]> => {
+      if (labelName == null || labelName === '' || profileType == null || profileType === '') {
+        return [];
+      }
       try {
-        const response = await queryClient.values(
-          {labelName, match: [], profileType},
-          {meta: metadata}
-        ).response;
-        const sanitizedValues = sanitizeLabelValue(response.labelValues);
-        return sanitizedValues;
+        const values = await reactQueryClient.fetchQuery(
+          [labelName, profileType],
+          async () => {
+            const response = await queryClient.values(
+              {labelName, match: [], profileType},
+              {meta: metadata}
+            ).response;
+            const sanitizedValues = sanitizeLabelValue(response.labelValues);
+            return sanitizedValues;
+          },
+          {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+          }
+        );
+        return values;
       } catch (error) {
         console.error('Error fetching label values:', error);
         return [];
       }
     },
-    [queryClient, metadata, profileType]
+    [queryClient, metadata, profileType, reactQueryClient]
   );
 
   const updateMatchersString = useCallback(