Add refresh results button to sum by

Author: yomete

ui/packages/shared/components/src/RefreshButton/index.tsx

@@ -28,7 +28,6 @@ const RefreshButton = ({
   disabled,
   title,
   testId,
-  loading,
   sticky = false,
 }: RefreshButtonProps): JSX.Element => {
   return (

ui/packages/shared/profile/src/ProfileSelector/QueryControls.tsx

@@ -18,7 +18,13 @@ import {RpcError} from '@protobuf-ts/runtime-rpc';
 import Select, {type SelectInstance} from 'react-select';
 
 import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
-import {Button, DateTimeRange, DateTimeRangePicker, useParcaContext} from '@parca/components';
+import {
+  Button,
+  DateTimeRange,
+  DateTimeRangePicker,
+  RefreshButton,
+  useParcaContext,
+} from '@parca/components';
 import {ProfileType, Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
@@ -65,6 +71,7 @@ interface QueryControlsProps {
   setUserSumBySelection: (sumBy: string[]) => void;
   sumByRef: React.RefObject<SelectInstance>;
   profileType: ProfileType;
+  refreshLabelNames: () => void;
 }
 
 export function QueryControls({
@@ -93,6 +100,7 @@ export function QueryControls({
   profileType,
   showSumBySelector,
   profileTypesError,
+  refreshLabelNames,
 }: QueryControlsProps): JSX.Element {
   const {timezone} = useParcaContext();
   const [searchExecutedTimestamp, setSearchExecutedTimestamp] = useState<number>(0);
@@ -220,7 +228,16 @@ export function QueryControls({
             placeholder="Labels..."
             styles={{
               indicatorSeparator: () => ({display: 'none'}),
-              menu: provided => ({...provided, width: 'max-content', zIndex: 50}), // Setting the same zIndex as drop down menus
+              menu: provided => ({
+                ...provided,
+                marginBottom: 0,
+                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                marginTop: 10,
+                zIndex: 50,
+                minWidth: '320px',
+                position: 'absolute',
+              }),
+              // menu: provided => ({...provided, width: 'max-content', zIndex: 50}), // Setting the same zIndex as drop down menus
             }}
             isLoading={sumBySelectionLoading}
             isDisabled={!profileType.delta}
@@ -245,6 +262,30 @@ export function QueryControls({
                 currentRef.blur();
               }
             }}
+            components={{
+              // eslint-disable-next-line react/prop-types
+              MenuList: ({children, innerProps}) => (
+                <div className="flex flex-col" style={{maxHeight: '332px'}}>
+                  <div
+                    className="overflow-y-auto flex-1"
+                    {...testId(TEST_IDS.SUM_BY_SELECT_FLYOUT)}
+                    {...innerProps}
+                    // eslint-disable-next-line react/prop-types
+                    style={{...innerProps.style, fontSize: '14px'}}
+                  >
+                    {children}
+                  </div>
+                  {refreshLabelNames != null && (
+                    <RefreshButton
+                      onClick={() => void refreshLabelNames()}
+                      disabled={sumBySelectionLoading}
+                      title="Refresh label names"
+                      testId="sum-by-refresh-button"
+                    />
+                  )}
+                </div>
+              ),
+            }}
           />
         </div>
       )}

ui/packages/shared/profile/src/ProfileSelector/index.tsx

@@ -174,12 +174,11 @@ const ProfileSelector = ({
   const from = timeRangeSelection.getFromMs();
   const to = timeRangeSelection.getToMs();
 
-  const {loading: labelNamesLoading, result} = useLabelNames(
-    queryClient,
-    profileType.toString(),
-    from,
-    to
-  );
+  const {
+    loading: labelNamesLoading,
+    result,
+    refetch,
+  } = useLabelNames(queryClient, profileType.toString(), from, to);
   const {loading: selectedLabelNamesLoading, result: selectedLabelNamesResult} = useLabelNames(
     queryClient,
     selectedProfileType.toString(),
@@ -329,6 +328,7 @@ const ProfileSelector = ({
             profileType={profileType}
             profileTypesError={error}
             viewComponent={viewComponent}
+            refreshLabelNames={refetch}
           />
           {comparing && (
             <div>

ui/packages/shared/profile/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx

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

ui/packages/shared/profile/src/ProfileView/components/GroupByLabelsDropdown/index.tsx

@@ -30,13 +30,15 @@ interface Props {
   groupBy: string[];
   setGroupByLabels: (labels: string[]) => void;
   metadataRefetch?: () => void;
+  metadataLoading: boolean;
 }
 
 const GroupByLabelsDropdown = ({
   labels,
   groupBy,
   setGroupByLabels,
   metadataRefetch,
+  metadataLoading,
 }: Props): JSX.Element => {
   const [isRefetching, setIsRefetching] = useState(false);
 
@@ -98,6 +100,7 @@ const GroupByLabelsDropdown = ({
           setGroupByLabels(newValue.map(option => option.value));
         }}
         placeholder="Select labels..."
+        isLoading={metadataLoading}
         styles={{
           menu: provided => ({
             ...provided,

ui/packages/shared/profile/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,7 +53,11 @@ export interface VisualisationToolbarProps {
   setAlignFunctionName: (align: string) => void;
   colorBy: string;
   setColorBy: (colorBy: string) => void;
-  metadataRefetch?: () => void;
+  metadata: {
+    labels: string[];
+    refetch?: () => void;
+    loading: boolean;
+  };
 }
 
 export interface TableToolbarProps {
@@ -131,7 +134,6 @@ const Divider = (): JSX.Element => (
 export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   groupBy,
   toggleGroupBy,
-  groupByLabels,
   setGroupByLabels,
   profileType,
   profileSource,
@@ -148,7 +150,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   setAlignFunctionName,
   colorBy,
   setColorBy,
-  metadataRefetch,
+  metadata: {labels: groupByLabels, refetch: metadataRefetch, loading: metadataLoading},
 }) => {
   const {dashboardItems} = useDashboard();
 
@@ -175,6 +177,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
                 labels={groupByLabels}
                 setGroupByLabels={setGroupByLabels}
                 metadataRefetch={metadataRefetch}
+                metadataLoading={metadataLoading}
               />
 
               <InvertCallStack />

ui/packages/shared/profile/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}
@@ -155,7 +159,6 @@ export const ProfileView = ({
             setAlignFunctionName={setAlignFunctionName}
             colorBy={colorBy}
             setColorBy={setColorBy}
-            metadataRefetch={flamegraphData.metadataRefetch}
           />
 
           {isColorStackLegendEnabled && (

ui/packages/shared/test-utils/src/test-ids.ts

@@ -60,6 +60,7 @@ export const TEST_IDS = {
   SUM_BY_CONTAINER: 'sum-by-container',
   SUM_BY_LABEL: 'sum-by-label',
   SUM_BY_SELECT: 'sum-by-select',
+  SUM_BY_SELECT_FLYOUT: 'sum-by-select-flyout',
 
   // Date Time Range Picker
   DATE_TIME_RANGE_PICKER: 'date-time-range-picker',