How can I dynamically change the content of GridView?

[samzhangjy]

Hi, I'm a newbie in Textual. I'm trying to build a terminal application using Textual and requires to update the contents of GridView when the user hits a certain number. I tried to use Reactive variables, but it didn't seem to be working... Below is my code sample:

from email import header
from textual import events
from textual.app import App
from textual.widgets import Header, Footer, Placeholder, ScrollView
from textual.widget import Widget
from textual.views._dock_view import DockView
from textual.reactive import Reactive
from rich.text import Text
from image import DrawImage
from crawler import Crawler


class Image(Widget):
    def __init__(self, name: str | None = None, img: Text = None) -> None:
        super().__init__(name=name)
        self.image = img
    
    def render(self) -> Text:
        return Text.from_ansi(self.image)


class Biminal(App):
    crawler = Crawler()
    topics_to_show = ["科技", "知识", "生活", "游戏", "运动", "娱乐", "动画", "鬼畜", "美食", "汽车"]
    videos: Reactive[list] = Reactive([])
    current_topic: Reactive[str] = Reactive("")

    def get_ansi_pic(self, url: str) -> str:
        return DrawImage.from_url(url, (33, 10)).draw_image()

    async def on_load(self, event: events.Load) -> None:
        """Bind keys with the app loads (but before entering application mode)"""
        # await self.bind("b", "view.toggle('sidebar')", "Toggle sidebar")
        await self.bind("q", "quit", "Quit")
        await self.bind("escape", "quit", "Quit")

    async def on_mount(self, event: events.Mount) -> None:
        """Create and dock the widgets."""

        vid_view = DockView("video_contents")

        # Header / footer / dock
        await self.view.dock(Header(), edge="top")
        await self.view.dock(Footer(), edge="bottom")


        data = [{
            "title": topic,
            "videos": self.crawler.get_topic(self.crawler.topics[topic]),
            "id": self.crawler.topics[topic]
        } for topic in self.crawler.topics]

        grid = await vid_view.dock_grid(gap=2)

        grid.add_column("col", fraction=1, max_size=33)
        grid.add_row("row", fraction=1, max_size=10)
        grid.set_repeat(True, True)
        grid.add_areas(header="col-1-start|col-1-end,row-1-start|row-6-end")
        grid.set_align("stretch", "header")

        covers = []
        for video in self.videos:
            covers.append(Image(video["title"], self.get_ansi_pic(video["pic"])))
        grid.place(*covers)

        # Dock the body in the remaining space
        await self.view.dock(vid_view)

    async def on_key(self, event: events.Key) -> None:  # Changes through topics according to the number the user pressed
        try:
            key = int(event.key)
        except ValueError:
            await self.press(event.key)
            return
        if key == 0: key = 10
        self.videos = self.crawler.get_topic(self.crawler.topics[self.topics_to_show[key - 1]])
        self.current_topic = self.crawler.topics[self.topics_to_show[key - 1]]
        await self.press(event.key)


if __name__ == "__main__":
    Biminal().run(title="App", log="textual.log")

Whereas Crawler.get_topic returns something like:

[
  {
    "title": "Lorem ipsum",
    "videos": [ { "pic": "cover image url" } ]
  }
]

And by the way... I want to use the ScrollView widget as well, which should be the parent of GridView . However... I didn't really found a way to achieve this.

Can anyone help me a little? Thanks in advance!!