@parca/profile 0.19.81 → 0.19.82

package/dist/{ProfileSelector/QueryControls.js → QueryControls/index.js}

@@ -11,25 +11,29 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Switch } from '@headlessui/react';
 import { Button, DateTimeRangePicker, useParcaContext } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import MatchersInput from '../MatchersInput';
 import ProfileTypeSelector from '../ProfileTypeSelector';
-import SelectWithRefresh from '../SelectWithRefresh';
-import SimpleMatchers from '../SimpleMatchers';
+import { SelectWithRefresh } from '../SelectWithRefresh';
+import SimpleMatchers from '../SimpleMatchers/';
 import ViewMatchers from '../ViewMatchers';
-export function QueryControls({ showProfileTypeSelector, profileTypesData, profileTypesLoading, selectedProfileName, setProfileName, viewComponent, setQueryBrowserMode, advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser, setMatchersString, setQueryExpression, query, queryBrowserRef, timeRangeSelection, setTimeRangeSelection, searchDisabled, queryClient, labels, sumBySelection, sumBySelectionLoading, setUserSumBySelection, sumByRef, profileType, showSumBySelector, profileTypesError, refreshLabelNames, }) {
+import { useLabelNames } from '../hooks/useLabels';
+export function QueryControls({ profileType, timeRangeSelection, setTimeRangeSelection, setQueryExpression, searchDisabled, showProfileTypeSelector = false, showSumBySelector = false, showAdvancedMode = true, profileTypesData, profileTypesLoading = false, selectedProfileName, setProfileName, profileTypesError, viewComponent, setQueryBrowserMode, advancedModeForQueryBrowser = false, setAdvancedModeForQueryBrowser, queryBrowserRef, labels = [], sumBySelection = [], sumBySelectionLoading = false, setUserSumBySelection, sumByRef, queryClient, }) {
     const { timezone } = useParcaContext();
+    const defaultQueryBrowserRef = useRef(null);
+    const actualQueryBrowserRef = queryBrowserRef ?? defaultQueryBrowserRef;
     const [searchExecutedTimestamp, setSearchExecutedTimestamp] = useState(0);
-    return (_jsxs("div", { className: "flex w-full flex-wrap items-start gap-2", ...testId(TEST_IDS.QUERY_CONTROLS_CONTAINER), children: [showProfileTypeSelector && (_jsxs("div", { children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.PROFILE_TYPE_LABEL), children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: profileTypesError, disabled: viewComponent?.disableProfileTypesDropdown })] })), _jsxs("div", { className: "w-full flex-1 flex flex-col gap-1 mt-auto", ref: queryBrowserRef, ...testId(TEST_IDS.QUERY_BROWSER_CONTAINER), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.QUERY_LABEL), children: "Query" }), viewComponent?.disableExplorativeQuerying !== true && (_jsxs(_Fragment, { children: [_jsxs(Switch, { checked: advancedModeForQueryBrowser, onChange: () => {
-                                                    setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser);
-                                                    setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced');
+    const { refetch: refetchLabelNames } = useLabelNames(queryClient, profileType, timeRangeSelection.getFromMs(), timeRangeSelection.getToMs());
+    return (_jsxs("div", { className: "flex w-full flex-wrap items-start gap-2", ...testId(TEST_IDS.QUERY_CONTROLS_CONTAINER), children: [showProfileTypeSelector && (_jsxs("div", { children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.PROFILE_TYPE_LABEL), children: "Profile type" }), _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName ?? (() => { }), error: profileTypesError, disabled: viewComponent?.disableProfileTypesDropdown })] })), _jsxs("div", { className: "w-full flex-1 flex flex-col gap-1 mt-auto", ref: actualQueryBrowserRef, ...testId(TEST_IDS.QUERY_BROWSER_CONTAINER), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.QUERY_LABEL), children: "Query" }), showAdvancedMode && viewComponent?.disableExplorativeQuerying !== true && (_jsxs(_Fragment, { children: [_jsxs(Switch, { checked: advancedModeForQueryBrowser, onChange: () => {
+                                                    setAdvancedModeForQueryBrowser?.(!advancedModeForQueryBrowser);
+                                                    setQueryBrowserMode?.(advancedModeForQueryBrowser ? 'simple' : 'advanced');
                                                 }, className: `${advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'} relative inline-flex h-[20px] w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`, ...testId(TEST_IDS.ADVANCED_MODE_SWITCH), children: [_jsx("span", { className: "sr-only", children: "Use setting" }), _jsx("span", { "aria-hidden": "true", className: `${advancedModeForQueryBrowser ? 'translate-x-6' : 'translate-x-0'} pointer-events-none inline-block h-[16px] w-[16px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out` })] }), _jsx("label", { className: "text-xs", ...testId(TEST_IDS.QUERY_MODE_LABEL), children: "Advanced Mode" })] }))] }), viewComponent?.createViewComponent] }), viewComponent?.disableExplorativeQuerying === true &&
                         viewComponent?.labelnames !== undefined &&
-                        viewComponent?.labelnames.length >= 1 ? (_jsx(ViewMatchers, { labelNames: viewComponent.labelnames, setMatchersString: setMatchersString, profileType: selectedProfileName, runQuery: setQueryExpression, currentQuery: query, queryClient: queryClient, start: timeRangeSelection.getFromMs(), end: timeRangeSelection.getToMs() })) : advancedModeForQueryBrowser ? (_jsx(MatchersInput, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryClient: queryClient, start: timeRangeSelection.getFromMs(), end: timeRangeSelection.getToMs() })) : (_jsx(SimpleMatchers, { setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query, profileType: selectedProfileName, queryBrowserRef: queryBrowserRef, queryClient: queryClient, start: timeRangeSelection.getFromMs(), end: timeRangeSelection.getToMs(), searchExecutedTimestamp: searchExecutedTimestamp }))] }), showSumBySelector && (_jsxs("div", { ...testId(TEST_IDS.SUM_BY_CONTAINER), children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", ...testId(TEST_IDS.SUM_BY_LABEL), children: "Sum by" }) }), _jsx(SelectWithRefresh, { id: "h-sum-by-selector", "data-testid": testId(TEST_IDS.SUM_BY_SELECT)['data-testid'], defaultValue: [], isMulti: true, isClearable: false, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-full max-w-80", classNamePrefix: "parca-select", value: (sumBySelection ?? []).map(sumBy => ({ label: sumBy, value: sumBy })), onChange: newValue => {
-                            setUserSumBySelection(newValue.map(option => option.value));
+                        viewComponent?.labelnames.length >= 1 ? (_jsx(ViewMatchers, { labelNames: viewComponent.labelnames })) : showAdvancedMode && advancedModeForQueryBrowser ? (_jsx(MatchersInput, {})) : (_jsx(SimpleMatchers, { queryBrowserRef: actualQueryBrowserRef, searchExecutedTimestamp: searchExecutedTimestamp }))] }), showSumBySelector && (_jsxs("div", { ...testId(TEST_IDS.SUM_BY_CONTAINER), children: [_jsx("div", { className: "mb-0.5 mt-1.5 flex items-center justify-between", children: _jsx("label", { className: "text-xs", ...testId(TEST_IDS.SUM_BY_LABEL), children: "Sum by" }) }), _jsx(SelectWithRefresh, { id: "h-sum-by-selector", "data-testid": testId(TEST_IDS.SUM_BY_SELECT)['data-testid'], defaultValue: [], isMulti: true, isClearable: false, name: "colors", options: labels.map(label => ({ label, value: label })), className: "parca-select-container text-sm w-full max-w-80", classNamePrefix: "parca-select", value: sumBySelection.map(sumBy => ({ label: sumBy, value: sumBy })), onChange: newValue => {
+                            setUserSumBySelection?.(newValue.map(option => option.value));
                         }, placeholder: "Labels...", styles: {
                             indicatorSeparator: () => ({ display: 'none' }),
                             menu: provided => ({
@@ -41,11 +45,10 @@ export function QueryControls({ showProfileTypeSelector, profileTypesData, profi
                                 minWidth: '320px',
                                 position: 'absolute',
                             }),
-                            // menu: provided => ({...provided, width: 'max-content', zIndex: 50}), // Setting the same zIndex as drop down menus
-                        }, isLoading: sumBySelectionLoading, isDisabled: !profileType.delta, 
+                        }, isLoading: sumBySelectionLoading, isDisabled: !profileType?.delta, 
                         // @ts-expect-error
                         ref: sumByRef, onKeyDown: e => {
-                            const currentRef = sumByRef.current;
+                            const currentRef = sumByRef?.current;
                             if (currentRef == null) {
                                 return;
                             }
@@ -60,7 +63,7 @@ export function QueryControls({ showProfileTypeSelector, profileTypesData, profi
                                 setQueryExpression(true);
                                 currentRef.blur();
                             }
-                        }, onRefresh: refreshLabelNames, refreshTitle: "Refresh label names", refreshTestId: "sum-by-refresh-button", menuTestId: TEST_IDS.SUM_BY_SELECT_FLYOUT })] })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection, timezone: timezone, ...testId(TEST_IDS.DATE_TIME_RANGE_PICKER) }), _jsxs("div", { children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.SEARCH_BUTTON_LABEL), children: "\u00A0" }), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
+                        }, onRefresh: refetchLabelNames, refreshTitle: "Refresh label names", refreshTestId: "sum-by-refresh-button", menuTestId: TEST_IDS.SUM_BY_SELECT_FLYOUT })] })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection, timezone: timezone, ...testId(TEST_IDS.DATE_TIME_RANGE_PICKER) }), _jsxs("div", { children: [_jsx("label", { className: "text-xs", ...testId(TEST_IDS.SEARCH_BUTTON_LABEL), children: "\u00A0" }), _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
                             e.preventDefault();
                             setSearchExecutedTimestamp(Date.now());
                             setQueryExpression(true);

package/dist/SimpleMatchers/Select.js

@@ -179,7 +179,7 @@ const CustomSelect = ({ items: itemsProp, selectedKey, onSelection, placeholder
                                                     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) })) }) })), _jsx("div", { className: "flex-1 min-h-0", children: loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : groupedFilteredItems.length === 0 ? (_jsx("div", { className: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center", ...testId(TEST_IDS.LABEL_VALUE_NO_RESULTS), children: "No values found" })) : (groupedFilteredItems.map(group => (_jsxs(_Fragment, { children: [groupedFilteredItems.length > 1 &&
                                         groupedFilteredItems.every(g => g.type !== '') &&
-                                        group.type !== '' ? (_jsx("div", { className: "pl-2", children: _jsx(DividerWithLabel, { label: group.type }) })) : null, group.values.map((item, index) => (_jsx(OptionItem, { item: item, index: index, optionRefs: optionRefs, focusedIndex: focusedIndex, selectedKey: selectedKey, handleSelection: handleSelection }, item.key)))] })))) }), refetchValues !== undefined && loading !== true && (_jsx(RefreshButton, { onClick: () => void handleRefetch(), disabled: isRefetching, title: "Refresh label values", testId: TEST_IDS.LABEL_VALUE_REFRESH_BUTTON, sticky: true, loading: isRefetching }))] }) }))] }));
+                                        group.type !== '' ? (_jsx("div", { className: "pl-2", children: _jsx(DividerWithLabel, { label: group.type }) })) : null, group.values.map((item, index) => (_jsx(OptionItem, { item: item, index: index, optionRefs: optionRefs, focusedIndex: focusedIndex, selectedKey: selectedKey, handleSelection: handleSelection }, item.key)))] })))) }), refetchValues !== undefined && loading !== true && (_jsx(RefreshButton, { onClick: () => void handleRefetch(), disabled: isRefetching, title: "Refresh results", testId: TEST_IDS.LABEL_VALUE_REFRESH_BUTTON, sticky: true, loading: isRefetching }))] }) }))] }));
 };
 const OptionItem = ({ item, optionRefs, index, focusedIndex, selectedKey, handleSelection, }) => {
     return (_jsxs("div", { ref: el => {

package/dist/SimpleMatchers/index.d.ts

@@ -1,18 +1,9 @@
-import { QueryServiceClient } from '@parca/client';
-import { Query } from '@parca/parser';
 import { type SelectItem } from './Select';
 interface Props {
-    queryClient: QueryServiceClient;
-    setMatchersString: (arg: string) => void;
-    runQuery: () => void;
-    currentQuery: Query;
-    profileType: string;
     queryBrowserRef: React.RefObject<HTMLDivElement>;
-    start?: number;
-    end?: number;
     searchExecutedTimestamp?: number;
 }
 export declare const transformLabelsForSelect: (labelNames: string[]) => SelectItem[];
-export default function SimpleMathersWithProvider(props: Props): JSX.Element;
-export {};
+declare const SimpleMatchers: ({ queryBrowserRef, searchExecutedTimestamp, }: Props) => JSX.Element;
+export default SimpleMatchers;
 //# 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,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;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAoBD,eAAO,MAAM,wBAAwB,GAAI,YAAY,MAAM,EAAE,KAAG,UAAU,EAQzE,CAAC;AAidF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoB3E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/index.tsx"],"names":[],"mappings":"AA0BA,OAAe,EAAC,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;AAEjD,UAAU,KAAK;IACb,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACjD,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAUD,eAAO,MAAM,wBAAwB,GAAI,YAAY,MAAM,EAAE,KAAG,UAAU,EAQzE,CAAC;AAiDF,QAAA,MAAM,cAAc,GAAI,+CAIrB,KAAK,KAAG,GAAG,CAAC,OAyZd,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/SimpleMatchers/index.js

@@ -11,31 +11,23 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { useQueryClient } from '@tanstack/react-query';
 import cx from 'classnames';
-import { useGrpcMetadata } from '@parca/components';
+import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
-import { LabelProvider, useLabels } from '../contexts/SimpleMatchersLabelContext';
-import { useUtilizationLabels } from '../contexts/UtilizationLabelsContext';
+import { useUnifiedLabels } from '../contexts/UnifiedLabelsContext';
+import { transformLabelName } from '../contexts/utils';
+import { useQueryState } from '../hooks/useQueryState';
 import Select from './Select';
-const trimOtelPrefix = (labelName) => {
-    if (labelName.startsWith('attributes_resource.')) {
-        return labelName.replace('attributes_resource.', '');
-    }
-    if (labelName.startsWith('attributes.')) {
-        return labelName.replace('attributes.', '');
-    }
-    return labelName;
-};
 export const transformLabelsForSelect = (labelNames) => {
     return labelNames.map(labelName => ({
         key: labelName,
         element: {
-            active: _jsx(_Fragment, { children: trimOtelPrefix(labelName) }),
-            expanded: _jsx(_Fragment, { children: trimOtelPrefix(labelName) }),
+            active: _jsx(_Fragment, { children: transformLabelName(labelName) }),
+            expanded: _jsx(_Fragment, { children: transformLabelName(labelName) }),
         },
     }));
 };
@@ -69,15 +61,19 @@ const operatorOptions = [
         },
     },
 ];
-const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileType, queryBrowserRef, start, end, searchExecutedTimestamp, }) => {
-    const utilizationLabels = useUtilizationLabels();
+const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
     const [queryRows, setQueryRows] = useState([
         { labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false },
     ]);
     const reactQueryClient = useQueryClient();
     const metadata = useGrpcMetadata();
+    const { queryServiceClient: parcaQueryClient } = useParcaContext();
     const [showAll, setShowAll] = useState(false);
     const [isActivelyEditing, setIsActivelyEditing] = useState(false);
+    const { labelNameMappingsForSimpleMatchers: labelNameOptions, isLabelNamesLoading: labelNamesLoading, refetchLabelNames, suffix, } = useUnifiedLabels();
+    const { draftSelection, setDraftMatchers, draftParsedQuery } = useQueryState({
+        suffix,
+    });
     // Reset editing mode when search is executed
     useEffect(() => {
         if (searchExecutedTimestamp !== undefined && searchExecutedTimestamp > 0) {
@@ -88,14 +84,20 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
     const visibleRows = showAll || isActivelyEditing ? queryRows : queryRows.slice(0, 3);
     const hiddenRowsCount = queryRows.length - 3;
     const maxWidthInPixels = `max-w-[${queryBrowserRef.current?.offsetWidth.toString()}px]`;
-    const currentMatchers = currentQuery.matchersString();
+    const currentMatchers = draftParsedQuery?.matchersString();
+    const profileType = draftParsedQuery?.profileType().toString();
+    const start = draftSelection.from;
+    const end = draftSelection.to;
     const fetchLabelValues = useCallback(async (labelName) => {
-        if (labelName == null || labelName === '' || profileType == null || profileType === '') {
+        if (labelName == null || labelName === '') {
+            return [];
+        }
+        if (profileType == null || profileType === '') {
             return [];
         }
         try {
             const values = await reactQueryClient.fetchQuery([labelName, profileType, start, end], async () => {
-                const response = await queryClient.values({
+                const response = await parcaQueryClient.values({
                     labelName,
                     match: [],
                     profileType,
@@ -116,18 +118,14 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
             console.error('Error fetching label values:', error);
             return [];
         }
-    }, [queryClient, metadata, profileType, reactQueryClient, start, end]);
-    const fetchLabelValuesUtilization = useCallback(async (labelName) => {
-        return (await utilizationLabels?.utilizationFetchLabelValues?.(labelName)) ?? [];
-    }, [utilizationLabels]);
+    }, [parcaQueryClient, metadata, profileType, reactQueryClient, start, end]);
     const updateMatchersString = useCallback((rows) => {
         const matcherString = rows
             .filter(row => row.labelName.length > 0 && row.labelValue)
             .map(row => `${row.labelName}${row.operator}"${row.labelValue}"`)
             .join(',');
-        setMatchersString(matcherString);
-    }, [setMatchersString]);
-    const { labelNameOptions, isLoading: labelNamesLoading, refetchLabelValues, refetchLabelNames, } = useLabels();
+        setDraftMatchers(matcherString);
+    }, [setDraftMatchers]);
     // Helper to ensure selected label name is in the options (for page load before API returns)
     const getLabelNameOptionsWithSelected = useCallback((selectedLabelName) => {
         if (selectedLabelName === '')
@@ -184,14 +182,10 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
         }
     }, [labelNameOptions]);
     const fetchLabelValuesUnified = useCallback(async (labelName) => {
-        const labelType = labelNameOptions.find(option => option.values.some(e => e.key === labelName))?.type;
-        const labelValues = labelType === 'gpu'
-            ? await fetchLabelValuesUtilization(labelName)
-            : await fetchLabelValues(labelName);
-        return labelValues;
-    }, [fetchLabelValues, fetchLabelValuesUtilization, labelNameOptions]);
+        return await fetchLabelValues(labelName);
+    }, [fetchLabelValues]);
     useEffect(() => {
-        if (currentMatchers === '') {
+        if (currentMatchers === '' || currentMatchers === undefined) {
             const defaultRow = {
                 labelName: '',
                 operator: '=',
@@ -205,7 +199,7 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
         let isCancelled = false;
         const fetchAndSetQueryRows = async () => {
             const newRows = await Promise.all(currentMatchers.split(',').map(async (matcher) => {
-                const match = matcher.match(/([^=!~]+)([=!~]{1,2})(.+)/);
+                const match = matcher.match(/^([^=!~]+)([=!~]{1,2})(.+)$/);
                 if (match === null)
                     return null;
                 const [, labelName, operator, labelValue] = match;
@@ -314,11 +308,14 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
         };
     }, [queryRows, fetchLabelValuesUnified]);
     const isRowRegex = (row) => row.operator === '=~' || row.operator === '!~';
+    const handleRefetchForLabelValues = useCallback(async (labelName) => {
+        await fetchLabelValuesUnified(labelName);
+    }, [fetchLabelValuesUnified]);
     return (_jsxs("div", { className: `flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`, id: "simple-matchers", ...testId(TEST_IDS.SIMPLE_MATCHERS_CONTAINER), children: [visibleRows.map((row, index) => (_jsxs("div", { className: "flex items-center", ...testId(TEST_IDS.SIMPLE_MATCHER_ROW), children: [_jsx(Select, { items: getLabelNameOptionsWithSelected(row.labelName), 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, ...testId(TEST_IDS.LABEL_NAME_SELECT), refetchValues: refetchLabelNames }), _jsx(Select, { items: operatorOptions, onSelection: value => handleUpdateRow(index, 'operator', value), selectedKey: row.operator, className: "rounded-none ring-0 focus:ring-0 outline-none", ...testId(TEST_IDS.OPERATOR_SELECT) }), _jsx(Select, { items: transformLabelsForSelect(row.labelValue !== '' && !row.labelValues.includes(row.labelValue)
                             ? [...row.labelValues, row.labelValue]
                             : 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-[600px]', {
                             'w-[300px]': isRowRegex(row),
-                        }), searchable: true, disabled: row.labelName === '', loading: row.isLoading, onButtonClick: () => handleLabelValueClick(index), editable: isRowRegex(row), ...testId(TEST_IDS.LABEL_VALUE_SELECT), refetchValues: async () => await refetchLabelValues(row.labelName), showLoadingInButton: true }), _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'), ...testId(TEST_IDS.REMOVE_MATCHER_BUTTON), children: _jsx(Icon, { icon: "carbon:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }, index))), queryRows.length > 3 && !isActivelyEditing && (_jsx("button", { onClick: () => {
+                        }), searchable: true, disabled: row.labelName === '', loading: row.isLoading, onButtonClick: () => handleLabelValueClick(index), editable: isRowRegex(row), ...testId(TEST_IDS.LABEL_VALUE_SELECT), refetchValues: async () => await handleRefetchForLabelValues(row.labelName), showLoadingInButton: true }), _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'), ...testId(TEST_IDS.REMOVE_MATCHER_BUTTON), children: _jsx(Icon, { icon: "carbon:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }, index))), queryRows.length > 3 && !isActivelyEditing && (_jsx("button", { onClick: () => {
                     if (showAll) {
                         // Clicking "Show less" - collapse and stop editing mode
                         setShowAll(false);
@@ -330,12 +327,4 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
                     }
                 }, 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", ...testId(showAll ? TEST_IDS.SHOW_LESS_BUTTON : TEST_IDS.SHOW_MORE_BUTTON), 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", ...testId(TEST_IDS.ADD_MATCHER_BUTTON), children: _jsx(Icon, { icon: "material-symbols:add", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }));
 };
-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, start: props.start, end: props.end, children: _jsx(SimpleMatchers, { ...props }) }));
-}
+export default SimpleMatchers;

package/dist/ViewMatchers/index.d.ts

@@ -1,15 +1,6 @@
 import React from 'react';
-import { QueryServiceClient } from '@parca/client';
-import { Query } from '@parca/parser';
 interface Props {
     labelNames: string[];
-    profileType: string;
-    runQuery: () => void;
-    currentQuery: Query;
-    queryClient: QueryServiceClient;
-    setMatchersString: (arg: string) => void;
-    start?: number;
-    end?: number;
 }
 declare const ViewMatchers: React.FC<Props>;
 export default ViewMatchers;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ViewMatchers/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAKtE,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAMpC,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyKjC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ViewMatchers/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAatE,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwKjC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ViewMatchers/index.js

@@ -14,15 +14,23 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
-import { useGrpcMetadata } from '@parca/components';
+import { useGrpcMetadata, useParcaContext } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
 import CustomSelect from '../SimpleMatchers/Select';
-const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatchersString, start, end, currentQuery, }) => {
+import { useUnifiedLabels } from '../contexts/UnifiedLabelsContext';
+import { useQueryState } from '../hooks/useQueryState';
+const ViewMatchers = ({ labelNames }) => {
     const [labelValuesMap, setLabelValuesMap] = useState({});
     const [isLoading, setIsLoading] = useState({});
     const metadata = useGrpcMetadata();
-    const currentMatchers = currentQuery.matchersString();
+    const { queryServiceClient: parcaQueryClient } = useParcaContext();
+    const { suffix } = useUnifiedLabels();
+    const { draftSelection, setDraftMatchers, commitDraft, draftParsedQuery } = useQueryState({ suffix });
+    const currentMatchers = draftParsedQuery?.matchersString();
+    const profileType = draftParsedQuery?.profileType().toString();
+    const start = draftSelection.from;
+    const end = draftSelection.to;
     const parseCurrentMatchers = useCallback((matchersString) => {
         const matches = matchersString.match(/(\w+)="([^"]+)"/g);
         if (matches === null)
@@ -37,19 +45,19 @@ const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatch
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         {});
     }, []);
-    const initialSelections = parseCurrentMatchers(currentMatchers);
+    const initialSelections = parseCurrentMatchers(currentMatchers ?? '');
     const selectionsRef = useRef(initialSelections);
-    const runQueryRef = useRef(runQuery);
+    const commitDraftRef = useRef(commitDraft);
     const timeoutRef = useRef(null);
     useEffect(() => {
-        runQueryRef.current = runQuery;
-    }, [runQuery]);
+        commitDraftRef.current = commitDraft;
+    }, [commitDraft]);
     useEffect(() => {
         selectionsRef.current = initialSelections;
     }, [initialSelections]);
     const fetchLabelValues = useCallback(async (labelName) => {
         try {
-            const response = await queryClient.values({
+            const response = await parcaQueryClient.values({
                 labelName,
                 match: [],
                 profileType,
@@ -66,7 +74,7 @@ const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatch
             console.error('Error fetching label values:', error);
             return [];
         }
-    }, [queryClient, metadata, profileType, start, end]);
+    }, [parcaQueryClient, metadata, profileType, start, end]);
     const fetchAllLabelValues = useCallback(async () => {
         const newLabelValuesMap = {};
         const newIsLoading = {};
@@ -88,14 +96,14 @@ const ViewMatchers = ({ labelNames, profileType, queryClient, runQuery, setMatch
             .filter(([_, v]) => v !== null && v !== '')
             .map(([ln, v]) => `${ln}="${v}"`);
         const matcherString = matcherParts.join(',');
-        setMatchersString(matcherString);
+        setDraftMatchers(matcherString);
         if (timeoutRef.current !== null) {
             clearTimeout(timeoutRef.current);
         }
         timeoutRef.current = setTimeout(() => {
-            runQueryRef.current();
+            commitDraftRef.current();
         }, 300);
-    }, [setMatchersString]);
+    }, [setDraftMatchers]);
     const handleSelection = useCallback((labelName, value) => {
         selectionsRef.current = {
             ...selectionsRef.current,

package/dist/contexts/LabelsQueryProvider.d.ts

@@ -0,0 +1,35 @@
+import { QueryServiceClient } from '@parca/client';
+import { Query } from '@parca/parser';
+export interface LabelsQueryProviderContextType {
+    isLabelNamesLoading: boolean;
+    isLabelValuesLoading: boolean;
+    currentLabelName: string | null;
+    setCurrentLabelName: (name: string | null) => void;
+    refetchLabelValues: () => Promise<void>;
+    refetchLabelNames: () => Promise<void>;
+    labelNames: string[];
+    labelValues: string[];
+    queryClient: QueryServiceClient;
+    setMatchersString: (arg: string) => void;
+    runQuery: () => void;
+    currentQuery: Query;
+    profileType: string;
+    start?: number;
+    end?: number;
+    suffix?: '_a' | '_b';
+}
+interface LabelsQueryProviderProps {
+    children: React.ReactNode;
+    queryClient: QueryServiceClient;
+    setMatchersString: (arg: string) => void;
+    runQuery: () => void;
+    currentQuery: Query;
+    profileType: string;
+    start?: number;
+    end?: number;
+    suffix?: '_a' | '_b';
+}
+export declare function LabelsQueryProvider({ children, queryClient, setMatchersString, runQuery, currentQuery, profileType, start, end, suffix, }: LabelsQueryProviderProps): JSX.Element;
+export declare function useLabelsQueryProvider(): LabelsQueryProviderContextType;
+export {};
+//# sourceMappingURL=LabelsQueryProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabelsQueryProvider.d.ts","sourceRoot":"","sources":["../../src/contexts/LabelsQueryProvider.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAKpC,MAAM,WAAW,8BAA8B;IAC7C,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,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IAEtB,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAID,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,KAAK,EACL,GAAG,EACH,MAAM,GACP,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA2CxC;AAED,wBAAgB,sBAAsB,IAAI,8BAA8B,CAMvE"}

package/dist/contexts/LabelsQueryProvider.js

@@ -0,0 +1,70 @@
+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.
+/**
+ * LabelsQueryProvider - Data Fetching Layer
+ *
+ * This context provider is responsible for fetching label data from the Parca API
+ * and making it available to child components through React Context.
+ *
+ * Purpose:
+ * - Fetches label names and values from the Parca profiling API
+ * - Manages loading states for label data
+ * - Provides refetch functions for manual data refresh
+ * - Acts as the primary data source in the label provider architecture
+ *
+ * Architecture Pattern:
+ * This is the first layer in a three-layer architecture:
+ * 1. LabelsQueryProvider (this file) - Fetches data from API
+ * 2. LabelsSource (in ProfileSelector) - Transforms/merges data
+ * 3. UnifiedLabelsProvider - Provides unified interface to UI components
+ *
+ * Consumer Hook: useLabelsQueryProvider()
+ */
+import { createContext, useContext, useState } from 'react';
+import { useLabelNames, useLabelValues } from '../hooks/useLabels';
+import { useExtractedLabelNames } from './utils';
+const LabelsQueryProviderContext = createContext(null);
+export function LabelsQueryProvider({ children, queryClient, setMatchersString, runQuery, currentQuery, profileType, start, end, suffix, }) {
+    const [currentLabelName, setCurrentLabelName] = useState(null);
+    const { result: labelNamesResponse, loading: isLabelNamesLoading, refetch: labelNamesRefetch, } = useLabelNames(queryClient, profileType, start, end);
+    const labelNames = useExtractedLabelNames(labelNamesResponse.response, labelNamesResponse.error);
+    const { result: labelValuesOriginal, loading: isLabelValuesLoading, refetch: labelValuesRefetch, } = useLabelValues(queryClient, currentLabelName ?? '', profileType, start, end);
+    const labelValues = labelValuesOriginal.response;
+    const value = {
+        labelNames,
+        labelValues,
+        isLabelNamesLoading,
+        isLabelValuesLoading,
+        refetchLabelValues: labelValuesRefetch,
+        refetchLabelNames: labelNamesRefetch,
+        queryClient,
+        setMatchersString,
+        runQuery,
+        currentQuery,
+        profileType,
+        start,
+        end,
+        setCurrentLabelName,
+        currentLabelName,
+        suffix,
+    };
+    return (_jsx(LabelsQueryProviderContext.Provider, { value: value, children: children }));
+}
+export function useLabelsQueryProvider() {
+    const context = useContext(LabelsQueryProviderContext);
+    if (context === null) {
+        throw new Error('useLabelsQueryProvider must be used within a LabelsQueryProvider');
+    }
+    return context;
+}

package/dist/contexts/UnifiedLabelsContext.d.ts

@@ -0,0 +1,37 @@
+import type { SelectItem } from '../SimpleMatchers/Select';
+import { type LabelNameMapping } from './utils';
+interface LabelNameSection {
+    type: string;
+    values: SelectItem[];
+}
+interface UnifiedLabelsContextType {
+    labelNameMappingsForMatchersInput: LabelNameMapping[];
+    labelNameMappingsForSimpleMatchers: LabelNameSection[];
+    labelNames: string[];
+    labelValues: string[];
+    isLabelNamesLoading: boolean;
+    isLabelValuesLoading: boolean;
+    currentLabelName: string | null;
+    setCurrentLabelName: (name: string | null) => void;
+    shouldHandlePrefixes: boolean;
+    refetchLabelValues: () => Promise<void>;
+    refetchLabelNames: () => Promise<void>;
+    labelNameFromMatchers: string[];
+    suffix?: '_a' | '_b';
+}
+interface UnifiedLabelsProviderProps {
+    children: React.ReactNode;
+    currentLabelName: string | null;
+    setCurrentLabelName: (name: string | null) => void;
+    labelNames: string[];
+    labelValues: string[];
+    isLabelNamesLoading: boolean;
+    isLabelValuesLoading: boolean;
+    refetchLabelValues: () => Promise<void>;
+    refetchLabelNames: () => Promise<void>;
+    suffix?: '_a' | '_b';
+}
+export declare function UnifiedLabelsProvider({ children, labelNames, isLabelNamesLoading, isLabelValuesLoading, refetchLabelValues, refetchLabelNames, currentLabelName, setCurrentLabelName, labelValues, suffix, }: UnifiedLabelsProviderProps): JSX.Element;
+export declare function useUnifiedLabels(): UnifiedLabelsContextType;
+export {};
+//# sourceMappingURL=UnifiedLabelsContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UnifiedLabelsContext.d.ts","sourceRoot":"","sources":["../../src/contexts/UnifiedLabelsContext.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAuB,KAAK,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAEpE,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,wBAAwB;IAChC,iCAAiC,EAAE,gBAAgB,EAAE,CAAC;IACtD,kCAAkC,EAAE,gBAAgB,EAAE,CAAC;IACvD,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IAEtB,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;IAC9B,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAEhC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAID,UAAU,0BAA0B;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAE9B,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,MAAM,GACP,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,CAqD1C;AAED,wBAAgB,gBAAgB,IAAI,wBAAwB,CAM3D"}

package/dist/contexts/UnifiedLabelsContext.js

@@ -0,0 +1,88 @@
+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.
+/**
+ * UnifiedLabelsProvider - UI Presentation Layer
+ *
+ * This context provider transforms raw label data into a format optimized for
+ * UI components (QueryControls, SimpleMatchers, etc.).
+ *
+ * Purpose:
+ * - Transforms label arrays into structured formats for dropdowns and selectors
+ * - Groups labels by type (e.g., 'cpu', 'gpu') for organized display
+ * - Handles label name prefixes and mappings for user-friendly display
+ * - Provides a unified interface regardless of data source(s)
+ *
+ * Architecture Pattern:
+ * This is the final layer in a three-layer architecture:
+ * 1. LabelsQueryProvider - Fetches data from API
+ * 2. LabelsSource (in ProfileSelector) - Transforms/merges data
+ * 3. UnifiedLabelsProvider (this file) - Presents data to UI components
+ *
+ * Consumer Hook: useUnifiedLabels()
+ */
+import { createContext, useContext } from 'react';
+import { transformLabelsForSelect } from '../SimpleMatchers';
+import { useLabelNameMappings } from './utils';
+const UnifiedLabelsContext = createContext(null);
+export function UnifiedLabelsProvider({ children, labelNames, isLabelNamesLoading, isLabelValuesLoading, refetchLabelValues, refetchLabelNames, currentLabelName, setCurrentLabelName, labelValues, suffix, }) {
+    const labelNameFromMatchers = [];
+    const labelNamesFromAPI = labelNames;
+    const labelNameMappingsForMatchersInput = useLabelNameMappings(labelNamesFromAPI);
+    const allLabelNames = new Set(labelNamesFromAPI);
+    const nonMatchingLabels = labelNameFromMatchers.filter(label => !allLabelNames.has(label));
+    const labelNameMappingsForSimpleMatchers = [];
+    const labels = {
+        type: 'cpu',
+        labelNames: labelNamesFromAPI,
+        isLoading: isLabelNamesLoading,
+    };
+    labelNameMappingsForSimpleMatchers.push({
+        type: labels.type,
+        values: transformLabelsForSelect(labels.labelNames),
+    });
+    if (nonMatchingLabels.length > 0) {
+        const uniqueNonMatchingLabels = Array.from(new Set(nonMatchingLabels));
+        labelNameMappingsForSimpleMatchers.push({
+            type: '',
+            values: transformLabelsForSelect(uniqueNonMatchingLabels),
+        });
+    }
+    const value = {
+        labelNames: labelNamesFromAPI,
+        labelNameMappingsForMatchersInput,
+        isLabelNamesLoading,
+        isLabelValuesLoading,
+        currentLabelName,
+        labelValues,
+        setCurrentLabelName,
+        shouldHandlePrefixes: false,
+        refetchLabelValues: async () => {
+            await refetchLabelValues();
+        },
+        refetchLabelNames: async () => {
+            await refetchLabelNames();
+        },
+        labelNameFromMatchers,
+        labelNameMappingsForSimpleMatchers,
+        suffix,
+    };
+    return _jsx(UnifiedLabelsContext.Provider, { value: value, children: children });
+}
+export function useUnifiedLabels() {
+    const context = useContext(UnifiedLabelsContext);
+    if (context === null) {
+        throw new Error('useUnifiedLabels must be used within a UnifiedLabelsProvider');
+    }
+    return context;
+}