{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# An example of how to use smilesDrawer to render a molecule in a Jupyter Notebook"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 44,
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import IFrame\n",
    "import urllib"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 45,
   "metadata": {},
   "outputs": [],
   "source": [
    "def compound_html(s):\n",
    "    html = f\"\"\"\n",
    "    <!DOCTYPE html>\n",
    "    <meta charset=\"utf-8\">\n",
    "\n",
    "    <script src=\"https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min.js\"></script>\n",
    "\n",
    "    <body style=\"background-color:#FFFFFF;\">\n",
    "\n",
    "    <canvas id=\"output-canvas\"></canvas>\n",
    "    </body>\n",
    "    \n",
    "    <script>\n",
    "    let smilesDrawer = new SmilesDrawer.Drawer({{ width: 250, height: 250 }});\n",
    "\n",
    "    SmilesDrawer.parse('{s}', function (tree) {{\n",
    "        smilesDrawer.draw(tree, 'output-canvas', 'light', false);\n",
    "        }}, function (err) {{\n",
    "        console.log(err);\n",
    "    }})\n",
    "    console.log(\"HI\")\n",
    "    </script>\n",
    "    \"\"\"\n",
    "    \n",
    "    return html\n",
    "\n",
    "def render_compound(s):\n",
    "    html = compound_html(s)\n",
    "    data_url = 'data:text/html,' + urllib.parse.quote(html, safe='')\n",
    "    return IFrame(data_url, width=250, height=250)\n",
    "    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 46,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"250\"\n",
       "            height=\"250\"\n",
       "            src=\"data:text/html,%0A%20%20%20%20%3C%21DOCTYPE%20html%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%0A%20%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fsmiles-drawer%401.0.10%2Fdist%2Fsmiles-drawer.min.js%22%3E%3C%2Fscript%3E%0A%0A%20%20%20%20%3Cbody%20style%3D%22background-color%3A%23FFFFFF%3B%22%3E%0A%0A%20%20%20%20%3Ccanvas%20id%3D%22output-canvas%22%3E%3C%2Fcanvas%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20let%20smilesDrawer%20%3D%20new%20SmilesDrawer.Drawer%28%7B%20width%3A%20250%2C%20height%3A%20250%20%7D%29%3B%0A%0A%20%20%20%20SmilesDrawer.parse%28%27C1CCCCC1%27%2C%20function%20%28tree%29%20%7B%0A%20%20%20%20%20%20%20%20smilesDrawer.draw%28tree%2C%20%27output-canvas%27%2C%20%27light%27%2C%20false%29%3B%0A%20%20%20%20%20%20%20%20%7D%2C%20function%20%28err%29%20%7B%0A%20%20%20%20%20%20%20%20console.log%28err%29%3B%0A%20%20%20%20%7D%29%0A%20%20%20%20console.log%28%22HI%22%29%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x7fbe18928c40>"
      ]
     },
     "execution_count": 46,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "render_compound(\"C1CCCCC1\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "interpreter": {
   "hash": "31f2aee4e71d21fbe5cf8b01ff0e069b9275f58929596ceb00d14d90e3e16cd6"
  },
  "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.8.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
