Make use of JupyterLab mimetype renderers

notebooks/bokeh.ipynb

@@ -0,0 +1,133 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## Serving a Bokeh application in Voila"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import yaml\n",
+    "import os\n",
+    "\n",
+    "from bokeh.layouts import column\n",
+    "from bokeh.models import ColumnDataSource, Slider\n",
+    "from bokeh.plotting import figure\n",
+    "from bokeh.themes import Theme\n",
+    "from bokeh.io import show, output_notebook\n",
+    "\n",
+    "from bokeh.sampledata.sea_surface_temperature import sea_surface_temperature\n",
+    "\n",
+    "output_notebook()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Serving a Bokeh app in Voila is the same as serving it in JupyterLab, see https://docs.bokeh.org/en/latest/docs/user_guide/output/jupyter.html#jupyterlab"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def bkapp(doc):\n",
+    "    df = sea_surface_temperature.copy()\n",
+    "    source = ColumnDataSource(data=df)\n",
+    "\n",
+    "    plot = figure(x_axis_type='datetime', y_range=(0, 25),\n",
+    "                  y_axis_label='Temperature (Celsius)',\n",
+    "                  title=\"Sea Surface Temperature at 43.18, -70.43\")\n",
+    "    plot.line('time', 'temperature', source=source)\n",
+    "\n",
+    "    def callback(attr, old, new):\n",
+    "        if new == 0:\n",
+    "            data = df\n",
+    "        else:\n",
+    "            data = df.rolling('{0}D'.format(new)).mean()\n",
+    "        source.data = ColumnDataSource.from_df(data)\n",
+    "\n",
+    "    slider = Slider(start=0, end=30, value=0, step=1, title=\"Smoothing by N Days\")\n",
+    "    slider.on_change('value', callback)\n",
+    "\n",
+    "    doc.add_root(column(slider, plot))\n",
+    "\n",
+    "    doc.theme = Theme(json=yaml.load(\"\"\"\n",
+    "        attrs:\n",
+    "            Figure:\n",
+    "                background_fill_color: \"#DDDDDD\"\n",
+    "                outline_line_color: white\n",
+    "                toolbar_location: above\n",
+    "                height: 500\n",
+    "                width: 800\n",
+    "            Grid:\n",
+    "                grid_line_dash: [6, 4]\n",
+    "                grid_line_color: white\n",
+    "    \"\"\", Loader=yaml.FullLoader))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**Note**: You need to specify the Voila URL to Bokeh, by passing it to the `show` method:\n",
+    "\n",
+    "```python\n",
+    "import os\n",
+    "from urllib.parse import urlparse\n",
+    "\n",
+    "url = urlparse(os.environ.get(\"VOILA_SERVER_URL\"))\n",
+    "\n",
+    "show(bkapp, notebook_url=f\"{url.scheme}://{url.netloc}\")\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "from urllib.parse import urlparse\n",
+    "\n",
+    "url = urlparse(os.environ.get(\"VOILA_SERVER_URL\"))\n",
+    "\n",
+    "show(bkapp, notebook_url=f\"{url.scheme}://{url.netloc}\")"
+   ]
+  }
+ ],
+ "metadata": {
+  "anaconda-cloud": {},
+  "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.11.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}