Dynamic Amounts of Buttons

[gerrymanoim]

Hi - apologies if I'm missing something obvious, but I can't seem to get what I'm after to work.

The basic idea is, I have a hotkey that runs some action (in real life - makes an API call) that creates n buttons on the screen, replacing the existing buttons (if any). Similar to #32, but in response to an action. However, despite a lot of different attempts, I can't seem to get this to work. My sample code:

from textual.app import App
from textual import events
from textual.reactive import Reactive
from textual.views import WindowView
from textual.widget import Widget
from textual.widgets import Button, ButtonPressed, Header, Footer, Placeholder
from random import randint
from textual.message import Message

class WindowChange(Message):
    def can_replace(self, message: Message) -> bool:
        return isinstance(message, WindowChange)

class DynamicButtons(App):
    """The Calculator Application"""

    async def on_load(self, event: events.Load) -> None:
        """Bind keys with the app loads (but before entering application mode)"""
        await self.bind("b", "view.toggle('sidebar')", "Toggle sidebar")
        await self.bind("q", "quit", "Quit")
        await self.bind("r", "reload_events")

    async def on_mount(self, event: events.Mount) -> None:
        """Create and dock the widgets."""
        # A scrollview to contain the markdown file
        self.body = WindowView(Placeholder())

        # Header / footer / dock
        await self.view.dock(Header(), edge="top")
        await self.view.dock(Footer(), edge="bottom")

        # Dock the body in the remaining space
        await self.view.dock(self.body, edge="top")

    async def action_reload_events(self) -> None:
        n_buttons = randint(1, 10)
        buttons = [Button(str(n)) for n in range(n_buttons)]
        self.app.sub_title = f"I have {len(buttons)=} to render"
        self.body.layout.clear()
        for button in buttons:
            self.body.layout.add(button)
        self.body.layout.require_update()
        self.refresh(layout=True)
        await self.emit(WindowChange(self))
        await self.view.refresh_layout()

DynamicButtons.run(title="DynamicButtonsTest")

This latest iteration was stolen from some code I saw in WindowView, but I've tried a few different iterations with grids, etc. I can see that my subtitle is changing in response to the action, but the buttons never display and placeholder never goes. away.

It feels like I'm missing something very obvious here, but I'm not sure what.

[lllama]

I think you need to play with self.body.update(). The following will update the view. Making it update with buttons is left as an exercise 😄

from textual.app import App
from textual import events
from textual.reactive import Reactive
from textual.views import WindowView
from textual.widget import Widget
from textual.widgets import Button, ButtonPressed, Header, Footer, Placeholder
from random import randint
from textual.message import Message

from rich.console import Group

class WindowChange(Message):
    def can_replace(self, message: Message) -> bool:
        return isinstance(message, WindowChange)

class DynamicButtons(App):
    """The Calculator Application"""

    async def on_load(self, event: events.Load) -> None:
        """Bind keys with the app loads (but before entering application mode)"""
        await self.bind("b", "view.toggle('sidebar')", "Toggle sidebar")
        await self.bind("q", "quit", "Quit")
        await self.bind("r", "reload_events")

    async def on_mount(self, event: events.Mount) -> None:
        """Create and dock the widgets."""
        # A scrollview to contain the markdown file
        self.body = WindowView(Placeholder())

        # Header / footer / dock
        await self.view.dock(Header(), edge="top")
        await self.view.dock(Footer(), edge="bottom")

        # Dock the body in the remaining space
        await self.view.dock(self.body, edge="top")

    async def action_reload_events(self) -> None:
        n_buttons = randint(1, 10)
        buttons = [f"Button {n}" for n in range(n_buttons)]
        self.app.sub_title = f"I have {len(buttons)=} to render"
        await self.body.update(Group(*buttons))

DynamicButtons.run(title="DynamicButtonsTest")

Pretty sure this isn't good Rich practice but it does update when you press r.

[gerrymanoim]

Hmm - so if I look at the update method of WindowView I see:

    async def update(self, widget: Widget | RenderableType) -> None:
        layout = self.layout
        assert isinstance(layout, VerticalLayout)
        layout.clear()
        self.widget = widget if isinstance(widget, Widget) else Static(widget)
        layout.add(self.widget)
        await self.refresh_layout()
        self.refresh(layout=True)
        await self.emit(WindowChange(self))

Which is what I have in my action_reload_events. So while your code works, I don't think that's why the button code doesn't work? But maybe I'm missing something here.

[lllama]

So if you create buttons instead of labels (e.g. buttons = [Button(str(n)) for n in range(n_buttons)] ), then you get one button that's n_buttons in height, which makes me think that the total height of the group is being passed to each one and they are overwriting each other. Maybe something like a DockView could be used, as the hover example in the README looks like what you're trying to achieve, but I can't see a way to clear the view and replace its contents.

[willmcgugan]

@gerrymanoim I think you have uncovered a flaw. If you enable logs you might see the error "Button IS NOT RUNNING". That's because the buttons haven't been mounted, i.e. their event loop isn't running.

It should work without any of the explicit refreshing, i.e. you would just need to clear the layout add widgets. I'll look in to that in the next update.

[gerrymanoim]

Ah - thanks! I should have enabled the logs. I'll poke around some more - thanks.