Update the guide text

edan-bainglass · Jan 12, 2025 · 1c986e1 · 1c986e1
1 parent 57e0aa5
commit 1c986e1
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 142 deletions.
diff --git a/src/aiidalab_qe/app/main.py b/src/aiidalab_qe/app/main.py
@@ -103,10 +103,10 @@ def __init__(self, qe_auto_setup=True):
 
         super().__init__(
             children=[
-                InAppGuide(identifier="guide-warning", classes=["guide-warning"]),
+                InAppGuide(identifier="guide-header"),
                 self._process_loading_message,
                 self._wizard_app_widget,
-                InAppGuide(identifier="post-guide", classes=["post-guide"]),
+                InAppGuide(identifier="post-guide"),
             ]
         )
 

diff --git a/src/aiidalab_qe/app/static/styles/infobox.css b/src/aiidalab_qe/app/static/styles/infobox.css
@@ -5,24 +5,30 @@
   border-left: 3px solid #add8e6;
   background-color: #d9edf7;
 }
-.info-box p {
-  line-height: 24px;
+.info-box .widget-html-content {
+  line-height: 1.5;
 }
 .info-box.in-app-guide.show {
   display: flex !important;
 }
 .guide ol {
   list-style: none;
 }
-.guide p:not(:last-of-type) {
+.guide p:last-of-type {
   margin-bottom: 0.5em;
 }
-.guide-warning {
-  background-color: #fcf8e3;
-  border-color: #ffe4c4;
+.in-app-guide:has(#guide-header),
+.in-app-guide:has(#post-guide) {
+  background-color: var(--color-success);
+  border-color: #8fbc8f;
+}
+.in-app-guide:has(#guide-header) {
   margin-bottom: 1em;
 }
-.post-guide {
+.in-app-guide:has(#post-guide) {
+  margin-top: 1em;
+}
+#post-guide {
   margin: 1em 0;
 }
 .in-app-guide .alert {
@@ -41,3 +47,7 @@
 .in-app-guide h4 {
   font-weight: bold;
 }
+
+.results-panel-guide {
+  margin-bottom: 1em;
+}
diff --git a/src/aiidalab_qe/app/static/templates/guide.jinja b/src/aiidalab_qe/app/static/templates/guide.jinja
@@ -1,49 +1,53 @@
 <div class="guide">
-  <p>
-    The QE app allows you to calculate properties in a simple 4-step process:
-  </p>
+  <div>
+    <p>
+      The QE app allows you to calculate properties in a simple 4-step process:
+    </p>
+    <ol>
+      <li>
+        🔍 <strong>Step 1:</strong> Select the structure you want to run.
+      </li>
+      <li>
+        ⚙️ <strong>Step 2:</strong> Select the properties you are interested in.
+      </li>
+      <li>
+        💻 <strong>Step 3:</strong> Choose the computational resources you want to run on and submit your workflow.
+      </li>
+      <li>
+        🚀 <strong>Step 4:</strong> Monitor and view your workflow results.
+      </li>
+    </ol>
+  </div>
 
-  <ol>
-    <li>
-      🔍 <strong>Step 1:</strong> Select the structure you want to run.
-    </li>
-    <li>
-      ⚙️ <strong>Step 2:</strong> Select the properties you are interested in.
-    </li>
-    <li>
-      💻 <strong>Step 3:</strong> Choose the computational resources you want to run on and submit your workflow.
-    </li>
-    <li>
-      🚀 <strong>Step 4:</strong> Monitor and view your workflow results.
-    </li>
-  </ol>
+  <div>
+    <p>
+      New users can go straight to the first step and select their structure.
+    </p>
+    <p>
+      Completed workflows can be viewed in the <strong>Calculation history</strong> section.
+    </p>
+    <p>
+      To start a new calculation in a separate tab, click the <strong>New calculation</strong> button.
+    </p>
+    <p>
+      You can also check out the
+      <a href="https://aiidalab-qe.readthedocs.io/tutorials/basic.html" target="_blank">basic</a> tutorial to get
+      started
+      with the Quantum ESPRESSO app, or try out the
+      <a href="https://aiidalab-qe.readthedocs.io/tutorials/advanced.html" target="_blank">advanced</a> tutorial to
+      learn
+      additional features offered by the app.
+    </p>
+    <p>
+      For a more in-depth dive into the app's features, please refer to the
+      <a href="https://aiidalab-qe.readthedocs.io/howto/index.html" target="_blank">how-to guides</a>.
+    </p>
+  </div>
 
-  <p>
-    New users can go straight to the first step and select their structure.
-  </p>
-
-  <p>
-    Completed workflows can be viewed in the <strong>Calculation history</strong> section.
-  </p>
-
-  <p>
-    To start a new calculation in a separate tab, click the <strong>New calculation</strong> button.
-  </p>
-
-  <p>
-    You can also check out the
-    <a href="https://aiidalab-qe.readthedocs.io/tutorials/basic.html" target="_blank">basic</a> tutorial to get started
-    with the Quantum ESPRESSO app, or try out the
-    <a href="https://aiidalab-qe.readthedocs.io/tutorials/advanced.html" target="_blank">advanced</a> tutorial to learn
-    additional features offered by the app.
-  </p>
-
-  <p>
-    For a more in-depth dive into the app's features, please refer to the
-    <a href="https://aiidalab-qe.readthedocs.io/howto/index.html" target="_blank">how-to guides</a>.
-  </p>
-
-  <p>
-    Alternatively, you can select one of our in-app guides below to walk through an example use-case.
-  </p>
+  <div>
+    <h3>In-app guides</h3>
+    <p>
+      Alternatively, you can select one of our in-app guides below to walk through an example use case.
+    </p>
+  </div>
 </div>
diff --git a/src/aiidalab_qe/common/panel.py b/src/aiidalab_qe/common/panel.py
@@ -17,6 +17,7 @@
 from aiida.common.extendeddicts import AttributeDict
 from aiidalab_qe.app.parameters import DEFAULT_PARAMETERS
 from aiidalab_qe.common.code.model import CodeModel
+from aiidalab_qe.common.infobox import InAppGuide
 from aiidalab_qe.common.mixins import Confirmable, HasModels, HasProcess
 from aiidalab_qe.common.mvc import Model
 from aiidalab_qe.common.widgets import (
@@ -598,8 +599,13 @@ class ResultsPanel(Panel[RM]):
     """
 
     loading_message = "Loading {identifier} results"
+    has_controls = False
 
     def __init__(self, model: RM, **kwargs):
+        self.guide = InAppGuide(
+            identifier=f"{model.identifier}-results",
+            classes=["results-panel-guide"],
+        )
         super().__init__(model=model, **kwargs)
         self._model.observe(
             self._on_process_change,
@@ -622,11 +628,16 @@ def render(self):
         self.results_container = ipw.VBox()
 
         if self._model.auto_render:
-            self.children = [self.results_container]
+            self.children = [
+                self.guide,
+                self.results_container,
+            ]
             self._load_results()
-        else:
+        elif not self.has_controls:
+            self.children = [self.guide]
             self._render_controls()
             self.children += (self.results_container,)
+            self.has_controls = True
 
     def _on_process_change(self, _):
         self._model.update()
@@ -679,6 +690,7 @@ def _render_controls(self):
         )
 
         self.children = [
+            *self.children,
             self.process_status_notification,
             self.load_controls,
         ]