update tpot to itl in labels and code use (#386)

## Summary

We want to use ITL instead of TPOT. The data we had previously happened
to be ITL data, but all of the labels indicate that it is TPOT data. Now
the code and labels reflect that it is ITL data.

## Test Plan

- Everything works, tests pass, No use of TPOT in the UI

---------

Signed-off-by: dalthecow <[email protected]>
Co-authored-by: Samuel Monson <[email protected]>

Author: DaltheCow

src/guidellm/presentation/data_models.py

@@ -208,7 +208,7 @@ def from_distribution_summary(
 
 class BenchmarkDatum(BaseModel):
     requests_per_second: float
-    tpot: TabularDistributionSummary
+    itl: TabularDistributionSummary
     ttft: TabularDistributionSummary
     throughput: TabularDistributionSummary
     time_per_request: TabularDistributionSummary
@@ -217,7 +217,7 @@ class BenchmarkDatum(BaseModel):
     def from_benchmark(cls, bm: "GenerativeBenchmark"):
         return cls(
             requests_per_second=bm.metrics.requests_per_second.successful.mean,
-            tpot=TabularDistributionSummary.from_distribution_summary(
+            itl=TabularDistributionSummary.from_distribution_summary(
                 bm.metrics.inter_token_latency_ms.successful
             ),
             ttft=TabularDistributionSummary.from_distribution_summary(

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

@@ -54,15 +54,15 @@ export const Component = () => {
 
   const {
     ttft: ttftSLO,
-    tpot: tpotSLO,
+    itl: itlSLO,
     timePerRequest: timePerRequestSLO,
     throughput: throughputSLO,
     percentile,
     minX,
     maxX,
     errors,
     handleTtft,
-    handleTpot,
+    handleItl,
     handleTimePerRequest,
     handleThroughput,
     handlePercentileChange,
@@ -72,8 +72,8 @@ export const Component = () => {
   const isTtftMatch = Boolean(
     ttftSLO && interpolatedMetricData.ttft.enforcedPercentileValue <= ttftSLO
   );
-  const isTpotMatch = Boolean(
-    tpotSLO && interpolatedMetricData.tpot.enforcedPercentileValue <= tpotSLO
+  const isItlMatch = Boolean(
+    itlSLO && interpolatedMetricData.itl.enforcedPercentileValue <= itlSLO
   );
   const isTprMatch = Boolean(
     timePerRequestSLO &&
@@ -123,7 +123,7 @@ export const Component = () => {
           <FieldsContainer data-id="fields-container">
             <FieldCell data-id="field-cell-1">
               <Input
-                label="TTFT (ms)"
+                label="TIME TO FIRST TOKEN (ms)"
                 value={ttftSLO}
                 onChange={handleTtft}
                 fullWidth
@@ -133,12 +133,12 @@ export const Component = () => {
             </FieldCell>
             <FieldCell data-id="field-cell-2">
               <Input
-                label="TPOT (ms)"
-                value={tpotSLO}
-                onChange={handleTpot}
+                label="INTER-TOKEN LATENCY (ms)"
+                value={itlSLO}
+                onChange={handleItl}
                 fullWidth
                 fontColor={LineColor.Secondary}
-                error={errors?.tpot}
+                error={errors?.itl}
               />
             </FieldCell>
             <FieldCell data-id="field-cell-3">
@@ -212,7 +212,7 @@ export const Component = () => {
         </MiddleColumn>
         <MiddleColumn item xs={3}>
           <MetricValue
-            label="TTFT"
+            label="time to first token"
             value={`${formatNumber(interpolatedMetricData.ttft.enforcedPercentileValue)} ms`}
             match={isTtftMatch}
             valueColor={LineColor.Primary}
@@ -222,17 +222,17 @@ export const Component = () => {
         <MiddleColumn sx={{ paddingLeft: '0px !important' }} item xs={9}>
           <GraphContainer>
             <MetricLine
-              data={[{ id: 'tpot', data: lineDataByRps.tpot || [] }]}
-              threshold={tpotSLO}
+              data={[{ id: 'itl', data: lineDataByRps.itl || [] }]}
+              threshold={itlSLO}
               lineColor={LineColor.Secondary}
             />
           </GraphContainer>
         </MiddleColumn>
         <MiddleColumn item xs={3}>
           <MetricValue
-            label="TPOT"
-            value={`${formatNumber(interpolatedMetricData.tpot.enforcedPercentileValue)} ms`}
-            match={isTpotMatch}
+            label="inter-token latency"
+            value={`${formatNumber(interpolatedMetricData.itl.enforcedPercentileValue)} ms`}
+            match={isItlMatch}
             valueColor={LineColor.Secondary}
           />
         </MiddleColumn>

src/ui/lib/components/MetricsSummary/useSummary.ts

@@ -13,7 +13,7 @@ type Errors = { [key: string]: string | undefined };
 
 const initErrorsState: Errors = {
   ttft: undefined,
-  tpot: undefined,
+  itl: undefined,
   timePerRequest: undefined,
   throughput: undefined,
 };
@@ -47,20 +47,20 @@ export const useSummary = () => {
   const dispatch = useDispatch();
 
   const { current, enforcedPercentile, tasksDefaults } = useSelector(selectSloState);
-  const { ttft, tpot, timePerRequest, throughput } = useSelector(
+  const { ttft, itl, timePerRequest, throughput } = useSelector(
     selectMetricsSummaryLineData
   );
 
   const [errors, setErrors] = useState<Errors>(initErrorsState);
 
   const ttftLimits = findMinMax(ttft || []);
-  const tpotLimits = findMinMax(tpot || []);
+  const itlLimits = findMinMax(itl || []);
   const timePerRequestLimits = findMinMax(timePerRequest || []);
   const throughputLimits = findMinMax(throughput || []);
 
   const limitsByMetric = {
     ttft: ttftLimits,
-    tpot: tpotLimits,
+    itl: itlLimits,
     timePerRequest: timePerRequestLimits,
     throughput: throughputLimits,
   };
@@ -112,7 +112,7 @@ export const useSummary = () => {
     maxX: ttftLimits.maxX,
     errors,
     handleTtft: handleChange('ttft'),
-    handleTpot: handleChange('tpot'),
+    handleItl: handleChange('itl'),
     handleTimePerRequest: handleChange('timePerRequest'),
     handleThroughput: handleChange('throughput'),
     handlePercentileChange,

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

@@ -36,14 +36,14 @@ export const leftColumn3 = (rpsValue: number, value: number, units: string) => (
 
 export const Component = () => {
   const { data } = useGetBenchmarksQuery();
-  const { ttft, tpot, timePerRequest, throughput } = useSelector(
+  const { ttft, itl, timePerRequest, throughput } = useSelector(
     selectMetricsDetailsLineData
   );
   const { currentRequestRate } = useSelector(selectSloState);
   const formattedRequestRate = formatNumber(currentRequestRate);
   const {
     ttft: ttftAtRPS,
-    tpot: tpotAtRPS,
+    itl: itlAtRPS,
     timePerRequest: timePerRequestAtRPS,
     throughput: throughputAtRPS,
   } = useSelector(selectInterpolatedMetrics);
@@ -57,49 +57,49 @@ export const Component = () => {
       <BlockHeader label="Metrics Details" />
       <Box display="flex" flexDirection="row" gap={3} mt={3}>
         <MetricsContainer
-          header="TTFT"
+          header="TIME TO FIRST TOKEN"
           leftColumn={leftColumn(
             formattedRequestRate,
             formatNumber(ttftAtRPS.mean),
             'ms'
           )}
           rightColumn={columnContent(formattedRequestRate, ttftAtRPS.percentiles, 'ms')}
         >
-          <GraphTitle title="TTFS vs RPS" />
+          <GraphTitle title="Time to First Token vs RPS" />
           <GraphsWrapper>
             <DashedLine
               data={ttft}
               margins={{ left: 50, bottom: 50 }}
               xLegend="request per sec"
-              yLegend="ttft (ms)"
+              yLegend="time to first token (ms)"
               minX={minX}
             />
           </GraphsWrapper>
         </MetricsContainer>
         <MetricsContainer
-          header="TPOT"
+          header="INTER-TOKEN LATENCY"
           leftColumn={leftColumn3(
             formattedRequestRate,
-            formatNumber(tpotAtRPS.mean),
+            formatNumber(itlAtRPS.mean),
             'ms'
           )}
-          rightColumn={columnContent(formattedRequestRate, tpotAtRPS.percentiles, 'ms')}
+          rightColumn={columnContent(formattedRequestRate, itlAtRPS.percentiles, 'ms')}
         >
-          <GraphTitle title="TPOT vs RPS" />
+          <GraphTitle title="Inter-token Latency vs RPS" />
           <GraphsWrapper>
             <DashedLine
-              data={tpot}
+              data={itl}
               margins={{ left: 50, bottom: 50 }}
               xLegend="request per sec"
-              yLegend="tpot (ms)"
+              yLegend="inter-token latency (ms)"
               minX={minX}
             />
           </GraphsWrapper>
         </MetricsContainer>
       </Box>
       <Box display="flex" flexDirection="row" gap={3} mt={3}>
         <MetricsContainer
-          header="E2E Latency"
+          header="Time Per Request"
           leftColumn={leftColumn(
             formattedRequestRate,
             formatNumber(timePerRequestAtRPS.mean),
@@ -111,13 +111,13 @@ export const Component = () => {
             's'
           )}
         >
-          <GraphTitle title="E2E Latency vs RPS" />
+          <GraphTitle title="Time Per Request vs RPS" />
           <GraphsWrapper>
             <DashedLine
               data={timePerRequest}
               margins={{ left: 50, bottom: 50 }}
               xLegend="request per sec"
-              yLegend="latency (s)"
+              yLegend="time per request (s)"
               minX={minX}
             />
           </GraphsWrapper>

src/ui/lib/store/benchmarksWindowData.ts

@@ -1,7 +1,7 @@
 export const benchmarksScript = `window.benchmarks = [
   {
     requestsPerSecond: 11.411616848282272,
-    tpot: {
+    itl: {
       mean: 8.758024845683707,
       median: 8.788176945277623,
       mode: 7.119315011160714,
@@ -172,7 +172,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 36.289181300710815,
-    tpot: {
+    itl: {
       mean: 588.0161376137819,
       median: 461.7137227739607,
       mode: 323.1611592429025,
@@ -343,7 +343,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 20.752070927855794,
-    tpot: {
+    itl: {
       mean: 116.28360712595156,
       median: 26.769569941929408,
       mode: 10.624987738473076,
@@ -514,7 +514,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 26.81917480361788,
-    tpot: {
+    itl: {
       mean: 299.7306064613554,
       median: 372.7384294782366,
       mode: 13.360295976911273,
@@ -685,7 +685,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 26.823988819498975,
-    tpot: {
+    itl: {
       mean: 683.8011571339198,
       median: 742.2689029148647,
       mode: 317.1694278717041,
@@ -856,7 +856,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 24.50047903792646,
-    tpot: {
+    itl: {
       mean: 742.9258901891964,
       median: 773.0941431862967,
       mode: 538.750410079956,
@@ -1027,7 +1027,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 25.617829792196602,
-    tpot: {
+    itl: {
       mean: 663.3098317044122,
       median: 613.7458937508719,
       mode: 440.9824098859514,
@@ -1198,7 +1198,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 37.02892550982192,
-    tpot: {
+    itl: {
       mean: 606.4144710877113,
       median: 543.5235500335693,
       mode: 331.6155501774379,
@@ -1369,7 +1369,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 37.29183354201869,
-    tpot: {
+    itl: {
       mean: 603.3237551205925,
       median: 528.1183038439069,
       mode: 400.96027510506764,
@@ -1540,7 +1540,7 @@ export const benchmarksScript = `window.benchmarks = [
   },
   {
     requestsPerSecond: 37.45318312972309,
-    tpot: {
+    itl: {
       mean: 600.7204526769262,
       median: 626.2100083487375,
       mode: 398.7384523664202,

src/ui/lib/store/mockData.ts

@@ -95,7 +95,7 @@ export const benchmarks = [
       ],
       bucketWidth: 0,
     },
-    tpot: {
+    itl: {
       statistics: {
         total: 0,
         mean: 0,

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

@@ -45,9 +45,9 @@ const setDefaultSLOs = (
     lastBM?.ttft,
     defaultPercentile
   );
-  const tpotAvg = getAverageValueForPercentile(
-    firstBM?.tpot,
-    lastBM?.tpot,
+  const itlAvg = getAverageValueForPercentile(
+    firstBM?.itl,
+    lastBM?.itl,
     defaultPercentile
   );
   const timePerRequestAvg = getAverageValueForPercentile(
@@ -66,13 +66,13 @@ const setDefaultSLOs = (
       currentRequestRate: firstBM?.requestsPerSecond,
       current: {
         ttft: formatNumber(ttftAvg, 0),
-        tpot: formatNumber(tpotAvg, 0),
+        itl: formatNumber(itlAvg, 0),
         timePerRequest: formatNumber(timePerRequestAvg, 0),
         throughput: formatNumber(throughputAvg, 0),
       },
       tasksDefaults: {
         ttft: formatNumber(ttftAvg, 0),
-        tpot: formatNumber(tpotAvg, 0),
+        itl: formatNumber(itlAvg, 0),
         timePerRequest: formatNumber(timePerRequestAvg, 0),
         throughput: formatNumber(throughputAvg, 0),
       },

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

@@ -20,7 +20,7 @@ interface Percentile {
 
 export interface BenchmarkMetrics {
   ttft: Statistics;
-  tpot: Statistics;
+  itl: Statistics;
   timePerRequest: Statistics;
   throughput: Statistics;
 }