miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(core): prefer vertical layout categorically if there are less tha… (#31221)

Browse Source 
…n 75 characters of width

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

Auto layout is always based on an aspect ratio which lead to horizontal
layout even when there is very little horizontal space.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

Auto layout prefers vertical layout with less than 75 characters of
width which will allow 50 characters (75 * 2/3) for terminal output. It
should be enough to show a URL in most cases:


![image](https://github.com/user-attachments/assets/0804d7ff-02aa-45e1-89f8-bd86b478f88e)

![image](https://github.com/user-attachments/assets/f2f04e3a-c306-4dea-bfca-66052dc28f20)


## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
This commit is contained in:
Jason Jean 2025-05-17 10:24:13 -04:00 committed by GitHub
parent c92b4a3d50
commit fa654c6520
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/nx/src/native/tui/components/layout_manager.rs
View File

@ -400,6 +400,11 @@ impl LayoutManager {
/// - Number of tasks (single task prefers vertical layout)
/// - Minimum dimensions requirements
fn is_vertical_layout_preferred(&self, terminal_width: u16, terminal_height: u16) -> bool {
// Screen is pretty narrow so always prefer vertical layout
if terminal_width < 75 {
return true;
}
// Calculate aspect ratio (width/height)
let aspect_ratio = terminal_width as f32 / terminal_height as f32;
@ -865,6 +870,29 @@ mod tests {
insta::assert_snapshot!(terminal.backend());
}
/// Visual test for narrow screen rendering (width < 75)
#[test]
fn test_visualize_narrow_screen_layout() {
// Create layout with auto mode, which should pick vertical layout for narrow screens
let mut layout_manager = LayoutManager::new(5);
layout_manager.set_mode(LayoutMode::Auto);
layout_manager.set_task_list_visibility(TaskListVisibility::Visible);
layout_manager.set_pane_arrangement(PaneArrangement::Single);
layout_manager.set_task_count(5);
// Test with a narrow screen (width < 75)
let terminal = render_layout(74, 40, &layout_manager);
insta::assert_snapshot!("narrow_screen_layout", terminal.backend());
// Also test with extremely narrow screen
let terminal = render_layout(50, 40, &layout_manager);
insta::assert_snapshot!("extremely_narrow_screen_layout", terminal.backend());
// Also test with slightly narrow screen
let terminal = render_layout(80, 40, &layout_manager);
insta::assert_snapshot!("slightly_narrow_screen_layout", terminal.backend());
}
// These tests will run even without the snapshot feature enabled
// to verify layout calculations are correct

44
packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__extremely_narrow_screen_layout.snap Normal file
View File

@ -0,0 +1,44 @@
---
source: packages/nx/src/native/tui/components/layout_manager.rs
expression: terminal.backend()
---
"┌Task List───────────────────────────────────────┐"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"└────────────────────────────────────────────────┘"
" "
"┌Terminal Pane 1─────────────────────────────────┐"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"└────────────────────────────────────────────────┘"

44
packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__narrow_screen_layout.snap Normal file
View File

@ -0,0 +1,44 @@
---
source: packages/nx/src/native/tui/components/layout_manager.rs
expression: terminal.backend()
---
"┌Task List───────────────────────────────────────────────────────────────┐"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"└────────────────────────────────────────────────────────────────────────┘"
" "
"┌Terminal Pane 1─────────────────────────────────────────────────────────┐"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"│ │"
"└────────────────────────────────────────────────────────────────────────┘"

44
packages/nx/src/native/tui/components/snapshots/nx__native__tui__components__layout_manager__tests__visual_tests__slightly_narrow_screen_layout.snap Normal file
View File

@ -0,0 +1,44 @@
---
source: packages/nx/src/native/tui/components/layout_manager.rs
expression: terminal.backend()
---
"┌Task List───────────────┐ ┌Terminal Pane 1───────────────────────────────────┐"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"│ │ │ │"
"└────────────────────────┘ └──────────────────────────────────────────────────┘"