How to implement a multi-page or modal widget?

[milanmitrovic]

I'm trying to implement a simple "modal" widget. I want to have several different "pages" that I show conditionally depending on internal state of the widget.

I tried to implement it like the following:

class SimpleMode(Enum):
    ADD = "add"
    BROWSE = "browse"
    VIEW = "view"
    EDIT = "edit"

@dataclass(frozen=True)
class SimpleState:
    mode: SimpleMode = SimpleMode.BROWSE

def simpl_reducer(state: SimpleState, action: Any) -> SimpleState:
    action_type, payload = action
    logger.debug(f"reducer | state: {state} | action_type: {action_type} | payload: {payload}")

    if action_type == "add":
        return replace(state, mode=SimpleMode.ADD)
    elif action_type == "browse":
        return replace(state, mode=SimpleMode.BROWSE)
    elif action_type == "view":
        return replace(state, mode=SimpleMode.VIEW)
    elif action_type == "edit":
        return replace(state, mode=SimpleMode.EDIT)
    else:
        raise ValueError(f"Unknown action type: {action_type}")


@solara.component # type: ignore
def SimpleModal():
    state, dispatch = solara.use_reducer(simpl_reducer, SimpleState()) # type: ignore
    logger.debug(f"SimpleModal widget | state: {state}")

    if state.mode == SimpleMode.ADD:
        logger.debug("In ADD mode")
        with solara.Row():
            solara.Markdown("## Add")
            solara.Button("Browse", on_click=lambda: dispatch(("browse", None)))
            solara.Button("View", on_click=lambda: dispatch(("view", None)))
            solara.Button("Edit", on_click=lambda: dispatch(("edit", None)))
    elif state.mode == SimpleMode.BROWSE:
        logger.debug("In BROWSE mode")
        with solara.Row():
            solara.Markdown("## Browse")
            solara.Button("Add", on_click=lambda: dispatch(("add", None)))
            solara.Button("View", on_click=lambda: dispatch(("view", None)))
            solara.Button("Edit", on_click=lambda: dispatch(("edit", None)))
    elif state.mode == SimpleMode.VIEW:
        logger.debug("In VIEW mode")
        with solara.Row():
            solara.Markdown("## View")
            solara.Button("Add", on_click=lambda: dispatch(("add", None)))
            solara.Button("Browse", on_click=lambda: dispatch(("browse", None)))
            solara.Button("Edit", on_click=lambda: dispatch(("edit", None)))
    elif state.mode == SimpleMode.EDIT:
        logger.debug("In EDIT mode")
        with solara.Row():
            solara.Markdown("## Edit")
            solara.Button("Add", on_click=lambda: dispatch(("add", None)))
            solara.Button("Browse", on_click=lambda: dispatch(("browse", None)))
            solara.Button("View", on_click=lambda: dispatch(("view", None)))

This unfortunately doesn't work as the view is always stuck in "Browse" mode. The logging statements show that the code is getting executed and the right branches trigger on mode change, but the UI doesn't update.

What's the proper way to implement something like this?

[milanmitrovic]

UPDATE: I just tried this in Jupyter and it works. I was doing this inside VS Code, and there it still doesn't. I would still appreciate any help in solving it in VS Code, as it is a lot nicer workflow.

[iisakkirotko]

You were running this in a notebook within VScode? I have seen that not work properly before, but don't exactly know why.

[milanmitrovic]

Yes.

[Enochsoul]

I'm still new to Solara, but I believe that the issue here is that your state is not reactive. When the Page loads the first time, it sets the state as SimpleMode.BROWSE, but because it's not reactive, changes to the state don't trigger a page update.