How can I delete data with shiny input_action_button?

[appEnigma]

I have recently started working with Shiny Python and got stuck at some point

from pathlib import Path

from shiny import reactive
from shiny.express import input, render, ui


ui.page_opts(title="Stock explorer", fillable=True)

with ui.sidebar():
    ui.input_text("data_one","Insert Number",placeholder="Insert Number 1")
    ui.input_text("data_two","Insert Number",placeholder="Insert Number 2")
    ui.input_action_button("add_data", "Add Data", class_="btn-primary")
    ui.input_action_button("delete_data", "Delete Data", class_= "btn-danger")


with ui.layout_column_wrap(fill=False):
    with ui.value_box():
        "Number One"

        @render.ui
        def data_1():
            return f"{get_data_one()}"

    with ui.value_box():
        "Number 2"

        @render.ui
        def data_2():
            return f"{get_data_two()}"


ui.include_css(Path(__file__).parent / "styles.css")


@reactive.calc
@reactive.event(input.add_data, ignore_none=False)
def get_data_one():
    return input.data_one()

@reactive.calc
@reactive.event(input.add_data, ignore_none=False)
def get_data_two():
    return input.data_two()

@reactive.calc
def data_delete():
    pass

I am stuck as to how I can update the ui.value_box as empty while pressing the Delete Data button. In the reference page Shiny for Python I can see I would be able to update inputs and layout, but not able to get how to update the value_box. I have kept the data_delete() function to be pass as of now.

Any feedback or suggestions will help.

[cpsievert]

I think you want some thing like this?

@reactive.effect
@reactive.event(input.delete_data)
def data_delete():
    ui.update_text("data_one", value = "")
    ui.update_text("data_two", value = "")

And then you'd probably want to add the following decorators to the @reactive.calcs as well?

@reactive.event(input.delete_data)

[appEnigma]

Hi @cpsievert ,

Thanks for the reply. I did try your process but actually that is deleting the data of the input box and not the value in value_box().

Will try to explain with a screenshot.

You can see I have marked the Value Box which I actually want to change. Meaning I want to delete data from this box only.
It could be either deleting or resetting the value to 0.

[jcheng5]

Shiny doesn't give you the ability to directly delete data from outputs like value_box() (or at least, it's heavily discouraged). Instead, we need to think of this in terms of the reactive state we want to model.

In this case, the normal input.xxx() -> @reactive.calc -> @render.yyy doesn't quite give us what we need, because we care about whether the "Add Data" or "Delete Data" button was more recently pressed. So we need to introduce a reactive.value to track that state.

from pathlib import Path

from shiny import reactive
from shiny.express import input, render, ui

# ADDED
deleted = reactive.value(False)


ui.page_opts(title="Stock explorer", fillable=True)

with ui.sidebar():
    ui.input_text("data_one","Insert Number",placeholder="Insert Number 1")
    ui.input_text("data_two","Insert Number",placeholder="Insert Number 2")
    ui.input_action_button("add_data", "Add Data", class_="btn-primary")
    ui.input_action_button("delete_data", "Delete Data", class_= "btn-danger")


with ui.layout_column_wrap(fill=False):
    with ui.value_box():
        "Number One"

        @render.ui
        def data_1():
            # MODIFIED
            return f"{get_data_one() if not deleted() else ""}"

    with ui.value_box():
        "Number 2"

        @render.ui
        def data_2():
            # MODIFIED
            return f"{get_data_two() if not deleted() else ""}"


ui.include_css(Path(__file__).parent / "styles.css")


@reactive.calc
@reactive.event(input.add_data, ignore_none=False)
def get_data_one():
    return input.data_one()

@reactive.calc
@reactive.event(input.add_data, ignore_none=False)
def get_data_two():
    return input.data_two()

# ADDED
@reactive.effect
@reactive.event(input.delete_data)
def data_delete():
    deleted.set(True)

# ADDED
@reactive.effect
@reactive.event(input.add_data)
def data_add():
    deleted.set(False)

This isn't the only way to do it; you might decide it makes more sense to use reactive values to track the current values of Number One and Number 2, which would definitely be the case if there were other operations you could perform on those values besides just not displaying them. But regardless, I believe any reasonable solution will involve introducing one or more reactive values, and using @reactive.effect to mutate them.

[appEnigma]

Thanks. Let me check this once.