Vertical Scroll slow when adding/removing visibility of its children with CSS class

[javier-rlcore]

I have this small example app that lets me search trough the rows of a pandas DataFrame.

Each row is a HorizontalGroup. Together, they are organized inside a VerticalScroll.

When I search for a word, it goes to the on_input_changed method, and it adds/removes the visibility of certain rows via a CSS class.

My issue is that when my DataFrame gets large (around 200 rows), this process becomes really slow.

I am wondering if there are ways to speed this up? Am I even on the right track with my approach?

Thanks in advance.

#!/usr/bin/env python3

from typing import Any, List
import re

import pandas as pd
from textual.app import App, ComposeResult
from textual.containers import HorizontalGroup, VerticalScroll
from textual.widgets import Input, Label
from textual import work

class VariableRow(HorizontalGroup):
    def __init__(self, variable_idx: int, variable: dict, **kwargs: Any):
        super().__init__(**kwargs)
        self.variable_idx = variable_idx
        self.variable = variable

    def compose(self) -> ComposeResult:
        yield Label(str(self.variable['A']))
        yield Label(str(self.variable['B']))
        yield Label(str(self.variable['C']))


class MyApp(App):
    CSS =  """
        .invisible{
           display: none 
        }

        Label{
          width: 0.15fr;
        }
    """

    def compose(self) -> ComposeResult:
        self.vertical_scroll = VerticalScroll(id="results-container")
        yield Input(placeholder="Search for a variable or path", id="search")
        yield self.vertical_scroll

    def on_mount(self) -> None:
        self.df_data = pd.DataFrame(
                {"A": ["apple", "orange", "pear", "cherry"],
                "B": ["dog",   "cat",    "fish", "parrot"],
                "C": ["bike",  "boat",   "car",  "plane"]}
                )

        for idx, variable in self.df_data.iterrows():
            newRow = VariableRow(idx, variable)
            self.vertical_scroll.mount(newRow)

        self.query_one("#search").focus()

    def on_input_changed(self, event: Input.Changed) -> None:
        if event.input.id == "search":
            if event.value:
                self.lookup_value(event.value)
            else:
                children = self.vertical_scroll.children
                for child in children:
                    if child.has_class("invisible"):
                        child.remove_class("invisible")

    @work(thread=True, exclusive=True)
    def lookup_value(self, word):

        word = re.escape(word).lower()
        matched_indices = set(
            self.df_data[
                self.df_data["A"].str.contains(word, na=False)
            ].index
        )

        children = self.vertical_scroll.children
        for i, child in enumerate(children):
            if i in matched_indices:
                child.remove_class("invisible")
            else:
                child.add_class("invisible")


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

[willmcgugan]

There are a few issues here.

You're using add_class and remove_class in the thread. Most methods which update the UI aren't threadsafe, which means this could break in odd ways. The solution is to use call_from_thread or post custom messages. More info in the docs.

This wouldn't impact your slowness issue however. I'm assuming that updates become slow when the lookup_value function is slower than typical typing speed. What is likely happening is that your lookups are essentially being queued. i.e. if you type "hello", you won't get the result until it has queried "h", "he", "hel" etc. The exclusive switch won't help here, as threads cannot be automatically cancelled. See the docs on cancelling threaded workers.

The solution I would recommend is to have a single threaded worker started in on_mount. This worker would wait for an asyncio event when new search term is available and post the results back to the widget. This would allow you to skip intermediate searches.

[javier-rlcore]

Thanks for your reply! I will give it a try