2022_09_16-Baltruschat-IPython_Widgets_and_Voila.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "e9baff36-301a-49e8-a1db-8422a8549751",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "# From Notebook to Web-App with Voilà"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "18b9cbd1-f30d-48e3-a3f8-c33d5a808b2e",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "**Author:** Marcel Baltruschat ([@GitHub](https://github.com/mrcblt))<br>\n",
    "**Date:** 15.09.2022<br>\n",
    "**License:** MIT\n",
    "<br><br><br>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cb77a16b-1da8-4482-95ed-9a578631e9b0",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "## Installation with Conda"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "84bd3207-2685-48f6-9122-40e2a3fe730a",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "```\n",
    "conda create -n voila -c conda-forge python=3.10 voila jupyterlab pandas numpy rdkit ipywidgets plotly py3dmol\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e2c794d1-b697-4c58-9da8-d7111be8171b",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c013189e-4ffb-4f99-a99f-6863775d7484",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "## Imports"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "d342349e-edba-4378-a179-3006c0a63ffa",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [],
   "source": [
    "import io\n",
    "import sys\n",
    "\n",
    "import ipywidgets as widgets\n",
    "import pandas as pd\n",
    "import plotly\n",
    "import plotly.graph_objects as go\n",
    "import py3Dmol\n",
    "import rdkit\n",
    "import voila\n",
    "from IPython.display import HTML, clear_output, display\n",
    "from ipywidgets import interact, fixed\n",
    "from rdkit.Chem import AllChem as Chem"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bad80ac3-822a-4c84-bc1e-b0da37fbd24d",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "### Used Versions"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "d80c28e9-6d4e-41fe-9d96-8dd8429f0a97",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Python: 3.10.6 \n",
      "ipywidgets: 7.7.2\n",
      "Plotly: 5.10.0\n",
      "RDKit: 2022.03.5\n",
      "py3Dmol: 1.8.1\n",
      "Voilà: 0.3.6\n"
     ]
    }
   ],
   "source": [
    "print(f'Python: {sys.version.split(\"|\")[0]}\\nipywidgets: {widgets.__version__}\\nPlotly: {plotly.__version__}\\nRDKit: {rdkit.__version__}\\npy3Dmol: {py3Dmol.__version__}\\nVoilà: {voila.__version__}')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "461acf49-4016-48ca-a195-832fad2c6f86",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "024a2163-9769-4ae4-bf14-06d71894dda1",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "## [How to](https://voila.readthedocs.io/en/stable/using.html) use Voilà?\n",
    "\n",
    "There are two options to create a Voilà application.\n",
    "1. To run a notebook as a standalone application, in the commanline navigate to the directory that contains the notebook and then use the command `voila <path-to-notebook> <options>`.\n",
    "2. To use Voilà as a Jupyter server extension on a running Jupyter notebook / lab server, go to the following URL:  `<url-of-my-server>/voila`. For example, if Jupyter lab was running at `http://localhost:8888/lab`, then Voilà would be accessed at `http://localhost:8888/voila`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ad35ca91-0c59-4c3c-a50e-1d94bbdb9205",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bb94ff26-2521-4821-8e9e-be38dde287ba",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "## Widget Examples"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "7247c3de-4010-4bd6-a9cc-cfe720cdc510",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [],
   "source": [
    "w = widgets.IntSlider()\n",
    "w_frs = widgets.FloatRangeSlider(\n",
    "    value=[5, 7.5],\n",
    "    min=0,\n",
    "    max=10.0,\n",
    "    step=0.1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='horizontal',\n",
    "    readout=True,\n",
    "    readout_format='.2f',\n",
    ")\n",
    "\n",
    "w_rb = widgets.RadioButtons(\n",
    "    options=['pepperoni', 'pineapple', 'anchovies'],\n",
    "    value='pineapple',\n",
    "    layout={'width': 'max-content'},\n",
    "    style={'description_width': 'initial'},\n",
    "    description='Pizza topping:',\n",
    "    disabled=False,\n",
    ")\n",
    "\n",
    "w_s = widgets.Dropdown(\n",
    "    options=['Linux', 'Windows', 'macOS'],\n",
    "    value='macOS',\n",
    "    description='OS:',\n",
    "    disabled=False,\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "5b4b10d3-77d3-4f77-9140-737b4ca92c43",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "819fe86e454247f984152e46ac19e596",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Tab(children=(Accordion(children=(IntSlider(value=0), FloatRangeSlider(value=(5.0, 7.5), continuous_update=Fal…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "accordion_s = widgets.Accordion(children=[w, w_frs])\n",
    "accordion_s.set_title(0, 'Int slider')\n",
    "accordion_s.set_title(1, 'Float range slider')\n",
    "\n",
    "accordion_c = widgets.Accordion(children=[w_rb, w_s])\n",
    "accordion_c.set_title(0, 'Radio buttons')\n",
    "accordion_c.set_title(1, 'Dropdown selection')\n",
    "\n",
    "tab = widgets.Tab(children=[accordion_s, accordion_c])\n",
    "tab.set_title(0, 'Sliders')\n",
    "tab.set_title(1, 'Selections')\n",
    "tab"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "18b12c0b-341c-4ce8-b518-e3db72b723f6",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "-----------\n",
    "## Example Plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "84dd379d-0dae-4f40-9db5-b55164830ef7",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "bb68a5ee805a471a9f8ea5357e89feb5",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "FigureWidget({\n",
       "    'data': [{'type': 'heatmap',\n",
       "              'uid': '0caf55b3-5ba3-4323-86b5-2132d3bc9914',\n",
       " …"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "trace = go.Heatmap(z=[[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],\n",
    "                   x=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],\n",
    "                   y=['Morning', 'Afternoon', 'Evening'])\n",
    "data = [trace]\n",
    "layout = go.Layout(title='Activity Heatmap')\n",
    "figure = go.Figure(data=data, layout=layout)\n",
    "f2 = go.FigureWidget(figure)\n",
    "f2"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "360ec8e5-3ca5-4e7a-aee0-531d722714a6",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "---------\n",
    "## Display Molecules\n",
    "\n",
    "Source: http://rdkit.blogspot.com/2016/07/using-ipywidgets-and-py3dmol-to-browse.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "11e8dba2-869e-416f-bdfc-492a2985fe83",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "af8965d868204507a4427f68a4d4e355",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "interactive(children=(IntSlider(value=0, description='confId', max=9), Output()), _dom_classes=('widget-intera…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def drawit(m, p, confId=-1):\n",
    "    mb = Chem.MolToMolBlock(m, confId=confId)\n",
    "    p.removeAllModels()\n",
    "    p.addModel(mb, 'sdf')\n",
    "    p.setStyle({'stick': {}})\n",
    "    p.setBackgroundColor('0xeeeeee')\n",
    "    p.zoomTo()\n",
    "    return p.show()\n",
    "\n",
    "\n",
    "m = Chem.MolFromSmiles('COc1ccc2nc([nH]c2c1)[S@](=O)Cc1ncc(C)c(OC)c1C')\n",
    "m = Chem.AddHs(m)\n",
    "Chem.EmbedMultipleConfs(m, numConfs=10, randomSeed=0xf00d, useExpTorsionAnglePrefs=True, useBasicKnowledge=True)\n",
    "# align to one of the ring systems:\n",
    "Chem.AlignMolConformers(m, m.GetSubstructMatch(Chem.MolFromSmarts('c1[nH]c2ccccc2n1')))\n",
    "\n",
    "# now construct the view and interactive widget:\n",
    "p = py3Dmol.view(width=400, height=400)\n",
    "interact(drawit, m=fixed(m), p=fixed(p), confId=(0, m.GetNumConformers() - 1));"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1c66db20-5b00-4f3e-b330-050a5ca90503",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "-----\n",
    "## Display Proteins"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "beae912f-d33d-4ea6-928b-f5af82dc5b36",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_16633172180980756\"  style=\"position: relative; width: 640px; height: 480px\">\n        <p id=\"3dmolwarning_16633172180980756\" style=\"background-color:#ffcccc;color:black\">You appear to be running in JupyterLab (or JavaScript failed to load for some other reason).  You need to install the 3dmol extension: <br>\n        <tt>jupyter labextension install jupyterlab_3dmol</tt></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n      resolve();\n    };\n  var firstScriptTag = document.getElementsByTagName('script')[0];\n  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n});\n};\n\nif(typeof $3Dmolpromise === 'undefined') {\n$3Dmolpromise = null;\n  $3Dmolpromise = loadScriptAsync('https://cdn.jsdelivr.net/npm/3dmol@latest/build/3Dmol-min.min.js');\n}\n\nvar viewer_16633172180980756 = null;\nvar warn = document.getElementById(\"3dmolwarning_16633172180980756\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_16633172180980756 = $3Dmol.createViewer($(\"#3dmolviewer_16633172180980756\"),{backgroundColor:\"white\"});\n$3Dmol.download(\"pdb:1hvr\", viewer_16633172180980756, {}, function() {\nviewer_16633172180980756.zoomTo();\n\tviewer_16633172180980756.setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\nviewer_16633172180980756.render();\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_16633172180980756\"  style=\"position: relative; width: 640px; height: 480px\">\n",
       "        <p id=\"3dmolwarning_16633172180980756\" style=\"background-color:#ffcccc;color:black\">You appear to be running in JupyterLab (or JavaScript failed to load for some other reason).  You need to install the 3dmol extension: <br>\n",
       "        <tt>jupyter labextension install jupyterlab_3dmol</tt></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "      resolve();\n",
       "    };\n",
       "  var firstScriptTag = document.getElementsByTagName('script')[0];\n",
       "  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n",
       "});\n",
       "};\n",
       "\n",
       "if(typeof $3Dmolpromise === 'undefined') {\n",
       "$3Dmolpromise = null;\n",
       "  $3Dmolpromise = loadScriptAsync('https://cdn.jsdelivr.net/npm/3dmol@latest/build/3Dmol-min.min.js');\n",
       "}\n",
       "\n",
       "var viewer_16633172180980756 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_16633172180980756\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_16633172180980756 = $3Dmol.createViewer($(\"#3dmolviewer_16633172180980756\"),{backgroundColor:\"white\"});\n",
       "$3Dmol.download(\"pdb:1hvr\", viewer_16633172180980756, {}, function() {\n",
       "viewer_16633172180980756.zoomTo();\n",
       "\tviewer_16633172180980756.setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\n",
       "viewer_16633172180980756.render();\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<py3Dmol.view at 0x7fc6b0cee980>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "view = py3Dmol.view(query='pdb:1hvr')\n",
    "view.setStyle({'cartoon': {'color': 'spectrum'}})\n",
    "view"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "575ad41c-872d-4a8a-b1d4-5dfe802753e9",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "---\n",
    "## Small \"real world\" example\n",
    "##### You can use the [hERG dataset](datasets/hERG_exact_IC50_ChEMBL31.csv) for testing."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "501f1337-34b8-484a-bde4-1abedb7167d7",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "13e336ccd6ae43379ea07293318b93c2",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "VBox(children=(HBox(children=(FileUpload(value={}, accept='csv', description='Upload'), Button(description='Sh…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "uploader = widgets.FileUpload(accept='csv', multiple=False)\n",
    "button = widgets.Button(description='Show')\n",
    "hbox = widgets.HBox((uploader, button))\n",
    "output = widgets.Output()\n",
    "vbox = widgets.VBox((hbox, output))\n",
    "vbox"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "58e1bdf6-b723-43e5-938d-7c78c2b44f82",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "f42dc72f1fcd409da9ace050cd4dbf90",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "col_box = widgets.HBox()\n",
    "col_box"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "cced7557-ffc9-4030-871f-0e9f0d991dc2",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [],
   "source": [
    "df = None\n",
    "\n",
    "\n",
    "def show_df(b):\n",
    "    with output:\n",
    "        clear_output()\n",
    "    try:\n",
    "        uploaded_file = uploader.value[list(uploader.value.keys())[0]]\n",
    "        global df\n",
    "        df = pd.read_csv(io.BytesIO(uploaded_file['content']), delimiter=';')\n",
    "        with output:\n",
    "            print(f'\\nDataFrame size: {len(df)}. Showing first two lines:\\n')\n",
    "            display(HTML(df.head(2).to_html()))\n",
    "        num_cols = [c for c, d in df.dtypes.items() if str(d).startswith('int') or str(d).startswith('float')]\n",
    "        col_menu = widgets.Dropdown(options=num_cols)\n",
    "        button2 = widgets.Button(description='Plot column values')\n",
    "        button2.on_click(show_plot)\n",
    "        col_box.children = (col_menu, button2)\n",
    "    except:\n",
    "        with output:\n",
    "            print('Please select a CSV file with ; as separator.')\n",
    "\n",
    "\n",
    "button.on_click(show_df)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "75899ebb-68ca-4ed4-b6ae-38f4c93d5a74",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [],
   "source": [
    "def show_plot(b):\n",
    "    col = col_box.children[0].value\n",
    "    trace = go.Histogram(x=df[col])\n",
    "    data = [trace]\n",
    "    layout = go.Layout(title=f'Histogram for column {col}')\n",
    "    figure = go.Figure(data=data, layout=layout)\n",
    "    plot_box.children = (go.FigureWidget(figure),)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "4491ce6e-1cb5-49ff-a0d7-7b25c18660f5",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "275a74da7be5459cb6a2df2c52ea7369",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Box()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "plot_box = widgets.Box()\n",
    "plot_box"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "265d6898-def0-4064-93c6-c3e34abf8c8b",
   "metadata": {
    "pycharm": {
     "name": "#%% md\n"
    }
   },
   "source": [
    "---\n",
    "### References\n",
    "\n",
    "* https://voila.readthedocs.io/en/stable/index.html\n",
    "* https://ipywidgets.readthedocs.io/en/7.7.1/examples/Widget%20List.html\n",
    "* http://rdkit.blogspot.com/2016/07/using-ipywidgets-and-py3dmol-to-browse.html\n",
    "* https://www.blopig.com/blog/2016/10/viewing-3d-molecules-interactively-in-jupyter-ipython-notebooks/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "19284a25-593a-49a2-8d4e-63eb7a597f39",
   "metadata": {
    "pycharm": {
     "name": "#%%\n"
    }
   },
   "outputs": [],
   "source": []
  }
 ],
 "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.10.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}