Redesign header with logo, toggled info sections, etc.

qe.ipynb

@@ -47,22 +47,24 @@
     "\n",
     "    sys.modules[\"pybel\"] = __import__(\"openbabel\", globals(), locals(), [\"pybel\"]).pybel\n",
     "except Exception:\n",
-    "    pass\n",
+    "    pass"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from IPython.display import display\n",
     "\n",
-    "import urllib.parse as urlparse\n",
-    "from datetime import datetime\n",
+    "from aiidalab_qe.app.wrapper import AppWrapperContoller, AppWrapperModel, AppWrapperView\n",
     "\n",
-    "import ipywidgets as ipw\n",
-    "from importlib_resources import files\n",
-    "from IPython.display import display\n",
-    "from jinja2 import Environment\n",
+    "model = AppWrapperModel()\n",
+    "view = AppWrapperView()\n",
+    "controller = AppWrapperContoller(model, view)\n",
     "\n",
-    "from aiidalab_qe.app import App\n",
-    "from aiidalab_qe.app.static import styles, templates\n",
-    "from aiidalab_qe.version import __version__\n",
-    "from aiidalab_widgets_base.bug_report import (\n",
-    "    install_create_github_issue_exception_handler,\n",
-    ")"
+    "display(view)"
    ]
   },
   {
@@ -71,37 +73,38 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "env = Environment()\n",
+    "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",
-    "template = files(templates).joinpath(\"welcome.jinja\").read_text()\n",
-    "style = files(styles).joinpath(\"style.css\").read_text()\n",
-    "welcome_message = ipw.HTML(env.from_string(template).render(style=style))\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",
+    "install_create_github_issue_exception_handler(\n",
+    "    view.output,\n",
+    "    url=\"https://github.com/aiidalab/aiidalab-qe/issues/new\",\n",
+    "    labels=(\"bug\", \"automated-report\"),\n",
     ")\n",
     "\n",
     "url = urlparse.urlsplit(jupyter_notebook_url)  # noqa F821\n",
     "query = urlparse.parse_qs(url.query)\n",
     "\n",
-    "\n",
     "app_with_work_chain_selector = App(qe_auto_setup=True)\n",
     "# if a pk is provided in the query string, set it as the value of the work_chain_selector\n",
     "if \"pk\" in query:\n",
     "    pk = int(query[\"pk\"][0])\n",
     "    app_with_work_chain_selector.work_chain_selector.value = pk\n",
     "\n",
-    "output = ipw.Output()\n",
-    "install_create_github_issue_exception_handler(\n",
-    "    output,\n",
-    "    url=\"https://github.com/aiidalab/aiidalab-qe/issues/new\",\n",
-    "    labels=(\"bug\", \"automated-report\"),\n",
-    ")\n",
-    "\n",
-    "with output:\n",
-    "    display(welcome_message, app_with_work_chain_selector, footer)\n",
-    "\n",
-    "display(output)"
+    "view.main.children = [app_with_work_chain_selector]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "controller.enable_toggles()"
    ]
   }
  ],

src/aiidalab_qe/app/__init__.py

@@ -1,7 +1 @@
 """Package for the AiiDAlab QE app."""
-
-from .main import App
-
-__all__ = [
-    "App",
-]

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

@@ -6,3 +6,43 @@
   max-width: none !important;
 }
 /* end override */
+
+.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;
+}
+
+.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;
+}

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

@@ -0,0 +1,15 @@
+.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;
+}

src/aiidalab_qe/app/static/templates/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">aiida-quantumespresso plugin</a> and many other plugins developed by the community.
+    for AiiDA.
+  </p>
+</div>

src/aiidalab_qe/app/static/templates/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>

src/aiidalab_qe/app/static/templates/workflow_failure.jinja

@@ -1,9 +1,3 @@
-<head>
-  <style>
-    {{ style }}
-  </style>
-</head>
-
 <body>
 
 <div class="alert alert-danger error-container">

src/aiidalab_qe/app/static/templates/workflow_summary.jinja

@@ -1,9 +1,3 @@
-<head>
-  <style>
-    {{ style }}
-  </style>
-</head>
-
 <body>
 
 <div class="row">