@parca/profile 0.19.61 → 0.19.63

package/src/MatchersInput/SuggestionsList.tsx

@@ -14,9 +14,12 @@
 import {Fragment, useCallback, useEffect, useState} from 'react';
 
 import {Transition} from '@headlessui/react';
+import {Icon} from '@iconify/react';
+import cx from 'classnames';
 import {usePopper} from 'react-popper';
 
 import {useParcaContext} from '@parca/components';
+import {TEST_IDS, testId} from '@parca/test-utils';
 
 import SuggestionItem from './SuggestionItem';
 
@@ -53,6 +56,8 @@ interface Props {
   isLabelNamesLoading: boolean;
   isLabelValuesLoading: boolean;
   shouldTrimPrefix: boolean;
+  refetchLabelValues: () => void;
+  refetchLabelNames: () => void;
 }
 
 const LoadingSpinner = (): JSX.Element => {
@@ -61,6 +66,43 @@ const LoadingSpinner = (): JSX.Element => {
   return <div className="pt-2 pb-4">{Spinner}</div>;
 };
 
+interface RefreshButtonProps {
+  onClick: () => void;
+  disabled: boolean;
+  title: string;
+  testId: string;
+}
+
+const RefreshButton = ({onClick, disabled, title, testId}: RefreshButtonProps): JSX.Element => {
+  return (
+    <div className="absolute w-full flex items-center justify-center bottom-0 px-3 py-2 bg-gray-50 dark:bg-gray-900">
+      <button
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClick();
+        }}
+        disabled={disabled}
+        className={cx(
+          'py-1 px-2 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
+          disabled
+            ? 'cursor-wait opacity-50'
+            : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
+        )}
+        title={title}
+        type="button"
+        data-testid={testId}
+      >
+        <Icon
+          icon="system-uicons:reset"
+          className={cx('w-3 h-3 text-gray-500 dark:text-gray-400', disabled && 'animate-spin')}
+        />
+        <span className="text-xs text-gray-500 dark:text-gray-400">Refresh results</span>
+      </button>
+    </div>
+  );
+};
+
 const transformLabelsForSuggestions = (labelNames: string, shouldTrimPrefix = false): string => {
   const trimmedLabel = shouldTrimPrefix ? labelNames.split('.').pop() ?? labelNames : labelNames;
   return trimmedLabel;
@@ -75,6 +117,8 @@ const SuggestionsList = ({
   isLabelNamesLoading,
   isLabelValuesLoading,
   shouldTrimPrefix = false,
+  refetchLabelValues,
+  refetchLabelNames,
 }: Props): JSX.Element => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const {styles, attributes} = usePopper(inputRef, popperElement, {
@@ -82,6 +126,30 @@ const SuggestionsList = ({
   });
   const [highlightedSuggestionIndex, setHighlightedSuggestionIndex] = useState<number>(-1);
   const [showSuggest, setShowSuggest] = useState(true);
+  const [isRefetchingValues, setIsRefetchingValues] = useState(false);
+  const [isRefetchingNames, setIsRefetchingNames] = useState(false);
+
+  const handleRefetchValues = useCallback(async () => {
+    if (isRefetchingValues) return;
+
+    setIsRefetchingValues(true);
+    try {
+      await refetchLabelValues();
+    } finally {
+      setIsRefetchingValues(false);
+    }
+  }, [refetchLabelValues, isRefetchingValues]);
+
+  const handleRefetchNames = useCallback(async () => {
+    if (isRefetchingNames) return;
+
+    setIsRefetchingNames(true);
+    try {
+      await refetchLabelNames();
+    } finally {
+      setIsRefetchingNames(false);
+    }
+  }, [refetchLabelNames, isRefetchingNames]);
 
   const suggestionsLength =
     suggestions.literals.length + suggestions.labelNames.length + suggestions.labelValues.length;
@@ -211,6 +279,12 @@ const SuggestionsList = ({
     };
   }, [inputRef, highlightedSuggestionIndex, suggestions, handleKeyPress, handleKeyDown]);
 
+  useEffect(() => {
+    if (suggestionsLength > 0 && focusedInput) {
+      setShowSuggest(true);
+    }
+  }, [suggestionsLength, focusedInput]);
+
   return (
     <>
       {suggestionsLength > 0 && (
@@ -231,43 +305,114 @@ const SuggestionsList = ({
               style={{width: inputRef?.offsetWidth}}
               className="absolute z-10 mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm"
             >
-              {isLabelNamesLoading ? (
-                <LoadingSpinner />
-              ) : (
-                <>
-                  {suggestions.labelNames.map((l, i) => (
-                    <SuggestionItem
-                      isHighlighted={highlightedSuggestionIndex === i}
-                      onHighlight={() => setHighlightedSuggestionIndex(i)}
-                      onApplySuggestion={() => applySuggestionWithIndex(i)}
-                      onResetHighlight={() => resetHighlight()}
-                      value={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
-                      key={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+              <div
+                className={cx('relative', {
+                  'pb-12': suggestions.labelNames.length === 0 && suggestions.literals.length === 0,
+                })}
+              >
+                {isLabelNamesLoading ? (
+                  <LoadingSpinner />
+                ) : suggestions.literals.length === 0 && suggestions.labelValues.length === 0 ? (
+                  <>
+                    {suggestions.labelNames.length === 0 ? (
+                      <div
+                        className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center"
+                        {...testId(TEST_IDS.SUGGESTIONS_NO_RESULTS)}
+                      >
+                        No label names found
+                      </div>
+                    ) : (
+                      suggestions.labelNames.map((l, i) => (
+                        <SuggestionItem
+                          isHighlighted={highlightedSuggestionIndex === i}
+                          onHighlight={() => setHighlightedSuggestionIndex(i)}
+                          onApplySuggestion={() => applySuggestionWithIndex(i)}
+                          onResetHighlight={() => resetHighlight()}
+                          value={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+                          key={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+                        />
+                      ))
+                    )}
+                    <RefreshButton
+                      onClick={() => void handleRefetchNames()}
+                      disabled={isRefetchingNames}
+                      title="Refresh label names"
+                      testId="suggestions-refresh-names-button"
+                    />
+                  </>
+                ) : (
+                  <>
+                    {suggestions.labelNames.map((l, i) => (
+                      <SuggestionItem
+                        isHighlighted={highlightedSuggestionIndex === i}
+                        onHighlight={() => setHighlightedSuggestionIndex(i)}
+                        onApplySuggestion={() => applySuggestionWithIndex(i)}
+                        onResetHighlight={() => resetHighlight()}
+                        value={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+                        key={transformLabelsForSuggestions(l.value, shouldTrimPrefix)}
+                      />
+                    ))}
+                  </>
+                )}
+
+                {suggestions.literals.map((l, i) => (
+                  <SuggestionItem
+                    isHighlighted={highlightedSuggestionIndex === i + suggestions.labelNames.length}
+                    onHighlight={() =>
+                      setHighlightedSuggestionIndex(i + suggestions.labelNames.length)
+                    }
+                    onApplySuggestion={() =>
+                      applySuggestionWithIndex(i + suggestions.labelNames.length)
+                    }
+                    onResetHighlight={() => resetHighlight()}
+                    value={l.value}
+                    key={l.value}
+                  />
+                ))}
+
+                {isLabelValuesLoading ? (
+                  <LoadingSpinner />
+                ) : suggestions.labelNames.length === 0 && suggestions.literals.length === 0 ? (
+                  <>
+                    {suggestions.labelValues.length === 0 ? (
+                      <div
+                        className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center"
+                        {...testId(TEST_IDS.SUGGESTIONS_NO_RESULTS)}
+                      >
+                        No label values found
+                      </div>
+                    ) : (
+                      suggestions.labelValues.map((l, i) => (
+                        <SuggestionItem
+                          isHighlighted={
+                            highlightedSuggestionIndex ===
+                            i + suggestions.labelNames.length + suggestions.literals.length
+                          }
+                          onHighlight={() =>
+                            setHighlightedSuggestionIndex(
+                              i + suggestions.labelNames.length + suggestions.literals.length
+                            )
+                          }
+                          onApplySuggestion={() =>
+                            applySuggestionWithIndex(
+                              i + suggestions.labelNames.length + suggestions.literals.length
+                            )
+                          }
+                          onResetHighlight={() => resetHighlight()}
+                          value={l.value}
+                          key={l.value}
+                        />
+                      ))
+                    )}
+                    <RefreshButton
+                      onClick={() => void handleRefetchValues()}
+                      disabled={isRefetchingValues}
+                      title="Refresh label values"
+                      testId="suggestions-refresh-values-button"
                     />
-                  ))}
-                </>
-              )}
-
-              {suggestions.literals.map((l, i) => (
-                <SuggestionItem
-                  isHighlighted={highlightedSuggestionIndex === i + suggestions.labelNames.length}
-                  onHighlight={() =>
-                    setHighlightedSuggestionIndex(i + suggestions.labelNames.length)
-                  }
-                  onApplySuggestion={() =>
-                    applySuggestionWithIndex(i + suggestions.labelNames.length)
-                  }
-                  onResetHighlight={() => resetHighlight()}
-                  value={l.value}
-                  key={l.value}
-                />
-              ))}
-
-              {isLabelValuesLoading ? (
-                <LoadingSpinner />
-              ) : (
-                <>
-                  {suggestions.labelValues.map((l, i) => (
+                  </>
+                ) : (
+                  suggestions.labelValues.map((l, i) => (
                     <SuggestionItem
                       isHighlighted={
                         highlightedSuggestionIndex ===
@@ -287,9 +432,9 @@ const SuggestionsList = ({
                       value={l.value}
                       key={l.value}
                     />
-                  ))}
-                </>
-              )}
+                  ))
+                )}
+              </div>
             </div>
           </Transition>
         </div>

package/src/MatchersInput/index.tsx

@@ -46,6 +46,7 @@ export interface ILabelNamesResult {
 interface UseLabelNames {
   result: ILabelNamesResult;
   loading: boolean;
+  refetch: () => void;
 }
 
 export const useLabelNames = (
@@ -57,7 +58,7 @@ export const useLabelNames = (
 ): UseLabelNames => {
   const metadata = useGrpcMetadata();
 
-  const {data, isLoading, error} = useGrpcQuery<LabelsResponse>({
+  const {data, isLoading, error, refetch} = useGrpcQuery<LabelsResponse>({
     key: ['labelNames', profileType, match?.join(','), start, end],
     queryFn: async signal => {
       const request: LabelsRequest = {match: match !== undefined ? match : []};
@@ -73,12 +74,17 @@ export const useLabelNames = (
     },
     options: {
       enabled: profileType !== undefined && profileType !== '',
-      staleTime: 1000 * 60 * 5, // 5 minutes
       keepPreviousData: false,
     },
   });
 
-  return {result: {response: data, error: error as Error}, loading: isLoading};
+  return {
+    result: {response: data, error: error as Error},
+    loading: isLoading,
+    refetch: () => {
+      void refetch();
+    },
+  };
 };
 
 interface UseLabelValues {
@@ -87,6 +93,7 @@ interface UseLabelValues {
     error?: Error;
   };
   loading: boolean;
+  refetch: () => void;
 }
 
 export const useLabelValues = (
@@ -98,7 +105,7 @@ export const useLabelValues = (
 ): UseLabelValues => {
   const metadata = useGrpcMetadata();
 
-  const {data, isLoading, error} = useGrpcQuery<string[]>({
+  const {data, isLoading, error, refetch} = useGrpcQuery<string[]>({
     key: ['labelValues', labelName, profileType, start, end],
     queryFn: async signal => {
       const request: ValuesRequest = {labelName, match: [], profileType};
@@ -115,12 +122,17 @@ export const useLabelValues = (
         profileType !== '' &&
         labelName !== undefined &&
         labelName !== '',
-      staleTime: 1000 * 60 * 5, // 5 minutes
       keepPreviousData: false,
     },
   });
 
-  return {result: {response: data ?? [], error: error as Error}, loading: isLoading};
+  return {
+    result: {response: data ?? [], error: error as Error},
+    loading: isLoading,
+    refetch: () => {
+      void refetch();
+    },
+  };
 };
 
 export const useFetchUtilizationLabelValues = (
@@ -130,8 +142,10 @@ export const useFetchUtilizationLabelValues = (
   const {data} = useQuery({
     queryKey: ['utilizationLabelValues', labelName],
     queryFn: async () => {
-      return await utilizationLabels?.utilizationFetchLabelValues?.(labelName);
+      const result = await utilizationLabels?.utilizationFetchLabelValues?.(labelName);
+      return result ?? [];
     },
+    enabled: utilizationLabels?.utilizationFetchLabelValues != null && labelName !== '',
   });
 
   return data ?? [];
@@ -155,6 +169,8 @@ const MatchersInput = ({
     currentLabelName,
     setCurrentLabelName,
     shouldHandlePrefixes,
+    refetchLabelValues,
+    refetchLabelNames,
   } = useLabels();
 
   const value = currentQuery.matchersString();
@@ -325,8 +341,12 @@ const MatchersInput = ({
         inputRef={inputRef.current}
         runQuery={runQuery}
         focusedInput={focusedInput}
-        isLabelValuesLoading={isLabelValuesLoading && lastCompleted.type === 'literal'}
+        isLabelValuesLoading={
+          isLabelValuesLoading && lastCompleted.type === 'literal' && lastCompleted.value !== ','
+        }
         shouldTrimPrefix={shouldHandlePrefixes}
+        refetchLabelValues={refetchLabelValues}
+        refetchLabelNames={refetchLabelNames}
       />
     </div>
   );

package/src/ProfileSelector/QueryControls.tsx

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {useState} from 'react';
+
 import {Switch} from '@headlessui/react';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import Select, {type SelectInstance} from 'react-select';
@@ -93,6 +95,7 @@ export function QueryControls({
   profileTypesError,
 }: QueryControlsProps): JSX.Element {
   const {timezone} = useParcaContext();
+  const [searchExecutedTimestamp, setSearchExecutedTimestamp] = useState<number>(0);
 
   return (
     <div
@@ -180,7 +183,6 @@ export function QueryControls({
           />
         ) : (
           <SimpleMatchers
-            key={query.toString()}
             setMatchersString={setMatchersString}
             runQuery={setQueryExpression}
             currentQuery={query}
@@ -189,6 +191,7 @@ export function QueryControls({
             queryClient={queryClient}
             start={timeRangeSelection.getFromMs()}
             end={timeRangeSelection.getToMs()}
+            searchExecutedTimestamp={searchExecutedTimestamp}
           />
         )}
       </div>
@@ -261,6 +264,7 @@ export function QueryControls({
           disabled={searchDisabled}
           onClick={(e: React.MouseEvent<HTMLElement>) => {
             e.preventDefault();
+            setSearchExecutedTimestamp(Date.now());
             setQueryExpression(true);
           }}
           id="h-matcher-search-button"

package/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx

@@ -187,6 +187,10 @@ interface MultiLevelDropdownProps {
   groupBy: string[];
   toggleGroupBy: (key: string) => void;
   isTableVizOnly: boolean;
+  alignFunctionName: string;
+  setAlignFunctionName: (align: string) => void;
+  colorBy: string;
+  setColorBy: (colorBy: string) => void;
 }
 
 const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
@@ -195,6 +199,10 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   groupBy,
   toggleGroupBy,
   isTableVizOnly,
+  alignFunctionName,
+  setAlignFunctionName,
+  colorBy,
+  setColorBy,
 }) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [shouldOpenLeft, setShouldOpenLeft] = useState(false);
@@ -202,7 +210,6 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     defaultValue: FIELD_FUNCTION_NAME,
   });
   const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
-  const [colorBy, setColorBy] = useURLState('color_by');
   const [hiddenBinaries, setHiddenBinaries] = useURLState('hidden_binaries', {
     defaultValue: [],
     alwaysReturnArray: true,
@@ -212,9 +219,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
     USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
   );
   const isColorStackLegendEnabled = colorStackLegend === 'true';
-
-  const [alignFunctionName, setAlignFunctionName] = useURLState('align_function_name');
-  const isLeftAligned = alignFunctionName === 'left' || alignFunctionName === undefined;
+  const isLeftAligned = alignFunctionName === 'left';
 
   // By default, we want delta profiles (CPU) to be relatively compared.
   // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
@@ -421,7 +426,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       closeDropdown={close}
                       activeValueForSortBy={storeSortBy as string}
                       activeValueForColorBy={
-                        colorBy === undefined || colorBy === '' ? 'binary' : (colorBy as string)
+                        colorBy === undefined || colorBy === '' ? 'binary' : colorBy
                       }
                       activeValuesForLevel={groupBy}
                       renderAsDiv={item.renderAsDiv}

package/src/ProfileView/components/Toolbars/index.tsx

@@ -50,6 +50,10 @@ export interface VisualisationToolbarProps {
   setGroupByLabels: (labels: string[]) => void;
   showVisualizationSelector?: boolean;
   sandwichFunctionName?: string;
+  alignFunctionName: string;
+  setAlignFunctionName: (align: string) => void;
+  colorBy: string;
+  setColorBy: (colorBy: string) => void;
 }
 
 export interface TableToolbarProps {
@@ -139,6 +143,10 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   total,
   filtered,
   showVisualizationSelector = true,
+  alignFunctionName,
+  setAlignFunctionName,
+  colorBy,
+  setColorBy,
 }) => {
   const {dashboardItems} = useDashboard();
 
@@ -183,6 +191,10 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
             profileType={profileType}
             onSelect={() => {}}
             isTableVizOnly={isTableVizOnly}
+            alignFunctionName={alignFunctionName}
+            setAlignFunctionName={setAlignFunctionName}
+            colorBy={colorBy}
+            setColorBy={setColorBy}
           />
 
           <ShareButton

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -14,6 +14,7 @@
 import {useCallback, useMemo} from 'react';
 
 import {JSONParser, JSONSerializer, useURLState, useURLStateCustom} from '@parca/components';
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
 
 import {
   FIELD_FUNCTION_FILE_NAME,
@@ -38,14 +39,28 @@ export const useVisualizationState = (): {
   sandwichFunctionName: string | undefined;
   setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
   resetSandwichFunctionName: () => void;
+  alignFunctionName: string;
+  setAlignFunctionName: (align: string) => void;
 } => {
+  const [colorByPreference, setColorByPreference] = useUserPreference<string>(
+    USER_PREFERENCES.COLOR_BY.key
+  );
+  const [alignFunctionNamePreference, setAlignFunctionNamePreference] = useUserPreference<string>(
+    USER_PREFERENCES.ALIGN_FUNCTION_NAME.key
+  );
+
   const [curPathArrow, setCurPathArrow] = useURLStateCustom<CurrentPathFrame[]>('cur_path', {
     parse: JSONParser<CurrentPathFrame[]>,
     stringify: JSONSerializer,
     defaultValue: '[]',
   });
   const [colorStackLegend] = useURLState<string | undefined>('color_stack_legend');
-  const [colorBy, setColorBy] = useURLState('color_by');
+  const [colorBy, setStoreColorBy] = useURLState('color_by', {
+    defaultValue: colorByPreference,
+  });
+  const [alignFunctionName, setStoreAlignFunctionName] = useURLState('align_function_name', {
+    defaultValue: alignFunctionNamePreference,
+  });
   const [groupBy, setStoreGroupBy] = useURLState<string[]>('group_by', {
     defaultValue: [FIELD_FUNCTION_NAME],
     alwaysReturnArray: true,
@@ -99,6 +114,22 @@ export const useVisualizationState = (): {
     setSandwichFunctionName(undefined);
   }, [setSandwichFunctionName]);
 
+  const setColorBy = useCallback(
+    (value: string): void => {
+      setStoreColorBy(value);
+      setColorByPreference(value);
+    },
+    [setStoreColorBy, setColorByPreference]
+  );
+
+  const setAlignFunctionName = useCallback(
+    (value: string): void => {
+      setStoreAlignFunctionName(value);
+      setAlignFunctionNamePreference(value);
+    },
+    [setStoreAlignFunctionName, setAlignFunctionNamePreference]
+  );
+
   return {
     curPathArrow,
     setCurPathArrow,
@@ -112,5 +143,7 @@ export const useVisualizationState = (): {
     sandwichFunctionName,
     setSandwichFunctionName,
     resetSandwichFunctionName,
+    alignFunctionName: (alignFunctionName as string) ?? 'left',
+    setAlignFunctionName,
   };
 };

package/src/ProfileView/index.tsx

@@ -60,11 +60,14 @@ export const ProfileView = ({
     setCurPathArrow,
     colorStackLegend,
     colorBy,
+    setColorBy,
     groupBy,
     toggleGroupBy,
     setGroupByLabels,
     sandwichFunctionName,
     resetSandwichFunctionName,
+    alignFunctionName,
+    setAlignFunctionName,
   } = useVisualizationState();
 
   const {colorMappings} = useProfileMetadata({
@@ -148,6 +151,10 @@ export const ProfileView = ({
             setGroupByLabels={setGroupByLabels}
             showVisualizationSelector={showVisualizationSelector}
             sandwichFunctionName={sandwichFunctionName}
+            alignFunctionName={alignFunctionName}
+            setAlignFunctionName={setAlignFunctionName}
+            colorBy={colorBy}
+            setColorBy={setColorBy}
           />
 
           {isColorStackLegendEnabled && (