From 3465960e33110821010c7a2a15a56bc24446d642 Mon Sep 17 00:00:00 2001 From: Edan Bainglass Date: Fri, 30 Aug 2024 09:14:15 +0000 Subject: [PATCH] Load CSS stylesheets in main notebook --- qe.ipynb | 251 ++++++++++--------- src/aiidalab_qe/app/static/styles/README.md | 11 + src/aiidalab_qe/app/static/styles/custom.css | 3 + 3 files changed, 145 insertions(+), 120 deletions(-) create mode 100644 src/aiidalab_qe/app/static/styles/README.md create mode 100644 src/aiidalab_qe/app/static/styles/custom.css diff --git a/qe.ipynb b/qe.ipynb index 71a439668..7d8254bd7 100644 --- a/qe.ipynb +++ b/qe.ipynb @@ -1,123 +1,134 @@ { - "cells": [ - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "%%javascript\n", - "IPython.OutputArea.prototype._should_scroll = function(lines) {\n", - " return false;\n", - "}\n", - "document.title='AiiDAlab QE app'" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "from aiida import load_profile\n", - "\n", - "load_profile();" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "# Fix pybel import path\n", - "try:\n", - " import sys\n", - "\n", - " sys.modules[\"pybel\"] = __import__(\"openbabel\", globals(), locals(), [\"pybel\"]).pybel\n", - "except Exception:\n", - " pass\n", - "\n", - "import urllib.parse as urlparse\n", - "from datetime import datetime\n", - "\n", - "import ipywidgets as ipw\n", - "from importlib_resources import files\n", - "from IPython.display import display\n", - "from jinja2 import Environment\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", - ")" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [ - "env = Environment()\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'

Copyright (c) {current_year} AiiDAlab team  Version: {__version__}

'\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)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3 (ipykernel)", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.9.13" - }, - "vscode": { - "interpreter": { - "hash": "d4d1e4263499bec80672ea0156c357c1ee493ec2b1c70f0acce89fc37c4a6abe" - } - } + "cells": [ + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "%%javascript\n", + "IPython.OutputArea.prototype._should_scroll = function(lines) {\n", + " return false;\n", + "}\n", + "document.title='AiiDAlab QE app'" + ] }, - "nbformat": 4, - "nbformat_minor": 4 + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "from aiida import load_profile\n", + "\n", + "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, + "metadata": {}, + "outputs": [], + "source": [ + "# Fix pybel import path\n", + "try:\n", + " import sys\n", + "\n", + " sys.modules[\"pybel\"] = __import__(\"openbabel\", globals(), locals(), [\"pybel\"]).pybel\n", + "except Exception:\n", + " pass\n", + "\n", + "import urllib.parse as urlparse\n", + "from datetime import datetime\n", + "\n", + "import ipywidgets as ipw\n", + "from importlib_resources import files\n", + "from IPython.display import display\n", + "from jinja2 import Environment\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", + ")" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "env = Environment()\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'

Copyright (c) {current_year} AiiDAlab team  Version: {__version__}

'\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)" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.9.13" + }, + "vscode": { + "interpreter": { + "hash": "d4d1e4263499bec80672ea0156c357c1ee493ec2b1c70f0acce89fc37c4a6abe" + } + } + }, + "nbformat": 4, + "nbformat_minor": 4 } diff --git a/src/aiidalab_qe/app/static/styles/README.md b/src/aiidalab_qe/app/static/styles/README.md new file mode 100644 index 000000000..d142efd7f --- /dev/null +++ b/src/aiidalab_qe/app/static/styles/README.md @@ -0,0 +1,11 @@ +# Stylesheets for the Quantum ESPRESSO app + +This folder contains `css` stylesheets which may be loaded directly from the CSS folder using + +```python +from aiidalab_widgets_base.utils.loaders import load_css_stylesheet + +load_css_stylesheet(package="aiidalab_qe.app.static.styles.css", filename=".css") +``` + +If `filename` is not provided, all CSS stylesheets will be loaded from the `css` package. diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css new file mode 100644 index 000000000..876d68a98 --- /dev/null +++ b/src/aiidalab_qe/app/static/styles/custom.css @@ -0,0 +1,3 @@ +.output_subarea { + max-width: none !important; +}