Add loading widgets (#193)

aiidalab · Jan 10, 2025 · 66acf99 · 66acf99
1 parent 7b626ab
commit 66acf99
Showing 1 changed file with 78 additions and 32 deletions.
diff --git a/code_setup.ipynb b/code_setup.ipynb
@@ -46,6 +46,30 @@
     "</style>\n"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipywidgets as ipw\n",
+    "\n",
+    "\n",
+    "class LoadingWidget(ipw.HBox):\n",
+    "    \"\"\"Widget for displaying a loading spinner.\"\"\"\n",
+    "\n",
+    "    def __init__(self, message=\"Loading\", **kwargs):\n",
+    "        super().__init__(\n",
+    "            children=[\n",
+    "                ipw.Label(message),\n",
+    "                ipw.HTML(\"<i class='fa fa-spinner fa-spin fa-2x fa-fw'/>\"),\n",
+    "            ],\n",
+    "            layout=ipw.Layout(justify_content=\"center\"),\n",
+    "            **kwargs,\n",
+    "        )\n",
+    "        self.add_class(\"loading\")"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -87,24 +111,12 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import ipywidgets as ipw\n",
-    "from aiidalab_widgets_base.computational_resources import ResourceSetupBaseWidget\n",
-    "from aiidalab_widgets_base.utils import StatusHTML\n",
-    "\n",
-    "setup_message = StatusHTML(clear_after=15)\n",
-    "\n",
-    "widget = ResourceSetupBaseWidget()\n",
-    "ipw.dlink(\n",
-    "    (widget, \"message\"),\n",
-    "    (setup_message, \"message\"),\n",
-    ")\n",
-    "\n",
-    "ipw.VBox(\n",
+    "new_codes_widget_container = ipw.VBox(\n",
     "    children=[\n",
-    "        widget,\n",
-    "        setup_message,\n",
-    "    ]\n",
-    ")"
+    "        LoadingWidget(\"Loading resource setup widget\"),\n",
+    "    ],\n",
+    ")\n",
+    "display(new_codes_widget_container)"
    ]
   },
   {
@@ -118,6 +130,44 @@
     "Below are the available codes in the AiiDA database. Use the controls to filter the list by label, executable path, and visibility. You can mark individual codes as _hidden_ to exclude them from code selectors used in apps (note that some apps may enforce the inclusion of hidden codes). Click **Unhide all** to include all codes. If codes are deleted from the database, click **Refresh codes** to reflect the change in the list.\n"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "available_codes_widget_container = ipw.VBox(\n",
+    "    children=[\n",
+    "        LoadingWidget(\"Loading available codes\"),\n",
+    "    ],\n",
+    ")\n",
+    "display(available_codes_widget_container)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipywidgets as ipw\n",
+    "from aiidalab_widgets_base.computational_resources import ResourceSetupBaseWidget\n",
+    "from aiidalab_widgets_base.utils import StatusHTML\n",
+    "\n",
+    "setup_message = StatusHTML(clear_after=15)\n",
+    "\n",
+    "widget = ResourceSetupBaseWidget()\n",
+    "ipw.dlink(\n",
+    "    (widget, \"message\"),\n",
+    "    (setup_message, \"message\"),\n",
+    ")\n",
+    "\n",
+    "new_codes_widget_container.children = [\n",
+    "    widget,\n",
+    "    setup_message,\n",
+    "]"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -146,14 +196,10 @@
     ")\n",
     "refresh_button.on_click(lambda _: render())\n",
     "\n",
-    "display(\n",
-    "    ipw.VBox(\n",
-    "        children=[\n",
-    "            refresh_button,\n",
-    "            output,\n",
-    "        ]\n",
-    "    )\n",
-    ")\n",
+    "available_codes_widget_container.children = [\n",
+    "    refresh_button,\n",
+    "    output,\n",
+    "]\n",
     "\n",
     "render()"
    ]
@@ -164,15 +210,15 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "def on_code_setup_message_change(change):\n",
-    "    if \"created\" in change[\"new\"]:\n",
-    "        render()\n",
+    "# def on_code_setup_message_change(change):\n",
+    "#     if \"created\" in change[\"new\"]:\n",
+    "#         render()\n",
     "\n",
     "\n",
-    "widget.aiida_code_setup.observe(\n",
-    "    on_code_setup_message_change,\n",
-    "    \"message\",\n",
-    ")"
+    "# widget.aiida_code_setup.observe(\n",
+    "#     on_code_setup_message_change,\n",
+    "#     \"message\",\n",
+    "# )"
    ]
   }
  ],