Add information about magnetism feature limitations for insulators (#…

…1157)

This PR adds a note in the magnetization section and one next to the electronic type selector informing users about the limitations in combining the insulator and magnetism options. It also styles info messages in the basic settings as inline info alerts to grab the users attention.

src/aiidalab_qe/app/configuration/advanced/magnetization/magnetization.py

@@ -54,6 +54,15 @@ def render(self):
 
         self.unit = "µ<sub>B</sub>"
 
+        self.insulator_help = ipw.HTML("""
+            <div style="line-height: 1.4;">
+                <b>Note:</b> defining the starting magnetic moments per atomic species
+                is available only for metallic systems. To enable the feature, please
+                set the <b>Electronic type</b> to <b>Metal</b> in the <b>Basic
+                settings</b> tab.
+            </div>
+        """)
+
         self.magnetization_type_help = ipw.HTML()
         ipw.dlink(
             (self._model, "type_help"),
@@ -190,6 +199,7 @@ def _switch_widgets(self):
             else:
                 children.extend(
                     [
+                        self.insulator_help,
                         self.magnetization_type_help,
                         self.tot_magnetization_with_unit,
                     ],

src/aiidalab_qe/app/configuration/basic/basic.py

@@ -34,6 +34,10 @@ def render(self):
             (self._model, "electronic_type"),
             (self.electronic_type, "value"),
         )
+        self.electronic_type.observe(
+            self._on_spin_type_change,
+            "value",
+        )
 
         # SpinType: magnetic properties of material
         self.spin_type = ipw.ToggleButtons(style={"description_width": "initial"})
@@ -50,10 +54,20 @@ def render(self):
             "value",
         )
 
+        self.starting_magmom_warning = ipw.HTML(
+            value="""
+                <div class="alert alert-inline alert-info" style="margin-left: 10px;">
+                    <b>Note:</b> only total magnetization can be set for insulators
+                </div>
+            """,
+            layout=ipw.Layout(display="none"),
+        )
+
         self.magnetization_info = ipw.HTML(
             value="""
-                <div style="margin-left: 10px;">
-                    Set the desired magnetic configuration in <b>advanced</b> settings
+                <div class="alert alert-inline alert-info" style="margin-left: 10px;">
+                    <b>Note:</b> set the desired magnetic configuration in <b>advanced
+                    </b> settings
                 </div>
             """,
             layout=ipw.Layout(display="none"),
@@ -135,6 +149,7 @@ def render(self):
                         layout=ipw.Layout(justify_content="flex-start", width="120px"),
                     ),
                     self.electronic_type,
+                    self.starting_magmom_warning,
                 ],
                 layout=ipw.Layout(align_items="baseline"),
             ),
@@ -185,11 +200,21 @@ def render(self):
     def _on_input_structure_change(self, _):
         self.refresh(specific="structure")
 
+    def _on_electronic_type_change(self, _):
+        self._update_info_warning_messages()
+
     def _on_spin_type_change(self, _):
+        self._update_info_warning_messages()
+
+    def _update_info_warning_messages(self):
         if self._model.spin_type == "collinear":
             self.magnetization_info.layout.display = "block"
+            self.starting_magmom_warning.layout.display = (
+                "block" if self._model.electronic_type == "insulator" else "none"
+            )
             if self._model.has_tags:
                 self.warning.layout.display = "flex"
         else:
+            self.starting_magmom_warning.layout.display = "none"
             self.magnetization_info.layout.display = "none"
             self.warning.layout.display = "none"

src/aiidalab_qe/app/static/styles/custom.css

@@ -112,3 +112,8 @@ footer {
 .p-TabBar-tab {
   min-width: fit-content !important;
 }
+
+.alert-inline {
+  padding: 0 5px;
+  margin: -1px;
+}