feat: Filter recipes

[feloy]

What does this PR do?

Filter recipes in the frontend

• adds languages and frameworks to the recipes in the catalog (commit 1)
• fix backend, to return unique tools and make the function accessible from the frontend (commit 2)
• display filters in the frontend

Limitation: we don't have a UI component to select multiple values for filters, this first implementation supports to select only one filter per category. @slemeur @Firewall @MariaLeonova is it acceptable for a first iteration, the time to implement a multi-select Dropdown?

Screenshot / video of UI

What issues does this PR fix or reference?

Fixes #1693

How to test this PR?

Go the the Recipe Catalog page, select different filters and check that the displayed recipes are correct, and that the choices proposed to the user after changing filters is also correct.

[gastoner]

Text should reflect light theme:

Disscusion:
I think that going to n+1(detail page) to n(filter page) should keep the filter, but going from n-1(opening ai lab/ selecting different menu option) to n(filter page) should rest the filter. What do you think?

Screen.Recording.2025-01-10.103945.mp4

[feloy]

Text should reflect light theme:

Should be fixed with new commit. Thanks

[feloy]

Disscusion: I think that going to n+1(detail page) to n(filter page) should keep the filter, but going from n-1(opening ai lab/ selecting different menu option) to n(filter page) should rest the filter. What do you think?

Screen.Recording.2025-01-10.103945.mp4

For now, I don't think that this pattern is used in other parts of Podman Desktop (for example, when searching containers with a specific term, going to a container details and coming back to the list cleans up the search term).

[MariaLeonova]

Thank you for providing a video! This looks great!

One thing I wonder, is - is it necessary to have a filter title on top of the filter dropdown, or could that be part of the dropdown? I.e. if the filter itself said "Tools" and once the user selects something, be replaced by the value. Especially since there's only one option that can be selected now.

I am wondering if there could also be a search, or would that be addressed in a separate issue?

That said, it's only a UI issue and the functionality seems to be working just fine!

[feloy]

Thank you for providing a video! This looks great!

One thing I wonder, is - is it necessary to have a filter title on top of the filter dropdown, or could that be part of the dropdown? I.e. if the filter itself said "Tools" and once the user selects something, be replaced by the value. Especially since there's only one option that can be selected now.

That would need to change the look and feel of the Dropdown component, which is part of the Podman Desktop toolkit. I think it would be part of another issue.

I am wondering if there could also be a search, or would that be addressed in a separate issue?

It's not clear in the issue #1693, but as it is a separate behaviour, it would be better to implement it as a separate issue (or at least a different PR)

That said, it's only a UI issue and the functionality seems to be working just fine!

[gastoner]

LGTM, tested on Windows

[axel7083]

Limitation: we don't have a UI component to select multiple values for filters, this first implementation supports to select only one filter per category. @slemeur @Firewall @MariaLeonova is it acceptable for a first iteration, the time to implement a multi-select Dropdown?

On AI-Lab we have the Select from the svelte-select, here is a list of usages https://svelte-select-examples.vercel.app/examples

ModelSelect example https://github.com/containers/podman-desktop-extension-ai-lab/blob/a3fbfb6a3d096824467a7007fd0bb06eceafa247/packages/frontend/src/lib/select/ModelSelect.svelte

[axel7083]

I usually don't expect to have a "No filter" in the select, but rather clearing the value, so no value selected should just be "no filter".

The placeholder should not be "no filter" but "Filter on tool" or something helping the user to understand what this select is showing.

I know those limitation are from the select we use from the ui library, that's why we can use the Svelte select we already use for the select model, and select container connection provider

[feloy]

@MariaLeonova I'm working on a multi-select Dropdown on podman-desktop/podman-desktop#10621, feel free to test and comment there

[feloy]

It seems that using a dropdown raises many technical and design problems. @MariaLeonova what do you think about a solution where the entire filter section would be visible or hidden, and with this design when the filter section is open (you can imagine a toggle button somewhere to completely close this section and just display a filters button):

[axel7083]

It seems that using a dropdown raises many technical and design problems. @MariaLeonova what do you think about a solution where the entire filter section would be visible or hidden, and with this design when the filter section is open (you can imagine a toggle button somewhere to completely close this section and just display a filters button):

Can't we use the GitHub like synthax ? language:python?

[feloy]

It seems that using a dropdown raises many technical and design problems. @MariaLeonova what do you think about a solution where the entire filter section would be visible or hidden, and with this design when the filter section is open (you can imagine a toggle button somewhere to completely close this section and just display a filters button):

Can't we use the GitHub like synthax ? language:python?

Yes, this point has been discussed in the issue. The conclusion has been to have both solutions, the dropdown/checkbox helping the user discover/learn the search syntax (as the tabs are an alternative of the search in the containers list)

The search will be part of another PR

[MariaLeonova]

It seems that using a dropdown raises many technical and design problems. @MariaLeonova what do you think about a solution where the entire filter section would be visible or hidden, and with this design when the filter section is open (you can imagine a toggle button somewhere to completely close this section and just display a filters button):

That sound fine, I just have a couple questions:
Will the users be able to check the boxes? Will there also be a search bar above the filters?

[feloy]

It seems that using a dropdown raises many technical and design problems. @MariaLeonova what do you think about a solution where the entire filter section would be visible or hidden, and with this design when the filter section is open (you can imagine a toggle button somewhere to completely close this section and just display a filters button):

That sound fine, I just have a couple questions:
Will the users be able to check the boxes?

Yes, the checkboxes displayed in the mockup are intended to be checked/unchecked by the user.

Will there also be a search bar above the filters?

Yes, a search bar will be present above the filters, and its content will be updated reactively according to the checkboxes checked or not.

[slemeur]

In order to simplify and move forward on a first version, I think the proposed solution here is working nicely:
#2354 (comment)

A couple of points:

• Instead of no filters we should probably use All
• Would nicely improved the experience by adding the number of recipes that have a specific labels. For example, we could display Pyhton (4) if we have 4 Python recipes.

We can create a separate issue for the multi-select and see if it's getting asked by the end-users.

[feloy]

In order to simplify and move forward on a first version, I think the proposed solution here is working nicely: #2354 (comment)

A couple of points:

• Instead of no filters we should probably use All
• Would nicely improved the experience by adding the number of recipes that have a specific labels. For example, we could display Pyhton (4) if we have 4 Python recipes.

We can create a separate issue for the multi-select and see if it's getting asked by the end-users.

Added a few commits and updated the demo on top (#2354 (comment)) with these points

[slemeur]

Thanks @feloy ! The screen recording in the description of the PR is looking great! works fine for me !

[jeffmaury]

LGTM.

Minor comment: I see vectordb as a framework which seems a little weird for me I think wer should see the vectordb provider (chromadb, milvus). But should be a follow up PR and will open an issue