Splitting AddingTag and Periodicity editors

src/aiidalab_qe/app/structure/__init__.py

@@ -13,6 +13,7 @@
     AddingTagsEditor,
     LazyLoadedOptimade,
     LazyLoadedStructureBrowser,
+    PeriodicityEditor,
 )
 from aiidalab_qe.common.infobox import InAppGuide
 from aiidalab_qe.common.widgets import CategorizedStructureExamplesWidget, QeWizardStep
@@ -80,7 +81,8 @@ def _render(self):
         editors = [
             BasicCellEditor(title="Edit cell"),
             BasicStructureEditor(title="Edit structure"),
-            AddingTagsEditor(title="Edit StructureData"),
+            AddingTagsEditor(title="Edit atom tags"),
+            PeriodicityEditor(title="Edit periodicity"),
         ]
 
         plugin_editors = get_entry_items("aiidalab_qe.properties", "editor")

src/aiidalab_qe/common/__init__.py

@@ -1,12 +1,18 @@
 # trigger registration of the viewer widget:
 from .node_view import CalcJobNodeViewerWidget  # noqa: F401
 from .process import QeAppWorkChainSelector, WorkChainSelector
-from .widgets import AddingTagsEditor, LazyLoadedOptimade, LazyLoadedStructureBrowser
+from .widgets import (
+    AddingTagsEditor,
+    LazyLoadedOptimade,
+    LazyLoadedStructureBrowser,
+    PeriodicityEditor,
+)
 
 __all__ = [
     "AddingTagsEditor",
     "LazyLoadedOptimade",
     "LazyLoadedStructureBrowser",
     "QeAppWorkChainSelector",
     "WorkChainSelector",
+    "PeriodicityEditor",
 ]

src/aiidalab_qe/common/widgets.py

@@ -475,21 +475,6 @@ def __init__(self, title="", **kwargs):
             button_style="warning",
             layout={"width": "initial"},
         )
-        self.periodicity = ipw.RadioButtons(
-            options=[
-                ("3D (bulk systems)", "xyz"),
-                ("2D (surfaces, slabs, ...)", "xy"),
-                ("1D (wires)", "x"),
-                ("0D (molecules)", "molecule"),
-            ],
-            value="xyz",
-            layout={"width": "initial"},
-        )
-        self.apply_periodicity = ipw.Button(
-            description="Apply",
-            button_style="primary",
-            layout={"width": "100px"},
-        )
         self.scroll_note = ipw.HTML(
             value="<p style='font-style: italic;'>Note: The table is scrollable.</p>",
             layout={"visibility": "hidden"},
@@ -502,13 +487,9 @@ def __init__(self, title="", **kwargs):
         self.add_tags.on_click(self._display_table)
         self.reset_tags.on_click(self._display_table)
         self.reset_all_tags.on_click(self._display_table)
-        self.apply_periodicity.on_click(self._select_periodicity)
 
         super().__init__(
             children=[
-                ipw.HTML(
-                    "<b>Set custom tags for atoms</b>",
-                ),
                 ipw.HTML(
                     """
                     <p>
@@ -533,21 +514,6 @@ def __init__(self, title="", **kwargs):
                 self.scroll_note,
                 ipw.HBox([self.add_tags, self.reset_tags, self.reset_all_tags]),
                 self._status_message,
-                ipw.HTML(
-                    '<div style="margin-top: 20px;"><b>Set structure periodicity</b></div>'
-                ),
-                ipw.HTML("""
-                    <p>Select the periodicity of your system.</p>
-                    <p style="font-weight: bold; color: #1f77b4;">NOTE:</p>
-
-                    <ul style="padding-left: 2em; list-style-type: disc;">
-                        <li>For <b>2D</b> systems (e.g., surfaces, slabs), the non-periodic direction must be the third lattice vector (z-axis).</li>
-                        <li>For <b>1D</b> systems (e.g., wires), the periodic direction must be the first lattice vector (x-axis).</li>
-
-                    </ul>
-                """),
-                self.periodicity,
-                self.apply_periodicity,
             ],
             **kwargs,
         )
@@ -654,6 +620,50 @@ def _reset_all_tags(self, _=None):
         self.input_selection = None
         self.input_selection = deepcopy(self.selection)
 
+
+class PeriodicityEditor(ipw.VBox):
+    """Editor for changing periodicity of structures."""
+
+    structure = traitlets.Instance(ase.Atoms, allow_none=True)
+
+    def __init__(self, title="", **kwargs):
+        self.title = title
+
+        self.periodicity = ipw.RadioButtons(
+            options=[
+                ("3D (bulk systems)", "xyz"),
+                ("2D (surfaces, slabs, ...)", "xy"),
+                ("1D (wires)", "x"),
+                ("0D (molecules)", "molecule"),
+            ],
+            value="xyz",
+            layout={"width": "initial"},
+        )
+        self.apply_periodicity = ipw.Button(
+            description="Apply",
+            button_style="primary",
+            layout={"width": "100px"},
+        )
+        self.apply_periodicity.on_click(self._select_periodicity)
+
+        super().__init__(
+            children=[
+                ipw.HTML("""
+                    <p>Select the periodicity of your system.</p>
+                    <p style="font-weight: bold; color: #1f77b4;">NOTE:</p>
+
+                    <ul style="padding-left: 2em; list-style-type: disc;">
+                        <li>For <b>2D</b> systems (e.g., surfaces, slabs), the non-periodic direction must be the third lattice vector (z-axis).</li>
+                        <li>For <b>1D</b> systems (e.g., wires), the periodic direction must be the first lattice vector (x-axis).</li>
+
+                    </ul>
+                """),
+                self.periodicity,
+                self.apply_periodicity,
+            ],
+            **kwargs,
+        )
+
     def _select_periodicity(self, _=None):
         """Select periodicity."""
         periodicity_options = {