Reorganize static folder and add pre-loaded stylesheets (#772)

This PR reorganizes the static folder with dedicated subfolders for templates and styles. The styles folder holds stylesheets that are automatically loaded (using a new `aiidalab-widgets-base` utility function) in the main notebook.

.gitignore

@@ -7,7 +7,7 @@
 build/
 export/
 .do-not-setup-on-localhost
-
+.mypy_cache/
 
 # Sphinx documentation
 docs/html

qe.ipynb

@@ -24,6 +24,17 @@
     "load_profile();"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from aiidalab_widgets_base.utils.loaders import load_css\n",
+    "\n",
+    "load_css(css_path=\"src/aiidalab_qe/app/static/styles\")"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -46,7 +57,8 @@
     "from IPython.display import display\n",
     "from jinja2 import Environment\n",
     "\n",
-    "from aiidalab_qe.app import App, static\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",
@@ -61,8 +73,8 @@
    "source": [
     "env = Environment()\n",
     "\n",
-    "template = files(static).joinpath(\"welcome.jinja\").read_text()\n",
-    "style = files(static).joinpath(\"style.css\").read_text()\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",

setup.cfg

@@ -27,7 +27,7 @@ install_requires =
     aiida-core~=2.2,<3
     Jinja2~=3.0
     aiida-quantumespresso~=4.6
-    aiidalab-widgets-base[optimade]~=2.2.0,<2.4.0
+    aiidalab-widgets-base[optimade]==2.3.0a2
     aiida-pseudo~=1.4
     filelock~=3.8
     importlib-resources~=5.2
@@ -47,7 +47,8 @@ dev =
 
 [options.package_data]
 aiidalab_qe.app.parameters = qeapp.yaml
-aiidalab_qe.app.static = *
+aiidalab_qe.app.static.styles = *.css
+aiidalab_qe.app.static.templates = *.jinja
 aiidalab_qe.app.structure.examples = *
 aiidalab_qe.plugins.xas = pseudo_toc.yaml
 

src/aiidalab_qe/app/result/summary_viewer.py

@@ -154,11 +154,11 @@ def _generate_report_html(report):
     """Read from the bulider parameters and generate a html for reporting
     the inputs for the `QeAppWorkChain`.
     """
-    from importlib import resources
+    from importlib.resources import files
 
     from jinja2 import Environment
 
-    from aiidalab_qe.app import static
+    from aiidalab_qe.app.static import styles, templates
 
     def _fmt_yes_no(truthy):
         return "Yes" if truthy else "No"
@@ -169,8 +169,8 @@ def _fmt_yes_no(truthy):
             "fmt_yes_no": _fmt_yes_no,
         }
     )
-    template = resources.read_text(static, "workflow_summary.jinja")
-    style = resources.read_text(static, "style.css")
+    template = files(templates).joinpath("workflow_summary.jinja").read_text()
+    style = files(styles).joinpath("style.css").read_text()
     report = {key: value for key, value in report.items() if value is not None}
 
     return env.from_string(template).render(style=style, **report)

src/aiidalab_qe/app/result/workchain_viewer.py

@@ -1,6 +1,6 @@
 import shutil
 import typing as t
-from importlib import resources
+from importlib.resources import files
 from pathlib import Path
 from tempfile import TemporaryDirectory
 
@@ -14,7 +14,7 @@
 from aiida.cmdline.utils.common import get_workchain_report
 from aiida.common import LinkType
 from aiida.orm.utils.serialize import deserialize_unsafe
-from aiidalab_qe.app import static
+from aiidalab_qe.app.static import styles, templates
 from aiidalab_qe.app.utils import get_entry_items
 from aiidalab_widgets_base import ProcessMonitor, register_viewer_widget
 from aiidalab_widgets_base.viewers import StructureDataViewer
@@ -175,8 +175,8 @@ def __init__(self, node, export_dir=None, **kwargs):
             )
             final_calcjob = self._get_final_calcjob(node)
             env = Environment()
-            template = resources.read_text(static, "workflow_failure.jinja")
-            style = resources.read_text(static, "style.css")
+            template = files(templates).joinpath("workflow_failure.jinja").read_text()
+            style = files(styles).joinpath("style.css").read_text()
             output = ipw.HTML(
                 env.from_string(template).render(
                     style=style,

src/aiidalab_qe/app/static/styles/README.md

@@ -0,0 +1,13 @@
+# Stylesheets for the Quantum ESPRESSO app
+
+This folder contains `css` stylesheets. These can be loaded from the styles folder using
+
+```python
+from aiidalab_widgets_base.utils.loaders import load_css
+
+load_css(css_path="src/aiidalab_qe/app/static/styles")  # load all stylesheets in the styles folder
+
+# or
+
+load_css(css_path="src/aiidalab_qe/app/static/styles/<stylesheet>.css") # load a single stylesheet
+```

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

@@ -0,0 +1,8 @@
+/*
+  Override Jupyter width limitation to
+  make apps take full notebook width
+*/
+.output_subarea {
+  max-width: none !important;
+}
+/* end override */