@parca/profile 0.19.82 → 0.19.83

package/src/SimpleMatchers/Select.tsx

@@ -377,7 +377,7 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
               <RefreshButton
                 onClick={() => void handleRefetch()}
                 disabled={isRefetching}
-                title="Refresh results"
+                title="Refresh label values"
                 testId={TEST_IDS.LABEL_VALUE_REFRESH_BUTTON}
                 sticky={true}
                 loading={isRefetching}

package/src/SimpleMatchers/index.tsx

@@ -11,23 +11,31 @@
 // 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 {QueryServiceClient} from '@parca/client';
+import {useGrpcMetadata} from '@parca/components';
+import {Query} from '@parca/parser';
 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, {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;
 }
 
@@ -39,12 +47,22 @@ interface QueryRow {
   isLoading: boolean;
 }
 
+const trimOtelPrefix = (labelName: string): string => {
+  if (labelName.startsWith('attributes_resource.')) {
+    return labelName.replace('attributes_resource.', '');
+  }
+  if (labelName.startsWith('attributes.')) {
+    return labelName.replace('attributes.', '');
+  }
+  return labelName;
+};
+
 export const transformLabelsForSelect = (labelNames: string[]): SelectItem[] => {
   return labelNames.map(labelName => ({
     key: labelName,
     element: {
-      active: <>{transformLabelName(labelName)}</>,
-      expanded: <>{transformLabelName(labelName)}</>,
+      active: <>{trimOtelPrefix(labelName)}</>,
+      expanded: <>{trimOtelPrefix(labelName)}</>,
     },
   }));
 };
@@ -97,31 +115,25 @@ const operatorOptions = [
 ];
 
 const SimpleMatchers = ({
+  queryClient,
+  setMatchersString,
+  currentQuery,
+  profileType,
   queryBrowserRef,
-
+  start,
+  end,
   searchExecutedTimestamp,
 }: Props): JSX.Element => {
+  const utilizationLabels = useUtilizationLabels();
   const [queryRows, setQueryRows] = useState<QueryRow[]>([
     {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) {
@@ -135,25 +147,18 @@ const SimpleMatchers = ({
 
   const maxWidthInPixels = `max-w-[${queryBrowserRef.current?.offsetWidth.toString() as string}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: string): Promise<string[]> => {
-      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: [],
@@ -178,7 +183,14 @@ const SimpleMatchers = ({
         return [];
       }
     },
-    [parcaQueryClient, metadata, profileType, reactQueryClient, start, end]
+    [queryClient, metadata, profileType, reactQueryClient, start, end]
+  );
+
+  const fetchLabelValuesUtilization = useCallback(
+    async (labelName: string): Promise<string[]> => {
+      return (await utilizationLabels?.utilizationFetchLabelValues?.(labelName)) ?? [];
+    },
+    [utilizationLabels]
   );
 
   const updateMatchersString = useCallback(
@@ -187,11 +199,18 @@ const SimpleMatchers = ({
         .filter(row => row.labelName.length > 0 && row.labelValue)
         .map(row => `${row.labelName}${row.operator}"${row.labelValue}"`)
         .join(',');
-      setDraftMatchers(matcherString);
+      setMatchersString(matcherString);
     },
-    [setDraftMatchers]
+    [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: string): typeof labelNameOptions => {
@@ -257,13 +276,20 @@ const SimpleMatchers = ({
 
   const fetchLabelValuesUnified = useCallback(
     async (labelName: string): Promise<string[]> => {
-      return await fetchLabelValues(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]
+    [fetchLabelValues, fetchLabelValuesUtilization, labelNameOptions]
   );
 
   useEffect(() => {
-    if (currentMatchers === '' || currentMatchers === undefined) {
+    if (currentMatchers === '') {
       const defaultRow = {
         labelName: '',
         operator: '=',
@@ -280,7 +306,7 @@ const SimpleMatchers = ({
     const fetchAndSetQueryRows = async (): Promise<void> => {
       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;
@@ -414,13 +440,6 @@ const SimpleMatchers = ({
 
   const isRowRegex = (row: QueryRow): boolean => row.operator === '=~' || row.operator === '!~';
 
-  const handleRefetchForLabelValues = useCallback(
-    async (labelName: string): Promise<void> => {
-      await fetchLabelValuesUnified(labelName);
-    },
-    [fetchLabelValuesUnified]
-  );
-
   return (
     <div
       className={`flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`}
@@ -466,7 +485,7 @@ const SimpleMatchers = ({
             onButtonClick={() => handleLabelValueClick(index)}
             editable={isRowRegex(row)}
             {...testId(TEST_IDS.LABEL_VALUE_SELECT)}
-            refetchValues={async () => await handleRefetchForLabelValues(row.labelName)}
+            refetchValues={async () => await refetchLabelValues(row.labelName)}
             showLoadingInButton={true}
           />
           <button
@@ -511,4 +530,24 @@ const SimpleMatchers = ({
   );
 };
 
-export default SimpleMatchers;
+export default function SimpleMathersWithProvider(props: Props): JSX.Element {
+  const labelNameFromMatchers = useMemo(() => {
+    if (props.currentQuery === undefined) return [];
+
+    const matchers = props.currentQuery.matchers;
+
+    return matchers.map(matcher => matcher.key);
+  }, [props.currentQuery]);
+
+  return (
+    <LabelProvider
+      queryClient={props.queryClient}
+      profileType={props.profileType}
+      labelNameFromMatchers={labelNameFromMatchers}
+      start={props.start}
+      end={props.end}
+    >
+      <SimpleMatchers {...props} />
+    </LabelProvider>
+  );
+}

package/src/ViewMatchers/index.tsx

@@ -16,32 +16,40 @@ import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
 
-import {useGrpcMetadata, useParcaContext} from '@parca/components';
+import {QueryServiceClient} from '@parca/client';
+import {useGrpcMetadata} from '@parca/components';
+import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
 import CustomSelect, {SelectItem} from '../SimpleMatchers/Select';
-import {useUnifiedLabels} from '../contexts/UnifiedLabelsContext';
-import {useQueryState} from '../hooks/useQueryState';
 
 interface Props {
   labelNames: string[];
+  profileType: string;
+  runQuery: () => void;
+  currentQuery: Query;
+  queryClient: QueryServiceClient;
+  setMatchersString: (arg: string) => void;
+  start?: number;
+  end?: number;
 }
 
-const ViewMatchers: React.FC<Props> = ({labelNames}) => {
+const ViewMatchers: React.FC<Props> = ({
+  labelNames,
+  profileType,
+  queryClient,
+  runQuery,
+  setMatchersString,
+  start,
+  end,
+  currentQuery,
+}) => {
   const [labelValuesMap, setLabelValuesMap] = useState<Record<string, string[]>>({});
   const [isLoading, setIsLoading] = useState<Record<string, boolean>>({});
   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: string): Record<string, string> => {
     const matches = matchersString.match(/(\w+)="([^"]+)"/g);
@@ -60,15 +68,15 @@ const ViewMatchers: React.FC<Props> = ({labelNames}) => {
     );
   }, []);
 
-  const initialSelections = parseCurrentMatchers(currentMatchers ?? '');
+  const initialSelections = parseCurrentMatchers(currentMatchers);
   const selectionsRef = useRef<Record<string, string | null>>(initialSelections);
 
-  const commitDraftRef = useRef(commitDraft);
+  const runQueryRef = useRef(runQuery);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
-    commitDraftRef.current = commitDraft;
-  }, [commitDraft]);
+    runQueryRef.current = runQuery;
+  }, [runQuery]);
 
   useEffect(() => {
     selectionsRef.current = initialSelections;
@@ -77,7 +85,7 @@ const ViewMatchers: React.FC<Props> = ({labelNames}) => {
   const fetchLabelValues = useCallback(
     async (labelName: string): Promise<string[]> => {
       try {
-        const response = await parcaQueryClient.values(
+        const response = await queryClient.values(
           {
             labelName,
             match: [],
@@ -97,7 +105,7 @@ const ViewMatchers: React.FC<Props> = ({labelNames}) => {
         return [];
       }
     },
-    [parcaQueryClient, metadata, profileType, start, end]
+    [queryClient, metadata, profileType, start, end]
   );
 
   const fetchAllLabelValues = useCallback(async (): Promise<void> => {
@@ -127,16 +135,16 @@ const ViewMatchers: React.FC<Props> = ({labelNames}) => {
       .map(([ln, v]) => `${ln}="${v as string}"`);
 
     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: string, value: string | null): void => {

package/src/contexts/MatchersInputLabelsContext.tsx

@@ -0,0 +1,141 @@
+// 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 {QueryServiceClient} from '@parca/client';
+
+import {useFetchUtilizationLabelValues, useLabelNames, useLabelValues} from '../MatchersInput';
+import {useUtilizationLabels} from './UtilizationLabelsContext';
+
+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>;
+}
+
+const LabelsContext = createContext<LabelsContextType | null>(null);
+
+interface LabelsProviderProps {
+  children: React.ReactNode;
+  queryClient: QueryServiceClient;
+  profileType: string;
+  start?: number;
+  end?: number;
+}
+
+// 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,
+}: LabelsProviderProps): JSX.Element {
+  const [currentLabelName, setCurrentLabelName] = React.useState<string | null>(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 <LabelsContext.Provider value={value}>{children}</LabelsContext.Provider>;
+}
+
+export function useLabels(): LabelsContextType {
+  const context = useContext(LabelsContext);
+  if (context === null) {
+    throw new Error('useLabels must be used within a LabelsProvider');
+  }
+  return context;
+}

package/src/contexts/SimpleMatchersLabelContext.tsx

@@ -0,0 +1,189 @@
+// 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 {QueryServiceClient} from '@parca/client';
+
+import {useLabelNames} from '../MatchersInput';
+import {transformLabelsForSelect} from '../SimpleMatchers';
+import type {SelectItem} from '../SimpleMatchers/Select';
+import {useUtilizationLabels} from './UtilizationLabelsContext';
+
+interface LabelNameSection {
+  type: string;
+  values: SelectItem[];
+}
+
+interface LabelContextValue {
+  labelNameOptions: LabelNameSection[];
+  isLoading: boolean;
+  error: Error | null;
+  refetchLabelValues: (labelName?: string) => Promise<void>;
+  refetchLabelNames: () => Promise<void>;
+}
+
+const LabelContext = createContext<LabelContextValue | null>(null);
+
+interface LabelProviderProps {
+  children: React.ReactNode;
+  queryClient: QueryServiceClient;
+  profileType: string;
+  labelNameFromMatchers: string[];
+  start?: number;
+  end?: number;
+}
+
+// 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,
+}: LabelProviderProps): JSX.Element {
+  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: [] as string[], isLoading: true};
+    }
+    if (
+      utilizationLabelResponse == null ||
+      utilizationLabelResponse.utilizationLabelNames == null
+    ) {
+      return {labelNameOptions: [] as string[], 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?: string) => {
+      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 <LabelContext.Provider value={contextValue}>{children}</LabelContext.Provider>;
+}
+
+export function useLabels(): LabelContextValue {
+  const context = useContext(LabelContext);
+  if (context === null) {
+    throw new Error('useLabels must be used within a LabelProvider');
+  }
+  return context;
+}