Features/UI/add tooltip to metric summary

src/guidellm/presentation/data_models.py

@@ -5,6 +5,8 @@
 
 from pydantic import BaseModel, computed_field
 
+from guidellm.scheduler import SchedulingStrategy
+
 if TYPE_CHECKING:
     from guidellm.benchmark import GenerativeBenchmark
 
@@ -216,11 +218,29 @@ class BenchmarkDatum(BaseModel):
     ttft: TabularDistributionSummary
     throughput: TabularDistributionSummary
     time_per_request: TabularDistributionSummary
+    strategy_display_str: str
+
+    @classmethod
+    def get_strategy_display_str(cls, strategy: SchedulingStrategy):
+        strategy_type = strategy if isinstance(strategy, str) else strategy.type_
+        strategy_instance = (
+            strategy if isinstance(strategy, SchedulingStrategy) else None
+        )
+
+        if strategy_type == "concurrent":
+            rate = f"@{strategy.streams}" if strategy_instance else "@##"  # type: ignore[attr-defined]
+        elif strategy_type in ("constant", "poisson"):
+            rate = f"@{strategy.rate:.2f}" if strategy_instance else "@#.##"  # type: ignore[attr-defined]
+        else:
+            rate = ""
+        return f"{strategy_type}{rate}"
 
     @classmethod
     def from_benchmark(cls, bm: "GenerativeBenchmark"):
+        rps = bm.metrics.requests_per_second.successful.mean
         return cls(
-            requests_per_second=bm.metrics.requests_per_second.successful.mean,
+            strategy_display_str=cls.get_strategy_display_str(bm.scheduler.strategy),
+            requests_per_second=rps,
             itl=TabularDistributionSummary.from_distribution_summary(
                 bm.metrics.inter_token_latency_ms.successful
             ),

src/ui/lib/components/Charts/MetricLine/MetricLine.component.tsx

@@ -1,5 +1,6 @@
-import { useTheme } from '@mui/material';
-import { ResponsiveLine } from '@nivo/line';
+import { Typography, useTheme } from '@mui/material';
+import { PointTooltipProps, ResponsiveLine } from '@nivo/line';
+import { BasicTooltip } from '@nivo/tooltip';
 import React, { FC } from 'react';
 
 import { useColor } from '@/lib/hooks/useColor';
@@ -49,11 +50,30 @@ export const Component: FC<MetricLineProps> = ({
       reverse: false,
     };
   }
+  type PointTooltipPropsWithLabel = PointTooltipProps & {
+    point: {
+      data: {
+        label: string;
+      };
+    };
+  };
 
   return (
     <ResponsiveLine
       curve="monotoneX"
       data={data}
+      tooltip={(point) => (
+        <BasicTooltip
+          id={
+            <Typography variant="body2">
+              {(point as PointTooltipPropsWithLabel).point.data.label}
+            </Typography>
+          }
+          color={point.point.color}
+          enableChip={true}
+        />
+      )}
+      pointSize={10}
       colors={[selectedColor]}
       margin={{ top: 20, right: 10, bottom: 20, left: 35.5 }}
       xScale={{ type: 'linear', min: minX }}
@@ -92,7 +112,6 @@ export const Component: FC<MetricLineProps> = ({
       }}
       enableGridX={false}
       enableGridY={false}
-      pointSize={0}
       useMesh={true}
       layers={[
         CustomAxes,
@@ -115,6 +134,9 @@ export const Component: FC<MetricLineProps> = ({
         ),
         'axes',
         'lines',
+        'points',
+        'markers',
+        'mesh',
       ]}
       theme={lineTheme}
     />

src/ui/lib/components/MetricsSummary/MetricsSummary.component.tsx

@@ -102,7 +102,7 @@ export const Component = () => {
   return (
     <>
       <BlockHeader label="Metrics Summary" />
-      <MetricsSummaryContainer container>
+      <MetricsSummaryContainer sx={{ overflow: 'visible' }} container>
         <HeaderLeftCell item xs={9}>
           <Box display="flex" flexDirection="row" justifyContent="space-between">
             <Typography variant="h6" color="surface.onSurface" mb={2}>