@parca/profile 0.16.459 → 0.16.461

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.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
+
 ## [0.16.459](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.458...@parca/profile@0.16.459) (2025-01-08)
 
 **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/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,oBAA2B,KAAK,KAAG,GAAG,CAAC,OAgE5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,oBAA2B,KAAK,KAAG,GAAG,CAAC,OAmE5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -50,7 +50,7 @@ const ColorStackLegend = ({ compareMode = false }) => {
                         return;
                     }
                     setSearchString(feature);
-                }, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm", children: feature })] }), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
+                }, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mr-1 inline-block h-4 w-4 rounded-[4px]", style: { backgroundColor: color } }), _jsx("span", { className: "text-sm", children: feature })] }), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
                             setSearchString('');
                             e.stopPropagation();
                         } })) : null] }, feature));

package/dist/ProfileView/components/ColorStackLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,uCAA8C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OAmGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorStackLegend.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/components/ColorStackLegend.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,uCAA8C,KAAK,KAAG,KAAK,CAAC,GAAG,CAAC,OAsGrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/ProfileView/components/ColorStackLegend.js

@@ -58,7 +58,7 @@ const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
             const filteringAllowed = feature !== EVERYTHING_ELSE;
             const isHighlighted = currentSearchString !== undefined ? currentSearchString.includes(feature) : false;
             return (_jsxs("div", { className: cx('flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1', {
-                    'cursor-pointer': filteringAllowed,
+                    'cursor-pointer': filteringAllowed && colorBy === 'binary',
                     'bg-gray-200 dark:bg-gray-800': isHighlighted,
                 }), onClick: () => {
                     if (!filteringAllowed || isHighlighted || colorBy !== 'binary') {
@@ -67,7 +67,7 @@ const ColorStackLegend = ({ mappings, compareMode = false, loading }) => {
                     // Check if the current search string is defined and an array
                     const updatedSearchString = [...currentSearchString, feature]; // If array, append the feature
                     setSearchString(updatedSearchString);
-                }, children: [_jsxs("div", { className: "flex w-11/12 items-center justify-start", children: [_jsx("div", { className: "flex w-5 items-center", children: _jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }) }), _jsx("div", { className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal", children: feature })] }), _jsx("div", { className: "flex w-1/12 justify-end", children: isHighlighted && (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
+                }, children: [_jsxs("div", { className: "flex w-11/12 items-center justify-start", children: [_jsx("div", { className: "flex w-5 items-center", children: _jsx("div", { className: "mr-1 inline-block h-4 w-4 rounded-[4px]", style: { backgroundColor: color } }) }), _jsx("div", { className: "shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal", children: feature })] }), _jsx("div", { className: "flex w-1/12 justify-end", children: isHighlighted && (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: e => {
                                 // remove the current feature from the search string array of strings
                                 setSearchString(currentSearchString.filter((f) => f !== feature));
                                 e.stopPropagation();

package/dist/ProfileView/hooks/useProfileMetadata.js

@@ -19,7 +19,7 @@ export const useProfileMetadata = ({ flamegraphArrow, metadataMappingFiles, meta
     }, [flamegraphArrow]);
     const mappingsList = useMappingList(metadataMappingFiles);
     const filenamesList = useFilenamesList(table);
-    const colorMappings = colorBy === 'binary' ? mappingsList : filenamesList;
+    const colorMappings = colorBy === 'binary' || colorBy === '' ? mappingsList : filenamesList;
     return {
         table,
         mappingsList,

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgQ7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuQ7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/SimpleMatchers/Select.js

@@ -126,7 +126,12 @@ const CustomSelect = ({ items, selectedKey, onSelection, placeholder = 'Select a
             setIsOpen(false);
         }
     };
-    return (_jsxs("div", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, onClick: onButtonClick, children: [_jsxs("div", { id: id, onClick: () => !disabled && setIsOpen(!isOpen), className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), tabIndex: 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis whitespace-nowrap'), children: renderSelection(selection) }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }), isOpen && (_jsxs("div", { ref: optionsRef, className: cx('absolute z-50 mt-1 pt-0 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm', { [optionsClassname]: optionsClassname.length > 0 }), role: "listbox", children: [searchable && (_jsx("div", { className: "sticky z-10 top-[-5px] w-auto max-w-full", children: _jsx("div", { className: "flex flex-col", children: editable ? (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: searchInputRef, className: "w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]", placeholder: "Type a RegEx to add", value: searchTerm, onChange: e => setSearchTerm(e.target.value) }), editable && searchTerm.length > 0 && (_jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx(Button, { variant: "primary", className: "w-full h-[30px]", onClick: () => {
+    const moveCaretToEnd = (e) => {
+        const value = e.target.value;
+        e.target.value = '';
+        e.target.value = value;
+    };
+    return (_jsxs("div", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, onClick: onButtonClick, children: [_jsxs("div", { id: id, onClick: () => !disabled && setIsOpen(!isOpen), className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), tabIndex: 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis whitespace-nowrap'), children: renderSelection(selection) }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }), isOpen && (_jsxs("div", { ref: optionsRef, className: cx('absolute z-50 mt-1 pt-0 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm', { [optionsClassname]: optionsClassname.length > 0 }), role: "listbox", children: [searchable && (_jsx("div", { className: "sticky z-10 top-[-5px] w-auto max-w-full", children: _jsx("div", { className: "flex flex-col", children: editable ? (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: searchInputRef, className: "w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]", placeholder: "Type a RegEx to add", value: searchTerm, onChange: e => setSearchTerm(e.target.value), onFocus: e => moveCaretToEnd(e) }), editable && searchTerm.length > 0 && (_jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx(Button, { variant: "primary", className: "w-full h-[30px]", onClick: () => {
                                                 onSelection(searchTerm);
                                                 setIsOpen(false);
                                             }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : (filteredItems.map((item, index) => (_jsxs("div", { ref: el => {

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/dist/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAsB/E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAEL,OAAO,EACP,QAAQ,EAgBT,MAAM,mBAAmB,CAAC;AAe3B,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,UAAU,QAAS,GAAG,KAAG,GAAG,IAAI,QAE5C,CAAC;AAIF,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAkID,eAAO,MAAM,KAAK,wCA4chB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAuB/E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAEL,OAAO,EACP,QAAQ,EAgBT,MAAM,mBAAmB,CAAC;AAe3B,MAAM,MAAM,GAAG,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErC,eAAO,MAAM,UAAU,QAAS,GAAG,KAAG,GAAG,IAAI,QAE5C,CAAC;AAIF,UAAU,UAAU;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAkID,eAAO,MAAM,KAAK,wCAydhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/Table/index.js

@@ -17,9 +17,10 @@ import { createColumnHelper, } from '@tanstack/table-core';
 import { tableFromIPC, vectorFromArray } from 'apache-arrow';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
+import { Tooltip } from 'react-tooltip';
 import { Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
 import { useCurrentColorProfile } from '@parca/hooks';
-import { isSearchMatch, valueFormatter } from '@parca/utilities';
+import { getLastItem, isSearchMatch, valueFormatter } from '@parca/utilities';
 import { getFilenameColors, getMappingColors } from '../ProfileIcicleGraph/IcicleGraphArrow/';
 import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
 import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
@@ -148,12 +149,12 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
     unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
     const columns = useMemo(() => {
         return [
-            columnHelper.accessor('color', {
+            columnHelper.accessor('colorProperty', {
                 id: 'color',
                 header: '',
                 cell: info => {
                     const color = info.getValue();
-                    return _jsx("div", { className: "w-4 h-4 rounded-[4px]", style: { backgroundColor: color } });
+                    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-4 h-4 rounded-[4px]", style: { backgroundColor: color.color }, "data-tooltip-id": "table-color-tooltip", "data-tooltip-content": getLastItem(color.mappingFile) }), _jsx(Tooltip, { id: "table-color-tooltip" })] }));
                 },
                 size: 10,
             }),
@@ -390,7 +391,10 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
             const mappingFile = mappingFileColumn?.get(i) ?? '';
             return {
                 id: i,
-                color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+                colorProperty: {
+                    color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
+                    mappingFile,
+                },
                 name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
                 flat,
                 flatDiff,

package/dist/Table/utils/functions.d.ts

@@ -3,7 +3,10 @@ import { Vector } from 'apache-arrow';
 import { colorByColors } from '../../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
 export interface DataRow {
     id: number;
-    color: string;
+    colorProperty: {
+        color: string;
+        mappingFile: string;
+    };
     name: string;
     flat: bigint;
     flatDiff: bigint;

package/dist/Table/utils/functions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/Table/utils/functions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/Table/utils/functions.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.459",
+  "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": "e92cda4da962e2d09da37cf973d419b7ca839562"
+  "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/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx

@@ -71,7 +71,10 @@ const ColorStackLegend = ({compareMode = false}: Props): JSX.Element => {
             }}
           >
             <div className="flex items-center">
-              <div className="mr-1 inline-block h-4 w-4" style={{backgroundColor: color}} />
+              <div
+                className="mr-1 inline-block h-4 w-4 rounded-[4px]"
+                style={{backgroundColor: color}}
+              />
               <span className="text-sm">{feature}</span>
             </div>
             {isHighlighted ? (

package/src/ProfileView/components/ColorStackLegend.tsx

@@ -88,7 +88,7 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
             className={cx(
               'flex-no-wrap mb-1 flex w-[19.25%] items-center justify-between text-ellipsis p-1',
               {
-                'cursor-pointer': filteringAllowed,
+                'cursor-pointer': filteringAllowed && colorBy === 'binary',
                 'bg-gray-200 dark:bg-gray-800': isHighlighted,
               }
             )}
@@ -105,7 +105,10 @@ const ColorStackLegend = ({mappings, compareMode = false, loading}: Props): Reac
           >
             <div className="flex w-11/12 items-center justify-start">
               <div className="flex w-5 items-center">
-                <div className="mr-1 inline-block h-4 w-4" style={{backgroundColor: color}} />
+                <div
+                  className="mr-1 inline-block h-4 w-4 rounded-[4px]"
+                  style={{backgroundColor: color}}
+                />
               </div>
               <div className="shrink overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:whitespace-normal">
                 {feature}

package/src/ProfileView/hooks/useProfileMetadata.ts

@@ -47,7 +47,7 @@ export const useProfileMetadata = ({
   const mappingsList = useMappingList(metadataMappingFiles);
   const filenamesList = useFilenamesList(table);
 
-  const colorMappings = colorBy === 'binary' ? mappingsList : filenamesList;
+  const colorMappings = colorBy === 'binary' || colorBy === '' ? mappingsList : filenamesList;
 
   return {
     table,

package/src/SimpleMatchers/Select.tsx

@@ -183,6 +183,12 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
     }
   };
 
+  const moveCaretToEnd = (e: React.FocusEvent<HTMLTextAreaElement>): void => {
+    const value = e.target.value;
+    e.target.value = '';
+    e.target.value = value;
+  };
+
   return (
     <div ref={containerRef} className="relative" onKeyDown={handleKeyDown} onClick={onButtonClick}>
       <div
@@ -232,6 +238,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
                       placeholder="Type a RegEx to add"
                       value={searchTerm}
                       onChange={e => setSearchTerm(e.target.value)}
+                      onFocus={e => moveCaretToEnd(e)}
                     />
                     {editable && searchTerm.length > 0 && (
                       <div className="p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">

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(

package/src/Table/index.tsx

@@ -24,6 +24,7 @@ import {
 import {Int64, Vector, tableFromIPC, vectorFromArray} from 'apache-arrow';
 import cx from 'classnames';
 import {AnimatePresence, motion} from 'framer-motion';
+import {Tooltip} from 'react-tooltip';
 
 import {
   Table as TableComponent,
@@ -34,7 +35,7 @@ import {
 import {type RowRendererProps} from '@parca/components/dist/Table';
 import {useCurrentColorProfile} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
-import {isSearchMatch, valueFormatter} from '@parca/utilities';
+import {getLastItem, isSearchMatch, valueFormatter} from '@parca/utilities';
 
 import {getFilenameColors, getMappingColors} from '../ProfileIcicleGraph/IcicleGraphArrow/';
 import {colorByColors} from '../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
@@ -303,12 +304,22 @@ export const Table = React.memo(function Table({
 
   const columns = useMemo<Array<ColumnDef<Row>>>(() => {
     return [
-      columnHelper.accessor('color', {
+      columnHelper.accessor('colorProperty', {
         id: 'color',
         header: '',
         cell: info => {
-          const color = info.getValue() as string;
-          return <div className="w-4 h-4 rounded-[4px]" style={{backgroundColor: color}} />;
+          const color = info.getValue() as {color: string; mappingFile: string};
+          return (
+            <>
+              <div
+                className="w-4 h-4 rounded-[4px]"
+                style={{backgroundColor: color.color}}
+                data-tooltip-id="table-color-tooltip"
+                data-tooltip-content={getLastItem(color.mappingFile)}
+              />
+              <Tooltip id="table-color-tooltip" />
+            </>
+          );
         },
         size: 10,
       }),
@@ -577,13 +588,16 @@ export const Table = React.memo(function Table({
 
       return {
         id: i,
-        color: getRowColor(
-          colorByColors,
-          mappingFileColumn,
-          i,
-          functionFileNameColumn,
-          colorBy as string
-        ),
+        colorProperty: {
+          color: getRowColor(
+            colorByColors,
+            mappingFileColumn,
+            i,
+            functionFileNameColumn,
+            colorBy as string
+          ),
+          mappingFile,
+        },
         name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
         flat,
         flatDiff,

package/src/Table/utils/functions.ts

@@ -21,7 +21,10 @@ import {hexifyAddress} from '../../utils';
 
 export interface DataRow {
   id: number;
-  color: string;
+  colorProperty: {
+    color: string;
+    mappingFile: string;
+  };
   name: string;
   flat: bigint;
   flatDiff: bigint;