modifications to the EditStructureData Widgets (#956)

* modifications to the EditStructureData Widgets

src/aiidalab_qe/common/widgets.py

@@ -440,7 +440,11 @@ def __init__(self, title="", **kwargs):
 
         self._status_message = StatusHTML()
         self.atom_selection = ipw.Text(
-            description="Index of atoms", value="", layout={"width": "initial"}
+            placeholder="e.g. 1..5 8 10",
+            description="Index of atoms",
+            value="",
+            style={"description_width": "100px"},
+            layout={"width": "initial"},
         )
         self.from_selection = ipw.Button(description="From selection")
         self.from_selection.on_click(self._from_selection)
@@ -478,6 +482,10 @@ def __init__(self, title="", **kwargs):
             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"},
+        )
         self.tag_display = ipw.Output()
         self.add_tags.on_click(self._add_tags)
         self.reset_tags.on_click(self._reset_tags)
@@ -491,7 +499,22 @@ def __init__(self, title="", **kwargs):
         super().__init__(
             children=[
                 ipw.HTML(
-                    "<b>Adding a tag to atoms</b>",
+                    "<b>Set custom tags for atoms</b>",
+                ),
+                ipw.HTML(
+                    """
+                    <p>
+                    These are used to distinguish atoms of the same chemical element. <br>
+                    For example, they can be used to assign different initial magnetization values for antiferromagnetic systems.
+                    </p>
+                    <p style="font-weight: bold; color: #1f77b4;">NOTE:</p>
+                    <ul style="padding-left: 2em; list-style-type: disc;">
+                        <li>Atom indices start from 1, not 0. This means that the first atom in the list is numbered 1, the second atom is numbered 2, and so on.</li>
+                    </ul>
+
+                    Note:
+                    </p>
+                    """
                 ),
                 ipw.HBox(
                     [
@@ -501,10 +524,11 @@ def __init__(self, title="", **kwargs):
                     ]
                 ),
                 self.tag_display,
+                self.scroll_note,
                 ipw.HBox([self.add_tags, self.reset_tags, self.reset_all_tags]),
                 self._status_message,
                 ipw.HTML(
-                    "<b>Define periodicity</b>",
+                    '<div style="margin-top: 20px;"><b>Set structure periodicity</b></div>'
                 ),
                 ipw.HTML("""
                     <p>Select the periodicity of your system.</p>
@@ -530,14 +554,18 @@ def _display_table(self, _=None):
         current_tags = self.structure.get_tags()
         chemichal_symbols = self.structure.get_chemical_symbols()
 
-        if selection and (max(selection) <= (len(self.structure) - 1)):
+        if (
+            selection
+            and (min(selection) >= 0)
+            and (max(selection) <= (len(self.structure) - 1))
+        ):
             table_data = []
             for index in selection:
                 tag = current_tags[index]
                 symbol = chemichal_symbols[index]
                 if tag == 0:
                     tag = ""
-                table_data.append([f"{index}", f"{symbol}", f"{tag}"])
+                table_data.append([f"{index+ 1}", f"{symbol}", f"{tag}"])
 
             # Create an HTML table
             table_html = "<table>"
@@ -558,10 +586,12 @@ def _display_table(self, _=None):
             with self.tag_display:
                 clear_output()
                 display(HTML(table_html))
+            self.scroll_note.layout = {"visibility": "visible"}
         else:
             self.tag_display.layout = {}
             with self.tag_display:
                 clear_output()
+            self.scroll_note.layout = {"visibility": "hidden"}
 
     def _from_selection(self, _=None):
         """Set the atom selection from the current selection."""