Dashboard Layout problems

[jason-but]

Hello

I am developing an Application that acts as a dashboard to monitor the status of all ZPools on a ZFS (file system) enabled system

The dashboard should be a single screen application, with a series of panels for each ZPool on the system

First problem

I have a single class called ZPool, which represents the status of a single pool, that class has three properties that individually return 3 Rich Tables containing the status for display. Why do I use Rich tables:

• App also runs in non-textual mode for a single print and exit
• Textual DataTable did not suit the layout I wanted to use, I could not get it to look how I wanted

I have a class ZPoolPanel, subclassed from Static. This class is supposed to display a single panel to the display. I use three Static() widgets (one for each Rich Table) contained within a VerticalScroll Widget in case there is not enough screen real-estate.

The widget is composed with:

   def compose(self) -> ComposeResult:
        """
        Construct the panel for display by textual.

        Create a scrollable panel (in case we have many ZPools or problems). The panel contains the three tables that will be returned by ZPool for display.

        :return: A ComposeResult iterable that will yield the sub-widgets for the panel.
        """
        with VerticalScroll(classes="zpoolscroller"):
            self._status_table = Static(Table(), id="status_table")
            yield self._status_table

            self._vdevs_table = Static(Table(), id="vdevs_table")
            yield self._vdevs_table

            self._scan_table = Static(Table(), id="scan_table")
            yield self._scan_table

        # Populate the three tables with values from zpool_status
        self._refresh_panel()

The _refresh_panel() method sets the contents of the three Static() widgets within where zpool_data is an instance of ZPool:

    def _refresh_panel(self) -> None:
        """
        Private method to refresh the static widgets for display
        """
        # If panel is still building, just return as we have no data yet
        if not self.zpool_data: return

        # Update panel title
        self.border_title = f'ZPool: {self.zpool_data.poolname}'

        # Retrieve rich Table display from ZPool instance and update the three Static Widgets
        self._status_table.update(self.zpool_data.summary)
        self._vdevs_table.update(self.zpool_data.vdevs)
        self._scan_table.update(self.zpool_data.scan_stats)

There is a watch on the zpool_data member variable so the main application can update the variable to force an update to the display. The watch method also calls _refresh_panel(). _refresh_panel() is also called in compose() as at this stage we have the data to display so we do so

The three tables can vary in size depending on the current state of each ZPool.

This panel works fine, I can display it, I can set a timer in the main app to update the zpool_data variable and manually refresh. There are no problems with the panel

I have a class Dashboard, subclassed from App. This app sets up the main dashboard. Apart from a header and footer, the main screen is a Vertical Container Widget containing 1 or more ZPoolPanel Widgets for display.

The widget is composed with:

   def compose(self) -> ComposeResult:
        """
        Construct the dashboard for display by textual.

        Dashboard consists of a Header (with clock), a footer (with key-bindings), and a Vertical layout that will eventually hold one or more instances of
        a ZPoolPanel widget

        :return: A ComposeResult iterable that will yield the sub-widgets for the dashboard.
        """
        yield Header(id='header', show_clock=True)

        self._body = Vertical(classes='panels')
        yield self._body

        yield Footer(id="footer")

The Vertical Widget is composed as an empty group and stored as a variable so I can add/remove ZPoolPanel Widgets as required.

There is a refresh_panels() method that is called either when a timer expires or manually. The contents are not that important, but the method:

1. Gets updated ZPool data stored as a series of ZPool instances
2. For any ZPool that is not represented by an existing ZPoolPanel
   • ZPoolPanel Widget is created with scanned ZPool data
   • Widget is mounted to self._body (Vertical Container Widget)
3. For any ZPool that is represented by an existing ZPoolPanel
   • Existing ZPoolPanel widget is found
   • Widget zpool_data variable is updated, forcing an update to the Widget which is then refreshed on screen
4. For any ZPoolPanel that represents a ZPool no longer on the system
   • ZPoolPanel Widget is removed from the self._body container and discarded

The app also works fine, Zpools can be added and removed from the system, tasks can be started, and the dashboard continues to display correct, updated, data

My problem lays with the layout on the screen, I cannot get the panels to behave the way I want to with regards to CSS and in particular the space they take on the screen.

All Panels have a CSS style of:

{   
        border: round;               /* Style and colour of border around panel */
        height: auto;                /* Should allow panel to grow as tall as is required */
/*        height: 1fr;                 /* All panels equal height - for testing */
/*        max-height: 20;              /* For testing, set max-height */
        border-title-style: bold;    /* Panel Title font style */ 
        border-title-color: $accent; /* Panel Title text colour */
        padding: 0 1 0 1;            /* Padding between border and Panel content: 1 character at left and right, none at top and bottom */
        margin: 1 0;                 /* Spacing between panels in layout: 1 character between panels */
    }

What I would like to happen is:

1. If it can fit on the screen, all panels should be just big enough to show their information with no extra space inside each panel.
   • If there is only 1 ZPool, it should just be the panel sized as big as needed
   • If there is more than 1 ZPool, each panel may/should have a different size as they need more or less real-estate to display
2. If there is too much data to display, all panels should take:
   • No more real-estate than required to display their status (eg if one panel is rather small)
   • Otherwise, an equal share of the remaining real-estate (each panel has an internal scroll-bar to access all data)

I expected this to happen when I set the Panel CSS height = 'auto'. However in this case, each Panel height is set to the screen height, forcing the second and higher indexed panels off the screen where they cannot be seen.

If I instead set the Panel CSS height = '1fr', each panel takes up an even fraction of the screen. This results in panels being too high (not 'just big enough' to show information with no extra space). When there is not enough real-estate, scroll-bars appear in the panels (good), but some panels have too much white space due to the '1fr' setting and reduce the amount of status that can be seen in other panels

Now that I've explained all this, what do I need to change/set in the CSS (or in the code) to achieve the layout I wish to see?

Second problem

As a secondary problem, I am not sure if there is a problem with the Footer() Widget. I have two key bindings ("up" and "down") mapped to increase and decrease the dashboard refresh period. When I run the application, these bindings appear on the footer with nice directional arrows as guides. This is what I expected.

However, as soon as I use the mouse to click into the app, or I select the ^p palette command, the Footer gets re-arranged and the ("up" and "down") key bindings are no longer displayed. The keys/bindings still work (if I press the up/down arrows), however the instructions no longer appear on the Footer(). All other key-bindings are still displayed on the footer

Thank you in advance

Jason

[willmcgugan]

@jason-but With regards to your layout issue, I would suggest you write a small MRE that shows your current solution. And possibly a simple diagram to show what you would like to happen.

As for your second problem, bindings are shown for focused widgets. If you want your bindings to be active when the widget isn't focused, it belongs on the Screen.

[TomJGooding]

I was only attempting to reduce this to a minimal example, sorry if this wasn't clear:

I thought height: auto; max-height: 1fr; seemed an intuitive solution but that doesn't work unfortunately.

[jason-but]

Perhaps I need to learn to read a bit more slowly rather than jumping in 😃

[TomJGooding]

Perhaps given the wall of text and code you expected people trying to help to wade through.

But is height: auto; max-height: 1fr a reasonable summary for what you're trying to achieve?

[jason-but]

Mostly. - I think

This implies that each panel should grow as big as needed with a max height of 1fr, but a panel should be able to exceed 1fr IF the other panels happen to be smaller than 1fr.

One way to think about it is each panel should be auto, each panel that doesn't fit because auto is too big should then take 1fr of all the the remaining space shared by panels that are not auto

[jason-but]

Any help?