Conditionally showing widget which depends on data being loaded

[davetapley]

I want to show a widget only after some data have been loaded.

I have reactive which is None until the data are loaded (in response to a user selecting an item from a menu), and is then populated with an instance of a class with all the data.

I then have a Widget subclass which takes an instance of that class.
I initially tried to conditionally add the widget in compose, but that doesn't work because:

• Reactive doesn't seem to work at all #1683

... which now makes sense to me.

---

One solution would be to refactor my Widget to handle the None default value and then use CSS to hide it until loaded, but that seems very inelegant.

Any better ideas? 🤔

[davep]

If I'm reading this correctly (keep a widget hidden until some value is set on a property), perhaps a reactive along with a watch and some CSS magic?

from textual.app      import App, ComposeResult
from textual.widgets  import Header, Footer, Label
from textual.reactive import reactive

class MyLabel( Label ):

    DEFAULT_CSS = """
    .hidden {
        display: none;
    }
    """

    text: reactive[str | None] = reactive(None)

    def __init__( self ) -> None:
        super().__init__( classes="hidden" )

    def watch_text( self ) -> None:
        if self.text is not None:
            self.update( self.text )
        self.set_class( self.text is None, "hidden" )

class ReactShow( App[ None ] ):

    CSS = """
    Screen {
        align: center middle;
    }
    """

    BINDINGS = [
        ( "s", "set_text", "Set some text" ),
    ]

    def compose( self ) -> ComposeResult:
        yield Header()
        yield MyLabel()
        yield Footer()

    def action_set_text( self ) -> None:
        self.query_one( MyLabel ).text = "S U R P R I S E!!"

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

[davetapley]

Thanks for fast reply!
Yeah that would work but seems quite (no offense intended) 'inelegant'.

Consider if the widget's data is not just text but e.g. an instance of a more complex dataclass,
and the widget has its own display logic, e.g. a form (see also #105).

With this approach I think that would require making all properties on the dataclass be | None (or have some default uninitialized value), unless I'm mistaken?

[davep]

None was just a useful example here. For a more complicated decision I'd have the watch method either decide itself, or call on whatever made the decision.

Of course you have the display property too; so it doesn't have to be done with a CSS class (my taste is for the class).

[davetapley]

I think I must be missing something, please bear with me 😬

have the watch method either decide itself, or call on whatever made the decision

In either case I'm not sure how to 'add' the new widget to the set of widgets being rendered, once 'the decision' has been made, since (as clarified on #1683 (comment)):

Textual calls compose only once during the mount process

Put another way: If I don't have the data for the widget at start up, how can I the widget later, if all widgets have to be instantiated during the mount process? 🤔

[willmcgugan]

You can use the mount method to add new widgets.

https://textual.textualize.io/api/widget/#textual.widget.Widget.mount

see also … https://textual.textualize.io/tutorial/#dynamic-widgets

[davetapley]

Ah! That's the piece of the puzzle I was missing.

I was going to suggest putting in the docs, but I now see it's addressed right here: 🙈
https://textual.textualize.io/guide/app/#mounting

Thanks both 🙏🏻