What is the least-bad way to create *reusable* interactive UI elements?

[AwdeDarkar]

I am a huge fan of marimo and I love its reactive UIs but having to make everything global has become a pretty big pain point. A common pattern for me is to create data classes with rich UI visualizations, for example

class SomeStructure(BaseModel):
    name: str
    value: int
    table: Dict
    
    def _display_(self) -> mo.Html:
        return mo.vstack([
            mo.md(f"**SomeStructure** ({self.name}) [{self.value}]"),
            mo.json(self.table),
        ])

This is helpful, the json widget handles (most) dictionaries I throw at it gracefully with collapsible sub-menus and everything. But suppose the tables are getting too big and nested to navigate easily and I want to be able to filter the display based on a dropdown. Something like,

class SomeStructure(BaseModel):
    name: str
    value: int
    table: Dict

    def _display_(self) -> mo.Html:
        selection = mo.ui.dropdown(options=self.table.keys())
 
        return mo.vstack([
            mo.md(f"**SomeStructure** ({self.name}) [{self.value}]"),
            selection,
            mo.json(self.table[selection.value]),
        ])

Now it raises a RuntimeError. My understanding is this happens because marimo's reactivity model relies on tracking changes in global variables to update UI elements. All of the 'state' here is self-contained, no other values can depend on selection, but there doesn't seem to be a way for marimo to respond to this sort of change.

Frustratingly, even using mo.state and the dropdown's on_change argument doesn't work. It no longer raises an exception but the changes are never reflected in the UI. I don't know if this is because the getter call isn't correctly forcing a UI update when state changes, or if on_change isn't being called in the first place but either way it didn't function as I expended.

Is there any way to make this work? The only approach I've found is using AnyWidget but that throws out all the marimo UI widgets and writing javascript in python strings is painful.

[akshayka]

You could try using the app.embed() API (define each reusable component as its own notebook), but it's not as slick as having a dataclass that wraps its own UI elements (which is not currently possible)

[mthiboust]

I have a similar experience as @AwdeDarkar while trying to make some reusable interactive UI elements. I would like to embed some composite UI elements inside a custom class with its own render and value methods, but it breaks the reactivity model.

Do you think it would be possible to have a marimo API for explicitly binding a UI element to the reactivity graph without requiring a user-visible global variable?

[stephenlf]

This is an interesting challenge. The closest I've gotten in my own work has been 1) save the pattern as a snippet, or 2) build an anywidget. There doesn't seem to be any middle ground. I can't see any way for components to compose.

Maybe an API like this would be possible to build into Marimo? It would require you to initialize and render the struct in two different cells.

class SomeStructure(BaseModel):
    name: str
    value: int
    table: Dict

    @mo.bind_prop() # Bind property to Marimo DAG when object is initialized
    def _dropdown(self):
        return mo.ui.dropdown(options=self.table.keys())

    def _render_(self):
        return mo.vstack([
            mo.md(f"**SomeStructure** ({self.name}) [{self.value}]"),
            self._dropdown,
            mo.json(self.table[self._dropdown.value]),
        ])

Maybe the Anywidget approach is inevitable. It would be very nice to have Marimo's UI components available while building Anywidgets.