UI design proposal

[pcwalton]

Hi everyone,

I've got an initial redesign prototype here: https://github.com/pcwalton/turbowish-mocks

The layout is done using the stretch implementation of flexbox, because I needed more power than the tui interface to Cassowary provided. Emphasis has been place on ease of use and discoverability, with the "obvious" keyboard focus and mouse intended to be supported. The design is responsive, in that it scales down to narrow 80-column terminals fine. The custom widgets are designed in a reusable way—when it's ready, I want to just be able to copy and paste this code in instead of rewriting it.

My next goals are:

• Iterate on feedback!

• Update to match the current tokio-console/turbowish functionality.

• Have a fallback to standard Unicode with common characters when the appropriate icon fonts (nerd fonts/powerline fonts) aren't installed. I think it should look fine without them: for the most part, some of the icons will just disappear and/or become text.

• Get this integrated with the app, once folks are satisfied with it.

Feedback is very welcome! This is early and I'm extremely open to suggestions and comments.

[hawkw]

This looks lovely! It would be great to start integrating this UI with the current implementation.

[carllerche]

This looks really amazing. I don't have any major feedback, just some questions.

• Is the intent to be only a keyboard-based interface (I assume this is still TUI)?
• What are the + signs to the left of task ID? It seems like it expands a node, what would happen then? How would it be triggered?
• What are the arrows on the right of the "performance" box?
• When would one look at the date / time?
• How is the menu expanded?

It looks like it requires special fonts, which is fine. Have you thought of fallback?

Edit: amazing, not amazon.

[pcwalton]

Is the intent to be only a keyboard-based interface (I assume this is still TUI)?

Keyboard and optionally mouse.

What are the + signs to the left of task ID? It seems like it expands a node, what would happen then? How would it be triggered?

I was thinking that this would expand the attribute list to one per line below the task, in case the attributes are too long to fit on screen. Perhaps we could add other task info there too, like a stack trace or something. This would be especially useful for 80 column displays. I was assuming you could trigger it by going to the task and pressing right arrow, space, or Enter.

What are the arrows on the right of the "performance" box?

These would expand the performance pane so that the graphs are larger, again useful for 80-column displays. Maybe they'd be a 2x2 grid. The expanded performance pane would also be where more performance data goes if we add it.

When would one look at the date / time?

I dunno, I wouldn't find it useful, but I noticed that both top and bpytop had clocks at the top, so I added it. Maybe uptime of the binary would be more useful :)

How is the menu expanded?

Enter, Space, Escape (this is a global shortcut for the menu), or clicking on it. I was thinking it would either overlay the center of the app like bpytop's, or perhaps a sidebar. bpytop's ASCII art menu is a little too fancy for my taste and I think it should be simple.

It looks like it requires special fonts, which is fine. Have you thought of fallback?

Yep, fallback is a must, and I've designed it so that it looks good without powerline/nerd fonts. That'll be the next thing I work on.

[pcwalton]

I'm still working on this. Sorry it's been so slow.

[hawkw]

@pcwalton I've been working on bringing the current UI more in line with your proposal. Here's what I've got so far:

[hawkw]

getting closer!