@parca/profile 0.19.82 → 0.19.83

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -18,9 +18,11 @@ import {DateTimeRange, useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 
 import {ProfileSelection} from '..';
+import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
+import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import {useResetStateOnSeriesChange} from '../ProfileView/hooks/useResetStateOnSeriesChange';
-import {QuerySelection} from './index';
+import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
 
 interface MetricsGraphSectionProps {
   showMetricsGraph: boolean;
@@ -39,6 +41,13 @@ interface MetricsGraphSectionProps {
   query: Query;
   setNewQueryExpression: (queryExpression: string, commit?: boolean) => void;
   setQueryExpression: (updateTs?: boolean) => void;
+  utilizationMetrics?: Array<{
+    name: string;
+    humanReadableName: string;
+    data: UtilizationMetricsType[];
+  }>;
+  utilizationMetricsLoading?: boolean;
+  onUtilizationSeriesSelect?: (name: string, seriesIndex: number) => void;
 }
 
 export function MetricsGraphSection({
@@ -57,6 +66,9 @@ export function MetricsGraphSection({
   setProfileSelection,
   query,
   setNewQueryExpression,
+  utilizationMetrics,
+  utilizationMetricsLoading,
+  onUtilizationSeriesSelect,
 }: MetricsGraphSectionProps): JSX.Element {
   const resetStateOnSeriesChange = useResetStateOnSeriesChange();
   const batchUpdates = useURLStateBatch();
@@ -135,6 +147,89 @@ export function MetricsGraphSection({
     });
   };
 
+  const UtilizationGraphToShow = ({
+    utilizationMetrics,
+  }: {
+    utilizationMetrics: Array<{
+      name: string;
+      humanReadableName: string;
+      data: UtilizationMetricsType[];
+    }>;
+  }): JSX.Element => {
+    const throughputMetrics = utilizationMetrics.filter(
+      metric =>
+        metric.name === 'gpu_pcie_throughput_transmit_bytes' ||
+        metric.name === 'gpu_pcie_throughput_receive_bytes'
+    );
+    const transmitData =
+      throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes')
+        ?.data ?? [];
+    const receiveData =
+      throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_receive_bytes')?.data ??
+      [];
+
+    if (utilizationMetrics.length === 0) {
+      return <></>;
+    }
+
+    return (
+      <div>
+        {utilizationMetrics.map(({name, humanReadableName, data}) => {
+          if (
+            name !== 'gpu_pcie_throughput_transmit_bytes' &&
+            name !== 'gpu_pcie_throughput_receive_bytes'
+          ) {
+            return (
+              <UtilizationMetricsGraph
+                key={name}
+                data={data}
+                setTimeRange={handleTimeRangeChange}
+                utilizationMetricsLoading={utilizationMetricsLoading}
+                humanReadableName={humanReadableName}
+                from={querySelection.from}
+                to={querySelection.to}
+                yAxisUnit="percentage"
+                addLabelMatcher={addLabelMatcher}
+                onSeriesClick={seriesIndex => {
+                  // For generic UtilizationMetrics, just pass the series index
+                  if (onUtilizationSeriesSelect != null) {
+                    onUtilizationSeriesSelect(name, seriesIndex);
+                  }
+                }}
+              />
+            );
+          }
+          return null;
+        })}
+        {throughputMetrics.length > 0 && (
+          <AreaChart
+            transmitData={transmitData}
+            receiveData={receiveData}
+            addLabelMatcher={addLabelMatcher}
+            setTimeRange={handleTimeRangeChange}
+            name={throughputMetrics[0].name}
+            humanReadableName={throughputMetrics[0].humanReadableName}
+            from={querySelection.from}
+            to={querySelection.to}
+            utilizationMetricsLoading={utilizationMetricsLoading}
+            selectedSeries={undefined}
+            onSeriesClick={(_, seriesIndex) => {
+              // For throughput metrics, just pass the series index
+              if (onUtilizationSeriesSelect != null) {
+                let name = 'gpu_pcie_throughput_transmit_bytes';
+                if (seriesIndex > transmitData.length - 1) {
+                  name = 'gpu_pcie_throughput_receive_bytes';
+                  seriesIndex -= transmitData.length;
+                }
+                onUtilizationSeriesSelect(name, seriesIndex);
+              }
+            }}
+          />
+        )}
+      </div>
+    );
+  };
+
   return (
     <div className={cx('relative', {'py-4': !showMetricsGraph})}>
       {setDisplayHideMetricsGraphButton != null ? (
@@ -156,19 +251,25 @@ export function MetricsGraphSection({
             querySelection.from !== undefined &&
             querySelection.to !== undefined ? (
               <>
-                <ProfileMetricsGraph
-                  queryClient={queryClient}
-                  queryExpression={querySelection.expression}
-                  from={querySelection.from}
-                  to={querySelection.to}
-                  profile={profileSelection}
-                  comparing={comparing}
-                  sumBy={querySelection.sumBy ?? sumBy ?? []}
-                  sumByLoading={defaultSumByLoading}
-                  setTimeRange={handleTimeRangeChange}
-                  addLabelMatcher={addLabelMatcher}
-                  onPointClick={handlePointClick}
-                />
+                {utilizationMetrics !== undefined ? (
+                  <UtilizationGraphToShow utilizationMetrics={utilizationMetrics} />
+                ) : (
+                  <>
+                    <ProfileMetricsGraph
+                      queryClient={queryClient}
+                      queryExpression={querySelection.expression}
+                      from={querySelection.from}
+                      to={querySelection.to}
+                      profile={profileSelection}
+                      comparing={comparing}
+                      sumBy={querySelection.sumBy ?? sumBy ?? []}
+                      sumByLoading={defaultSumByLoading}
+                      setTimeRange={handleTimeRangeChange}
+                      addLabelMatcher={addLabelMatcher}
+                      onPointClick={handlePointClick}
+                    />
+                  </>
+                )}
               </>
             ) : (
               profileSelection === null && (

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

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useRef, useState} from 'react';
+import {useState} from 'react';
 
 import {Switch} from '@headlessui/react';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
@@ -24,10 +24,9 @@ import {TEST_IDS, testId} from '@parca/test-utils';
 
 import MatchersInput from '../MatchersInput';
 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;
@@ -35,22 +34,13 @@ interface SelectOption {
 }
 
 interface QueryControlsProps {
-  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;
+  showProfileTypeSelector: boolean;
+  showSumBySelector: 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;
@@ -58,55 +48,58 @@ interface QueryControlsProps {
     labelnames?: string[];
     createViewComponent?: React.ReactNode;
   };
-  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>;
+  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>;
 }
 
 export function QueryControls({
-  profileType,
-  timeRangeSelection,
-  setTimeRangeSelection,
-  setQueryExpression,
-  searchDisabled,
-  showProfileTypeSelector = false,
-  showSumBySelector = false,
-  showAdvancedMode = true,
+  showProfileTypeSelector,
   profileTypesData,
-  profileTypesLoading = false,
+  profileTypesLoading,
   selectedProfileName,
   setProfileName,
-  profileTypesError,
   viewComponent,
   setQueryBrowserMode,
-  advancedModeForQueryBrowser = false,
+  advancedModeForQueryBrowser,
   setAdvancedModeForQueryBrowser,
+  setMatchersString,
+  setQueryExpression,
+  query,
   queryBrowserRef,
-  labels = [],
-  sumBySelection = [],
-  sumBySelectionLoading = false,
+  timeRangeSelection,
+  setTimeRangeSelection,
+  searchDisabled,
+  queryClient,
+  labels,
+  sumBySelection,
+  sumBySelectionLoading,
   setUserSumBySelection,
   sumByRef,
-  queryClient,
+  profileType,
+  showSumBySelector,
+  profileTypesError,
+  refreshLabelNames,
 }: 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"
@@ -121,7 +114,7 @@ export function QueryControls({
             profileTypesData={profileTypesData}
             loading={profileTypesLoading}
             selectedKey={selectedProfileName}
-            onSelection={setProfileName ?? (() => {})}
+            onSelection={setProfileName}
             error={profileTypesError}
             disabled={viewComponent?.disableProfileTypesDropdown}
           />
@@ -130,7 +123,7 @@ export function QueryControls({
 
       <div
         className="w-full flex-1 flex flex-col gap-1 mt-auto"
-        ref={actualQueryBrowserRef}
+        ref={queryBrowserRef}
         {...testId(TEST_IDS.QUERY_BROWSER_CONTAINER)}
       >
         <div className="flex items-center justify-between">
@@ -138,13 +131,13 @@ export function QueryControls({
             <label className="text-xs" {...testId(TEST_IDS.QUERY_LABEL)}>
               Query
             </label>
-            {showAdvancedMode && viewComponent?.disableExplorativeQuerying !== true && (
+            {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'
@@ -171,12 +164,36 @@ export function QueryControls({
         {viewComponent?.disableExplorativeQuerying === true &&
         viewComponent?.labelnames !== undefined &&
         viewComponent?.labelnames.length >= 1 ? (
-          <ViewMatchers labelNames={viewComponent.labelnames} />
-        ) : showAdvancedMode && advancedModeForQueryBrowser ? (
-          <MatchersInput />
+          <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()}
+          />
         ) : (
           <SimpleMatchers
-            queryBrowserRef={actualQueryBrowserRef}
+            setMatchersString={setMatchersString}
+            runQuery={setQueryExpression}
+            currentQuery={query}
+            profileType={selectedProfileName}
+            queryBrowserRef={queryBrowserRef}
+            queryClient={queryClient}
+            start={timeRangeSelection.getFromMs()}
+            end={timeRangeSelection.getToMs()}
             searchExecutedTimestamp={searchExecutedTimestamp}
           />
         )}
@@ -199,9 +216,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={{
@@ -215,13 +232,14 @@ 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 as ProfileType)?.delta}
+            isDisabled={!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;
               }
@@ -239,7 +257,7 @@ export function QueryControls({
                 currentRef.blur();
               }
             }}
-            onRefresh={refetchLabelNames}
+            onRefresh={refreshLabelNames}
             refreshTitle="Refresh label names"
             refreshTestId="sum-by-refresh-button"
             menuTestId={TEST_IDS.SUM_BY_SELECT_FLYOUT}

package/src/ProfileSelector/index.tsx

@@ -29,14 +29,13 @@ 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 {QueryControls} from '../QueryControls';
-import {LabelsQueryProvider, useLabelsQueryProvider} from '../contexts/LabelsQueryProvider';
-import {UnifiedLabelsProvider} from '../contexts/UnifiedLabelsContext';
-import {useLabelNames} from '../hooks/useLabels';
+import {UtilizationLabelsProvider} from '../contexts/UtilizationLabelsContext';
 import {useQueryState} from '../hooks/useQueryState';
 import useGrpcQuery from '../useGrpcQuery';
 import {MetricsGraphSection} from './MetricsGraphSection';
+import {QueryControls} from './QueryControls';
 import {useAutoQuerySelector} from './useAutoQuerySelector';
 
 export interface QuerySelection {
@@ -53,9 +52,31 @@ 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;
@@ -64,6 +85,14 @@ 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;
 }
 
@@ -110,11 +139,16 @@ const ProfileSelector = ({
   showMetricsGraph = true,
   showSumBySelector = true,
   showProfileTypeSelector = true,
+  disableExplorativeQuerying = false,
   setDisplayHideMetricsGraphButton,
   suffix,
+  utilizationMetrics,
+  utilizationMetricsLoading,
+  utilizationLabels,
+  onUtilizationSeriesSelect,
   onSearchHook,
 }: ProfileSelectorProps): JSX.Element => {
-  const {heightStyle} = useMetricsGraphDimensions(comparing, false);
+  const {heightStyle} = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
   const {viewComponent} = useParcaContext();
   const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
   const batchUpdates = useURLStateBatch();
@@ -167,7 +201,7 @@ const ProfileSelector = ({
     error,
   } = useProfileTypes(queryClient, from, to);
 
-  const {result} = useLabelNames(queryClient, profileType.toString(), from, to);
+  const {result, refetch} = useLabelNames(queryClient, profileType.toString(), from, to);
 
   const labels = useMemo(() => {
     return result.response?.labelNames === undefined ? [] : result.response.labelNames;
@@ -264,108 +298,77 @@ const ProfileSelector = ({
   const sumByRef = useRef(null);
 
   return (
-    <>
-      <div className="mb-2 flex">
-        <LabelsQueryProvider
-          setMatchersString={setMatchersString}
-          runQuery={setQueryExpression}
-          currentQuery={query}
-          profileType={selectedProfileName ?? profileType.toString()}
+    <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}
           queryClient={queryClient}
-          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}
-            />
-          </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}
-      />
-    </>
+          queryExpressionString={queryExpressionString}
+          setTimeRangeSelection={handleTimeRangeChange}
+          selectQuery={commitDraft}
+          setProfileSelection={setProfileSelection}
+          query={query}
+          setQueryExpression={setQueryExpression}
+          setNewQueryExpression={setDraftExpression}
+          utilizationMetrics={utilizationMetrics}
+          utilizationMetricsLoading={utilizationMetricsLoading}
+          onUtilizationSeriesSelect={onUtilizationSeriesSelect}
+        />
+      </>
+    </UtilizationLabelsProvider>
   );
 };
 
 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>
-  );
-};