@parca/profile 0.16.467 → 0.16.469

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.469](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.468...@parca/profile@0.16.469) (2025-02-10)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.468](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.467...@parca/profile@0.16.468) (2025-02-04)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.467](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.466...@parca/profile@0.16.467) (2025-01-22)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -18,7 +18,8 @@ interface Props {
     focusedInput: boolean;
     isLabelNamesLoading: boolean;
     isLabelValuesLoading: boolean;
+    shouldTrimPrefix: boolean;
 }
-declare const SuggestionsList: ({ suggestions, applySuggestion, inputRef, runQuery, focusedInput, isLabelNamesLoading, isLabelValuesLoading, }: Props) => JSX.Element;
+declare const SuggestionsList: ({ suggestions, applySuggestion, inputRef, runQuery, focusedInput, isLabelNamesLoading, isLabelValuesLoading, shouldTrimPrefix, }: Props) => JSX.Element;
 export default SuggestionsList;
 //# sourceMappingURL=SuggestionsList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SuggestionsList.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/SuggestionsList.tsx"],"names":[],"mappings":"AAsBA,qBAAa,UAAU;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;gBAEF,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAK3D;AAED,qBAAa,WAAW;IACtB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;;CAO3B;AAED,UAAU,KAAK;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAQD,QAAA,MAAM,eAAe,mHAQlB,KAAK,KAAG,GAAG,CAAC,OA6Nd,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SuggestionsList.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/SuggestionsList.tsx"],"names":[],"mappings":"AAsBA,qBAAa,UAAU;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;gBAEF,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAK3D;AAED,qBAAa,WAAW;IACtB,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;;CAO3B;AAED,UAAU,KAAK;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAaD,QAAA,MAAM,eAAe,qIASlB,KAAK,KAAG,GAAG,CAAC,OA6Nd,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/MatchersInput/SuggestionsList.js

@@ -34,7 +34,11 @@ const LoadingSpinner = () => {
     const { loader: Spinner } = useParcaContext();
     return _jsx("div", { className: "pt-2 pb-4", children: Spinner });
 };
-const SuggestionsList = ({ suggestions, applySuggestion, inputRef, runQuery, focusedInput, isLabelNamesLoading, isLabelValuesLoading, }) => {
+const transformLabelsForSuggestions = (labelNames, shouldTrimPrefix = false) => {
+    const trimmedLabel = shouldTrimPrefix ? labelNames.split('.').pop() ?? labelNames : labelNames;
+    return trimmedLabel;
+};
+const SuggestionsList = ({ suggestions, applySuggestion, inputRef, runQuery, focusedInput, isLabelNamesLoading, isLabelValuesLoading, shouldTrimPrefix = false, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const { styles, attributes } = usePopper(inputRef, popperElement, {
         placement: 'bottom-start',
@@ -132,7 +136,7 @@ const SuggestionsList = ({ suggestions, applySuggestion, inputRef, runQuery, foc
             inputRef.removeEventListener('keypress', handleKeyPress);
         };
     }, [inputRef, highlightedSuggestionIndex, suggestions, handleKeyPress, handleKeyDown]);
-    return (_jsx(_Fragment, { children: suggestionsLength > 0 && (_jsx("div", { ref: setPopperElement, style: { ...styles.popper, marginLeft: 0 }, ...attributes.popper, className: "z-50", children: _jsx(Transition, { show: focusedInput && showSuggest, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsxs("div", { style: { width: inputRef?.offsetWidth }, className: "absolute z-10 mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: [isLabelNamesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelNames.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i, onHighlight: () => setHighlightedSuggestionIndex(i), onApplySuggestion: () => applySuggestionWithIndex(i), onResetHighlight: () => resetHighlight(), value: l.value }, l.value))) })), suggestions.literals.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i + suggestions.labelNames.length, onHighlight: () => setHighlightedSuggestionIndex(i + suggestions.labelNames.length), onApplySuggestion: () => applySuggestionWithIndex(i + suggestions.labelNames.length), onResetHighlight: () => resetHighlight(), value: l.value }, l.value))), isLabelValuesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelValues.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex ===
+    return (_jsx(_Fragment, { children: suggestionsLength > 0 && (_jsx("div", { ref: setPopperElement, style: { ...styles.popper, marginLeft: 0 }, ...attributes.popper, className: "z-50", children: _jsx(Transition, { show: focusedInput && showSuggest, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsxs("div", { style: { width: inputRef?.offsetWidth }, className: "absolute z-10 mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: [isLabelNamesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelNames.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i, onHighlight: () => setHighlightedSuggestionIndex(i), onApplySuggestion: () => applySuggestionWithIndex(i), onResetHighlight: () => resetHighlight(), value: transformLabelsForSuggestions(l.value, shouldTrimPrefix) }, transformLabelsForSuggestions(l.value, shouldTrimPrefix)))) })), suggestions.literals.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i + suggestions.labelNames.length, onHighlight: () => setHighlightedSuggestionIndex(i + suggestions.labelNames.length), onApplySuggestion: () => applySuggestionWithIndex(i + suggestions.labelNames.length), onResetHighlight: () => resetHighlight(), value: l.value }, l.value))), isLabelValuesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelValues.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex ===
                                     i + suggestions.labelNames.length + suggestions.literals.length, onHighlight: () => setHighlightedSuggestionIndex(i + suggestions.labelNames.length + suggestions.literals.length), onApplySuggestion: () => applySuggestionWithIndex(i + suggestions.labelNames.length + suggestions.literals.length), onResetHighlight: () => resetHighlight(), value: l.value }, l.value))) }))] }) }) })) }));
 };
 export default SuggestionsList;

package/dist/MatchersInput/index.d.ts

@@ -1,5 +1,6 @@
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 import { Query } from '@parca/parser';
+import { UtilizationLabels } from '../ProfileSelector';
 interface MatchersInputProps {
     queryClient: QueryServiceClient;
     setMatchersString: (arg: string) => void;
@@ -24,6 +25,7 @@ interface UseLabelValues {
     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;
+export declare const useFetchUtilizationLabelValues: (labelName: string, utilizationLabels?: UtilizationLabels) => string[];
+export default function MatchersInputWithProvider(props: MatchersInputProps): JSX.Element;
+export {};
 //# 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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAgB,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAGpC,OAAO,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAKrD,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,eAAO,MAAM,8BAA8B,cAC9B,MAAM,sBACG,iBAAiB,KACpC,MAAM,EASR,CAAC;AAiMF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAMxF"}

package/dist/MatchersInput/index.js

@@ -12,11 +12,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useMemo, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useGrpcMetadata } from '@parca/components';
 import { Query } from '@parca/parser';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
+import { LabelsProvider, useLabels } from '../contexts/MatchersInputLabelsContext';
 import useGrpcQuery from '../useGrpcQuery';
 import SuggestionsList, { Suggestion, Suggestions } from './SuggestionsList';
 export const useLabelNames = (client, profileType, start, end, match) => {
@@ -63,21 +65,20 @@ export const useLabelValues = (client, labelName, profileType) => {
     });
     return { result: { response: data ?? [], error: error }, loading: isLoading };
 };
-const MatchersInput = ({ queryClient, setMatchersString, runQuery, currentQuery, profileType, }) => {
+export const useFetchUtilizationLabelValues = (labelName, utilizationLabels) => {
+    const { data } = useQuery({
+        queryKey: ['utilizationLabelValues', labelName],
+        queryFn: async () => {
+            return await utilizationLabels?.utilizationFetchLabelValues?.(labelName);
+        },
+    });
+    return data ?? [];
+};
+const MatchersInput = ({ setMatchersString, runQuery, currentQuery, }) => {
     const inputRef = useRef(null);
     const [focusedInput, setFocusedInput] = useState(false);
     const [lastCompleted, setLastCompleted] = useState(new Suggestion('', '', ''));
-    const [currentLabelName, setCurrentLabelName] = useState(null);
-    const { loading: labelNamesLoading, result } = useLabelNames(queryClient, profileType);
-    const { response: labelNamesResponse, error: labelNamesError } = result;
-    const { loading: labelValuesLoading, result: { response: labelValues }, } = useLabelValues(queryClient, currentLabelName ?? '', profileType);
-    const labelNames = useMemo(() => {
-        return (labelNamesError === undefined || labelNamesError == null) &&
-            labelNamesResponse !== undefined &&
-            labelNamesResponse != null
-            ? labelNamesResponse.labelNames.filter(e => e !== '__name__')
-            : [];
-    }, [labelNamesError, labelNamesResponse]);
+    const { labelNames, labelValues, labelNameMappings, isLabelNamesLoading, isLabelValuesLoading, currentLabelName, setCurrentLabelName, shouldHandlePrefixes, } = useLabels();
     const value = currentQuery.matchersString();
     const suggestionSections = useMemo(() => {
         const suggestionSections = new Suggestions();
@@ -104,15 +105,31 @@ const MatchersInput = ({ queryClient, setMatchersString, runQuery, currentQuery,
                 const matches = labelNames.filter(function (label) {
                     return label.toLowerCase().slice(0, inputLength) === inputValue;
                 });
-                matches.forEach(m => suggestionSections.labelNames.push({
-                    type: s.type,
-                    typeahead: s.typeahead,
-                    value: m,
-                }));
+                matches.forEach(m => {
+                    const suggestion = {
+                        type: s.type,
+                        typeahead: s.typeahead,
+                        value: m,
+                    };
+                    if (shouldHandlePrefixes) {
+                        const mapping = labelNameMappings.find(l => l.displayName === m);
+                        if (mapping != null) {
+                            suggestion.fullName = mapping.fullName;
+                        }
+                    }
+                    suggestionSections.labelNames.push(suggestion);
+                });
             }
             if (s.type === 'labelValue') {
-                if (currentLabelName === null || s.labelName !== currentLabelName) {
-                    setCurrentLabelName(s.labelName);
+                let labelNameForQuery = s.labelName;
+                if (shouldHandlePrefixes) {
+                    const mapping = labelNameMappings.find(l => l.displayName === s.labelName);
+                    if (mapping != null) {
+                        labelNameForQuery = mapping.fullName;
+                    }
+                }
+                if (currentLabelName === null || labelNameForQuery !== currentLabelName) {
+                    setCurrentLabelName(labelNameForQuery);
                     return;
                 }
                 if (labelValues !== null) {
@@ -127,7 +144,17 @@ const MatchersInput = ({ queryClient, setMatchersString, runQuery, currentQuery,
             }
         });
         return suggestionSections;
-    }, [currentQuery, lastCompleted, labelNames, labelValues, currentLabelName, value]);
+    }, [
+        currentQuery,
+        lastCompleted,
+        labelNames,
+        labelValues,
+        currentLabelName,
+        value,
+        shouldHandlePrefixes,
+        labelNameMappings,
+        setCurrentLabelName,
+    ]);
     const resetLastCompleted = () => setLastCompleted(new Suggestion('', '', ''));
     const onChange = (e) => {
         const newValue = e.target.value;
@@ -166,6 +193,8 @@ const MatchersInput = ({ queryClient, setMatchersString, runQuery, currentQuery,
                     ? 'Select a profile first to enter a filter...'
                     : 'filter profiles... eg. node="test"', onChange: onChange, value: value, onBlur: unfocus, onFocus: focus, disabled: profileSelected, title: profileSelected
                     ? 'Select a profile first to enter a filter...'
-                    : 'filter profiles... eg. node="test"', id: "matchers-input" }), _jsx(SuggestionsList, { isLabelNamesLoading: labelNamesLoading, suggestions: suggestionSections, applySuggestion: applySuggestion, inputRef: inputRef.current, runQuery: runQuery, focusedInput: focusedInput, isLabelValuesLoading: labelValuesLoading && lastCompleted.type === 'literal' })] }));
+                    : 'filter profiles... eg. node="test"', id: "matchers-input" }), _jsx(SuggestionsList, { isLabelNamesLoading: isLabelNamesLoading, suggestions: suggestionSections, applySuggestion: applySuggestion, inputRef: inputRef.current, runQuery: runQuery, focusedInput: focusedInput, isLabelValuesLoading: isLabelValuesLoading && lastCompleted.type === 'literal', shouldTrimPrefix: shouldHandlePrefixes })] }));
 };
-export default MatchersInput;
+export default function MatchersInputWithProvider(props) {
+    return (_jsx(LabelsProvider, { queryClient: props.queryClient, profileType: props.profileType, children: _jsx(MatchersInput, { ...props }) }));
+}

package/dist/ProfileSelector/index.d.ts

@@ -29,6 +29,11 @@ export interface UtilizationMetrics {
         [key: string]: string;
     };
 }
+export interface UtilizationLabels {
+    utilizationLabelNames?: string[];
+    utilizationFetchLabelValues?: (key: string) => Promise<string[]>;
+    utilizationLabelValues?: string[];
+}
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
     queryClient: QueryServiceClient;
     querySelection: QuerySelection;
@@ -43,6 +48,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
     suffix?: string;
     utilizationMetrics?: UtilizationMetrics[];
     utilizationMetricsLoading?: boolean;
+    utilizationLabels?: UtilizationLabels;
 }
 export interface IProfileTypesResult {
     loading: boolean;
@@ -50,6 +56,6 @@ export interface IProfileTypesResult {
     error?: RpcError;
 }
 export declare const useProfileTypes: (client: QueryServiceClient) => IProfileTypesResult;
-declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, }: ProfileSelectorProps) => JSX.Element;
+declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, }: ProfileSelectorProps) => JSX.Element;
 export default ProfileSelector;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAUvE,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQpC,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,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,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,gCAAgC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;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,wTAiBlB,oBAAoB,KAAG,GAAG,CAAC,OA0M7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAUvE,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AASpC,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,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;CACnC;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,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,gCAAgC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;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,2UAkBlB,oBAAoB,KAAG,GAAG,CAAC,OA4M7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -17,6 +17,7 @@ import { CloseIcon } from '@parca/icons';
 import { Query } from '@parca/parser';
 import { useLabelNames } from '../MatchersInput/index';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
+import { UtilizationLabelsProvider } from '../contexts/UtilizationLabelsContext';
 import { useDefaultSumBy, useSumBySelection } from '../useSumBy';
 import { MetricsGraphSection } from './MetricsGraphSection';
 import { QueryControls } from './QueryControls';
@@ -38,7 +39,7 @@ export const useProfileTypes = (client) => {
     }, [client, metadata, loading]);
     return { loading, data: result, error };
 };
-const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, }) => {
+const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing);
     const { viewComponent } = useParcaContext();
@@ -139,6 +140,6 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         queryExpressionString === '{}';
     const queryBrowserRef = useRef(null);
     const sumByRef = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, disableExplorativeQuerying: disableExplorativeQuerying, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: setTimeRangeSelection, searchDisabled: searchDisabled, queryBrowserMode: queryBrowserMode, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: sumBySelection ?? [], setUserSumBySelection: setUserSumBySelection, profileType: profileType, profileTypesError: error }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], defaultSumByLoading: defaultSumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: setTimeRangeSelection, selectQuery: selectQuery, selectProfile: selectProfile, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setNewQueryExpression, utilizationMetrics: utilizationMetrics, utilizationMetricsLoading: utilizationMetricsLoading })] }));
+    return (_jsx(UtilizationLabelsProvider, { value: utilizationLabels, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, disableExplorativeQuerying: disableExplorativeQuerying, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: setTimeRangeSelection, searchDisabled: searchDisabled, queryBrowserMode: queryBrowserMode, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: sumBySelection ?? [], setUserSumBySelection: setUserSumBySelection, profileType: profileType, profileTypesError: error }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], defaultSumByLoading: defaultSumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: setTimeRangeSelection, selectQuery: selectQuery, selectProfile: selectProfile, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setNewQueryExpression, utilizationMetrics: utilizationMetrics, utilizationMetricsLoading: utilizationMetricsLoading })] }) }));
 };
 export default ProfileSelector;

package/dist/SimpleMatchers/index.d.ts

@@ -1,5 +1,6 @@
 import { QueryServiceClient } from '@parca/client';
 import { Query } from '@parca/parser';
+import { type SelectItem } from './Select';
 interface Props {
     queryClient: QueryServiceClient;
     setMatchersString: (arg: string) => void;
@@ -8,6 +9,7 @@ interface Props {
     profileType: string;
     queryBrowserRef: React.RefObject<HTMLDivElement>;
 }
-declare const SimpleMatchers: ({ queryClient, setMatchersString, currentQuery, profileType, queryBrowserRef, }: Props) => JSX.Element;
-export default SimpleMatchers;
+export declare const transformLabelsForSelect: (labelNames: string[], shouldTrimPrefix?: boolean) => SelectItem[];
+export default function SimpleMathersWithProvider(props: Props): JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"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;AAKpC,OAAe,EAAC,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;AAEjD,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;AAUD,eAAO,MAAM,wBAAwB,eACvB,MAAM,EAAE,iCAEnB,UAAU,EAQZ,CAAC;AA+UF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkB3E"}

package/dist/SimpleMatchers/index.js

@@ -17,12 +17,16 @@ import { useQueryClient } from '@tanstack/react-query';
 import cx from 'classnames';
 import { useGrpcMetadata } from '@parca/components';
 import { sanitizeLabelValue } from '@parca/utilities';
-import { useLabelNames } from '../MatchersInput';
+import { LabelProvider, useLabels } from '../contexts/SimpleMatchersLabelContext';
+import { useUtilizationLabels } from '../contexts/UtilizationLabelsContext';
 import Select from './Select';
-const transformLabelsForSelect = (labelNames) => {
+export const transformLabelsForSelect = (labelNames, shouldTrimPrefix = false) => {
     return labelNames.map(labelName => ({
         key: labelName,
-        element: { active: _jsx(_Fragment, { children: labelName }), expanded: _jsx(_Fragment, { children: labelName }) },
+        element: {
+            active: _jsx(_Fragment, { children: shouldTrimPrefix ? labelName.split('.').pop() : labelName }),
+            expanded: _jsx(_Fragment, { children: shouldTrimPrefix ? labelName.split('.').pop() : labelName }),
+        },
     }));
 };
 const operatorOptions = [
@@ -55,27 +59,18 @@ const operatorOptions = [
         },
     },
 ];
-const SimpleMatchers = ({ queryClient, setMatchersString, 
-// runQuery,
-currentQuery, profileType, queryBrowserRef, }) => {
+const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileType, queryBrowserRef, }) => {
+    const utilizationLabels = useUtilizationLabels();
     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;
     const [showAll, setShowAll] = useState(false);
     const visibleRows = showAll ? queryRows : queryRows.slice(0, 3);
     const hiddenRowsCount = queryRows.length - 3;
     const maxWidthInPixels = `max-w-[${queryBrowserRef.current?.offsetWidth.toString()}px]`;
     const currentMatchers = currentQuery.matchersString();
-    const labelNameFromMatchers = useMemo(() => {
-        if (currentQuery === undefined)
-            return [];
-        const matchers = currentQuery.matchers;
-        return matchers.map(matcher => matcher.key);
-    }, [currentQuery]);
     const fetchLabelValues = useCallback(async (labelName) => {
         if (labelName == null || labelName === '' || profileType == null || profileType === '') {
             return [];
@@ -95,6 +90,9 @@ currentQuery, profileType, queryBrowserRef, }) => {
             return [];
         }
     }, [queryClient, metadata, profileType, reactQueryClient]);
+    const fetchLabelValuesUtilization = useCallback(async (labelName) => {
+        return (await utilizationLabels?.utilizationFetchLabelValues?.(labelName)) ?? [];
+    }, [utilizationLabels]);
     const updateMatchersString = useCallback((rows) => {
         const matcherString = rows
             .filter(row => row.labelName.length > 0 && row.labelValue)
@@ -115,7 +113,9 @@ currentQuery, profileType, queryBrowserRef, }) => {
                 const trimmedLabelName = labelName.trim();
                 if (trimmedLabelName === '')
                     return null;
-                const labelValues = await fetchLabelValues(trimmedLabelName);
+                const labelValues = utilizationLabels?.utilizationFetchLabelValues !== undefined
+                    ? await fetchLabelValuesUtilization(trimmedLabelName)
+                    : await fetchLabelValues(trimmedLabelName);
                 const sanitizedLabelValue = labelValue.startsWith('"') && labelValue.endsWith('"')
                     ? labelValue.slice(1, -1)
                     : labelValue;
@@ -131,18 +131,14 @@ currentQuery, profileType, queryBrowserRef, }) => {
             updateMatchersString(filteredRows);
         };
         void fetchAndSetQueryRows();
-    }, [currentMatchers, fetchLabelValues, updateMatchersString]);
-    const labelNames = useMemo(() => {
-        return (labelNamesError === undefined || labelNamesError == null) &&
-            labelNamesResponse !== undefined &&
-            labelNamesResponse != null
-            ? labelNamesResponse.labelNames.filter(e => e !== '__name__')
-            : [];
-    }, [labelNamesError, labelNamesResponse]);
-    const labelNameOptions = useMemo(() => {
-        const uniqueLabelNames = Array.from(new Set([...labelNames, ...labelNameFromMatchers]));
-        return transformLabelsForSelect(uniqueLabelNames);
-    }, [labelNames, labelNameFromMatchers]);
+    }, [
+        currentMatchers,
+        fetchLabelValues,
+        updateMatchersString,
+        fetchLabelValuesUtilization,
+        utilizationLabels,
+    ]);
+    const { labelNameOptions, isLoading: labelNamesLoading } = useLabels();
     const updateRow = useCallback(async (index, field, value) => {
         const updatedRows = [...queryRows];
         const prevLabelName = updatedRows[index].labelName;
@@ -152,13 +148,21 @@ currentQuery, profileType, queryBrowserRef, }) => {
             updatedRows[index].labelValue = '';
             updatedRows[index].isLoading = true;
             setQueryRows([...updatedRows]);
-            const labelValues = await fetchLabelValues(value);
+            const labelValues = utilizationLabels?.utilizationFetchLabelValues !== undefined
+                ? await fetchLabelValuesUtilization(value)
+                : await fetchLabelValues(value);
             updatedRows[index].labelValues = labelValues;
             updatedRows[index].isLoading = false;
         }
         setQueryRows([...updatedRows]);
         updateMatchersString(updatedRows);
-    }, [queryRows, fetchLabelValues, updateMatchersString]);
+    }, [
+        queryRows,
+        fetchLabelValues,
+        updateMatchersString,
+        fetchLabelValuesUtilization,
+        utilizationLabels,
+    ]);
     const handleUpdateRow = useCallback((index, field, value) => {
         void updateRow(index, field, value);
     }, [updateRow]);
@@ -196,7 +200,9 @@ currentQuery, profileType, queryBrowserRef, }) => {
                 updatedRows[index].isLoading = true;
                 setQueryRows([...updatedRows]);
                 try {
-                    const labelValues = await fetchLabelValues(updatedRows[index].labelName);
+                    const labelValues = utilizationLabels?.utilizationFetchLabelValues !== undefined
+                        ? await fetchLabelValuesUtilization(updatedRows[index].labelName)
+                        : await fetchLabelValues(updatedRows[index].labelName);
                     updatedRows[index].labelValues = labelValues;
                 }
                 catch (error) {
@@ -211,10 +217,18 @@ currentQuery, profileType, queryBrowserRef, }) => {
                 console.log(`Label values already present or empty label name`);
             }
         };
-    }, [queryRows, fetchLabelValues]);
+    }, [queryRows, fetchLabelValues, fetchLabelValuesUtilization, utilizationLabels]);
     const isRowRegex = (row) => row.operator === '=~' || row.operator === '!~';
     return (_jsxs("div", { className: `flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`, id: "simple-matchers", children: [visibleRows.map((row, index) => (_jsxs("div", { className: "flex items-center", children: [_jsx(Select, { items: labelNameOptions, onSelection: value => handleUpdateRow(index, 'labelName', value), placeholder: "Select label name", selectedKey: row.labelName, className: "rounded-tr-none rounded-br-none ring-0 focus:ring-0 outline-none", loading: labelNamesLoading, searchable: true }), _jsx(Select, { items: operatorOptions, onSelection: value => handleUpdateRow(index, 'operator', value), selectedKey: row.operator, className: "rounded-none ring-0 focus:ring-0 outline-none" }), _jsx(Select, { items: transformLabelsForSelect(row.labelValues), onSelection: value => handleUpdateRow(index, 'labelValue', value), placeholder: "Select label value", selectedKey: row.labelValue, className: "rounded-none ring-0 focus:ring-0 outline-none max-w-48", optionsClassname: cx('max-w-[300px]', {
                             'w-[300px]': isRowRegex(row),
                         }), searchable: true, disabled: row.labelName === '', loading: row.isLoading, onButtonClick: () => handleLabelValueClick(index), editable: isRowRegex(row) }), _jsx("button", { onClick: () => removeRow(index), className: cx('p-2 border-gray-200 border rounded rounded-tl-none rounded-bl-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900'), children: _jsx(Icon, { icon: "carbon:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }, index))), queryRows.length > 3 && (_jsx("button", { onClick: () => setShowAll(!showAll), className: "mr-2 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900", children: showAll ? 'Show less' : `Show ${hiddenRowsCount} more` })), _jsx("button", { onClick: addNewRow, className: "p-2 border-gray-200 dark:bg-gray-900 dark:border-gray-600 border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", children: _jsx(Icon, { icon: "material-symbols:add", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }));
 };
-export default SimpleMatchers;
+export default function SimpleMathersWithProvider(props) {
+    const labelNameFromMatchers = useMemo(() => {
+        if (props.currentQuery === undefined)
+            return [];
+        const matchers = props.currentQuery.matchers;
+        return matchers.map(matcher => matcher.key);
+    }, [props.currentQuery]);
+    return (_jsx(LabelProvider, { queryClient: props.queryClient, profileType: props.profileType, labelNameFromMatchers: labelNameFromMatchers, children: _jsx(SimpleMatchers, { ...props }) }));
+}

package/dist/contexts/MatchersInputLabelsContext.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { QueryServiceClient } from '@parca/client';
+interface LabelNameMapping {
+    displayName: string;
+    fullName: string;
+}
+interface LabelsContextType {
+    labelNames: string[];
+    labelValues: string[];
+    labelNameMappings: LabelNameMapping[];
+    isLabelNamesLoading: boolean;
+    isLabelValuesLoading: boolean;
+    currentLabelName: string | null;
+    setCurrentLabelName: (name: string | null) => void;
+    shouldHandlePrefixes: boolean;
+}
+interface LabelsProviderProps {
+    children: React.ReactNode;
+    queryClient: QueryServiceClient;
+    profileType: string;
+}
+export declare function LabelsProvider({ children, queryClient, profileType, }: LabelsProviderProps): JSX.Element;
+export declare function useLabels(): LabelsContextType;
+export {};
+//# sourceMappingURL=MatchersInputLabelsContext.d.ts.map

package/dist/contexts/MatchersInputLabelsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatchersInputLabelsContext.d.ts","sourceRoot":"","sources":["../../src/contexts/MatchersInputLabelsContext.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAKjD,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB;IACzB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iBAAiB,EAAE,gBAAgB,EAAE,CAAC;IACtC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAID,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;CACrB;AAID,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,WAAW,GACZ,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAuEnC;AAED,wBAAgB,SAAS,IAAI,iBAAiB,CAM7C"}

package/dist/contexts/MatchersInputLabelsContext.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 React, { createContext, useContext, useMemo } from 'react';
+import { useFetchUtilizationLabelValues, useLabelNames, useLabelValues } from '../MatchersInput';
+import { useUtilizationLabels } from './UtilizationLabelsContext';
+const LabelsContext = createContext(null);
+// With there being the possibility of having utilization labels, we need to be able to determine whether the labels to be used are utilization labels or profiling data labels.
+// This context is used to determine this.
+export function LabelsProvider({ children, queryClient, profileType, }) {
+    const [currentLabelName, setCurrentLabelName] = React.useState(null);
+    const utilizationLabels = useUtilizationLabels();
+    const { result: labelNamesResponse, loading: isLabelNamesLoading } = useLabelNames(queryClient, profileType);
+    const labelNamesFromAPI = useMemo(() => {
+        return (labelNamesResponse.error === undefined || labelNamesResponse.error == null) &&
+            labelNamesResponse !== undefined &&
+            labelNamesResponse != null
+            ? labelNamesResponse.response?.labelNames.filter(e => e !== '__name__') ?? []
+            : [];
+    }, [labelNamesResponse]);
+    const { result: labelValuesOriginal, loading: isLabelValuesLoading } = useLabelValues(queryClient, currentLabelName ?? '', profileType);
+    const utilizationLabelValues = useFetchUtilizationLabelValues(currentLabelName ?? '', utilizationLabels);
+    const shouldHandlePrefixes = utilizationLabels?.utilizationLabelNames !== undefined;
+    const labelNameMappings = useMemo(() => {
+        const names = utilizationLabels?.utilizationLabelNames ?? labelNamesFromAPI;
+        return names.map(name => ({
+            displayName: name.replace(/^(attributes\.|attributes_resource\.)/, ''),
+            fullName: name,
+        }));
+    }, [labelNamesFromAPI, utilizationLabels?.utilizationLabelNames]);
+    const labelNames = useMemo(() => {
+        return shouldHandlePrefixes ? labelNameMappings.map(m => m.displayName) : labelNamesFromAPI;
+    }, [labelNameMappings, labelNamesFromAPI, shouldHandlePrefixes]);
+    const labelValues = useMemo(() => {
+        return utilizationLabels?.utilizationFetchLabelValues !== undefined
+            ? utilizationLabelValues
+            : labelValuesOriginal.response;
+    }, [labelValuesOriginal, utilizationLabelValues, utilizationLabels]);
+    const value = useMemo(() => ({
+        labelNames,
+        labelValues,
+        labelNameMappings,
+        isLabelNamesLoading,
+        isLabelValuesLoading,
+        currentLabelName,
+        setCurrentLabelName,
+        shouldHandlePrefixes,
+    }), [
+        labelNames,
+        labelValues,
+        labelNameMappings,
+        isLabelNamesLoading,
+        isLabelValuesLoading,
+        currentLabelName,
+        shouldHandlePrefixes,
+    ]);
+    return _jsx(LabelsContext.Provider, { value: value, children: children });
+}
+export function useLabels() {
+    const context = useContext(LabelsContext);
+    if (context === null) {
+        throw new Error('useLabels must be used within a LabelsProvider');
+    }
+    return context;
+}

package/dist/contexts/SimpleMatchersLabelContext.d.ts

@@ -0,0 +1,17 @@
+import { QueryServiceClient } from '@parca/client';
+import type { SelectItem } from '../SimpleMatchers/Select';
+interface LabelContextValue {
+    labelNameOptions: SelectItem[];
+    isLoading: boolean;
+    error: Error | null;
+}
+interface LabelProviderProps {
+    children: React.ReactNode;
+    queryClient: QueryServiceClient;
+    profileType: string;
+    labelNameFromMatchers: string[];
+}
+export declare function LabelProvider({ children, queryClient, profileType, labelNameFromMatchers, }: LabelProviderProps): JSX.Element;
+export declare function useLabels(): LabelContextValue;
+export {};
+//# sourceMappingURL=SimpleMatchersLabelContext.d.ts.map

package/dist/contexts/SimpleMatchersLabelContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleMatchersLabelContext.d.ts","sourceRoot":"","sources":["../../src/contexts/SimpleMatchersLabelContext.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAGzD,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,UAAU,EAAE,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAID,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,MAAM,EAAE,CAAC;CACjC;AAKD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,EACX,WAAW,EACX,qBAAqB,GACtB,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAwBlC;AAED,wBAAgB,SAAS,IAAI,iBAAiB,CAM7C"}