@parca/profile 0.19.60 → 0.19.62

package/src/SimpleMatchers/Select.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
@@ -55,6 +55,9 @@ interface CustomSelectProps {
   searchable?: boolean;
   onButtonClick?: () => void;
   editable?: boolean;
+  refetchLabelValues?: () => void;
+  showLoadingInButton?: boolean;
+  hasRefreshButton?: boolean;
 }
 
 const CustomSelect: React.FC<CustomSelectProps> = ({
@@ -73,16 +76,31 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
   searchable = false,
   onButtonClick,
   editable = false,
+  refetchLabelValues,
+  showLoadingInButton = false,
+  hasRefreshButton = false,
 }) => {
   const {loader} = useParcaContext();
   const [isOpen, setIsOpen] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const [searchTerm, setSearchTerm] = useState('');
+  const [isRefetching, setIsRefetching] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const optionsRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   const optionRefs = useRef<Array<HTMLElement | null>>([]);
 
+  const handleRefetch = useCallback(async () => {
+    if (refetchLabelValues == null || isRefetching) return;
+
+    setIsRefetching(true);
+    try {
+      await refetchLabelValues();
+    } finally {
+      setIsRefetching(false);
+    }
+  }, [refetchLabelValues, isRefetching]);
+
   let items: TypedSelectItem[] = [];
   if (itemsProp[0] != null && 'type' in itemsProp[0]) {
     items = (itemsProp as GroupedSelectItem[]).flatMap(item =>
@@ -192,6 +210,15 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
     'text-gray-100 dark:gray-900 bg-indigo-600 border-indigo-500 font-medium py-2 px-4';
 
   const renderSelection = (selection: SelectItem | string | undefined): string | JSX.Element => {
+    if (showLoadingInButton && loading === true && selectedKey === '') {
+      return (
+        <span className="flex items-center gap-2" data-testid="label-value-loading-indicator">
+          <Icon icon="svg-spinners:ring-resize" className="w-4 h-4" />
+          <span>Loading...</span>
+        </span>
+      );
+    }
+
     if (editable) {
       return typeof selection === 'string' && selection.length > 0 ? selection : placeholder;
     } else {
@@ -265,71 +292,112 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
           )}
           role="listbox"
         >
-          {searchable && (
-            <div className="sticky z-10 top-[-5px] w-auto max-w-full">
-              <div className="flex flex-col">
-                {editable ? (
-                  <>
-                    <textarea
-                      ref={searchInputRef as React.LegacyRef<HTMLTextAreaElement>}
-                      className="w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]"
-                      placeholder="Type a RegEx to add"
+          <div className={cx('relative', {'pb-6': hasRefreshButton})}>
+            {searchable && (
+              <div className="sticky z-10 top-[-5px] w-auto max-w-full">
+                <div className="flex flex-col">
+                  {editable ? (
+                    <>
+                      <textarea
+                        ref={searchInputRef as React.LegacyRef<HTMLTextAreaElement>}
+                        className="w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]"
+                        placeholder="Type a RegEx to add"
+                        value={searchTerm}
+                        onChange={e => setSearchTerm(e.target.value)}
+                        onFocus={e => moveCaretToEnd(e)}
+                      />
+                      {editable && searchTerm.length > 0 && (
+                        <div className="p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+                          <Button
+                            variant="primary"
+                            className="w-full h-[30px]"
+                            onClick={() => {
+                              onSelection(searchTerm);
+                              setIsOpen(false);
+                            }}
+                          >
+                            Add
+                          </Button>
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <input
+                      ref={searchInputRef as React.LegacyRef<HTMLInputElement>}
+                      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)}
-                      onFocus={e => moveCaretToEnd(e)}
                     />
-                    {editable && searchTerm.length > 0 && (
-                      <div className="p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-                        <Button
-                          variant="primary"
-                          className="w-full h-[30px]"
-                          onClick={() => {
-                            onSelection(searchTerm);
-                            setIsOpen(false);
-                          }}
-                        >
-                          Add
-                        </Button>
-                      </div>
+                  )}
+                </div>
+              </div>
+            )}
+            {refetchLabelValues !== undefined && loading !== true && (
+              <div className="absolute w-full bottom-0 px-3 bg-gray-50 dark:bg-gray-800">
+                <button
+                  onClick={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    void handleRefetch();
+                  }}
+                  disabled={isRefetching}
+                  className={cx(
+                    'p-1 flex items-center gap-1 rounded-full transition-all duration-200 w-full justify-center',
+                    isRefetching
+                      ? 'cursor-wait opacity-50'
+                      : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
+                  )}
+                  title="Refresh label values"
+                  type="button"
+                  data-testid="label-value-refresh-button"
+                >
+                  <Icon
+                    icon="system-uicons:reset"
+                    className={cx(
+                      'w-3 h-3 text-gray-500 dark:text-gray-400',
+                      isRefetching && 'animate-spin'
                     )}
-                  </>
-                ) : (
-                  <input
-                    ref={searchInputRef as React.LegacyRef<HTMLInputElement>}
-                    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)}
                   />
-                )}
+                  <span className="text-xs text-gray-500 dark:text-gray-400">Refresh results</span>
+                </button>
               </div>
-            </div>
-          )}
-          {loading === true ? (
-            <div className="w-[270px]">{loader}</div>
-          ) : (
-            groupedFilteredItems.map(group => (
-              <>
-                {groupedFilteredItems.length > 1 ? (
-                  <div className="pl-2">
-                    <DividerWithLabel label={group.type} />
-                  </div>
-                ) : null}
-                {group.values.map((item, index) => (
-                  <OptionItem
-                    key={item.key}
-                    item={item}
-                    index={index}
-                    optionRefs={optionRefs}
-                    focusedIndex={focusedIndex}
-                    selectedKey={selectedKey}
-                    handleSelection={handleSelection}
-                  />
-                ))}
-              </>
-            ))
-          )}
+            )}
+            {loading === true ? (
+              <div className="w-[270px]">{loader}</div>
+            ) : groupedFilteredItems.length === 0 ? (
+              <div
+                className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center"
+                data-testid="label-value-no-results"
+              >
+                No values found
+              </div>
+            ) : (
+              groupedFilteredItems.map(group => (
+                <>
+                  {groupedFilteredItems.length > 1 &&
+                  groupedFilteredItems.every(g => g.type !== '') &&
+                  group.type !== '' ? (
+                    <div className="pl-2">
+                      <DividerWithLabel label={group.type} />
+                    </div>
+                  ) : null}
+                  {group.values.map((item, index) => (
+                    <OptionItem
+                      key={item.key}
+                      item={item}
+                      index={index}
+                      optionRefs={optionRefs}
+                      focusedIndex={focusedIndex}
+                      selectedKey={selectedKey}
+                      handleSelection={handleSelection}
+                    />
+                  ))}
+                </>
+              ))
+            )}
+          </div>
         </div>
       )}
     </div>

package/src/SimpleMatchers/index.tsx

@@ -36,6 +36,7 @@ interface Props {
   queryBrowserRef: React.RefObject<HTMLDivElement>;
   start?: number;
   end?: number;
+  searchExecutedTimestamp?: number;
 }
 
 interface QueryRow {
@@ -121,6 +122,7 @@ const SimpleMatchers = ({
   queryBrowserRef,
   start,
   end,
+  searchExecutedTimestamp,
 }: Props): JSX.Element => {
   const utilizationLabels = useUtilizationLabels();
   const [queryRows, setQueryRows] = useState<QueryRow[]>([
@@ -130,8 +132,17 @@ const SimpleMatchers = ({
   const metadata = useGrpcMetadata();
 
   const [showAll, setShowAll] = useState(false);
+  const [isActivelyEditing, setIsActivelyEditing] = useState(false);
 
-  const visibleRows = showAll ? queryRows : queryRows.slice(0, 3);
+  // Reset editing mode when search is executed
+  useEffect(() => {
+    if (searchExecutedTimestamp !== undefined && searchExecutedTimestamp > 0) {
+      setIsActivelyEditing(false);
+      setShowAll(false);
+    }
+  }, [searchExecutedTimestamp]);
+
+  const visibleRows = showAll || isActivelyEditing ? queryRows : queryRows.slice(0, 3);
   const hiddenRowsCount = queryRows.length - 3;
 
   const maxWidthInPixels = `max-w-[${queryBrowserRef.current?.offsetWidth.toString() as string}px]`;
@@ -163,9 +174,6 @@ const SimpleMatchers = ({
             ).response;
             const sanitizedValues = sanitizeLabelValue(response.labelValues);
             return sanitizedValues;
-          },
-          {
-            staleTime: 1000 * 60 * 5, // 5 minutes
           }
         );
         return values;
@@ -195,7 +203,70 @@ const SimpleMatchers = ({
     [setMatchersString]
   );
 
-  const {labelNameOptions, isLoading: labelNamesLoading} = useLabels();
+  const {labelNameOptions, isLoading: labelNamesLoading, refetchLabelValues} = useLabels();
+
+  // Helper to ensure selected label name is in the options (for page load before API returns)
+  const getLabelNameOptionsWithSelected = useCallback(
+    (selectedLabelName: string): typeof labelNameOptions => {
+      if (selectedLabelName === '') return labelNameOptions;
+
+      // Check if the selected label name exists in any group
+      const existsInOptions = labelNameOptions.some(group =>
+        group.values.some(item => item.key === selectedLabelName)
+      );
+
+      if (existsInOptions) return labelNameOptions;
+
+      // Add it temporarily to a group with type '' (matching non-matching labels group)
+      if (labelNameOptions.length === 0) {
+        return [
+          {
+            type: '',
+            values: [
+              {
+                key: selectedLabelName,
+                element: {active: <>{selectedLabelName}</>, expanded: <>{selectedLabelName}</>},
+              },
+            ],
+          },
+        ];
+      }
+
+      // Find the group with type '' (non-matching labels) or create it
+      const emptyTypeGroupIndex = labelNameOptions.findIndex(group => group.type === '');
+
+      if (emptyTypeGroupIndex !== -1) {
+        // Add to existing '' type group
+        const updatedOptions = [...labelNameOptions];
+        updatedOptions[emptyTypeGroupIndex] = {
+          ...updatedOptions[emptyTypeGroupIndex],
+          values: [
+            ...updatedOptions[emptyTypeGroupIndex].values,
+            {
+              key: selectedLabelName,
+              element: {active: <>{selectedLabelName}</>, expanded: <>{selectedLabelName}</>},
+            },
+          ],
+        };
+        return updatedOptions;
+      } else {
+        // Create new '' type group
+        return [
+          ...labelNameOptions,
+          {
+            type: '',
+            values: [
+              {
+                key: selectedLabelName,
+                element: {active: <>{selectedLabelName}</>, expanded: <>{selectedLabelName}</>},
+              },
+            ],
+          },
+        ];
+      }
+    },
+    [labelNameOptions]
+  );
 
   const fetchLabelValuesUnified = useCallback(
     async (labelName: string): Promise<string[]> => {
@@ -290,19 +361,29 @@ const SimpleMatchers = ({
 
   const handleUpdateRow = useCallback(
     (index: number, field: keyof QueryRow, value: string) => {
+      // Only set actively editing if not already showing all
+      // If showAll is true, user has explicitly expanded, so keep that state
+      if (!showAll) {
+        setIsActivelyEditing(true);
+      }
       void updateRow(index, field, value);
     },
-    [updateRow]
+    [updateRow, showAll]
   );
 
   const addNewRow = useCallback((): void => {
+    // Only set actively editing if not already showing all label names and values
+    // If showAll is true, user has explicitly expanded, so keep that state
+    if (!showAll) {
+      setIsActivelyEditing(true);
+    }
     const newRows = [
       ...queryRows,
       {labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false},
     ];
     setQueryRows(newRows);
     updateMatchersString(newRows);
-  }, [queryRows, updateMatchersString]);
+  }, [queryRows, updateMatchersString, showAll]);
 
   const removeRow = useCallback(
     (index: number): void => {
@@ -362,7 +443,7 @@ const SimpleMatchers = ({
       {visibleRows.map((row, index) => (
         <div key={index} className="flex items-center" {...testId(TEST_IDS.SIMPLE_MATCHER_ROW)}>
           <Select
-            items={labelNameOptions}
+            items={getLabelNameOptionsWithSelected(row.labelName)}
             onSelection={value => handleUpdateRow(index, 'labelName', value)}
             placeholder="Select label name"
             selectedKey={row.labelName}
@@ -379,12 +460,16 @@ const SimpleMatchers = ({
             {...testId(TEST_IDS.OPERATOR_SELECT)}
           />
           <Select
-            items={transformLabelsForSelect(row.labelValues)}
+            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-[300px]', {
+            optionsClassname={cx('max-w-[600px]', {
               'w-[300px]': isRowRegex(row),
             })}
             searchable={true}
@@ -393,6 +478,9 @@ const SimpleMatchers = ({
             onButtonClick={() => handleLabelValueClick(index)}
             editable={isRowRegex(row)}
             {...testId(TEST_IDS.LABEL_VALUE_SELECT)}
+            refetchLabelValues={refetchLabelValues}
+            showLoadingInButton={true}
+            hasRefreshButton={true}
           />
           <button
             onClick={() => removeRow(index)}
@@ -406,9 +494,18 @@ const SimpleMatchers = ({
         </div>
       ))}
 
-      {queryRows.length > 3 && (
+      {queryRows.length > 3 && !isActivelyEditing && (
         <button
-          onClick={() => setShowAll(!showAll)}
+          onClick={() => {
+            if (showAll) {
+              // Clicking "Show less" - collapse and stop editing mode
+              setShowAll(false);
+              setIsActivelyEditing(false);
+            } else {
+              // Clicking "Show more" - just expand
+              setShowAll(true);
+            }
+          }}
           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)}
         >

package/src/ViewMatchers/index.tsx

@@ -108,26 +108,26 @@ const ViewMatchers: React.FC<Props> = ({
     [queryClient, metadata, profileType, start, end]
   );
 
-  useEffect(() => {
-    const fetchAllLabelValues = async (): Promise<void> => {
-      const newLabelValuesMap: Record<string, string[]> = {};
-      const newIsLoading: Record<string, boolean> = {};
+  const fetchAllLabelValues = useCallback(async (): Promise<void> => {
+    const newLabelValuesMap: Record<string, string[]> = {};
+    const newIsLoading: Record<string, boolean> = {};
 
-      for (const labelName of labelNames) {
-        newIsLoading[labelName] = true;
-        setIsLoading(prev => ({...prev, [labelName]: true}));
+    for (const labelName of labelNames) {
+      newIsLoading[labelName] = true;
+      setIsLoading(prev => ({...prev, [labelName]: true}));
 
-        const values = await fetchLabelValues(labelName);
-        newLabelValuesMap[labelName] = values;
-        newIsLoading[labelName] = false;
-      }
+      const values = await fetchLabelValues(labelName);
+      newLabelValuesMap[labelName] = values;
+      newIsLoading[labelName] = false;
+    }
 
-      setLabelValuesMap(newLabelValuesMap);
-      setIsLoading(newIsLoading);
-    };
+    setLabelValuesMap(newLabelValuesMap);
+    setIsLoading(newIsLoading);
+  }, [labelNames, fetchLabelValues]);
 
+  useEffect(() => {
     void fetchAllLabelValues();
-  }, [labelNames, fetchLabelValues]);
+  }, [fetchAllLabelValues]);
 
   const updateMatcherString = useCallback(() => {
     const matcherParts = Object.entries(selectionsRef.current)

package/src/contexts/MatchersInputLabelsContext.tsx

@@ -32,6 +32,7 @@ interface LabelsContextType {
   currentLabelName: string | null;
   setCurrentLabelName: (name: string | null) => void;
   shouldHandlePrefixes: boolean;
+  refetchLabelValues: () => void;
 }
 
 const LabelsContext = createContext<LabelsContextType | null>(null);
@@ -71,13 +72,11 @@ export function LabelsProvider({
       : [];
   }, [labelNamesResponse]);
 
-  const {result: labelValuesOriginal, loading: isLabelValuesLoading} = useLabelValues(
-    queryClient,
-    currentLabelName ?? '',
-    profileType,
-    start,
-    end
-  );
+  const {
+    result: labelValuesOriginal,
+    loading: isLabelValuesLoading,
+    refetch: refetchLabelValues,
+  } = useLabelValues(queryClient, currentLabelName ?? '', profileType, start, end);
 
   const utilizationLabelValues = useFetchUtilizationLabelValues(
     currentLabelName ?? '',
@@ -114,6 +113,7 @@ export function LabelsProvider({
       currentLabelName,
       setCurrentLabelName,
       shouldHandlePrefixes,
+      refetchLabelValues,
     }),
     [
       labelNames,
@@ -123,6 +123,7 @@ export function LabelsProvider({
       isLabelValuesLoading,
       currentLabelName,
       shouldHandlePrefixes,
+      refetchLabelValues,
     ]
   );
 

package/src/contexts/SimpleMatchersLabelContext.tsx

@@ -11,7 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {createContext, useContext, useMemo} from 'react';
+import {createContext, useCallback, useContext, useMemo} from 'react';
+
+import {useQueryClient} from '@tanstack/react-query';
 
 import {QueryServiceClient} from '@parca/client';
 
@@ -29,6 +31,7 @@ interface LabelContextValue {
   labelNameOptions: LabelNameSection[];
   isLoading: boolean;
   error: Error | null;
+  refetchLabelValues: () => void;
 }
 
 const LabelContext = createContext<LabelContextValue | null>(null);
@@ -53,6 +56,7 @@ export function LabelProvider({
   start,
   end,
 }: LabelProviderProps): JSX.Element {
+  const reactQueryClient = useQueryClient();
   const utilizationLabelResponse = useUtilizationLabels();
   const {loading, result} = useLabelNames(queryClient, profileType, start, end);
 
@@ -131,7 +135,29 @@ export function LabelProvider({
     };
   }, [profileValues, utilizationValues, labelNameFromMatchers]);
 
-  return <LabelContext.Provider value={value}>{children}</LabelContext.Provider>;
+  const refetchLabelValues = useCallback(() => {
+    void reactQueryClient.refetchQueries({
+      predicate: query => {
+        const key = query.queryKey;
+        return (
+          Array.isArray(key) &&
+          key.length === 4 &&
+          typeof key[0] === 'string' &&
+          key[1] === profileType
+        );
+      },
+    });
+  }, [reactQueryClient, profileType]);
+
+  const contextValue = useMemo(
+    () => ({
+      ...value,
+      refetchLabelValues,
+    }),
+    [value, refetchLabelValues]
+  );
+
+  return <LabelContext.Provider value={contextValue}>{children}</LabelContext.Provider>;
 }
 
 export function useLabels(): LabelContextValue {

package/src/useGrpcQuery/index.ts

@@ -21,13 +21,14 @@ interface Props<IRes> {
     staleTime?: number | undefined;
     retry?: number | boolean;
     keepPreviousData?: boolean | undefined;
+    cacheTime?: number | undefined;
   };
 }
 
 const useGrpcQuery = <IRes>({
   key,
   queryFn,
-  options: {enabled = true, staleTime, retry, keepPreviousData} = {},
+  options: {enabled = true, staleTime, retry, keepPreviousData, cacheTime} = {},
 }: Props<IRes>): UseQueryResult<IRes> => {
   return useQuery<IRes>(
     key,
@@ -39,6 +40,7 @@ const useGrpcQuery = <IRes>({
       staleTime,
       retry,
       keepPreviousData,
+      cacheTime,
     }
   );
 };