Question on coordinating widgets

[erudin]

Hi all! I'm trying to build my first app with textual but I still don't understand well how to coordinate widgets.
What I want to achieve is when I select an item from the first list it should change the output on the other list of items. I'm doing it creating two custom widgets that uses Select(). (Maybe there is a better way to do it)
This is a piece of code from the app:

from textual import log
from textual.app import ComposeResult, Widget, App
from textual.message import Message
from textual.widgets import Select, Label

from data import Campaigns


class Campaign(Widget):
    """Campaign select widget."""

    class Changed(Message):
        """Message sent when the campaign changes."""

        def __init__(self, value: str) -> None:
            super().__init__()
            self.value = value

    def compose(self) -> ComposeResult:
        yield Label('Campaign')
        yield Select(
            options=((campaign.value, campaign.name) for campaign in Campaigns),
            prompt='Choose campaign',
        )

    def on_select_changed(self, event: Select.Changed):
        """When the campaign changes, notify the parent via a message."""
        log(f"Campaign.on_select_changed")
        self.post_message(self.Changed(event.value))


class Scenario(Widget):

    scenario = Select(options=[('', '')], prompt='Choose scenario')

    def compose(self) -> ComposeResult:
        yield Label('Scenario')
        yield self.scenario

    def on_campaign_changed(self, value: Campaign.Changed):
        log(f"Scenario.on_campaign_changed")
        self.scenario.set_options('new set of items depending on the value changed')


class SkillTest(App):
    
    DEFAULT_CSS = """
    Select {
        width: 60;
        margin: 2;
    }
    """

    def compose(self) -> ComposeResult:
        yield Campaign()
        yield Scenario()

The idea is to select a campaign and depending on that, display the respective scenarios for that campaign. I'm also not sure how to handle the on_campaign_changed handler to set the new values and if I need to do something additional inside the app to send the message to the second widget (in this case the scenario one).

I have read the tutorial and the widget coordination docs but still not sure how to make it work.
I also check the discussion to see similar questions like #1990 but I'm still confused.

I will appreciate any help and/or insights you may have.
Thanks in advance!

[davep]

Have you worked through the guide to coordinating widgets? If not, I think it'll go a long way to helping with this.

[erudin]

Yes, I already read it many times but I haven't been able to understand how to make it work with the Select() widget. I also ran the bitswitch example. The thing is I don't know how to update the value for the second widget (the scenario one) to be displayed.

[davep]

Cool, just wanted to be sure if you'd seen it or not. I think, for the purposes of your question here, the key part is the part about data flow, and how you want messages to bubble up and attributes down. So in your case, given the code you've shown above, you want to be capturing the Campaign.Changed message in your SkillTest app, and then setting a reactive attribute on the Scenario widget, which will have a watch method which will in turn populate the Select with the appropriate values.

[davep]

This is rather rough around the edges, but as a very quick and dirty illustration of the sort of approach you might want to take, something like this might be a good starting point:

from __future__ import annotations

from dataclasses import dataclass

from textual import on
from textual.app import App, ComposeResult
from textual.containers import Horizontal
from textual.widgets import Select
from textual.widget import Widget
from textual.message import Message
from textual.reactive import var

CAMPAIGNS = [
    ("One", "1"),
    ("Two", "2"),
    ("Three", "3"),
]

SCENARIOS = {
    "1": [
        ("Foo", "1.1"),
        ("Bar", "1.2"),
        ("Baz", "1.3"),
    ],
    "2": [
        ("Wibble", "2.1"),
        ("Wobble", "2.2"),
        ("Wubble", "2.3"),
    ],
    "3": [
        ("One", "3.1"),
        ("More", "3.2"),
        ("Example", "3.3"),
    ],
}

class Campaign(Widget):

    @dataclass
    class Selected(Message):
        campaign: Campaign
        selected: str

        @property
        def control(self) -> Campaign:
            return self.campaign

    def compose(self) -> ComposeResult:
        yield Select(CAMPAIGNS, prompt="Select a campaign")

    @on(Select.Changed)
    def new_campaign(self, event: Select.Changed) -> None:
        if event.select.value is not None:
            self.post_message(self.Selected(self, event.select.value))

class Scenario(Widget):

    campaign: var[str] = var[str]("")

    def compose(self) -> ComposeResult:
        yield Select([], prompt="Scenario")

    def watch_campaign(self) -> None:
        if self.campaign:
            self.query_one(Select).set_options(SCENARIOS[self.campaign])

class SelectToSelectApp(App[None]):

    CSS = """
    Campaign, Scenario {
        width: 1fr;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield Campaign()
            yield Scenario()

    @on(Campaign.Selected)
    def switch_campaign(self, event: Campaign.Selected) -> None:
        self.query_one(Scenario).campaign = event.selected

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

Note that the key parts here are the Campaign.Selected message that is sent up the the app, and the Scenario.campaign reactive attribute that is used to receive the "key" for the campaign it's supposed to be showing the scenarios for.

Do forgive the utterly bogus test data, but I wanted to make something quickly that can be run stand-alone.

[erudin]

Hey! Thank you for your time and help. I'll take a look at your answers and test it and let you know.

[erudin]

Thank you so much @davep,it worked like a charm :). I could see where my mistake was and how to fix it thanks to your explanation and code example.

I tried before to use the reactive variable but I was using it wrong, I was putting the variable in the two widgets and then I got confused with the watch method, that's why it is not shown in the example code I provided. But now it makes sense. Thanks again!

Although I still have a quick question (maybe is a silly one), why do I have to check if event.select.value is not None? I thought I just send the message to the parent as it is.

[davep]

Glad to hear it helped. :-)

why do I have to check if event.select.value is not None

That's as much for the benefit of type-checking as anything else; but the value of a Select can be None (nothing selected), so taking that into account doesn't hurt.