Features/UI/add tooltip to metric summary

src/guidellm/benchmark/outputs/html.py

@@ -29,6 +29,7 @@
     GenerativeBenchmark,
     GenerativeBenchmarksReport,
 )
+from guidellm.scheduler.strategies import SchedulingStrategy
 from guidellm.schemas import DistributionSummary
 from guidellm.settings import settings
 from guidellm.utils import camelize_str, recursive_key_update
@@ -202,6 +203,21 @@ def from_distribution_summary(
         """
         return cls(**distribution.model_dump())
 
+def _get_strategy_display_str(strategy: SchedulingStrategy | str):
+    if isinstance(strategy, SchedulingStrategy):
+        return str(strategy)
+
+    strategy_type = strategy
+
+    if strategy_type == "concurrent":
+        return "concurrent@##"
+    elif strategy_type in ("constant", "poisson"):
+        return f"{strategy_type}@#.##"
+    elif strategy_type == "throughput":
+        return "throughput@##"
+
+    return strategy_type
+
 
 def _create_html_report(js_data: dict[str, str], output_path: Path) -> Path:
     """
@@ -400,9 +416,11 @@ def _build_benchmarks(benchmarks: list[GenerativeBenchmark]) -> list[dict[str, A
     """
     result = []
     for bm in benchmarks:
+        rps = bm.metrics.requests_per_second.successful.mean
         result.append(
             {
-                "requests_per_second": bm.metrics.requests_per_second.successful.mean,
+                "strategy_display_str":_get_strategy_display_str(bm.config.strategy),
+                "requests_per_second": rps,
                 "itl": _TabularDistributionSummary.from_distribution_summary(
                     bm.metrics.inter_token_latency_ms.successful
                 ).model_dump(),

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}>