Model Catalog chips enhancements

[YuliaKrimerman]

Description

Enhanced the filter chip display and behavior on the Model Catalog landing page to improve UX consistency and clarity:

How Has This Been Tested?

Manual Testing Required:

1. Performance View Toggle

   • Enable performance view toggle on Model Catalog page
   • Verify performance filter dropdowns appear (Workload Type, Latency, Max RPS, Hardware)

2. Workload Type Chip

   • Select a workload type from dropdown
   • Verify chip displays: "Scenario: {Name} ({X} input / {Y} output tokens)"
   • Verify chip only appears when different from default
   • Click chip and verify it resets to default (not cleared)
   • Verify fa-undo icon appears on chip (not X)

3. Latency Chip Group

   • Select different latency metric/percentile/threshold
   • Verify 3 separate chips appear: "Metric: X", "Percentile: Y", "Under Zms"
   • Verify individual chips have NO close buttons
   • Verify group has one reset button with fa-undo icon
   • Click any individual chip and verify entire latency filter resets to default
   • Click group reset button and verify entire latency filter resets to default

4. Max RPS Chip

   • Set Max RPS to a value
   • Verify chip displays: "Max RPS: {value}"
   • Verify chip only appears when different from default
   • Click chip and verify it resets to default
   • Verify fa-undo icon appears (not X)

5. Hardware Chips

   • Select multiple hardware configurations
   • Verify each hardware chip has standard X icon (not fa-undo)
   • Click X on individual chip and verify only that chip is removed
   • Verify multiple hardware chips can be selected simultaneously

6. Side Panel Filters (License, Provider, etc.)

   • Select multiple licenses/providers
   • Verify chips use standard X icons
   • Verify individual chips can be removed

7. Reset All Filters Button

   • Apply various filters
   • Click "Reset all defaults" button
   • Verify multi-select filters are cleared (Hardware, License)
   • Verify performance filters reset to defaults (Workload Type, Latency, Max RPS)

Screen.Recording.2026-02-10.at.1.50.49.PM.mov

Merge criteria:

• All the commits have been signed-off (To pass the DCO check)

• The commits have meaningful messages

• Automated tests are provided as part of the PR for major new functionalities; testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).

• The developer has manually tested the changes and verified that the changes work.

• Code changes follow the kubeflow contribution guidelines.

• For first time contributors: Please reach out to the Reviewers to ensure all tests are being run, ensuring the label ok-to-test has been added to the PR.

If you have UI changes:

• The developer has added tests or explained why testing cannot be added (Manual UI testing required - behavior involves PatternFly Toolbar chip interactions and CSS-based icon styling that are difficult to unit test)
• Included any necessary screenshots or gifs if it was a UI change (Screenshots provided above showing chip formats and icons)
• Verify that UI/UX changes conform the UX guidelines for Kubeflow (Changes follow PatternFly design patterns and existing Model Catalog UX conventions)

[YuliaKrimerman]

/retest

[manaswinidas]

There's some repetition between the inner and outer chip

[YuliaKrimerman]

@manaswinidas

Fixed

[mturley]

Since you're using a combination of custom-rendered chips and ToolbarFilter chips, if both are rendered at the same time we have both this "Reset all defaults" link and the built-in "Clear all filters" one that is provided by Toolbar when there are active ToolbarFilters under it. If we're no longer relying only on the built-in ToolbarFilter component, we should force the built-in one to never render (I think we might be able to do that by passing empty values into Toolbar, like we conditionally did before above on line 100). If that doesn't work... we may need to abandon using the built in ToolbarFilter chips. The intention was to use only those because we wanted to avoid custom rendering, but it seems that's not possible. If we cause ourselves too much more pain here maybe we should entirely render only custom chips for everything.

Another thing we lose by combining the built-in with custom chips is that they appear on two separate lines, and your custom ones are wrapping starting to the right of the toolbar controls which isn't right, they should all be below the toolbar.

Also, the chips not in a group are not vertically centered with the chips that are in a group. This is true in both themes but more visible in the MUI theme. The MUI theme also has color issues, with white icons on grey chips.

Finally, for your latency filter chip group, the reset icon is appearing outside the group and larger rather than within the group as it should, at the same size as the other icons.

[mturley]

/lmao
/approve

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: mturley

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• clients/ui/OWNERS [mturley]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment