Dashboard: Improve UI for Inputs

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

@@ -1,11 +1,12 @@
-from .components import CardComponents, InputComponents, NavigationComponents
+from .components import CardBase, CardComponents, InputComponents, NavigationComponents
 from .defaults import DashboardDefaults
 from .generalFunctions import generalFunctions
 
 __all__ = [
-    "InputComponents",
     "CardComponents",
     "DashboardDefaults",
-    "NavigationComponents",
     "generalFunctions",
+    "InputComponents",
+    "NavigationComponents",
+    "CardBase",
 ]

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

@@ -9,7 +9,7 @@
 from typing import Optional
 
 from .. import html, setup_server, vuetify
-from .defaults import TooltipDefaults
+from .defaults import TooltipDefaults, UIDefaults
 from .generalFunctions import generalFunctions
 
 server, state, ctrl = setup_server()
@@ -18,6 +18,45 @@
 state.documentation_url = ""
 
 
+def clean_name(section_name):
+    return section_name.lower().replace(" ", "_")
+
+
+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.
+        """
+
+        self.init_dialog(self.HEADER_NAME, self.card_content)
+        self.card_content()
+
+    def card_content(self):
+        raise NotImplementedError("Card must contain card_content.")
+
+    @staticmethod
+    def init_dialog(section_name: str, content_callback) -> None:
+        """
+        Renders the expansion dialog UI for the input sections card.
+        Only runs once, when the section's card is built.
+        """
+
+        section_name_cleaned = clean_name(section_name)
+        expand_state_name = f"expand_{section_name_cleaned}"
+
+        setattr(state, expand_state_name, False)
+
+        with vuetify.VDialog(v_model=(expand_state_name,), width="fit-content"):
+            with vuetify.VCard():
+                content_callback()
+
+
 class CardComponents:
     """
     Class contains staticmethods to build
@@ -32,42 +71,97 @@ def input_header(section_name: str, additional_components=None) -> None:
         :param section_name: The name for the input section.
         """
 
-        documentation_name = section_name.lower().replace(" ", "_")
+        section_name_cleaned = clean_name(section_name)
+
+        def render_components(position: str):
+            if additional_components and position in additional_components:
+                additional_components[position]()
+
         with vuetify.VCardTitle(section_name):
             vuetify.VSpacer()
-            if additional_components:
-                additional_components()
-            CardComponents.refresh_icon(documentation_name)
-            CardComponents.documentation_icon(documentation_name)
+            render_components("start")
+            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()
 
     @staticmethod
-    def documentation_icon(section_name: str) -> vuetify.VIcon:
+    def documentation_icon(section_name: str) -> vuetify.VBtn:
         """
         Takes user to input section's documentation.
 
         :param section_name: The name for the input section.
         """
 
-        return vuetify.VIcon(
-            "mdi-information",
+        with vuetify.VBtn(
             style="color: #00313C;",
             click=lambda: generalFunctions.open_documentation(section_name),
-        )
+            icon=True,
+            small=True,
+        ):
+            vuetify.VIcon(
+                "mdi-information",
+            )
 
     @staticmethod
-    def refresh_icon(section_name: str) -> vuetify.VIcon:
+    def refresh_icon(section_name: str) -> vuetify.VBtn:
         """
         Resets input values to default.
 
         :param section_name: The name for the input section.
         """
 
-        return vuetify.VIcon(
-            "mdi-refresh",
+        with vuetify.VBtn(
             style="color: #00313C;",
             click=lambda: generalFunctions.reset_inputs(section_name),
-        )
+            icon=True,
+            small=True,
+        ):
+            vuetify.VIcon("mdi-refresh")
+
+    @staticmethod
+    def expand_button(section_name: str) -> vuetify.VBtn:
+        """
+        A button which expands/closes the given card configuration.
+
+        :param section_name: The name for the input section.
+        """
+
+        with vuetify.VBtn(
+            color="primary",
+            click=f"expand_{section_name} = !expand_{section_name}",
+            icon=True,
+            small=True,
+        ):
+            vuetify.VIcon(
+                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

@@ -7,28 +7,28 @@
 """
 
 from ... import setup_server, vuetify
-from .. import CardComponents, InputComponents
+from .. import CardBase, CardComponents, InputComponents
 
 server, state, ctrl = setup_server()
 
 
-class csrConfiguration:
-    @staticmethod
-    def card():
-        """
-        Creates UI content for CSR.
-        """
+class csrConfiguration(CardBase):
+    HEADER_NAME = "CSR"
 
-        with vuetify.VCard(v_show="csr", style="width: 170px;"):
-            CardComponents.input_header("CSR")
-            with vuetify.VCardText():
-                with vuetify.VRow(classes="my-0"):
-                    with vuetify.VCol(classes="py-0"):
+    def __init__(self):
+        super().__init__()
+
+    def card_content(self):
+        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):
+                    with vuetify.VCol():
                         InputComponents.select(
                             label="Particle Shape",
                         )
-                with vuetify.VRow(classes="my-0"):
-                    with vuetify.VCol(classes="py-0"):
+                with vuetify.VRow(**self.ROW_STYLE):
+                    with vuetify.VCol():
                         InputComponents.text_field(
                             label="CSR Bins",
                         )

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

@@ -8,14 +8,24 @@
 
 from impactx.impactx_pybind import ImpactX, RefPart
 
+from .. import setup_server
 from .defaults_helper import InputDefaultsHelper
 
+server, state, ctrl = setup_server()
+
 
 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
     # -------------------------------------------------------------------------
@@ -149,3 +159,37 @@ class TooltipDefaults:
     TOOLTIP = InputDefaultsHelper.get_docstrings(
         [RefPart, ImpactX], DashboardDefaults.DEFAULT_VALUES
     )
+
+
+class ToolbarDefaults:
+    """
+    Default styling and states for the toolbar
+    section in the ImpactX dashboard.
+    """
+
+    TOOLBAR_SIZE = 64
+    FOOTER_SIZE = 8
+
+
+class UIDefaults:
+    """
+    Default UI which the input cards reply on in the ImpactX dashboard.
+    """
+
+    ROW_STYLE = {
+        "dense": True,
+    }
+
+    CARD_TEXT_OVERFLOW = {
+        "classes": "custom-scrollbar",
+        "style": {
+            "flex": "1",
+            "overflow-y": "auto",
+            "overflow-x": "auto",
+        },
+    }
+
+    CARD_STYLE = {
+        "display": "flex",
+        "flex-direction": "column",
+    }

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

@@ -13,7 +13,13 @@
 from impactx import distribution
 
 from ... import setup_server, vuetify
-from .. import CardComponents, DashboardDefaults, InputComponents, generalFunctions
+from .. import (
+    CardBase,
+    CardComponents,
+    DashboardDefaults,
+    InputComponents,
+    generalFunctions,
+)
 from . import DistributionFunctions
 
 server, state, ctrl = setup_server()
@@ -161,21 +167,24 @@ def on_distribution_parameter_change(parameter_name, parameter_value, parameter_
 # -----------------------------------------------------------------------------
 
 
-class DistributionParameters:
+class DistributionParameters(CardBase):
     """
     User-Input section for beam distribution.
     """
 
-    @staticmethod
-    def card():
+    HEADER_NAME = "Distribution Parameters"
+
+    def __init__(self):
+        super().__init__()
+
+    def card_content(self):
         """
         Creates UI content for beam distribution.
         """
-
-        with vuetify.VCard(style="width: 340px; height: 300px"):
-            CardComponents.input_header("Distribution Parameters")
-            with vuetify.VCardText():
-                with vuetify.VRow():
+        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):
                     with vuetify.VCol(cols=6):
                         InputComponents.select(
                             label="Select Distribution",
@@ -188,14 +197,15 @@ def card():
                             v_model_name="distribution_type",
                             disabled=("distribution_type_disable",),
                         )
-                with vuetify.VRow(classes="my-2"):
+                with vuetify.VRow(**self.ROW_STYLE):
                     for i in range(3):
-                        with vuetify.VCol(cols=4, classes="py-0"):
+                        with vuetify.VCol(cols=4):
                             with vuetify.VRow(
                                 v_for="(parameter, index) in selected_distribution_parameters",
                                 v_if=f"index % 3 == {i}",
+                                **self.ROW_STYLE,
                             ):
-                                with vuetify.VCol(classes="py-1"):
+                                with vuetify.VCol():
                                     vuetify.VTextField(
                                         label=("parameter.parameter_name",),
                                         v_model=("parameter.parameter_default_value",),