Features/add tooltip to line chart #392

features/ui/add-tooltip-to-metric-summary

Author: sjmonson

src/guidellm/presentation/data_models.py

@@ -6,6 +6,8 @@
 import httpx
 from pydantic import BaseModel, computed_field
 
+from guidellm.scheduler.strategy import SchedulingStrategy
+
 if TYPE_CHECKING:
     from guidellm.benchmark import GenerativeBenchmark
 
@@ -253,12 +255,30 @@ 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,
-            tpot=TabularDistributionSummary.from_distribution_summary(
+            strategy_display_str=cls.get_strategy_display_str(bm.args.strategy),
+            requests_per_second=rps,
+            itl=TabularDistributionSummary.from_distribution_summary(
                 bm.metrics.inter_token_latency_ms.successful
             ),
             ttft=TabularDistributionSummary.from_distribution_summary(

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

src/ui/lib/store/benchmarksWindowData.ts

@@ -1,5 +1,6 @@
 export const benchmarksScript = `window.benchmarks = [
   {
+    strategyDisplayStr: "synchronous",
     requestsPerSecond: 11.411616848282272,
     tpot: {
       mean: 8.758024845683707,
@@ -171,6 +172,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 36.289181300710815,
     tpot: {
       mean: 588.0161376137819,
@@ -342,6 +344,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 20.752070927855794,
     tpot: {
       mean: 116.28360712595156,
@@ -513,6 +516,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 26.81917480361788,
     tpot: {
       mean: 299.7306064613554,
@@ -684,6 +688,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 26.823988819498975,
     tpot: {
       mean: 683.8011571339198,
@@ -855,6 +860,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 24.50047903792646,
     tpot: {
       mean: 742.9258901891964,
@@ -1026,6 +1032,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 25.617829792196602,
     tpot: {
       mean: 663.3098317044122,
@@ -1197,6 +1204,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 37.02892550982192,
     tpot: {
       mean: 606.4144710877113,
@@ -1368,6 +1376,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "[email protected]",
     requestsPerSecond: 37.29183354201869,
     tpot: {
       mean: 603.3237551205925,
@@ -1539,6 +1548,7 @@ export const benchmarksScript = `window.benchmarks = [
     },
   },
   {
+    strategyDisplayStr: "throughput",
     requestsPerSecond: 37.45318312972309,
     tpot: {
       mean: 600.7204526769262,

src/ui/lib/store/slices/benchmarks/benchmarks.interfaces.ts

@@ -27,6 +27,7 @@ export interface BenchmarkMetrics {
 
 export interface Benchmark extends BenchmarkMetrics {
   requestsPerSecond: number;
+  strategyDisplayStr: string;
 }
 
 export type Benchmarks = Benchmark[];

src/ui/lib/store/slices/benchmarks/benchmarks.selectors.ts

@@ -11,15 +11,29 @@ import { selectSloState } from '../slo/slo.selectors';
 
 export const selectBenchmarks = (state: RootState) => state.benchmarks.data;
 
+const getUnitsByMetric = (metric: string) => {
+  switch (metric) {
+    case 'ttft':
+    case 'tpot':
+      return 'ms';
+    case 'timePerRequest':
+      return 'sec';
+    case 'throughput':
+      return 'tok/s';
+  }
+};
+
 export const selectMetricsSummaryLineData = createSelector(
   [selectBenchmarks, selectSloState],
   (benchmarks, sloState) => {
     const sortedByRPS = benchmarks
       ?.slice()
       ?.sort((bm1, bm2) => (bm1.requestsPerSecond > bm2.requestsPerSecond ? 1 : -1));
     const selectedPercentile = sloState.enforcedPercentile;
-
-    const lineData: { [K in keyof BenchmarkMetrics]: Point[] } = {
+    interface PointWithLabel extends Point {
+      label: string;
+    }
+    const lineData: { [K in keyof BenchmarkMetrics]: PointWithLabel[] } = {
       ttft: [],
       tpot: [],
       timePerRequest: [],
@@ -32,14 +46,17 @@ export const selectMetricsSummaryLineData = createSelector(
       'throughput',
     ];
     metrics.forEach((metric) => {
-      const data: Point[] = [];
+      const data: PointWithLabel[] = [];
       sortedByRPS?.forEach((benchmark) => {
         const percentile = benchmark[metric].percentileRows.find(
           (p) => p.percentile === selectedPercentile
         );
+        const yValue = percentile?.value ?? 0;
+        const units = getUnitsByMetric(metric);
         data.push({
           x: benchmark.requestsPerSecond,
-          y: percentile?.value ?? 0,
+          y: yValue,
+          label: `${benchmark.strategyDisplayStr} ${formatNumber(yValue)} ${units}`,
         });
       });
 

tests/unit/presentation/test_data_models.py

@@ -6,7 +6,7 @@
 from guidellm.dataset.hf_datasets import HFDatasetsCreator
 from guidellm.dataset.in_memory import InMemoryDatasetCreator
 from guidellm.dataset.synthetic import SyntheticDatasetCreator
-from guidellm.presentation.data_models import Bucket, Dataset
+from guidellm.presentation.data_models import Bucket, Dataset, BenchmarkDatum, Bucket
 from tests.unit.mock_benchmark import mock_generative_benchmark
 
 
@@ -136,3 +136,9 @@ def test_dataset_from_data_with_hf_dataset():
     ):
         dataset = Dataset.from_data(mock_benchmark.request_loader)
         assert dataset.name == "openai/gsm8k"
+
+@pytest.mark.smoke
+def test_from_benchmark_includes_strategy_display_str():
+    mock_bm = mock_generative_benchmark()
+    bm = BenchmarkDatum.from_benchmark(mock_bm)
+    assert bm.strategy_display_str == "synchronous"