Restructure the UI related code. (#10)

* Restructure the UI related code.

* Add new lines at the end of the files.

Author: mvassilev

idd.py

@@ -2,83 +2,20 @@
 from textual.app import App
 from textual_inputs import TextInput
 from textual.reactive import Reactive
-from textual.widget import Widget
-from textual.widgets import Footer, Header, Static
-from typing import Union
-
-from rich.align import Align
-from rich.console import RenderableType
+from textual.widgets import Static
 from rich.panel import Panel
-from rich.style import Style
-from rich.table import Table
-from rich.text import Text
 
 from diff_driver import DiffDriver
-from ui.figlet_text import FigletText
+
+from ui.header import Header
+from ui.footer import Footer
+from ui.scrollable_area import ScrollableArea
+from ui.diff_area import DiffArea
 
 import argparse
 import sys
 import rich.box
 
-class CustomHeader(Header):
-    """Override the default Header for Styling"""
-
-    def __init__(self) -> None:
-        super().__init__()
-        self.tall = False
-        self.style = Style(color="white", bgcolor="rgb(98,98,98)")
-
-    def render(self) -> Table:
-        header_table = Table.grid(padding=(0, 1), expand=True)
-        header_table.add_column(justify="left", ratio=0, width=8)
-        header_table.add_column("title", justify="center", ratio=1)
-        header_table.add_column("clock", justify="right", width=8)
-        header_table.add_row(
-            "IDD", self.full_title, self.get_clock() if self.clock else ""
-        )
-        return header_table
-
-    async def on_click(self, event: events.Click) -> None:
-        return await super().on_click(event)
-class TDiffFooter(Footer):
-    """Override the default Footer for Styling"""
-
-    def make_key_text(self) -> Text:
-        """Create text containing all the keys."""
-        text = Text(
-            style="white on rgb(98,98,98)",
-            no_wrap=True,
-            overflow="ellipsis",
-            justify="left",
-            end="",
-        )
-        for binding in self.app.bindings.shown_keys:
-            key_display = (
-                binding.key.upper()
-                if binding.key_display is None
-                else binding.key_display
-            )
-            hovered = self.highlight_key == binding.key
-            key_text = Text.assemble(
-                (f" {key_display} ", "reverse" if hovered else "default on default"),
-                f" {binding.description} ",
-                meta={"@click": f"app.press('{binding.key}')", "key": binding.key},
-            )
-            text.append_text(key_text)
-        return text
-class DiffArea(Widget):
-    """The general widget for displaying diff data."""
-
-    value = Reactive("0")
-    widget_title = "title"
-
-    def render(self) -> RenderableType:
-        return Panel(
-                Align.left(FigletText(self.value), vertical="top"),
-                title = self.widget_title,
-                style="white on rgb(51,51,51)"
-            )
-
 class DiffDebug(App):
     current_index: Reactive[int] = Reactive(-1)
     tab_index = ["parallel_command_bar", "base_command_bar", "regressed_command_bar"]
@@ -254,9 +191,9 @@ async def on_mount(self) -> None:
         self.bar.layout_offset_x = -40
         await self.view.dock(self.bar, edge="left", size=40, z=1)
 
-        self.header = CustomHeader()
+        self.header = Header()
         await self.view.dock(self.header, edge="top")
-        await self.view.dock(TDiffFooter(), edge="bottom")
+        await self.view.dock(Footer(), edge="bottom")
         await self.view.dock(self.parallel_command_bar, edge="bottom", size=3)
 
         self.diff_frames1 = DiffArea()

ui/diff_area.py

@@ -0,0 +1,21 @@
+from rich.align import Align
+from rich.console import RenderableType
+from rich.panel import Panel
+
+from textual.reactive import Reactive
+from textual.widget import Widget
+
+from ui.figlet_text import FigletText
+
+class DiffArea(Widget):
+    """The general widget for displaying diff data."""
+
+    value = Reactive("0")
+    widget_title = "title"
+
+    def render(self) -> RenderableType:
+        return Panel(
+                Align.left(FigletText(self.value), vertical="top"),
+                title = self.widget_title,
+                style="white on rgb(51,51,51)"
+            )

ui/figlet_text.py

@@ -10,4 +10,4 @@ def __rich_console__(
         self, console: Console, options: ConsoleOptions
     ) -> RenderResult:
         """Build a Rich renderable to render the Figlet text."""
-        return self.text
+        return self.text

ui/footer.py

@@ -0,0 +1,30 @@
+from rich.text import Text
+
+from textual.widgets import Footer
+
+class Footer(Footer):
+    """Override the default Footer for Styling"""
+
+    def make_key_text(self) -> Text:
+        """Create text containing all the keys."""
+        text = Text(
+            style="white on rgb(98,98,98)",
+            no_wrap=True,
+            overflow="ellipsis",
+            justify="left",
+            end="",
+        )
+        for binding in self.app.bindings.shown_keys:
+            key_display = (
+                binding.key.upper()
+                if binding.key_display is None
+                else binding.key_display
+            )
+            hovered = self.highlight_key == binding.key
+            key_text = Text.assemble(
+                (f" {key_display} ", "reverse" if hovered else "default on default"),
+                f" {binding.description} ",
+                meta={"@click": f"app.press('{binding.key}')", "key": binding.key},
+            )
+            text.append_text(key_text)
+        return text

ui/header.py

@@ -0,0 +1,26 @@
+from rich.style import Style
+from rich.table import Table
+
+from textual.widgets import Header
+from textual import events
+
+class Header(Header):
+    """Override the default Header for Styling"""
+
+    def __init__(self) -> None:
+        super().__init__()
+        self.tall = False
+        self.style = Style(color="white", bgcolor="rgb(98,98,98)")
+
+    def render(self) -> Table:
+        header_table = Table.grid(padding=(0, 1), expand=True)
+        header_table.add_column(justify="left", ratio=0, width=8)
+        header_table.add_column("title", justify="center", ratio=1)
+        header_table.add_column("clock", justify="right", width=8)
+        header_table.add_row(
+            "IDD", self.full_title, self.get_clock() if self.clock else ""
+        )
+        return header_table
+
+    async def on_click(self, event: events.Click) -> None:
+        return await super().on_click(event)

ui/scroll_window.py

@@ -1,4 +1,3 @@
-from rich.text import Text
 from textual.widgets import ScrollView
 
 class ScrollWindow(ScrollView):

ui/scrollable_area.py

@@ -0,0 +1,33 @@
+from textual.reactive import Reactive
+from textual.widgets import Static, ScrollView
+
+class ScrollableArea(ScrollView):
+    """A scrollable view for displaying long text content."""
+
+    content: Reactive[str] = Reactive("")
+
+    def __init__(self, text: str, **kwargs):
+        super().__init__(**kwargs)
+        self.border_title = "border_title"
+        self.content = text
+
+    async def on_mount(self) -> None:
+        """Called when the widget is mounted."""
+        # Add the long text to the scrollable area
+        static = Static(self.content)
+        await self.update(static)
+
+    async def set_text(self, text: str) -> None:
+        """Set the text content of the scrollable area."""
+        self.content = text
+        static = Static(self.content)
+        await self.update(static)
+
+    async def append_text(self, text: str) -> None:
+        """Set the text content of the scrollable area."""
+        self.content += "\n"
+        self.content += text
+        static = Static(self.content)
+        await self.update(static)
+
+        self.window.scroll_y = self.max_scroll_y