Skip to content

docs: Add modal_show/remove examples #1628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 29, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions shiny/api-examples/modal_remove/app-core.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
from shiny import App, Inputs, Outputs, Session, reactive, ui


def run_model(delay=10.0):
import time

# Pretend to run a model for `delay` seconds
start_time = time.time()
while time.time() - start_time < delay:
pass
return time.time()


def the_modal():
return ui.modal(
"The model is running, please wait.",
title="Running model",
easy_close=False,
footer=None,
)


app_ui = ui.page_fluid(
ui.input_action_button("run", "Run Model"),
)


def server(input: Inputs, output: Outputs, session: Session):
model_result = reactive.value()

@reactive.effect
@reactive.event(input.run)
def do_run_model():
# Show the modal, blocking interaction with the UI
ui.modal_show(the_modal())

result = run_model(delay=4)

# Now that we have model results, remove the modal
# and update the model result reactive value
ui.modal_remove()
model_result.set(result)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're going to set a reactive val here, let's display it somewhere? I'd also be fine getting rid of it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should get rid of it; it's a core part of the pattern. On the other hand I don't think it's worth showing the value; that ends up just being something to delete if you use this example as a template.

Copy link
Collaborator

@cpsievert cpsievert Aug 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's a core part of the pattern

It's a core part of a pattern, but not everyone coming to modal_remove() wants that pattern (e.g., maybe they just want to delay n seconds, or provide another UI control to close)? IMO introducing state that isn't actually used has potential to cause confusion. That said, I ultimately don't want to dwell on such a minor detail.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a core part of a pattern, but not everyone coming to modal_remove() wants that pattern

lol very true. I meant "the pattern being demonstrated", not the only pattern.

IMO introducing state that isn't actually used has potential to cause confusion.

I probably wouldn't have included it either, but I've independently shown this pattern to 2-4 different people asking about how to remove the modal.



app = App(app_ui, server)
40 changes: 40 additions & 0 deletions shiny/api-examples/modal_remove/app-express.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
from shiny import reactive
from shiny.express import input, ui


def run_model(delay=10.0):
import time

# Pretend to run a model for `delay` seconds
start_time = time.time()
while time.time() - start_time < delay:
pass
return time.time()


ui.input_action_button("run", "Run Model")

model_result = reactive.value()


def the_modal():
return ui.modal(
"The model is running, please wait.",
title="Running model",
easy_close=False,
footer=None,
)


@reactive.effect
@reactive.event(input.run)
def do_run_model():
# Show the modal, blocking interaction with the UI
ui.modal_show(the_modal())

result = run_model(delay=4)

# Now that we have model results, remove the modal
# and update the model result reactive value
ui.modal_remove()
model_result.set(result)
4 changes: 2 additions & 2 deletions shiny/ui/_modal.py
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ def modal(
)


@add_example(ex_dir="../api-examples/modal")
@add_example(ex_dir="../api-examples/modal_remove")
def modal_show(modal: Tag, session: Optional[Session] = None) -> None:
"""
Show a modal dialog.
Expand All @@ -184,7 +184,7 @@ def modal_show(modal: Tag, session: Optional[Session] = None) -> None:
session._send_message_sync({"modal": {"type": "show", "message": msg}})


@add_example(ex_dir="../api-examples/modal")
@add_example()
def modal_remove(session: Optional[Session] = None) -> None:
"""
Remove a modal dialog box.
Expand Down
Loading