interactive DOM queries

[obergmartin]

Is it possible to have an interactive python prompt for making queries? I'm having difficulties navigating how widgets relate to each other (specifically how to find the root Tree node in a DirectoryTree widget to be able to run toggle_all() and have all folders expanded) and being able to make queries at an interactive prompt would make it easier to test what query I need to make instead of rerunning the program everytime. I've tried ipython %run myapp.py but get an error that textual doesn't exist(!?) and I've tried using pbd with the breakpoint() command in my code.

[davep]

There's nothing built into Textual that is a querying repl, in a debugging sense. If it helps though I did write this tool to help people practice querying; ideally used in conjunction with the guide to CSS (which covers selectors) and the guide to DOM queries.

specifically how to find the root Tree node in a DirectoryTree widget to be able to run toggle_all() and have all folders expanded

Note that the nodes within a Tree aren't widgets, so you wouldn't use DOM queries to find any node in there. You would use DOM queries to find the Tree itself though, and from there you'd its methods to control the nodes within.

[obergmartin]

Thank you for the help. That tool looks interesting, but I'm not sure how to translate queries in tqs to python query calls. I guess I'm having trouble making sense of all the inherited properties and would like to inspect the methods and properties of classes. At the moment I'm stuck with trial and error running the app and waiting for a crash.

An example might help.

# Written with Textual 0.52.1
from textual import on
from textual.app import App, ComposeResult
from textual.widget import Widget
from textual.widgets import Label, Static, DirectoryTree, Tree
from textual.types import DirEntry
from textual.containers import Container
from textual.widgets import Footer
from textual.binding import Binding
from textual.message import Message

class MyDirectoryTree(Static, can_focus=False):
    BORDER_TITLE = "Tree"
    BINDINGS = [
        Binding(key="b", action="make_branch", description="Branch"),
    ]
    def __init__(self, id):
        super().__init__(id=id)

    class Key(Message):
        def __init__(self, msg: str) -> None:
            self.msg = msg
            super().__init__()

    def compose(self):
        yield DirectoryTree("../")

    def action_make_branch(self) -> None:
        print("action b")
        txt = self.query_one(Tree).NodeSelected  # how do I get the label?
        print(txt)
        txt = str(txt)
        #self.query_one("#area-label").update(txt)
        self.post_message(self.Key(txt))


class StatusArea(Static):
    BORDER_TITLE = "Status"
    def __init__(self, id):
        super().__init__(id=id)

    def comport(self):
        yield Label()


class MyApp(App[None]):
    # CSS_PATH = "myapp_layouts.tcss"
    CSS = """
        #area-tree { height:1fr; border: round; }
        #area-label {border: round; height: 1;}
        """

    BINDINGS = [
        Binding("q", "quit_app", "Quit"),
    ]

    def compose(self) -> ComposeResult:
        with Container(id="app-area"):
            yield MyDirectoryTree(id="area-tree")
            yield StatusArea(id="area-label")
        yield Footer()

    def on_my_directory_tree_key(self, msg) -> None:
        self.query_one("#area-label").update(msg.msg)

    @on(DirectoryTree.DirectorySelected)
    def dir_selected(self, event):
        self.query_one("#area-label").update(str(event.path))


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

Right now, I'd like to have a directory (or file) selected, press the 'b' key and have a message show up in the Status area like "directory BLAH selected". (eventually something more interesting will happen. getting the message to percolate up for the App to see is the tricky part.) I am trying to get the value of the directory selected, and post_message for the app to see.

Printing the value in action_make_branch gives: <class 'textual.widgets._tree.Tree.NodeSelected'>. What I've read in the docs suggests that control, node, label, or value could give the selected directory name, but nothing works. This is where I'd like an interactive session to see what this object actually is.

[davep]

Thank you for the help. That tool looks interesting, but I'm not sure how to translate queries in tqs to python query calls.

As I said and linked to in my initial comment, assuming you've worked through the tutorial (which will give a very good grounding in Textual), and also read through the guide to CSS (which covers selectors) and the guide to DOM queries, things should be more clear. As I mentioned above, tqs is a tool similar to what you asked for (an interactive prompt for making queries) but will only make sense if you've worked through the Textual tutorial and guide first. It won't teach you how to do queries, but it will help you practice what you've learned from the documentation for Textual.

I guess I'm having trouble making sense of all the inherited properties and would like to inspect the methods and properties of classes.

Now it sounds like you're asking for something rather different. Initially you asked about "interactive DOM queries", which is what I offered one solution for; now it seems you're asking about an object inspector, more akin to a debugger. This is not what tqs is.

If you want to learn the features and APIs of Textual's widgets you'll find them all documented on the main website -- that is easily the best place to look. You can also find the main Textual APIs documented on the site too.

txt = self.query_one(Tree).NodeSelected # how do I get the label?

I would recommend a read through the documentation for Tree here. What you're attempting to use there is the NodeSelected class. You would not use it how you're attempting to there; to understand messages and events I'd recommend reading the guide to them first.

If you're trying to work out how to access the node of a Tree that is currently highlighted by the cursor, you'd want to be using cursor_node. The value of that property will be a TreeNode, TreeNode has a label.

Note also that, because you're using DirectoryTree, it's a good idea to become familiar with its API too as there are some things in there that you might want to make particular use of.

[ludos1978]

i encountered a similar problem as obergmartin, i was able to solve it with the screen callback method described here: https://mathspp.com/blog/textual-for-beginners