Skip to content

Commit 6902a91

Browse files
Philip-CarneiroPhilip-Carneiro
authored
hide TPS from max latency filter metrics options (#2045)
* hide TPS from max latency filter Signed-off-by: Philip Colares Carneiro <[email protected]> * update Latency and Percentile popover texts Signed-off-by: Philip Colares Carneiro <[email protected]> * fix lint Signed-off-by: Philip Colares Carneiro <[email protected]> --------- Signed-off-by: Philip Colares Carneiro <[email protected]>
1 parent 20a91a3 commit 6902a91

File tree

3 files changed

+125
-78
lines changed

3 files changed

+125
-78
lines changed

‎clients/ui/frontend/src/app/pages/modelCatalog/components/HardwareConfigurationFilterToolbar.tsx‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
import WorkloadTypeFilter from './globalFilters/WorkloadTypeFilter';
2525
import HardwareTypeFilter from './globalFilters/HardwareTypeFilter';
2626
import MinRpsFilter from './globalFilters/MinRpsFilter';
27-
import MaxLatencyFilter from './globalFilters/MaxLatencyFilter';
27+
import LatencyFilter from './globalFilters/LatencyFilter';
2828
import ModelCatalogActiveFilters from './ModelCatalogActiveFilters';
2929

3030
type HardwareConfigurationFilterToolbarProps = {
@@ -103,7 +103,37 @@ const HardwareConfigurationFilterToolbar: React.FC<HardwareConfigurationFilterTo
103103
</ToolbarItem>
104104
<ToolbarItem variant="separator" />
105105
<ToolbarItem>
106-
<MaxLatencyFilter performanceArtifacts={performanceArtifacts} />
106+
<LatencyFilter performanceArtifacts={performanceArtifacts} />
107+
<Popover
108+
bodyContent={
109+
<>
110+
Filter models performance benchmarks by measured latency.
111+
<ul style={{ listStyleType: 'disc', paddingLeft: '20px', marginTop: '8px' }}>
112+
<li>
113+
<strong>Metric:</strong> Select the latency metric (TTFT, E2E, or ITL) to
114+
evaluate.
115+
</li>
116+
<li>
117+
<strong>Percentile:</strong> Choose how strictly the model must meet the
118+
target. For example, P90 means 90% of requests must meet the selected
119+
threshold.
120+
</li>
121+
<li>
122+
<strong>Threshold:</strong> Set the maximum latency in milliseconds. Models
123+
exceeding this value are excluded.
124+
</li>
125+
</ul>
126+
</>
127+
}
128+
appendTo={() => document.body}
129+
>
130+
<Button
131+
variant="plain"
132+
aria-label="More info for latency"
133+
className="pf-v6-u-p-xs"
134+
icon={<HelpIcon />}
135+
/>
136+
</Popover>
107137
</ToolbarItem>
108138
<ToolbarItem>
109139
<MinRpsFilter performanceArtifacts={performanceArtifacts} />

clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/MaxLatencyFilter.tsx renamed to clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/LatencyFilter.tsx

Lines changed: 91 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,22 @@ type LatencyFilterState = {
3434
value: number;
3535
};
3636

37-
type MaxLatencyFilterProps = {
37+
type LatencyFilterProps = {
3838
performanceArtifacts: CatalogPerformanceMetricsArtifact[];
3939
};
4040

41-
const METRIC_OPTIONS: { value: LatencyMetric; label: LatencyMetric }[] = Object.values(
42-
LatencyMetric,
43-
).map((metric) => ({ value: metric, label: metric }));
41+
// TPS is excluded from filter options for now (will be renamed/reworked in a future ticket)
42+
const METRIC_OPTIONS: { value: LatencyMetric; label: LatencyMetric }[] = [
43+
LatencyMetric.E2E,
44+
LatencyMetric.TTFT,
45+
LatencyMetric.ITL,
46+
].map((metric) => ({ value: metric, label: metric }));
4447

4548
const PERCENTILE_OPTIONS: { value: LatencyPercentile; label: LatencyPercentile }[] = Object.values(
4649
LatencyPercentile,
4750
).map((percentile) => ({ value: percentile, label: percentile }));
4851

49-
const MaxLatencyFilter: React.FC<MaxLatencyFilterProps> = ({ performanceArtifacts }) => {
52+
const LatencyFilter: React.FC<LatencyFilterProps> = ({ performanceArtifacts }) => {
5053
const { filterData, setFilterData } = React.useContext(ModelCatalogContext);
5154
const [isOpen, setIsOpen] = React.useState(false);
5255
const [isMetricOpen, setIsMetricOpen] = React.useState(false);
@@ -126,12 +129,12 @@ const MaxLatencyFilter: React.FC<MaxLatencyFilterProps> = ({ performanceArtifact
126129
// When there's an active filter, show the full specification with actual selected values
127130
return (
128131
<>
129-
<strong>Max latency:</strong> {currentActiveFilter.metric} |{' '}
130-
{currentActiveFilter.percentile} | {currentActiveFilter.value}ms
132+
<strong>Latency:</strong> {currentActiveFilter.metric} | {currentActiveFilter.percentile}{' '}
133+
| {currentActiveFilter.value}ms
131134
</>
132135
);
133136
}
134-
return 'Max latency';
137+
return 'Latency';
135138
};
136139

137140
const handleApplyFilter = () => {
@@ -174,25 +177,6 @@ const MaxLatencyFilter: React.FC<MaxLatencyFilterProps> = ({ performanceArtifact
174177
flexWrap={{ default: 'wrap' }}
175178
style={{ width: '550px', padding: '16px' }}
176179
>
177-
<FlexItem>
178-
<Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsXs' }}>
179-
<FlexItem>Max latency</FlexItem>
180-
<FlexItem>
181-
<Popover
182-
bodyContent="Set your maximum acceptable latency. Hardware configurations that respond slower than this value will be hidden."
183-
appendTo={() => document.body}
184-
>
185-
<Button
186-
variant="plain"
187-
aria-label="More info for max latency"
188-
className="pf-v6-u-p-xs"
189-
icon={<HelpIcon />}
190-
/>
191-
</Popover>
192-
</FlexItem>
193-
</Flex>
194-
</FlexItem>
195-
196180
{/* Metric and Percentile on the same line */}
197181
<FlexItem>
198182
<Flex spaceItems={{ default: 'spaceItemsMd' }}>
@@ -243,53 +227,86 @@ const MaxLatencyFilter: React.FC<MaxLatencyFilterProps> = ({ performanceArtifact
243227
</FormGroup>
244228
</FlexItem>
245229

246-
<FlexItem flex={{ default: 'flex_1' }}>
247-
<FormGroup>
248-
<Select
249-
isOpen={isPercentileOpen}
250-
selected={localFilter.percentile}
251-
onClick={(e) => e.stopPropagation()}
252-
onSelect={(_, value) => {
253-
if (
254-
typeof value === 'string' &&
255-
PERCENTILE_OPTIONS.some((opt) => opt.value === value)
256-
) {
257-
const selectedPercentile = PERCENTILE_OPTIONS.find(
258-
(opt) => opt.value === value,
259-
);
260-
if (selectedPercentile) {
261-
setLocalFilter({ ...localFilter, percentile: selectedPercentile.value });
262-
}
263-
}
264-
setIsPercentileOpen(false);
265-
}}
266-
onOpenChange={(isSelectOpen) => {
267-
setIsPercentileOpen(isSelectOpen);
268-
// Prevent parent dropdown from closing when this select opens/closes
269-
if (isSelectOpen) {
270-
setIsOpen(true);
271-
}
272-
}}
273-
toggle={(toggleRef) => (
274-
<MenuToggle
275-
ref={toggleRef}
276-
onClick={() => setIsPercentileOpen(!isPercentileOpen)}
277-
isExpanded={isPercentileOpen}
278-
className="pf-v6-u-w-100"
230+
<FlexItem>
231+
<Flex
232+
alignItems={{ default: 'alignItemsCenter' }}
233+
spaceItems={{ default: 'spaceItemsXs' }}
234+
>
235+
<FlexItem flex={{ default: 'flex_1' }}>
236+
<FormGroup>
237+
<Select
238+
isOpen={isPercentileOpen}
239+
selected={localFilter.percentile}
240+
onClick={(e) => e.stopPropagation()}
241+
onSelect={(_, value) => {
242+
if (
243+
typeof value === 'string' &&
244+
PERCENTILE_OPTIONS.some((opt) => opt.value === value)
245+
) {
246+
const selectedPercentile = PERCENTILE_OPTIONS.find(
247+
(opt) => opt.value === value,
248+
);
249+
if (selectedPercentile) {
250+
setLocalFilter({ ...localFilter, percentile: selectedPercentile.value });
251+
}
252+
}
253+
setIsPercentileOpen(false);
254+
}}
255+
onOpenChange={(isSelectOpen) => {
256+
setIsPercentileOpen(isSelectOpen);
257+
// Prevent parent dropdown from closing when this select opens/closes
258+
if (isSelectOpen) {
259+
setIsOpen(true);
260+
}
261+
}}
262+
toggle={(toggleRef) => (
263+
<MenuToggle
264+
ref={toggleRef}
265+
onClick={() => setIsPercentileOpen(!isPercentileOpen)}
266+
isExpanded={isPercentileOpen}
267+
className="pf-v6-u-w-100"
268+
>
269+
<span>Percentile: {localFilter.percentile}</span>
270+
</MenuToggle>
271+
)}
279272
>
280-
<span>Percentile: {localFilter.percentile}</span>
281-
</MenuToggle>
282-
)}
283-
>
284-
<SelectList>
285-
{getAvailablePercentiles().map((option) => (
286-
<SelectOption key={option.value} value={option.value}>
287-
{option.label}
288-
</SelectOption>
289-
))}
290-
</SelectList>
291-
</Select>
292-
</FormGroup>
273+
<SelectList>
274+
{getAvailablePercentiles().map((option) => (
275+
<SelectOption key={option.value} value={option.value}>
276+
{option.label}
277+
</SelectOption>
278+
))}
279+
</SelectList>
280+
</Select>
281+
</FormGroup>
282+
</FlexItem>
283+
<FlexItem>
284+
<Popover
285+
bodyContent={
286+
<>
287+
Select the latency measure used for benchmarking - percentile or mean.
288+
<ul style={{ marginTop: '8px' }}>
289+
<li>
290+
<strong>P90, P95, P99:</strong> The selected percentage of requests must
291+
meet the latency threshold.
292+
</li>
293+
<li>
294+
<strong>Mean:</strong> The average latency across all requests.
295+
</li>
296+
</ul>
297+
</>
298+
}
299+
appendTo={() => document.body}
300+
>
301+
<Button
302+
variant="plain"
303+
aria-label="More info for Percentile"
304+
className="pf-v6-u-p-xs"
305+
icon={<HelpIcon />}
306+
/>
307+
</Popover>
308+
</FlexItem>
309+
</Flex>
293310
</FlexItem>
294311
</Flex>
295312
</FlexItem>
@@ -344,4 +361,4 @@ const MaxLatencyFilter: React.FC<MaxLatencyFilterProps> = ({ performanceArtifact
344361
);
345362
};
346363

347-
export default MaxLatencyFilter;
364+
export default LatencyFilter;

‎clients/ui/frontend/src/app/pages/modelCatalog/utils/hardwareConfigurationFilterUtils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ export const getUniqueHardwareTypes = (
5050
};
5151

5252
/**
53-
* Enhanced filter for Max Latency that supports metric and percentile selection
53+
* Enhanced filter for Latency that supports metric and percentile selection
5454
*/
55-
export const applyMaxLatencyFilter = (
55+
export const applyLatencyFilter = (
5656
artifact: CatalogPerformanceMetricsArtifact,
5757
config: LatencyFilterConfig,
5858
): boolean => {

0 commit comments

Comments
 (0)