Jupyter_Annotate_Widget.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Learn how to make a jupyter notebook widget for annotation of atom properties"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "![](annotate_banner.png)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Not so long ago Greg Landrum published a blog post with an example of how the SVG rendering from RDKit in a jupyter notebook can be made interactive. http://rdkit.blogspot.com/2019/08/an-interactive-rdkit-widget-for-jupyter.html I think this was cool and can open up for a lot of interesting applications. Say for example there's a need for annotation of atom properties of a dataset, if one wants to store e.g. 13C NMR chemical shifts on specific carbon atoms or pKa values directly on the (de-)protonable atoms. At the hackathon at the UGM 2019 I got some time to look further into Greg's code and made a small extension of it using ipywidgets for jupyter notebooks.\n",
    "\n",
    "Note: The widget is not compatible with jupyterlab as there currently are some differences with how the javascript works (missing require module or something)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "First some imports. In python we can import everything, even antigravity (try it out, it's an easter egg)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "2019.03.4\n",
      "Sat Sep 28 18:15:50 2019\n"
     ]
    }
   ],
   "source": [
    "from rdkit import Chem\n",
    "#from rdkit.Chem import AllChem\n",
    "from rdkit.Chem import Draw\n",
    "from rdkit.Chem.Draw import rdMolDraw2D\n",
    "from IPython.display import SVG\n",
    "from rdkit.Chem.Draw import IPythonConsole\n",
    "import rdkit\n",
    "import time\n",
    "import pandas as pd\n",
    "print(rdkit.__version__)\n",
    "print(time.asctime())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Then we can create the Clickable SVG drawer using a slight modifications of Gregs code from his blogpost."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from traitlets import Unicode, Int, validate\n",
    "class MolSVGWidget(widgets.DOMWidget):\n",
    "    _view_name = Unicode('MolSVGView').tag(sync=True)\n",
    "    _view_module = Unicode('molsvg_widget').tag(sync=True)\n",
    "    _view_module_version = Unicode('0.0.1').tag(sync=True)\n",
    "    \n",
    "    svg = Unicode('', help=\"svg to be rendered\").tag(sync=True)\n",
    "    #selected_atoms = Unicode('', help=\"list of currently selected atoms\").tag(sync=True)\n",
    "    clicked_atom_idx = Unicode('', help=\"The index of the atom that was just clicked\").tag(sync=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The first custom class is the python object. I'm not going to use the selected atoms, so I create a property \"clicked_atom_idx\" and remove the selected_atoms property.\n",
    "\n",
    "The next is a javascript snippet. It adds a callback to all elements in the SVG that conform to certain ID's. I've commented out the selection logic and also added a line which switches the clicked atom_idx to \"event_hack\" and then back to the clicked idx. I'll explain why when we get to the callback."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "// make sure our module is only defined\n",
       "// only once.\n",
       "require.undef('molsvg_widget');\n",
       "\n",
       "// Define the `molsvg_widget` module using the Jupyter widgets framework.\n",
       "define('molsvg_widget', [\"@jupyter-widgets/base\"],\n",
       "       function(widgets) {\n",
       "\n",
       "    // The frontend class:\n",
       "    var MolSVGView = widgets.DOMWidgetView.extend({\n",
       "\n",
       "        // This method creates the HTML widget.\n",
       "        render: function() {\n",
       "            this.svg_div = document.createElement('div');\n",
       "            this.el.appendChild(this.svg_div);\n",
       "            this.model.on('change:svg', this.svg_changed, this);\n",
       "            this.svg_changed();\n",
       "        },\n",
       "        \n",
       "        // called when the SVG is updated on the Python side\n",
       "        svg_changed: function() {\n",
       "            var txt = this.model.get('svg'); \n",
       "            this.svg_div.innerHTML = txt;\n",
       "            var sels = this.svg_div.getElementsByClassName(\"atom-selector\");\n",
       "            for(var i=0;i<sels.length;i++){\n",
       "                sels[i].onclick = (evt) => { return this.atom_clicked(evt) };\n",
       "                //sels[i].r = sels[i].r*2; #R is read only, set_r?\n",
       "                //Or regexp the r from the svg and increase the size there.\n",
       "            }\n",
       "            \n",
       "        },\n",
       "\n",
       "        // callback for when an atom is clicked\n",
       "        atom_clicked: function(evt) {\n",
       "            //alert(\"  \"+evt+\"|\"+this);\n",
       "            if(!evt.currentTarget.getAttribute('class')){\n",
       "                return;\n",
       "            }\n",
       "            var satmid = evt.currentTarget.getAttribute('class').match(/atom-([0-9]+)/);\n",
       "            if(satmid.length >1){\n",
       "                var atmid = Number(satmid[1]);\n",
       "                //var curSel = this.model.get('selected_atoms');\n",
       "                //var splitSel = curSel.split(',');\n",
       "                //var selItms = [];\n",
       "                //var idx = -1;\n",
       "                //alert(\"|\"+atmid+\"|\"+curSel+\"|len: \"+splitSel.length);\n",
       "                //if(curSel != \"\" && splitSel.length>0){\n",
       "                //    selItms = Array.from(splitSel).map(item => Number(item));\n",
       "                //    idx = selItms.indexOf(atmid);\n",
       "                //}\n",
       "                //if(idx == -1){\n",
       "                //    selItms = selItms.concat(atmid);\n",
       "                //    evt.currentTarget.style[\"stroke-width\"]=3;\n",
       "                //    evt.currentTarget.style[\"stroke-opacity\"]=1;\n",
       "                //    evt.currentTarget.style[\"stroke\"]='#AA22FF';\n",
       "                //} else {\n",
       "                //    selItms.splice(idx,1);\n",
       "                //    evt.currentTarget.style[\"stroke-width\"]=1;\n",
       "                //    evt.currentTarget.style[\"stroke-opacity\"]=0;\n",
       "                //   evt.currentTarget.style[\"stroke\"]='#FFFFFF';\n",
       "                //}\n",
       "                //this.model.set('selected_atoms',String(selItms));\n",
       "                this.model.set('clicked_atom_idx',\"event_hack\");\n",
       "                this.touch();\n",
       "                this.model.set('clicked_atom_idx',String(atmid));\n",
       "                this.touch();\n",
       "            }\n",
       "        }\n",
       "\n",
       "    });\n",
       "\n",
       "    return {\n",
       "        MolSVGView : MolSVGView\n",
       "    };\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "// make sure our module is only defined\n",
    "// only once.\n",
    "require.undef('molsvg_widget');\n",
    "\n",
    "// Define the `molsvg_widget` module using the Jupyter widgets framework.\n",
    "define('molsvg_widget', [\"@jupyter-widgets/base\"],\n",
    "       function(widgets) {\n",
    "\n",
    "    // The frontend class:\n",
    "    var MolSVGView = widgets.DOMWidgetView.extend({\n",
    "\n",
    "        // This method creates the HTML widget.\n",
    "        render: function() {\n",
    "            this.svg_div = document.createElement('div');\n",
    "            this.el.appendChild(this.svg_div);\n",
    "            this.model.on('change:svg', this.svg_changed, this);\n",
    "            this.svg_changed();\n",
    "        },\n",
    "        \n",
    "        // called when the SVG is updated on the Python side\n",
    "        svg_changed: function() {\n",
    "            var txt = this.model.get('svg'); \n",
    "            this.svg_div.innerHTML = txt;\n",
    "            var sels = this.svg_div.getElementsByClassName(\"atom-selector\");\n",
    "            for(var i=0;i<sels.length;i++){\n",
    "                sels[i].onclick = (evt) => { return this.atom_clicked(evt) };\n",
    "                //sels[i].r = sels[i].r*2; #R is read only, set_r?\n",
    "                //Or regexp the r from the svg and increase the size there.\n",
    "            }\n",
    "            \n",
    "        },\n",
    "\n",
    "        // callback for when an atom is clicked\n",
    "        atom_clicked: function(evt) {\n",
    "            //alert(\"  \"+evt+\"|\"+this);\n",
    "            if(!evt.currentTarget.getAttribute('class')){\n",
    "                return;\n",
    "            }\n",
    "            var satmid = evt.currentTarget.getAttribute('class').match(/atom-([0-9]+)/);\n",
    "            if(satmid.length >1){\n",
    "                var atmid = Number(satmid[1]);\n",
    "                //var curSel = this.model.get('selected_atoms');\n",
    "                //var splitSel = curSel.split(',');\n",
    "                //var selItms = [];\n",
    "                //var idx = -1;\n",
    "                //alert(\"|\"+atmid+\"|\"+curSel+\"|len: \"+splitSel.length);\n",
    "                //if(curSel != \"\" && splitSel.length>0){\n",
    "                //    selItms = Array.from(splitSel).map(item => Number(item));\n",
    "                //    idx = selItms.indexOf(atmid);\n",
    "                //}\n",
    "                //if(idx == -1){\n",
    "                //    selItms = selItms.concat(atmid);\n",
    "                //    evt.currentTarget.style[\"stroke-width\"]=3;\n",
    "                //    evt.currentTarget.style[\"stroke-opacity\"]=1;\n",
    "                //    evt.currentTarget.style[\"stroke\"]='#AA22FF';\n",
    "                //} else {\n",
    "                //    selItms.splice(idx,1);\n",
    "                //    evt.currentTarget.style[\"stroke-width\"]=1;\n",
    "                //    evt.currentTarget.style[\"stroke-opacity\"]=0;\n",
    "                //   evt.currentTarget.style[\"stroke\"]='#FFFFFF';\n",
    "                //}\n",
    "                //this.model.set('selected_atoms',String(selItms));\n",
    "                this.model.set('clicked_atom_idx',\"event_hack\");\n",
    "                this.touch();\n",
    "                this.model.set('clicked_atom_idx',String(atmid));\n",
    "                this.touch();\n",
    "            }\n",
    "        }\n",
    "\n",
    "    });\n",
    "\n",
    "    return {\n",
    "        MolSVGView : MolSVGView\n",
    "    };\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "ipywidgets are super cool graphical elements that can be added to jupyter notebooks for simple GUI functionality. It's possible to define output ports, use them in code other places for controlling where the output goes. A lot of elements we use in jupyter notebooks just use the output directly after the cell, but with widget.Output() it's possible to have a handle of where the output goes (including RDKit molecules and pandas dataframes and such). Lets try it, make an output, print something to it, then from the next cell, use the already defined output."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "506bac3cfa724cbcb1f874c510ea8599",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Output()"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "o = widgets.Output()\n",
    "display(o)\n",
    "with o:\n",
    "    print(\"Hello RDKittens!\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now we can reuse the output in this cell (which will give No output, but use the previous, where the print is appended. Use o.clear_output() to clear it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "with o:\n",
    "    print(\"Hello RDKids!\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "I'll start by creating a class for collecting the custom widget we'll be building. I create a set of outputs and some text box elements and displays them in some HBox elements to put them besides each other, as well as an output for the molecule and a table we'll use later. There's plenty of graphical widgets to select from here: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "9af60c6ffd7a4a389995b286d71278b0",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Text(value='', description='Property Name', style=DescriptionStyle(description_width='initial')…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "4bb1ac3e9d90425e9cf4a86b4c616e88",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='', description='Index of clicked atom', style=DescriptionStyle(description_width='initial'))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e47dcc2d0fb446d3bcbe2f7ffb5a9e3e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Output(), Output()))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "class AnnotateMol(object):\n",
    "    def __init__(self, mol = Chem.MolFromSmiles(\"c1c([NH3+])cccc1CC(=O)O\")):\n",
    "        \n",
    "        style = {'description_width': 'initial'}\n",
    "        #Create the outputs and widgets\n",
    "        self.o_mol = widgets.Output()\n",
    "        self.o_molstring = widgets.Output()\n",
    "        self.o_table = widgets.Output()\n",
    "        self.o_atomclicked = widgets.Text(description=\"Index of clicked atom\",\n",
    "                                         #layout = widgets.Layout(width=\"100px\"),\n",
    "                                         style=style)\n",
    "        self.t_propertyname = widgets.Text(description=\"Property Name\", style=style)\n",
    "        self.t_propertyvalue =widgets.Text(description=\"Property Value\", style=style)\n",
    "        #Make the GUI\n",
    "        \n",
    "        display(widgets.HBox([self.t_propertyname, self.t_propertyvalue]))\n",
    "        display(self.o_atomclicked)\n",
    "        display(widgets.HBox([self.o_mol, self.o_table]))\n",
    "        \n",
    "        #Set the mol\n",
    "        self.mol = mol\n",
    "        \n",
    "app = AnnotateMol()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Then I'll add a property for handling what will be done when the molecule is assigned to self.mol. Using @property decorators and a setter enables for some actions to happen. First the private self._mol is set, then we call a method to create Gregs widget and a method that draws is. The create_widget code is more or less cp-paste from Gregs blog-post"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "ee1a5484ecc94c5a8f307452f9f2945e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Text(value='', description='Property Name', style=DescriptionStyle(description_width='initial')…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "cd77923d76a143d59cbdf4fed9076274",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='', description='Index of clicked atom', style=DescriptionStyle(description_width='initial'))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "904dc8d88b9c450f9e3024aa55de607c",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Output(), Output()))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "class AnnotateMol(object):\n",
    "    def __init__(self, mol = Chem.MolFromSmiles(\"c1c([NH3+])cccc1CC(=O)O\")):\n",
    "        \n",
    "        style = {'description_width': 'initial'}\n",
    "        #Create the outputs and widgets\n",
    "        self.o_mol = widgets.Output()\n",
    "        self.o_molstring = widgets.Output()\n",
    "        self.o_table = widgets.Output()\n",
    "        self.o_atomclicked = widgets.Text(description=\"Index of clicked atom\",\n",
    "                                         #layout = widgets.Layout(width=\"100px\"),\n",
    "                                         style=style)\n",
    "        self.t_propertyname = widgets.Text(description=\"Property Name\", style=style)\n",
    "        self.t_propertyvalue =widgets.Text(description=\"Property Value\", style=style)\n",
    "        #Make the GUI\n",
    "        \n",
    "        display(widgets.HBox([self.t_propertyname, self.t_propertyvalue]))\n",
    "        display(self.o_atomclicked)\n",
    "        display(widgets.HBox([self.o_mol, self.o_table]))\n",
    "        \n",
    "        #Set the mol\n",
    "        self.mol = mol\n",
    "\n",
    "    @property\n",
    "    def mol(self):\n",
    "        \"\"\"Return the private mol\"\"\"\n",
    "        return self._mol\n",
    "    \n",
    "    @mol.setter\n",
    "    def mol(self, mol):\n",
    "        \"\"\"Set the private mol and initalize interactive SVG and update output widgets\"\"\"\n",
    "        self._mol = mol\n",
    "        self.create_widget()\n",
    "        self.draw_widget()\n",
    "        \n",
    "        \n",
    "    def create_widget(self):\n",
    "        \"\"\"Create the interactive SVG mol widget\"\"\"\n",
    "        d = rdMolDraw2D.MolDraw2DSVG(200,150)\n",
    "        dm = Draw.PrepareMolForDrawing(self.mol)\n",
    "        d.DrawMolecule(dm)\n",
    "        d.TagAtoms(dm)\n",
    "        d.FinishDrawing()\n",
    "        svg = d.GetDrawingText()\n",
    "        self.w = MolSVGWidget(svg=svg)\n",
    "        \n",
    "    def draw_widget(self):\n",
    "        \"\"\"Display the mol widget\"\"\"\n",
    "        self.o_mol.clear_output()\n",
    "        with self.o_mol:\n",
    "            display(self.w)\n",
    "\n",
    "app = AnnotateMol()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Nice!, now the molecule is drawn. If we change the molecule on the app, the @mol.setter will know what to do, so the next line updates the app, with a new molecule."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "app.mol = Chem.MolFromSmiles(\"C1CCCCC1-c1ccccc1\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "But nothing happens, when we click the molecule. Wasn't that the whole point? Yes, so we need to add an observer that can handle what to do. The observer watches the property \"clicked_atom_idx\", and will call the self.on_atom_clicked with the event information. We just need the new value. If the value was not changed, as will happen when the same atom is clicked again, the observer will not do anything, which is why I toggle the value to \"event_hack\" and back in the javascript and guard against it in the call_back function. We also add the create_observer function to the mol.setter callback so that it is added to the self.w widget. If you know a better way to capture the event, please let me know in the comments."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "5c1dda9b51e347bdb4962a6a03458ed6",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Text(value='', description='Property Name', style=DescriptionStyle(description_width='initial')…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "04f83cdcc10140f182f4e087d90c725e",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='', description='Index of clicked atom', style=DescriptionStyle(description_width='initial'))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "b5c519e3163843859e8b595e539a1cfa",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Output(), Output()))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "class AnnotateMol(object):\n",
    "    def __init__(self, mol = Chem.MolFromSmiles(\"c1c([NH3+])cccc1CC(=O)O\")):\n",
    "        \n",
    "        style = {'description_width': 'initial'}\n",
    "        #Create the outputs and widgets\n",
    "        self.o_mol = widgets.Output()\n",
    "        self.o_molstring = widgets.Output()\n",
    "        self.o_table = widgets.Output()\n",
    "        self.o_atomclicked = widgets.Text(description=\"Index of clicked atom\",\n",
    "                                         #layout = widgets.Layout(width=\"100px\"),\n",
    "                                         style=style)\n",
    "        self.t_propertyname = widgets.Text(description=\"Property Name\", style=style)\n",
    "        self.t_propertyvalue =widgets.Text(description=\"Property Value\", style=style)\n",
    "        #Make the GUI\n",
    "        \n",
    "        display(widgets.HBox([self.t_propertyname, self.t_propertyvalue]))\n",
    "        display(self.o_atomclicked)\n",
    "        display(widgets.HBox([self.o_mol, self.o_table]))\n",
    "        \n",
    "        #Set the mol\n",
    "        self.mol = mol\n",
    "\n",
    "    @property\n",
    "    def mol(self):\n",
    "        \"\"\"Return the private mol\"\"\"\n",
    "        return self._mol\n",
    "    \n",
    "    @mol.setter\n",
    "    def mol(self, mol):\n",
    "        \"\"\"Set the private mol and initalize interactive SVG and update output widgets\"\"\"\n",
    "        self._mol = mol\n",
    "        self.create_widget()\n",
    "        self.draw_widget()\n",
    "        self.create_observer()\n",
    "        \n",
    "        \n",
    "    def create_widget(self):\n",
    "        \"\"\"Create the interactive SVG mol widget\"\"\"\n",
    "        d = rdMolDraw2D.MolDraw2DSVG(200,150)\n",
    "        dm = Draw.PrepareMolForDrawing(self.mol)\n",
    "        d.DrawMolecule(dm)\n",
    "        d.TagAtoms(dm)\n",
    "        d.FinishDrawing()\n",
    "        svg = d.GetDrawingText()\n",
    "        self.w = MolSVGWidget(svg=svg)\n",
    "        \n",
    "    def draw_widget(self):\n",
    "        \"\"\"Display the mol widget\"\"\"\n",
    "        self.o_mol.clear_output()\n",
    "        with self.o_mol:\n",
    "            display(self.w)\n",
    "            \n",
    "    def on_atom_clicked(self, b):\n",
    "        \"\"\"Callback for reacting to atom clicked\"\"\"\n",
    "        if b[\"new\"] == \"event_hack\":\n",
    "            return\n",
    "        else:\n",
    "            self.o_atomclicked.value = b[\"new\"]\n",
    "            \n",
    "    def create_observer(self):\n",
    "        \"\"\"Create the observers that should react to the clicked event\"\"\"\n",
    "        self.w.observe(self.on_atom_clicked, names=\"clicked_atom_idx\")    \n",
    "        \n",
    "app = AnnotateMol()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "When we click on the atoms, the index text field is updated. It needs to be fairly precise and it can be difficult to hit the heteroatoms, so later we must look on how to increase the size of the clickable area. So now we can capture click events and couple it to actions in our python class. Lets link the action up to some methods that sets the the atom property with the specified name and a method that displays the molecules atoms and their properties using a small pandas dataframe. If the named property is set to nothing, the property is removed."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "e5b966ae2c124330b5e6a810632e1081",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Text(value='', description='Property Name', style=DescriptionStyle(description_width='initial')…"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "086de7faffdf4c4080ba0072187809bf",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "Text(value='', description='Index of clicked atom', style=DescriptionStyle(description_width='initial'))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "c27344ed31394cf2aaaed697f958f276",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "HBox(children=(Output(), Output()))"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "class AnnotateMol(object):\n",
    "    def __init__(self, mol = Chem.MolFromSmiles(\"c1c([NH3+])cccc1CC(=O)O\")):\n",
    "        \n",
    "        style = {'description_width': 'initial'}\n",
    "        #Create the outputs and widgets\n",
    "        self.o_mol = widgets.Output()\n",
    "        self.o_molstring = widgets.Output()\n",
    "        self.o_table = widgets.Output()\n",
    "        self.o_atomclicked = widgets.Text(description=\"Index of clicked atom\",\n",
    "                                         #layout = widgets.Layout(width=\"100px\"),\n",
    "                                         style=style)\n",
    "        self.t_propertyname = widgets.Text(description=\"Property Name\", style=style)\n",
    "        self.t_propertyvalue =widgets.Text(description=\"Property Value\", style=style)\n",
    "        #Make the GUI\n",
    "        \n",
    "        display(widgets.HBox([self.t_propertyname, self.t_propertyvalue]))\n",
    "        display(self.o_atomclicked)\n",
    "        display(widgets.HBox([self.o_mol, self.o_table]))\n",
    "        \n",
    "        #Set the mol\n",
    "        self.mol = mol\n",
    "        \n",
    "  \n",
    "    @property\n",
    "    def mol(self):\n",
    "        \"\"\"Return the private mol\"\"\"\n",
    "        return self._mol\n",
    "    \n",
    "    @mol.setter\n",
    "    def mol(self, mol):\n",
    "        \"\"\"Set the private mol and initalize interactive SVG and update output widgets\"\"\"\n",
    "        self._mol = mol\n",
    "        self.create_widget()\n",
    "        self.draw_widget()\n",
    "        #self.show_molfilestring()\n",
    "        self.show_atom_property_grid()\n",
    "        self.create_observer()\n",
    "        \n",
    "    \n",
    "    def create_widget(self):\n",
    "        \"\"\"Create the interactive SVG mol widget\"\"\"\n",
    "        d = rdMolDraw2D.MolDraw2DSVG(200,150)\n",
    "        dm = Draw.PrepareMolForDrawing(self.mol)\n",
    "        d.DrawMolecule(dm)\n",
    "        d.TagAtoms(dm)\n",
    "        d.FinishDrawing()\n",
    "        svg = d.GetDrawingText()\n",
    "        self.w = MolSVGWidget(svg=svg)\n",
    "    \n",
    "    def draw_widget(self):\n",
    "        \"\"\"Display the mol widget\"\"\"\n",
    "        self.o_mol.clear_output()\n",
    "        with self.o_mol:\n",
    "            display(self.w)\n",
    "                    \n",
    "    def show_atom_property_grid(self):\n",
    "        \"\"\"Read all the atom properties into a pandas DF and display\"\"\"\n",
    "        l = {}\n",
    "        for i,a in enumerate(self.mol.GetAtoms()):\n",
    "            a_dic = a.GetPropsAsDict()\n",
    "            a_dic2 = {}\n",
    "            for key, item in a_dic.items():\n",
    "                if key[0] != \"_\": #Private props\n",
    "                    a_dic2[key] = item\n",
    "            if a_dic2:\n",
    "                l[i] = a_dic2\n",
    "        self.o_table.clear_output()\n",
    "        with self.o_table:\n",
    "            display(pd.DataFrame(l).T)\n",
    "            \n",
    "            \n",
    "    def on_atom_clicked(self, b):\n",
    "        \"\"\"Callback for reacting to atom clicked\"\"\"\n",
    "        if b[\"new\"] == \"event_hack\":\n",
    "            pass\n",
    "        else:\n",
    "            self.o_atomclicked.value = b[\"new\"]\n",
    "            atomidx = int(b[\"new\"])\n",
    "            #Update atom properties with the text values from the widgets\n",
    "            atom = self.mol.GetAtomWithIdx(atomidx)\n",
    "            name = self.t_propertyname.value\n",
    "            value = self.t_propertyvalue.value\n",
    "            if value == \"\": #If value is empty, remove property\n",
    "                atom.ClearProp(name)\n",
    "            else:\n",
    "                atom.SetProp(name,value)\n",
    "            self.show_atom_property_grid()\n",
    "\n",
    "    def create_observer(self):\n",
    "        \"\"\"Create the observers that should react to the clicked event\"\"\"\n",
    "        self.w.observe(self.on_atom_clicked, names=\"clicked_atom_idx\")\n",
    "\n",
    "#Instantiate the app with the default mol\n",
    "app = AnnotateMol()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The mol can be accessed and the atom properties queried."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "None\n",
      "None\n",
      "12.3\n",
      "None\n",
      "None\n",
      "None\n",
      "None\n",
      "None\n",
      "None\n",
      "None\n",
      "None\n"
     ]
    }
   ],
   "source": [
    "mol1 = app.mol\n",
    "for atom in mol1.GetAtoms():\n",
    "    print(atom.GetPropsAsDict().get(\"pKa\"))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "New mols can also be set on the app and it will update and show the atom properties."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [],
   "source": [
    "mol2 = Chem.MolFromSmiles(\"CCCCN(C)CCCC\")\n",
    "mol2.GetAtomWithIdx(4).SetProp(\"pKa\",\"12.4\")\n",
    "mol2.GetAtomWithIdx(5).SetProp(\"molFileValue\",\"Hello SD-file!\")\n",
    "app.mol = mol2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "From here the App could be extended to handle lists of mols with some arrows to go back and fourth if one had large datasets to annotate. I hope this illustrates how a few lines of code with ipywidgets and some of the new interactive features added can be useful in building small custom applications that can help with molecular tasks. Let me know in your comments what you used it for if you build something. An issue with the atom annotation can be that atom properties are not saved in SDF files, so maybe other fileformats, pickling or the new features just added can be useful:https://github.com/rdkit/UGM_2019/blob/master/Notebooks/Landrum_Whats_New.ipynb You may need to scroll down and click the link: \"Atom Properties in SDF files\"\n",
    "If there's only one property to annotate, the property name molValueFile can be used. Then the value will be assigned to the V-tag in the molfile/SDfile."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n",
      "     RDKit          2D\n",
      "\n",
      " 10  9  0  0  0  0  0  0  0  0999 V2000\n",
      "    0.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    1.2990    0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    2.5981   -0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    3.8971    0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    5.1962   -0.0000    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    6.4952    0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    5.1962   -1.5000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    6.4952   -2.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    6.4952   -3.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "    7.7942   -4.5000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
      "  1  2  1  0\n",
      "  2  3  1  0\n",
      "  3  4  1  0\n",
      "  4  5  1  0\n",
      "  5  6  1  0\n",
      "  5  7  1  0\n",
      "  7  8  1  0\n",
      "  8  9  1  0\n",
      "  9 10  1  0\n",
      "V    6 Hello SD-file!\n",
      "M  END\n",
      "\n"
     ]
    }
   ],
   "source": [
    "print(Chem.MolToMolBlock(app.mol))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "_draft": {
   "nbviewer_url": "https://gist.github.com/b640cd77331a55f2179cd1dc2d7bbd8d"
  },
  "gist": {
   "data": {
    "description": "SVG Features.ipynb",
    "public": true
   },
   "id": "b640cd77331a55f2179cd1dc2d7bbd8d"
  },
  "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.7.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}