Reactivity question

[blackdwarf]

I was looking at #1683 and I thought I understood how reactive works after that.

The idea I have is to show a DirectoryTree and then show whatever the user selected in a Label. I created a ReactiveLabel class that uses the render method to show a reactive property.

One widget is shown below:

from textual.widgets import DirectoryTree, Label, Button, Switch, Input
from textual.screen import ModalScreen
from textual.app import ComposeResult
from textual.containers import Grid, VerticalScroll
from textual.message import Message
from textual.reactive import reactive
import os
from textual import on
from .reactive_label import ReactiveLabel

class AddDirectory(ModalScreen):

    BINDINGS = [
        ('escape', 'close')
    ]


    class Added(Message):
        def __init__(self, path: str, is_directory: bool = False, recursive: bool = False) -> None:
            super().__init__()
            self.path = path
            self.is_directory = is_directory
            self.recursive = recursive


    def compose(self) -> ComposeResult:
        home_dir = os.path.expanduser('~/')
        self.path_show = ReactiveLabel('Selected path:', id='selected_path')
        grid = Grid(
            Label(f'Here comes the help or wahtever'),
            DirectoryTree(home_dir, id='add_directory_selector'),
            Switch(id='add_directory_recursive'),
            # Label('Selected path: ', id='selected_path'),
            self.path_show,
            Button('Add', variant='primary', id='submit_button')
        )
        final = VerticalScroll(
            grid,
            id='add_directory_container'
        )
        final.border_title = 'Add a directory'
        yield final
    

    def on_directory_tree_file_selected(self, event: DirectoryTree.FileSelected) -> None:
        self.path_show.content = f'Selected path: {event.path.as_posix()}'


    def on_directory_tree_directory_selected(self, event: DirectoryTree.DirectorySelected) -> None:
        self.path_show.content = f'Selected path: {event.path.as_posix()}'

    @on(Button.Pressed, '#submit_button')
    def submit_path(self, event: Button.Pressed) -> None:
        pass

    def action_close(self) -> None:
        self.app.pop_screen()

And then we have the ReactiveLabel:

from textual.widgets import Label
from textual.widget import Widget
from textual.reactive import reactive
from rich.console import ConsoleRenderable, RichCast



class ReactiveLabel(Label):

    content: str = reactive('', always_update=True)

    def __init__(self, renderable: ConsoleRenderable | RichCast | str = "", *, expand: bool = False, shrink: bool = False, markup: bool = True, name: str | None = None, id: str | None = None, classes: str | None = None, disabled: bool = False) -> None:
        super().__init__(renderable, expand=expand, shrink=shrink, markup=markup, name=name, id=id, classes=classes, disabled=disabled)
        self.content = renderable
    

    def render(self) -> ConsoleRenderable | RichCast | str:
        return self.content

However, when I select any node, I can see the path reflected in ReactiveLabel on screen on every other selection.

I am really confused as I think this should work based on the discussion in the linked question, since the reactive property is in a separate object.

What am I doing wrong and/or misunderstanding?

[davep]

Stepping back from the reactive aspect of this for a moment (checking this first as your code seems to be battling against how Label works when it could work with how it works), is there a reason why you're taking this route to updating a Label when you could do this:

self.path_show.update(f'Selected path: {event.path.as_posix()}')

without the need to subclass Label and add more work?

[blackdwarf]

Hi @davep,

I am trying to understand how reactive works. You are right that the other solution is as good and I can do that, but I would like to see what am I missing in my example that is stopping it from working as it should. So, I guess, no good reason and I could do this as well, but was hoping to learn.

Hope this makes sense.

[TomJGooding]

Perhaps I'm missing something obvious, but there does seem to be something weird about the DirectoryTree message paths.

Try the app below before and after uncommenting the notify line:

from pathlib import Path

from textual import on
from textual.app import App, ComposeResult
from textual.reactive import reactive
from textual.widgets import DirectoryTree, Label


class PathLabel(Label):
    path: reactive[str] = reactive("None")

    def render(self) -> str:
        return f"Selected path: {self.path}"


class WatchApp(App):
    def compose(self) -> ComposeResult:
        path = Path(__file__).parent
        yield PathLabel()
        yield DirectoryTree(path=path)

    @on(DirectoryTree.DirectorySelected)
    @on(DirectoryTree.FileSelected)
    def update_path_label(
        self,
        event: DirectoryTree.FileSelected,
    ) -> None:
        # self.notify(str(event.path))
        self.query_one(PathLabel).path = str(event.path)


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

[blackdwarf]

Yeah, so:

• Without the self.notify line, the behavior is the same one I saw which is that every other event (more or less) triggers the reactivity in the PathLabel.
• With the self.notify line, every interaction with the DirectoryTree triggers the reactivity and the update happens.

[davep]

@TomJGooding I've not dived into the how or why or anything (and I do still think it's probably not a good idea to inherit from Label and then ignore everything about Label), but compare what happens with this change:

--- path_label.py-orig	2024-02-16 10:07:15
+++ path_label.py	2024-02-16 10:07:22
@@ -7,7 +7,7 @@
 
 
 class PathLabel(Label):
-    path: reactive[str] = reactive("None")
+    path: reactive[str] = reactive("None", layout=True)
 
     def render(self) -> str:
         return f"Selected path: {self.path}"

My "just at my desk for a moment" thought is that there's questions of styling and how and why things get refreshed and when going on here; and it might explain why the use of notify makes things work as it likely causes the PathLabel to get a full refresh as the notification toast rack will be over the top of everything, causing a check of the layout of everything, perhaps, maybe.

Point being: no clue if there's an issue here or not, but I suspect the diff here is the way in.

[davep]

Alternate way of making it work:

--- path_label.py-orig	2024-02-16 10:07:15
+++ path_label.py	2024-02-16 10:14:43
@@ -7,6 +7,13 @@
 
 
 class PathLabel(Label):
+
+    DEFAULT_CSS = """
+    PathLabel {
+        width: 1fr;
+    }
+    """
+
     path: reactive[str] = reactive("None")
 
     def render(self) -> str:

I strongly suspect (and by suspect mean guess at this moment) this is an issue of how and when the width is worked out.

[TomJGooding]

Sorry yes I think you're right Dave. I forgot Label has a width of auto, blame looking at this late in the evening!