Redesign app header

aiidalab · Jul 12, 2024 · ed0a18f · ed0a18f
1 parent 602fcc4
commit ed0a18f
Show file tree

Hide file tree

Showing 12 changed files with 431 additions and 81 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,6 @@ export/
 # Sphinx documentation
 docs/html
 screenshots/
+
+# User config (used to mark first-time users as existing)
+.app-user-config
diff --git a/qe.ipynb b/qe.ipynb
@@ -32,7 +32,7 @@
    "source": [
     "from aiidalab_widgets_base.utils.loaders import load_css_stylesheet\n",
     "\n",
-    "load_css_stylesheet(package=\"aiidalab_qe.app.static.styles.css\")"
+    "load_css_stylesheet(package=\"aiidalab_qe.app.static.styles\")"
    ]
   },
   {
@@ -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 aiidalab_widgets_base.bug_report import (\n",
-    "    install_create_github_issue_exception_handler,\n",
-    ")\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__"
+    "display(view)"
    ]
   },
   {
@@ -71,37 +73,39 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "env = Environment()\n",
+    "import urllib.parse as urlparse\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",
+    "from aiidalab_widgets_base.bug_report import (\n",
+    "    install_create_github_issue_exception_handler,\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",
+    "from aiidalab_qe.app.main import App\n",
     "\n",
-    "output = ipw.Output()\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",
     "\n",
-    "with output:\n",
-    "    display(welcome_message, app_with_work_chain_selector, footer)\n",
+    "url = urlparse.urlsplit(jupyter_notebook_url)  # noqa F821\n",
+    "query = urlparse.parse_qs(url.query)\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",
-    "display(output)"
+    "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/__init__.py b/src/aiidalab_qe/app/__init__.py
@@ -1,7 +1 @@
 """Package for the AiiDAlab QE app."""
-
-from .main import App
-
-__all__ = [
-    "App",
-]
diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css
@@ -1,3 +1,43 @@
 .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;
+}
+
+.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/styles/scss/custom.scss b/src/aiidalab_qe/app/static/styles/scss/custom.scss
@@ -1,3 +1,47 @@
 .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;
+    }
+  }
+}
+
+.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/templates/about.jinja b/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">Quantum ESPRESSO plugin</a>
+    for AiiDA.
+  </p>
+</div>
diff --git a/src/aiidalab_qe/app/static/templates/guide.jinja b/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>
diff --git a/src/aiidalab_qe/app/static/templates/welcome.jinja b/src/aiidalab_qe/app/static/templates/welcome.jinja
diff --git a/src/aiidalab_qe/app/static/templates/workflow_failure.jinja b/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">

diff --git a/src/aiidalab_qe/app/static/templates/workflow_summary.jinja b/src/aiidalab_qe/app/static/templates/workflow_summary.jinja
@@ -1,9 +1,3 @@
-<head>
-  <style>
-    {{ style }}
-  </style>
-</head>
-
 <body>
 
 <div class="row">