SIDE: Creating a TUI - Terminal-based User Interface

Build a Text User Interface to our database - just for fun

We are going to use mainly two different approaches to interacting and using our database:

• Command line tools (CLI)

• A Terminal-based user interface (TUI)

While not related at all to database development, we will be discussing our interfaces as we go along.

The CLI based ones will be fairly simple and we will seldom discuss them as they are mostly obvious. You can run a simple example on the basic branch by doing uv run example.py. Have a look at the code there.

The TUI ones are another matter because the code is not trivial, and from time to time we will discussing how to create those.

Our TUI interface

Here is how our TUI interface will look for now:

Results on the top and entry on the bottom. A title line above and some help below.

You can run this by doing:

uv run tui.py

Ctrl-Enter will execute the statement and Ctrl-p will bring you to a menu with options.

Remember that the parser is flimsy….

The code is quite simple:

from some import execute_statement
from textual.app import App
[...]

class SomeApp(App):
    CSS = """
    [CSS code removed]
    """

    BINDINGS = [("ctrl+enter", "execute_statement", "Execute statement")]

    def compose(self) -> ComposeResult:
        yield Header()
        with Vertical():
            yield Static("", id="top")
            yield TextArea(id="input")
        yield Footer()

    def action_execute_statement(self) -> None:
        top = self.query_one("#top", Static)
        my_input = self.query_one("#input", TextArea).text
        try:
            result = execute_statement(my_input)
        except Exception as e:
            top.update(f"Error: {e}")
            return
        match type(result):
            case _ if isinstance(result, SomeNone):
                top.update("Executed")
            case _ if isinstance(result, SomeSelectResult):
                top.update(Pretty(result))
            case _:
                top.update(f"Unknown result type: {type(result)}")

We have 4 parts:

1. A CSS styling which I won’t discuss further (have a look at the code)

2. A binding of Ctrl+Enter to a function that will execute a statement

3. A compose function that draws the main components: A static area for the output and a text area for the input

4. A function to execute the statement on the text area. It takes the input text, calls the database function to execute it and displays it on the static area.

This is quite basic and with time I might improve it. But it is hardly the main topic of this substack, so I will only discuss it if there is something that I find really interesting…