diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogTabs.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogTabs.cy.ts index c0dbaf9d6d..ecf48018c1 100644 --- a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogTabs.cy.ts +++ b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogTabs.cy.ts @@ -375,7 +375,7 @@ describe('Model Catalog Details Tabs', () => { modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'ITL'); }); - it('should reset to default latency filter (TTFT P90) when filter is reset', () => { + it('should reset to applied values when changes were made in the dropdown', () => { modelCatalog.findModelCatalogDetailLink().first().click(); modelCatalog.clickPerformanceInsightsTab(); @@ -391,24 +391,18 @@ describe('Model Catalog Details Tabs', () => { .should('contain.text', `E2E${NBSP}Latency Mean`); modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'TTFT'); - // Open filter and reset - this should apply the default (TTFT P90), not clear completely modelCatalog.openLatencyFilter(); - modelCatalog.clickResetFilter(); + modelCatalog.selectLatencyMetric('TTFT'); + modelCatalog.selectLatencyPercentile('P90'); - // Close the dropdown by clicking outside + // Click reset - should restore to applied values (E2E Mean), not apply filter + modelCatalog.clickResetFilter(); cy.get('body').click(0, 0); - // Default latency filter (TTFT P90) should be applied - // Only TTFT and TPS P90 columns should be visible - modelCatalog - .findHardwareConfigurationTableHeaders() - .should('contain.text', `TTFT${NBSP}Latency P90`); modelCatalog .findHardwareConfigurationTableHeaders() - .should('contain.text', `TPS${NBSP}P90`); - // E2E and ITL should NOT be visible (filter is applied, not cleared) - modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'E2E'); - modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'ITL'); + .should('contain.text', `E2E${NBSP}Latency Mean`); + modelCatalog.findHardwareConfigurationTableHeaders().should('not.contain.text', 'TTFT'); }); it('should keep non-latency columns visible when latency filter is applied', () => { diff --git a/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/LatencyFilter.tsx b/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/LatencyFilter.tsx index 1bd35d7f89..e186a36d4f 100644 --- a/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/LatencyFilter.tsx +++ b/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/LatencyFilter.tsx @@ -102,6 +102,8 @@ const LatencyFilter: React.FC = () => { return defaultFilterState; }); + const appliedFilterStateRef = React.useRef(null); + // Update local filter when active filter changes React.useEffect(() => { if (currentActiveFilter) { @@ -113,6 +115,23 @@ const LatencyFilter: React.FC = () => { } }, [currentActiveFilter]); + // Capture the applied filter state when menu opens + React.useEffect(() => { + if (isOpen) { + // Capture the current filter state when menu opens + if (currentActiveFilter) { + appliedFilterStateRef.current = { + metric: currentActiveFilter.metric, + percentile: currentActiveFilter.percentile, + value: currentActiveFilter.value, + }; + } else { + appliedFilterStateRef.current = defaultFilterState; + } + setLocalFilter(appliedFilterStateRef.current); + } + }, [isOpen, currentActiveFilter, defaultFilterState]); + const { minValue, maxValue, isSliderDisabled } = React.useMemo((): SliderRange => { const filterKey = getLatencyFilterKey(localFilter.metric, localFilter.percentile); @@ -173,21 +192,15 @@ const LatencyFilter: React.FC = () => { }; const handleReset = () => { - // Reset to default latency filter (performance filters should reset to defaults, not clear) - // First clear any existing latency filter - if (currentActiveFilter) { - setFilterData(currentActiveFilter.fieldName, undefined); + // Reset to the filter state that was active when menu opened (not the original default) + if (appliedFilterStateRef.current) { + const resetState = appliedFilterStateRef.current; + setLocalFilter(resetState); + // Update the refs so the useEffect doesn't think metric/percentile changed + // This prevents the value from being reset to maxValue + prevMetricRef.current = resetState.metric; + prevPercentileRef.current = resetState.percentile; } - - // Apply the default latency filter - const defaultFilterKey = getLatencyFilterKey( - defaultFilterState.metric, - defaultFilterState.percentile, - ); - setFilterData(defaultFilterKey, defaultFilterState.value); - - // Reset local filter to default - setLocalFilter(defaultFilterState); }; const toggle = (toggleRef: React.Ref) => ( diff --git a/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/MaxRpsFilter.tsx b/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/MaxRpsFilter.tsx index 3b4362eeb7..1947f20f2d 100644 --- a/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/MaxRpsFilter.tsx +++ b/clients/ui/frontend/src/app/pages/modelCatalog/components/globalFilters/MaxRpsFilter.tsx @@ -10,7 +10,6 @@ import { import { ModelCatalogNumberFilterKey } from '~/concepts/modelCatalog/const'; import { useCatalogNumberFilterState } from '~/app/pages/modelCatalog/utils/modelCatalogUtils'; import { MAX_RPS_RANGE } from '~/app/pages/modelCatalog/utils/performanceMetricsUtils'; -import { ModelCatalogContext } from '~/app/context/modelCatalog/ModelCatalogContext'; import SliderWithInput from './SliderWithInput'; const filterKey = ModelCatalogNumberFilterKey.MAX_RPS; @@ -18,13 +17,14 @@ const filterKey = ModelCatalogNumberFilterKey.MAX_RPS; const MaxRpsFilter: React.FC = () => { const { value: rpsFilterValue, setValue: setRpsFilterValue } = useCatalogNumberFilterState(filterKey); - const { getPerformanceFilterDefaultValue } = React.useContext(ModelCatalogContext); const [isOpen, setIsOpen] = React.useState(false); const { minValue, maxValue, isSliderDisabled } = MAX_RPS_RANGE; const [localValue, setLocalValue] = React.useState(() => rpsFilterValue ?? maxValue); + const appliedValueRef = React.useRef(undefined); + const clampedValue = React.useMemo( () => Math.min(Math.max(localValue, minValue), maxValue), [localValue, minValue, maxValue], @@ -32,6 +32,7 @@ const MaxRpsFilter: React.FC = () => { React.useEffect(() => { if (isOpen) { + appliedValueRef.current = rpsFilterValue; setLocalValue(rpsFilterValue ?? maxValue); } }, [isOpen, rpsFilterValue, maxValue]); @@ -55,11 +56,7 @@ const MaxRpsFilter: React.FC = () => { }; const handleReset = () => { - // Get default value from namedQueries, fallback to maxValue - const defaultValue = getPerformanceFilterDefaultValue(filterKey); - const value = typeof defaultValue === 'number' ? defaultValue : maxValue; - setRpsFilterValue(value); - setLocalValue(value); + setLocalValue(appliedValueRef.current ?? maxValue); }; const toggle = (toggleRef: React.Ref) => (