Merge pull request #508 from materialsproject/phonon_ui

Phonon UI

Author: minhsueh

.gitignore

@@ -15,3 +15,5 @@ dist/*
 .vscode
 
 **/_version.py
+
+.venv/

crystal_toolkit/components/phonon.py

@@ -199,11 +199,21 @@ def _sub_layouts(self) -> dict[str, Component]:
 
         crystal_animation_controls = html.Details(
             [
-                html.Summary("Control Panel"),
+                html.Summary(
+                    html.Strong("Control Panel"),
+                    style={
+                        "textAlign": "center",
+                    },
+                ),
                 html.Div(
                     [
+                        hr,
                         html.H6(
-                            "Supercell modification", style={"textAlign": "center"}
+                            "Supercell modification",
+                            style={
+                                "textAlign": "center",
+                                "marginBottom": "0",
+                            },
                         ),
                         html.Div(
                             [
@@ -214,7 +224,8 @@ def _sub_layouts(self) -> dict[str, Component]:
                                     is_int=True,
                                     label="x",
                                     min=1,
-                                    style={"height": "16px"},
+                                    style={"height": "15px"},
+                                    label_style={"textAlign": "center"},
                                 ),
                                 self.get_numerical_input(
                                     kwarg_label="scale-y",
@@ -223,7 +234,8 @@ def _sub_layouts(self) -> dict[str, Component]:
                                     is_int=True,
                                     label="y",
                                     min=1,
-                                    style={"height": "16px"},
+                                    style={"height": "15px"},
+                                    label_style={"textAlign": "center"},
                                 ),
                                 self.get_numerical_input(
                                     kwarg_label="scale-z",
@@ -232,7 +244,8 @@ def _sub_layouts(self) -> dict[str, Component]:
                                     is_int=True,
                                     label="z",
                                     min=1,
-                                    style={"height": "16px"},
+                                    style={"height": "15px"},
+                                    label_style={"textAlign": "center"},
                                 ),
                             ],
                             style={
@@ -249,7 +262,13 @@ def _sub_layouts(self) -> dict[str, Component]:
                                 step=0.01,
                                 domain=[0, 1],
                                 label="Vibration magnitude",
-                                # styleInput={"height": "40px"},
+                                styleInput={
+                                    "height": "32px",
+                                    "box-sizing": "border-box",
+                                    "borderRadius": "4px",
+                                    "width": "5rem",
+                                },
+                                label_style={"textAlign": "center"},
                             ),
                         ),
                         hr,
@@ -260,7 +279,14 @@ def _sub_layouts(self) -> dict[str, Component]:
                                 step=0.01,
                                 domain=[0, 1],
                                 label="Velocity",
-                            )
+                                styleInput={
+                                    "height": "32px",
+                                    "box-sizing": "border-box",
+                                    "borderRadius": "4px",
+                                    "width": "5rem",
+                                },
+                                label_style={"textAlign": "center"},
+                            ),
                         ),
                         hr,
                         html.Div(

crystal_toolkit/core/mpcomponent.py

@@ -355,6 +355,7 @@ def get_numerical_input(
         help_str: str | None = None,
         is_int: bool = False,
         shape: tuple[int, ...] = (),
+        label_style: dict | None = None,
         **kwargs,
     ) -> html.Div:
         """For Python classes which take matrices as inputs, this will generate a corresponding Dash
@@ -370,6 +371,7 @@ def get_numerical_input(
         :param help_str: Text for a tooltip when hovering over label.
         :param is_int: if True, will use a numeric input
         :param shape: (3, 3) for matrix, (1, 3) for vector, (1, 1) for scalar
+        :param label_style: the customized styling for labeling `add_label_help`
         :return: a Dash layout
         """
         state = state or {}
@@ -440,7 +442,7 @@ def matrix_element(idx, value=0):
 
         matrix = html.Div(matrix_div_contents)
 
-        return add_label_help(matrix, label, help_str)
+        return add_label_help(matrix, label, help_str, label_style)
 
     def get_slider_input(
         self,
@@ -450,6 +452,7 @@ def get_slider_input(
         label: str | None = None,
         help_str: str | None = None,
         multiple: bool = False,
+        label_style: dict | None = None,
         **kwargs,
     ):
         state = state or {}
@@ -473,7 +476,7 @@ def get_slider_input(
                 **slider_kwargs,
             )
 
-        return add_label_help(slider_input, label, help_str)
+        return add_label_help(slider_input, label, help_str, label_style)
 
     def get_bool_input(
         self,
@@ -482,6 +485,7 @@ def get_bool_input(
         state: dict | None = None,
         label: str | None = None,
         help_str: str | None = None,
+        label_style: dict | None = None,
         **kwargs,
     ):
         """For Python classes which take boolean values as inputs, this will generate a
@@ -496,6 +500,7 @@ def get_bool_input(
         and the default value as a value. Ignored if `default` is set. It can be useful
             to use `state` if you want to set defaults for multiple inputs from a single dictionary.
         :param help_str: Text for a tooltip when hovering over label.
+        :param label_style: the customized styling for labeling `add_label_help`
         :return: a Dash layout
         """
         state = state or {}
@@ -508,7 +513,7 @@ def get_bool_input(
             **kwargs,
         )
 
-        return add_label_help(bool_input, label, help_str)
+        return add_label_help(bool_input, label, help_str, label_style)
 
     def get_choice_input(
         self,
@@ -519,6 +524,7 @@ def get_choice_input(
         help_str: str | None = None,
         options: list[dict] | None = None,
         clearable: bool = False,
+        label_style: dict | None = None,
         **kwargs,
     ):
         """For Python classes which take pre-defined values as inputs, this will generate a
@@ -534,6 +540,7 @@ def get_choice_input(
         :param help_str: Text for a tooltip when hovering over label.
         :param options: Options to choose from, as per dcc.Dropdown
         :param clearable: If True, will allow Dropdown to be cleared after a selection is made.
+        :param label_style: the customized styling for labeling `add_label_help`
         :return: a Dash layout
         """
         state = state or {}
@@ -547,7 +554,7 @@ def get_choice_input(
             arbitraryProps={**kwargs},
         )
 
-        return add_label_help(option_input, label, help_str)
+        return add_label_help(option_input, label, help_str, label_style)
 
     def get_dict_input(
         self,
@@ -559,6 +566,7 @@ def get_dict_input(
         dict_size: int | None = None,
         key_name: str = "key",
         value_name: str = "value",
+        label_style: dict | None = None,
         **kwargs,
     ) -> mpc.FilterField:
         """For Python classes which take dictionaries as inputs. The keys are fixed and only the
@@ -575,6 +583,7 @@ def get_dict_input(
         :param dict_size: size of the dict. Can be specified in case there is no initial default or state.
         :param key_name: name describing the keys of the dictionary.
         :param value_name: name describing the values of the dictionary.
+        :param label_style: the customized styling for labeling `add_label_help`
         :return: a Dash layout
         """
         state = state or {}
@@ -625,7 +634,7 @@ def pair_element(idx, key=None, value=None):
 
         dict_input = html.Div(dict_div_contents)
 
-        return add_label_help(dict_input, label, help_str)
+        return add_label_help(dict_input, label, help_str, label_style)
 
     def get_alarm_window(
         self,

crystal_toolkit/helpers/layouts.py

@@ -1160,9 +1160,14 @@ def __init__(
 
 
 # TODO: review
-def add_label_help(input, label, help) -> mpc.FilterField:
+def add_label_help(input, label, help, label_style=None) -> mpc.FilterField:
     """Combine an input, label, and tooltip text into a single consistent component."""
-    return mpc.FilterField(input, id=uuid4().hex, label=label, tooltip=help)
+    if label_style is None:
+        label_style = {}
+
+    return mpc.FilterField(
+        input, id=uuid4().hex, label=label, tooltip=help, styleLabel=label_style
+    )
 
 
 # TODO: review

pyproject.toml

@@ -11,7 +11,7 @@ requires-python = ">=3.10"
 authors = [{ name = "Matt Horton", email = "mkhorton@lbl.gov" }]
 
 dependencies = [
-  "dash-mp-components==0.5.0rc1",
+  "dash-mp-components==0.5.1rc2",
   "dash>=2.11.0",
   "flask-caching",
   "frozendict",