@parca/profile 0.19.67 → 0.19.69

package/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx

@@ -19,15 +19,25 @@ interface GroupByControlsProps {
   groupBy: string[];
   labels: string[];
   setGroupByLabels: (labels: string[]) => void;
+  metadataRefetch?: () => Promise<void>;
+  metadataLoading: boolean;
 }
 
-const GroupByControls: React.FC<GroupByControlsProps> = ({groupBy, labels, setGroupByLabels}) => {
+const GroupByControls: React.FC<GroupByControlsProps> = ({
+  groupBy,
+  labels,
+  setGroupByLabels,
+  metadataRefetch,
+  metadataLoading,
+}) => {
   return (
     <div className="relative flex" id="h-group-by-controls">
       <GroupByLabelsDropdown
         labels={labels}
         groupBy={groupBy}
         setGroupByLabels={setGroupByLabels}
+        metadataRefetch={metadataRefetch}
+        metadataLoading={metadataLoading}
       />
     </div>
   );

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

@@ -11,11 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import Select from 'react-select';
-
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {FIELD_LABELS} from '../../../ProfileFlameGraph/FlameGraphArrow';
+import {SelectWithRefresh} from '../../../SelectWithRefresh';
 
 interface LabelOption {
   label: string;
@@ -26,9 +25,17 @@ interface Props {
   labels: string[];
   groupBy: string[];
   setGroupByLabels: (labels: string[]) => void;
+  metadataRefetch?: () => Promise<void>;
+  metadataLoading: boolean;
 }
 
-const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.Element => {
+const GroupByLabelsDropdown = ({
+  labels,
+  groupBy,
+  setGroupByLabels,
+  metadataRefetch,
+  metadataLoading,
+}: Props): JSX.Element => {
   return (
     <div className="flex flex-col relative" {...testId(TEST_IDS.GROUP_BY_CONTAINER)}>
       <div className="flex items-center justify-between">
@@ -37,7 +44,7 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
         </label>
       </div>
 
-      <Select<LabelOption, true>
+      <SelectWithRefresh<LabelOption, true>
         isMulti
         defaultMenuIsOpen={false}
         defaultValue={undefined}
@@ -45,20 +52,10 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
         options={labels.map(label => ({label, value: `${FIELD_LABELS}.${label}`}))}
         className="parca-select-container text-sm rounded-md bg-white"
         classNamePrefix="parca-select"
-        components={{
-          // eslint-disable-next-line react/prop-types
-          MenuList: ({children, innerProps}) => (
-            <div
-              className="overflow-y-auto"
-              {...testId(TEST_IDS.GROUP_BY_SELECT_FLYOUT)}
-              {...innerProps}
-              // eslint-disable-next-line react/prop-types
-              style={{...innerProps.style, height: '332px', maxHeight: '332px', fontSize: '14px'}}
-            >
-              {children}
-            </div>
-          ),
-        }}
+        onRefresh={metadataRefetch}
+        refreshTitle="Refresh label names"
+        refreshTestId="group-by-refresh-button"
+        menuTestId={TEST_IDS.GROUP_BY_SELECT_FLYOUT}
         value={groupBy
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}
@@ -66,6 +63,7 @@ const GroupByLabelsDropdown = ({labels, groupBy, setGroupByLabels}: Props): JSX.
           setGroupByLabels(newValue.map(option => option.value));
         }}
         placeholder="Select labels..."
+        isLoading={metadataLoading}
         styles={{
           menu: provided => ({
             ...provided,

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

@@ -44,7 +44,6 @@ export interface VisualisationToolbarProps {
   profileType?: ProfileType;
   total: bigint;
   filtered: bigint;
-  groupByLabels: string[];
   preferencesModal?: boolean;
   profileViewExternalSubActions?: React.ReactNode;
   setGroupByLabels: (labels: string[]) => void;
@@ -54,6 +53,11 @@ export interface VisualisationToolbarProps {
   setAlignFunctionName: (align: string) => void;
   colorBy: string;
   setColorBy: (colorBy: string) => void;
+  metadata: {
+    labels: string[];
+    refetch?: () => Promise<void>;
+    loading: boolean;
+  };
 }
 
 export interface TableToolbarProps {
@@ -130,7 +134,6 @@ const Divider = (): JSX.Element => (
 export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   groupBy,
   toggleGroupBy,
-  groupByLabels,
   setGroupByLabels,
   profileType,
   profileSource,
@@ -147,6 +150,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   setAlignFunctionName,
   colorBy,
   setColorBy,
+  metadata: {labels: groupByLabels, refetch: metadataRefetch, loading: metadataLoading},
 }) => {
   const {dashboardItems} = useDashboard();
 
@@ -172,6 +176,8 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
                 groupBy={groupBy}
                 labels={groupByLabels}
                 setGroupByLabels={setGroupByLabels}
+                metadataRefetch={metadataRefetch}
+                metadataLoading={metadataLoading}
               />
 
               <InvertCallStack />

package/src/ProfileView/index.tsx

@@ -145,7 +145,11 @@ export const ProfileView = ({
             profileType={profileSource?.ProfileType()}
             total={total}
             filtered={filtered}
-            groupByLabels={flamegraphData.metadataLabels ?? []}
+            metadata={{
+              labels: flamegraphData.metadataLabels ?? [],
+              refetch: flamegraphData.metadataRefetch,
+              loading: flamegraphData.metadataLoading,
+            }}
             preferencesModal={preferencesModal}
             profileViewExternalSubActions={profileViewExternalSubActions}
             setGroupByLabels={setGroupByLabels}

package/src/ProfileView/types/visualization.ts

@@ -24,6 +24,7 @@ export interface FlamegraphData {
   metadataMappingFiles?: string[];
   metadataLoading: boolean;
   metadataLabels?: string[];
+  metadataRefetch?: () => Promise<void>;
 }
 
 export interface TopTableData {

package/src/ProfileViewWithData.tsx

@@ -115,10 +115,12 @@ export const ProfileViewWithData = ({
     isLoading: profileMetadataLoading,
     response: profileMetadataResponse,
     error: profileMetadataError,
+    refetch: metadataRefetch,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.PROFILE_METADATA, {
     nodeTrimThreshold,
     groupBy,
     protoFilters,
+    staleTime: 0,
   });
 
   const {perf} = useParcaContext();
@@ -258,6 +260,7 @@ export const ProfileViewWithData = ({
             ? profileMetadataResponse?.report?.profileMetadata?.labels
             : undefined,
         metadataLoading: profileMetadataLoading,
+        metadataRefetch,
       }}
       flamechartData={{
         loading: flamechartLoading && profileMetadataLoading,

package/src/SelectWithRefresh/index.tsx

@@ -0,0 +1,98 @@
+// 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 {useCallback, useState} from 'react';
+
+import ReactSelect, {type MenuListProps, type Props as ReactSelectProps} from 'react-select';
+
+import {RefreshButton} from '@parca/components';
+
+export interface SelectWithRefreshProps<Option, IsMulti extends boolean>
+  extends ReactSelectProps<Option, IsMulti> {
+  onRefresh?: () => Promise<void>;
+  refreshTitle?: string;
+  refreshTestId?: string;
+  menuTestId?: string;
+}
+
+export function SelectWithRefresh<Option, IsMulti extends boolean = false>(
+  props: SelectWithRefreshProps<Option, IsMulti>
+): JSX.Element {
+  const {
+    onRefresh,
+    refreshTitle = 'Refresh label names',
+    refreshTestId = 'select-refresh-button',
+    menuTestId,
+    components,
+    ...selectProps
+  } = props;
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefetch = useCallback(async () => {
+    if (onRefresh == null || isRefreshing) return;
+
+    setIsRefreshing(true);
+    try {
+      await onRefresh();
+    } catch (error) {
+      console.error('Error during refresh:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [onRefresh, isRefreshing]);
+
+  const MenuListWithRefresh = useCallback(
+    ({children, innerProps}: MenuListProps<Option, IsMulti>) => {
+      const testIdProps = menuTestId != null ? {'data-testid': menuTestId} : {};
+
+      return (
+        <div className="flex flex-col" style={{maxHeight: '332px'}}>
+          <div
+            className="overflow-y-auto flex-1"
+            {...innerProps}
+            {...testIdProps}
+            style={{...innerProps?.style, fontSize: '14px'}}
+          >
+            {children}
+          </div>
+          {onRefresh != null && (
+            <RefreshButton
+              onClick={() => void handleRefetch()}
+              disabled={isRefreshing}
+              title={refreshTitle}
+              testId={refreshTestId}
+            />
+          )}
+        </div>
+      );
+    },
+    [onRefresh, isRefreshing, handleRefetch, refreshTitle, refreshTestId, menuTestId]
+  );
+
+  const combinedLoadingState = isRefreshing || (selectProps.isLoading ?? false);
+
+  return (
+    <ReactSelect<Option, IsMulti>
+      {...selectProps}
+      isLoading={combinedLoadingState}
+      components={{
+        ...components,
+        // eslint-disable-next-line react/display-name
+        MenuList: MenuListWithRefresh,
+      }}
+    />
+  );
+}
+
+export default SelectWithRefresh;

package/src/SimpleMatchers/Select.tsx

@@ -17,7 +17,7 @@ import {Icon} from '@iconify/react';
 import cx from 'classnames';
 import levenshtein from 'fast-levenshtein';
 
-import {Button, DividerWithLabel, useParcaContext} from '@parca/components';
+import {Button, DividerWithLabel, RefreshButton, useParcaContext} from '@parca/components';
 import {TEST_IDS, testId} from '@parca/test-utils/dist/test-ids';
 
 export interface SelectElement {
@@ -56,7 +56,7 @@ interface CustomSelectProps {
   searchable?: boolean;
   onButtonClick?: () => void;
   editable?: boolean;
-  refetchValues?: () => void;
+  refetchValues?: () => Promise<void>;
   showLoadingInButton?: boolean;
 }
 
@@ -374,34 +374,14 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
               )}
             </div>
             {refetchValues !== undefined && loading !== true && (
-              <div className="sticky bottom-0 w-full flex items-center justify-center px-3 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 z-20 mt-auto">
-                <button
-                  onClick={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    void handleRefetch();
-                  }}
-                  disabled={isRefetching}
-                  className={cx(
-                    'py-1 px-2 flex items-center gap-1 rounded-full transition-all duration-200 w-auto justify-center',
-                    isRefetching
-                      ? 'cursor-wait opacity-50'
-                      : 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer'
-                  )}
-                  title="Refresh label values"
-                  type="button"
-                  {...testId(TEST_IDS.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'
-                    )}
-                  />
-                  <span className="text-xs text-gray-500 dark:text-gray-400">Refresh results</span>
-                </button>
-              </div>
+              <RefreshButton
+                onClick={() => void handleRefetch()}
+                disabled={isRefetching}
+                title="Refresh label values"
+                testId={TEST_IDS.LABEL_VALUE_REFRESH_BUTTON}
+                sticky={true}
+                loading={isRefetching}
+              />
             )}
           </div>
         </div>

package/src/SimpleMatchers/index.tsx

@@ -485,7 +485,7 @@ const SimpleMatchers = ({
             onButtonClick={() => handleLabelValueClick(index)}
             editable={isRowRegex(row)}
             {...testId(TEST_IDS.LABEL_VALUE_SELECT)}
-            refetchValues={() => refetchLabelValues(row.labelName)}
+            refetchValues={async () => await refetchLabelValues(row.labelName)}
             showLoadingInButton={true}
           />
           <button

package/src/contexts/SimpleMatchersLabelContext.tsx

@@ -31,8 +31,8 @@ interface LabelContextValue {
   labelNameOptions: LabelNameSection[];
   isLoading: boolean;
   error: Error | null;
-  refetchLabelValues: (labelName?: string) => void;
-  refetchLabelNames: () => void;
+  refetchLabelValues: (labelName?: string) => Promise<void>;
+  refetchLabelNames: () => Promise<void>;
 }
 
 const LabelContext = createContext<LabelContextValue | null>(null);
@@ -141,8 +141,8 @@ export function LabelProvider({
   }, [profileValues, utilizationValues, labelNameFromMatchers]);
 
   const refetchLabelValues = useCallback(
-    (labelName?: string) => {
-      void reactQueryClient.refetchQueries({
+    async (labelName?: string) => {
+      await reactQueryClient.refetchQueries({
         predicate: query => {
           const key = query.queryKey;
           const matchesStructure =
@@ -164,8 +164,8 @@ export function LabelProvider({
     [reactQueryClient, profileType]
   );
 
-  const refetchLabelNames = useCallback(() => {
-    refetchLabelNamesQuery();
+  const refetchLabelNames = useCallback(async () => {
+    await refetchLabelNamesQuery();
   }, [refetchLabelNamesQuery]);
 
   const contextValue = useMemo(

package/src/index.tsx

@@ -14,6 +14,7 @@
 import {useLabelNames} from './MatchersInput';
 import ProfileExplorer, {getExpressionAsAString} from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
+import SelectWithRefresh from './SelectWithRefresh';
 import CustomSelect from './SimpleMatchers/Select';
 
 export * from './ProfileFlameGraph';
@@ -37,4 +38,11 @@ export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
   dashboard_items: 'flamegraph',
 };
 
-export {ProfileExplorer, ProfileTypeSelector, getExpressionAsAString, CustomSelect, useLabelNames};
+export {
+  ProfileExplorer,
+  ProfileTypeSelector,
+  getExpressionAsAString,
+  CustomSelect,
+  SelectWithRefresh,
+  useLabelNames,
+};

package/src/useHasProfileData.ts

@@ -11,17 +11,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {useMemo} from 'react';
+
 import {HasProfileDataResponse, QueryServiceClient} from '@parca/client';
+import {useGrpcMetadata} from '@parca/components';
 
 import useGrpcQuery from './useGrpcQuery';
 
 export const useHasProfileData = (
   client: QueryServiceClient
 ): {loading: boolean; data: boolean; error: Error | any} => {
+  const metadata = useGrpcMetadata();
+  const metadataString = useMemo(() => JSON.stringify(metadata), [metadata]);
+
   const {data, isLoading, error} = useGrpcQuery<HasProfileDataResponse>({
-    key: ['hasProfileData'],
+    key: ['hasProfileData', metadataString],
     queryFn: async signal => {
-      const {response} = await client.hasProfileData({}, {abort: signal});
+      const {response} = await client.hasProfileData({}, {abort: signal, meta: metadata});
       return response;
     },
   });

package/src/useQuery.tsx

@@ -25,6 +25,7 @@ export interface IQueryResult {
   response: QueryResponse | null;
   error: RpcError | null;
   isLoading: boolean;
+  refetch?: () => Promise<void>;
 }
 
 interface UseQueryOptions {
@@ -37,6 +38,7 @@ interface UseQueryOptions {
   invertCallStack?: boolean;
   sandwichByFunction?: string;
   protoFilters?: any[]; // Using any[] to match the Filter type from hook
+  staleTime?: number;
 }
 
 export const useQuery = (
@@ -52,7 +54,7 @@ export const useQuery = (
     return JSON.stringify(options?.protoFilters ?? []);
   }, [options?.protoFilters]);
 
-  const {data, isLoading, error} = useGrpcQuery<QueryResponse | undefined>({
+  const {data, isLoading, error, refetch} = useGrpcQuery<QueryResponse | undefined>({
     key: [
       'query',
       profileSource.toKey(),
@@ -104,9 +106,16 @@ export const useQuery = (
     options: {
       retry: false,
       enabled: !skip,
-      staleTime: 1000 * 60 * 5, // 5 minutes
+      staleTime: options?.staleTime ?? 1000 * 60 * 5, // 5 minutes
     },
   });
 
-  return {isLoading, error: error as RpcError | null, response: data ?? null};
+  return {
+    isLoading,
+    error: error as RpcError | null,
+    response: data ?? null,
+    refetch: async () => {
+      await refetch();
+    },
+  };
 };