Improve calculation history page

calculation_history.ipynb

@@ -1,10 +1,78 @@
 {
  "cells": [
   {
-   "cell_type": "markdown",
+   "cell_type": "code",
+   "execution_count": null,
    "metadata": {},
+   "outputs": [],
    "source": [
-    "# AiiDAlab Quantum ESPRESSO App"
+    "import ipywidgets as ipw\n",
+    "\n",
+    "how_to = ipw.HTML(\n",
+    "    \"\"\"\n",
+    "    <style>\n",
+    "        .page-title {\n",
+    "            font-family: Arial, sans-serif;\n",
+    "            font-size: 28px;\n",
+    "            color: #2c3e50;\n",
+    "            margin-top: 0;\n",
+    "            margin-bottom: 20px;\n",
+    "        }\n",
+    "        .how-to-section {\n",
+    "            font-family: Arial, sans-serif;\n",
+    "            background-color: #f9f9f9;\n",
+    "            border: 1px solid #ddd;\n",
+    "            border-radius: 8px;\n",
+    "            padding: 15px 20px;\n",
+    "            margin-bottom: 20px;\n",
+    "            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n",
+    "        }\n",
+    "        .how-to-section h2 {\n",
+    "            color: #2c3e50;\n",
+    "            font-size: 24px;\n",
+    "            margin-top: 0;\n",
+    "        }\n",
+    "        .how-to-section p {\n",
+    "            font-size: 14px;\n",
+    "            color: #7f8c8d;\n",
+    "            line-height: 1.6;\n",
+    "        }\n",
+    "        .how-to-section ul {\n",
+    "            list-style-type: disc;\n",
+    "            padding-left: 20px;\n",
+    "        }\n",
+    "        .how-to-section ul li {\n",
+    "            font-size: 14px;\n",
+    "            color: #34495e;\n",
+    "            margin-bottom: 8px;\n",
+    "        }\n",
+    "        .how-to-section ul li b {\n",
+    "            color: #2c3e50;\n",
+    "        }\n",
+    "    </style>\n",
+    "    <div class=\"page-title\">Calculation History</div>\n",
+    "    <div class=\"how-to-section\">\n",
+    "        <h2>How to Use This Page</h2>\n",
+    "        <p>\n",
+    "            This page allows you to view and manage your calculation history. Use the table below to \n",
+    "            see all jobs in the database. You can use the following filters to narrow down your search:\n",
+    "        </p>\n",
+    "        <ul>\n",
+    "            <li><b>Label Search Field:</b> Enter a job label to find matching jobs.</li>\n",
+    "            <li><b>Job State Dropdown:</b> Filter jobs based on their state (e.g., finished, waiting).</li>\n",
+    "            <li><b>Date Range Picker:</b> Select a start and end date to view jobs created within that range.</li>\n",
+    "            <li><b>Properties Filter:</b> Select specific properties associated with jobs.</li>\n",
+    "        </ul>\n",
+    "        <p>\n",
+    "            Each row in the table provides links to inspect, delete or download a job. To delete a job, click the \"Delete\" \n",
+    "            link in the respective row. To view detailed information about a job, click the \"PK\" link. To download the \n",
+    "            input/output files of a job, click the \"Download\" link.\n",
+    "        </p>\n",
+    "    </div>\n",
+    "    \"\"\"\n",
+    ")\n",
+    "\n",
+    "how_to"
    ]
   },
   {

delete.ipynb

@@ -4,7 +4,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "# AiiDAlab QuantumESPRESSO App\n",
+    "# AiiDAlab Quantum ESPRESSO App\n",
     "\n",
     "<font color=\"red\"><b>Caution!</b></font> Deleting this job will also remove <b>all associated nodes</b>, including every calculation initiated by this job and their respective results. This action is <b>irreversible</b>.\n"
    ]

download.ipynb

@@ -0,0 +1,79 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# AiiDAlab Quantum ESPRESSO App"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%%capture\n",
+    "from aiida import load_profile\n",
+    "\n",
+    "# Load AiiDA profile\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": [
+    "import urllib.parse as urlparse\n",
+    "\n",
+    "from aiida.orm import load_node\n",
+    "from aiidalab_qe.app.result.utils.download_data import DownloadDataWidget\n",
+    "\n",
+    "# Parse the primary key from the Jupyter notebook URL\n",
+    "url = urlparse.urlsplit(jupyter_notebook_url)  # noqa F821\n",
+    "query = urlparse.parse_qs(url.query)\n",
+    "pk = int(query[\"pk\"][0])\n",
+    "\n",
+    "\n",
+    "node = load_node(pk)\n",
+    "\n",
+    "download_button_widget = DownloadDataWidget(workchain_node=node)\n",
+    "download_button_widget"
+   ]
+  }
+ ],
+ "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"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}