feat[cli]: add scroll for tree encoding view (#5497)

Author: a10y

vortex-tui/src/browse/app.rs

@@ -189,6 +189,9 @@ pub struct AppState<'a> {
     pub layouts_list_state: ListState,
     pub segment_grid_state: SegmentGridState<'a>,
     pub frame_size: Size,
+
+    /// Scroll offset for the encoding tree display in FlatLayout view
+    pub tree_scroll_offset: u16,
 }
 
 impl AppState<'_> {
@@ -214,5 +217,6 @@ pub async fn create_file_app<'a>(path: impl AsRef<Path>) -> VortexResult<AppStat
         layouts_list_state: ListState::default().with_selected(Some(0)),
         segment_grid_state: SegmentGridState::default(),
         frame_size: Size::new(0, 0),
+        tree_scroll_offset: 0,
     })
 }

vortex-tui/src/browse/mod.rs

@@ -9,6 +9,7 @@ use ratatui::DefaultTerminal;
 use ratatui::widgets::ListState;
 use ui::render_app;
 use vortex::error::{VortexExpect, VortexResult};
+use vortex::layout::layouts::flat::FlatVTable;
 
 mod app;
 mod ui;
@@ -58,24 +59,48 @@ fn handle_normal_mode(app: &mut AppState, event: Event) -> HandleResult {
                 // We send the key-up to the list state if we're looking at
                 // the Layouts tab.
                 match app.current_tab {
-                    Tab::Layout => app.layouts_list_state.select_previous(),
+                    Tab::Layout => {
+                        if app.cursor.layout().is::<FlatVTable>() {
+                            app.tree_scroll_offset = app.tree_scroll_offset.saturating_sub(1);
+                        } else {
+                            app.layouts_list_state.select_previous();
+                        }
+                    }
                     Tab::Segments => app.segment_grid_state.scroll_up(10),
                 }
             }
             (KeyCode::Down | KeyCode::Char('j'), _)
             | (KeyCode::Char('n'), KeyModifiers::CONTROL) => match app.current_tab {
-                Tab::Layout => app.layouts_list_state.select_next(),
+                Tab::Layout => {
+                    if app.cursor.layout().is::<FlatVTable>() {
+                        app.tree_scroll_offset = app.tree_scroll_offset.saturating_add(1);
+                    } else {
+                        app.layouts_list_state.select_next();
+                    }
+                }
                 Tab::Segments => app.segment_grid_state.scroll_down(10),
             },
             (KeyCode::PageUp, _) | (KeyCode::Char('v'), KeyModifiers::ALT) => {
                 match app.current_tab {
-                    Tab::Layout => app.layouts_list_state.scroll_up_by(10),
+                    Tab::Layout => {
+                        if app.cursor.layout().is::<FlatVTable>() {
+                            app.tree_scroll_offset = app.tree_scroll_offset.saturating_sub(10);
+                        } else {
+                            app.layouts_list_state.scroll_up_by(10);
+                        }
+                    }
                     Tab::Segments => app.segment_grid_state.scroll_up(100),
                 }
             }
             (KeyCode::PageDown, _) | (KeyCode::Char('v'), KeyModifiers::CONTROL) => {
                 match app.current_tab {
-                    Tab::Layout => app.layouts_list_state.scroll_down_by(10),
+                    Tab::Layout => {
+                        if app.cursor.layout().is::<FlatVTable>() {
+                            app.tree_scroll_offset = app.tree_scroll_offset.saturating_add(10);
+                        } else {
+                            app.layouts_list_state.scroll_down_by(10);
+                        }
+                    }
                     Tab::Segments => app.segment_grid_state.scroll_down(100),
                 }
             }
@@ -93,8 +118,9 @@ fn handle_normal_mode(app: &mut AppState, event: Event) -> HandleResult {
                     let selected = app.layouts_list_state.selected().unwrap_or_default();
                     app.cursor = app.cursor.child(selected);
 
-                    // Reset the list scroll state.
+                    // Reset the list scroll state and tree scroll offset.
                     app.layouts_list_state = ListState::default().with_selected(Some(0));
+                    app.tree_scroll_offset = 0;
                 }
             }
             (KeyCode::Left | KeyCode::Char('h'), _)
@@ -103,8 +129,9 @@ fn handle_normal_mode(app: &mut AppState, event: Event) -> HandleResult {
                     Tab::Layout => {
                         // Ascend back up to the Parent node
                         app.cursor = app.cursor.parent();
-                        // Reset the list scroll state.
+                        // Reset the list scroll state and tree scroll offset.
                         app.layouts_list_state = ListState::default().with_selected(Some(0));
+                        app.tree_scroll_offset = 0;
                     }
                     Tab::Segments => app.segment_grid_state.scroll_left(20),
                 }
@@ -192,8 +219,9 @@ fn handle_search_mode(app: &mut AppState, event: Event) -> HandleResult {
                             }
                         };
 
-                        // Reset the list scroll state.
+                        // Reset the list scroll state and tree scroll offset.
                         app.layouts_list_state = ListState::default().with_selected(Some(0));
+                        app.tree_scroll_offset = 0;
 
                         app.clear_search();
                         // Return to normal mode.

vortex-tui/src/browse/ui/layouts.rs

@@ -191,8 +191,10 @@ fn render_array(app: &AppState<'_>, area: Rect, buf: &mut Buffer, is_stats_table
             .constraints(vec![Constraint::Percentage(70), Constraint::Percentage(30)])
             .split(widget_area);
         let table = Table::new(rows, [Constraint::Min(6), Constraint::Min(6)]).header(header);
-        // Tree-display the active array
-        let tree = Paragraph::new(array.display_tree().to_string()).wrap(Wrap { trim: false });
+        // Tree-display the active array with scroll support
+        let tree = Paragraph::new(array.display_tree().to_string())
+            .wrap(Wrap { trim: false })
+            .scroll((app.tree_scroll_offset, 0));
 
         let stats_container = Block::new()
             .title("Statistics")
@@ -282,7 +284,6 @@ fn render_child_list_items(
     container.render(area, buf);
 
     // Render the List view.
-    // TODO: add state so we can scroll
     StatefulWidget::render(
         List::new(list_items).highlight_style(Style::default().black().on_white().bold()),
         inner_area,