Add collapsable sections

src/python/impactx/dashboard/Input/components.py

@@ -17,6 +17,10 @@ def clean_name(section_name):
 class CardBase(UIDefaults):
     HEADER_NAME = "Base Section"
 
+    def __init__(self):
+        self.header = self.HEADER_NAME.lower().replace(" ", "_")
+        self.collapsable = (f"collapse_{self.header}_height",)
+
     def card(self):
         """
         Creates UI content for a section.
@@ -68,9 +72,10 @@ def render_components(position: str):
         with vuetify.VCardTitle(section_name):
             vuetify.VSpacer()
             render_components("start")
-            CardComponents.expand_button(section_name_cleaned)
             CardComponents.refresh_icon(section_name_cleaned)
             CardComponents.documentation_icon(section_name_cleaned)
+            CardComponents.collapse_button(section_name_cleaned)
+            CardComponents.expand_button(section_name_cleaned)
             render_components("end")
         vuetify.VDivider()
 
@@ -126,6 +131,30 @@ def expand_button(section_name: str) -> vuetify.VBtn:
                 v_text=(f"expand_{section_name} ? 'mdi-close' : 'mdi-arrow-expand'",)
             )
 
+    @staticmethod
+    def collapse_button(section_name: str) -> vuetify.VBtn:
+        """
+        A button which collapses the given cards inputs.
+
+        :param section_name: The name for the input section.
+        """
+        section_name_cleaned = clean_name(section_name)
+        collapsed_state_name = f"collapse_{section_name_cleaned}"
+
+        setattr(state, collapsed_state_name, False)
+
+        with vuetify.VBtn(
+            color="primary",
+            click=f"collapse_{section_name_cleaned} = !collapse_{section_name_cleaned}",
+            icon=True,
+            small=True,
+        ):
+            vuetify.VIcon(
+                v_text=(
+                    f"collapse_{section_name_cleaned} ? 'mdi-chevron-down' : 'mdi-chevron-up'",
+                )
+            )
+
 
 class InputComponents:
     """

src/python/impactx/dashboard/Input/csrConfiguration/csrMain.py

@@ -11,7 +11,7 @@ def __init__(self):
         super().__init__()
 
     def card_content(self):
-        with vuetify.VCard():
+        with vuetify.VCard(style=self.collapsable):
             CardComponents.input_header(self.HEADER_NAME)
             with vuetify.VCardText(**self.CARD_TEXT_OVERFLOW):
                 with vuetify.VRow(**self.ROW_STYLE):

src/python/impactx/dashboard/Input/defaults.py

@@ -12,6 +12,13 @@ class DashboardDefaults:
     Defaults for input parameters in the ImpactX dashboard.
     """
 
+    COLLAPSABLE_SECTIONS = [
+        "collapse_input_parameters",
+        "collapse_csr",
+        "collapse_distribution_parameters",
+        "collapse_space_charge",
+        "collapse_lattice_configuration",
+    ]
     # -------------------------------------------------------------------------
     # Inputs by section
     # -------------------------------------------------------------------------

src/python/impactx/dashboard/Input/distributionParameters/distributionMain.py

@@ -181,7 +181,7 @@ def card_content(self):
         """
         Creates UI content for beam distribution.
         """
-        with vuetify.VCard():
+        with vuetify.VCard(style=self.collapsable):
             CardComponents.input_header(self.HEADER_NAME)
             with vuetify.VCardText(**self.CARD_TEXT_OVERFLOW):
                 with vuetify.VRow(**self.ROW_STYLE):

src/python/impactx/dashboard/Input/inputParameters/inputMain.py

@@ -29,7 +29,7 @@ def on_kin_energy_unit_change(**kwargs) -> None:
             InputFunctions.update_kin_energy_sim_value()
 
     def card_content(self):
-        with vuetify.VCard():
+        with vuetify.VCard(style=self.collapsable):
             CardComponents.input_header(self.HEADER_NAME)
             with vuetify.VCardText(**self.CARD_TEXT_OVERFLOW):
                 with vuetify.VRow(**self.ROW_STYLE):

src/python/impactx/dashboard/Input/latticeConfiguration/latticeMain.py

@@ -239,7 +239,7 @@ def init_settings_dialog(self):
 
     def card_content(self):
         self.init_settings_dialog()
-        with vuetify.VCard():
+        with vuetify.VCard(style=self.collapsable):
             CardComponents.input_header(
                 self.HEADER_NAME,
                 additional_components={

src/python/impactx/dashboard/Input/shared.py

@@ -39,3 +39,24 @@ def on_input_state_change(**_):
                         setattr(state, state_name, converted_value)
                         if state_name == "kin_energy_on_ui":
                             InputParameters.on_kin_energy_unit_change()
+
+    @state.change(*DashboardDefaults.COLLAPSABLE_SECTIONS)
+    def on_collapsable_section_change(**kwargs):
+        max_height = "1000px"
+        min_height = "64px"
+
+        state_changes = state.modified_keys & set(
+            DashboardDefaults.COLLAPSABLE_SECTIONS
+        )
+        for state_name in state_changes:
+            new_height = min_height if getattr(state, state_name) else max_height
+
+            setattr(
+                state,
+                f"{state_name}_height",
+                {
+                    "max-height": new_height,
+                    "overflow": "hidden",
+                    "transition": "max-height 0.5s",
+                },
+            )

src/python/impactx/dashboard/Input/space_charge_configuration/spaceChargeMain.py

@@ -183,7 +183,7 @@ def card_content(self):
         ):
             SpaceChargeConfiguration.dialog_settings()
 
-        with vuetify.VCard():
+        with vuetify.VCard(style=self.collapsable):
             CardComponents.input_header(
                 self.HEADER_NAME, additional_components={"start": multigrid_settings}
             )