@parca/profile 0.19.81 → 0.19.82

package/src/SimpleMatchers/index.tsx

@@ -11,31 +11,23 @@
 // 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 {QueryServiceClient} from '@parca/client';
-import {useGrpcMetadata} from '@parca/components';
-import {Query} from '@parca/parser';
+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, {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;
 }
 
@@ -47,22 +39,12 @@ 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: <>{trimOtelPrefix(labelName)}</>,
-      expanded: <>{trimOtelPrefix(labelName)}</>,
+      active: <>{transformLabelName(labelName)}</>,
+      expanded: <>{transformLabelName(labelName)}</>,
     },
   }));
 };
@@ -115,25 +97,31 @@ 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) {
@@ -147,18 +135,25 @@ const SimpleMatchers = ({
 
   const maxWidthInPixels = `max-w-[${queryBrowserRef.current?.offsetWidth.toString() as string}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: string): Promise<string[]> => {
-      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: [],
@@ -183,14 +178,7 @@ const SimpleMatchers = ({
         return [];
       }
     },
-    [queryClient, metadata, profileType, reactQueryClient, start, end]
-  );
-
-  const fetchLabelValuesUtilization = useCallback(
-    async (labelName: string): Promise<string[]> => {
-      return (await utilizationLabels?.utilizationFetchLabelValues?.(labelName)) ?? [];
-    },
-    [utilizationLabels]
+    [parcaQueryClient, metadata, profileType, reactQueryClient, start, end]
   );
 
   const updateMatchersString = useCallback(
@@ -199,18 +187,11 @@ const SimpleMatchers = ({
         .filter(row => row.labelName.length > 0 && row.labelValue)
         .map(row => `${row.labelName}${row.operator}"${row.labelValue}"`)
         .join(',');
-      setMatchersString(matcherString);
+      setDraftMatchers(matcherString);
     },
-    [setMatchersString]
+    [setDraftMatchers]
   );
 
-  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 => {
@@ -276,20 +257,13 @@ const SimpleMatchers = ({
 
   const fetchLabelValuesUnified = useCallback(
     async (labelName: string): Promise<string[]> => {
-      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;
+      return await fetchLabelValues(labelName);
     },
-    [fetchLabelValues, fetchLabelValuesUtilization, labelNameOptions]
+    [fetchLabelValues]
   );
 
   useEffect(() => {
-    if (currentMatchers === '') {
+    if (currentMatchers === '' || currentMatchers === undefined) {
       const defaultRow = {
         labelName: '',
         operator: '=',
@@ -306,7 +280,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;
@@ -440,6 +414,13 @@ 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`}
@@ -485,7 +466,7 @@ const SimpleMatchers = ({
             onButtonClick={() => handleLabelValueClick(index)}
             editable={isRowRegex(row)}
             {...testId(TEST_IDS.LABEL_VALUE_SELECT)}
-            refetchValues={async () => await refetchLabelValues(row.labelName)}
+            refetchValues={async () => await handleRefetchForLabelValues(row.labelName)}
             showLoadingInButton={true}
           />
           <button
@@ -530,24 +511,4 @@ const 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>
-  );
-}
+export default SimpleMatchers;

package/src/ViewMatchers/index.tsx

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

package/src/contexts/LabelsQueryProvider.tsx

@@ -0,0 +1,142 @@
+// 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 {QueryServiceClient} from '@parca/client';
+import {Query} from '@parca/parser';
+
+import {useLabelNames, useLabelValues} from '../hooks/useLabels';
+import {useExtractedLabelNames} from './utils';
+
+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';
+}
+
+const LabelsQueryProviderContext = createContext<LabelsQueryProviderContextType | null>(null);
+
+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 function LabelsQueryProvider({
+  children,
+  queryClient,
+  setMatchersString,
+  runQuery,
+  currentQuery,
+  profileType,
+  start,
+  end,
+  suffix,
+}: LabelsQueryProviderProps): JSX.Element {
+  const [currentLabelName, setCurrentLabelName] = useState<string | null>(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 (
+    <LabelsQueryProviderContext.Provider value={value}>
+      {children}
+    </LabelsQueryProviderContext.Provider>
+  );
+}
+
+export function useLabelsQueryProvider(): LabelsQueryProviderContextType {
+  const context = useContext(LabelsQueryProviderContext);
+  if (context === null) {
+    throw new Error('useLabelsQueryProvider must be used within a LabelsQueryProvider');
+  }
+  return context;
+}

package/src/contexts/UnifiedLabelsContext.tsx

@@ -0,0 +1,155 @@
+// 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 type {SelectItem} from '../SimpleMatchers/Select';
+import {useLabelNameMappings, 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';
+}
+
+const UnifiedLabelsContext = createContext<UnifiedLabelsContextType | null>(null);
+
+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 function UnifiedLabelsProvider({
+  children,
+  labelNames,
+  isLabelNamesLoading,
+  isLabelValuesLoading,
+  refetchLabelValues,
+  refetchLabelNames,
+  currentLabelName,
+  setCurrentLabelName,
+  labelValues,
+  suffix,
+}: UnifiedLabelsProviderProps): JSX.Element {
+  const labelNameFromMatchers: string[] = [];
+
+  const labelNamesFromAPI = labelNames;
+
+  const labelNameMappingsForMatchersInput = useLabelNameMappings(labelNamesFromAPI);
+
+  const allLabelNames = new Set(labelNamesFromAPI);
+
+  const nonMatchingLabels = labelNameFromMatchers.filter(label => !allLabelNames.has(label));
+
+  const labelNameMappingsForSimpleMatchers: LabelNameSection[] = [];
+
+  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 <UnifiedLabelsContext.Provider value={value}>{children}</UnifiedLabelsContext.Provider>;
+}
+
+export function useUnifiedLabels(): UnifiedLabelsContextType {
+  const context = useContext(UnifiedLabelsContext);
+  if (context === null) {
+    throw new Error('useUnifiedLabels must be used within a UnifiedLabelsProvider');
+  }
+  return context;
+}

package/src/contexts/utils.ts

@@ -0,0 +1,43 @@
+// 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 {useMemo} from 'react';
+
+export interface LabelNameMapping {
+  displayName: string;
+  fullName: string;
+}
+
+export const transformLabelName = (labelName: string): string => {
+  return labelName.replace(/^(attributes\.|attributes_resource\.)/, '');
+};
+
+export const useLabelNameMappings = (labelNames: string[]): LabelNameMapping[] => {
+  return useMemo(() => {
+    return labelNames.map(name => ({
+      displayName: transformLabelName(name),
+      fullName: name,
+    }));
+  }, [labelNames]);
+};
+
+export const useExtractedLabelNames = (
+  response: {labelNames?: string[]} | undefined,
+  error: Error | undefined | null
+): string[] => {
+  return useMemo(() => {
+    return (error === undefined || error == null) && response !== undefined && response != null
+      ? response.labelNames?.filter(e => e !== '__name__') ?? []
+      : [];
+  }, [response, error]);
+};