Unable to DOM select based on ID

[Yogesh7920]

I have the following Layout class

class Layout(App):
    CSS_PATH = ["layout.tcss", "order.tcss"]

    def compose(self) -> ComposeResult:
        yield Container(Label("BASE", classes="box"),
                        Digits("12345", id="header", classes="box"),
                        Label("", classes="box"),
                        classes="base_stats_box")
        yield Container(LiveTable(), classes="table_box")
        yield Container(OrderBox(), Container(Label(""), classes="order_status"), classes="right_box")

Here please note there is a Digits Widget with ID: "header"

Now, in my own custom class, I tried this

def __init__(self):
        self.layout = Layout()
        self.header = self.layout.query_one("#header")
        self.layout.run()

But I am getting the error

  self.header = self.layout.query_one("#header")
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\raghu\.virtualenvs\stormrazor-Rt_pRv38\Lib\site-packages\textual\dom.py", line 1148, in query_one
    return query.only_one() if expect_type is None else query.only_one(expect_type)
           ^^^^^^^^^^^^^^^^
  File "C:\Users\raghu\.virtualenvs\stormrazor-Rt_pRv38\Lib\site-packages\textual\css\query.py", line 258, in only_one
    self.first(expect_type) if expect_type is not None else self.first()
                                                            ^^^^^^^^^^^^
  File "C:\Users\raghu\.virtualenvs\stormrazor-Rt_pRv38\Lib\site-packages\textual\css\query.py", line 227, in first
    raise NoMatches(f"No nodes match {self!r}")
textual.css.query.NoMatches: No nodes match <DOMQuery query='#header'>

How to I get a DOM element outside the layout class, and how do I update it dynamically (say based on input from a web socket)

[davep]

You're doing the query in __init__; there is no DOM at that point, within __init__ no compose will have happened yet. Normally you would start interacting with the DOM starting with receiving the Mount event.

[davep]

To add: I just realised that Layout is an App; so you're trying to interact with the DOM of an application that isn't even running yet. If your question is how do you get return values from an app once it has finished running I'd recommend a read of the guide to App Basics.

[Yogesh7920]

Thank you for the quick response :)

Now I tried updating the program but still I am facing the same issue.
I understand that the DOM need to be rendered completely before we can do query selection. Thus I have to run the App first.
Looking at the docs I realized mount is used to dynamically add a widget, but I don't want to add a widget, I just want to dynamically change the value of an existing widget with the ID "header".

The following is the updated program, and I am still getting the same error. How can I update the program such that the header value gets updated dynamically?

class Portal(App):
    header = None
    CSS_PATH = ["layout.tcss", "order.tcss"]

    def compose(self) -> ComposeResult:
        yield Container(Label("BASE", classes="box"),
                        Digits("12345", id="header", classes="box"),
                        Label("", classes="box"),
                        classes="base_stats_box")
        yield Container(LiveTable(), classes="table_box")
        yield Container(OrderBox(), Container(Label(""), classes="order_status"), classes="right_box")

    def start(self):
        self.header: Digits = self.query_one("#header")

    def tick_data(self, tick: dict):
        print(tick)
        self.header.update(tick['last'])


if __name__ == '__main__':
    portal = Portal()
    portal.run()
    portal.start()
    portal.tick_data({'last': 123})
    time.sleep(2)
    portal.tick_data({'last': 456})

[davep]

Looking at the docs I realized mount is used to dynamically add a widget, but I don't want to add a widget, I just want to dynamically change the value of an existing widget with the ID "header".

It looks like you searched for and read about the mount method; I actually linked you to the Mount event, which is a different thing altogether.

More generally though, looking at what you're trying to do, I think you might be unclear about how a Textual application works. By the time the run method of your app has completed the application has finished running.

I'm starting to suspect that your question has nothing to do with how to query the DOM and you're looking for advice on how to handle concurrency? If so, have you read the guide to workers?

[Yogesh7920]

I see, I will go through it.
Thanks for the help.