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?
9 Replies
Myles Scolnick
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
Anna (she/her)
Anna (she/her)OP4w ago
That would be something with mo.state right?
Myles Scolnick
I don’t think you need it Your second dropdown creates its option by reading the value of the first dropdown
Anna (she/her)
Anna (she/her)OP4w ago
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
Myles Scolnick
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
Anna (she/her)
Anna (she/her)OP4w ago
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
Akshay
Akshay4w ago
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?
GitHub
marimo/examples/third_party/cvxpy/signals at main · marimo-team/mar...
A reactive notebook for Python — run reproducible experiments, execute as a script, deploy as an app, and version with git. - marimo-team/marimo
Akshay
Akshay4w ago
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
marimo | a next-generation Python notebook
Explore data and build apps seamlessly with marimo, a next-generation Python notebook.
lucha6
lucha63w ago
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:
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])
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