Redesign app header

Complete redesign of the app's banner. The `welcome` section is split into `about` and `guide` sections with links to the online documentation. Everything is packaged in an `AppWrapper` MVC component.
aiidalab · Jul 3, 2024 · 9b36e8a · 9b36e8a
1 parent 5a07534
commit 9b36e8a
Show file tree

Hide file tree

Showing 9 changed files with 378 additions and 63 deletions.
diff --git a/plugin_list.ipynb b/plugin_list.ipynb
@@ -54,7 +54,6 @@
     "from IPython.display import display\n",
     "\n",
     "\n",
-    "\n",
     "def is_package_installed(package_name):\n",
     "    import importlib\n",
     "    package_name = package_name.replace('-', '_')\n",

diff --git a/qe.ipynb b/qe.ipynb
@@ -20,9 +20,11 @@
    "outputs": [],
    "source": [
     "import ipywidgets as ipw\n",
-    "from aiidalab_qe.app import static\n",
     "from importlib_resources import files\n",
     "\n",
+    "from aiidalab_qe.app import static\n",
+    "\n",
+    "# load CSS stylesheets\n",
     "for stylesheet in [\"style\", \"custom\"]:\n",
     "    css = files(static).joinpath(f\"{stylesheet}.css\")\n",
     "    if css.is_file():\n",
@@ -62,37 +64,13 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "from datetime import datetime\n",
-    "\n",
-    "from aiidalab_qe.version import __version__\n",
-    "from IPython.display import display\n",
-    "from jinja2 import Environment\n",
-    "\n",
-    "output = ipw.Output()\n",
-    "\n",
-    "env = Environment()\n",
+    "from aiidalab_qe.app.wrapper import AppWrapperContoller, AppWrapperModel, AppWrapperView\n",
     "\n",
-    "template = files(static).joinpath(\"welcome.jinja\").read_text()\n",
-    "style = files(static).joinpath(\"style.css\").read_text()\n",
-    "welcome_message = ipw.HTML(env.from_string(template).render(style=style))\n",
-    "\n",
-    "main = ipw.VBox()\n",
-    "\n",
-    "current_year = datetime.now().year\n",
-    "footer = ipw.HTML(\n",
-    "    f'<p style=\"text-align:right;\">Copyright (c) {current_year} AiiDAlab team &#8195Version: {__version__}</p>'\n",
-    ")\n",
-    "\n",
-    "body = ipw.VBox(\n",
-    "    children=[\n",
-    "        output,\n",
-    "        welcome_message,\n",
-    "        main,\n",
-    "        footer,\n",
-    "    ],\n",
-    ")\n",
+    "model = AppWrapperModel()\n",
+    "view = AppWrapperView()\n",
+    "controller = AppWrapperContoller(model, view)\n",
     "\n",
-    "display(body)"
+    "display(view)"
    ]
   },
   {
@@ -103,13 +81,14 @@
    "source": [
     "import urllib.parse as urlparse\n",
     "\n",
-    "from aiidalab_qe.app.main import App\n",
     "from aiidalab_widgets_base.bug_report import (\n",
     "    install_create_github_issue_exception_handler,\n",
     ")\n",
     "\n",
+    "from aiidalab_qe.app.main import App\n",
+    "\n",
     "install_create_github_issue_exception_handler(\n",
-    "    output,\n",
+    "    view.output,\n",
     "    url=\"https://github.com/aiidalab/aiidalab-qe/issues/new\",\n",
     "    labels=(\"bug\", \"automated-report\"),\n",
     ")\n",
@@ -123,7 +102,16 @@
     "    pk = int(query[\"pk\"][0])\n",
     "    app_with_work_chain_selector.work_chain_selector.value = pk\n",
     "\n",
-    "main.children = [app_with_work_chain_selector]"
+    "view.main.children = [app_with_work_chain_selector]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "controller.enable_toggles()"
    ]
   }
  ],

diff --git a/src/aiidalab_qe/app/infobox.py b/src/aiidalab_qe/app/infobox.py
@@ -0,0 +1,14 @@
+from __future__ import annotations
+
+import ipywidgets as ipw
+
+
+class InfoBox(ipw.VBox):
+    """A view for `InfoBox`."""
+
+    def __init__(self, **kwargs):
+        """`InfoBox` constructor."""
+        super().__init__(**kwargs)
+        self.add_class("info-box")
+        if "custom-css" in kwargs:
+            self.add_class(kwargs.pop("custom-css"))
diff --git a/src/aiidalab_qe/app/static/about.jinja b/src/aiidalab_qe/app/static/about.jinja
@@ -0,0 +1,10 @@
+<div class="about">
+  <p>
+    The <a href="https://www.quantum-espresso.org/" target="_blank">Quantum ESPRESSO</a> app
+    (or QE app for short) is a graphical front end for calculating materials properties using
+    Quantum ESPRESSO (QE). Each property is calculated by workflows powered by the
+    <a href="https://www.aiida.net/" target="_bland"> AiiDA engine</a>, and maintained in the
+    <a href="https://aiida-quantumespresso.readthedocs.io/en/latest/" target="_blank">Quantum ESPRESSO plugin</a>
+    for AiiDA.
+  </p>
+</div>
diff --git a/src/aiidalab_qe/app/static/custom.css b/src/aiidalab_qe/app/static/custom.css
@@ -1,3 +1,59 @@
 .output_subarea {
   max-width: none !important;
-}
+}
+
+.app-header {
+  margin-bottom: 1em;
+}
+
+.logo {
+  text-align: center;
+}
+
+#subtitle {
+  text-align: center;
+  font-style: italic;
+}
+
+.info-toggles {
+  margin: 0 auto;
+}
+.info-toggles button {
+  width: 100px;
+  margin: 1em 0.5em;
+}
+.info-toggles button:focus {
+  outline: none !important;
+}
+
+.info-box {
+  display: none;
+  margin: 2px;
+  padding: 1em;
+  border: 3px solid orangered;
+  background-color: #ffedcc;
+  border-radius: 1em;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  -ms-border-radius: 1em;
+  -o-border-radius: 1em;
+}
+.info-box p {
+  line-height: 24px;
+}
+
+.guide ol {
+  list-style: none;
+}
+.guide p:not(:last-of-type) {
+  margin-bottom: 0.5em;
+}
+
+#loading {
+  text-align: center;
+  font-size: large;
+}
+
+footer {
+  text-align: right;
+}
diff --git a/src/aiidalab_qe/app/static/custom.scss b/src/aiidalab_qe/app/static/custom.scss
@@ -1,3 +1,64 @@
 .output_subarea {
   max-width: none !important;
 }
+
+.app-header {
+  margin-bottom: 1em;
+}
+.logo {
+  text-align: center;
+}
+
+#subtitle {
+  text-align: center;
+  font-style: italic;
+}
+
+.info-toggles {
+  margin: 0 auto;
+
+  button {
+    width: 100px;
+    margin: 1em 0.5em;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+}
+
+.info-box {
+  display: none;
+  margin: 2px;
+  padding: 1em;
+  border: 3px solid orangered;
+  background-color: #ffedcc;
+  border-radius: 1em;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  -ms-border-radius: 1em;
+  -o-border-radius: 1em;
+
+  p {
+    line-height: 24px;
+  }
+}
+
+.guide {
+  ol {
+    list-style: none;
+  }
+
+  p:not(:last-of-type) {
+    margin-bottom: 0.5em;
+  }
+}
+
+#loading {
+  text-align: center;
+  font-size: large;
+}
+
+footer {
+  text-align: right;
+}
diff --git a/src/aiidalab_qe/app/static/guide.jinja b/src/aiidalab_qe/app/static/guide.jinja
@@ -0,0 +1,42 @@
+<div class="guide">
+  <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.
+    </li>
+    <li>
+      🚀 <strong>Step 4:</strong> Submit your workflow.
+    </li>
+  </ol>
+
+  <p>
+    New users can go straight to the first step and select their structure.
+  </p>
+
+  <p>
+    Completed workflows can be selected at the top of the app.
+  </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>
+</div>
diff --git a/src/aiidalab_qe/app/static/welcome.jinja b/src/aiidalab_qe/app/static/welcome.jinja