Tutorial 7: Complex Components (Gallery with Filter and Sort)
Contents
Tutorial 7: Complex Components (Gallery with Filter and Sort)¶
In this tutorial, we’ll explore some of the powerful built-in components of Meerkat. We’ll start with our simple image gallery from Tutorial 1, and then we’ll add Filter
and Sort
components to allow users to filter and sort the images.
Through this tutorial, you will learn about:
the
Filter
andSort
componentsmk.Store
objectscomposing components together to create more complex layouts
As in Tutorial 1, we’ll use the Imagenette dataset. However, before creating a Gallery
component, we’ll need to first define our Filter
and Sort
components.
import meerkat as mk
df = mk.get("imagenette", version="160px")
⛙ Combining components¶
First, we’ll create a Filter
component, passing in our original df
, which will tell the component what to filter on. The returned object is a mk.gui.Component
, which can be rendered on our page. At the same time, it is a callable function that can be invoked on our df
to filter it. We’ll see this later when creating the Gallery
.
filter = mk.gui.Filter(df=df)
The Sort
component works in nearly the identical way.
sort = mk.gui.Sort(df=df)
Lastly, we can create a Gallery
component, but instead of directly passing in the df
object, we’ll first call the sort
and filter
components on it. These functions will automatically be triggered anytime the filters or sorts are changed, and our Gallery
will be updated accordingly in a reactive manner.
gallery = mk.gui.Gallery(df=sort(filter(df)), main_column="img", tag_columns=["label"])
🤲 Putting it all together¶
To render our components, we will stick all three into a Page
using the mk.gui.html.grid
component. The complete code is shown below.
import meerkat as mk
df = mk.get("imagenette", version="160px")
filter = mk.gui.Filter(df=df)
sort = mk.gui.Sort(df=df)
gallery = mk.gui.Gallery(df=sort(filter(df)), main_column="img", tag_columns=["label"])
mk.gui.start()
page = mk.gui.Page(
component=mk.gui.html.grid(
slots=[filter, sort, gallery],
),
id="filter-sort",
)
page.launch()
We can run this app with the following command (or in Jupyter Notebook, simply run the code cell):
mk run filter-sort.py --dev
🎉 Conclusion¶
In just a few lines of code, we have a working app that allows users to filter and sort the image gallery. This is thanks to the powerful built-in components of Meerkat. You can browse the complete list of components here. In a later tutorial, you’ll also learn how to make your own custom components that can be just as powerful.