Add step4 and post-wizard guides

src/aiidalab_qe/app/main.py

@@ -114,6 +114,8 @@ def __init__(self, qe_auto_setup=True):
                 self.new_workchain_button,
                 self._process_loading_message,
                 self._wizard_app_widget,
+                InAppGuide(identifier="post-guide", classes=["post-guide"]),
+                InAppGuide(children=[ipw.HTML("hello")], guide_id="general/basic"),
             ]
         )
 

src/aiidalab_qe/app/result/__init__.py

@@ -3,6 +3,7 @@
 
 from aiida import orm
 from aiida.engine import ProcessState
+from aiidalab_qe.common.infobox import InAppGuide
 from aiidalab_qe.common.widgets import LoadingWidget
 from aiidalab_widgets_base import (
     ProcessMonitor,
@@ -106,6 +107,7 @@ def render(self):
         )
 
         self.children = [
+            InAppGuide(identifier="results-step"),
             self.process_info,
             ipw.HBox(
                 children=[

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

@@ -22,6 +22,9 @@
   border-color: #ffe4c4;
   margin-bottom: 1em;
 }
+.post-guide {
+  margin: 1em 0;
+}
 .in-app-guide .alert {
   color: black;
   margin: 10px 0;

src/aiidalab_qe/common/infobox.py

@@ -43,6 +43,7 @@ class InAppGuide(InfoBox):
     def __init__(
         self,
         children: list | None = None,
+        guide_id: str = "",
         identifier: str = "",
         classes: list[str] | None = None,
         **kwargs,
@@ -51,8 +52,10 @@ def __init__(
 
         Parameters
         ----------
-        children : `list`, optional
+        `children` : `list`, optional
             The content children of this guide section.
+        `guide_id` : `str`, optional
+            The associated guide id, required if providing children.
         `identifier` : `str`, optional
             If content `children` are not provided directly, the `identifier`
             is used to fetch the corresponding guide section from the guide
@@ -73,12 +76,17 @@ def __init__(
         )
 
         if children:
+            if not guide_id:
+                raise ValueError("Widget children provided but missing the guide id")
+            self.guide_id = guide_id
             self.children = children
+            self.identifier = None
         elif identifier:
+            self.guide_id = None
             self.children = []
             self.identifier = identifier
         else:
-            raise ValueError("No content or path identifier provided")
+            raise ValueError("No widgets or path identifier provided")
 
         self.manager.observe(
             self._on_active_guide_change,
@@ -96,10 +104,19 @@ def _on_active_guide_change(self, _):
 
     def _update_contents(self):
         """Update the contents of the guide section."""
-        if hasattr(self, "identifier"):
-            html = self.manager.get_guide_section_by_id(self.identifier)
-            self.children = [ipw.HTML(str(html))] if html else []
+        if not self.identifier:
+            return
+        html = self.manager.get_guide_section_by_id(self.identifier)
+        self.children = [ipw.HTML(str(html))] if html else []
 
     def _toggle_guide(self):
         """Toggle the visibility of the guide section."""
-        self.layout.display = "flex" if self.manager.has_guide else "none"
+        self.layout.display = (
+            "flex"
+            if self.children
+            and (
+                self.manager.active_guide == self.guide_id
+                or (self.identifier and self.manager.has_guide)
+            )
+            else "none"
+        )

src/aiidalab_qe/guides/0_basic.html

@@ -115,8 +115,50 @@ <h4>Tasks</h4>
   <div class="alert alert-success">
     <h4>Tasks</h4>
     <ol>
-      <li>Select resources</li>
+      <li>Select computational resources</li>
+      <li>Add a description of the calculation</li>
       <li>Click <b>Submit</b> to proceed</li>
     </ol>
   </div>
 </div>
+
+<div id="results-step">
+  In this step, we can monitor the calculation and view its results. A summary
+  of calculation parameters is also provided. Raw input and output files may be
+  downloaded, as well as an AiiDA archive containing the full calculation
+  provenance.
+  <div class="alert alert-success">
+    <h4>Tasks</h4>
+    <ol>
+      <li>
+        In the process tree, click on the root <code>QeAppWorkChain</code> node
+      </li>
+      <li><b>(optional)</b> review the calculation parameters</li>
+      <li>Click on the <b>Final Geometry</b> tab</li>
+      <li>
+        When the structure relaxation is finished, click on
+        <b>Load results</b> to view the final structure geometry
+      </li>
+      <li>
+        Repeat the last two steps for the <b>Bands</b> and <b>PDOS</b> tabs
+      </li>
+    </ol>
+  </div>
+</div>
+
+<div id="post-guide">
+  This concludes the basic Quantum ESPRESSO in-app guide.
+  <div class="alert alert-success">
+    <h4>Exercises</h4>
+    <ol>
+      <li>
+        <b>Download</b> the raw input and output files for further analysis
+      </li>
+      <li>
+        <b>Download</b> the AiiDA archive to store the full calculation
+        provenance
+      </li>
+      <li><b>Explore</b> the AiiDA database to view the calculation history</li>
+    </ol>
+  </div>
+</div>

src/aiidalab_qe/guides/1_advanced.html

@@ -8,3 +8,9 @@
 <div id="configuration-step">Advanced example</div>
 
 <div id="submission-step">Advanced example</div>
+
+<div id="results-step">Advanced example</div>
+
+<div id="post-guide">
+  This concludes the advanced Quantum ESPRESSO in-app guide.
+</div>