ui: Utilization metrics series selection fixes (#6055)

* Utilization metrics series selection 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/Throughput.tsx

@@ -38,6 +38,7 @@ interface NetworkSeries {
   values: number[][];
   labelset: string;
   isReceive?: boolean;
+  isSelected?: boolean;
 }
 
 interface CommonProps {
@@ -52,7 +53,7 @@ interface CommonProps {
   from: number;
   to: number;
   selectedSeries?: Array<{key: string; value: string}>;
-  onSeriesClick?: (seriesIndex: number) => void;
+  onSeriesClick?: (name: string, seriesIndex: number) => void;
 }
 
 type RawAreaChartProps = CommonProps & {
@@ -186,6 +187,7 @@ function transformToSeries(data: MetricSeries[], isReceive = false): NetworkSeri
         }, []),
         labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
         isReceive,
+        isSelected: s.isSelected,
       });
     }
     return agg;
@@ -223,6 +225,7 @@ function transformNetworkSeriesToSeries(
         timestamp,
         value,
       ]),
+      highlighted: networkSeries.isSelected ?? false,
     };
   });
 }
@@ -259,7 +262,7 @@ const RawAreaChart = ({
       setTimeRange={setTimeRange}
       onSampleClick={closestPoint => {
         if (onSeriesClick != null) {
-          onSeriesClick(closestPoint.seriesIndex);
+          onSeriesClick(humanReadableName, closestPoint.seriesIndex);
         }
       }}
       yAxisLabel={humanReadableName}

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

@@ -47,7 +47,7 @@ interface MetricsGraphSectionProps {
     data: UtilizationMetricsType[];
   }>;
   utilizationMetricsLoading?: boolean;
-  onUtilizationSeriesSelect?: (seriesIndex: number) => void;
+  onUtilizationSeriesSelect?: (name: string, seriesIndex: number) => void;
 }
 
 export function MetricsGraphSection({
@@ -161,6 +161,12 @@ export function MetricsGraphSection({
         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 <></>;
@@ -187,7 +193,7 @@ export function MetricsGraphSection({
                 onSeriesClick={seriesIndex => {
                   // For generic UtilizationMetrics, just pass the series index
                   if (onUtilizationSeriesSelect != null) {
-                    onUtilizationSeriesSelect(seriesIndex);
+                    onUtilizationSeriesSelect(name, seriesIndex);
                   }
                 }}
               />
@@ -197,14 +203,8 @@ export function MetricsGraphSection({
         })}
         {throughputMetrics.length > 0 && (
           <AreaChart
-            transmitData={
-              throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes')
-                ?.data ?? []
-            }
-            receiveData={
-              throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_receive_bytes')
-                ?.data ?? []
-            }
+            transmitData={transmitData}
+            receiveData={receiveData}
             addLabelMatcher={addLabelMatcher}
             setTimeRange={handleTimeRangeChange}
             name={throughputMetrics[0].name}
@@ -213,7 +213,17 @@ export function MetricsGraphSection({
             to={querySelection.to}
             utilizationMetricsLoading={utilizationMetricsLoading}
             selectedSeries={undefined}
-            onSeriesClick={onUtilizationSeriesSelect}
+            onSeriesClick={(name, 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>

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

@@ -92,7 +92,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   }>;
   utilizationMetricsLoading?: boolean;
   utilizationLabels?: UtilizationLabels;
-  onUtilizationSeriesSelect?: (seriesIndex: number) => void;
+  onUtilizationSeriesSelect?: (name: string, seriesIndex: number) => void;
   onSearchHook?: () => void;
 }