widget with data-dependent compose method

[dbieber]

Still wrapping my head around the textual way of doing things. In this simple example, the MultiLabelWidget's compose method is dependent on the reactive num_labels. But compose is not called when num_labels changes. I'd like, when a click occurs, for a fourth label to be added. What is the textual way of having a Widget who's composition depends on its reactive data?

from textual.app import App
from textual.app import ComposeResult
from textual.reactive import reactive
from textual.widget import Widget
from textual.widgets import Label


class MultiLabelWidget(Widget):

  num_labels = reactive(3)

  def compose(self) -> ComposeResult:
    for i in range(self.num_labels):
      yield Label(f"Label {i}", id=f"label_{i}")


class ExampleApp(App):

  def compose(self) -> ComposeResult:
    yield MultiLabelWidget()

  def on_click(self):
    self.query_one("#label_0").update("Yes, clicks are working.")
    self.query_one(MultiLabelWidget).num_labels += 1


if __name__ == "__main__":
  app = ExampleApp()
  app.run()

---

I know that I can achieve this in this simple example with mount, but iiuc there should be a declarative approach as well, and that might be preferable over managing mount/unmount calls myself (?), which seems like it could get quite complex quickly.

[dbieber]

reactive(3, layout=True) does not change the app's behavior

[dbieber]

It seems the simplest (though perhaps not most efficient) way to recompose a Widget is:

    self.query(None).remove()
    for item in self.compose():
      self.mount(item)

(Edit: Ah, I see this doesn't actually always work)
(Edit 2: for item in _compose.compose(self) does the trick 👍 )
(Edit 3: But as might be expected, it causes the screen to flash as everything is removed, before everything is readded, which isn't great.)
(Edit 4: The self.app.batch_update() context manager looks like it should resolve this, but unfortunately doesn't seem to.)

New Q:
Is there a way to have a watch_all method that triggers whenever any reactive is updated?

Reason for this Q:
I'm considering trying out having my widgets recompose whenever any of their reactives change, to give a more declarative programming paradigm.

(Also lmk if you'd prefer I open new discussions for new Qs rather than continuing the discussion.)

[dbieber]

After all the edits in my previous message, here's what I'm left with:

  def watch_num_strings(self) -> None:
    with self.app.batch_update():
      self.query(None).remove()
      self.mount_all(_compose.compose(self))

It does flicker, which is unexpected because batch_update seems like it ought to avoid the flicker.

[davep]

In the code you post there, I'd expect flicker, as you're not awaiting the removals or the mounts. Consider this:

from textual.app import App, ComposeResult
from textual.widgets import Label, Input

class RemountApp(App[None]):

    BINDINGS = [
        ("f1", "sync"),
        ("f2", "async")
    ]

    def compose(self) -> ComposeResult:
        for n in range(1_000):
            yield Label(f"This is label {n}")
            yield Input(placeholder=f"This is input {n}")

    def action_sync(self) -> None:
        with self.batch_update():
            self.query("Label, Input").remove()
            self.mount_all(self.compose())

    async def action_async(self) -> None:
        with self.batch_update():
            await self.query("Label, Input").remove()
            await self.mount_all(self.compose())

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

[dbieber]

Yes, that avoids the flicker! Thank you.

[dbieber]

I'm next working on a different sort of flicker: I have a self.call_after_refresh(container.scroll_end, animate=False) after the batch_update() call, which works, but it first goes to the top on each update before doing the scroll to the bottom.