Add kty to app showcase

[grampelberg]

No description provided.

[joshka]

This seems like the sort of app that would be good to see in the showcase as it has a good amount of interactivity and solves a novel problem.

My subjective criteria for new showcase apps is that they look pretty and are easy to tell what they're doing from just an image. To achieve this, it usually means increasing the text size up from where you'd be in actual usage, reducing the image width to a max of about 1200 pixels, and trying to remove all the extraneous information not critical to seeing how the app works (e.g. running things at the console like scp). It also means giving enough time on each screen to understand it before the view changes.

Right now the text on this is a bit small, the width of the image is a bit wide, and there is a lot of information being shown, some of which seems irrelevant to showing of the main UI, and things move faster than is possible to grok the interface for a person seeing this for the first time.

Lower on the review (and optional / just something to think about), the description of what this does might be worth making about double the length (still short, but long enough to give a small amount of detail about what the app is useful for - the primary use case). The website mentions this provides a dashboad and login with github etc.

There's a few apps in the showcase that don't meet this criteria, so look at the good ones for inspiration not the ones that obviously don't.

In the meantime, let's get this up on https://github.com/ratatui/awesome-ratatui, https://forum.ratatui.rs, and mention it on the #showcase channel on discord if you're on there.

[orhun]

Yup, we need some visuals (that matches the general theme) for adding this to the showcase. Definitely send a PR to the awesome repo though!

[grampelberg]

Here's a potentially better demo. Is this closer to what y'all are looking for? It is huge, but I'm happy to do whatever suggestions you've got to make things smaller. I tried asciinema but the font/color issues are a little stark.

Thank you for the description feedback! I'll add some text about why it is a novel usage of Ratatui (PTY instead of TTY, animations, ....).

[joshka]

Yeah, I wouldn't generally suggest asciinema for that same reason :)

That's looking much neater. The font size is so much more readable. What about reducing the height a bit though? That will bring the input that the user is typing into the app a bit closer to where the main output is. Right now the input is at the bottom, but then the changes that happen are read top to bottom, so when I watch the demo, there's a lot of jumping between top and bottom to work out what's going on. This wouldn't be as big of a problem once you start using the app, because you're oriented to the app's approach, but it feels a bit disorienting when watching a demo, as you're seeing the interactions with the app for the first time. A 4:3 aspect ratio (or 16:9) is often a bit better than 1:1 for this sort of thing. Perhaps scale down to 1200x800, and then adjust the font size by a similar amount to keep the same amount of text.

Something I noticed is that there are quite a few errors shown in the flow. Perhaps focus more on the happy paths when showing off the app.

I'm not sure what the purpose of showing the command line and /etc/hosts is.

The logs page with the blank lines between each line seems a bit weird. Perhaps find a log file that looks a bit nicer without gaps (or suppress blank lines?)

Some random ideas that I think might improve the UI (caveat, I 'm not super familiar with kubernetes, so take this all with a grain of salt):

1. The logs page could do with a scrollbar
2. I noticed that some of the logs have color, if that's coming through from the source logs, it could be nice to find a good looking multi-color log (not sure if you've seen the default tracing-subscriber output, but something like that would look great.)
3. The animation transition feels like it could be a little faster - it seems like it distracts from rather than adds to the demo.
4. Consider making the focused location where the user is typing have some sort of color / border indicator (e.g. make the border thicker and colored with an attention grabbing color like red or orange, or just the bright version of the border color in use)
5. Consider making the top tab bar border link up with the middle bar by changing the borderset to include T junction lines (check the unicode line drawing block) to avoid the gap.
6. Consider putting the keyboard entry consistently at the bottom (e.g. underneath the tunnels)
7. Consider adding a title or status bar line that shows the keyboard shortcuts (maybe less than useful for real world usage, but as a demo it helps orient the user to what might be happening in the demo)

[orhun]

Also a little comment from me, you might consider removing the window controls since mostly we don't have it for the other apps in the showcase as well. Not a biggie though :)

(and damn, that tab switching animation looks sick!)

[joshka]

I was going to say something similar about the window chrome, but this seems like it would be something difficult to script using VHS well because it has live data.

[grampelberg]

I love it when I get good UX suggestions. I've been working on a DAG layout widget ala dot or mermaid to add to the demo and got distracted. Let me go through and implement a bunch of these suggestions and come back. While the data's live, I should still be able to do some scripting with VHS - that's a good thing to test.

I'm not sure what the purpose of showing the command line and /etc/hosts is.

This is actually a shell drawn within the UI itself that is getting served up from a remote container. It isn't providing much value for the purpose of showing off what you can do with Ratatui, so I'll take it out.

Consider adding a title or status bar line that shows the keyboard shortcuts (maybe less than useful for real world usage, but as a demo it helps orient the user to what might be happening in the demo)

You wouldn't happen to have any examples of somewhere this has been done well? VI/emacs have a hidden help page and the folks that put it in your face end up feeling super clunky. I was hoping that the echo'd keypresses at the bottom would be good enough, but maybe not. Does it make sense to have something just for the demo? It feels like it'll take up a decent amount of screen real estate from the visuals.

[kdheepak]

You wouldn't happen to have any examples of somewhere this has been done well?

I don't want to say this is necessarily "done well" here but you can look at crates-tui for some inspiration in this regard - https://github.com/ratatui-org/crates-tui

[joshka]

A few of the examples also have various keyboard shortcut indicators https://github.com/ratatui/ratatui/blob/main/examples/README.md

Mostly I brought it up here as there seems to be a few tabs, panes, and tables in the app. That leads to a somewhat complex navigation approach unless called out specifically. There's a few approaches to this:

1. Status bar with keyboard shortcuts (Tab, Arrows etc.)
2. Title bar
3. Mention h / ? for help somewhere and have a popup with the shortcuts
4. Keyboard shortcuts on the borders of each pane (1,2,3,4 or Ctrl+P, Ctrl+F, ...)

Vim is special because it's a really common tool, so there's a lot of mindshare about how it works in the zeitgeist, that even then has generated many memes about working out how to quit. If you look at a lot of the nvim config frameworks they often come configured with splash screens with a bunch of keyboard shortcuts listed.

[orhun]

@grampelberg a bit off topic here but I'm interested in the tab/toggle switch animation you have in kty. It looks super cool!

Can you point me to some files/snippets so that I can look into re-using it for my project binsider? We can also make it a standalone thing that other apps can use as well, or maybe add it to tachyonfx as an animation :)

[grampelberg]

I'd love to get something that's usable by other folks. Happy to help make that a thing but I'm not sure what the right form is, the way I've done it so far feels extra hacky (this partially goes back to the conversation about having access to the previous buffer off the frame).

Here's the effect: https://github.com/grampelberg/kty/blob/main/src/fx.rs#L70. I've saved off the previous buffer and do a copy from a sub-view of that over the new buffer using ndarray. There's probably something fun that could be used more generally here with transitions and being able to replace parts of the new buffer with an old one conditionally.

Here's where I'm actually using it: https://github.com/grampelberg/kty/blob/main/src/widget/tabs.rs#L161. That whole thing is likely ~10x more complicated than it needs to be, but I was learning as I went.

The view (https://github.com/grampelberg/kty/blob/main/src/widget/view.rs#L80) is probably the most interesting piece of all that. I've got a z-index on every widget and then do layered rendering. That lets me do some of the interesting parts of the effects.

I'm on discord if you wanna chat about it all =)

[orhun]

Hey @grampelberg, thanks for the detailed reply! I just checked the parts you mentioned and they look super interesting although I surely didn't get it all :D Would love to chat more about it sometime on Discord and potentially make it simpler so that adoption on other apps is easier :)

Glad to see that you are using tachyonfx though! I thought it was something custom but now everything makes more sense.