@parca/profile 0.19.83 → 0.19.84

package/src/ProfileSelector/index.tsx

@@ -29,13 +29,14 @@ import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 import {millisToProtoTimestamp, type NavigateFunction} from '@parca/utilities';
 
-import {useLabelNames} from '../MatchersInput/index';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
-import {UtilizationLabelsProvider} from '../contexts/UtilizationLabelsContext';
+import {QueryControls} from '../QueryControls';
+import {LabelsQueryProvider, useLabelsQueryProvider} from '../contexts/LabelsQueryProvider';
+import {UnifiedLabelsProvider} from '../contexts/UnifiedLabelsContext';
+import {useLabelNames} from '../hooks/useLabels';
 import {useQueryState} from '../hooks/useQueryState';
 import useGrpcQuery from '../useGrpcQuery';
 import {MetricsGraphSection} from './MetricsGraphSection';
-import {QueryControls} from './QueryControls';
 import {useAutoQuerySelector} from './useAutoQuerySelector';
 
 export interface QuerySelection {
@@ -52,31 +53,9 @@ interface ProfileSelectorFeatures {
   showMetricsGraph: boolean;
   showSumBySelector?: boolean;
   showProfileTypeSelector?: boolean;
-  disableExplorativeQuerying?: boolean;
   disableProfileTypesDropdown?: boolean;
 }
 
-export interface UtilizationMetrics {
-  isSelected: boolean;
-  labelset: {
-    labels: Array<{
-      name: string;
-      value: string;
-    }>;
-  };
-  samples: Array<{
-    timestamp: number;
-    value: number;
-  }>;
-}
-
-export interface UtilizationLabels {
-  utilizationLabelNames?: string[];
-  utilizationFetchLabelValues?: (key: string) => Promise<string[]>;
-  utilizationLabelValues?: string[];
-  utilizationLabelNamesLoading?: boolean;
-}
-
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
   queryClient: QueryServiceClient;
   closeProfile: () => void;
@@ -85,14 +64,6 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   navigateTo: NavigateFunction;
   setDisplayHideMetricsGraphButton?: Dispatch<SetStateAction<boolean>>;
   suffix?: '_a' | '_b'; // For comparison mode
-  utilizationMetrics?: Array<{
-    name: string;
-    humanReadableName: string;
-    data: UtilizationMetrics[];
-  }>;
-  utilizationMetricsLoading?: boolean;
-  utilizationLabels?: UtilizationLabels;
-  onUtilizationSeriesSelect?: (name: string, seriesIndex: number) => void;
   onSearchHook?: () => void;
 }
 
@@ -139,16 +110,11 @@ const ProfileSelector = ({
   showMetricsGraph = true,
   showSumBySelector = true,
   showProfileTypeSelector = true,
-  disableExplorativeQuerying = false,
   setDisplayHideMetricsGraphButton,
   suffix,
-  utilizationMetrics,
-  utilizationMetricsLoading,
-  utilizationLabels,
-  onUtilizationSeriesSelect,
   onSearchHook,
 }: ProfileSelectorProps): JSX.Element => {
-  const {heightStyle} = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
+  const {heightStyle} = useMetricsGraphDimensions(comparing, false);
   const {viewComponent} = useParcaContext();
   const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
   const batchUpdates = useURLStateBatch();
@@ -166,6 +132,7 @@ const ProfileSelector = ({
     profileSelection,
     setProfileSelection,
     sumByLoading,
+    draftParsedQuery,
   } = useQueryState({suffix});
 
   // Use draft state for local state instead of committed state
@@ -201,7 +168,7 @@ const ProfileSelector = ({
     error,
   } = useProfileTypes(queryClient, from, to);
 
-  const {result, refetch} = useLabelNames(queryClient, profileType.toString(), from, to);
+  const {result} = useLabelNames(queryClient, profileType.toString(), from, to);
 
   const labels = useMemo(() => {
     return result.response?.labelNames === undefined ? [] : result.response.labelNames;
@@ -242,6 +209,10 @@ const ProfileSelector = ({
         const currentTo = timeRangeSelection.getToMs(true);
         const currentRangeKey = timeRangeSelection.getRangeKey();
         // Commit with refreshed time range
+        console.log(
+          '[draftExpression] setQueryExpression: committing with refreshed time range:',
+          draftSelection.expression
+        );
         commitDraft({
           from: currentFrom,
           to: currentTo,
@@ -298,77 +269,111 @@ const ProfileSelector = ({
   const sumByRef = useRef(null);
 
   return (
-    <UtilizationLabelsProvider value={{...utilizationLabels}}>
-      <>
-        <div className="mb-2 flex">
-          <QueryControls
-            showProfileTypeSelector={showProfileTypeSelector}
-            showSumBySelector={showSumBySelector}
-            disableExplorativeQuerying={disableExplorativeQuerying}
-            profileTypesData={profileTypesData}
-            profileTypesLoading={profileTypesLoading}
-            selectedProfileName={selectedProfileName}
-            setProfileName={setProfileName}
-            setMatchersString={setMatchersString}
-            setQueryExpression={setQueryExpression}
-            query={query}
-            queryBrowserRef={queryBrowserRef}
-            timeRangeSelection={timeRangeSelection}
-            setTimeRangeSelection={handleTimeRangeChange}
-            searchDisabled={searchDisabled}
-            queryBrowserMode={queryBrowserMode as string}
-            setQueryBrowserMode={setQueryBrowserMode}
-            advancedModeForQueryBrowser={advancedModeForQueryBrowser}
-            setAdvancedModeForQueryBrowser={setAdvancedModeForQueryBrowser}
-            queryClient={queryClient}
-            sumByRef={sumByRef}
-            labels={labels}
-            sumBySelection={draftSelection.sumBy ?? []}
-            sumBySelectionLoading={sumByLoading}
-            setUserSumBySelection={setDraftSumBy}
-            profileType={profileType}
-            profileTypesError={error}
-            viewComponent={viewComponent}
-            refreshLabelNames={refetch}
-          />
-          {comparing && (
-            <div>
-              <IconButton
-                onClick={() => closeProfile()}
-                icon={<CloseIcon />}
-                {...testId(TEST_IDS.COMPARE_CLOSE_BUTTON)}
-              />
-            </div>
-          )}
-        </div>
-        <MetricsGraphSection
-          showMetricsGraph={showMetricsGraph}
-          setDisplayHideMetricsGraphButton={setDisplayHideMetricsGraphButton}
-          heightStyle={
-            utilizationMetrics !== undefined && utilizationMetrics?.length > 0
-              ? 'auto'
-              : heightStyle
-          }
-          querySelection={querySelection}
-          profileSelection={profileSelection}
-          comparing={comparing}
-          sumBy={querySelection.sumBy ?? []}
-          defaultSumByLoading={sumByLoading}
+    <>
+      <div className="mb-2 flex">
+        <LabelsQueryProvider
+          setMatchersString={setMatchersString}
+          runQuery={setQueryExpression}
+          currentQuery={query}
+          profileType={selectedProfileName ?? profileType.toString()}
           queryClient={queryClient}
-          queryExpressionString={queryExpressionString}
-          setTimeRangeSelection={handleTimeRangeChange}
-          selectQuery={commitDraft}
-          setProfileSelection={setProfileSelection}
-          query={query}
-          setQueryExpression={setQueryExpression}
-          setNewQueryExpression={setDraftExpression}
-          utilizationMetrics={utilizationMetrics}
-          utilizationMetricsLoading={utilizationMetricsLoading}
-          onUtilizationSeriesSelect={onUtilizationSeriesSelect}
-        />
-      </>
-    </UtilizationLabelsProvider>
+          start={timeRangeSelection.getFromMs()}
+          end={timeRangeSelection.getToMs()}
+          suffix={suffix}
+        >
+          <LabelsSource>
+            <QueryControls
+              showProfileTypeSelector={showProfileTypeSelector}
+              showSumBySelector={showSumBySelector}
+              profileTypesData={profileTypesData}
+              profileTypesLoading={profileTypesLoading}
+              selectedProfileName={selectedProfileName}
+              setProfileName={setProfileName}
+              setMatchersString={setMatchersString}
+              setQueryExpression={setQueryExpression}
+              query={query}
+              queryBrowserRef={queryBrowserRef}
+              timeRangeSelection={timeRangeSelection}
+              setTimeRangeSelection={handleTimeRangeChange}
+              searchDisabled={searchDisabled}
+              setQueryBrowserMode={setQueryBrowserMode}
+              advancedModeForQueryBrowser={advancedModeForQueryBrowser}
+              setAdvancedModeForQueryBrowser={setAdvancedModeForQueryBrowser}
+              queryClient={queryClient}
+              sumByRef={sumByRef}
+              labels={labels}
+              sumBySelection={draftSelection.sumBy ?? []}
+              sumBySelectionLoading={sumByLoading}
+              setUserSumBySelection={setDraftSumBy}
+              profileType={profileType}
+              profileTypesError={error}
+              viewComponent={viewComponent}
+              draftSelection={draftSelection}
+              setDraftMatchers={setDraftMatchers}
+              draftParsedQuery={draftParsedQuery}
+            />
+          </LabelsSource>
+        </LabelsQueryProvider>
+        {comparing && (
+          <div>
+            <IconButton
+              onClick={() => closeProfile()}
+              icon={<CloseIcon />}
+              {...testId(TEST_IDS.COMPARE_CLOSE_BUTTON)}
+            />
+          </div>
+        )}
+      </div>
+      <MetricsGraphSection
+        showMetricsGraph={showMetricsGraph}
+        setDisplayHideMetricsGraphButton={setDisplayHideMetricsGraphButton}
+        heightStyle={heightStyle}
+        querySelection={querySelection}
+        profileSelection={profileSelection}
+        comparing={comparing}
+        sumBy={querySelection.sumBy ?? []}
+        defaultSumByLoading={sumByLoading}
+        queryClient={queryClient}
+        queryExpressionString={queryExpressionString}
+        setTimeRangeSelection={handleTimeRangeChange}
+        selectQuery={commitDraft}
+        setProfileSelection={setProfileSelection}
+        query={query}
+        setQueryExpression={setQueryExpression}
+        setNewQueryExpression={setDraftExpression}
+      />
+    </>
   );
 };
 
 export default ProfileSelector;
+
+const LabelsSource = ({children}: {children: React.ReactNode}): JSX.Element => {
+  const {
+    labelNames,
+    labelValues,
+    isLabelNamesLoading,
+    isLabelValuesLoading,
+    refetchLabelValues,
+    refetchLabelNames,
+    currentLabelName,
+    setCurrentLabelName,
+    suffix,
+  } = useLabelsQueryProvider();
+
+  return (
+    <UnifiedLabelsProvider
+      labelNames={labelNames}
+      labelValues={labelValues}
+      isLabelNamesLoading={isLabelNamesLoading}
+      isLabelValuesLoading={isLabelValuesLoading}
+      refetchLabelValues={refetchLabelValues}
+      refetchLabelNames={refetchLabelNames}
+      currentLabelName={currentLabelName}
+      setCurrentLabelName={setCurrentLabelName}
+      suffix={suffix}
+    >
+      {children}
+    </UnifiedLabelsProvider>
+  );
+};

package/src/{ProfileSelector/QueryControls.tsx → QueryControls/index.tsx}

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useState} from 'react';
+import {useRef, useState} from 'react';
 
 import {Switch} from '@headlessui/react';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
@@ -23,10 +23,12 @@ import {ProfileType, Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import MatchersInput from '../MatchersInput';
+import {QuerySelection} from '../ProfileSelector';
 import ProfileTypeSelector from '../ProfileTypeSelector';
-import SelectWithRefresh from '../SelectWithRefresh';
-import SimpleMatchers from '../SimpleMatchers';
+import {SelectWithRefresh} from '../SelectWithRefresh';
+import SimpleMatchers from '../SimpleMatchers/';
 import ViewMatchers from '../ViewMatchers';
+import {useLabelNames} from '../hooks/useLabels';
 
 interface SelectOption {
   label: string;
@@ -34,13 +36,22 @@ interface SelectOption {
 }
 
 interface QueryControlsProps {
-  showProfileTypeSelector: boolean;
-  showSumBySelector: boolean;
-  disableExplorativeQuerying: boolean;
+  queryClient: QueryServiceClient;
+  query: Query;
+  profileType: string | ProfileType;
+  timeRangeSelection: DateTimeRange;
+  setTimeRangeSelection: (range: DateTimeRange) => void;
+  setMatchersString: (matchers: string) => void;
+  setQueryExpression: (updateTs?: boolean) => void;
+  searchDisabled: boolean;
+  showProfileTypeSelector?: boolean;
+  showSumBySelector?: boolean;
+  showAdvancedMode?: boolean;
+  disableExplorativeQuerying?: boolean;
   profileTypesData?: ProfileTypesResponse;
-  profileTypesLoading: boolean;
-  selectedProfileName: string;
-  setProfileName: (name: string | undefined) => void;
+  profileTypesLoading?: boolean;
+  selectedProfileName?: string;
+  setProfileName?: (name: string | undefined) => void;
   profileTypesError?: RpcError;
   viewComponent?: {
     disableProfileTypesDropdown?: boolean;
@@ -48,58 +59,61 @@ interface QueryControlsProps {
     labelnames?: string[];
     createViewComponent?: React.ReactNode;
   };
-  queryBrowserMode: string;
-  setQueryBrowserMode: (mode: string) => void;
-  advancedModeForQueryBrowser: boolean;
-  setAdvancedModeForQueryBrowser: (mode: boolean) => void;
-  setMatchersString: (matchers: string) => void;
-  setQueryExpression: (updateTs?: boolean) => void;
-  query: Query;
-  queryBrowserRef: React.RefObject<HTMLDivElement>;
-  timeRangeSelection: DateTimeRange;
-  setTimeRangeSelection: (range: DateTimeRange) => void;
-  searchDisabled: boolean;
-  queryClient: QueryServiceClient;
-  labels: string[];
-  sumBySelection: string[];
-  sumBySelectionLoading: boolean;
-  setUserSumBySelection: (sumBy: string[]) => void;
-  sumByRef: React.RefObject<SelectInstance>;
-  profileType: ProfileType;
-  refreshLabelNames: () => Promise<void>;
+  setQueryBrowserMode?: (mode: string) => void;
+  advancedModeForQueryBrowser?: boolean;
+  setAdvancedModeForQueryBrowser?: (mode: boolean) => void;
+  queryBrowserRef?: React.RefObject<HTMLDivElement>;
+  labels?: string[];
+  sumBySelection?: string[];
+  sumBySelectionLoading?: boolean;
+  setUserSumBySelection?: (sumBy: string[]) => void;
+  sumByRef?: React.RefObject<SelectInstance>;
+  draftSelection: QuerySelection;
+  setDraftMatchers: (selection: string) => void;
+  draftParsedQuery?: Query | null;
 }
 
 export function QueryControls({
-  showProfileTypeSelector,
+  profileType,
+  timeRangeSelection,
+  setTimeRangeSelection,
+  setQueryExpression,
+  searchDisabled,
+  showProfileTypeSelector = false,
+  showSumBySelector = false,
+  showAdvancedMode = true,
   profileTypesData,
-  profileTypesLoading,
+  profileTypesLoading = false,
   selectedProfileName,
   setProfileName,
+  profileTypesError,
   viewComponent,
   setQueryBrowserMode,
-  advancedModeForQueryBrowser,
+  advancedModeForQueryBrowser = false,
   setAdvancedModeForQueryBrowser,
-  setMatchersString,
-  setQueryExpression,
-  query,
   queryBrowserRef,
-  timeRangeSelection,
-  setTimeRangeSelection,
-  searchDisabled,
-  queryClient,
-  labels,
-  sumBySelection,
-  sumBySelectionLoading,
+  labels = [],
+  sumBySelection = [],
+  sumBySelectionLoading = false,
   setUserSumBySelection,
   sumByRef,
-  profileType,
-  showSumBySelector,
-  profileTypesError,
-  refreshLabelNames,
+  queryClient,
+  draftSelection,
+  setDraftMatchers,
+  draftParsedQuery,
 }: QueryControlsProps): JSX.Element {
   const {timezone} = useParcaContext();
+  const defaultQueryBrowserRef = useRef<HTMLDivElement>(null);
+  const actualQueryBrowserRef = queryBrowserRef ?? defaultQueryBrowserRef;
   const [searchExecutedTimestamp, setSearchExecutedTimestamp] = useState<number>(0);
 
+  const {refetch: refetchLabelNames} = useLabelNames(
+    queryClient,
+    profileType as string,
+    timeRangeSelection.getFromMs(),
+    timeRangeSelection.getToMs()
+  );
+
   return (
     <div
       className="flex w-full flex-wrap items-start gap-2"
@@ -114,7 +128,7 @@ export function QueryControls({
             profileTypesData={profileTypesData}
             loading={profileTypesLoading}
             selectedKey={selectedProfileName}
-            onSelection={setProfileName}
+            onSelection={setProfileName ?? (() => {})}
             error={profileTypesError}
             disabled={viewComponent?.disableProfileTypesDropdown}
           />
@@ -123,7 +137,7 @@ export function QueryControls({
 
       <div
         className="w-full flex-1 flex flex-col gap-1 mt-auto"
-        ref={queryBrowserRef}
+        ref={actualQueryBrowserRef}
         {...testId(TEST_IDS.QUERY_BROWSER_CONTAINER)}
       >
         <div className="flex items-center justify-between">
@@ -131,13 +145,13 @@ export function QueryControls({
             <label className="text-xs" {...testId(TEST_IDS.QUERY_LABEL)}>
               Query
             </label>
-            {viewComponent?.disableExplorativeQuerying !== true && (
+            {showAdvancedMode && viewComponent?.disableExplorativeQuerying !== true && (
               <>
                 <Switch
                   checked={advancedModeForQueryBrowser}
                   onChange={() => {
-                    setAdvancedModeForQueryBrowser(!advancedModeForQueryBrowser);
-                    setQueryBrowserMode(advancedModeForQueryBrowser ? 'simple' : 'advanced');
+                    setAdvancedModeForQueryBrowser?.(!advancedModeForQueryBrowser);
+                    setQueryBrowserMode?.(advancedModeForQueryBrowser ? 'simple' : 'advanced');
                   }}
                   className={`${
                     advancedModeForQueryBrowser ? 'bg-indigo-600' : 'bg-gray-400 dark:bg-gray-800'
@@ -164,37 +178,16 @@ export function QueryControls({
         {viewComponent?.disableExplorativeQuerying === true &&
         viewComponent?.labelnames !== undefined &&
         viewComponent?.labelnames.length >= 1 ? (
-          <ViewMatchers
-            labelNames={viewComponent.labelnames}
-            setMatchersString={setMatchersString}
-            profileType={selectedProfileName}
-            runQuery={setQueryExpression}
-            currentQuery={query}
-            queryClient={queryClient}
-            start={timeRangeSelection.getFromMs()}
-            end={timeRangeSelection.getToMs()}
-          />
-        ) : advancedModeForQueryBrowser ? (
-          <MatchersInput
-            setMatchersString={setMatchersString}
-            runQuery={setQueryExpression}
-            currentQuery={query}
-            profileType={selectedProfileName}
-            queryClient={queryClient}
-            start={timeRangeSelection.getFromMs()}
-            end={timeRangeSelection.getToMs()}
-          />
+          <ViewMatchers labelNames={viewComponent.labelnames} />
+        ) : showAdvancedMode && advancedModeForQueryBrowser ? (
+          <MatchersInput />
         ) : (
           <SimpleMatchers
-            setMatchersString={setMatchersString}
-            runQuery={setQueryExpression}
-            currentQuery={query}
-            profileType={selectedProfileName}
-            queryBrowserRef={queryBrowserRef}
-            queryClient={queryClient}
-            start={timeRangeSelection.getFromMs()}
-            end={timeRangeSelection.getToMs()}
+            queryBrowserRef={actualQueryBrowserRef}
             searchExecutedTimestamp={searchExecutedTimestamp}
+            draftSelection={draftSelection}
+            setDraftMatchers={setDraftMatchers}
+            draftParsedQuery={draftParsedQuery}
           />
         )}
       </div>
@@ -216,9 +209,9 @@ export function QueryControls({
             options={labels.map(label => ({label, value: label}))}
             className="parca-select-container text-sm w-full max-w-80"
             classNamePrefix="parca-select"
-            value={(sumBySelection ?? []).map(sumBy => ({label: sumBy, value: sumBy}))}
+            value={sumBySelection.map(sumBy => ({label: sumBy, value: sumBy}))}
             onChange={newValue => {
-              setUserSumBySelection(newValue.map(option => option.value));
+              setUserSumBySelection?.(newValue.map(option => option.value));
             }}
             placeholder="Labels..."
             styles={{
@@ -232,14 +225,13 @@ export function QueryControls({
                 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}
+            isDisabled={!(profileType as ProfileType)?.delta}
             // @ts-expect-error
             ref={sumByRef}
             onKeyDown={e => {
-              const currentRef = sumByRef.current as unknown as SelectInstance | null;
+              const currentRef = sumByRef?.current as unknown as SelectInstance | null;
               if (currentRef == null) {
                 return;
               }
@@ -257,7 +249,7 @@ export function QueryControls({
                 currentRef.blur();
               }
             }}
-            onRefresh={refreshLabelNames}
+            onRefresh={refetchLabelNames}
             refreshTitle="Refresh label names"
             refreshTestId="sum-by-refresh-button"
             menuTestId={TEST_IDS.SUM_BY_SELECT_FLYOUT}

package/src/SimpleMatchers/Select.tsx

@@ -377,7 +377,7 @@ const CustomSelect: React.FC<CustomSelectProps & Record<string, any>> = ({
               <RefreshButton
                 onClick={() => void handleRefetch()}
                 disabled={isRefetching}
-                title="Refresh label values"
+                title="Refresh results"
                 testId={TEST_IDS.LABEL_VALUE_REFRESH_BUTTON}
                 sticky={true}
                 loading={isRefetching}