From 329f2ba278473c63e7b8a68ae812d2d8b0c9ce28 Mon Sep 17 00:00:00 2001 From: mscrnt Date: Tue, 27 May 2025 07:52:03 -0700 Subject: [PATCH] Refactor training view layout to use grid for better structure and responsiveness; adjust styles for input elements and containers. --- agentm/theme/styles.base.tcss | 24 +++++++++++-- agentm/theme/styles.tcss | 24 +++++++++++-- agentm/views/training.py | 67 +++++++++++++++++++++-------------- 3 files changed, 84 insertions(+), 31 deletions(-) diff --git a/agentm/theme/styles.base.tcss b/agentm/theme/styles.base.tcss index a8ac9cc..2bda74d 100644 --- a/agentm/theme/styles.base.tcss +++ b/agentm/theme/styles.base.tcss @@ -325,7 +325,8 @@ Button.game_button { } #config_scroll_container { - height: 70vh; + height: 60vh; + width: 100%; /* Ensures full width container */ overflow-y: auto; padding: 1; border-top: solid {{BORDER}}; @@ -346,7 +347,7 @@ Button.game_button { } Input, Select { - width: 100%; + width: auto; min-width: 40; } @@ -360,4 +361,23 @@ Input, Select { layout: horizontal; align-vertical: middle; padding: 0 1; + width: 100%; + height: auto; } + +.input_row > * { + width: 1fr; + padding-right: 1; +} + +.input_row > *:last-child { + padding-right: 0; +} + +#filter_grid { + grid-size: 4; + grid-gutter: 1; + align-horizontal: left; + width: 100%; + padding: 1 2; +} \ No newline at end of file diff --git a/agentm/theme/styles.tcss b/agentm/theme/styles.tcss index 4ddd5e3..c31b434 100644 --- a/agentm/theme/styles.tcss +++ b/agentm/theme/styles.tcss @@ -325,7 +325,8 @@ Button.game_button { } #config_scroll_container { - height: 70vh; + height: 60vh; + width: 100%; /* Ensures full width container */ overflow-y: auto; padding: 1; border-top: solid #3a9bed; @@ -346,7 +347,7 @@ Button.game_button { } Input, Select { - width: 100%; + width: auto; min-width: 40; } @@ -360,4 +361,23 @@ Input, Select { layout: horizontal; align-vertical: middle; padding: 0 1; + width: 100%; + height: auto; } + +.input_row > * { + width: 1fr; + padding-right: 1; +} + +.input_row > *:last-child { + padding-right: 0; +} + +#filter_grid { + grid-size: 4; + grid-gutter: 1; + align-horizontal: left; + width: 100%; + padding: 1 2; +} \ No newline at end of file diff --git a/agentm/views/training.py b/agentm/views/training.py index ebf4845..b8248f5 100644 --- a/agentm/views/training.py +++ b/agentm/views/training.py @@ -84,45 +84,53 @@ class TrainingView(Screen): yield Static(f"[{palette.ACCENT}]{header_text}[/{palette.ACCENT}]", classes="header") - # Build scrollable form content yield VerticalScroll( Vertical( # Framework & Algorithm Static("Framework & Algorithm", classes="section_label"), - Horizontal( - Vertical(Label("Framework"), self.framework_dropdown), - Vertical(Label("Algorithm"), self.algo_dropdown), - classes="input_row" + Grid( + Vertical(Label("Framework"), self.framework_dropdown, classes="input_cell"), + Vertical(Label("Algorithm"), self.algo_dropdown, classes="input_cell"), + classes="input_grid" ), # Model name / num_env Static("Model Configuration", classes="section_label"), - Horizontal( - Vertical(Label("Model Name"), self.model_name_input), - Vertical(Label("Num Envs"), self.num_env_input), - classes="input_row" + Grid( + Vertical(Label("Model Name"), self.model_name_input, classes="input_cell"), + Vertical(Label("Num Envs"), self.num_env_input, classes="input_cell"), + classes="input_grid" ), # General Settings Static("General Settings", classes="section_label"), - *[ - Horizontal(Vertical(Label(k)), v, classes="input_row") - for k, v in self.settings_inputs.items() - ], + Grid( + *[ + Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell") + for k, v in self.settings_inputs.items() + ], + classes="input_grid" + ), # Wrapper Checkboxes Static("Wrapper Flags", classes="section_label"), - *[ - Horizontal(cb, classes="input_row") - for cb in self.wrapper_checkboxes.values() - ], + Grid( + *[ + Vertical(cb, classes="input_cell") + for cb in self.wrapper_checkboxes.values() + ], + classes="input_grid" + ), # Wrapper Inputs - *[ - Horizontal(Vertical(Label(k.replace("_", " ").title())), v, classes="input_row") - for k, v in self.wrapper_inputs.items() - ], + Grid( + *[ + Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell") + for k, v in self.wrapper_inputs.items() + ], + classes="input_grid" + ), # Filter Keys Static("Filter Keys", classes="section_label"), @@ -130,14 +138,20 @@ class TrainingView(Screen): # Policy kwargs Static("Policy Architecture", classes="section_label"), - Horizontal(Label("Net Arch"), self.net_arch_input, classes="input_row"), + Grid( + Vertical(Label("Net Arch"), self.net_arch_input, classes="input_cell"), + classes="input_grid" + ), # PPO Settings Static("PPO Settings", classes="section_label"), - *[ - Horizontal(Label(k.replace("_", " ").title()), v, classes="input_row") - for k, v in self.ppo_inputs.items() - ], + Grid( + *[ + Vertical(Label(k.replace("_", " ").title()), v, classes="input_cell") + for k, v in self.ppo_inputs.items() + ], + classes="input_grid" + ), id="form_layout", classes="form_column" @@ -145,7 +159,6 @@ class TrainingView(Screen): id="config_scroll_container" ) - # Final button and footer yield Button("🔍 Review Config", id="review_config_btn", classes="confirm_button") yield AgentMFooter(compact=True)