ui: Query state utilization metrics support (#6053)

* Query State utilization metrics support

* Linter fixes

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: manojVivek

ui/packages/shared/profile/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -201,7 +201,10 @@ const RawUtilizationMetrics = ({
 
   return (
     <MetricsGraph
-      data={data}
+      data={data.map((val, idx) => ({
+        ...val,
+        highlighted: originalData?.[idx]?.isSelected ?? false,
+      }))}
       from={from}
       to={to}
       setTimeRange={setTimeRange}

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

@@ -63,6 +63,7 @@ export interface HighlightedSeries {
 export interface Series {
   id: string; // opaque string used to determine line color
   values: Array<[number, number]>; // [timestamp_ms, value]
+  highlighted?: boolean;
 }
 
 const MetricsGraph = ({
@@ -200,7 +201,10 @@ export const RawMetricsGraph = ({
   );
 
   const closestPoint = useMemo(() => {
-    // Return the closest point as the highlighted point
+    // Guard against empty series
+    if (series.length === 0) {
+      return null;
+    }
 
     const closestPointPerSeries = series.map(function (s) {
       const distances = s.values.map(d => {
@@ -530,7 +534,8 @@ export const RawMetricsGraph = ({
                     line={l}
                     color={color(s.id)}
                     strokeWidth={
-                      hovering && highlighted != null && i === highlighted.seriesIndex
+                      (hovering && highlighted != null && i === highlighted.seriesIndex) ||
+                      s.highlighted === true
                         ? lineStrokeHover
                         : lineStroke
                     }

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

@@ -174,25 +174,23 @@ export function MetricsGraphSection({
             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(seriesIndex);
-                    }
-                  }}
-                />
-              </>
+              <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(seriesIndex);
+                  }
+                }}
+              />
             );
           }
           return null;

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

@@ -22,6 +22,7 @@ import {
   useGrpcMetadata,
   useParcaContext,
   useURLState,
+  useURLStateBatch,
 } from '@parca/components';
 import {CloseIcon} from '@parca/icons';
 import {Query} from '@parca/parser';
@@ -92,6 +93,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   utilizationMetricsLoading?: boolean;
   utilizationLabels?: UtilizationLabels;
   onUtilizationSeriesSelect?: (seriesIndex: number) => void;
+  onSearchHook?: () => void;
 }
 
 export interface IProfileTypesResult {
@@ -144,10 +146,12 @@ const ProfileSelector = ({
   utilizationMetricsLoading,
   utilizationLabels,
   onUtilizationSeriesSelect,
+  onSearchHook,
 }: ProfileSelectorProps): JSX.Element => {
   const {heightStyle} = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
   const {viewComponent} = useParcaContext();
   const [queryBrowserMode, setQueryBrowserMode] = useURLState('query_browser_mode');
+  const batchUpdates = useURLStateBatch();
 
   // Use the new useQueryState hook - reads directly from URL params
   const {
@@ -227,22 +231,27 @@ const ProfileSelector = ({
   const selectedProfileName = query.profileName();
 
   const setQueryExpression = (updateTs = false): void => {
-    // When updateTs is true, re-evaluate the time range to current values
-    if (updateTs) {
-      // Force re-evaluation of time range (important for relative ranges like "last 15 minutes")
-      const currentFrom = timeRangeSelection.getFromMs(true);
-      const currentTo = timeRangeSelection.getToMs(true);
-      const currentRangeKey = timeRangeSelection.getRangeKey();
-      // Commit with refreshed time range
-      commitDraft({
-        from: currentFrom,
-        to: currentTo,
-        timeSelection: currentRangeKey,
-      });
-    } else {
-      // Commit the draft with existing values
-      commitDraft();
-    }
+    batchUpdates(() => {
+      if (onSearchHook != null) {
+        onSearchHook();
+      }
+      // When updateTs is true, re-evaluate the time range to current values
+      if (updateTs) {
+        // Force re-evaluation of time range (important for relative ranges like "last 15 minutes")
+        const currentFrom = timeRangeSelection.getFromMs(true);
+        const currentTo = timeRangeSelection.getToMs(true);
+        const currentRangeKey = timeRangeSelection.getRangeKey();
+        // Commit with refreshed time range
+        commitDraft({
+          from: currentFrom,
+          to: currentTo,
+          timeSelection: currentRangeKey,
+        });
+      } else {
+        // Commit the draft with existing values
+        commitDraft();
+      }
+    });
   };
 
   const setMatchersString = (matchers: string): void => {

ui/packages/shared/profile/src/hooks/useQueryState.ts

@@ -150,7 +150,6 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       draftTo !== '' ? parseInt(draftTo) : defaultTo
     );
   }, [draftTimeSelection, draftFrom, draftTo, defaultTimeSelection, defaultFrom, defaultTo]);
-
   // Use combined sumBy hook for fetching labels and computing defaults (based on committed state)
   const {sumBy: computedSumByFromURL, isLoading: sumBySelectionLoading} = useSumBy(
     queryClient,
@@ -201,12 +200,13 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       ? (BigInt(draftTimeRange.getToMs()) * 1_000_000n).toString()
       : undefined;
 
+    const finalSumBy = draftSumBy ?? computedSumByFromURL;
     return {
       expression: draftExpression ?? defaultExpression,
       from: draftTimeRange.getFromMs(),
       to: draftTimeRange.getToMs(),
       timeSelection: draftTimeRange.getRangeKey(),
-      sumBy: draftSumBy ?? computedSumByFromURL, // Use draft if set, otherwise fallback to computed
+      sumBy: finalSumBy, // Use draft if set, otherwise fallback to computed
       ...(draftMergeFrom !== undefined &&
       draftMergeFrom !== '' &&
       draftMergeTo !== undefined &&

ui/packages/shared/profile/src/useSumBy.ts

@@ -145,7 +145,7 @@ const getSumByFromParam = (param: string | string[] | undefined): string[] | und
   }
 
   if (param === '__none__') {
-    return [];
+    return DEFAULT_EMPTY_SUM_BY;
   }
 
   if (typeof param === 'string') {