{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "py3Dmol\n",
    "=======\n",
    "\n",
    "A simple [IPython/Jupyter](http://jupyter.org/) widget to\n",
    "embed an interactive [3Dmol.js](http://3dmol.csb.pitt.edu) viewer in a notebook.\n",
    "\n",
    "The widget is completely static, which means the viewer doesn't need a running\n",
    "IPython kernel to be useful and web pages and presentations generated from\n",
    "the notebook will work as expected.  However, this also means there is only\n",
    "one-way communication between the notebook and the viewer.\n",
    "\n",
    "Installation\n",
    "------------\n",
    "\n",
    "From PyPI:\n",
    "\n",
    "    pip install py3Dmol\n",
    "    \n",
    "API\n",
    "---\n",
    "\n",
    "The returned view object has the exact same API as [3Dmol.GLViewer](http://3dmol.csb.pitt.edu/doc/$3Dmol.GLViewer.html)\n",
    "with the exception that functions return None.\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import py3Dmol"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'2.4.2'"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "py3Dmol.__version__"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686788507352\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686788507352\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686788507352 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686788507352\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_1737686788507352 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686788507352\"),{backgroundColor:\"white\"});\n$3Dmol.download(\"mmtf:1ycr\", viewer_1737686788507352, {}, function() {\nviewer_1737686788507352.zoomTo();\n\tviewer_1737686788507352.setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\nviewer_1737686788507352.render();\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686788507352\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686788507352\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686788507352 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686788507352\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_1737686788507352 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686788507352\"),{backgroundColor:\"white\"});\n",
       "$3Dmol.download(\"mmtf:1ycr\", viewer_1737686788507352, {}, function() {\n",
       "viewer_1737686788507352.zoomTo();\n",
       "\tviewer_1737686788507352.setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\n",
       "viewer_1737686788507352.render();\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<py3Dmol.view at 0x106194f10>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p = py3Dmol.view(query='mmtf:1ycr')\n",
    "p.setStyle({'cartoon': {'color':'spectrum'}})\n",
    "p"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "xyz = '''4\n",
    "* (null), Energy   -1000.0000000\n",
    "N     0.000005    0.019779   -0.000003   -0.157114    0.000052   -0.012746\n",
    "H     0.931955   -0.364989    0.000003    1.507100   -0.601158   -0.004108\n",
    "H    -0.465975   -0.364992    0.807088    0.283368    0.257996   -0.583024\n",
    "H    -0.465979   -0.364991   -0.807088    0.392764    0.342436    0.764260\n",
    "'''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_17376869055517561\"  style=\"position: relative; width: 400px; height: 400px;\">\n        <p id=\"3dmolwarning_17376869055517561\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_17376869055517561 = null;\nvar warn = document.getElementById(\"3dmolwarning_17376869055517561\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_17376869055517561 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_17376869055517561\"),{backgroundColor:\"white\"});\nviewer_17376869055517561.addModel(\"4\\n* (null), Energy   -1000.0000000\\nN     0.000005    0.019779   -0.000003   -0.157114    0.000052   -0.012746\\nH     0.931955   -0.364989    0.000003    1.507100   -0.601158   -0.004108\\nH    -0.465975   -0.364992    0.807088    0.283368    0.257996   -0.583024\\nH    -0.465979   -0.364991   -0.807088    0.392764    0.342436    0.764260\\n\",undefined,{\"vibrate\": {\"frames\": 10, \"amplitude\": 1}});\nviewer_17376869055517561.setStyle(\"stick\");\nviewer_17376869055517561.zoomTo();\n\tviewer_17376869055517561.setBackgroundColor(\"0xeeeeee\");\n\tviewer_17376869055517561.animate({\"loop\": \"backAndForth\"});\n\tviewer_17376869055517561.zoomTo();\nviewer_17376869055517561.render();\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_17376869055517561\"  style=\"position: relative; width: 400px; height: 400px;\">\n",
       "        <p id=\"3dmolwarning_17376869055517561\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_17376869055517561 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_17376869055517561\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_17376869055517561 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_17376869055517561\"),{backgroundColor:\"white\"});\n",
       "viewer_17376869055517561.addModel(\"4\\n* (null), Energy   -1000.0000000\\nN     0.000005    0.019779   -0.000003   -0.157114    0.000052   -0.012746\\nH     0.931955   -0.364989    0.000003    1.507100   -0.601158   -0.004108\\nH    -0.465975   -0.364992    0.807088    0.283368    0.257996   -0.583024\\nH    -0.465979   -0.364991   -0.807088    0.392764    0.342436    0.764260\\n\",undefined,{\"vibrate\": {\"frames\": 10, \"amplitude\": 1}});\n",
       "viewer_17376869055517561.setStyle(\"stick\");\n",
       "viewer_17376869055517561.zoomTo();\n",
       "\tviewer_17376869055517561.setBackgroundColor(\"0xeeeeee\");\n",
       "\tviewer_17376869055517561.animate({\"loop\": \"backAndForth\"});\n",
       "\tviewer_17376869055517561.zoomTo();\n",
       "viewer_17376869055517561.render();\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "xyzview = py3Dmol.view(width=400,height=400,data=xyz,options={'vibrate': {'frames':10,'amplitude':1}},style='stick')\n",
    "xyzview.setBackgroundColor('0xeeeeee')\n",
    "xyzview.animate({'loop': 'backAndForth'})\n",
    "xyzview.zoomTo()\n",
    "xyzview.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Display local file."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686906758156\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686906758156\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686906758156 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686906758156\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_1737686906758156 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686906758156\"),{backgroundColor:\"white\"});\nviewer_1737686906758156.addModel(\"\\n     RDKit          3D\\n\\n  6  6  0  0  0  0  0  0  0  0999 V2000\\n   -0.9517    0.7811   -0.6622 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.2847    1.3329   -0.3121 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.2365    0.5518    0.3512 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.9517   -0.7811    0.6644 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -0.2847   -1.3329    0.3144 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.2365   -0.5518   -0.3489 C   0  0  0  0  0  0  0  0  0  0  0  0\\n  1  2  2  0\\n  2  3  1  0\\n  3  4  2  0\\n  4  5  1  0\\n  5  6  2  0\\n  6  1  1  0\\nM  END\\n$$$$\",undefined,undefined);\nviewer_1737686906758156.setStyle({\"stick\": {\"colorscheme\": \"cyanCarbon\"}});\nviewer_1737686906758156.zoomTo();\nviewer_1737686906758156.render();\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686906758156\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686906758156\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686906758156 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686906758156\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_1737686906758156 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686906758156\"),{backgroundColor:\"white\"});\n",
       "viewer_1737686906758156.addModel(\"\\n     RDKit          3D\\n\\n  6  6  0  0  0  0  0  0  0  0999 V2000\\n   -0.9517    0.7811   -0.6622 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.2847    1.3329   -0.3121 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.2365    0.5518    0.3512 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.9517   -0.7811    0.6644 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -0.2847   -1.3329    0.3144 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.2365   -0.5518   -0.3489 C   0  0  0  0  0  0  0  0  0  0  0  0\\n  1  2  2  0\\n  2  3  1  0\\n  3  4  2  0\\n  4  5  1  0\\n  5  6  2  0\\n  6  1  1  0\\nM  END\\n$$$$\",undefined,undefined);\n",
       "viewer_1737686906758156.setStyle({\"stick\": {\"colorscheme\": \"cyanCarbon\"}});\n",
       "viewer_1737686906758156.zoomTo();\n",
       "viewer_1737686906758156.render();\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "benz='''\n",
    "     RDKit          3D\n",
    "\n",
    "  6  6  0  0  0  0  0  0  0  0999 V2000\n",
    "   -0.9517    0.7811   -0.6622 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
    "    0.2847    1.3329   -0.3121 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
    "    1.2365    0.5518    0.3512 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
    "    0.9517   -0.7811    0.6644 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
    "   -0.2847   -1.3329    0.3144 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
    "   -1.2365   -0.5518   -0.3489 C   0  0  0  0  0  0  0  0  0  0  0  0\n",
    "  1  2  2  0\n",
    "  2  3  1  0\n",
    "  3  4  2  0\n",
    "  4  5  1  0\n",
    "  5  6  2  0\n",
    "  6  1  1  0\n",
    "M  END\n",
    "$$$$'''\n",
    "view = py3Dmol.view(data=benz,style={'stick':{'colorscheme':'cyanCarbon'}})\n",
    "view.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can create a single canvas object with multiple viewers arrayed in a grid (3Dmol.createViewerGrid)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686907903132\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686907903132\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686907903132 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686907903132\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nvar viewergrid_1737686907903132 = null;\nviewergrid_1737686907903132 = $3Dmol.createViewerGrid(document.getElementById(\"3dmolviewer_1737686907903132\"),{rows: 2, cols: 2, control_all: false},{backgroundColor:\"white\"});\nviewer_1737686907903132 = viewergrid_1737686907903132[0][0];\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[0][0], {}, function() {\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[0][1], {}, function() {\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[1][0], {}, function() {\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[1][1], {}, function() {\nviewergrid_1737686907903132[0][0].zoomTo();viewergrid_1737686907903132[0][1].zoomTo();viewergrid_1737686907903132[1][0].zoomTo();viewergrid_1737686907903132[1][1].zoomTo();\tviewergrid_1737686907903132[0][0].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n\tviewergrid_1737686907903132[0][1].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n\tviewergrid_1737686907903132[1][0].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n\tviewergrid_1737686907903132[1][1].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n\tviewergrid_1737686907903132[0][1].setStyle({\"cartoon\": {\"arrows\": true, \"tubes\": true, \"style\": \"oval\", \"color\": \"white\"}});\n\tviewergrid_1737686907903132[1][0].setStyle({\"stick\": {\"colorscheme\": \"greenCarbon\"}});\n\tviewergrid_1737686907903132[1][1].setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\n\tviewergrid_1737686907903132[0][0].removeAllModels();\n\tviewergrid_1737686907903132[0][0].addModel(\"\\n     RDKit          3D\\n\\n  6  6  0  0  0  0  0  0  0  0999 V2000\\n   -0.9517    0.7811   -0.6622 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.2847    1.3329   -0.3121 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.2365    0.5518    0.3512 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.9517   -0.7811    0.6644 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -0.2847   -1.3329    0.3144 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.2365   -0.5518   -0.3489 C   0  0  0  0  0  0  0  0  0  0  0  0\\n  1  2  2  0\\n  2  3  1  0\\n  3  4  2  0\\n  4  5  1  0\\n  5  6  2  0\\n  6  1  1  0\\nM  END\\n$$$$\",\"sdf\");\n\tviewergrid_1737686907903132[0][0].setStyle({\"stick\": {}});\n\tviewergrid_1737686907903132[0][0].zoomTo();\n\tviewergrid_1737686907903132[0][0].render();\n\tviewergrid_1737686907903132[0][1].render();\n\tviewergrid_1737686907903132[1][0].render();\n\tviewergrid_1737686907903132[1][1].render();\nviewergrid_1737686907903132[1][1].render();\nviewergrid_1737686907903132[1][0].render();\nviewergrid_1737686907903132[0][1].render();\nviewergrid_1737686907903132[0][0].render();\n})\n})\n})\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686907903132\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686907903132\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686907903132 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686907903132\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "var viewergrid_1737686907903132 = null;\n",
       "viewergrid_1737686907903132 = $3Dmol.createViewerGrid(document.getElementById(\"3dmolviewer_1737686907903132\"),{rows: 2, cols: 2, control_all: false},{backgroundColor:\"white\"});\n",
       "viewer_1737686907903132 = viewergrid_1737686907903132[0][0];\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[0][0], {}, function() {\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[0][1], {}, function() {\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[1][0], {}, function() {\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686907903132[1][1], {}, function() {\n",
       "viewergrid_1737686907903132[0][0].zoomTo();viewergrid_1737686907903132[0][1].zoomTo();viewergrid_1737686907903132[1][0].zoomTo();viewergrid_1737686907903132[1][1].zoomTo();\tviewergrid_1737686907903132[0][0].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n",
       "\tviewergrid_1737686907903132[0][1].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n",
       "\tviewergrid_1737686907903132[1][0].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n",
       "\tviewergrid_1737686907903132[1][1].setViewStyle({\"style\": \"outline\", \"color\": \"black\", \"width\": 0.1});\n",
       "\tviewergrid_1737686907903132[0][1].setStyle({\"cartoon\": {\"arrows\": true, \"tubes\": true, \"style\": \"oval\", \"color\": \"white\"}});\n",
       "\tviewergrid_1737686907903132[1][0].setStyle({\"stick\": {\"colorscheme\": \"greenCarbon\"}});\n",
       "\tviewergrid_1737686907903132[1][1].setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\n",
       "\tviewergrid_1737686907903132[0][0].removeAllModels();\n",
       "\tviewergrid_1737686907903132[0][0].addModel(\"\\n     RDKit          3D\\n\\n  6  6  0  0  0  0  0  0  0  0999 V2000\\n   -0.9517    0.7811   -0.6622 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.2847    1.3329   -0.3121 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.2365    0.5518    0.3512 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.9517   -0.7811    0.6644 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -0.2847   -1.3329    0.3144 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.2365   -0.5518   -0.3489 C   0  0  0  0  0  0  0  0  0  0  0  0\\n  1  2  2  0\\n  2  3  1  0\\n  3  4  2  0\\n  4  5  1  0\\n  5  6  2  0\\n  6  1  1  0\\nM  END\\n$$$$\",\"sdf\");\n",
       "\tviewergrid_1737686907903132[0][0].setStyle({\"stick\": {}});\n",
       "\tviewergrid_1737686907903132[0][0].zoomTo();\n",
       "\tviewergrid_1737686907903132[0][0].render();\n",
       "\tviewergrid_1737686907903132[0][1].render();\n",
       "\tviewergrid_1737686907903132[1][0].render();\n",
       "\tviewergrid_1737686907903132[1][1].render();\n",
       "viewergrid_1737686907903132[1][1].render();\n",
       "viewergrid_1737686907903132[1][0].render();\n",
       "viewergrid_1737686907903132[0][1].render();\n",
       "viewergrid_1737686907903132[0][0].render();\n",
       "})\n",
       "})\n",
       "})\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<py3Dmol.view at 0x106177850>"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "view = py3Dmol.view(query='pdb:1dc9',linked=False,viewergrid=(2,2))\n",
    "view.setViewStyle({'style':'outline','color':'black','width':0.1})\n",
    "view.setStyle({'cartoon':{'arrows':True, 'tubes':True, 'style':'oval', 'color':'white'}},viewer=(0,1))\n",
    "view.setStyle({'stick':{'colorscheme':'greenCarbon'}},viewer=(1,0))\n",
    "view.setStyle({'cartoon':{'color':'spectrum'}},viewer=(1,1))\n",
    "view.removeAllModels(viewer=(0,0))\n",
    "view.addModel(benz,'sdf',viewer=(0,0))\n",
    "view.setStyle({'stick':{}},viewer=(0,0))\n",
    "view.zoomTo(viewer=(0,0))\n",
    "view.render()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686909083982\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686909083982\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686909083982 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686909083982\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_1737686909083982 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686909083982\"),{backgroundColor:\"white\"});\n$3Dmol.download(\"pdb:1ycr\", viewer_1737686909083982, {}, function() {\nviewer_1737686909083982.zoomTo();\n\tviewer_1737686909083982.setStyle({\"chain\": \"A\"},{\"cartoon\": {\"color\": \"spectrum\"}});\n\tviewer_1737686909083982.addSurface(1,{\"opacity\": 0.7, \"color\": \"white\"},{\"chain\": \"A\"});\n\tviewer_1737686909083982.setStyle({\"chain\": \"B\"},{\"stick\": {}});\nviewer_1737686909083982.render();\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686909083982\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686909083982\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686909083982 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686909083982\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_1737686909083982 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686909083982\"),{backgroundColor:\"white\"});\n",
       "$3Dmol.download(\"pdb:1ycr\", viewer_1737686909083982, {}, function() {\n",
       "viewer_1737686909083982.zoomTo();\n",
       "\tviewer_1737686909083982.setStyle({\"chain\": \"A\"},{\"cartoon\": {\"color\": \"spectrum\"}});\n",
       "\tviewer_1737686909083982.addSurface(1,{\"opacity\": 0.7, \"color\": \"white\"},{\"chain\": \"A\"});\n",
       "\tviewer_1737686909083982.setStyle({\"chain\": \"B\"},{\"stick\": {}});\n",
       "viewer_1737686909083982.render();\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "view = py3Dmol.view(query='pdb:1ycr')\n",
    "chA = {'chain':'A'}\n",
    "chB = {'chain':'B'}\n",
    "view.setStyle(chA,{'cartoon': {'color':'spectrum'}})\n",
    "view.addSurface(py3Dmol.VDW,{'opacity':0.7,'color':'white'}, chA)\n",
    "view.setStyle(chB,{'stick':{}})\n",
    "view.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686909892444\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686909892444\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686909892444 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686909892444\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_1737686909892444 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686909892444\"),{backgroundColor:\"white\"});\n$3Dmol.download(\"pdb:5ire\", viewer_1737686909892444, {\"doAssembly\": true}, function() {\nviewer_1737686909892444.zoomTo();\n\tviewer_1737686909892444.setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\nviewer_1737686909892444.render();\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686909892444\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686909892444\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686909892444 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686909892444\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_1737686909892444 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686909892444\"),{backgroundColor:\"white\"});\n",
       "$3Dmol.download(\"pdb:5ire\", viewer_1737686909892444, {\"doAssembly\": true}, function() {\n",
       "viewer_1737686909892444.zoomTo();\n",
       "\tviewer_1737686909892444.setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\n",
       "viewer_1737686909892444.render();\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "view = py3Dmol.view(query='pdb:5ire',options={'doAssembly':True})\n",
    "view.setStyle({'cartoon':{'color':'spectrum'}})\n",
    "view.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Color by temperature factors"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686914450999\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686914450999\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686914450999 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686914450999\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_1737686914450999 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686914450999\"),{backgroundColor:\"white\"});\n$3Dmol.download(\"pdb:1ycr\", viewer_1737686914450999, {}, function() {\nviewer_1737686914450999.zoomTo();\n\tviewer_1737686914450999.setStyle({\"cartoon\": {\"color\": \"white\"}});\n\tviewer_1737686914450999.addSurface(1,{\"opacity\": 0.7, \"colorscheme\": {\"prop\": \"b\", \"gradient\": \"sinebow\", \"min\": 0, \"max\": 70}});\nviewer_1737686914450999.render();\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686914450999\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686914450999\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686914450999 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686914450999\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_1737686914450999 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686914450999\"),{backgroundColor:\"white\"});\n",
       "$3Dmol.download(\"pdb:1ycr\", viewer_1737686914450999, {}, function() {\n",
       "viewer_1737686914450999.zoomTo();\n",
       "\tviewer_1737686914450999.setStyle({\"cartoon\": {\"color\": \"white\"}});\n",
       "\tviewer_1737686914450999.addSurface(1,{\"opacity\": 0.7, \"colorscheme\": {\"prop\": \"b\", \"gradient\": \"sinebow\", \"min\": 0, \"max\": 70}});\n",
       "viewer_1737686914450999.render();\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<py3Dmol.view at 0x106177e20>"
      ]
     },
     "execution_count": 16,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "view = py3Dmol.view(query='pdb:1ycr')\n",
    "view.setStyle({'cartoon': {'color':'white'}})\n",
    "view.addSurface(py3Dmol.VDW,{'opacity':0.7,'colorscheme':{'prop':'b','gradient':'sinebow','min':0,'max':70}})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Generate an inline image of what is currently in the viewer (all white if the structure hasn't loaded yet)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<img id=\"img_1737686914450999\">\n            <script>\n            var png = viewer_1737686914450999.pngURI()\n            document.getElementById('img_1737686914450999').src = png;\n            </script>",
      "text/html": [
       "<img id=\"img_1737686914450999\">\n",
       "            <script>\n",
       "            var png = viewer_1737686914450999.pngURI()\n",
       "            document.getElementById('img_1737686914450999').src = png;\n",
       "            </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "png = view.png()\n",
    "png"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Specifying individual styles for a viewer grid in the constructor"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686934973556\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686934973556\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686934973556 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686934973556\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nvar viewergrid_1737686934973556 = null;\nviewergrid_1737686934973556 = $3Dmol.createViewerGrid(document.getElementById(\"3dmolviewer_1737686934973556\"),{rows: 2, cols: 2, control_all: true},{backgroundColor:\"white\"});\nviewer_1737686934973556 = viewergrid_1737686934973556[0][0];\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[0][0], {}, function() {\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[0][1], {}, function() {\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[1][0], {}, function() {\n$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[1][1], {}, function() {\nviewergrid_1737686934973556[0][0].setStyle({\"stick\": {}});\nviewergrid_1737686934973556[0][0].zoomTo();viewergrid_1737686934973556[0][1].setStyle({\"cartoon\": {\"arrows\": true, \"tubes\": true, \"style\": \"oval\", \"color\": \"white\"}});\nviewergrid_1737686934973556[0][1].zoomTo();viewergrid_1737686934973556[1][0].setStyle({\"stick\": {\"colorscheme\": \"greenCarbon\"}});\nviewergrid_1737686934973556[1][0].zoomTo();viewergrid_1737686934973556[1][1].setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\nviewergrid_1737686934973556[1][1].zoomTo();viewergrid_1737686934973556[1][1].render();\nviewergrid_1737686934973556[1][0].render();\nviewergrid_1737686934973556[0][1].render();\nviewergrid_1737686934973556[0][0].render();\n})\n})\n})\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686934973556\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686934973556\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686934973556 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686934973556\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "var viewergrid_1737686934973556 = null;\n",
       "viewergrid_1737686934973556 = $3Dmol.createViewerGrid(document.getElementById(\"3dmolviewer_1737686934973556\"),{rows: 2, cols: 2, control_all: true},{backgroundColor:\"white\"});\n",
       "viewer_1737686934973556 = viewergrid_1737686934973556[0][0];\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[0][0], {}, function() {\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[0][1], {}, function() {\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[1][0], {}, function() {\n",
       "$3Dmol.download(\"pdb:1dc9\", viewergrid_1737686934973556[1][1], {}, function() {\n",
       "viewergrid_1737686934973556[0][0].setStyle({\"stick\": {}});\n",
       "viewergrid_1737686934973556[0][0].zoomTo();viewergrid_1737686934973556[0][1].setStyle({\"cartoon\": {\"arrows\": true, \"tubes\": true, \"style\": \"oval\", \"color\": \"white\"}});\n",
       "viewergrid_1737686934973556[0][1].zoomTo();viewergrid_1737686934973556[1][0].setStyle({\"stick\": {\"colorscheme\": \"greenCarbon\"}});\n",
       "viewergrid_1737686934973556[1][0].zoomTo();viewergrid_1737686934973556[1][1].setStyle({\"cartoon\": {\"color\": \"spectrum\"}});\n",
       "viewergrid_1737686934973556[1][1].zoomTo();viewergrid_1737686934973556[1][1].render();\n",
       "viewergrid_1737686934973556[1][0].render();\n",
       "viewergrid_1737686934973556[0][1].render();\n",
       "viewergrid_1737686934973556[0][0].render();\n",
       "})\n",
       "})\n",
       "})\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "view = py3Dmol.view(query='pdb:1dc9',viewergrid=(2,2),style=[[{'stick':{}},{'cartoon':{'arrows':True, 'tubes':True, 'style':'oval', 'color':'white'}}],\n",
    "                                                            [{'stick':{'colorscheme':'greenCarbon'}},{'cartoon':{'color':'spectrum'}}]])\n",
    "view.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_17376869362354078\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_17376869362354078\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_17376869362354078 = null;\nvar warn = document.getElementById(\"3dmolwarning_17376869362354078\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_17376869362354078 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_17376869362354078\"),{backgroundColor:\"white\"});\n$3Dmol.download(\"pdb:3erk\", viewer_17376869362354078, {}, function() {\nviewer_17376869362354078.setStyle({\"cartoon\": {\"colorscheme\": \"ssPyMol\"}, \"stick\": {\"radius\": 0.05}});\nviewer_17376869362354078.zoomTo();\n\tviewer_17376869362354078.setStyle({\"resn\": \"SB4\"},{\"stick\": {}});\n\tviewer_17376869362354078.zoomTo({\"resn\": \"SB4\"});\nviewer_17376869362354078.render();\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_17376869362354078\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_17376869362354078\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_17376869362354078 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_17376869362354078\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_17376869362354078 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_17376869362354078\"),{backgroundColor:\"white\"});\n",
       "$3Dmol.download(\"pdb:3erk\", viewer_17376869362354078, {}, function() {\n",
       "viewer_17376869362354078.setStyle({\"cartoon\": {\"colorscheme\": \"ssPyMol\"}, \"stick\": {\"radius\": 0.05}});\n",
       "viewer_17376869362354078.zoomTo();\n",
       "\tviewer_17376869362354078.setStyle({\"resn\": \"SB4\"},{\"stick\": {}});\n",
       "\tviewer_17376869362354078.zoomTo({\"resn\": \"SB4\"});\n",
       "viewer_17376869362354078.render();\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<py3Dmol.view at 0x1066d8bb0>"
      ]
     },
     "execution_count": 20,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "v = py3Dmol.view(query='pdb:3erk',style={'cartoon':{'colorscheme':'ssPyMol'},'stick':{'radius':0.05}})\n",
    "v.setStyle({'resn':'SB4'},{'stick':{}})\n",
    "v.zoomTo({'resn':'SB4'})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<div id=\"3dmolviewer_1737686937834151\"  style=\"position: relative; width: 640px; height: 480px;\">\n        <p id=\"3dmolwarning_1737686937834151\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n        </div>\n<script>\n\nvar loadScriptAsync = function(uri){\n  return new Promise((resolve, reject) => {\n    //this is to ignore the existence of requirejs amd\n    var savedexports, savedmodule;\n    if (typeof exports !== 'undefined') savedexports = exports;\n    else exports = {}\n    if (typeof module !== 'undefined') savedmodule = module;\n    else module = {}\n\n    var tag = document.createElement('script');\n    tag.src = uri;\n    tag.async = true;\n    tag.onload = () => {\n        exports = savedexports;\n        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n}\n\nvar viewer_1737686937834151 = null;\nvar warn = document.getElementById(\"3dmolwarning_1737686937834151\");\nif(warn) {\n    warn.parentNode.removeChild(warn);\n}\n$3Dmolpromise.then(function() {\nviewer_1737686937834151 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686937834151\"),{backgroundColor:\"white\"});\n$3Dmol.download(\"pdb:1ubq\", viewer_1737686937834151, {}, function() {\nviewer_1737686937834151.setStyle({\"cartoon\": {}, \"stick\": {}});\nviewer_1737686937834151.zoomTo();\n\tviewer_1737686937834151.setHoverable({},true,\"function(atom,viewer,event,container) {\\n                   if(!atom.label) {\\n                    atom.label = viewer.addLabel(atom.resn+\\\":\\\"+atom.atom,{position: atom, backgroundColor: 'mintcream', fontColor:'black'});\\n                   }}\",\"function(atom,viewer) { \\n                   if(atom.label) {\\n                    viewer.removeLabel(atom.label);\\n                    delete atom.label;\\n                   }\\n                }\");\nviewer_1737686937834151.render();\n})\n});\n</script>",
      "text/html": [
       "<div id=\"3dmolviewer_1737686937834151\"  style=\"position: relative; width: 640px; height: 480px;\">\n",
       "        <p id=\"3dmolwarning_1737686937834151\" style=\"background-color:#ffcccc;color:black\">3Dmol.js failed to load for some reason.  Please check your browser console for error messages.<br></p>\n",
       "        </div>\n",
       "<script>\n",
       "\n",
       "var loadScriptAsync = function(uri){\n",
       "  return new Promise((resolve, reject) => {\n",
       "    //this is to ignore the existence of requirejs amd\n",
       "    var savedexports, savedmodule;\n",
       "    if (typeof exports !== 'undefined') savedexports = exports;\n",
       "    else exports = {}\n",
       "    if (typeof module !== 'undefined') savedmodule = module;\n",
       "    else module = {}\n",
       "\n",
       "    var tag = document.createElement('script');\n",
       "    tag.src = uri;\n",
       "    tag.async = true;\n",
       "    tag.onload = () => {\n",
       "        exports = savedexports;\n",
       "        module = savedmodule;\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://cdnjs.cloudflare.com/ajax/libs/3Dmol/2.4.2/3Dmol-min.js');\n",
       "}\n",
       "\n",
       "var viewer_1737686937834151 = null;\n",
       "var warn = document.getElementById(\"3dmolwarning_1737686937834151\");\n",
       "if(warn) {\n",
       "    warn.parentNode.removeChild(warn);\n",
       "}\n",
       "$3Dmolpromise.then(function() {\n",
       "viewer_1737686937834151 = $3Dmol.createViewer(document.getElementById(\"3dmolviewer_1737686937834151\"),{backgroundColor:\"white\"});\n",
       "$3Dmol.download(\"pdb:1ubq\", viewer_1737686937834151, {}, function() {\n",
       "viewer_1737686937834151.setStyle({\"cartoon\": {}, \"stick\": {}});\n",
       "viewer_1737686937834151.zoomTo();\n",
       "\tviewer_1737686937834151.setHoverable({},true,\"function(atom,viewer,event,container) {\\n                   if(!atom.label) {\\n                    atom.label = viewer.addLabel(atom.resn+\\\":\\\"+atom.atom,{position: atom, backgroundColor: 'mintcream', fontColor:'black'});\\n                   }}\",\"function(atom,viewer) { \\n                   if(atom.label) {\\n                    viewer.removeLabel(atom.label);\\n                    delete atom.label;\\n                   }\\n                }\");\n",
       "viewer_1737686937834151.render();\n",
       "})\n",
       "});\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "<py3Dmol.view at 0x1066d83d0>"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "v = py3Dmol.view(query=\"pdb:1ubq\",style={'cartoon':{},'stick':{}})\n",
    "v.setHoverable({},True,'''function(atom,viewer,event,container) {\n",
    "                   if(!atom.label) {\n",
    "                    atom.label = viewer.addLabel(atom.resn+\":\"+atom.atom,{position: atom, backgroundColor: 'mintcream', fontColor:'black'});\n",
    "                   }}''',\n",
    "               '''function(atom,viewer) { \n",
    "                   if(atom.label) {\n",
    "                    viewer.removeLabel(atom.label);\n",
    "                    delete atom.label;\n",
    "                   }\n",
    "                }''')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There is no communication of data between JavaScript and Python, but you can dump the return value of any function to the JavaScript console."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/3dmoljs_load.v0": "<script>\n            $3Dmolpromise.then(function() { //wrap in promise for non-interactive functionality\n                \tconsole.log(viewer_1737686937834151.getView());\n\n                viewer_1737686937834151.render();\n            });\n            </script>",
      "text/html": [
       "<script>\n",
       "            $3Dmolpromise.then(function() { //wrap in promise for non-interactive functionality\n",
       "                \tconsole.log(viewer_1737686937834151.getView());\n",
       "\n",
       "                viewer_1737686937834151.render();\n",
       "            });\n",
       "            </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "'Inspect the JavaScript console for your requested result.'"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "v.print_to_console_getView()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "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.9.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}