@parca/profile 0.19.82 → 0.19.83

package/dist/SimpleMatchers/index.js

@@ -11,23 +11,31 @@ 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, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { useQueryClient } from '@tanstack/react-query';
 import cx from 'classnames';
-import { useGrpcMetadata, useParcaContext } from '@parca/components';
+import { useGrpcMetadata } from '@parca/components';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
-import { useUnifiedLabels } from '../contexts/UnifiedLabelsContext';
-import { transformLabelName } from '../contexts/utils';
-import { useQueryState } from '../hooks/useQueryState';
+import { LabelProvider, useLabels } from '../contexts/SimpleMatchersLabelContext';
+import { useUtilizationLabels } from '../contexts/UtilizationLabelsContext';
 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: transformLabelName(labelName) }),
-            expanded: _jsx(_Fragment, { children: transformLabelName(labelName) }),
+            active: _jsx(_Fragment, { children: trimOtelPrefix(labelName) }),
+            expanded: _jsx(_Fragment, { children: trimOtelPrefix(labelName) }),
         },
     }));
 };
@@ -61,19 +69,15 @@ const operatorOptions = [
         },
     },
 ];
-const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
+const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileType, queryBrowserRef, start, end, searchExecutedTimestamp, }) => {
+    const utilizationLabels = useUtilizationLabels();
     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) {
@@ -84,20 +88,14 @@ const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
     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 = draftParsedQuery?.matchersString();
-    const profileType = draftParsedQuery?.profileType().toString();
-    const start = draftSelection.from;
-    const end = draftSelection.to;
+    const currentMatchers = currentQuery.matchersString();
     const fetchLabelValues = useCallback(async (labelName) => {
-        if (labelName == null || labelName === '') {
-            return [];
-        }
-        if (profileType == null || profileType === '') {
+        if (labelName == null || labelName === '' || profileType == null || profileType === '') {
             return [];
         }
         try {
             const values = await reactQueryClient.fetchQuery([labelName, profileType, start, end], async () => {
-                const response = await parcaQueryClient.values({
+                const response = await queryClient.values({
                     labelName,
                     match: [],
                     profileType,
@@ -118,14 +116,18 @@ const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
             console.error('Error fetching label values:', error);
             return [];
         }
-    }, [parcaQueryClient, metadata, profileType, reactQueryClient, start, end]);
+    }, [queryClient, metadata, profileType, reactQueryClient, start, end]);
+    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)
             .map(row => `${row.labelName}${row.operator}"${row.labelValue}"`)
             .join(',');
-        setDraftMatchers(matcherString);
-    }, [setDraftMatchers]);
+        setMatchersString(matcherString);
+    }, [setMatchersString]);
+    const { labelNameOptions, isLoading: labelNamesLoading, refetchLabelValues, refetchLabelNames, } = useLabels();
     // Helper to ensure selected label name is in the options (for page load before API returns)
     const getLabelNameOptionsWithSelected = useCallback((selectedLabelName) => {
         if (selectedLabelName === '')
@@ -182,10 +184,14 @@ const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
         }
     }, [labelNameOptions]);
     const fetchLabelValuesUnified = useCallback(async (labelName) => {
-        return await fetchLabelValues(labelName);
-    }, [fetchLabelValues]);
+        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]);
     useEffect(() => {
-        if (currentMatchers === '' || currentMatchers === undefined) {
+        if (currentMatchers === '') {
             const defaultRow = {
                 labelName: '',
                 operator: '=',
@@ -199,7 +205,7 @@ const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
         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;
@@ -308,14 +314,11 @@ const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
         };
     }, [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 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: () => {
+                        }), 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: () => {
                     if (showAll) {
                         // Clicking "Show less" - collapse and stop editing mode
                         setShowAll(false);
@@ -327,4 +330,12 @@ const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, }) => {
                     }
                 }, 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 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, start: props.start, end: props.end, children: _jsx(SimpleMatchers, { ...props }) }));
+}

package/dist/ViewMatchers/index.d.ts

@@ -1,6 +1,15 @@
 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;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"}
+{"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"}

package/dist/ViewMatchers/index.js

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

package/dist/contexts/MatchersInputLabelsContext.d.ts

@@ -0,0 +1,29 @@
+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;
+    refetchLabelValues: () => Promise<void>;
+    refetchLabelNames: () => Promise<void>;
+}
+interface LabelsProviderProps {
+    children: React.ReactNode;
+    queryClient: QueryServiceClient;
+    profileType: string;
+    start?: number;
+    end?: number;
+}
+export declare function LabelsProvider({ children, queryClient, profileType, start, end, }: 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;IAC9B,kBAAkB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC;AAID,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAID,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,WAAW,EACX,KAAK,EACL,GAAG,GACJ,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CA4EnC;AAED,wBAAgB,SAAS,IAAI,iBAAiB,CAM7C"}

package/dist/contexts/MatchersInputLabelsContext.js

@@ -0,0 +1,79 @@
+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, start, end, }) {
+    const [currentLabelName, setCurrentLabelName] = React.useState(null);
+    const utilizationLabels = useUtilizationLabels();
+    const { result: labelNamesResponse, loading: isLabelNamesLoading, refetch: refetchLabelNames, } = useLabelNames(queryClient, profileType, start, end);
+    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, refetch: refetchLabelValues, } = useLabelValues(queryClient, currentLabelName ?? '', profileType, start, end);
+    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,
+        refetchLabelValues,
+        refetchLabelNames,
+    }), [
+        labelNames,
+        labelValues,
+        labelNameMappings,
+        isLabelNamesLoading,
+        isLabelValuesLoading,
+        currentLabelName,
+        shouldHandlePrefixes,
+        refetchLabelValues,
+        refetchLabelNames,
+    ]);
+    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,25 @@
+import { QueryServiceClient } from '@parca/client';
+import type { SelectItem } from '../SimpleMatchers/Select';
+interface LabelNameSection {
+    type: string;
+    values: SelectItem[];
+}
+interface LabelContextValue {
+    labelNameOptions: LabelNameSection[];
+    isLoading: boolean;
+    error: Error | null;
+    refetchLabelValues: (labelName?: string) => Promise<void>;
+    refetchLabelNames: () => Promise<void>;
+}
+interface LabelProviderProps {
+    children: React.ReactNode;
+    queryClient: QueryServiceClient;
+    profileType: string;
+    labelNameFromMatchers: string[];
+    start?: number;
+    end?: number;
+}
+export declare function LabelProvider({ children, queryClient, profileType, labelNameFromMatchers, start, end, }: 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":"AAiBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAGzD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,kBAAkB,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC;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;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAKD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,EACX,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,GACJ,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0HlC;AAED,wBAAgB,SAAS,IAAI,iBAAiB,CAM7C"}

package/dist/contexts/SimpleMatchersLabelContext.js

@@ -0,0 +1,115 @@
+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 { createContext, useCallback, useContext, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useLabelNames } from '../MatchersInput';
+import { transformLabelsForSelect } from '../SimpleMatchers';
+import { useUtilizationLabels } from './UtilizationLabelsContext';
+const LabelContext = 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 LabelProvider({ children, queryClient, profileType, labelNameFromMatchers, start, end, }) {
+    const reactQueryClient = useQueryClient();
+    const utilizationLabelResponse = useUtilizationLabels();
+    const { loading, result, refetch: refetchLabelNamesQuery, } = useLabelNames(queryClient, profileType, start, end);
+    const profileValues = useMemo(() => {
+        const profileLabelNames = result.error != null ? [] : result.response?.labelNames.filter(e => e !== '__name__') ?? [];
+        const uniqueProfileLabelNames = Array.from(new Set(profileLabelNames));
+        return {
+            labelNameOptions: uniqueProfileLabelNames,
+            isLoading: loading,
+            error: result.error ?? null,
+        };
+    }, [result, loading]);
+    const utilizationValues = useMemo(() => {
+        if (utilizationLabelResponse?.utilizationLabelNamesLoading === true) {
+            return { labelNameOptions: [], isLoading: true };
+        }
+        if (utilizationLabelResponse == null ||
+            utilizationLabelResponse.utilizationLabelNames == null) {
+            return { labelNameOptions: [], isLoading: false };
+        }
+        const uniqueUtilizationLabelNames = Array.from(new Set(utilizationLabelResponse.utilizationLabelNames));
+        return {
+            labelNameOptions: uniqueUtilizationLabelNames,
+            isLoading: utilizationLabelResponse.utilizationLabelNamesLoading,
+        };
+    }, [utilizationLabelResponse]);
+    const value = useMemo(() => {
+        if (profileValues.error != null ||
+            profileValues.isLoading ||
+            utilizationValues.isLoading === true) {
+            return {
+                labelNameOptions: [],
+                isLoading: (profileValues.isLoading || utilizationValues.isLoading) ?? false,
+                error: profileValues.error,
+            };
+        }
+        let nonMatchingLabels = labelNameFromMatchers.filter(label => !utilizationValues.labelNameOptions.includes(label));
+        nonMatchingLabels = nonMatchingLabels.filter(label => !profileValues.labelNameOptions.includes(label));
+        const nonMatchingLabelsSet = Array.from(new Set(nonMatchingLabels));
+        const options = [
+            {
+                type: 'cpu',
+                values: transformLabelsForSelect(profileValues.labelNameOptions),
+            },
+            {
+                type: 'gpu',
+                values: transformLabelsForSelect(utilizationValues.labelNameOptions),
+            },
+            {
+                type: '',
+                values: transformLabelsForSelect(nonMatchingLabelsSet),
+            },
+        ];
+        return {
+            labelNameOptions: options.filter(e => e.values.length > 0),
+            isLoading: false,
+            error: null,
+        };
+    }, [profileValues, utilizationValues, labelNameFromMatchers]);
+    const refetchLabelValues = useCallback(async (labelName) => {
+        await reactQueryClient.refetchQueries({
+            predicate: query => {
+                const key = query.queryKey;
+                const matchesStructure = Array.isArray(key) &&
+                    key.length === 4 &&
+                    typeof key[0] === 'string' &&
+                    key[1] === profileType;
+                if (!matchesStructure)
+                    return false;
+                if (labelName !== undefined && labelName !== '') {
+                    return key[0] === labelName;
+                }
+                return true;
+            },
+        });
+    }, [reactQueryClient, profileType]);
+    const refetchLabelNames = useCallback(async () => {
+        await refetchLabelNamesQuery();
+    }, [refetchLabelNamesQuery]);
+    const contextValue = useMemo(() => ({
+        ...value,
+        refetchLabelValues,
+        refetchLabelNames,
+    }), [value, refetchLabelValues, refetchLabelNames]);
+    return _jsx(LabelContext.Provider, { value: contextValue, children: children });
+}
+export function useLabels() {
+    const context = useContext(LabelContext);
+    if (context === null) {
+        throw new Error('useLabels must be used within a LabelProvider');
+    }
+    return context;
+}

package/dist/contexts/UtilizationLabelsContext.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface UtilizationLabels {
+    utilizationLabelNames?: string[];
+    utilizationFetchLabelValues?: (key: string) => Promise<string[]>;
+    utilizationLabelValues?: string[];
+    utilizationLabelNamesLoading?: boolean;
+}
+interface UtilizationLabelsProviderProps {
+    children: ReactNode;
+    value: UtilizationLabels | undefined;
+}
+export declare function UtilizationLabelsProvider({ children, value, }: UtilizationLabelsProviderProps): JSX.Element;
+export declare function useUtilizationLabels(): UtilizationLabels | undefined;
+export {};
+//# sourceMappingURL=UtilizationLabelsContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UtilizationLabelsContext.d.ts","sourceRoot":"","sources":["../../src/contexts/UtilizationLabelsContext.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,SAAS,EAA4B,MAAM,OAAO,CAAC;AAE3D,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;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC;AAED,UAAU,8BAA8B;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAAC;CACtC;AAOD,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,KAAK,GACN,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAI9C;AAED,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,SAAS,CAGpE"}

package/dist/contexts/UtilizationLabelsContext.js

@@ -0,0 +1,25 @@
+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 { createContext, useContext } from 'react';
+// The UtilizationLabelsContext is used to store the utilization label names and values. It also
+// contains the function utilizationFetchLabelValues to fetch the utilization label values.
+// This context was created so as to avoid props drilling.
+const UtilizationLabelsContext = createContext(undefined);
+export function UtilizationLabelsProvider({ children, value, }) {
+    return (_jsx(UtilizationLabelsContext.Provider, { value: value, children: children }));
+}
+export function useUtilizationLabels() {
+    const context = useContext(UtilizationLabelsContext);
+    return context;
+}

package/dist/hooks/useQueryState.d.ts

@@ -26,8 +26,6 @@ interface UseQueryStateReturn {
     profileSource: ProfileSource | null;
     setProfileSelection: (mergeFrom: bigint, mergeTo: bigint, query: Query) => void;
     sumByLoading: boolean;
-    draftParsedQuery: Query | null;
-    parsedQuery: Query | null;
 }
 export declare const useQueryState: (options?: UseQueryStateOptions) => UseQueryStateReturn;
 export {};

package/dist/hooks/useQueryState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAI7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CAAC,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAG9F,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;IAGtB,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC;IAG/B,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBAsXlE,CAAC"}
+{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAI7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CAAC,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAG9F,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBAmWlE,CAAC"}

package/dist/hooks/useQueryState.js

@@ -267,22 +267,6 @@ export const useQueryState = (options = {}) => {
             setMergeToState(mergeTo.toString());
         });
     }, [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]);
-    const draftParsedQuery = useMemo(() => {
-        try {
-            return Query.parse(draftSelection.expression ?? '');
-        }
-        catch {
-            return Query.parse('');
-        }
-    }, [draftSelection.expression]);
-    const parsedQuery = useMemo(() => {
-        try {
-            return Query.parse(querySelection.expression ?? '');
-        }
-        catch {
-            return Query.parse('');
-        }
-    }, [querySelection.expression]);
     return {
         // Current committed state
         querySelection,
@@ -302,7 +286,5 @@ export const useQueryState = (options = {}) => {
         setProfileSelection,
         // Loading state
         sumByLoading: sumBySelectionLoading,
-        draftParsedQuery,
-        parsedQuery,
     };
 };