UX: adding filter + search functionality to recipes catalog

MariaLeonova commented 2 months ago

Is your enhancement related to a problem? Please describe

In the Recipe Catalog, each recipe is focused on a particular use case, example "creating a chatbot" or "building a text summarizer". Those recipes could, be build with different tools, frameworks and languages. A recipe might be optimized for a particular hardware architecture. We should be surfacing this to the end-user.

As a user, I should be able to define the technologies (tools, frameworks and languages) I want to filter the recipes, so I can see only those who are interesting to me.
As a user, I should be able to see the technologies used by the recipes while I'm browsing the catalog of recipes
As an end-user, I want to be able to search for recipes that use a specific combination of programming languages and technologies so that I can find complex workflows or integrations.
As an end-user, I want to know which specific hardware components a recipe uses so that I can ensure compatibility with my existing infrastructure.
As an end-user, I want to be able to run a recipe optimized for my specific hardware architecture without having to worry about compatibility issues so that I can focus on using the recipe effectively.
As an end-user, I want to be able to filter recipes in the catalog by hardware architecture so that I can find recipes optimized for my specific setup.

Describe the solution you'd like

The users should be able to achieve success in finding the exact recipes that suit their use cases by filtering and searching the catalog on one or combination of filters.

Describe alternatives you've considered

No response

Additional context

No response

MariaLeonova commented 2 months ago

I have started to create some initial screens, proposing multiple filters options in addition to search (repeating pattern on other Podman Desktop screens): Screenshot 2024-08-30 at 13 26 09

@slemeur what would be the possible options for each dropdown? Is there a list of frameworks, hardware options, etc?

I will continue and create a flow, where user selects multiple options from each dropdown and they would appear as chips underneath the filters, with an option to clear all or some of them as needed.

MariaLeonova commented 1 month ago

@jeffmaury do you have any comments on the proposed UI^^ ?

jeffmaury commented 2 weeks ago

I am wondering if this could be aligned with containers and images search that uses prefix eg tool:xxxx I'm afraid the combo will take to much place

MariaLeonova commented 1 week ago

I am wondering if this could be aligned with containers and images search that uses prefix eg tool:xxxx I'm afraid the combo will take to much place

@jeffmaury Can you please attach a screenshot of what you have in mind?

jeffmaury commented 1 week ago

I am wondering if this could be aligned with containers and images search that uses prefix eg tool:xxxx I'm afraid the combo will take to much place

@jeffmaury Can you please attach a screenshot of what you have in mind?

slemeur commented 1 week ago

@jeffmaury : while it would be nice that the textfield for searching has labels like this - I think having the categories is also making it easier for the user to identify what to look for. I think at first people will not know they can filter with "language:java"

MariaLeonova commented 4 days ago

I have to agree with Stevan: while the filters do take up some space, they also provide a valuable view, where a user can see what all their options are, given that there are so many, and they can also be combined.

For those more experienced users, we could offer the text in the search filed like the one you're showing in the video. I think it will give them the control that they might seek.

So would you say we could do a combination of both, @jeffmaury ?

slemeur commented 2 days ago

Reviewed - agreed with the mockup https://github.com/containers/podman-desktop-extension-ai-lab/issues/1627#issuecomment-2321429148

containers / podman-desktop-extension-ai-lab