Dynamic form wrapping an accordion with remove buttons

[MaWeffm]

Dear community,

great piece of work! I am just getting started and this is what I am trying to do: I am working on a small GUI to setup an analysis pipeline to process some samples (biological).

I managed to dynamically create a dictionary of samples using mo.state and I can display them using the mo.accordion element. Now, for each of the samples, I would like to add a "remove" button, to remove the associated button from the list. It seems, I am close to a working solution, but I am missing something. Based on the examples in the 'Recipe' section of the documentation, I can create a vstack of buttons. But clicking a button removes always the last element in the samples, not the respective one with the same 'id'. Additionally, I was not able to add the 'remove' buttons to the respective element in the accordion. Based on the code below, I have two questions. 1) How can I add a remove button to each of the elements in the accordion, and 2) how does it work to remove the correct element from the state containing the sample objects?

Ultimately, I would like to have the accordion populated with some input fields for each sample and wrap it in a form. That would allow the user to add and remove samples, adjust some parameters and submit everything to be processed.

Any input would be highly appreciated! Thank you and cheers!

import marimo

__generated_with = "0.1.78"
app = marimo.App(width="full")

@app.cell
def __():
    import marimo as mo

    from dataclasses import dataclass
    return dataclass, mo


@app.cell
def __(mo):
    get_sample_number, set_sample_number = mo.state(0)

    get_samples, set_samples = mo.state({})
    return get_sample_number, get_samples, set_sample_number, set_samples


@app.cell
def __(
    dataclass,
    get_sample_number,
    get_samples,
    mo,
    set_sample_number,
    set_samples,
):
    @dataclass
    class Sample:
        name: str
        
    def add_sample():    
        current_samples = get_samples().copy()
        new_id = get_sample_number()
        current_samples[new_id] = Sample(f"Info on sample {new_id}")
        set_samples(current_samples)

        set_sample_number(new_id + 1)

    def remove_sample(sample_id):
        current_samples = get_samples().copy()
        del current_samples[sample_id]
        set_samples(current_samples)

    add_sample_button = mo.ui.button(label="Add sample", on_click=lambda _: add_sample())
    return Sample, add_sample, add_sample_button, remove_sample


@app.cell
def __(add_sample_button, get_samples, mo):
    mo.vstack([
        add_sample_button,
        mo.accordion({
            f"Sample {sample_id}": mo.vstack([
                get_samples()[sample_id].name,  # add other input elements here
                # ideally a remove button here
            ]) for sample_id in get_samples()
        })
    ])
    return


@app.cell
def __(get_samples, mo, remove_sample):
    buttons = {f"button_{i}": mo.ui.button(label=str(i), on_click=lambda _: remove_sample(i)) for i in list(get_samples().keys())}

    def _placeholder(name) -> str:
        return "{" + name + "}"

    batch = mo.vstack([
       _placeholder(name) for name in buttons.keys()
    ]).batch(**buttons)

    batch
    return batch, buttons


if __name__ == "__main__":
    app.run()

[akshayka]

But clicking a button removes always the last element in the samples, not the respective one with the same 'id'.
2) how does it work to remove the correct element from the state containing the sample objects?

This is due to the fact that closures in Python are late-binding. All your on_click lambdas bind i to the last element in your iterable. Here are some references that explain more and show solutions:

• https://stackoverflow.com/questions/3431676/creating-functions-or-lambdas-in-a-loop-or-comprehension

• https://docs.python-guide.org/writing/gotchas/#late-binding-closures

1. How can I add a remove button to each of the elements in the accordion

I think you can do this by batching the accordion, which you then assign to a global variable. Then output the accordion in the vstack in another cell. Remember that reactivity only works on global variables in marimo. So instead of what's written in your example code, you'd do something like this:

One cell

batched_accordion = mo.accordion({...}).batch(**remove_buttons)

Another cell

mo.vstack([add_sample_button, batched_accordion])

Example code of a batched accordion turned into a form:

import marimo

__generated_with = "0.1.78"
app = marimo.App()


@app.cell
def __():
    import marimo as mo
    return mo,


@app.cell
def __(mo):
    btns = {
        f"btn_{i}": mo.ui.button(value=i, label=str(i), on_click=lambda v: v + 1)
        for i in range(10)
    }
    content = " | ".join("{" + key + "}" for key in btns)

    accordion_form = mo.accordion({"Tip": content}).batch(**btns).form()
    accordion_form
    return accordion_form, btns, content


@app.cell
def __(accordion_form):
    accordion_form.value
    return


if __name__ == "__main__":
    app.run()

[MaWeffm]

Thank you @akshayka and sorry for the late reply, been busy with some other projects. Your feedback is highly appreciated! Btw, version 0.2.0 looks great, and I'll try implementing the dynamic form with the new mo.ui.array and mo.ui.dictionary elements!