{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 🧪 Panel Chemistry - PDBe Molstar\n",
    "\n",
    "The Panel Chemistry `PDBeMolStar` allows you to use the powerful PBDe JS plugin implementation of the Mol* ('MolStar') viewer. \n",
    "\n",
    "[PDBe Mol*](https://github.com/PDBeurope/pdbe-molstar) using Python 🐍 and [HoloViz Panel](https://panel.holoviz.org/) ❤️. \n",
    "\n",
    "![PDBe MolStarWebComponent](../assets/PDBe_Molstar.png) (needs updating)\n",
    "\n",
    "When using Mol*, please cite:\n",
    "\n",
    "- David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, \n",
    "Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: \n",
    "Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures, \n",
    "Nucleic Acids Research, 2021; https://doi.org/10.1093/nar/gkab314.\n",
    "\n",
    "The `PDBeMolStar` is based on a panel `ReactiveHTML` pane and thus can be used as any pane in a web application or in Jupyter notebooks. \n",
    "\n",
    "Two CSS themes are available, to select them use `theme='default'` or `theme='dark'`.  Note that currently the theme setting is shared between all Mol* viewer instances, when executing the cell below the .css theme of the viewer above updates"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",
       "  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n",
       "    root._bokeh_onload_callbacks = [];\n",
       "    root._bokeh_is_loading = undefined;\n",
       "  }\n",
       "\n",
       "  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n",
       "    root._bokeh_timeout = Date.now() + 5000;\n",
       "    root._bokeh_failed_load = false;\n",
       "  }\n",
       "\n",
       "  function run_callbacks() {\n",
       "    try {\n",
       "      root._bokeh_onload_callbacks.forEach(function(callback) {\n",
       "        if (callback != null)\n",
       "          callback();\n",
       "      });\n",
       "    } finally {\n",
       "      delete root._bokeh_onload_callbacks\n",
       "    }\n",
       "    console.debug(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(css_urls, js_urls, js_modules, callback) {\n",
       "    if (css_urls == null) css_urls = [];\n",
       "    if (js_urls == null) js_urls = [];\n",
       "    if (js_modules == null) js_modules = [];\n",
       "\n",
       "    root._bokeh_onload_callbacks.push(callback);\n",
       "    if (root._bokeh_is_loading > 0) {\n",
       "      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls.length === 0 && js_modules.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "\n",
       "    function on_load() {\n",
       "      root._bokeh_is_loading--;\n",
       "      if (root._bokeh_is_loading === 0) {\n",
       "        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n",
       "        run_callbacks()\n",
       "      }\n",
       "    }\n",
       "\n",
       "    function on_error() {\n",
       "      console.error(\"failed to load \" + url);\n",
       "    }\n",
       "\n",
       "    for (var i = 0; i < css_urls.length; i++) {\n",
       "      var url = css_urls[i];\n",
       "      const element = document.createElement(\"link\");\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.rel = \"stylesheet\";\n",
       "      element.type = \"text/css\";\n",
       "      element.href = url;\n",
       "      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n",
       "      document.body.appendChild(element);\n",
       "    }\n",
       "\n",
       "    var skip = [];\n",
       "    if (window.requirejs) {\n",
       "      window.requirejs.config({'packages': {}, 'paths': {}, 'shim': {}});\n",
       "      \n",
       "      root._bokeh_is_loading = css_urls.length + 0;\n",
       "    } else {\n",
       "      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\n",
       "    }\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      if (skip.indexOf(url) >= 0) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    for (var i = 0; i < js_modules.length; i++) {\n",
       "      var url = js_modules[i];\n",
       "      if (skip.indexOf(url) >= 0) {\n",
       "\tif (!window.requirejs) {\n",
       "\t  on_load();\n",
       "\t}\n",
       "\tcontinue;\n",
       "      }\n",
       "      var element = document.createElement('script');\n",
       "      element.onload = on_load;\n",
       "      element.onerror = on_error;\n",
       "      element.async = false;\n",
       "      element.src = url;\n",
       "      element.type = \"module\";\n",
       "      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.head.appendChild(element);\n",
       "    }\n",
       "    if (!js_urls.length && !js_modules.length) {\n",
       "      on_load()\n",
       "    }\n",
       "  };\n",
       "\n",
       "  function inject_raw_css(css) {\n",
       "    const element = document.createElement(\"style\");\n",
       "    element.appendChild(document.createTextNode(css));\n",
       "    document.body.appendChild(element);\n",
       "  }\n",
       "\n",
       "  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js\", \"https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.2.1.js\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/panel.min.js\"];\n",
       "  var js_modules = [];\n",
       "  var css_urls = [\"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/widgets.css\"];\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      inject_raw_css(\"\\n    .bk.pn-loading.arcs:before {\\n      background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4gIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjMyIiBzdHJva2Utd2lkdGg9IjgiIHN0cm9rZT0iI2MzYzNjMyIgc3Ryb2tlLWRhc2hhcnJheT0iNTAuMjY1NDgyNDU3NDM2NjkgNTAuMjY1NDgyNDU3NDM2NjkiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+ICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCI+PC9hbmltYXRlVHJhbnNmb3JtPiAgPC9jaXJjbGU+PC9zdmc+\\\");\\n      max-height: 400px;\\n    }\\n    \");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    function(Bokeh) {} // ensure no trailing comma for IE\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    if ((root.Bokeh !== undefined) || (force === true)) {\n",
       "      for (var i = 0; i < inline_js.length; i++) {\n",
       "        inline_js[i].call(root, root.Bokeh);\n",
       "      }} else if (Date.now() < root._bokeh_timeout) {\n",
       "      setTimeout(run_inline_js, 100);\n",
       "    } else if (!root._bokeh_failed_load) {\n",
       "      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n",
       "      root._bokeh_failed_load = true;\n",
       "    }\n",
       "  }\n",
       "\n",
       "  if (root._bokeh_is_loading === 0) {\n",
       "    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(css_urls, js_urls, js_modules, function() {\n",
       "      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(window));"
      ],
      "application/vnd.holoviews_load.v0+json": "\n(function(root) {\n  function now() {\n    return new Date();\n  }\n\n  var force = true;\n\n  if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n    root._bokeh_onload_callbacks = [];\n    root._bokeh_is_loading = undefined;\n  }\n\n  if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n    root._bokeh_timeout = Date.now() + 5000;\n    root._bokeh_failed_load = false;\n  }\n\n  function run_callbacks() {\n    try {\n      root._bokeh_onload_callbacks.forEach(function(callback) {\n        if (callback != null)\n          callback();\n      });\n    } finally {\n      delete root._bokeh_onload_callbacks\n    }\n    console.debug(\"Bokeh: all callbacks have finished\");\n  }\n\n  function load_libs(css_urls, js_urls, js_modules, callback) {\n    if (css_urls == null) css_urls = [];\n    if (js_urls == null) js_urls = [];\n    if (js_modules == null) js_modules = [];\n\n    root._bokeh_onload_callbacks.push(callback);\n    if (root._bokeh_is_loading > 0) {\n      console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n      return null;\n    }\n    if (js_urls.length === 0 && js_modules.length === 0) {\n      run_callbacks();\n      return null;\n    }\n    console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n\n    function on_load() {\n      root._bokeh_is_loading--;\n      if (root._bokeh_is_loading === 0) {\n        console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n        run_callbacks()\n      }\n    }\n\n    function on_error() {\n      console.error(\"failed to load \" + url);\n    }\n\n    for (var i = 0; i < css_urls.length; i++) {\n      var url = css_urls[i];\n      const element = document.createElement(\"link\");\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.rel = \"stylesheet\";\n      element.type = \"text/css\";\n      element.href = url;\n      console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n      document.body.appendChild(element);\n    }\n\n    var skip = [];\n    if (window.requirejs) {\n      window.requirejs.config({'packages': {}, 'paths': {}, 'shim': {}});\n      \n      root._bokeh_is_loading = css_urls.length + 0;\n    } else {\n      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\n    }\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      if (skip.indexOf(url) >= 0) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n    for (var i = 0; i < js_modules.length; i++) {\n      var url = js_modules[i];\n      if (skip.indexOf(url) >= 0) {\n\tif (!window.requirejs) {\n\t  on_load();\n\t}\n\tcontinue;\n      }\n      var element = document.createElement('script');\n      element.onload = on_load;\n      element.onerror = on_error;\n      element.async = false;\n      element.src = url;\n      element.type = \"module\";\n      console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n      document.head.appendChild(element);\n    }\n    if (!js_urls.length && !js_modules.length) {\n      on_load()\n    }\n  };\n\n  function inject_raw_css(css) {\n    const element = document.createElement(\"style\");\n    element.appendChild(document.createTextNode(css));\n    document.body.appendChild(element);\n  }\n\n  var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js\", \"https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.2.1.js\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/panel.min.js\"];\n  var js_modules = [];\n  var css_urls = [\"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.12.6/dist/css/widgets.css\"];\n  var inline_js = [\n    function(Bokeh) {\n      inject_raw_css(\"\\n    .bk.pn-loading.arcs:before {\\n      background-image: url(\\\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4gIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjMyIiBzdHJva2Utd2lkdGg9IjgiIHN0cm9rZT0iI2MzYzNjMyIgc3Ryb2tlLWRhc2hhcnJheT0iNTAuMjY1NDgyNDU3NDM2NjkgNTAuMjY1NDgyNDU3NDM2NjkiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+ICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxcyIga2V5VGltZXM9IjA7MSIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCI+PC9hbmltYXRlVHJhbnNmb3JtPiAgPC9jaXJjbGU+PC9zdmc+\\\");\\n      max-height: 400px;\\n    }\\n    \");\n    },\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    function(Bokeh) {} // ensure no trailing comma for IE\n  ];\n\n  function run_inline_js() {\n    if ((root.Bokeh !== undefined) || (force === true)) {\n      for (var i = 0; i < inline_js.length; i++) {\n        inline_js[i].call(root, root.Bokeh);\n      }} else if (Date.now() < root._bokeh_timeout) {\n      setTimeout(run_inline_js, 100);\n    } else if (!root._bokeh_failed_load) {\n      console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n      root._bokeh_failed_load = true;\n    }\n  }\n\n  if (root._bokeh_is_loading === 0) {\n    console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n    run_inline_js();\n  } else {\n    load_libs(css_urls, js_urls, js_modules, function() {\n      console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n      run_inline_js();\n    });\n  }\n}(window));"
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "if ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n",
       "  window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n",
       "}\n",
       "\n",
       "\n",
       "    function JupyterCommManager() {\n",
       "    }\n",
       "\n",
       "    JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n",
       "      if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n",
       "        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n",
       "        comm_manager.register_target(comm_id, function(comm) {\n",
       "          comm.on_msg(msg_handler);\n",
       "        });\n",
       "      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n",
       "        window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n",
       "          comm.onMsg = msg_handler;\n",
       "        });\n",
       "      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n",
       "        google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n",
       "          var messages = comm.messages[Symbol.asyncIterator]();\n",
       "          function processIteratorResult(result) {\n",
       "            var message = result.value;\n",
       "            console.log(message)\n",
       "            var content = {data: message.data, comm_id};\n",
       "            var buffers = []\n",
       "            for (var buffer of message.buffers || []) {\n",
       "              buffers.push(new DataView(buffer))\n",
       "            }\n",
       "            var metadata = message.metadata || {};\n",
       "            var msg = {content, buffers, metadata}\n",
       "            msg_handler(msg);\n",
       "            return messages.next().then(processIteratorResult);\n",
       "          }\n",
       "          return messages.next().then(processIteratorResult);\n",
       "        })\n",
       "      }\n",
       "    }\n",
       "\n",
       "    JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n",
       "      if (comm_id in window.PyViz.comms) {\n",
       "        return window.PyViz.comms[comm_id];\n",
       "      } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n",
       "        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n",
       "        var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n",
       "        if (msg_handler) {\n",
       "          comm.on_msg(msg_handler);\n",
       "        }\n",
       "      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n",
       "        var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n",
       "        comm.open();\n",
       "        if (msg_handler) {\n",
       "          comm.onMsg = msg_handler;\n",
       "        }\n",
       "      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n",
       "        var comm_promise = google.colab.kernel.comms.open(comm_id)\n",
       "        comm_promise.then((comm) => {\n",
       "          window.PyViz.comms[comm_id] = comm;\n",
       "          if (msg_handler) {\n",
       "            var messages = comm.messages[Symbol.asyncIterator]();\n",
       "            function processIteratorResult(result) {\n",
       "              var message = result.value;\n",
       "              var content = {data: message.data};\n",
       "              var metadata = message.metadata || {comm_id};\n",
       "              var msg = {content, metadata}\n",
       "              msg_handler(msg);\n",
       "              return messages.next().then(processIteratorResult);\n",
       "            }\n",
       "            return messages.next().then(processIteratorResult);\n",
       "          }\n",
       "        }) \n",
       "        var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n",
       "          return comm_promise.then((comm) => {\n",
       "            comm.send(data, metadata, buffers, disposeOnDone);\n",
       "          });\n",
       "        };\n",
       "        var comm = {\n",
       "          send: sendClosure\n",
       "        };\n",
       "      }\n",
       "      window.PyViz.comms[comm_id] = comm;\n",
       "      return comm;\n",
       "    }\n",
       "    window.PyViz.comm_manager = new JupyterCommManager();\n",
       "    \n",
       "\n",
       "\n",
       "var JS_MIME_TYPE = 'application/javascript';\n",
       "var HTML_MIME_TYPE = 'text/html';\n",
       "var EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\n",
       "var CLASS_NAME = 'output';\n",
       "\n",
       "/**\n",
       " * Render data to the DOM node\n",
       " */\n",
       "function render(props, node) {\n",
       "  var div = document.createElement(\"div\");\n",
       "  var script = document.createElement(\"script\");\n",
       "  node.appendChild(div);\n",
       "  node.appendChild(script);\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle when a new output is added\n",
       " */\n",
       "function handle_add_output(event, handle) {\n",
       "  var output_area = handle.output_area;\n",
       "  var output = handle.output;\n",
       "  if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n",
       "    return\n",
       "  }\n",
       "  var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n",
       "  var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n",
       "  if (id !== undefined) {\n",
       "    var nchildren = toinsert.length;\n",
       "    var html_node = toinsert[nchildren-1].children[0];\n",
       "    html_node.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "    var scripts = [];\n",
       "    var nodelist = html_node.querySelectorAll(\"script\");\n",
       "    for (var i in nodelist) {\n",
       "      if (nodelist.hasOwnProperty(i)) {\n",
       "        scripts.push(nodelist[i])\n",
       "      }\n",
       "    }\n",
       "\n",
       "    scripts.forEach( function (oldScript) {\n",
       "      var newScript = document.createElement(\"script\");\n",
       "      var attrs = [];\n",
       "      var nodemap = oldScript.attributes;\n",
       "      for (var j in nodemap) {\n",
       "        if (nodemap.hasOwnProperty(j)) {\n",
       "          attrs.push(nodemap[j])\n",
       "        }\n",
       "      }\n",
       "      attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n",
       "      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n",
       "      oldScript.parentNode.replaceChild(newScript, oldScript);\n",
       "    });\n",
       "    if (JS_MIME_TYPE in output.data) {\n",
       "      toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n",
       "    }\n",
       "    output_area._hv_plot_id = id;\n",
       "    if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n",
       "      window.PyViz.plot_index[id] = Bokeh.index[id];\n",
       "    } else {\n",
       "      window.PyViz.plot_index[id] = null;\n",
       "    }\n",
       "  } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n",
       "    var bk_div = document.createElement(\"div\");\n",
       "    bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n",
       "    var script_attrs = bk_div.children[0].attributes;\n",
       "    for (var i = 0; i < script_attrs.length; i++) {\n",
       "      toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n",
       "    }\n",
       "    // store reference to server id on output_area\n",
       "    output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n",
       "  }\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle when an output is cleared or removed\n",
       " */\n",
       "function handle_clear_output(event, handle) {\n",
       "  var id = handle.cell.output_area._hv_plot_id;\n",
       "  var server_id = handle.cell.output_area._bokeh_server_id;\n",
       "  if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n",
       "  var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n",
       "  if (server_id !== null) {\n",
       "    comm.send({event_type: 'server_delete', 'id': server_id});\n",
       "    return;\n",
       "  } else if (comm !== null) {\n",
       "    comm.send({event_type: 'delete', 'id': id});\n",
       "  }\n",
       "  delete PyViz.plot_index[id];\n",
       "  if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n",
       "    var doc = window.Bokeh.index[id].model.document\n",
       "    doc.clear();\n",
       "    const i = window.Bokeh.documents.indexOf(doc);\n",
       "    if (i > -1) {\n",
       "      window.Bokeh.documents.splice(i, 1);\n",
       "    }\n",
       "  }\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle kernel restart event\n",
       " */\n",
       "function handle_kernel_cleanup(event, handle) {\n",
       "  delete PyViz.comms[\"hv-extension-comm\"];\n",
       "  window.PyViz.plot_index = {}\n",
       "}\n",
       "\n",
       "/**\n",
       " * Handle update_display_data messages\n",
       " */\n",
       "function handle_update_output(event, handle) {\n",
       "  handle_clear_output(event, {cell: {output_area: handle.output_area}})\n",
       "  handle_add_output(event, handle)\n",
       "}\n",
       "\n",
       "function register_renderer(events, OutputArea) {\n",
       "  function append_mime(data, metadata, element) {\n",
       "    // create a DOM node to render to\n",
       "    var toinsert = this.create_output_subarea(\n",
       "    metadata,\n",
       "    CLASS_NAME,\n",
       "    EXEC_MIME_TYPE\n",
       "    );\n",
       "    this.keyboard_manager.register_events(toinsert);\n",
       "    // Render to node\n",
       "    var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n",
       "    render(props, toinsert[0]);\n",
       "    element.append(toinsert);\n",
       "    return toinsert\n",
       "  }\n",
       "\n",
       "  events.on('output_added.OutputArea', handle_add_output);\n",
       "  events.on('output_updated.OutputArea', handle_update_output);\n",
       "  events.on('clear_output.CodeCell', handle_clear_output);\n",
       "  events.on('delete.Cell', handle_clear_output);\n",
       "  events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n",
       "\n",
       "  OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n",
       "    safe: true,\n",
       "    index: 0\n",
       "  });\n",
       "}\n",
       "\n",
       "if (window.Jupyter !== undefined) {\n",
       "  try {\n",
       "    var events = require('base/js/events');\n",
       "    var OutputArea = require('notebook/js/outputarea').OutputArea;\n",
       "    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n",
       "      register_renderer(events, OutputArea);\n",
       "    }\n",
       "  } catch(err) {\n",
       "  }\n",
       "}\n"
      ],
      "application/vnd.holoviews_load.v0+json": "\nif ((window.PyViz === undefined) || (window.PyViz instanceof HTMLElement)) {\n  window.PyViz = {comms: {}, comm_status:{}, kernels:{}, receivers: {}, plot_index: []}\n}\n\n\n    function JupyterCommManager() {\n    }\n\n    JupyterCommManager.prototype.register_target = function(plot_id, comm_id, msg_handler) {\n      if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n        comm_manager.register_target(comm_id, function(comm) {\n          comm.on_msg(msg_handler);\n        });\n      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n        window.PyViz.kernels[plot_id].registerCommTarget(comm_id, function(comm) {\n          comm.onMsg = msg_handler;\n        });\n      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n        google.colab.kernel.comms.registerTarget(comm_id, (comm) => {\n          var messages = comm.messages[Symbol.asyncIterator]();\n          function processIteratorResult(result) {\n            var message = result.value;\n            console.log(message)\n            var content = {data: message.data, comm_id};\n            var buffers = []\n            for (var buffer of message.buffers || []) {\n              buffers.push(new DataView(buffer))\n            }\n            var metadata = message.metadata || {};\n            var msg = {content, buffers, metadata}\n            msg_handler(msg);\n            return messages.next().then(processIteratorResult);\n          }\n          return messages.next().then(processIteratorResult);\n        })\n      }\n    }\n\n    JupyterCommManager.prototype.get_client_comm = function(plot_id, comm_id, msg_handler) {\n      if (comm_id in window.PyViz.comms) {\n        return window.PyViz.comms[comm_id];\n      } else if (window.comm_manager || ((window.Jupyter !== undefined) && (Jupyter.notebook.kernel != null))) {\n        var comm_manager = window.comm_manager || Jupyter.notebook.kernel.comm_manager;\n        var comm = comm_manager.new_comm(comm_id, {}, {}, {}, comm_id);\n        if (msg_handler) {\n          comm.on_msg(msg_handler);\n        }\n      } else if ((plot_id in window.PyViz.kernels) && (window.PyViz.kernels[plot_id])) {\n        var comm = window.PyViz.kernels[plot_id].connectToComm(comm_id);\n        comm.open();\n        if (msg_handler) {\n          comm.onMsg = msg_handler;\n        }\n      } else if (typeof google != 'undefined' && google.colab.kernel != null) {\n        var comm_promise = google.colab.kernel.comms.open(comm_id)\n        comm_promise.then((comm) => {\n          window.PyViz.comms[comm_id] = comm;\n          if (msg_handler) {\n            var messages = comm.messages[Symbol.asyncIterator]();\n            function processIteratorResult(result) {\n              var message = result.value;\n              var content = {data: message.data};\n              var metadata = message.metadata || {comm_id};\n              var msg = {content, metadata}\n              msg_handler(msg);\n              return messages.next().then(processIteratorResult);\n            }\n            return messages.next().then(processIteratorResult);\n          }\n        }) \n        var sendClosure = (data, metadata, buffers, disposeOnDone) => {\n          return comm_promise.then((comm) => {\n            comm.send(data, metadata, buffers, disposeOnDone);\n          });\n        };\n        var comm = {\n          send: sendClosure\n        };\n      }\n      window.PyViz.comms[comm_id] = comm;\n      return comm;\n    }\n    window.PyViz.comm_manager = new JupyterCommManager();\n    \n\n\nvar JS_MIME_TYPE = 'application/javascript';\nvar HTML_MIME_TYPE = 'text/html';\nvar EXEC_MIME_TYPE = 'application/vnd.holoviews_exec.v0+json';\nvar CLASS_NAME = 'output';\n\n/**\n * Render data to the DOM node\n */\nfunction render(props, node) {\n  var div = document.createElement(\"div\");\n  var script = document.createElement(\"script\");\n  node.appendChild(div);\n  node.appendChild(script);\n}\n\n/**\n * Handle when a new output is added\n */\nfunction handle_add_output(event, handle) {\n  var output_area = handle.output_area;\n  var output = handle.output;\n  if ((output.data == undefined) || (!output.data.hasOwnProperty(EXEC_MIME_TYPE))) {\n    return\n  }\n  var id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n  var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n  if (id !== undefined) {\n    var nchildren = toinsert.length;\n    var html_node = toinsert[nchildren-1].children[0];\n    html_node.innerHTML = output.data[HTML_MIME_TYPE];\n    var scripts = [];\n    var nodelist = html_node.querySelectorAll(\"script\");\n    for (var i in nodelist) {\n      if (nodelist.hasOwnProperty(i)) {\n        scripts.push(nodelist[i])\n      }\n    }\n\n    scripts.forEach( function (oldScript) {\n      var newScript = document.createElement(\"script\");\n      var attrs = [];\n      var nodemap = oldScript.attributes;\n      for (var j in nodemap) {\n        if (nodemap.hasOwnProperty(j)) {\n          attrs.push(nodemap[j])\n        }\n      }\n      attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });\n      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n      oldScript.parentNode.replaceChild(newScript, oldScript);\n    });\n    if (JS_MIME_TYPE in output.data) {\n      toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];\n    }\n    output_area._hv_plot_id = id;\n    if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {\n      window.PyViz.plot_index[id] = Bokeh.index[id];\n    } else {\n      window.PyViz.plot_index[id] = null;\n    }\n  } else if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n    var bk_div = document.createElement(\"div\");\n    bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n    var script_attrs = bk_div.children[0].attributes;\n    for (var i = 0; i < script_attrs.length; i++) {\n      toinsert[toinsert.length - 1].childNodes[1].setAttribute(script_attrs[i].name, script_attrs[i].value);\n    }\n    // store reference to server id on output_area\n    output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n  }\n}\n\n/**\n * Handle when an output is cleared or removed\n */\nfunction handle_clear_output(event, handle) {\n  var id = handle.cell.output_area._hv_plot_id;\n  var server_id = handle.cell.output_area._bokeh_server_id;\n  if (((id === undefined) || !(id in PyViz.plot_index)) && (server_id !== undefined)) { return; }\n  var comm = window.PyViz.comm_manager.get_client_comm(\"hv-extension-comm\", \"hv-extension-comm\", function () {});\n  if (server_id !== null) {\n    comm.send({event_type: 'server_delete', 'id': server_id});\n    return;\n  } else if (comm !== null) {\n    comm.send({event_type: 'delete', 'id': id});\n  }\n  delete PyViz.plot_index[id];\n  if ((window.Bokeh !== undefined) & (id in window.Bokeh.index)) {\n    var doc = window.Bokeh.index[id].model.document\n    doc.clear();\n    const i = window.Bokeh.documents.indexOf(doc);\n    if (i > -1) {\n      window.Bokeh.documents.splice(i, 1);\n    }\n  }\n}\n\n/**\n * Handle kernel restart event\n */\nfunction handle_kernel_cleanup(event, handle) {\n  delete PyViz.comms[\"hv-extension-comm\"];\n  window.PyViz.plot_index = {}\n}\n\n/**\n * Handle update_display_data messages\n */\nfunction handle_update_output(event, handle) {\n  handle_clear_output(event, {cell: {output_area: handle.output_area}})\n  handle_add_output(event, handle)\n}\n\nfunction register_renderer(events, OutputArea) {\n  function append_mime(data, metadata, element) {\n    // create a DOM node to render to\n    var toinsert = this.create_output_subarea(\n    metadata,\n    CLASS_NAME,\n    EXEC_MIME_TYPE\n    );\n    this.keyboard_manager.register_events(toinsert);\n    // Render to node\n    var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n    render(props, toinsert[0]);\n    element.append(toinsert);\n    return toinsert\n  }\n\n  events.on('output_added.OutputArea', handle_add_output);\n  events.on('output_updated.OutputArea', handle_update_output);\n  events.on('clear_output.CodeCell', handle_clear_output);\n  events.on('delete.Cell', handle_clear_output);\n  events.on('kernel_ready.Kernel', handle_kernel_cleanup);\n\n  OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n    safe: true,\n    index: 0\n  });\n}\n\nif (window.Jupyter !== undefined) {\n  try {\n    var events = require('base/js/events');\n    var OutputArea = require('notebook/js/outputarea').OutputArea;\n    if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n      register_renderer(events, OutputArea);\n    }\n  } catch(err) {\n  }\n}\n"
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from panel_chemistry.pane import PDBeMolStar\n",
    "import param\n",
    "import panel as pn\n",
    "pn.extension(sizing_mode=\"stretch_width\", template=\"fast\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basic Examples\n",
    "\n",
    "Download and display the '1qyn' molecule from the protein database:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {},
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.holoviews_exec.v0+json": "",
      "text/html": [
       "<div id='1007'>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"3b275504-9305-4bff-9c38-4eff27330ccc\" data-root-id=\"1007\"></div>\n",
       "</div>\n",
       "<script type=\"application/javascript\">(function(root) {\n",
       "  function embed_document(root) {\n",
       "    var docs_json = {\"6181d8a9-174d-45ce-8564-c74ed56269a7\":{\"defs\":[{\"extends\":null,\"module\":null,\"name\":\"ReactiveHTML1\",\"overrides\":[],\"properties\":[]},{\"extends\":null,\"module\":null,\"name\":\"FlexBox1\",\"overrides\":[],\"properties\":[{\"default\":\"flex-start\",\"kind\":null,\"name\":\"align_content\"},{\"default\":\"flex-start\",\"kind\":null,\"name\":\"align_items\"},{\"default\":\"row\",\"kind\":null,\"name\":\"flex_direction\"},{\"default\":\"wrap\",\"kind\":null,\"name\":\"flex_wrap\"},{\"default\":\"flex-start\",\"kind\":null,\"name\":\"justify_content\"}]},{\"extends\":null,\"module\":null,\"name\":\"TemplateActions1\",\"overrides\":[],\"properties\":[{\"default\":0,\"kind\":null,\"name\":\"open_modal\"},{\"default\":0,\"kind\":null,\"name\":\"close_modal\"}]},{\"extends\":null,\"module\":null,\"name\":\"MaterialTemplateActions1\",\"overrides\":[],\"properties\":[{\"default\":0,\"kind\":null,\"name\":\"open_modal\"},{\"default\":0,\"kind\":null,\"name\":\"close_modal\"}]},{\"extends\":null,\"module\":null,\"name\":\"PDBeMolStar1\",\"overrides\":[],\"properties\":[{\"default\":null,\"kind\":null,\"name\":\"molecule_id\"},{\"default\":null,\"kind\":null,\"name\":\"custom_data\"},{\"default\":null,\"kind\":null,\"name\":\"ligand_view\"},{\"default\":false,\"kind\":null,\"name\":\"alphafold_view\"},{\"default\":\"\",\"kind\":null,\"name\":\"assembly_id\"},{\"default\":\"#F7F7F7\",\"kind\":null,\"name\":\"bg_color\"},{\"default\":\"#ff6699\",\"kind\":null,\"name\":\"highlight_color\"},{\"default\":\"#0c0d11\",\"kind\":null,\"name\":\"select_color\"},{\"default\":null,\"kind\":null,\"name\":\"visual_style\"},{\"default\":\"default\",\"kind\":null,\"name\":\"theme\"},{\"default\":false,\"kind\":null,\"name\":\"hide_polymer\"},{\"default\":false,\"kind\":null,\"name\":\"hide_water\"},{\"default\":false,\"kind\":null,\"name\":\"hide_heteroatoms\"},{\"default\":false,\"kind\":null,\"name\":\"hide_carbs\"},{\"default\":false,\"kind\":null,\"name\":\"hide_non_standard\"},{\"default\":false,\"kind\":null,\"name\":\"hide_coarse\"},{\"default\":false,\"kind\":null,\"name\":\"hide_controls_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_expand_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_settings_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_selection_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_animation_icon\"},{\"default\":null,\"kind\":null,\"name\":\"pdbe_url\"},{\"default\":false,\"kind\":null,\"name\":\"load_maps\"},{\"default\":false,\"kind\":null,\"name\":\"validation_annotation\"},{\"default\":false,\"kind\":null,\"name\":\"domain_annotation\"},{\"default\":false,\"kind\":null,\"name\":\"low_precision_coords\"},{\"default\":true,\"kind\":null,\"name\":\"hide_controls\"},{\"default\":false,\"kind\":null,\"name\":\"expanded\"},{\"default\":true,\"kind\":null,\"name\":\"landscape\"},{\"default\":true,\"kind\":null,\"name\":\"select_interaction\"},{\"default\":\"matte\",\"kind\":null,\"name\":\"lighting\"},{\"default\":\"default\",\"kind\":null,\"name\":\"default_preset\"},{\"default\":true,\"kind\":null,\"name\":\"pdbe_link\"},{\"default\":false,\"kind\":null,\"name\":\"spin\"},{\"default\":false,\"kind\":null,\"name\":\"_clear_highlight\"},{\"default\":null,\"kind\":null,\"name\":\"_select\"},{\"default\":false,\"kind\":null,\"name\":\"_clear_selection\"},{\"default\":null,\"kind\":null,\"name\":\"_highlight\"},{\"default\":false,\"kind\":null,\"name\":\"_reset\"},{\"default\":null,\"kind\":null,\"name\":\"_args\"},{\"default\":false,\"kind\":null,\"name\":\"test\"}]}],\"roots\":{\"references\":[{\"attributes\":{\"client_comm_id\":\"4a397dda863b4954a8db87f99c0b336f\",\"comm_id\":\"74133b2fdf4b4c0483dfe018709b9220\",\"plot_id\":\"1007\"},\"id\":\"1008\",\"type\":\"panel.models.comm_manager.CommManager\"},{\"attributes\":{\"_args\":null,\"_highlight\":null,\"_select\":null,\"custom_data\":null,\"ligand_view\":null,\"molecule_id\":\"1qyn\",\"name\":\"PDBeMolStar00106\"},\"id\":\"1006\",\"type\":\"PDBeMolStar1\"},{\"attributes\":{\"data\":{\"id\":\"1006\"},\"height\":500,\"html\":\"\\n&lt;link id=&quot;molstarTheme-${id}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.1.css&quot;/&gt;\\n&lt;div id=&quot;container-${id}&quot; style=&quot;width:100%; height: 100%;&quot;&gt;&lt;div id=&quot;pdbeViewer-${id}&quot;&gt;&lt;/div&gt;&lt;/div&gt;\",\"margin\":[5,5,5,5],\"nodes\":[\"molstarTheme\",\"container\",\"pdbeViewer\"],\"scripts\":{\"_clear_highlight\":[\"state.viewerInstance.visual.clearHighlight();\"],\"_clear_selection\":[\"state.viewerInstance.visual.clearSelection(data._args[&#x27;number&#x27;]);\"],\"_highlight\":[\"if(data._highlight) {\\n    state.viewerInstance.visual.highlight(data._highlight);\\n};\"],\"_reset\":[\"state.viewerInstance.visual.reset(data._args[&#x27;data&#x27;])\"],\"_select\":[\"if(data._select) {\\nstate.viewerInstance.visual.select(data._select);\\n}\"],\"alphafold_view\":[\"self.rerender()\"],\"assembly_id\":[\"self.rerender()\"],\"bg_color\":[\"state.viewerInstance.canvas.setBgColor(state.toRgb(data.bg_color))\"],\"custom_data\":[\"self.rerender()\"],\"default_preset\":[\"self.rerender()\"],\"domain_annotation\":[\"self.rerender()\"],\"expanded\":[\"state.viewerInstance.canvas.toggleExpanded(data.expanded)\"],\"hide_animation_icon\":[\"self.rerender()\"],\"hide_carbs\":[\"state.viewerInstance.visual.visibility({carbs:!data.hide_carbs})\"],\"hide_coarse\":[\"state.viewerInstance.visual.visibility({coarse:!data.hide_coarse})\"],\"hide_controls\":[\"state.viewerInstance.canvas.toggleControls(!data.hide_controls);\"],\"hide_controls_icon\":[\"self.rerender()\"],\"hide_expand_icon\":[\"self.rerender()\"],\"hide_heteroatoms\":[\"state.viewerInstance.visual.visibility({het:!data.hide_heteroatoms})\"],\"hide_non_standard\":[\"state.viewerInstance.visual.visibility({nonStandard:!data.hide_non_standard})\"],\"hide_polymer\":[\"state.viewerInstance.visual.visibility({polymer:!data.hide_polymer})\"],\"hide_selection_icon\":[\"self.rerender()\"],\"hide_settings_icon\":[\"self.rerender()\"],\"hide_water\":[\"state.viewerInstance.visual.visibility({water:!data.hide_water})\"],\"highlight_color\":[\"state.viewerInstance.visual.setColor({highlight: state.toRgb(data.highlight_color)})\"],\"landscape\":[\"self.rerender()\"],\"ligand_view\":[\"self.rerender()\"],\"lighting\":[\"self.rerender()\"],\"load_maps\":[\"self.rerender()\"],\"low_precision_coords\":[\"self.rerender()\"],\"molecule_id\":[\"self.rerender()\"],\"pdbe_link\":[\"self.rerender()\"],\"render\":[\"function standardize_color(str){\\n    var ctx = document.createElement(&quot;canvas&quot;).getContext(&quot;2d&quot;);\\n    ctx.fillStyle = str;\\n    return ctx.fillStyle;\\n}\\nfunction toRgb(color) {\\n  var hex = standardize_color(color)\\n  var result = /^#?([a-f\\\\d]{2})([a-f\\\\d]{2})([a-f\\\\d]{2})$/i.exec(hex);\\n  return result ? {\\n    r: parseInt(result[1], 16),\\n    g: parseInt(result[2], 16),\\n    b: parseInt(result[3], 16)\\n  } : null;\\n}\\nstate.toRgb = toRgb\\n\\nfunction getHideStructure(){\\n    var hideStructure = [];\\n\\n    if (data.hide_polymer){\\n        hideStructure.push(&quot;polymer&quot;)\\n    }\\n    if (data.hide_water){\\n        hideStructure.push(&quot;water&quot;)\\n    }\\n    if (data.hide_heteroatoms){\\n        hideStructure.push(&quot;het&quot;)\\n    }\\n    if (data.hide_carbs){\\n        hideStructure.push(&quot;carbs&quot;)\\n    }\\n    if (data.hide_non_standard){\\n        hideStructure.push(&quot;nonStandard&quot;)\\n    }\\n    if (data.hide_coarse){\\n        hideStructure.push(&quot;coarse&quot;)\\n    }\\n\\n    return hideStructure\\n}\\n\\nfunction getHideCanvasControls(){\\n    var hideCanvasControls = [];\\n    if (data.hide_controls_icon){\\n        hideCanvasControls.push(&quot;controlToggle&quot;)\\n    }\\n    if (data.hide_expand_icon){\\n        hideCanvasControls.push(&quot;expand&quot;)\\n    }\\n    if (data.hide_settings_icon){\\n        hideCanvasControls.push(&quot;controlInfo&quot;)\\n    }\\n    if (data.hide_selection_icon){\\n        hideCanvasControls.push(&#x27;selection&#x27;)\\n    }\\n    if (data.hide_animation_icon){\\n        hideCanvasControls.push(&quot;animation&quot;)\\n    }\\n\\n    return hideCanvasControls\\n}\\n\\nstate.getHideCanvasControls = getHideCanvasControls\\n\\nfunction getOptions(){\\n    var options = {\\n        moleculeId: data.molecule_id,\\n        customData: data.custom_data,\\n        ligandView: data.ligand_view,\\n        alphafoldView: data.alphafold_view,\\n        assemblyId: data.assembly_id,\\n        bgColor: toRgb(data.bg_color),\\n        highlightColor: toRgb(data.highlight_color),\\n        selectColor: toRgb(data.select_color),\\n        hideStructure: getHideStructure(),\\n        hideCanvasControls: getHideCanvasControls(),\\n        loadMaps: data.load_maps,\\n        validationAnnotation: data.validation_annotation,\\n        domainAnnotation: data.domain_annotation,\\n        lowPrecisionCoords: data.low_precision_coords,\\n        expanded: data.expanded,\\n        hideControls: data.hide_controls,\\n        landscape: data.landscape,\\n        selectInteraction: data.select_interaction,\\n        lighting: data.lighting,\\n        defaultPreset: data.default_preset,\\n        pdbeLink: data.pdbe_link,\\n    }\\n    if (data.visual_style!==null){\\n        options[&quot;visualStyle&quot;]=data.visual_style\\n    }\\n    if (data.pdbe_url!==null){\\n        options[&quot;pdbeUrl&quot;]=data.pdbe_url\\n    }\\n    return options\\n}\\nstate.getOptions=getOptions\\nself.theme()\\n\\nstate.viewerInstance = new PDBeMolstarPlugin();\\nstate.viewerInstance.render(pdbeViewer, state.getOptions());\"],\"rerender\":[\"state.viewerInstance.visual.update(state.getOptions(), fullLoad=true)\"],\"resize\":[\"state.viewerInstance.canvas.handleResize()\"],\"select_color\":[\"state.viewerInstance.visual.setColor({select: state.toRgb(data.select_color)})\"],\"select_interaction\":[\"self.rerender()\"],\"spin\":[\"state.viewerInstance.visual.toggleSpin(data.spin);\"],\"theme\":[\"if (data.theme===&quot;dark&quot;){\\n    molstarTheme.href=&quot;https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.1.css&quot;\\n} else {\\n    molstarTheme.href=&quot;https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-1.2.1.css&quot;\\n}\"],\"validation_annotation\":[\"self.rerender()\"],\"visual_style\":[\"self.rerender()\"]},\"sizing_mode\":\"stretch_width\",\"subscribed_events\":[\"dom_event\"]},\"id\":\"1007\",\"type\":\"panel.models.reactive_html.ReactiveHTML\"}],\"root_ids\":[\"1007\",\"1008\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.2\"}};\n",
       "    var render_items = [{\"docid\":\"6181d8a9-174d-45ce-8564-c74ed56269a7\",\"root_ids\":[\"1007\"],\"roots\":{\"1007\":\"3b275504-9305-4bff-9c38-4eff27330ccc\"}}];\n",
       "    root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "  }\n",
       "  if (root.Bokeh !== undefined && root.Bokeh.Panel !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined && root.Bokeh.Panel !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else if (document.readyState == \"complete\") {\n",
       "        attempts++;\n",
       "        if (attempts > 200) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 25, root)\n",
       "  }\n",
       "})(window);</script>"
      ],
      "text/plain": [
       "PDBeMolStar(height=500, molecule_id='1qyn', sizing_mode='stretch_width')"
      ]
     },
     "execution_count": 5,
     "metadata": {
      "application/vnd.holoviews_exec.v0+json": {
       "id": "1007"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "PDBeMolStar(\n",
    "    height=500,\n",
    "    molecule_id='1qyn')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Using a local file, using Jupyter to serve the file. \n",
    "Make sure url of the file to show is correct relative to where Jupyter notebook was started. For the example below, start Jupyter Notebook in the panel-chemistry root dir"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {},
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.holoviews_exec.v0+json": "",
      "text/html": [
       "<div id='1010'>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"04e5a0eb-2f2a-42c2-b210-a7e9aeec4154\" data-root-id=\"1010\"></div>\n",
       "</div>\n",
       "<script type=\"application/javascript\">(function(root) {\n",
       "  function embed_document(root) {\n",
       "    var docs_json = {\"dfbfef00-c215-4f30-8d06-5a6328c5e171\":{\"defs\":[{\"extends\":null,\"module\":null,\"name\":\"ReactiveHTML1\",\"overrides\":[],\"properties\":[]},{\"extends\":null,\"module\":null,\"name\":\"FlexBox1\",\"overrides\":[],\"properties\":[{\"default\":\"flex-start\",\"kind\":null,\"name\":\"align_content\"},{\"default\":\"flex-start\",\"kind\":null,\"name\":\"align_items\"},{\"default\":\"row\",\"kind\":null,\"name\":\"flex_direction\"},{\"default\":\"wrap\",\"kind\":null,\"name\":\"flex_wrap\"},{\"default\":\"flex-start\",\"kind\":null,\"name\":\"justify_content\"}]},{\"extends\":null,\"module\":null,\"name\":\"TemplateActions1\",\"overrides\":[],\"properties\":[{\"default\":0,\"kind\":null,\"name\":\"open_modal\"},{\"default\":0,\"kind\":null,\"name\":\"close_modal\"}]},{\"extends\":null,\"module\":null,\"name\":\"MaterialTemplateActions1\",\"overrides\":[],\"properties\":[{\"default\":0,\"kind\":null,\"name\":\"open_modal\"},{\"default\":0,\"kind\":null,\"name\":\"close_modal\"}]},{\"extends\":null,\"module\":null,\"name\":\"PDBeMolStar1\",\"overrides\":[],\"properties\":[{\"default\":null,\"kind\":null,\"name\":\"molecule_id\"},{\"default\":null,\"kind\":null,\"name\":\"custom_data\"},{\"default\":null,\"kind\":null,\"name\":\"ligand_view\"},{\"default\":false,\"kind\":null,\"name\":\"alphafold_view\"},{\"default\":\"\",\"kind\":null,\"name\":\"assembly_id\"},{\"default\":\"#F7F7F7\",\"kind\":null,\"name\":\"bg_color\"},{\"default\":\"#ff6699\",\"kind\":null,\"name\":\"highlight_color\"},{\"default\":\"#0c0d11\",\"kind\":null,\"name\":\"select_color\"},{\"default\":null,\"kind\":null,\"name\":\"visual_style\"},{\"default\":\"default\",\"kind\":null,\"name\":\"theme\"},{\"default\":false,\"kind\":null,\"name\":\"hide_polymer\"},{\"default\":false,\"kind\":null,\"name\":\"hide_water\"},{\"default\":false,\"kind\":null,\"name\":\"hide_heteroatoms\"},{\"default\":false,\"kind\":null,\"name\":\"hide_carbs\"},{\"default\":false,\"kind\":null,\"name\":\"hide_non_standard\"},{\"default\":false,\"kind\":null,\"name\":\"hide_coarse\"},{\"default\":false,\"kind\":null,\"name\":\"hide_controls_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_expand_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_settings_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_selection_icon\"},{\"default\":false,\"kind\":null,\"name\":\"hide_animation_icon\"},{\"default\":null,\"kind\":null,\"name\":\"pdbe_url\"},{\"default\":false,\"kind\":null,\"name\":\"load_maps\"},{\"default\":false,\"kind\":null,\"name\":\"validation_annotation\"},{\"default\":false,\"kind\":null,\"name\":\"domain_annotation\"},{\"default\":false,\"kind\":null,\"name\":\"low_precision_coords\"},{\"default\":true,\"kind\":null,\"name\":\"hide_controls\"},{\"default\":false,\"kind\":null,\"name\":\"expanded\"},{\"default\":true,\"kind\":null,\"name\":\"landscape\"},{\"default\":true,\"kind\":null,\"name\":\"select_interaction\"},{\"default\":\"matte\",\"kind\":null,\"name\":\"lighting\"},{\"default\":\"default\",\"kind\":null,\"name\":\"default_preset\"},{\"default\":true,\"kind\":null,\"name\":\"pdbe_link\"},{\"default\":false,\"kind\":null,\"name\":\"spin\"},{\"default\":false,\"kind\":null,\"name\":\"_clear_highlight\"},{\"default\":null,\"kind\":null,\"name\":\"_select\"},{\"default\":false,\"kind\":null,\"name\":\"_clear_selection\"},{\"default\":null,\"kind\":null,\"name\":\"_highlight\"},{\"default\":false,\"kind\":null,\"name\":\"_reset\"},{\"default\":null,\"kind\":null,\"name\":\"_args\"},{\"default\":false,\"kind\":null,\"name\":\"test\"}]}],\"roots\":{\"references\":[{\"attributes\":{\"data\":{\"id\":\"1009\"},\"height\":500,\"html\":\"\\n&lt;link id=&quot;molstarTheme-${id}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.1.css&quot;/&gt;\\n&lt;div id=&quot;container-${id}&quot; style=&quot;width:100%; height: 100%;&quot;&gt;&lt;div id=&quot;pdbeViewer-${id}&quot;&gt;&lt;/div&gt;&lt;/div&gt;\",\"margin\":[5,5,5,5],\"nodes\":[\"molstarTheme\",\"container\",\"pdbeViewer\"],\"scripts\":{\"_clear_highlight\":[\"state.viewerInstance.visual.clearHighlight();\"],\"_clear_selection\":[\"state.viewerInstance.visual.clearSelection(data._args[&#x27;number&#x27;]);\"],\"_highlight\":[\"if(data._highlight) {\\n    state.viewerInstance.visual.highlight(data._highlight);\\n};\"],\"_reset\":[\"state.viewerInstance.visual.reset(data._args[&#x27;data&#x27;])\"],\"_select\":[\"if(data._select) {\\nstate.viewerInstance.visual.select(data._select);\\n}\"],\"alphafold_view\":[\"self.rerender()\"],\"assembly_id\":[\"self.rerender()\"],\"bg_color\":[\"state.viewerInstance.canvas.setBgColor(state.toRgb(data.bg_color))\"],\"custom_data\":[\"self.rerender()\"],\"default_preset\":[\"self.rerender()\"],\"domain_annotation\":[\"self.rerender()\"],\"expanded\":[\"state.viewerInstance.canvas.toggleExpanded(data.expanded)\"],\"hide_animation_icon\":[\"self.rerender()\"],\"hide_carbs\":[\"state.viewerInstance.visual.visibility({carbs:!data.hide_carbs})\"],\"hide_coarse\":[\"state.viewerInstance.visual.visibility({coarse:!data.hide_coarse})\"],\"hide_controls\":[\"state.viewerInstance.canvas.toggleControls(!data.hide_controls);\"],\"hide_controls_icon\":[\"self.rerender()\"],\"hide_expand_icon\":[\"self.rerender()\"],\"hide_heteroatoms\":[\"state.viewerInstance.visual.visibility({het:!data.hide_heteroatoms})\"],\"hide_non_standard\":[\"state.viewerInstance.visual.visibility({nonStandard:!data.hide_non_standard})\"],\"hide_polymer\":[\"state.viewerInstance.visual.visibility({polymer:!data.hide_polymer})\"],\"hide_selection_icon\":[\"self.rerender()\"],\"hide_settings_icon\":[\"self.rerender()\"],\"hide_water\":[\"state.viewerInstance.visual.visibility({water:!data.hide_water})\"],\"highlight_color\":[\"state.viewerInstance.visual.setColor({highlight: state.toRgb(data.highlight_color)})\"],\"landscape\":[\"self.rerender()\"],\"ligand_view\":[\"self.rerender()\"],\"lighting\":[\"self.rerender()\"],\"load_maps\":[\"self.rerender()\"],\"low_precision_coords\":[\"self.rerender()\"],\"molecule_id\":[\"self.rerender()\"],\"pdbe_link\":[\"self.rerender()\"],\"render\":[\"function standardize_color(str){\\n    var ctx = document.createElement(&quot;canvas&quot;).getContext(&quot;2d&quot;);\\n    ctx.fillStyle = str;\\n    return ctx.fillStyle;\\n}\\nfunction toRgb(color) {\\n  var hex = standardize_color(color)\\n  var result = /^#?([a-f\\\\d]{2})([a-f\\\\d]{2})([a-f\\\\d]{2})$/i.exec(hex);\\n  return result ? {\\n    r: parseInt(result[1], 16),\\n    g: parseInt(result[2], 16),\\n    b: parseInt(result[3], 16)\\n  } : null;\\n}\\nstate.toRgb = toRgb\\n\\nfunction getHideStructure(){\\n    var hideStructure = [];\\n\\n    if (data.hide_polymer){\\n        hideStructure.push(&quot;polymer&quot;)\\n    }\\n    if (data.hide_water){\\n        hideStructure.push(&quot;water&quot;)\\n    }\\n    if (data.hide_heteroatoms){\\n        hideStructure.push(&quot;het&quot;)\\n    }\\n    if (data.hide_carbs){\\n        hideStructure.push(&quot;carbs&quot;)\\n    }\\n    if (data.hide_non_standard){\\n        hideStructure.push(&quot;nonStandard&quot;)\\n    }\\n    if (data.hide_coarse){\\n        hideStructure.push(&quot;coarse&quot;)\\n    }\\n\\n    return hideStructure\\n}\\n\\nfunction getHideCanvasControls(){\\n    var hideCanvasControls = [];\\n    if (data.hide_controls_icon){\\n        hideCanvasControls.push(&quot;controlToggle&quot;)\\n    }\\n    if (data.hide_expand_icon){\\n        hideCanvasControls.push(&quot;expand&quot;)\\n    }\\n    if (data.hide_settings_icon){\\n        hideCanvasControls.push(&quot;controlInfo&quot;)\\n    }\\n    if (data.hide_selection_icon){\\n        hideCanvasControls.push(&#x27;selection&#x27;)\\n    }\\n    if (data.hide_animation_icon){\\n        hideCanvasControls.push(&quot;animation&quot;)\\n    }\\n\\n    return hideCanvasControls\\n}\\n\\nstate.getHideCanvasControls = getHideCanvasControls\\n\\nfunction getOptions(){\\n    var options = {\\n        moleculeId: data.molecule_id,\\n        customData: data.custom_data,\\n        ligandView: data.ligand_view,\\n        alphafoldView: data.alphafold_view,\\n        assemblyId: data.assembly_id,\\n        bgColor: toRgb(data.bg_color),\\n        highlightColor: toRgb(data.highlight_color),\\n        selectColor: toRgb(data.select_color),\\n        hideStructure: getHideStructure(),\\n        hideCanvasControls: getHideCanvasControls(),\\n        loadMaps: data.load_maps,\\n        validationAnnotation: data.validation_annotation,\\n        domainAnnotation: data.domain_annotation,\\n        lowPrecisionCoords: data.low_precision_coords,\\n        expanded: data.expanded,\\n        hideControls: data.hide_controls,\\n        landscape: data.landscape,\\n        selectInteraction: data.select_interaction,\\n        lighting: data.lighting,\\n        defaultPreset: data.default_preset,\\n        pdbeLink: data.pdbe_link,\\n    }\\n    if (data.visual_style!==null){\\n        options[&quot;visualStyle&quot;]=data.visual_style\\n    }\\n    if (data.pdbe_url!==null){\\n        options[&quot;pdbeUrl&quot;]=data.pdbe_url\\n    }\\n    return options\\n}\\nstate.getOptions=getOptions\\nself.theme()\\n\\nstate.viewerInstance = new PDBeMolstarPlugin();\\nstate.viewerInstance.render(pdbeViewer, state.getOptions());\"],\"rerender\":[\"state.viewerInstance.visual.update(state.getOptions(), fullLoad=true)\"],\"resize\":[\"state.viewerInstance.canvas.handleResize()\"],\"select_color\":[\"state.viewerInstance.visual.setColor({select: state.toRgb(data.select_color)})\"],\"select_interaction\":[\"self.rerender()\"],\"spin\":[\"state.viewerInstance.visual.toggleSpin(data.spin);\"],\"theme\":[\"if (data.theme===&quot;dark&quot;){\\n    molstarTheme.href=&quot;https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.1.css&quot;\\n} else {\\n    molstarTheme.href=&quot;https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-light-1.2.1.css&quot;\\n}\"],\"validation_annotation\":[\"self.rerender()\"],\"visual_style\":[\"self.rerender()\"]},\"sizing_mode\":\"stretch_width\",\"subscribed_events\":[\"dom_event\"]},\"id\":\"1010\",\"type\":\"panel.models.reactive_html.ReactiveHTML\"},{\"attributes\":{\"client_comm_id\":\"69a3275872e7418eaff30922c5384430\",\"comm_id\":\"3d1d6dabf7c54bc6a7831dbfe9aa4eae\",\"plot_id\":\"1010\"},\"id\":\"1011\",\"type\":\"panel.models.comm_manager.CommManager\"},{\"attributes\":{\"_args\":null,\"_highlight\":null,\"_select\":null,\"custom_data\":{\"format\":\"pdb\",\"url\":\"http://localhost:8888/files/examples/assets/1qyn.pdb\"},\"ligand_view\":null,\"name\":\"Local File\"},\"id\":\"1009\",\"type\":\"PDBeMolStar1\"}],\"root_ids\":[\"1010\",\"1011\"]},\"title\":\"Bokeh Application\",\"version\":\"2.4.2\"}};\n",
       "    var render_items = [{\"docid\":\"dfbfef00-c215-4f30-8d06-5a6328c5e171\",\"root_ids\":[\"1010\"],\"roots\":{\"1010\":\"04e5a0eb-2f2a-42c2-b210-a7e9aeec4154\"}}];\n",
       "    root.Bokeh.embed.embed_items_notebook(docs_json, render_items);\n",
       "  }\n",
       "  if (root.Bokeh !== undefined && root.Bokeh.Panel !== undefined) {\n",
       "    embed_document(root);\n",
       "  } else {\n",
       "    var attempts = 0;\n",
       "    var timer = setInterval(function(root) {\n",
       "      if (root.Bokeh !== undefined && root.Bokeh.Panel !== undefined) {\n",
       "        clearInterval(timer);\n",
       "        embed_document(root);\n",
       "      } else if (document.readyState == \"complete\") {\n",
       "        attempts++;\n",
       "        if (attempts > 200) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 25, root)\n",
       "  }\n",
       "})(window);</script>"
      ],
      "text/plain": [
       "PDBeMolStar(custom_data={'url': 'http://localhost:...}, height=500, name='Local File', sizing_mode='stretch_width')"
      ]
     },
     "execution_count": 6,
     "metadata": {
      "application/vnd.holoviews_exec.v0+json": {
       "id": "1010"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "PDBeMolStar(\n",
    "    name='Local File',\n",
    "    sizing_mode='stretch_width',\n",
    "    height=500,\n",
    "    custom_data = {\n",
    "        'url': 'http://localhost:8888/files/examples/assets/1qyn.pdb',\n",
    "        'format': 'pdb'\n",
    "    },\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Tweaking the viewer appearance and coloring"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "molstar = PDBeMolStar(\n",
    "    height=500,\n",
    "    hide_water=True,\n",
    "    theme='dark',\n",
    "    lighting='metallic',\n",
    "    hide_expand_icon=True,\n",
    "    hide_animation_icon=True,\n",
    "    sequence_panel=False,\n",
    "    highlight_color='#d1fa07',\n",
    "    bg_color='#040724',\n",
    "    molecule_id='1qyn')\n",
    "\n",
    "molstar"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "More customization options can be found by looking at the parameters defined on `PDBeMolStar`\n",
    "\n",
    "The method `color` can be used to select and color parts of the molecule. See [PDBe Mol* wiki - helper methods](https://github.com/molstar/pdbe-molstar/wiki/3.-Helper-Methods) for details."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "# Color a part of chain A yellow and color anything that wasnt selected blue (updates in the viewer above)\n",
    "data = {\n",
    "    'start_residue_number': 10,\n",
    "    'end_residue_number': 125,\n",
    "    'struct_asym_id': 'A',\n",
    "    'color': {'r': 255, 'g': 215, 'b': 0},\n",
    "    'focus': False,\n",
    "    }\n",
    "\n",
    "molstar.color([data], non_selected_color = {'r': 0, 'g': 87, 'b': 183})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Clear the colors / selection\n",
    "molstar.clear_selection()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Custom data and alphafold view\n",
    "\n",
    "Custom data can be loaded by providing an URL through the `custom_data` dictionary. the format of the custom data needs to be specified as well."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "PDBeMolStar(\n",
    "    height=500,\n",
    "    custom_data = {\n",
    "        'url': 'https://alphafold.ebi.ac.uk/files/AF-O15552-F1-model_v1.cif',\n",
    "        'format': 'cif'\n",
    "    },\n",
    "    alphafold_view=True, \n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Interactivity"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "molstar = PDBeMolStar(\n",
    "    height=500,\n",
    "    molecule_id='1qyn')\n",
    "\n",
    "parameters = [\n",
    "    'molecule_id',\n",
    "    'hide_water', \n",
    "    'hide_polymer',\n",
    "    'visual_style',\n",
    "    'lighting',\n",
    "]\n",
    "controls = pn.Param(molstar, parameters=parameters, width=300, sizing_mode=\"fixed\")\n",
    "\n",
    "pn.Row(controls, molstar)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Creating an app"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "local_pdbe = PDBeMolStar(\n",
    "    name='Local File',\n",
    "    sizing_mode='stretch_width',\n",
    "    height=500,\n",
    "    custom_data = {\n",
    "        'url': 'https://raw.githubusercontent.com/MarcSkovMadsen/panel-chemistry/main/examples/assets/1qyn.pdb',\n",
    "        'format': 'pdb'\n",
    "    },\n",
    ")\n",
    "\n",
    "parameters = [\n",
    "    'hide_water', \n",
    "    'hide_polymer',\n",
    "    'visual_style',\n",
    "    'lighting',\n",
    "    'spin'\n",
    "]\n",
    "\n",
    "class Controller(param.Parameterized):\n",
    "    chain = param.Selector(default='A', objects=['A', 'B', 'C', 'D'])\n",
    "    apply_colors = param.Action(lambda self: self._action_color())\n",
    "    reset_colors = param.Action(lambda self: self._action_reset_color())\n",
    "    residues = param.Tuple((20, 50))\n",
    "    highlight = param.Action(lambda self: self._action_highlight())\n",
    "    clear_highlight = param.Action(lambda self: self.pdbe.clear_highlight())\n",
    "    reset = param.Action(lambda self: self._action_reset())\n",
    "    \n",
    "    def __init__(self, pdbe, **params):\n",
    "        self.pdbe = pdbe\n",
    "        super().__init__(**params)\n",
    "        \n",
    "    def _action_color(self):\n",
    "        \"\"\"Color one chain yellow, color everything else blue\"\"\"\n",
    "        \n",
    "        data = {\n",
    "            'struct_asym_id': self.chain,\n",
    "            'color': {'r': 255, 'g': 215, 'b': 0}\n",
    "        }\n",
    "        \n",
    "        self.pdbe.color([data], non_selected_color={'r': 0, 'g': 87, 'b': 183})\n",
    "\n",
    "    def _action_reset_color(self):\n",
    "        self.pdbe.clear_selection()\n",
    "    \n",
    "    def _action_highlight(self):\n",
    "        data = {\n",
    "            'start_residue_number': self.residues[0],\n",
    "            'end_residue_number': self.residues[1],\n",
    "            'struct_asym_id': self.chain,\n",
    "            'color': {'r': 255, 'g': 105, 'b': 180},\n",
    "        }\n",
    "        \n",
    "        self.pdbe.highlight([data])\n",
    "\n",
    "    def _action_reset(self):\n",
    "        data = {\n",
    "            'camera': True,\n",
    "            'theme': True,  # reset theme doesnt work\n",
    "            'highlightcolor': True,\n",
    "            'selectColor': True\n",
    "        }\n",
    "        self.pdbe.reset(data)\n",
    "\n",
    "ctrl = Controller(local_pdbe)\n",
    "slider = pn.widgets.IntRangeSlider(name='Residues', start=15, end=150, value=(20, 50), step=1)\n",
    "ctrl_widgets = pn.Param(ctrl, name=\"Controls\", widgets={'residues': slider})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "local_pdbe.servable()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ctrl_widgets.servable(area=\"sidebar\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Param(local_pdbe, parameters=parameters, name=\"Controls\").servable(area=\"sidebar\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.state.template.param.update(site=\"Panel Chemistry\", site_url=\"./\", title=\"PDBe MolStar Pane\", header_background='#0066cc', accent_base_color='#ffcc00');"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Serve the app via `panel serve PDBe_MolStar.ipynb` and check it out at http://localhost:5006/PDBe_MolStar.\n",
    "\n",
    "If you add the flag `--autoreload` you will get automatic reloading when ever you save the file."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Local Files\n",
    "\n",
    "If you want to use local files Panel can help you. Assuming file `1qyn.pdb` is in the folder `my_assets_folder` folder you can change the above code to\n",
    "\n",
    "```python\n",
    "local_pdbe = PDBeMolStar(\n",
    "    name='Local File',\n",
    "    sizing_mode='stretch_width',\n",
    "    height=500,\n",
    "    custom_data = {\n",
    "        'url': 'assets/1qyn.pdb',\n",
    "        'format': 'pdb'\n",
    "    },\n",
    ")\n",
    "```\n",
    "\n",
    "and serve the app via `panel serve PDBe_MolStar.ipynb --static-dirs assets=my_assets_folder`"
   ]
  }
 ],
 "metadata": {
  "interpreter": {
   "hash": "d365debf6811b692f313bc26504a9ae09f2750d651e640fad2313b092aca539b"
  },
  "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.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}