Get help from the marimo community

Updated last month

Multiple levels of dropdowns

I want to build a set of “nested” drop downs, where the choice in the first level determines the choices in the second level, etc. any suggestions for how I might go about doing this?
1
M
A
A
13 comments
I’m on a phone so can’t give a great example, but I’d create both dropdowns in separate cells. Have the second cell depend on the first dropdown. And display them in a third cell
That would be something with mo.state right?
I don’t think you need it
Your second dropdown creates its option by reading the value of the first dropdown
Oh okay, that works!
Now what if I need to do this within a function? like say this is going to be a reusable component that I might create throughout my app
That is a bit trickier since the function forces them in the same cell. I’m not sure I have a good solution off the top of my head
Yeah it seems tricky
I thought of creating it in a separate notebook and using the embed notebook stuff, but im not sure that would work well
You could checkout https://github.com/marimo-team/marimo/tree/main/examples/third_party/cvxpy/signals — it has a pattern in the second part that might be helpful?
That is the implementation of https://marimo.io/@public/signal-decomposition, which has multiple levels of dropdowns which i think are created via a helper function if i remember correctly. But there is only a finite amount of nesting i think
I am also interested in building nested drop downs, I'm getting cyclical dependencies when doing this at the moment. I'm using a polars df that contains the unique combination across several fields and then filtering the options of each multiselect box based on the previous one:

Plain Text
entity = mo.ui.multiselect(
    options["entity_id"].unique().sort(), 
    label="entity"
)
category = mo.ui.multiselect(
    options.filter(
        pl.col('entity_id').is_in(entity.value) if entity.value else True
    )["category"].unique().sort(),
    label="cat"
)
subcategory = mo.ui.multiselect(
    options.filter(
        (pl.col('entity_id').is_in(entity.value) if entity.value else True) &
        (pl.col('category').is_in(category.value) if category.value else True)
    )["subcategory"].unique().sort(),
    label="subcat"
)
mo.vstack([entity, category, subcategory, segment])
even if I separate into separate cells it doesn't work
Add a reply
Sign up and join the conversation on Discord