logo

🔮 v0.4.11

  • Welcome to Meerkat 🔮

Getting Started

  • Installation
  • Quickstart: Data Frames
  • Quickstart: Interactive Apps
  • Tutorials
    • Tutorial 1: Data Frames (Wrangling an Image Dataset)
    • Tutorial 2: Basic Interactive Apps (Building an Image Gallery)
    • Tutorial 3: Basic Interactive Apps (Building A Simple Counter)
    • Tutorial 4: Reactive Functions (Reactive Image Viewer)
    • Tutorial 5: Endpoints (Query a Large Language Model)
    • Tutorial 6: Complex Components (Embedding Based Search Engine)
    • Tutorial 7: Complex Components (Gallery with Filter and Sort)

User Guide

  • Overview
  • DataFrame
    • Data Selection
    • Column
    • Operations
      • Mapping: map and defer
      • Combining: concat and merge
      • Grouping: groupby and clusterby
    • I/O
    • Advanced
      • Copy vs. View Behavior
      • Blocks and the BlockManager
  • Interactive
    • Running Meerkat Interfaces
    • Reactive Functions
      • Creating Reactive Functions
      • Markables
      • Chaining Reactive Functions
      • Turning Off Reactivity
      • Reactive Functions in Meerkat
        • meerkat.abs
        • meerkat.all
        • meerkat.any
        • meerkat.bool
        • meerkat.complex
        • meerkat.dict
        • meerkat.float
        • meerkat.hex
        • meerkat.int
        • meerkat.len
        • meerkat.list
        • meerkat.oct
        • meerkat.range
        • meerkat.set
        • meerkat.str
        • meerkat.sum
        • meerkat.tuple
        • meerkat.cand
        • meerkat.cnot
        • meerkat.cor
        • meerkat.aggregate
        • meerkat.clusterby
        • meerkat.concat
        • meerkat.explainby
        • meerkat.groupby
        • meerkat.merge
        • meerkat.sample
        • meerkat.shuffle
        • meerkat.sort
      • Guidelines
      • FAQs
    • Stores
      • Subtleties with Stores
      • Inbuilt Store Operators
      • FAQs
    • Components
      • Displaying data frames
      • Custom Components
      • Meerkat Components
        • meerkat.interactive.app.src.lib.component.core.Button
        • meerkat.interactive.app.src.lib.component.core.Caption
        • meerkat.interactive.app.src.lib.component.core.Carousel
        • meerkat.interactive.app.src.lib.component.core.Chat
        • meerkat.interactive.app.src.lib.component.core.Checkbox
        • meerkat.interactive.app.src.lib.component.core.Code
        • meerkat.interactive.app.src.lib.component.core.CodeCell
        • meerkat.interactive.app.src.lib.component.core.CopyButton
        • meerkat.interactive.app.src.lib.component.core.Document
        • meerkat.interactive.app.src.lib.component.core.Editor
        • meerkat.interactive.app.src.lib.component.core.FileUpload
        • meerkat.interactive.app.src.lib.component.core.Filter
        • meerkat.interactive.app.src.lib.component.core.Gallery
        • meerkat.interactive.app.src.lib.component.core.Header
        • meerkat.interactive.app.src.lib.component.core.Icon
        • meerkat.interactive.app.src.lib.component.core.Image
        • meerkat.interactive.app.src.lib.component.core.ImageAnnotator
        • meerkat.interactive.app.src.lib.component.core.Json
        • meerkat.interactive.app.src.lib.component.core.Markdown
        • meerkat.interactive.app.src.lib.component.core.Match
        • meerkat.interactive.app.src.lib.component.core.MedicalImage
        • meerkat.interactive.app.src.lib.component.core.Number
        • meerkat.interactive.app.src.lib.component.core.NumberInput
        • meerkat.interactive.app.src.lib.component.core.PDF
        • meerkat.interactive.app.src.lib.component.core.Put
        • meerkat.interactive.app.src.lib.component.core.Radio
        • meerkat.interactive.app.src.lib.component.core.RadioGroup
        • meerkat.interactive.app.src.lib.component.core.RawHTML
        • meerkat.interactive.app.src.lib.component.core.Select
        • meerkat.interactive.app.src.lib.component.core.Slider
        • meerkat.interactive.app.src.lib.component.core.Sort
        • meerkat.interactive.app.src.lib.component.core.Stats
        • meerkat.interactive.app.src.lib.component.core.Subheader
        • meerkat.interactive.app.src.lib.component.core.Table
        • meerkat.interactive.app.src.lib.component.core.Text
        • meerkat.interactive.app.src.lib.component.core.Textbox
        • meerkat.interactive.app.src.lib.component.core.Title
        • meerkat.interactive.app.src.lib.component.core.Toggle
        • meerkat.interactive.app.src.lib.component.core.Vega
        • meerkat.interactive.app.src.lib.component.html.Component
        • meerkat.interactive.app.src.lib.component.html.a
        • meerkat.interactive.app.src.lib.component.html.button
        • meerkat.interactive.app.src.lib.component.html.div
        • meerkat.interactive.app.src.lib.component.html.flex
        • meerkat.interactive.app.src.lib.component.html.flexcol
        • meerkat.interactive.app.src.lib.component.html.form
        • meerkat.interactive.app.src.lib.component.html.grid
        • meerkat.interactive.app.src.lib.component.html.gridcols2
        • meerkat.interactive.app.src.lib.component.html.gridcols3
        • meerkat.interactive.app.src.lib.component.html.gridcols4
        • meerkat.interactive.app.src.lib.component.html.h1
        • meerkat.interactive.app.src.lib.component.html.h2
        • meerkat.interactive.app.src.lib.component.html.h3
        • meerkat.interactive.app.src.lib.component.html.h4
        • meerkat.interactive.app.src.lib.component.html.h5
        • meerkat.interactive.app.src.lib.component.html.h6
        • meerkat.interactive.app.src.lib.component.html.li
        • meerkat.interactive.app.src.lib.component.html.ol
        • meerkat.interactive.app.src.lib.component.html.p
        • meerkat.interactive.app.src.lib.component.html.path
        • meerkat.interactive.app.src.lib.component.html.select
        • meerkat.interactive.app.src.lib.component.html.span
        • meerkat.interactive.app.src.lib.component.html.svg
        • meerkat.interactive.app.src.lib.component.html.table
        • meerkat.interactive.app.src.lib.component.html.tbody
        • meerkat.interactive.app.src.lib.component.html.td
        • meerkat.interactive.app.src.lib.component.html.textarea
        • meerkat.interactive.app.src.lib.component.html.th
        • meerkat.interactive.app.src.lib.component.html.thead
        • meerkat.interactive.app.src.lib.component.html.tr
        • meerkat.interactive.app.src.lib.component.html.ul
        • meerkat.interactive.app.src.lib.component.plotly.Area
        • meerkat.interactive.app.src.lib.component.plotly.Bar
        • meerkat.interactive.app.src.lib.component.plotly.BarPolar
        • meerkat.interactive.app.src.lib.component.plotly.Box
        • meerkat.interactive.app.src.lib.component.plotly.Choropleth
        • meerkat.interactive.app.src.lib.component.plotly.ChoroplethMapbox
        • meerkat.interactive.app.src.lib.component.plotly.DensityContour
        • meerkat.interactive.app.src.lib.component.plotly.DensityHeatmap
        • meerkat.interactive.app.src.lib.component.plotly.DensityMapbox
        • meerkat.interactive.app.src.lib.component.plotly.DynamicScatter
        • meerkat.interactive.app.src.lib.component.plotly.ECDF
        • meerkat.interactive.app.src.lib.component.plotly.Funnel
        • meerkat.interactive.app.src.lib.component.plotly.FunnelArea
        • meerkat.interactive.app.src.lib.component.plotly.Histogram
        • meerkat.interactive.app.src.lib.component.plotly.Icicle
        • meerkat.interactive.app.src.lib.component.plotly.Line
        • meerkat.interactive.app.src.lib.component.plotly.Line3D
        • meerkat.interactive.app.src.lib.component.plotly.LineGeo
        • meerkat.interactive.app.src.lib.component.plotly.LineMapbox
        • meerkat.interactive.app.src.lib.component.plotly.LinePolar
        • meerkat.interactive.app.src.lib.component.plotly.LineTernary
        • meerkat.interactive.app.src.lib.component.plotly.ParallelCategories
        • meerkat.interactive.app.src.lib.component.plotly.ParallelCoordinates
        • meerkat.interactive.app.src.lib.component.plotly.Pie
        • meerkat.interactive.app.src.lib.component.plotly.Scatter
        • meerkat.interactive.app.src.lib.component.plotly.Scatter3D
        • meerkat.interactive.app.src.lib.component.plotly.ScatterGeo
        • meerkat.interactive.app.src.lib.component.plotly.ScatterMapbox
        • meerkat.interactive.app.src.lib.component.plotly.ScatterMatrix
        • meerkat.interactive.app.src.lib.component.plotly.ScatterPolar
        • meerkat.interactive.app.src.lib.component.plotly.ScatterTernary
        • meerkat.interactive.app.src.lib.component.plotly.Strip
        • meerkat.interactive.app.src.lib.component.plotly.Sunburst
        • meerkat.interactive.app.src.lib.component.plotly.Timeline
        • meerkat.interactive.app.src.lib.component.plotly.Treemap
        • meerkat.interactive.app.src.lib.component.plotly.Violin
        • meerkat.interactive.app.src.lib.component.flowbite.A
        • meerkat.interactive.app.src.lib.component.flowbite.Accordion
        • meerkat.interactive.app.src.lib.component.flowbite.AccordionItem
        • meerkat.interactive.app.src.lib.component.flowbite.Activity
        • meerkat.interactive.app.src.lib.component.flowbite.ActivityItem
        • meerkat.interactive.app.src.lib.component.flowbite.AdvancedRating
        • meerkat.interactive.app.src.lib.component.flowbite.Alert
        • meerkat.interactive.app.src.lib.component.flowbite.ArrowKeyDown
        • meerkat.interactive.app.src.lib.component.flowbite.ArrowKeyLeft
        • meerkat.interactive.app.src.lib.component.flowbite.ArrowKeyRight
        • meerkat.interactive.app.src.lib.component.flowbite.ArrowKeyUp
        • meerkat.interactive.app.src.lib.component.flowbite.Avatar
        • meerkat.interactive.app.src.lib.component.flowbite.Badge
        • meerkat.interactive.app.src.lib.component.flowbite.Blockquote
        • meerkat.interactive.app.src.lib.component.flowbite.Breadcrumb
        • meerkat.interactive.app.src.lib.component.flowbite.BreadcrumbItem
        • meerkat.interactive.app.src.lib.component.flowbite.Button
        • meerkat.interactive.app.src.lib.component.flowbite.ButtonGroup
        • meerkat.interactive.app.src.lib.component.flowbite.Card
        • meerkat.interactive.app.src.lib.component.flowbite.Carousel
        • meerkat.interactive.app.src.lib.component.flowbite.CarouselTransition
        • meerkat.interactive.app.src.lib.component.flowbite.Checkbox
        • meerkat.interactive.app.src.lib.component.flowbite.Component
        • meerkat.interactive.app.src.lib.component.flowbite.DarkMode
        • meerkat.interactive.app.src.lib.component.flowbite.DescriptionList
        • meerkat.interactive.app.src.lib.component.flowbite.Drawer
        • meerkat.interactive.app.src.lib.component.flowbite.Dropdown
        • meerkat.interactive.app.src.lib.component.flowbite.DropdownDivider
        • meerkat.interactive.app.src.lib.component.flowbite.DropdownHeader
        • meerkat.interactive.app.src.lib.component.flowbite.DropdownItem
        • meerkat.interactive.app.src.lib.component.flowbite.FloatingLabelInput
        • meerkat.interactive.app.src.lib.component.flowbite.Footer
        • meerkat.interactive.app.src.lib.component.flowbite.FooterBrand
        • meerkat.interactive.app.src.lib.component.flowbite.FooterCopyright
        • meerkat.interactive.app.src.lib.component.flowbite.FooterIcon
        • meerkat.interactive.app.src.lib.component.flowbite.FooterLink
        • meerkat.interactive.app.src.lib.component.flowbite.FooterLinkGroup
        • meerkat.interactive.app.src.lib.component.flowbite.Group
        • meerkat.interactive.app.src.lib.component.flowbite.GroupItem
        • meerkat.interactive.app.src.lib.component.flowbite.Heading
        • meerkat.interactive.app.src.lib.component.flowbite.Hr
        • meerkat.interactive.app.src.lib.component.flowbite.Indicator
        • meerkat.interactive.app.src.lib.component.flowbite.Kbd
        • meerkat.interactive.app.src.lib.component.flowbite.Layout
        • meerkat.interactive.app.src.lib.component.flowbite.Li
        • meerkat.interactive.app.src.lib.component.flowbite.List
        • meerkat.interactive.app.src.lib.component.flowbite.Mark
        • meerkat.interactive.app.src.lib.component.flowbite.MegaMenu
        • meerkat.interactive.app.src.lib.component.flowbite.Modal
        • meerkat.interactive.app.src.lib.component.flowbite.NavBrand
        • meerkat.interactive.app.src.lib.component.flowbite.NavLi
        • meerkat.interactive.app.src.lib.component.flowbite.NavUl
        • meerkat.interactive.app.src.lib.component.flowbite.Navbar
        • meerkat.interactive.app.src.lib.component.flowbite.P
        • meerkat.interactive.app.src.lib.component.flowbite.Pagination
        • meerkat.interactive.app.src.lib.component.flowbite.PaginationItem
        • meerkat.interactive.app.src.lib.component.flowbite.Popover
        • meerkat.interactive.app.src.lib.component.flowbite.Progressbar
        • meerkat.interactive.app.src.lib.component.flowbite.Radio
        • meerkat.interactive.app.src.lib.component.flowbite.Range
        • meerkat.interactive.app.src.lib.component.flowbite.Rating
        • meerkat.interactive.app.src.lib.component.flowbite.RatingComment
        • meerkat.interactive.app.src.lib.component.flowbite.Review
        • meerkat.interactive.app.src.lib.component.flowbite.ScoreRating
        • meerkat.interactive.app.src.lib.component.flowbite.Search
        • meerkat.interactive.app.src.lib.component.flowbite.Secondary
        • meerkat.interactive.app.src.lib.component.flowbite.Select
        • meerkat.interactive.app.src.lib.component.flowbite.Sidebar
        • meerkat.interactive.app.src.lib.component.flowbite.SidebarBrand
        • meerkat.interactive.app.src.lib.component.flowbite.SidebarCta
        • meerkat.interactive.app.src.lib.component.flowbite.SidebarDropdownItem
        • meerkat.interactive.app.src.lib.component.flowbite.SidebarDropdownWrapper
        • meerkat.interactive.app.src.lib.component.flowbite.SidebarGroup
        • meerkat.interactive.app.src.lib.component.flowbite.SidebarItem
        • meerkat.interactive.app.src.lib.component.flowbite.SidebarWrapper
        • meerkat.interactive.app.src.lib.component.flowbite.Span
        • meerkat.interactive.app.src.lib.component.flowbite.SpeedDial
        • meerkat.interactive.app.src.lib.component.flowbite.SpeedDialButton
        • meerkat.interactive.app.src.lib.component.flowbite.Spinner
        • meerkat.interactive.app.src.lib.component.flowbite.TabItem
        • meerkat.interactive.app.src.lib.component.flowbite.Table
        • meerkat.interactive.app.src.lib.component.flowbite.TableBodyCell
        • meerkat.interactive.app.src.lib.component.flowbite.TableBodyRow
        • meerkat.interactive.app.src.lib.component.flowbite.TableHead
        • meerkat.interactive.app.src.lib.component.flowbite.TableSearch
        • meerkat.interactive.app.src.lib.component.flowbite.Tabs
        • meerkat.interactive.app.src.lib.component.flowbite.Textarea
        • meerkat.interactive.app.src.lib.component.flowbite.Timeline
        • meerkat.interactive.app.src.lib.component.flowbite.TimelineHorizontal
        • meerkat.interactive.app.src.lib.component.flowbite.TimelineItem
        • meerkat.interactive.app.src.lib.component.flowbite.TimelineItemHorizontal
        • meerkat.interactive.app.src.lib.component.flowbite.Toast
        • meerkat.interactive.app.src.lib.component.flowbite.Toggle
        • meerkat.interactive.app.src.lib.component.flowbite.Tooltip
    • Endpoints
      • Endpoints vs. Reactive Functions
    • Formatters
    • Advanced
      • Sharing
      • Under the Hood
    • FAQs
  • Cheat Sheet

Advanced

  • Magic Contexts
    • Limitations
  • Configuring Meerkat

Ecosystem

  • Datasets
    • Contributing Datasets

Examples

  • Examples
    • Meerkat in 5 Minutes
    • Building image search

API Reference

  • API Reference
    • DataFrame
    • Columns
    • Interactive
    • Operations
Theme by the Executable Book Project
  • repository
  • open issue
  • suggest edit
  • .md
Contents
  • â›™ Combining components
  • 🤲 Putting it all together
  • 🎉 Conclusion

Tutorial 7: Complex Components (Gallery with Filter and Sort)

Contents

  • â›™ Combining components
  • 🤲 Putting it all together
  • 🎉 Conclusion

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 and Sort components

  • mk.Store objects

  • composing 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.

previous

Tutorial 6: Complex Components (Embedding Based Search Engine)

next

Overview

By The Meerkat Team
© Copyright 2023 Meerkat.