Switch to a lab-based app for the Voila frontend

Co-authored-by: martinRenou <martin.renou@gmail.com>

.binder/environment.yml

@@ -8,6 +8,5 @@ dependencies:
   - bqplot
   - scipy
   - ipympl
-  - ipympl
   - xleaflet=0.16.0
   - xeus-cling=0.13.0

.binder/postBuild

@@ -6,4 +6,7 @@ jlpm && jlpm run build
 python -m pip install -e .
 jupyter labextension develop . --overwrite
 jupyter server extension enable voila.server_extension --sys-prefix
-jupyter serverextension enable voila.server_extension --sys-prefix
+jupyter serverextension enable voila.server_extension --sys-prefix
+
+# force installing ipywidgets 8
+python -m pip install --pre -U ipywidgets

.eslintignore

@@ -15,6 +15,7 @@ node_modules
 coverage
 *.map.js
 *.bundle.js
+*.voila.js
 
 # jetbrains IDE stuff
 .idea/

.gitignore

@@ -30,7 +30,7 @@ config.rst
 package-lock.json
 
 share/jupyter/voila/templates/base/static/*voila.js
-share/jupyter/voila/templates/base/static/*[woff|woff2|eot|svg]
+share/jupyter/voila/templates/base/static/*.[woff|woff2|eot|svg]
 
 share/jupyter/voila/templates/classic/static/labvariables.css
 share/jupyter/voila/templates/classic/static/materialcolors.css

.prettierignore

@@ -7,5 +7,6 @@ node_modules
 build
 notebooks/
 .vscode/
+.pytest_cache
 
-ui-tests/playwright-report
+ui-tests/playwright-report

docs/source/contribute.rst

@@ -189,6 +189,23 @@ To lint the packages:
    # run prettier
    jlpm run prettier
 
+About the Voila Frontend
+========================
+
+The Voila frontend is built as a JupyterLab-based application using JupyterLab components.
+
+This makes it possible to reuse existing plugins and extensions for Jupyterlab such as core JupyterLab plugin like the JSON viewer,
+as well as third-party mime renderers like the `FASTA viewer <https://github.com/jupyterlab/jupyter-renderers>`_.
+
+The Voila frontend is able to load existing JupyterLab extensions installed as prebuilt extensions under ``${PREFIX}/share/labextensions``,
+similar to the way it works in JupyterLab.
+
+These extensions are typically distributed via ``pip`` and ``conda`` packages and can easily be installed by end users without requiring Node.js.
+Widget packages usually now include a prebuilt extension for JupyterLab 3.0 by default, which should automatically work in Voila too.
+
+Check out the `JupyterLab Documentation on prebuilt extensions <https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#prebuilt-extensions>`_ for more info.
+
+The code for the frontend is located under ``packages/voila``, with support for loading federated extensions in ``packages/voila/index.js``.
 
 Tests
 =====

docs/source/using.rst

@@ -132,25 +132,3 @@ The examples can then be served with:
 
    cd notebooks/
    voila
-
-
-Using third-party Widgets with Voilà
-====================================
-
-By default, Voilà doesn't serve Jupyter Widgets installed as a classic notebook extension (nbextension).
-
-Instead, it fallbacks to fetching the files from a CDN. This might result in an error (404) in case the
-custom widget has not been published to ``npm``, or when Voilà runs in an environment without an Internet
-connection.
-
-To let the Voilà standalone app serve the nbextensions, use the ``enable_nbextensions`` flag as follows:
-
-.. code-block:: bash
-
-   voila --enable_nbextensions=True
-
-When using Voilà as a server extension:
-
-.. code-block:: bash
-
-    jupyter notebook --VoilaConfiguration.enable_nbextensions=True

notebooks/mimerenderers.ipynb

@@ -0,0 +1,159 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# JSON"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import Button, Output\n",
+    "from IPython import display\n",
+    "\n",
+    "button = Button(description='Output JSON')\n",
+    "output = Output()\n",
+    "obj = {\n",
+    "    \"abcde\": 1234,\n",
+    "    \"nested\": list(range(10))\n",
+    "}\n",
+    "\n",
+    "@output.capture()\n",
+    "def on_click(change):\n",
+    "    display.display(display.JSON(obj))\n",
+    "    \n",
+    "    \n",
+    "button.on_click(on_click)\n",
+    "display.display(button)\n",
+    "output"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "display.JSON(obj)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Fasta"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "fasta_button = Button(description='Output FASTA')\n",
+    "fasta_output = Output()\n",
+    "\n",
+    "\n",
+    "def Fasta(data=''):\n",
+    "    bundle = {}\n",
+    "    bundle['application/vnd.fasta.fasta'] = data\n",
+    "    bundle['text/plain'] = data\n",
+    "    display.display(bundle, raw=True)\n",
+    "    \n",
+    "    \n",
+    "@fasta_output.capture()\n",
+    "def on_click(change):\n",
+    "    Fasta(\"\"\">SEQUENCE_1\n",
+    "MTEITAAMVKELRESTGAGMMDCKNALSETNGDFDKAVQLLREKGLGKAAKKADRLAAEG\n",
+    "LVSVKVSDDFTIAAMRPSYLSYEDLDMTFVENEYKALVAELEKENEERRRLKDPNKPEHK\n",
+    "IPQFASRKQLSDAILKEAEEKIKEELKAQGKPEKIWDNIIPGKMNSFIADNSQLDSKLTL\n",
+    "MGQFYVMDDKKTVEQVIAEKEKEFGGKIKIVEFICFEVGEGLEKKTEDFAAEVAAQL\n",
+    ">SEQUENCE_2\n",
+    "SATVSEINSETDFVAKNDQFIALTKDTTAHIQSNSLQSVEELHSSTINGVKFEEYLKSQI\n",
+    "ATIGENLVVRRFATLKAGANGVVNGYIHTNGRVGVVIAAACDSAEVASKSRDLLRQICMH\"\"\")\n",
+    "\n",
+    "\n",
+    "fasta_button.on_click(on_click)\n",
+    "display.display(fasta_button)\n",
+    "fasta_output"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# GeoJSON"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from IPython.display import GeoJSON\n",
+    "\n",
+    "\n",
+    "geojson_button = Button(description='Output GeoJSON')\n",
+    "geojson_output = Output()\n",
+    "\n",
+    "    \n",
+    "@geojson_output.capture()\n",
+    "def on_click(change):\n",
+    "    obj = GeoJSON({\n",
+    "        \"type\": \"Feature\",\n",
+    "        \"geometry\": {\n",
+    "            \"type\": \"Point\",\n",
+    "            \"coordinates\": [-118.4563712, 34.0163116]\n",
+    "        }\n",
+    "    })\n",
+    "    display.display(obj)\n",
+    "    \n",
+    "\n",
+    "geojson_button.on_click(on_click)\n",
+    "display.display(geojson_button)\n",
+    "geojson_output"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "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.1"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

packages/jupyterlab-preview/src/preview.tsx

@@ -150,8 +150,8 @@ export class VoilaPreview extends DocumentWidget<IFrame, INotebookModel> {
    * Reload the preview.
    */
   reload(): void {
-    const iframe = this.content.node.querySelector('iframe')!;
-    if (iframe.contentWindow) {
+    const iframe = this.content.node.querySelector('iframe');
+    if (iframe && iframe.contentWindow) {
       iframe.contentWindow.location.reload();
     }
   }