Skip to content

Commit

Permalink
Add control for the page guid
Browse files Browse the repository at this point in the history
  • Loading branch information
@superstar54
superstar54 committed Jan 9, 2025
1 parent 58c735f commit ed9bdf2
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 79 deletions.
148 changes: 70 additions & 78 deletions calculation_history.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,83 +6,11 @@
"metadata": {},
"outputs": [],
"source": [
"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, filter, sort, and manage your calculation history.\n",
" </p>\n",
" <h4>Filters and search</h4>\n",
" <ul>\n",
" <li><b>Quick search field:</b> Use the search bar above the table to find jobs by any visible field.</li>\n",
" <li><b>Column-specific filters:</b> Filter data directly in each column using their respective filter options.</li>\n",
" <li><b>Job state dropdown:</b> Filter jobs by their state (e.g., Finished, Running).</li>\n",
" <li><b>Date range picker:</b> Select a start and end date to narrow down jobs based on creation date.</li>\n",
" <li><b>Properties filter:</b> Select one or more properties to narrow the results. Only calculations that include all the selected properties will be displayed. Leave all checkboxes unselected to include calculations regardless of their properties.</li>\n",
" </ul>\n",
" <h4>Table actions</h4>\n",
" <ul>\n",
" <li><b>Editable fields:</b> Edit the <b>label</b> and <b>description</b> of a job directly by clicking on the respective fields.</li>\n",
" <li><b>Inspect:</b> Click on a job's ID link to view detailed information.</li>\n",
" <li><b>Delete:</b> Remove a job by clicking the \"Delete\" link in its row. A confirmation page will be opened.</li>\n",
" <li><b>Download:</b> Download raw data (i.e. input and output files) and/or the AiiDA archive of a job using the \"Download\" link.</li>\n",
" </ul>\n",
" <h4>Display options</h4>\n",
" <ul>\n",
" <li><b>Sorting:</b> Click any column header to sort the table by that column.</li>\n",
" <li><b>Column management:</b> Show, hide columns to customize the table view.</li>\n",
" <li><b>Time format:</b> Toggle between \"Absolute\" (specific dates) and \"Relative\" (time elapsed).</li>\n",
" <li><b>ID format:</b> Switch between \"PK\" or \"UUID\" for job identification.</li>\n",
" </ul>\n",
" </div>\n",
" \"\"\"\n",
")\n",
"\n",
"how_to"
"%%javascript\n",
"IPython.OutputArea.prototype._should_scroll = function(lines) {\n",
" return false;\n",
"}\n",
"document.title='AiiDAlab QE app calculation history'"
]
},
{
Expand All @@ -108,6 +36,70 @@
"load_css(css_path=\"src/aiidalab_qe/app/static/styles\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import ipywidgets as ipw\n",
"from importlib_resources import files\n",
"from IPython.display import Image\n",
"from jinja2 import Environment\n",
"\n",
"from aiidalab_qe.app.static import templates\n",
"from aiidalab_qe.common.infobox import InfoBox\n",
"\n",
"output = ipw.Output()\n",
"logo_img = Image(\n",
" filename=\"docs/source/_static/logo.png\",\n",
" width=\"700\",\n",
")\n",
"logo = ipw.Output()\n",
"with logo:\n",
" display(logo_img)\n",
"logo.add_class(\"logo\")\n",
"subtitle = ipw.HTML(\"<h3 id='subtitle'>🎉 Calculation history 🎉</h3>\")\n",
"env = Environment()\n",
"guide_template = (\n",
" files(templates).joinpath(\"calculation_history_guide.jinja\").read_text()\n",
")\n",
"guide = ipw.HTML(env.from_string(guide_template).render())\n",
"\n",
"\n",
"info_container = InfoBox(layout=ipw.Layout(margin=\"14px 2px 0\"))\n",
"guide_toggle = ipw.ToggleButton(\n",
" layout=ipw.Layout(width=\"150px\"),\n",
" button_style=\"\",\n",
" icon=\"book\",\n",
" value=False,\n",
" description=\"Page guide\",\n",
" tooltip=\"Learn how to use the app\",\n",
" disabled=False,\n",
")\n",
"\n",
"\n",
"def _on_guide_toggle(change: dict):\n",
" \"\"\"Toggle the guide section.\"\"\"\n",
" if change[\"new\"]:\n",
" info_container.children = [\n",
" guide,\n",
" ]\n",
" info_container.layout.display = \"flex\"\n",
" else:\n",
" info_container.children = []\n",
" info_container.layout.display = \"none\"\n",
"\n",
"\n",
"guide_toggle.observe(\n",
" _on_guide_toggle,\n",
" \"value\",\n",
")\n",
"\n",
"controls = ipw.VBox(children=[logo, subtitle, guide_toggle, info_container])\n",
"controls"
]
},
{
"cell_type": "code",
"execution_count": null,
Expand All @@ -132,7 +124,7 @@
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"display_name": "base",
"language": "python",
"name": "python3"
},
Expand Down
28 changes: 28 additions & 0 deletions src/aiidalab_qe/app/static/templates/calculation_history_guide.jinja
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<div class="guide">
<h2>How to use this page</h2>
<p>
This page allows you to view, filter, sort, and manage your calculation history.
</p>
<h4>Filters and search</h4>
<ul>
<li><b>Quick search field:</b> Use the search bar above the table to find jobs by any visible field.</li>
<li><b>Column-specific filters:</b> Filter data directly in each column using their respective filter options.</li>
<li><b>Job state dropdown:</b> Filter jobs by their state (e.g., Finished, Running).</li>
<li><b>Date range picker:</b> Select a start and end date to narrow down jobs based on creation date.</li>
<li><b>Properties filter:</b> Select one or more properties to narrow the results. Only calculations that include all the selected properties will be displayed. Leave all checkboxes unselected to include calculations regardless of their properties.</li>
</ul>
<h4>Table actions</h4>
<ul>
<li><b>Editable fields:</b> Edit the <b>label</b> and <b>description</b> of a job directly by clicking on the respective fields.</li>
<li><b>Inspect:</b> Click on a job's ID link to view detailed information.</li>
<li><b>Delete:</b> Remove a job by clicking the "Delete" link in its row. A confirmation page will be opened.</li>
<li><b>Download:</b> Download raw data (i.e. input and output files) and/or the AiiDA archive of a job using the "Download" link.</li>
</ul>
<h4>Display options</h4>
<ul>
<li><b>Sorting:</b> Click any column header to sort the table by that column.</li>
<li><b>Column management:</b> Show, hide columns to customize the table view.</li>
<li><b>Time format:</b> Toggle between "Absolute" (specific dates) and "Relative" (time elapsed).</li>
<li><b>ID format:</b> Switch between "PK" or "UUID" for job identification.</li>
</ul>
</div>
1 change: 0 additions & 1 deletion src/aiidalab_qe/app/utils/search_jobs.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,6 @@ def load_data(self):
# Initialize empty columns for an empty DataFrame
df["Creation time"] = pd.Series(dtype="str")
df["Delete"] = pd.Series(dtype="str")
print(df[0:5])
return df[
[
"PK_with_link",
Expand Down

0 comments on commit ed9bdf2

Please sign in to comment.