Change parent from module with express

[julibeg]

I would like to update a navset_bar from within modules in my Express app, but I can't seem to get it to work. The MWEs below have a navbar with several panels and I want each subsequent panel to contain a button that takes us back to the first panel. This works in Panel 2 (which is not a module), but does not work in the other panels (which are a module)

Naively, I tried

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

ui.page_opts(title="Navset MWE", full_width=True, id="page")


@module
def other_panels(input, output, session, label):
    with ui.nav_panel(label):
        ui.input_action_button(
            "module_button", "Go back to Panel 1", cls="btn btn-primary"
        )

    @reactive.effect
    @reactive.event(input.module_button)
    def _():
        ui.update_navs("navbar", "Panel 1")


with ui.navset_bar(id="navbar", title=None):

    with ui.nav_panel("Panel 1"):
        ui.tags.p("hi")
    with ui.nav_panel("Panel 2"):
        ui.input_action_button(
            "back_to_1_from_p2", "Go back to Panel 1", cls="btn btn-primary"
        )
    other_panels("p3", label="Panel 3")
    other_panels("p4", label="Panel 4")


@reactive.effect
@reactive.event(input.back_to_1_from_p2)
def _():
    ui.update_navs("navbar", "Panel 1")

I assumed the parent namespace to be '' and thus the id "navbar" to be valid within the module as well, but looks like this is not the case.

I then tried to get it working by passing a callback, but no luck

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

ui.page_opts(title="Navset MWE", full_width=True, id="page")


@module
def other_panels(input, output, session, label, callback):
    with ui.nav_panel(label):
        ui.input_action_button(
            "module_button", "Go back to Panel 1", cls="btn btn-primary"
        )

    @reactive.effect
    @reactive.event(input.module_button)
    def _():
        callback()


# put update into function that we can pass as a callback
def go_to_p1():
    print("going back to Panel 1")
    ui.update_navs("navbar", "Panel 1")


with ui.navset_bar(id="navbar", title=None):

    with ui.nav_panel("Panel 1"):
        ui.tags.p("hi")
    with ui.nav_panel("Panel 2"):
        ui.input_action_button(
            "back_to_1_from_p2", "Go back to Panel 1", cls="btn btn-primary"
        )
    other_panels("p3", label="Panel 3", callback=go_to_p1)
    other_panels("p4", label="Panel 4", callback=go_to_p1)


@reactive.effect
@reactive.event(input.back_to_1_from_p2)
def _():
    go_to_p1()

I've seen similar examples that work (e.g. #690), but they all use Core syntax and I couldn't get it working with Express. Any pointers are highly appreciated!

[schloerke]

Thank you for the great reprex for your question!

---

Approaches:

callback

Be sure to set session=session where the session is the session imported from shiny.express. If this is left out (as in your example), the session is inherited from where the event is created... the module's session.

from shiny import reactive, Inputs, Outputs, Session
from shiny.express import ui, input, module, session
from htmltools import TagChild

ui.page_opts(title="Navset MWE", full_width=True, id="page")


def go_to_panel_1():
    ui.update_navs("navbar", "Panel 1", session=session)

@module
def other_panels(input: Inputs, output: Outputs, session: Session, label: TagChild):
    with ui.nav_panel(label):
        ui.input_action_button(
            "module_button", "Go back to Panel 1", cls="btn btn-primary"
        )

    @reactive.effect
    @reactive.event(input.module_button)
    def _():
        go_to_panel_1()


with ui.navset_bar(id="navbar", title=None):

    with ui.nav_panel("Panel 1"):
        ui.tags.p("hi")
    with ui.nav_panel("Panel 2"):
        ui.input_action_button(
            "back_to_1_from_p2", "Go back to Panel 1", cls="btn btn-primary"
        )
    other_panels("p3", label="Panel 3")
    other_panels("p4", label="Panel 4")


@reactive.effect
@reactive.event(input.back_to_1_from_p2)
def _():
    ui.update_navs("navbar", "Panel 1")

Explicit callback

from shiny import reactive, Inputs, Outputs, Session
from shiny.express import ui, input, module, session
from htmltools import TagChild
from typing import Callable

ui.page_opts(title="Navset MWE", full_width=True, id="page")


@module
def other_panels(
    input: Inputs,
    output: Outputs,
    session: Session,
    label: TagChild,
    go_to_panel_1: Callable[[], None],
):
    with ui.nav_panel(label):
        ui.input_action_button(
            "module_button", "Go back to Panel 1", cls="btn btn-primary"
        )

    @reactive.effect
    @reactive.event(input.module_button)
    def _():
        go_to_panel_1()

def go_to_panel_1():
    ui.update_navs("navbar", "Panel 1", session = session)
    
with ui.navset_bar(id="navbar", title=None):

    with ui.nav_panel("Panel 1"):
        ui.tags.p("hi")
    with ui.nav_panel("Panel 2"):
        ui.input_action_button(
            "back_to_1_from_p2", "Go back to Panel 1", cls="btn btn-primary"
        )
    other_panels("p3", label="Panel 3", go_to_panel_1=go_to_panel_1)
    other_panels("p4", label="Panel 4", go_to_panel_1=go_to_panel_1)


@reactive.effect
@reactive.event(input.back_to_1_from_p2)
def _():
    ui.update_navs("navbar", "Panel 1")

---

There's a third option where you set session=session.root_scope() within the module update call, but I appreciate the clarity of the callback which is defined outside the module.

[julibeg]

Ah, I should have realized that I need to pass the root / parent session somehow. This works; thanks a lot @schloerke!