Implement long list of scrollable and selectable widgets

[anlar]

Hello,

I'm working on application that has vertical list of items which should be scrollable by cursor. Each item is a widget itself and contains about 10 sub-widgets. Here is a screenshot for better understanding: https://github.com/anlar/tewi/blob/master/docs/images/tewi-screenshot-1.png .

Problem is that with large number of items (500+) list become unresponsive. Container scroll itself works fine, but if I want to use cursor (selecting item, changing its style and manually scroll to widget location) it is slow.

I have tried both ScrollableContainer and ListView (former works worse). All obvious (for me) optimization are made:

1. Widgets mounted/installed together.
2. There are no widgets re-composition during scroll.

Here is example app using scroll and list showing what app is doing:

from textual.app import App, ComposeResult                                                                                                                                   
from textual.binding import Binding                                                                                                                                          
from textual.containers import Grid, ScrollableContainer, Horizontal, Container                                                                                              
from textual.widgets import Static, Label, ProgressBar, DataTable, ContentSwitcher, TabbedContent, TabPane, TextArea, \                                                      
        ListView, ListItem, Header, Footer                                                                                                                                   
                                                                                                                                                                             
class LabelItem(Label):                                                                                                                                                      
    w_next = None                                                                                                                                                            
    w_prev = None                                                                                                                                                            
                                                                                                                                                                             
class ScrollablePanel(ScrollableContainer):                                                                                                                                  
                                                                                                                                                                             
    BINDINGS = [                                                                                                                                                             
            Binding("k", "move_up", "Move up"),                                                                                                                              
            Binding("j", "move_down", "Move down"),                                                                                                                          
            ]                                                                                                                                                                
                                                                                                                                                                             
    selected_item = None                                                                                                                                                     
                                                                                                                                                                             
    def on_mount(self):                                                                                                                                                      
        widgets = []                                                                                                                                                         
                                                                                                                                                                             
        w_prev = None                                                                                                                                                        
        for x in range(1000):                                                                                                                                                
            item = LabelItem("test-scroll-" + str(x))                                                                                                                        
                                                                                                                                                                             
            if w_prev:                                                                                                                                                       
                w_prev.w_next = item                                                                                                                                         
                item.w_prev = w_prev                                                                                                                                         
                w_prev = item                                                                                                                                                
            else:                                                                                                                                                            
                w_prev = item                                                                                                                                                
                                                                                                                                                                             
            widgets.append(item)                                                                                                                                             
                                                                                                                                                                             
        self.mount_all(widgets)

    def action_move_up(self) -> None:                                                                                                                                        
        items = self.children                                                                                                                                                

        if items:
            if self.selected_item is None:
                item = items[-1]
                item.selected = True
                self.selected_item = item
                self.scroll_to_widget(self.selected_item)
            else:
                if self.selected_item.w_prev:
                    self.selected_item.selected = False
                    self.selected_item = self.selected_item.w_prev
                    self.selected_item.selected = True
                    self.scroll_to_widget(self.selected_item)

    def action_move_down(self) -> None:
        items = self.children

        if items:
            if self.selected_item is None:
                item = items[0]
                item.selected = True
                self.selected_item = item
            else:
                if self.selected_item.w_next:
                    self.selected_item.selected = False
                    self.selected_item = self.selected_item.w_next
                    self.selected_item.selected = True
                    self.scroll_to_widget(self.selected_item)

class ListPanel(ListView):
    def on_mount(self):
        widgets = []

        for x in range(1000):
            item = ListItem(Label("test-list-" + str(x)))
            widgets.append(item)

        self.extend(widgets)

class MainApp(App):

    BINDINGS = [
        ("s", "switch_to('scroll')", "Switch to Scroll"),
        ("l", "switch_to('list')", "Switch to List"),
    ]

    def compose(self) -> ComposeResult:
        yield Header()
        with ContentSwitcher(initial="scroll"):
            yield ScrollablePanel(id="scroll")
            yield ListPanel(id="list")
        yield Footer()

    def action_switch_to(self, to_id):
        self.query_one(ContentSwitcher).current = to_id

MainApp().run()

So question is whether it is expected limitation for such large panels and I may not look further (and implement pagination for example) or I'm doing something wrong?

[Smalldy]

我不太熟悉textual，对于其他GUI框架来说，如果遇到了类似你遇到的这种性能问题，通常会采取“减少生成的UI对象”的方案。
假设你需要一个容纳1000000条数据的listview，一般来说很难有框架能够抵抗，但是我们可以采取一点作弊的方法：

1. 计算你的屏幕上最多能显示多少item， 假设是 20
2. 只创建 20或者25个item
3. 计算1000000个item的长度，并且将滚动区域的高度设置为这个数值
4. 根据滚动条位置计算item是否位于可视区域内，并且进行绘制

很显然，这是一个复杂的过程

I'm not very familiar with Textual, but in other GUI frameworks, when encountering performance issues like the one you're facing, the usual approach is to 'reduce the number of UI objects created.'

Let's say you need a listview that holds 1,000,000 items; generally, it's challenging for any framework to handle that. However, we can use a bit of a workaround:

Calculate the maximum number of items that can be displayed on your screen at once — let's say 20.
Only create 20 or 25 items.
Calculate the total length of the 1,000,000 items and set the scrollable area height to that value.
Based on the scroll bar's position, calculate if an item is within the visible area and render it accordingly.
Clearly, this is a complex process.