Introduce new help view to display information on any view #243

bIgBV · 2021-12-25T01:51:14Z

As a part of addressing #225 , I'm introducing a new floating pane which can show information relevant to the current in focus pane. This can include shortcuts, key bindings and glossary information when using symbols and emojis..

bIgBV · 2021-12-25T01:58:47Z

console/src/view/mod.rs

@@ -164,6 +171,17 @@ impl View {
                    }
                }
            }
+            _ => {


Just realized that this is unreachable. I guess I will have to create a new ViewState state to indicate that the help state is present. I think as long as I store what the previous state was, I can go back to it when esc (or any other key) is pressed.

bIgBV · 2021-12-28T04:45:35Z

Does anyone have thoughts on what the contents of the help popup should be in different views? For now I'm working on the mechanism to pump the information from the view to the popup. This is what it looks like currently:

hawkw · 2021-12-28T18:44:30Z

@bIgBV this is awesome, thanks for working on this!

As for what should be displayed in the help text:

I think we should probably display the controls for the current view, even though they're also displayed in the header...perhaps once the help text feature is merged, we should consider hiding the controls from the header by default, and just display what key is needed to open the help text?
It could be useful to explain the meanings of different emojis/symbols in the current view?
Eventually, the same popup system could maybe be used for displaying detailed descriptions of warnings, but that's something we would add later (since we don't have a system for associating help with warnings yet...)

bIgBV · 2021-12-28T19:32:21Z

I think including the controls and what the symbols mean in a given page in the popup would be a good start.
And I love the idea of displaying the meaning behind/expanding on warnings in the future. And it should be fairly straightforward to extend this to perform that function.

bIgBV · 2021-12-29T22:03:18Z

console/src/view/help.rs

+            .margin(0);
+
+        let content_area = content_layout
+            .constraints([layout::Constraint::Length(height)])


I wanted to create an area within the popup to render the text into, which would be responsive, but doing it like this doesn't seem to be working.

what isn't working, exactly? is the problem that the text isn't wrapping?

hawkw · 2021-12-29T22:13:52Z

console/src/view/help.rs

+            .constraints([layout::Constraint::Length(height)])
+            .split(popup_area)[0];
+
+        let display_text = Paragraph::new(content).block(styles.border_block().title("Help"));


if you want the text to wrap, you need to call .wrap() on the Paragraph:

Suggested change

let display_text = Paragraph::new(content).block(styles.border_block().title("Help"));

let display_text = Paragraph::new(content)

.block(styles.border_block().title("Help"))

.wrap(Wrap { trim: true });

This was exactly what I was looking for. Thanks!

bIgBV · 2022-01-04T20:58:58Z

@hawkw got the text in the help popup to wrap properly (thanks again for the suggestion).

I also updated the text in the detail views to be (slightly) less generic. I think this is in a good place to be merged and I could separately open a new PR once we finalize the content of the help text for different views.

hawkw · 2022-03-09T17:16:29Z

@bIgBV sorry it took me so long to look at this, I'd really like to actually give it a review now. It looks like this branch is now out of date with main, can I get you to rebase or merge main?

We want to display the help popop in the current view, no matter whichever it might be. This is because we might have distinct help infomation per view. Therefore, the help view being displayed is unrelated to any state in which the console as a whole is. We handle this by separating the rendering of the help popup from the state of the application.

For now I just copied the controls sections in the table for this.

bIgBV · 2022-03-12T19:09:33Z

@hawkw no worries. I just rebased this branch on top of main.

hawkw

Sorry it took me such a long time to review this, but it looks like a good start. I had some small suggestions.

Thanks for working on this! If you no longer have the time to continue working on it, I could make the remaining suggested changes myself and go ahead and merge this branch. Let me know if you'd like that. Thanks again!

hawkw · 2022-04-21T17:02:46Z

tokio-console/src/view/help.rs

+        let content = self
+            .help_text
+            .take()
+            .expect("help_text should be initialized")
+            .into();


it's kind of weird to me that help_text is an Option that we have to take here? Is there a reason the render method has to take an &mut self? It could just take self --- this isn't a trait method or anything.

hawkw · 2022-04-21T17:03:31Z

tokio-console/src/view/help.rs

+        _area: layout::Rect,
+        _state: &mut State,


is there a reason this has these arguments, when it doesn't use them? since this isn't a trait method, I think we should just not take these arguments just because they are passed to other views' render methods.

Suggested change

_area: layout::Rect,

_state: &mut State,

hawkw · 2022-04-21T17:03:48Z

tokio-console/src/view/mod.rs

@@ -168,32 +177,56 @@ impl View {
        update_kind
    }

+    fn handl_help_popup(&mut self, event: crossterm::event::Event) {


typo: should probably be

Suggested change

fn handl_help_popup(&mut self, event: crossterm::event::Event) {

fn handle_help_popup(&mut self, event: crossterm::event::Event) {

hawkw · 2022-04-21T17:05:44Z

tokio-console/src/view/mod.rs

+        }
+        if self.show_help_toggle && !input::is_help_toggle(&event) {


nit, take it or leave it: if we used if ... else if, we could avoid the second call to input::is_help_toggle:

Suggested change

}

if self.show_help_toggle && !input::is_help_toggle(&event) {

} else if self.show_help_toggle {

hawkw · 2022-04-21T17:05:55Z

tokio-console/src/view/mod.rs

@@ -168,32 +177,56 @@ impl View {
        update_kind
    }

+    fn handl_help_popup(&mut self, event: crossterm::event::Event) {
+        if input::is_help_toggle(&event) {
+            // TODO: Pause state if we are about to show the help toggle


we should probably do this before merging?

hawkw · 2022-04-21T17:08:21Z

tokio-console/src/view/mod.rs

+                help_content = HelpView::new(TableListState::<TasksTable>::render_help_content(
+                    &self.styles,
+                ));
            }
            ViewState::ResourcesList => {
                self.resources_list
                    .render(&self.styles, frame, area, state, ());
+                help_content = HelpView::new(
+                    TableListState::<ResourcesTable>::render_help_content(&self.styles),
+                );
            }
            ViewState::TaskInstance(ref mut view) => {
                let now = state
                    .last_updated_at()
                    .expect("task view implies we've received an update");
                view.render(&self.styles, frame, area, now);
+                help_content = HelpView::new(TaskView::render_help_content(&self.styles));
            }
            ViewState::ResourceInstance(ref mut view) => {
                view.render(&self.styles, frame, area, state);
+                help_content = HelpView::new(ResourceView::render_help_content(&self.styles));


I notice that this will construct the help content for each view every time we render a screen, even if we're not showing the help window. That seems a little bit inefficient, since we have to allocate a big vec and a bunch of strings.

I think it might be more efficient to add a second match self.state inside of the if self.show_help_toggle box, and only build the help text if we are actually going to display a help box. That might make the method a bit longer, but I think it's worth doing to avoid having to format the help text when we're not going to display it...

hawkw · 2022-04-21T17:08:43Z

tokio-console/src/view/task.rs

@@ -267,6 +267,10 @@ impl TaskView {
        frame.render_widget(fields_widget, fields_area);
        frame.render_widget(percentiles_widget, percentiles_area);
    }
+
+    pub(in crate::view) fn render_help_content(_styles: &view::Styles) -> Spans<'static> {
+        Spans::from(vec![Span::raw("A view to diplay help data for a task")])


should this also include controls?

hawkw · 2022-04-30T16:32:09Z

@bIgBV quick ping — still interested in working on this?

bIgBV · 2022-05-11T22:29:01Z

@hawkw I completely missed my notifications on this. While I'm still interested in working on this, my job has kept me pretty busy, and will keep doing so for the next couple of weeks. So if you can pull in my changes and add the ones you suggested on top of that, please go for it!

erwanor · 2022-09-21T13:19:51Z

@bIgBV Hey, would you feel comfortable giving me write access to your fork repo ("Adding contributors" in settings). Otherwise, I'd need to start a fork from scratch and apply your changes etc. which might get a bit gnarly, and we'd lose this convo history.

bIgBV · 2022-09-22T18:56:21Z

@erwanor I've sent you an invitation.

@bIgBV

Adds a help modal which is available on every view. The help help modal can be accessed by pressing `?` and overlays the current view. To leave the help modal, the user can press `?` or `Esc`. This PR is based on #243 originally authored by @bIgBV. The previous PR has been dormant for around a year. Currently the help modal only displays a vertical list of controls. This is the same information that is available in the controls widget on each view. Here is an example of the tasks view with the help view modal active: ```text connection: http://localhost:6669/ (CONNECTED) views: t = tasks, r = resources controls: select column (sort) = ←→ or h, l, scroll = ↑↓ or k, j, view details = ↵, invert sort (highest/lowest) = i, scroll to top = gg, scroll to bottom╭Help──────────────────────────────────────────╮t = q ╭Warnings───────│controls: │───────────────╮ │⚠ 1 tasks have │ select column (sort) = ←→ or h, l │ │ ╰───────────────│ scroll = ↑↓ or k, j │───────────────╯ ╭Tasks (12) ▶ Ru│ view details = ↵ │───────────────╮ │Warn ID State│ invert sort (highest/lowest) = i │t Location│ │ 19 ▶ │ scroll to top = gg │::task console-│ │ 22 ⏸ │ scroll to bottom = G │::task console-│ │⚠ 1 23 ⏸ │ toggle pause = space │::task console-│ │ 24 ⏸ │ toggle help = ? │::task console-│ │ 25 ⏸ │ quit = q │::task console-│ │ 74 ⏹ │ │::task console-│ │ 75 ⏸ │ │::task console-│ │ 77 ⏸ │ │::task console-│ │ 78 ⏸ ╰──────────────────────────────────────────────╯::task console-│ │ 79 ⏹ wait 11s 4ms 56µs 11s 2 tokio::task console-│ ╰──────────────────────────────────────────────────────────────────────────────╯ ``` However, the idea is that the help modal can provide contextual information depending on the view and the state of the application being observed. This will allow us to provide more details about any lints which are currently triggering and also to reduce the height of the current controls widget to just one line (perhaps optionally) as the full list of controls can be accessed from the help view. Co-authored-by: bIgBV <[email protected]>

@bIgBV

Adds a help modal which is available on every view. The help help modal can be accessed by pressing `?` and overlays the current view. To leave the help modal, the user can press `?` or `Esc`. This PR is based on #243 originally authored by @bIgBV. The previous PR has been dormant for around a year. Currently the help modal only displays a vertical list of controls. This is the same information that is available in the controls widget on each view. Here is an example of the tasks view with the help view modal active: ```text connection: http://localhost:6669/ (CONNECTED) views: t = tasks, r = resources controls: select column (sort) = ←→ or h, l, scroll = ↑↓ or k, j, view details = ↵, invert sort (highest/lowest) = i, scroll to top = gg, scroll to bottom╭Help──────────────────────────────────────────╮t = q ╭Warnings───────│controls: │───────────────╮ │⚠ 1 tasks have │ select column (sort) = ←→ or h, l │ │ ╰───────────────│ scroll = ↑↓ or k, j │───────────────╯ ╭Tasks (12) ▶ Ru│ view details = ↵ │───────────────╮ │Warn ID State│ invert sort (highest/lowest) = i │t Location│ │ 19 ▶ │ scroll to top = gg │::task console-│ │ 22 ⏸ │ scroll to bottom = G │::task console-│ │⚠ 1 23 ⏸ │ toggle pause = space │::task console-│ │ 24 ⏸ │ toggle help = ? │::task console-│ │ 25 ⏸ │ quit = q │::task console-│ │ 74 ⏹ │ │::task console-│ │ 75 ⏸ │ │::task console-│ │ 77 ⏸ │ │::task console-│ │ 78 ⏸ ╰──────────────────────────────────────────────╯::task console-│ │ 79 ⏹ wait 11s 4ms 56µs 11s 2 tokio::task console-│ ╰──────────────────────────────────────────────────────────────────────────────╯ ``` However, the idea is that the help modal can provide contextual information depending on the view and the state of the application being observed. This will allow us to provide more details about any lints which are currently triggering and also to reduce the height of the current controls widget to just one line (perhaps optionally) as the full list of controls can be accessed from the help view. Co-authored-by: bIgBV <[email protected]>

@bIgBV

Adds a help modal which is available on every view. The help help modal can be accessed by pressing `?` and overlays the current view. To leave the help modal, the user can press `?` or `Esc`. This PR is based on #243 originally authored by @bIgBV. The previous PR has been dormant for around a year. Currently the help modal only displays a vertical list of controls. This is the same information that is available in the controls widget on each view. Here is an example of the tasks view with the help view modal active: ```text connection: http://localhost:6669/ (CONNECTED) views: t = tasks, r = resources controls: select column (sort) = ←→ or h, l, scroll = ↑↓ or k, j, view details = ↵, invert sort (highest/lowest) = i, scroll to top = gg, scroll to bottom╭Help──────────────────────────────────────────╮t = q ╭Warnings───────│controls: │───────────────╮ │⚠ 1 tasks have │ select column (sort) = ←→ or h, l │ │ ╰───────────────│ scroll = ↑↓ or k, j │───────────────╯ ╭Tasks (12) ▶ Ru│ view details = ↵ │───────────────╮ │Warn ID State│ invert sort (highest/lowest) = i │t Location│ │ 19 ▶ │ scroll to top = gg │::task console-│ │ 22 ⏸ │ scroll to bottom = G │::task console-│ │⚠ 1 23 ⏸ │ toggle pause = space │::task console-│ │ 24 ⏸ │ toggle help = ? │::task console-│ │ 25 ⏸ │ quit = q │::task console-│ │ 74 ⏹ │ │::task console-│ │ 75 ⏸ │ │::task console-│ │ 77 ⏸ │ │::task console-│ │ 78 ⏸ ╰──────────────────────────────────────────────╯::task console-│ │ 79 ⏹ wait 11s 4ms 56µs 11s 2 tokio::task console-│ ╰──────────────────────────────────────────────────────────────────────────────╯ ``` However, the idea is that the help modal can provide contextual information depending on the view and the state of the application being observed. This will allow us to provide more details about any lints which are currently triggering and also to reduce the height of the current controls widget to just one line (perhaps optionally) as the full list of controls can be accessed from the help view. Co-authored-by: bIgBV <[email protected]>

@bIgBV

Adds a help modal which is available on every view. The help help modal can be accessed by pressing `?` and overlays the current view. To leave the help modal, the user can press `?` or `Esc`. This PR is based on #243 originally authored by @bIgBV. The previous PR has been dormant for around a year. Currently the help modal only displays a vertical list of controls. This is the same information that is available in the controls widget on each view. Here is an example of the tasks view with the help view modal active: ```text connection: http://localhost:6669/ (CONNECTED) views: t = tasks, r = resources controls: select column (sort) = ←→ or h, l, scroll = ↑↓ or k, j, view details = ↵, invert sort (highest/lowest) = i, scroll to top = gg, scroll to bottom╭Help──────────────────────────────────────────╮t = q ╭Warnings───────│controls: │───────────────╮ │⚠ 1 tasks have │ select column (sort) = ←→ or h, l │ │ ╰───────────────│ scroll = ↑↓ or k, j │───────────────╯ ╭Tasks (12) ▶ Ru│ view details = ↵ │───────────────╮ │Warn ID State│ invert sort (highest/lowest) = i │t Location│ │ 19 ▶ │ scroll to top = gg │::task console-│ │ 22 ⏸ │ scroll to bottom = G │::task console-│ │⚠ 1 23 ⏸ │ toggle pause = space │::task console-│ │ 24 ⏸ │ toggle help = ? │::task console-│ │ 25 ⏸ │ quit = q │::task console-│ │ 74 ⏹ │ │::task console-│ │ 75 ⏸ │ │::task console-│ │ 77 ⏸ │ │::task console-│ │ 78 ⏸ ╰──────────────────────────────────────────────╯::task console-│ │ 79 ⏹ wait 11s 4ms 56µs 11s 2 tokio::task console-│ ╰──────────────────────────────────────────────────────────────────────────────╯ ``` However, the idea is that the help modal can provide contextual information depending on the view and the state of the application being observed. This will allow us to provide more details about any lints which are currently triggering and also to reduce the height of the current controls widget to just one line (perhaps optionally) as the full list of controls can be accessed from the help view. Co-authored-by: bIgBV <[email protected]>

@bIgBV

Adds a help modal which is available on every view. The help help modal can be accessed by pressing `?` and overlays the current view. To leave the help modal, the user can press `?` or `Esc`. This PR is based on #243 originally authored by @bIgBV. The previous PR has been dormant for around a year. Currently the help modal only displays a vertical list of controls. This is the same information that is available in the controls widget on each view. Here is an example of the tasks view with the help view modal active: ```text connection: http://localhost:6669/ (CONNECTED) views: t = tasks, r = resources controls: select column (sort) = ←→ or h, l, scroll = ↑↓ or k, j, view details = ↵, invert sort (highest/lowest) = i, scroll to top = gg, scroll to bottom╭Help──────────────────────────────────────────╮t = q ╭Warnings───────│controls: │───────────────╮ │⚠ 1 tasks have │ select column (sort) = ←→ or h, l │ │ ╰───────────────│ scroll = ↑↓ or k, j │───────────────╯ ╭Tasks (12) ▶ Ru│ view details = ↵ │───────────────╮ │Warn ID State│ invert sort (highest/lowest) = i │t Location│ │ 19 ▶ │ scroll to top = gg │::task console-│ │ 22 ⏸ │ scroll to bottom = G │::task console-│ │⚠ 1 23 ⏸ │ toggle pause = space │::task console-│ │ 24 ⏸ │ toggle help = ? │::task console-│ │ 25 ⏸ │ quit = q │::task console-│ │ 74 ⏹ │ │::task console-│ │ 75 ⏸ │ │::task console-│ │ 77 ⏸ │ │::task console-│ │ 78 ⏸ ╰──────────────────────────────────────────────╯::task console-│ │ 79 ⏹ wait 11s 4ms 56µs 11s 2 tokio::task console-│ ╰──────────────────────────────────────────────────────────────────────────────╯ ``` However, the idea is that the help modal can provide contextual information depending on the view and the state of the application being observed. This will allow us to provide more details about any lints which are currently triggering and also to reduce the height of the current controls widget to just one line (perhaps optionally) as the full list of controls can be accessed from the help view. Co-authored-by: bIgBV <[email protected]>

@bIgBV

Adds a help modal which is available on every view. The help help modal can be accessed by pressing `?` and overlays the current view. To leave the help modal, the user can press `?` or `Esc`. This PR is based on #243 originally authored by @bIgBV. The previous PR has been dormant for around a year. Currently the help modal only displays a vertical list of controls. This is the same information that is available in the controls widget on each view. Here is an example of the tasks view with the help view modal active: ```text connection: http://localhost:6669/ (CONNECTED) views: t = tasks, r = resources controls: select column (sort) = ←→ or h, l, scroll = ↑↓ or k, j, view details = ↵, invert sort (highest/lowest) = i, scroll to top = gg, scroll to bottom╭Help──────────────────────────────────────────╮t = q ╭Warnings───────│controls: │───────────────╮ │⚠ 1 tasks have │ select column (sort) = ←→ or h, l │ │ ╰───────────────│ scroll = ↑↓ or k, j │───────────────╯ ╭Tasks (12) ▶ Ru│ view details = ↵ │───────────────╮ │Warn ID State│ invert sort (highest/lowest) = i │t Location│ │ 19 ▶ │ scroll to top = gg │::task console-│ │ 22 ⏸ │ scroll to bottom = G │::task console-│ │⚠ 1 23 ⏸ │ toggle pause = space │::task console-│ │ 24 ⏸ │ toggle help = ? │::task console-│ │ 25 ⏸ │ quit = q │::task console-│ │ 74 ⏹ │ │::task console-│ │ 75 ⏸ │ │::task console-│ │ 77 ⏸ │ │::task console-│ │ 78 ⏸ ╰──────────────────────────────────────────────╯::task console-│ │ 79 ⏹ wait 11s 4ms 56µs 11s 2 tokio::task console-│ ╰──────────────────────────────────────────────────────────────────────────────╯ ``` However, the idea is that the help modal can provide contextual information depending on the view and the state of the application being observed. This will allow us to provide more details about any lints which are currently triggering and also to reduce the height of the current controls widget to just one line (perhaps optionally) as the full list of controls can be accessed from the help view. Co-authored-by: bIgBV <[email protected]>

hds · 2023-08-29T10:02:27Z

As no further progress had been made on this PR, a new one was opened (#432) inspired by it and has now been merged.

bIgBV commented Dec 25, 2021

View reviewed changes

bIgBV changed the title ~~Introduce new help view to display information on any view~~ [WIP] Introduce new help view to display information on any view Dec 25, 2021

bIgBV commented Dec 29, 2021

View reviewed changes

hawkw reviewed Dec 29, 2021

View reviewed changes

bIgBV marked this pull request as ready for review January 4, 2022 20:59

bIgBV changed the title ~~[WIP] Introduce new help view to display information on any view~~ Introduce new help view to display information on any view Jan 8, 2022

hawkw force-pushed the main branch from 5ba3f94 to 25b80ce Compare January 18, 2022 22:55

bIgBV added 5 commits March 12, 2022 11:06

Introduce new help view to display information on any view

355fb42

Plump help content into popup modal.

31d98b6

For now I just copied the controls sections in the table for this.

Try to make poup are responsive

5125874

Properly wrap content in help popup

826487e

bIgBV force-pushed the help-view branch from 3d23e4d to 826487e Compare March 12, 2022 19:08

bIgBV requested a review from a team as a code owner March 12, 2022 19:08

Merge branch 'main' into help-view

3d91fe3

hawkw requested changes Apr 21, 2022

View reviewed changes

hawkw mentioned this pull request Apr 30, 2022

console: document views #341

Open

hds mentioned this pull request May 31, 2023

feat(console): help view modal #429

Closed

hds mentioned this pull request Jun 6, 2023

feat(console): help view modal #432

Merged

hds closed this Aug 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce new help view to display information on any view #243

Introduce new help view to display information on any view #243

bIgBV commented Dec 25, 2021

bIgBV Dec 25, 2021

bIgBV commented Dec 28, 2021 •

edited

Loading

hawkw commented Dec 28, 2021

bIgBV commented Dec 28, 2021

bIgBV Dec 29, 2021

hawkw Dec 29, 2021

hawkw Dec 29, 2021

bIgBV Jan 4, 2022

bIgBV commented Jan 4, 2022

hawkw commented Mar 9, 2022

bIgBV commented Mar 12, 2022

hawkw left a comment

hawkw Apr 21, 2022

hawkw Apr 21, 2022

hawkw Apr 21, 2022

hawkw Apr 21, 2022

hawkw Apr 21, 2022

hawkw Apr 21, 2022

hawkw Apr 21, 2022

hawkw commented Apr 30, 2022

bIgBV commented May 11, 2022

erwanor commented Sep 21, 2022

bIgBV commented Sep 22, 2022

hds commented Aug 29, 2023

@@ @@ -164,6 +171,17 @@ impl View { @@
                                   }
                               }
                           }
+                          _ => {

	fn handl_help_popup(&mut self, event: crossterm::event::Event) {
	fn handle_help_popup(&mut self, event: crossterm::event::Event) {

		}
		if self.show_help_toggle && !input::is_help_toggle(&event) {

	}
	if self.show_help_toggle && !input::is_help_toggle(&event) {
	} else if self.show_help_toggle {

Introduce new help view to display information on any view #243

Introduce new help view to display information on any view #243

Conversation

bIgBV commented Dec 25, 2021

Choose a reason for hiding this comment

bIgBV commented Dec 28, 2021 • edited Loading

hawkw commented Dec 28, 2021

bIgBV commented Dec 28, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bIgBV commented Jan 4, 2022

hawkw commented Mar 9, 2022

bIgBV commented Mar 12, 2022

hawkw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hawkw commented Apr 30, 2022

bIgBV commented May 11, 2022

erwanor commented Sep 21, 2022

bIgBV commented Sep 22, 2022

hds commented Aug 29, 2023

bIgBV commented Dec 28, 2021 •

edited

Loading