{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "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",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\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({'paths': {'tabulator': 'https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator'}});\n",
       "      require([\"tabulator\"], function(Tabulator,) {\n",
       "        window.Tabulator = Tabulator;\n",
       "      })\n",
       "    }\n",
       "    if (((window['tabulator'] !== undefined) && (!(window['tabulator'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js', 'https://unpkg.com/moment@2.27.0/moment.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      if (skip.indexOf(url) >= 0) { on_load(); continue; }\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) { on_load(); continue; }\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://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js\", \"https://unpkg.com/moment@2.27.0/moment.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.0.min.js\", \"https://unpkg.com/@holoviz/panel@^0.11.1/dist/panel.min.js\"];\n",
       "  var js_modules = [];\n",
       "  var css_urls = [\"https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator_simple.min.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/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    }\\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    root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\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({'paths': {'tabulator': 'https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator'}});\n      require([\"tabulator\"], function(Tabulator,) {\n        window.Tabulator = Tabulator;\n      })\n    }\n    if (((window['tabulator'] !== undefined) && (!(window['tabulator'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js', 'https://unpkg.com/moment@2.27.0/moment.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      if (skip.indexOf(url) >= 0) { on_load(); continue; }\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) { on_load(); continue; }\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://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js\", \"https://unpkg.com/moment@2.27.0/moment.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.0.min.js\", \"https://unpkg.com/@holoviz/panel@^0.11.1/dist/panel.min.js\"];\n  var js_modules = [];\n  var css_urls = [\"https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator_simple.min.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/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    }\\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"
    },
    {
     "data": {},
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.holoviews_exec.v0+json": "",
      "text/html": [
       "<div id='1002'>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"af074c2a-5b5d-4b9c-8d3e-a5e00add7d09\" data-root-id=\"1002\"></div>\n",
       "</div>\n",
       "<script type=\"application/javascript\">(function(root) {\n",
       "  function embed_document(root) {\n",
       "    var docs_json = {\"bda66bbc-800a-48d7-a363-240d4d54a2ea\":{\"defs\":[{\"extends\":null,\"module\":null,\"name\":\"DataModel\",\"overrides\":[],\"properties\":[]}],\"roots\":{\"references\":[{\"attributes\":{\"margin\":[5,5,5,5],\"name\":\"Style00108\",\"text\":\"&lt;style&gt;.container { width:90% !important; }&lt;/style&gt;\"},\"id\":\"1007\",\"type\":\"panel.models.markup.HTML\"},{\"attributes\":{\"children\":[{\"id\":\"1004\"},{\"id\":\"1005\"},{\"id\":\"1006\"},{\"id\":\"1007\"}],\"margin\":[0,0,0,0],\"name\":\"Row00110\",\"sizing_mode\":\"stretch_width\"},\"id\":\"1003\",\"type\":\"Row\"},{\"attributes\":{\"height\":31,\"margin\":[5,5,5,5],\"name\":\"BinderLinkButton00100\",\"text\":\"&lt;a href=&quot;https://mybinder.org/v2/gh/marcskovmadsen/awesome-panel-extensions/main?filepath=examples%2Freference%2Fframeworks%2Ffast%2FFastSwitch.ipynb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://mybinder.org/badge_logo.svg&quot; style=&quot;height:100%;max-width:100%;display:block;margin-left:auto;margin-right:auto&quot;&gt;&lt;/a&gt;\",\"width\":125},\"id\":\"1005\",\"type\":\"panel.models.markup.HTML\"},{\"attributes\":{\"children\":[{\"id\":\"1003\"},{\"id\":\"1008\"}],\"margin\":[0,0,0,0],\"name\":\"Header00099\",\"sizing_mode\":\"stretch_width\"},\"id\":\"1002\",\"type\":\"Column\"},{\"attributes\":{\"height\":31,\"margin\":[5,5,5,5],\"name\":\"PanelLinkButton00104\",\"style\":{\"background\":\"black\",\"border\":\"1px solid #ddd\",\"border-radius\":\"4px\",\"cursor\":\"pointer\",\"padding\":\"5px\"},\"text\":\"&lt;a href=&quot;https://panel.holoviz.org&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://panel.holoviz.org/_static/logo_horizontal.png&quot; style=&quot;height:100%;max-width:100%;display:block;margin-left:auto;margin-right:auto&quot;&gt;&lt;/a&gt;\",\"width\":140},\"id\":\"1004\",\"type\":\"panel.models.markup.HTML\"},{\"attributes\":{\"client_comm_id\":\"4df32e0c17ee4237a94e480aeca09cfc\",\"comm_id\":\"c2d76c7d3a2945dfab59ad2be7fa47d4\",\"plot_id\":\"1002\"},\"id\":\"1009\",\"type\":\"panel.models.comm_manager.CommManager\"},{\"attributes\":{\"css_classes\":[\"markdown\"],\"margin\":[5,5,5,5],\"name\":\"Markdown00106\",\"sizing_mode\":\"stretch_width\",\"text\":\"&lt;p&gt;&lt;a href=&quot;https://panel.holoviz.org&quot;&gt;Panel&lt;/a&gt; is a framework for creating powerful, reactive analytics apps in\\nPython using the tools you know and love. \\ud83d\\udcaa\\ud83d\\udc0d\\u2764\\ufe0f.\\nThis notebook is brought to you by &lt;a href=&quot;https://awesome-panel.org&quot;&gt;awesome-panel.org&lt;/a&gt;.&lt;/p&gt;\"},\"id\":\"1008\",\"type\":\"panel.models.markup.HTML\"},{\"attributes\":{\"reload\":false},\"id\":\"1010\",\"type\":\"panel.models.location.Location\"},{\"attributes\":{\"height\":31,\"margin\":[5,5,5,5],\"name\":\"NBViewerLinkButton00102\",\"text\":\"&lt;a href=&quot;https://nbviewer.jupyter.org/github/marcskovmadsen/awesome-panel-extensions/blob/main/examples/reference/frameworks/fast/FastSwitch.ipynb&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/jupyter/design/main/logos/Badges/nbviewer_badge.svg&quot; style=&quot;height:100%;max-width:100%;display:block;margin-left:auto;margin-right:auto&quot;&gt;&lt;/a&gt;\",\"width\":170},\"id\":\"1006\",\"type\":\"panel.models.markup.HTML\"}],\"root_ids\":[\"1002\",\"1009\",\"1010\"]},\"title\":\"Bokeh Application\",\"version\":\"2.3.0\"}};\n",
       "    var render_items = [{\"docid\":\"bda66bbc-800a-48d7-a363-240d4d54a2ea\",\"root_ids\":[\"1002\"],\"roots\":{\"1002\":\"af074c2a-5b5d-4b9c-8d3e-a5e00add7d09\"}}];\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 > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);</script>"
      ],
      "text/plain": [
       "Header(sizing_mode='stretch_width')\n",
       "    [0] Row(sizing_mode='stretch_width')\n",
       "        [0] PanelLinkButton(str, image_url='https://panel.holoviz.org..., style={'background': 'black', ...}, theme='dark', width=140)\n",
       "        [1] BinderLinkButton(str, branch='main', folder='examples/reference/framew..., link_url='https://mybinder.org/v2/g..., notebook='FastSwitch.ipynb', repository='marcskovmadsen/awesome-pa...)\n",
       "        [2] NBViewerLinkButton(str, branch='main', folder='examples/reference/framew..., link_url='https://nbviewer.jupyter...., notebook='FastSwitch.ipynb', repository='marcskovmadsen/awesome-pa...)\n",
       "        [3] Style(str, container_width='90%')\n",
       "    [1] Markdown(str, sizing_mode='stretch_width')"
      ]
     },
     "execution_count": 1,
     "metadata": {
      "application/vnd.holoviews_exec.v0+json": {
       "id": "1002"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from awesome_panel_extensions.awesome_panel.notebook import Header\n",
    "Header(folder=\"examples/reference/frameworks/fast\", notebook=\"FastSwitch.ipynb\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# FastSwitch - Reference Guide\n",
    "\n",
    "The `FastSwitch` widget is based on the [fast-switch](https://explore.fast.design/components/fast-switch) web component and extends the built in [Panel Checkbox](https://panel.holoviz.org/reference/widgets/Checkbox.html).\n",
    "\n",
    "<table>\n",
    "    <tr>\n",
    "        <td><img src=\"https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-extensions/main/assets/images/frameworks/fast/fast-switch.png\"></td>\n",
    "    </tr>\n",
    "</table>\n",
    "\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "* **``name``** (str): The label of the Switch. Defaults to \"\".\n",
    "* **``value``** (boolean): Whether or not the Switch is checked. Defaults to False.\n",
    "* **``checked_message``** (str): The message shown when checked. Default to \"\".\n",
    "* **``unchecked_message``** (str): The message shown when not checked. Default to \"\".\n",
    "* **``disabled``** (boolean): Whether or not the Switch is disabled. Defaults to False.\n",
    "* **``readonly``** (boolean): Whether or not the Switch is readonly. Defaults to False.\n",
    "\n",
    "\n",
    "The `FastSwitch` has the same layout and styling parameters as most other widgets. For example `width` and `sizing_mode`.\n",
    "\n",
    "Please note that you can only use the Fast components inside a custom Panel template that\n",
    "\n",
    "- Loads the  [Fast `javascript` library](https://www.fast.design/docs/components/getting-started#from-cdn).\n",
    "- Wraps the content of the `<body>` html tag inside the [fast-design-system-provider](https://www.fast.design/docs/components/getting-started#add-components) tag.\n",
    "\n",
    "We provide the `FastTemplate` for easy usage. \n",
    "\n",
    "You can also develop your own custom [Panel template](https://panel.holoviz.org/user_guide/Templates.html) if you need something special. For example combining it with more [fast.design](https://fast.design/) web components and the [Fluent Design System](https://www.microsoft.com/design/fluent/#/) to create **VS Code** and **Microsoft Office** like experiences.\n",
    "\n",
    "Please note that Fast components will not work in older, legacy browser like Internet Explorer.\n",
    "\n",
    "___\n",
    "\n",
    "Let's start by importing the dependencies"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "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",
       "    root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\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({'paths': {'tabulator': 'https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator'}});\n",
       "      require([], function() {\n",
       "      })\n",
       "    }\n",
       "    if (((window['tabulator'] !== undefined) && (!(window['tabulator'] instanceof HTMLElement))) || window.requirejs) {\n",
       "      var urls = ['https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js', 'https://unpkg.com/moment@2.27.0/moment.js'];\n",
       "      for (var i = 0; i < urls.length; i++) {\n",
       "        skip.push(urls[i])\n",
       "      }\n",
       "    }\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      if (skip.indexOf(url) >= 0) { on_load(); continue; }\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) { on_load(); continue; }\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://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js\", \"https://unpkg.com/moment@2.27.0/moment.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.0.min.js\", \"https://unpkg.com/@holoviz/panel@^0.11.1/dist/panel.min.js\"];\n",
       "  var js_modules = [];\n",
       "  var css_urls = [\"https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator_simple.min.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/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    }\\n    \");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    \n",
       "    function(Bokeh) {\n",
       "      /* BEGIN awesome_panel_extensions.js */\n",
       "      /*!\n",
       "       * Copyright (c) 2012 - 2021, Anaconda, Inc., and Bokeh Contributors\n",
       "       * All rights reserved.\n",
       "       * \n",
       "       * Redistribution and use in source and binary forms, with or without modification,\n",
       "       * are permitted provided that the following conditions are met:\n",
       "       * \n",
       "       * Redistributions of source code must retain the above copyright notice,\n",
       "       * this list of conditions and the following disclaimer.\n",
       "       * \n",
       "       * Redistributions in binary form must reproduce the above copyright notice,\n",
       "       * this list of conditions and the following disclaimer in the documentation\n",
       "       * and/or other materials provided with the distribution.\n",
       "       * \n",
       "       * Neither the name of Anaconda nor the names of any contributors\n",
       "       * may be used to endorse or promote products derived from this software\n",
       "       * without specific prior written permission.\n",
       "       * \n",
       "       * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n",
       "       * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n",
       "       * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE\n",
       "       * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE\n",
       "       * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR\n",
       "       * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF\n",
       "       * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS\n",
       "       * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN\n",
       "       * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)\n",
       "       * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF\n",
       "       * THE POSSIBILITY OF SUCH DAMAGE.\n",
       "       */\n",
       "      (function(root, factory) {\n",
       "        factory(root[\"Bokeh\"], undefined);\n",
       "      })(this, function(Bokeh, version) {\n",
       "        var define;\n",
       "        return (function(modules, entry, aliases, externals) {\n",
       "          const bokeh = typeof Bokeh !== \"undefined\" && (version != null ? Bokeh[version] : Bokeh);\n",
       "          if (bokeh != null) {\n",
       "            return bokeh.register_plugin(modules, entry, aliases);\n",
       "          } else {\n",
       "            throw new Error(\"Cannot find Bokeh \" + version + \". You have to load it prior to loading plugins.\");\n",
       "          }\n",
       "        })\n",
       "      ({\n",
       "      \"ed583be1cf\": /* index.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const tslib_1 = require(\"tslib\");\n",
       "          const AwesomePanelExtensions = tslib_1.__importStar(require(\"ea89eb96d7\") /* ./bokeh_extensions */);\n",
       "          exports.AwesomePanelExtensions = AwesomePanelExtensions;\n",
       "          const base_1 = require(\"@bokehjs/base\");\n",
       "          base_1.register_models(AwesomePanelExtensions);\n",
       "      },\n",
       "      \"ea89eb96d7\": /* bokeh_extensions\\index.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          var fast_anchor_1 = require(\"3ab92f5894\") /* ./fast/fast_anchor */;\n",
       "          __esExport(\"FastAnchor\", fast_anchor_1.FastAnchor);\n",
       "          var fast_button_1 = require(\"1d9a6373ec\") /* ./fast/fast_button */;\n",
       "          __esExport(\"FastButton\", fast_button_1.FastButton);\n",
       "          var fast_checkbox_group_1 = require(\"b62557482c\") /* ./fast/fast_checkbox_group */;\n",
       "          __esExport(\"FastCheckboxGroup\", fast_checkbox_group_1.FastCheckboxGroup);\n",
       "          var fast_switch_group_1 = require(\"b714a2453d\") /* ./fast/fast_switch_group */;\n",
       "          __esExport(\"FastSwitchGroup\", fast_switch_group_1.FastSwitchGroup);\n",
       "          var fast_textarea_input_1 = require(\"e9b1cd48b7\") /* ./fast/fast_textarea_input */;\n",
       "          __esExport(\"FastTextAreaInput\", fast_textarea_input_1.FastTextAreaInput);\n",
       "          var fast_text_input_1 = require(\"92a4b5b2b8\") /* ./fast/fast_text_input */;\n",
       "          __esExport(\"FastTextInput\", fast_text_input_1.FastTextInput);\n",
       "          var pivot_table_1 = require(\"eb2d75c5b0\") /* ./pivot_table */;\n",
       "          __esExport(\"PivotTable\", pivot_table_1.PivotTable);\n",
       "          var icon_1 = require(\"5f262d0d3a\") /* ./icon */;\n",
       "          __esExport(\"Icon\", icon_1.Icon);\n",
       "          var web_component_1 = require(\"eae326731a\") /* ./web_component */;\n",
       "          __esExport(\"WebComponent\", web_component_1.WebComponent);\n",
       "      },\n",
       "      \"3ab92f5894\": /* bokeh_extensions\\fast\\fast_anchor.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const html_box_1 = require(\"@bokehjs/models/layouts/html_box\");\n",
       "          class FastAnchorView extends html_box_1.HTMLBoxView {\n",
       "              setAttr(attribute, value) {\n",
       "                  const anchor_el = this.anchor_el;\n",
       "                  if (value === null) {\n",
       "                      anchor_el.setAttribute(attribute, false);\n",
       "                  }\n",
       "                  else {\n",
       "                      anchor_el.setAttribute(attribute, value);\n",
       "                  }\n",
       "              }\n",
       "              connect_signals() {\n",
       "                  super.connect_signals();\n",
       "                  this.connect(this.model.properties.name.change, () => {\n",
       "                      if (this.model.name === null) {\n",
       "                          this.anchor_el.innerHTML = \"\";\n",
       "                      }\n",
       "                      else {\n",
       "                          this.anchor_el.innerHTML = this.model.name;\n",
       "                      }\n",
       "                  });\n",
       "                  this.connect(this.model.properties.appearance.change, () => {\n",
       "                      this.setAttr(\"appearance\", this.model.appearance);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.href.change, () => {\n",
       "                      this.setAttr(\"href\", this.model.href);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.hreflang.change, () => {\n",
       "                      this.setAttr(\"hreflang\", this.model.hreflang);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.ping.change, () => {\n",
       "                      this.setAttr(\"ping\", this.model.ping);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.href.change, () => {\n",
       "                      this.setAttr(\"referrerpolicy\", this.model.referrerpolicy);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.download.change, () => {\n",
       "                      this.setAttr(\"download\", this.model.download);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.referrer.change, () => {\n",
       "                      this.setAttr(\"referrer\", this.model.referrer);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.rel.change, () => {\n",
       "                      this.setAttr(\"rel\", this.model.rel);\n",
       "                  });\n",
       "                  this.connect(this.model.properties.target.change, () => {\n",
       "                      this.setAttr(\"mimetype\", this.model.mimetype);\n",
       "                  });\n",
       "              }\n",
       "              render() {\n",
       "                  super.render();\n",
       "                  const anchor_el = document.createElement(\"fast-anchor\");\n",
       "                  this.anchor_el = anchor_el;\n",
       "                  this.anchor_el.style.width = \"100%\";\n",
       "                  this.el.appendChild(this.anchor_el);\n",
       "                  if (this.model.name !== null) {\n",
       "                      this.anchor_el.innerHTML = this.model.name;\n",
       "                  }\n",
       "                  if (this.model.appearance !== null) {\n",
       "                      anchor_el.appearance = this.model.appearance;\n",
       "                  }\n",
       "                  if (this.model.href !== null) {\n",
       "                      anchor_el.href = this.model.href;\n",
       "                  }\n",
       "                  if (this.model.hreflang !== null) {\n",
       "                      anchor_el.hreflang = this.model.hreflang;\n",
       "                  }\n",
       "                  if (this.model.ping !== null) {\n",
       "                      anchor_el.ping = this.model.ping;\n",
       "                  }\n",
       "                  if (this.model.referrerpolicy !== null) {\n",
       "                      anchor_el.referrerpolicy = this.model.referrerpolicy;\n",
       "                  }\n",
       "                  if (this.model.download !== null) {\n",
       "                      anchor_el.download = this.model.download;\n",
       "                  }\n",
       "                  if (this.model.referrer !== null) {\n",
       "                      anchor_el.ref = this.model.referrer;\n",
       "                  }\n",
       "                  if (this.model.rel !== null) {\n",
       "                      anchor_el.rel = this.model.rel;\n",
       "                  }\n",
       "                  if (this.model.target !== null) {\n",
       "                      anchor_el.target = this.model.target;\n",
       "                  }\n",
       "                  if (this.model.mimetype !== null) {\n",
       "                      anchor_el.mimetype = this.model.mimetype;\n",
       "                  }\n",
       "              }\n",
       "          }\n",
       "          exports.FastAnchorView = FastAnchorView;\n",
       "          FastAnchorView.__name__ = \"FastAnchorView\";\n",
       "          class FastAnchor extends html_box_1.HTMLBox {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_FastAnchor() {\n",
       "                  this.prototype.default_view = FastAnchorView;\n",
       "                  this.define(({ String }) => ({\n",
       "                      appearance: [String,],\n",
       "                      download: [String,],\n",
       "                      href: [String,],\n",
       "                      hreflang: [String,],\n",
       "                      ping: [String,],\n",
       "                      referrerpolicy: [String,],\n",
       "                      referrer: [String,],\n",
       "                      rel: [String,],\n",
       "                      target: [String,],\n",
       "                      mimetype: [String,],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.FastAnchor = FastAnchor;\n",
       "          FastAnchor.__name__ = \"FastAnchor\";\n",
       "          FastAnchor.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_anchor\";\n",
       "          FastAnchor.init_FastAnchor();\n",
       "      },\n",
       "      \"1d9a6373ec\": /* bokeh_extensions\\fast\\fast_button.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const button_1 = require(\"@bokehjs/models/widgets/button\");\n",
       "          // Browse the fast-button api here  https://explore.fast.design/components/fast-button\n",
       "          class FastButtonView extends button_1.ButtonView {\n",
       "              _render_button(..._) {\n",
       "                  const button = document.createElement(\"fast-button\");\n",
       "                  button.innerText = this.model.label;\n",
       "                  button.disabled = this.model.disabled;\n",
       "                  button.appearance = this.model.appearance;\n",
       "                  button.autofocus = this.model.autofocus;\n",
       "                  button.style.width = \"100%\";\n",
       "                  button.style.height = \"100%\";\n",
       "                  return button;\n",
       "              }\n",
       "          }\n",
       "          exports.FastButtonView = FastButtonView;\n",
       "          FastButtonView.__name__ = \"FastButtonView\";\n",
       "          class FastButton extends button_1.Button {\n",
       "              // __view_type__: FastButtonView\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_FastButton() {\n",
       "                  this.prototype.default_view = FastButtonView;\n",
       "                  this.define(({ Boolean, String }) => ({\n",
       "                      appearance: [String, \"neutral\"],\n",
       "                      autofocus: [Boolean, false],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.FastButton = FastButton;\n",
       "          FastButton.__name__ = \"FastButton\";\n",
       "          FastButton.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_button\";\n",
       "          FastButton.init_FastButton();\n",
       "      },\n",
       "      \"b62557482c\": /* bokeh_extensions\\fast\\fast_checkbox_group.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const tslib_1 = require(\"tslib\");\n",
       "          const checkbox_group_1 = require(\"@bokehjs/models/widgets/checkbox_group\");\n",
       "          const inputs = tslib_1.__importStar(require(\"@bokehjs/styles/widgets/inputs.css\"));\n",
       "          const dom_1 = require(\"@bokehjs/core/dom\");\n",
       "          const array_1 = require(\"@bokehjs/core/util/array\");\n",
       "          // Browse the fast-button api here  https://explore.fast.design/components/fast-button\n",
       "          class FastCheckboxGroupView extends checkbox_group_1.CheckboxGroupView {\n",
       "              render() {\n",
       "                  // Cannot call super.render() as this will add the group twice\n",
       "                  // super.render()\n",
       "                  const group = dom_1.div({ class: [inputs.input_group, this.model.inline ? inputs.inline : null] });\n",
       "                  this.el.innerHTML = \"\";\n",
       "                  this.el.appendChild(group);\n",
       "                  const { active, labels } = this.model;\n",
       "                  this._inputs = [];\n",
       "                  for (let i = 0; i < labels.length; i++) {\n",
       "                      let fastCheckBox = document.createElement(\"fast-checkbox\");\n",
       "                      if (this.model.readonly)\n",
       "                          // Setting the property did not work for me. Thus I set the attribute\n",
       "                          fastCheckBox.setAttribute(\"readonly\", true);\n",
       "                      fastCheckBox.innerHTML = labels[i];\n",
       "                      const checkbox = fastCheckBox;\n",
       "                      checkbox.value = `${i}`;\n",
       "                      // const checkbox = input({type: `checkbox`, value: `${i}`})\n",
       "                      checkbox.addEventListener(\"change\", () => this.change_active(i));\n",
       "                      this._inputs.push(checkbox);\n",
       "                      if (this.model.disabled)\n",
       "                          checkbox.disabled = true;\n",
       "                      if (array_1.includes(active, i))\n",
       "                          checkbox.checked = true;\n",
       "                      // const label_el = label({}, checkbox, span({}, labels[i]))\n",
       "                      group.appendChild(checkbox);\n",
       "                  }\n",
       "              }\n",
       "          }\n",
       "          exports.FastCheckboxGroupView = FastCheckboxGroupView;\n",
       "          FastCheckboxGroupView.__name__ = \"FastCheckboxGroupView\";\n",
       "          class FastCheckboxGroup extends checkbox_group_1.CheckboxGroup {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_FastCheckboxGroup() {\n",
       "                  this.prototype.default_view = FastCheckboxGroupView;\n",
       "                  this.define(({ Boolean }) => ({\n",
       "                      readonly: [Boolean,],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.FastCheckboxGroup = FastCheckboxGroup;\n",
       "          FastCheckboxGroup.__name__ = \"FastCheckboxGroup\";\n",
       "          FastCheckboxGroup.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_checkbox_group\";\n",
       "          FastCheckboxGroup.init_FastCheckboxGroup();\n",
       "      },\n",
       "      \"b714a2453d\": /* bokeh_extensions\\fast\\fast_switch_group.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const tslib_1 = require(\"tslib\");\n",
       "          const checkbox_group_1 = require(\"@bokehjs/models/widgets/checkbox_group\");\n",
       "          const inputs = tslib_1.__importStar(require(\"@bokehjs/styles/widgets/inputs.css\"));\n",
       "          const dom_1 = require(\"@bokehjs/core/dom\");\n",
       "          const array_1 = require(\"@bokehjs/core/util/array\");\n",
       "          // Browse the fast-switch api here https://explore.fast.design/components/fast-switch\n",
       "          class FastSwitchGroupView extends checkbox_group_1.CheckboxGroupView {\n",
       "              render() {\n",
       "                  // Cannot call super.render() as this will add the group twice\n",
       "                  // super.render()\n",
       "                  const group = dom_1.div({ class: [inputs.input_group, this.model.inline ? inputs.inline : null] });\n",
       "                  this.el.innerHTML = \"\";\n",
       "                  this.el.appendChild(group);\n",
       "                  const { active, labels } = this.model;\n",
       "                  this._inputs = [];\n",
       "                  for (let i = 0; i < labels.length; i++) {\n",
       "                      let FastSwitch = document.createElement(\"fast-switch\");\n",
       "                      if (this.model.readonly)\n",
       "                          // Setting the property did not work for me. Thus I set the attribute\n",
       "                          FastSwitch.setAttribute(\"readonly\", true);\n",
       "                      FastSwitch.innerHTML = labels[i];\n",
       "                      FastSwitch.innerHTML = labels[i];\n",
       "                      const fastSwitch = FastSwitch;\n",
       "                      fastSwitch.value = `${i}`;\n",
       "                      // const checkbox = input({type: `checkbox`, value: `${i}`})\n",
       "                      fastSwitch.addEventListener(\"change\", () => this.change_active(i));\n",
       "                      this._inputs.push(fastSwitch);\n",
       "                      if (this.model.disabled)\n",
       "                          fastSwitch.disabled = true;\n",
       "                      if (array_1.includes(active, i))\n",
       "                          fastSwitch.checked = true;\n",
       "                      const checked_message = document.createElement(\"span\");\n",
       "                      checked_message.setAttribute(\"slot\", \"checked-message\");\n",
       "                      checked_message.innerHTML = this.model.checked_message;\n",
       "                      fastSwitch.appendChild(checked_message);\n",
       "                      const unchecked_message = document.createElement(\"span\");\n",
       "                      unchecked_message.setAttribute(\"slot\", \"unchecked-message\");\n",
       "                      unchecked_message.innerHTML = this.model.unchecked_message;\n",
       "                      fastSwitch.appendChild(unchecked_message);\n",
       "                      // const label_el = label({}, checkbox, span({}, labels[i]))\n",
       "                      group.appendChild(fastSwitch);\n",
       "                  }\n",
       "              }\n",
       "          }\n",
       "          exports.FastSwitchGroupView = FastSwitchGroupView;\n",
       "          FastSwitchGroupView.__name__ = \"FastSwitchGroupView\";\n",
       "          class FastSwitchGroup extends checkbox_group_1.CheckboxGroup {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_FastSwitchGroup() {\n",
       "                  this.prototype.default_view = FastSwitchGroupView;\n",
       "                  this.define(({ Boolean, String }) => ({\n",
       "                      readonly: [Boolean,],\n",
       "                      checked_message: [String,],\n",
       "                      unchecked_message: [String,],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.FastSwitchGroup = FastSwitchGroup;\n",
       "          FastSwitchGroup.__name__ = \"FastSwitchGroup\";\n",
       "          FastSwitchGroup.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_switch_group\";\n",
       "          FastSwitchGroup.init_FastSwitchGroup();\n",
       "      },\n",
       "      \"e9b1cd48b7\": /* bokeh_extensions\\fast\\fast_textarea_input.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const textarea_input_1 = require(\"@bokehjs/models/widgets/textarea_input\");\n",
       "          const input_widget_1 = require(\"@bokehjs/models/widgets/input_widget\");\n",
       "          // I tried to inherit from TextAreaInputView but I could not\n",
       "          // get it working. It created two textareainputs.\n",
       "          class FastTextAreaInputView extends input_widget_1.InputWidgetView {\n",
       "              get input_el_any() {\n",
       "                  return this.input_el;\n",
       "              }\n",
       "              connect_signals() {\n",
       "                  super.connect_signals();\n",
       "                  this.connect(this.model.properties.name.change, () => { var _a; return this.input_el.name = (_a = this.model.name) !== null && _a !== void 0 ? _a : \"\"; });\n",
       "                  this.connect(this.model.properties.value.change, () => { this.input_el.value = this.model.value; });\n",
       "                  this.connect(this.model.properties.disabled.change, () => this.input_el.disabled = this.model.disabled);\n",
       "                  this.connect(this.model.properties.placeholder.change, () => this.input_el.placeholder = this.model.placeholder);\n",
       "                  this.connect(this.model.properties.rows.change, () => this.input_el.rows = this.model.rows);\n",
       "                  this.connect(this.model.properties.cols.change, () => this.input_el.cols = this.model.cols);\n",
       "                  this.connect(this.model.properties.max_length.change, () => this.input_el_any.setAttribute(\"maxlength\", this.model.max_length));\n",
       "                  this.connect(this.model.properties.appearance.change, () => this.input_el_any.appearance = this.model.appearance);\n",
       "                  this.connect(this.model.properties.autofocus.change, () => this.input_el_any.autofocus = this.model.autofocus);\n",
       "                  this.connect(this.model.properties.resize.change, () => this.input_el_any.resize = this.model.resize);\n",
       "                  this.connect(this.model.properties.spellcheck.change, () => this.input_el_any.spellcheck = this.model.spellcheck);\n",
       "                  this.connect(this.model.properties.min_length.change, () => this.input_el_any.setAttribute(\"minlength\", this.model.min_length));\n",
       "                  this.connect(this.model.properties.required.change, () => this.input_el_any.required = this.model.required);\n",
       "                  // Could not get readonly working as a property.\n",
       "                  // https://github.com/microsoft/fast/issues/3852\n",
       "                  this.connect(this.model.properties.readonly.change, () => {\n",
       "                      if (this.model.readonly === true) {\n",
       "                          this.input_el_any.setAttribute(\"readonly\", \"\");\n",
       "                      }\n",
       "                      else {\n",
       "                          this.input_el_any.removeAttribute(\"readonly\");\n",
       "                      }\n",
       "                  });\n",
       "              }\n",
       "              render() {\n",
       "                  super.render();\n",
       "                  const fastTextArea = document.createElement(\"fast-text-area\");\n",
       "                  this.input_el = fastTextArea;\n",
       "                  this.input_el.className = \"bk-fast-input\";\n",
       "                  this.input_el.addEventListener(\"change\", () => this.change_input());\n",
       "                  this.group_el.appendChild(this.input_el);\n",
       "                  // For some unknown reason we need to set these properties after the above\n",
       "                  // Otherwise for example the value is reset to \"\"\n",
       "                  fastTextArea.name = this.model.name;\n",
       "                  fastTextArea.value = this.model.value;\n",
       "                  fastTextArea.disabled = this.model.disabled;\n",
       "                  fastTextArea.placeholder = this.model.placeholder;\n",
       "                  fastTextArea.cols = this.model.cols;\n",
       "                  fastTextArea.rows = this.model.rows;\n",
       "                  if (this.model.max_length != null)\n",
       "                      fastTextArea.setAttribute(\"maxlength\", this.model.max_length);\n",
       "                  fastTextArea.appearance = this.model.appearance;\n",
       "                  fastTextArea.autofocus = this.model.autofocus;\n",
       "                  fastTextArea.resize = this.model.resize;\n",
       "                  fastTextArea.spellcheck = this.model.spellcheck;\n",
       "                  if (this.model.min_length != null)\n",
       "                      fastTextArea.setAttribute(\"minlength\", this.model.min_length);\n",
       "                  fastTextArea.required = this.model.required;\n",
       "                  if (this.model.readonly === true)\n",
       "                      fastTextArea.setAttribute(\"readonly\", \"\");\n",
       "              }\n",
       "              change_input() {\n",
       "                  this.model.value = this.input_el.value;\n",
       "                  super.change_input();\n",
       "              }\n",
       "          }\n",
       "          exports.FastTextAreaInputView = FastTextAreaInputView;\n",
       "          FastTextAreaInputView.__name__ = \"FastTextAreaInputView\";\n",
       "          class FastTextAreaInput extends textarea_input_1.TextAreaInput {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_FastTextAreaInput() {\n",
       "                  this.prototype.default_view = FastTextAreaInputView;\n",
       "                  this.define(({ Boolean, Number, String }) => ({\n",
       "                      // name inherited\n",
       "                      // value inherited\n",
       "                      // placeholder inherited\n",
       "                      // max_length inherited\n",
       "                      // disabled inherited\n",
       "                      // cols inherited\n",
       "                      // rows inherited\n",
       "                      appearance: [String,],\n",
       "                      autofocus: [Boolean,],\n",
       "                      resize: [String,],\n",
       "                      spellcheck: [Boolean,],\n",
       "                      min_length: [Number,],\n",
       "                      required: [Boolean,],\n",
       "                      readonly: [Boolean,],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.FastTextAreaInput = FastTextAreaInput;\n",
       "          FastTextAreaInput.__name__ = \"FastTextAreaInput\";\n",
       "          FastTextAreaInput.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_textarea_input\";\n",
       "          FastTextAreaInput.init_FastTextAreaInput();\n",
       "      },\n",
       "      \"92a4b5b2b8\": /* bokeh_extensions\\fast\\fast_text_input.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const text_input_1 = require(\"@bokehjs/models/widgets/text_input\");\n",
       "          const input_widget_1 = require(\"@bokehjs/models/widgets/input_widget\");\n",
       "          // I tried to inherit from TextInputView but I could not\n",
       "          // get it working. It created two textinputs.\n",
       "          class FastTextInputView extends input_widget_1.InputWidgetView {\n",
       "              connect_signals() {\n",
       "                  super.connect_signals();\n",
       "                  this.connect(this.model.properties.name.change, () => { var _a; return this.input_el.name = (_a = this.model.name) !== null && _a !== void 0 ? _a : \"\"; });\n",
       "                  this.connect(this.model.properties.value.change, () => { this.input_el.value = this.model.value; console.log(\"value\"); });\n",
       "                  this.connect(this.model.properties.value_input.change, () => this.input_el.value = this.model.value_input);\n",
       "                  this.connect(this.model.properties.disabled.change, () => this.input_el.disabled = this.model.disabled);\n",
       "                  this.connect(this.model.properties.placeholder.change, () => this.input_el.placeholder = this.model.placeholder);\n",
       "                  this.connect(this.model.properties.appearance.change, () => this.input_el_any.appearance = this.model.appearance);\n",
       "                  this.connect(this.model.properties.autofocus.change, () => this.input_el_any.autofocus = this.model.autofocus);\n",
       "                  this.connect(this.model.properties.type_of_text.change, () => this.input_el_any.type = this.model.type_of_text);\n",
       "                  this.connect(this.model.properties.max_length.change, () => this.input_el_any.setAttribute(\"maxlength\", this.model.max_length));\n",
       "                  this.connect(this.model.properties.min_length.change, () => this.input_el_any.setAttribute(\"minlength\", this.model.min_length));\n",
       "                  this.connect(this.model.properties.pattern.change, () => this.input_el_any.pattern = this.model.pattern);\n",
       "                  // Could not get size working. It raises an error\n",
       "                  // this.connect(this.model.properties.size.change, () => this.input_el_any.size = this.model.size)\n",
       "                  this.connect(this.model.properties.spellcheck.change, () => this.input_el_any.spellcheck = this.model.spellcheck);\n",
       "                  this.connect(this.model.properties.required.change, () => this.input_el_any.required = this.model.required);\n",
       "                  // Could not get readonly working as a property.\n",
       "                  // https://github.com/microsoft/fast/issues/3852\n",
       "                  this.connect(this.model.properties.readonly.change, () => this.input_el_any.setAttribute(\"readonly\", this.model.readonly));\n",
       "              }\n",
       "              get input_el_any() {\n",
       "                  return this.input_el;\n",
       "              }\n",
       "              render() {\n",
       "                  super.render();\n",
       "                  const fastTextField = document.createElement(\"fast-text-field\");\n",
       "                  this.input_el = fastTextField;\n",
       "                  this.input_el.className = \"bk-fast-input\";\n",
       "                  this.input_el.addEventListener(\"change\", () => this.change_input());\n",
       "                  this.input_el.addEventListener(\"input\", () => this.change_input_oninput());\n",
       "                  this.group_el.appendChild(this.input_el);\n",
       "                  // For some unknown reason we need to set these properties after the above\n",
       "                  // Otherwise for example the value is reset to \"\"\n",
       "                  fastTextField.name = this.model.name;\n",
       "                  fastTextField.value = this.model.value;\n",
       "                  fastTextField.appearance = this.model.appearance;\n",
       "                  fastTextField.autofocus = this.model.autofocus;\n",
       "                  fastTextField.placeholder = this.model.placeholder;\n",
       "                  fastTextField.disabled = this.model.disabled;\n",
       "                  fastTextField.type = this.model.type_of_text;\n",
       "                  fastTextField.setAttribute(\"maxlength\", this.model.max_length);\n",
       "                  fastTextField.setAttribute(\"minlength\", this.model.min_length);\n",
       "                  fastTextField.pattern = this.model.pattern;\n",
       "                  // Could not get size working. It raises an error.\n",
       "                  // fastTextField.size = this.model.size;\n",
       "                  fastTextField.spellcheck = this.model.spellcheck;\n",
       "                  fastTextField.required = this.model.required;\n",
       "                  fastTextField.disabled = this.model.disabled;\n",
       "                  fastTextField.setAttribute(\"readonly\", this.model.readonly);\n",
       "              }\n",
       "              change_input() {\n",
       "                  this.model.value = this.input_el.value;\n",
       "                  super.change_input();\n",
       "              }\n",
       "              change_input_oninput() {\n",
       "                  this.model.value_input = this.input_el.value;\n",
       "                  super.change_input();\n",
       "              }\n",
       "          }\n",
       "          exports.FastTextInputView = FastTextInputView;\n",
       "          FastTextInputView.__name__ = \"FastTextInputView\";\n",
       "          class FastTextInput extends text_input_1.TextInput {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_FastTextInput() {\n",
       "                  this.prototype.default_view = FastTextInputView;\n",
       "                  this.define(({ Any, Boolean, Number, String }) => ({\n",
       "                      // name inherited\n",
       "                      // value inherited\n",
       "                      appearance: [String,],\n",
       "                      autofocus: [Boolean,],\n",
       "                      // placeholder inherited\n",
       "                      type_of_text: [String,],\n",
       "                      // max_length: [Number, ],\n",
       "                      min_length: [Number,],\n",
       "                      pattern: [String,],\n",
       "                      size: [Any,],\n",
       "                      spellcheck: [Boolean,],\n",
       "                      required: [Boolean,],\n",
       "                      // disabled inherited\n",
       "                      readonly: [Boolean, false],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.FastTextInput = FastTextInput;\n",
       "          FastTextInput.__name__ = \"FastTextInput\";\n",
       "          FastTextInput.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_text_input\";\n",
       "          FastTextInput.init_FastTextInput();\n",
       "      },\n",
       "      \"eb2d75c5b0\": /* bokeh_extensions\\pivot_table.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          // Bokeh model for perspective-viewer\n",
       "          // See https://github.com/finos/perspective/tree/main/packages/perspective-viewer\n",
       "          // See https://docs.bokeh.org/en/latest/docs/reference/models/layouts.html\n",
       "          const html_box_1 = require(\"@bokehjs/models/layouts/html_box\");\n",
       "          const dom_1 = require(\"@bokehjs/core/dom\");\n",
       "          const shared_1 = require(\"88538263fa\") /* ./shared */;\n",
       "          // The view of the Bokeh extension/ HTML element\n",
       "          // Here you can define how to render the model as well as react to model changes or View events.\n",
       "          class PivotTableView extends html_box_1.HTMLBoxView {\n",
       "              connect_signals() {\n",
       "                  super.connect_signals();\n",
       "                  this.connect(this.model.source.properties.data.change, this.setData);\n",
       "              }\n",
       "              render() {\n",
       "                  super.render();\n",
       "                  this.container = dom_1.div({ class: \"pnx-pivot-table\" });\n",
       "                  shared_1.set_size(this.container, this.model);\n",
       "                  this.el.appendChild(this.container);\n",
       "                  this.setData();\n",
       "              }\n",
       "              setData() {\n",
       "                  console.log(\"setData\");\n",
       "                  console.log(this.model.source.data);\n",
       "                  let data = shared_1.transform_cds_to_records(this.model.source);\n",
       "                  this.pivot_table_element = $(this.container);\n",
       "                  console.log(data);\n",
       "                  this.pivot_table_element.pivotUI(data, {});\n",
       "              }\n",
       "          }\n",
       "          exports.PivotTableView = PivotTableView;\n",
       "          PivotTableView.__name__ = \"PivotTableView\";\n",
       "          // The Bokeh .ts model corresponding to the Bokeh .py model\n",
       "          class PivotTable extends html_box_1.HTMLBox {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_PivotTable() {\n",
       "                  this.prototype.default_view = PivotTableView;\n",
       "                  this.define(({ Any }) => ({\n",
       "                      source: [Any,],\n",
       "                      source_stream: [Any,],\n",
       "                      source_patch: [Any,],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.PivotTable = PivotTable;\n",
       "          PivotTable.__name__ = \"PivotTable\";\n",
       "          PivotTable.__module__ = \"awesome_panel_extensions.bokeh_extensions.pivot_table\";\n",
       "          PivotTable.init_PivotTable();\n",
       "      },\n",
       "      \"88538263fa\": /* bokeh_extensions\\shared.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          /** Function copied from the panel\\models\\layout.ts file of Panel\n",
       "           * It is used for some models like deckgl, progress and vtlklayout\n",
       "           * I have not yet understood why\n",
       "           * @param el\n",
       "           * @param model\n",
       "           */\n",
       "          function set_size(el, model) {\n",
       "              let width_policy = model.width != null ? \"fixed\" : \"fit\";\n",
       "              let height_policy = model.height != null ? \"fixed\" : \"fit\";\n",
       "              const { sizing_mode } = model;\n",
       "              if (sizing_mode != null) {\n",
       "                  if (sizing_mode == \"fixed\")\n",
       "                      width_policy = height_policy = \"fixed\";\n",
       "                  else if (sizing_mode == \"stretch_both\")\n",
       "                      width_policy = height_policy = \"max\";\n",
       "                  else if (sizing_mode == \"stretch_width\")\n",
       "                      width_policy = \"max\";\n",
       "                  else if (sizing_mode == \"stretch_height\")\n",
       "                      height_policy = \"max\";\n",
       "                  else {\n",
       "                      switch (sizing_mode) {\n",
       "                          case \"scale_width\":\n",
       "                              width_policy = \"max\";\n",
       "                              height_policy = \"min\";\n",
       "                              break;\n",
       "                          case \"scale_height\":\n",
       "                              width_policy = \"min\";\n",
       "                              height_policy = \"max\";\n",
       "                              break;\n",
       "                          case \"scale_both\":\n",
       "                              width_policy = \"max\";\n",
       "                              height_policy = \"max\";\n",
       "                              break;\n",
       "                          default:\n",
       "                              throw new Error(\"unreachable\");\n",
       "                      }\n",
       "                  }\n",
       "              }\n",
       "              if (width_policy == \"fixed\" && model.width)\n",
       "                  el.style.width = model.width + \"px\";\n",
       "              else if (width_policy == \"max\")\n",
       "                  el.style.width = \"100%\";\n",
       "              if (height_policy == \"fixed\" && model.height)\n",
       "                  el.style.height = model.height + \"px\";\n",
       "              else if (height_policy == \"max\")\n",
       "                  el.style.height = \"100%\";\n",
       "          }\n",
       "          exports.set_size = set_size;\n",
       "          /** Transform the data of the cds to 'records' format, i.e. a list of objects\n",
       "           *\n",
       "           *  For example transforms to [{\"x\": 1, \"y\": 2}, {\"x\": 3, \"y\": 4}]\n",
       "           *\n",
       "           *  Some js libraries like perspective-viewer uses this format to load data.\n",
       "           *\n",
       "           * @param cds\n",
       "           */\n",
       "          function transform_cds_to_records(cds) {\n",
       "              const data = [];\n",
       "              const columns = cds.columns();\n",
       "              const cdsLength = cds.get_length();\n",
       "              if (columns.length === 0 || cdsLength === null) {\n",
       "                  return [];\n",
       "              }\n",
       "              for (let i = 0; i < cdsLength; i++) {\n",
       "                  const item = {};\n",
       "                  for (const column of columns) {\n",
       "                      let array = cds.get_array(column);\n",
       "                      const shape = array[0].shape == null ? null : array[0].shape;\n",
       "                      if ((shape != null) && (shape.length > 1) && (typeof shape[0] == \"number\"))\n",
       "                          item[column] = array.slice(i * shape[1], i * shape[1] + shape[1]);\n",
       "                      else\n",
       "                          item[column] = array[i];\n",
       "                  }\n",
       "                  data.push(item);\n",
       "              }\n",
       "              return data;\n",
       "          }\n",
       "          exports.transform_cds_to_records = transform_cds_to_records;\n",
       "          /** Helper function used to incrementally build a html element string\n",
       "           *\n",
       "           *  For example toAttribute(\"columns\", ['x','y']) returns ' columns=\"['x','y']\"\n",
       "           *  For example toAttribute(\"columns\", null) returns \"\"\n",
       "           *\n",
       "           * @param attribute\n",
       "           * @param value\n",
       "           */\n",
       "          function toAttribute(attribute, value) {\n",
       "              if (value === null) {\n",
       "                  return \"\";\n",
       "              }\n",
       "              if (typeof value !== \"string\") {\n",
       "                  value = JSON.stringify(value);\n",
       "              }\n",
       "              return \" \" + attribute + \"='\" + value + \"'\";\n",
       "          }\n",
       "          exports.toAttribute = toAttribute;\n",
       "      },\n",
       "      \"5f262d0d3a\": /* bokeh_extensions\\icon.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const abstract_icon_1 = require(\"@bokehjs/models/widgets/abstract_icon\");\n",
       "          // See https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro\n",
       "          /**\n",
       "           * @param {String} HTML representing a single element\n",
       "           * @return {Element}\n",
       "           */\n",
       "          function htmlToElement(html) {\n",
       "              var template = document.createElement('template');\n",
       "              html = html.trim(); // Never return a text node of whitespace as the result\n",
       "              template.innerHTML = html;\n",
       "              return template.content.firstChild;\n",
       "          }\n",
       "          class IconView extends abstract_icon_1.AbstractIconView {\n",
       "              connect_signals() {\n",
       "                  super.connect_signals();\n",
       "                  this.connect(this.model.change, () => this.render());\n",
       "              }\n",
       "              render() {\n",
       "                  super.render();\n",
       "                  if (this.model.text === null && this.model.text === \"\") {\n",
       "                      return;\n",
       "                  }\n",
       "                  this.el.innerHTML = \"\";\n",
       "                  const iconEl = htmlToElement(this.model.text);\n",
       "                  this.el.appendChild(iconEl);\n",
       "                  this.el.style.display = \"inline\";\n",
       "                  this.el.style.height = `${this.model.size}em`;\n",
       "                  this.el.style.width = `${this.model.size}em`;\n",
       "                  iconEl.style.verticalAlign = \"middle\";\n",
       "                  iconEl.style.height = `${this.model.size}em`;\n",
       "                  iconEl.style.width = `${this.model.size}em`;\n",
       "                  iconEl.style.fill = this.model.fill_color;\n",
       "                  if (this.model.spin_duration > 0) {\n",
       "                      // See https://codepen.io/eveness/pen/BjLaoa\n",
       "                      const animationDuration = `${this.model.spin_duration}ms`;\n",
       "                      iconEl.style.setProperty(\"-webkit-animation-name\", \"spin\");\n",
       "                      iconEl.style.setProperty(\"-webkit-animation-duration\", animationDuration);\n",
       "                      iconEl.style.setProperty(\"-webkit-animation-iteration-count\", \"infinite\");\n",
       "                      iconEl.style.setProperty(\"-webkit-animation-timing-function\", \"linear\");\n",
       "                      iconEl.style.setProperty(\"-moz-animation-name\", \"spin\");\n",
       "                      iconEl.style.setProperty(\"-moz-animation-duration\", animationDuration);\n",
       "                      iconEl.style.setProperty(\"-moz-animation-iteration-count\", \"infinite\");\n",
       "                      iconEl.style.setProperty(\"-moz-animation-timing-function\", \"linear\");\n",
       "                      iconEl.style.setProperty(\"-ms-animation-name\", \"spin\");\n",
       "                      iconEl.style.setProperty(\"-ms-animation-duration\", animationDuration);\n",
       "                      iconEl.style.setProperty(\"-ms-animation-iteration-count\", \"infinite\");\n",
       "                      iconEl.style.setProperty(\"-ms-animation-timing-function\", \"linear\");\n",
       "                      iconEl.style.setProperty(\"animation-name\", \"spin\");\n",
       "                      iconEl.style.setProperty(\"animation-duration\", animationDuration);\n",
       "                      iconEl.style.setProperty(\"animation-iteration-count\", \"infinite\");\n",
       "                      iconEl.style.setProperty(\"animation-timing-function\", \"linear\");\n",
       "                  }\n",
       "                  iconEl.classList.add(\"icon\");\n",
       "                  if (this.model.label != null && this.model.label !== \"\") {\n",
       "                      const label = this.model.label.toLowerCase().replace(\" \", \"\");\n",
       "                      iconEl.classList.add(`icon-${label}`);\n",
       "                  }\n",
       "              }\n",
       "          }\n",
       "          exports.IconView = IconView;\n",
       "          IconView.__name__ = \"IconView\";\n",
       "          class Icon extends abstract_icon_1.AbstractIcon {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_Icon() {\n",
       "                  this.prototype.default_view = IconView;\n",
       "                  this.define(({ String, Number, Int }) => ({\n",
       "                      label: [String,],\n",
       "                      text: [String,],\n",
       "                      size: [Number, 1.0],\n",
       "                      fill_color: [String, \"currentColor\"],\n",
       "                      spin_duration: [Int, 0],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.Icon = Icon;\n",
       "          Icon.__name__ = \"Icon\";\n",
       "          Icon.__module__ = \"awesome_panel_extensions.bokeh_extensions.icon\";\n",
       "          Icon.init_Icon();\n",
       "      },\n",
       "      \"eae326731a\": /* bokeh_extensions\\web_component.js */ function _(require, module, exports, __esModule, __esExport) {\n",
       "          __esModule();\n",
       "          const tslib_1 = require(\"tslib\");\n",
       "          const dom_1 = require(\"@bokehjs/core/dom\");\n",
       "          const html_box_1 = require(\"@bokehjs/models/layouts/html_box\");\n",
       "          const inputs = tslib_1.__importStar(require(\"@bokehjs/styles/widgets/inputs.css\"));\n",
       "          function htmlDecode(input) {\n",
       "              var doc = new DOMParser().parseFromString(input, \"text/html\");\n",
       "              return doc.documentElement.textContent;\n",
       "          }\n",
       "          class WebComponentView extends html_box_1.HTMLBoxView {\n",
       "              connect_signals() {\n",
       "                  super.connect_signals();\n",
       "                  this.connect(this.model.properties.name.change, () => this.handleNameChange());\n",
       "                  this.connect(this.model.properties.innerHTML.change, () => this.render());\n",
       "                  this.connect(this.model.properties.attributesLastChange.change, () => this.handleAttributesLastChangeChange());\n",
       "                  this.connect(this.model.properties.propertiesLastChange.change, () => this.handlePropertiesLastChangeChange());\n",
       "                  this.connect(this.model.properties.columnDataSource.change, () => this.handleColumnDataSourceChange());\n",
       "              }\n",
       "              handleNameChange() {\n",
       "                  if (this.label_el)\n",
       "                      this.label_el.textContent = this.model.name;\n",
       "              }\n",
       "              render() {\n",
       "                  super.render();\n",
       "                  if (this.el.innerHTML !== this.model.innerHTML)\n",
       "                      this.createOrUpdateWebComponentElement();\n",
       "              }\n",
       "              after_layout() {\n",
       "                  if (\"after_layout\" in this.webComponentElement)\n",
       "                      this.webComponentElement.after_layout();\n",
       "              }\n",
       "              createOrUpdateWebComponentElement() {\n",
       "                  if (this.webComponentElement)\n",
       "                      this.webComponentElement.onchange = null;\n",
       "                  // @Philippfr: How do we make sure the component is automatically sized according to the\n",
       "                  // parameters of the WebComponent like width, height, sizing_mode etc?\n",
       "                  // Should we set height and width to 100% or similar?\n",
       "                  // For now I've set min_height as a part of .py __init__ for some of the Wired components?\n",
       "                  const title = this.model.name;\n",
       "                  if (this.model.componentType === \"inputgroup\" && title) {\n",
       "                      this.group_el = dom_1.div({ class: inputs.input_group }, this.label_el);\n",
       "                      this.group_el.innerHTML = htmlDecode(this.model.innerHTML);\n",
       "                      this.webComponentElement = this.group_el.firstElementChild;\n",
       "                      this.label_el = dom_1.label({ style: { display: title.length == 0 ? \"none\" : \"\" } }, title);\n",
       "                      this.group_el.insertBefore(this.label_el, this.webComponentElement);\n",
       "                      this.el.appendChild(this.group_el);\n",
       "                  }\n",
       "                  else {\n",
       "                      this.el.innerHTML = htmlDecode(this.model.innerHTML);\n",
       "                      this.webComponentElement = this.el.firstElementChild;\n",
       "                  }\n",
       "                  this.activate_scripts(this.webComponentElement.parentNode);\n",
       "                  // Initialize properties\n",
       "                  this.initPropertyValues();\n",
       "                  this.handlePropertiesLastChangeChange();\n",
       "                  this.handleColumnDataSourceChange();\n",
       "                  // Subscribe to events\n",
       "                  this.webComponentElement.onchange = (ev) => this.handlePropertiesChange(ev);\n",
       "                  this.addEventListeners();\n",
       "                  this.addAttributesMutationObserver();\n",
       "              }\n",
       "              addAttributesMutationObserver() {\n",
       "                  if (!this.model.attributesToWatch)\n",
       "                      return;\n",
       "                  let options = {\n",
       "                      childList: false,\n",
       "                      attributes: true,\n",
       "                      characterData: false,\n",
       "                      subtree: false,\n",
       "                      attributeFilter: Object.keys(this.model.attributesToWatch),\n",
       "                      attributeOldValue: false,\n",
       "                      characterDataOldValue: false\n",
       "                  };\n",
       "                  const handleAttributesChange = (_) => {\n",
       "                      let attributesLastChange = new Object();\n",
       "                      for (let attribute in this.model.attributesToWatch) {\n",
       "                          const value = this.webComponentElement.getAttribute(attribute);\n",
       "                          attributesLastChange[attribute] = value;\n",
       "                      }\n",
       "                      if (this.model.attributesLastChange !== attributesLastChange)\n",
       "                          this.model.attributesLastChange = attributesLastChange;\n",
       "                  };\n",
       "                  let observer = new MutationObserver(handleAttributesChange);\n",
       "                  observer.observe(this.webComponentElement, options);\n",
       "              }\n",
       "              addEventListeners() {\n",
       "                  this.eventsCount = {};\n",
       "                  for (let event in this.model.eventsToWatch) {\n",
       "                      this.eventsCount[event] = 0;\n",
       "                      this.webComponentElement.addEventListener(event, (ev) => this.eventHandler(ev), false);\n",
       "                  }\n",
       "              }\n",
       "              transform_cds_to_records(cds) {\n",
       "                  const data = [];\n",
       "                  const columns = cds.columns();\n",
       "                  const cdsLength = cds.get_length();\n",
       "                  if (columns.length === 0 || cdsLength === null) {\n",
       "                      return [];\n",
       "                  }\n",
       "                  for (let i = 0; i < cdsLength; i++) {\n",
       "                      const item = {};\n",
       "                      for (const column of columns) {\n",
       "                          let array = cds.get_array(column);\n",
       "                          const shape = array[0].shape == null ? null : array[0].shape;\n",
       "                          if ((shape != null) && (shape.length > 1) && (typeof shape[0] == \"number\"))\n",
       "                              item[column] = array.slice(i * shape[1], i * shape[1] + shape[1]);\n",
       "                          else\n",
       "                              item[column] = array[i];\n",
       "                      }\n",
       "                      data.push(item);\n",
       "                  }\n",
       "                  return data;\n",
       "              }\n",
       "              // https://stackoverflow.com/questions/5999998/check-if-a-variable-is-of-function-type\n",
       "              isFunction(functionToCheck) {\n",
       "                  if (functionToCheck) {\n",
       "                      const stringName = {}.toString.call(functionToCheck);\n",
       "                      return stringName === '[object Function]' || stringName === '[object AsyncFunction]';\n",
       "                  }\n",
       "                  else {\n",
       "                      return false;\n",
       "                  }\n",
       "              }\n",
       "              /**\n",
       "               * Handles changes to `this.model.columnDataSource`\n",
       "               * by\n",
       "               * updating the data source of `this.webComponentElement`\n",
       "               * using the function or property specifed in `this.model.columnDataSourceLoadFunction`\n",
       "               */\n",
       "              handleColumnDataSourceChange() {\n",
       "                  // @Philippfr: Right now we just reload all the data\n",
       "                  // For example Perspective has an `update` function to append data\n",
       "                  // Is this something we could/ should support?\n",
       "                  if (this.model.columnDataSource) {\n",
       "                      let data; // list\n",
       "                      const columnDataSourceOrient = this.model.columnDataSourceOrient;\n",
       "                      if (columnDataSourceOrient === \"records\")\n",
       "                          data = this.transform_cds_to_records(this.model.columnDataSource);\n",
       "                      else\n",
       "                          data = this.model.columnDataSource.data; // @ts-ignore\n",
       "                      if (this.model.columnDataSourceLoadFunction === null) {\n",
       "                          return;\n",
       "                      }\n",
       "                      const loadFunctionName = this.model.columnDataSourceLoadFunction.toString();\n",
       "                      const loadFunction = this.webComponentElement[loadFunctionName];\n",
       "                      if (this.isFunction(loadFunction))\n",
       "                          this.webComponentElement[loadFunctionName](data);\n",
       "                      else\n",
       "                          this.webComponentElement[loadFunctionName] = data;\n",
       "                  }\n",
       "                  // Todo: handle situation where this.model.columnDataSource is null\n",
       "              }\n",
       "              activate_scripts(el) {\n",
       "                  Array.from(el.querySelectorAll(\"script\")).forEach((oldScript) => {\n",
       "                      const newScript = document.createElement(\"script\");\n",
       "                      Array.from(oldScript.attributes)\n",
       "                          .forEach(attr => newScript.setAttribute(attr.name, attr.value));\n",
       "                      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n",
       "                      if (oldScript.parentNode)\n",
       "                          oldScript.parentNode.replaceChild(newScript, oldScript);\n",
       "                  });\n",
       "              }\n",
       "              // See https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key\n",
       "              /**\n",
       "               * Example:\n",
       "               *\n",
       "               * `get_nested_property(element, \"textInput.value\")` returns `element.textInput.value`\n",
       "               *\n",
       "               * @param element\n",
       "               * @param property_\n",
       "               */\n",
       "              get_nested_property(element, property_) {\n",
       "                  property_ = property_.replace(/\\[(\\w+)\\]/g, '.$1'); // convert indexes to properties\n",
       "                  property_ = property_.replace(/^\\./, ''); // strip a leading dot\n",
       "                  let a = property_.split('.');\n",
       "                  for (let i = 0, n = a.length; i < n; ++i) {\n",
       "                      let k = a[i];\n",
       "                      if (k in element)\n",
       "                          element = element[k];\n",
       "                      else\n",
       "                          return \"\";\n",
       "                  }\n",
       "                  return element;\n",
       "              }\n",
       "              set_nested_property(element, property_, value) {\n",
       "                  // @Phillipfr: I need your help to understand and solve this\n",
       "                  // hack: Setting the value of the WIRED-SLIDER before its ready\n",
       "                  // will destroy the setter.\n",
       "                  // I don't yet understand this.\n",
       "                  // if ([\"WIRED-SLIDER\"].indexOf(element.tagName)>=0){\n",
       "                  //   const setter = element.__lookupSetter__(property_);\n",
       "                  //   if (!setter){return}\n",
       "                  // }\n",
       "                  const pList = property_.split('.');\n",
       "                  if (pList.length === 1)\n",
       "                      element[property_] = value;\n",
       "                  else {\n",
       "                      const len = pList.length;\n",
       "                      for (let i = 0; i < len - 1; i++) {\n",
       "                          const elem = pList[i];\n",
       "                          if (!element[elem])\n",
       "                              element[elem] = {};\n",
       "                          element = element[elem];\n",
       "                      }\n",
       "                      element[pList[len - 1]] = value;\n",
       "                  }\n",
       "              }\n",
       "              /**\n",
       "               * Handles events from `eventsToWatch` by\n",
       "               *\n",
       "               * - Incrementing the count of the event\n",
       "               * - Checking if any properties have changed\n",
       "               *\n",
       "               * @param ev The Event Fired\n",
       "               */\n",
       "              eventHandler(ev) {\n",
       "                  let event = ev.type;\n",
       "                  this.eventsCount[event] += 1;\n",
       "                  let eventsCountLastChanged = {};\n",
       "                  eventsCountLastChanged[event] = this.eventsCount[event];\n",
       "                  this.model.eventsCountLastChange = eventsCountLastChanged;\n",
       "                  this.checkIfPropertiesChanged();\n",
       "              }\n",
       "              /** Checks if any properties have changed. In case this is communicated to the server.\n",
       "               *\n",
       "               * For example the Wired `DropDown` does not run the `onchange` event handler when the selection changes.\n",
       "               * Insted the `select` event is fired. Thus we can subscribe to this event and manually check for property changes.\n",
       "               */\n",
       "              checkIfPropertiesChanged() {\n",
       "                  const propertiesChange = {};\n",
       "                  for (const property in this.model.propertiesToWatch) {\n",
       "                      const oldValue = this.propertyValues[property];\n",
       "                      const newValue = this.get_nested_property(this.webComponentElement, property);\n",
       "                      if (oldValue != newValue) {\n",
       "                          propertiesChange[property] = newValue;\n",
       "                          this.propertyValues[property] = newValue;\n",
       "                      }\n",
       "                  }\n",
       "                  if (Object.keys(propertiesChange).length)\n",
       "                      this.model.propertiesLastChange = propertiesChange;\n",
       "              }\n",
       "              /** Handles the `WebComponentElement` `(on)change` event\n",
       "               *\n",
       "               * Communicates any changed properties in `propertiesToWatch` to the server\n",
       "               * by updating `this.model.propertiesLastChange`.\n",
       "               * @param ev\n",
       "               */\n",
       "              handlePropertiesChange(ev) {\n",
       "                  const properties_change = new Object();\n",
       "                  for (const property in this.model.propertiesToWatch) {\n",
       "                      if (ev.detail && property in ev.detail) {\n",
       "                          properties_change[property] = ev.detail[property];\n",
       "                          this.propertyValues[property] = ev.detail[property];\n",
       "                      }\n",
       "                      else if (ev.target && property in ev.target) {\n",
       "                          properties_change[property] = ev.target[property];\n",
       "                          this.propertyValues[property] = ev.target[property];\n",
       "                      }\n",
       "                  }\n",
       "                  if (Object.keys(properties_change).length)\n",
       "                      this.model.propertiesLastChange = properties_change;\n",
       "              }\n",
       "              initPropertyValues() {\n",
       "                  this.propertyValues = new Object();\n",
       "                  if (!this.webComponentElement) {\n",
       "                      return;\n",
       "                  }\n",
       "                  for (let property in this.model.propertiesToWatch) {\n",
       "                      let old_value = this.propertyValues[property];\n",
       "                      let new_value = this.get_nested_property(this.webComponentElement, property);\n",
       "                      if (new_value !== old_value) {\n",
       "                          this.propertyValues[property] = new_value;\n",
       "                      }\n",
       "                  }\n",
       "              }\n",
       "              /**\n",
       "               * Handles changes to `this.model.attributesLastChange`\n",
       "               * by\n",
       "               * updating the attributes of `this.webComponentElement` accordingly\n",
       "               */\n",
       "              handleAttributesLastChangeChange() {\n",
       "                  if (!this.webComponentElement)\n",
       "                      return;\n",
       "                  let attributesLastChange = this.model.attributesLastChange;\n",
       "                  for (let attribute in this.model.attributesLastChange) {\n",
       "                      if (attribute in this.model.attributesToWatch) {\n",
       "                          let old_value = this.webComponentElement.getAttribute(attribute);\n",
       "                          let new_value = attributesLastChange[attribute];\n",
       "                          if (old_value !== new_value) {\n",
       "                              if (new_value === null)\n",
       "                                  this.webComponentElement.removeAttribute(attribute);\n",
       "                              else\n",
       "                                  this.webComponentElement.setAttribute(attribute, new_value);\n",
       "                          }\n",
       "                      }\n",
       "                  }\n",
       "              }\n",
       "              /**\n",
       "              * Handles changes to `this.model.propertiesLastChange`\n",
       "              * by\n",
       "              * updating the properties of `this.webComponentElement` accordingly\n",
       "              */\n",
       "              handlePropertiesLastChangeChange() {\n",
       "                  if (!this.webComponentElement) {\n",
       "                      return;\n",
       "                  }\n",
       "                  let propertiesLastChange = this.model.propertiesLastChange;\n",
       "                  for (let property in this.model.propertiesLastChange) {\n",
       "                      if (property in this.model.propertiesToWatch) {\n",
       "                          let value = propertiesLastChange[property];\n",
       "                          this.set_nested_property(this.webComponentElement, property, value);\n",
       "                      }\n",
       "                  }\n",
       "              }\n",
       "          }\n",
       "          exports.WebComponentView = WebComponentView;\n",
       "          WebComponentView.__name__ = \"WebComponentView\";\n",
       "          class WebComponent extends html_box_1.HTMLBox {\n",
       "              constructor(attrs) {\n",
       "                  super(attrs);\n",
       "              }\n",
       "              static init_WebComponent() {\n",
       "                  this.prototype.default_view = WebComponentView;\n",
       "                  this.define(({ Any, String }) => ({\n",
       "                      // @Philipfr: How do I make property types more specific\n",
       "                      componentType: [String, 'htmlbox'],\n",
       "                      innerHTML: [String, ''],\n",
       "                      attributesToWatch: [Any],\n",
       "                      attributesLastChange: [Any],\n",
       "                      propertiesToWatch: [Any],\n",
       "                      propertiesLastChange: [Any],\n",
       "                      eventsToWatch: [Any],\n",
       "                      eventsCountLastChange: [Any],\n",
       "                      columnDataSource: [Any],\n",
       "                      columnDataSourceOrient: [Any],\n",
       "                      columnDataSourceLoadFunction: [Any],\n",
       "                  }));\n",
       "              }\n",
       "          }\n",
       "          exports.WebComponent = WebComponent;\n",
       "          WebComponent.__name__ = \"WebComponent\";\n",
       "          WebComponent.__module__ = \"awesome_panel_extensions.bokeh_extensions.web_component\";\n",
       "          WebComponent.init_WebComponent();\n",
       "      },\n",
       "      }, \"ed583be1cf\", {\"index\":\"ed583be1cf\",\"bokeh_extensions/index\":\"ea89eb96d7\",\"bokeh_extensions/fast/fast_anchor\":\"3ab92f5894\",\"bokeh_extensions/fast/fast_button\":\"1d9a6373ec\",\"bokeh_extensions/fast/fast_checkbox_group\":\"b62557482c\",\"bokeh_extensions/fast/fast_switch_group\":\"b714a2453d\",\"bokeh_extensions/fast/fast_textarea_input\":\"e9b1cd48b7\",\"bokeh_extensions/fast/fast_text_input\":\"92a4b5b2b8\",\"bokeh_extensions/pivot_table\":\"eb2d75c5b0\",\"bokeh_extensions/shared\":\"88538263fa\",\"bokeh_extensions/icon\":\"5f262d0d3a\",\"bokeh_extensions/web_component\":\"eae326731a\"}, {});});\n",
       "      //# sourceMappingURL=awesome_panel_extensions.js.map\n",
       "\n",
       "      /* END awesome_panel_extensions.js */\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    root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;\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({'paths': {'tabulator': 'https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator'}});\n      require([], function() {\n      })\n    }\n    if (((window['tabulator'] !== undefined) && (!(window['tabulator'] instanceof HTMLElement))) || window.requirejs) {\n      var urls = ['https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js', 'https://unpkg.com/moment@2.27.0/moment.js'];\n      for (var i = 0; i < urls.length; i++) {\n        skip.push(urls[i])\n      }\n    }\n    for (var i = 0; i < js_urls.length; i++) {\n      var url = js_urls[i];\n      if (skip.indexOf(url) >= 0) { on_load(); continue; }\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) { on_load(); continue; }\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://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.js\", \"https://unpkg.com/moment@2.27.0/moment.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.0.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.0.min.js\", \"https://unpkg.com/@holoviz/panel@^0.11.1/dist/panel.min.js\"];\n  var js_modules = [];\n  var css_urls = [\"https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator_simple.min.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/alerts.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/card.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/dataframe.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/json.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/loading.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/dist/css/markdown.css\", \"https://unpkg.com/@holoviz/panel@0.11.1/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    }\\n    \");\n    },\n    function(Bokeh) {\n      Bokeh.set_log_level(\"info\");\n    },\n    \n    function(Bokeh) {\n      /* BEGIN awesome_panel_extensions.js */\n      /*!\n       * Copyright (c) 2012 - 2021, Anaconda, Inc., and Bokeh Contributors\n       * All rights reserved.\n       * \n       * Redistribution and use in source and binary forms, with or without modification,\n       * are permitted provided that the following conditions are met:\n       * \n       * Redistributions of source code must retain the above copyright notice,\n       * this list of conditions and the following disclaimer.\n       * \n       * Redistributions in binary form must reproduce the above copyright notice,\n       * this list of conditions and the following disclaimer in the documentation\n       * and/or other materials provided with the distribution.\n       * \n       * Neither the name of Anaconda nor the names of any contributors\n       * may be used to endorse or promote products derived from this software\n       * without specific prior written permission.\n       * \n       * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\n       * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\n       * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE\n       * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE\n       * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR\n       * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF\n       * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS\n       * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN\n       * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)\n       * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF\n       * THE POSSIBILITY OF SUCH DAMAGE.\n       */\n      (function(root, factory) {\n        factory(root[\"Bokeh\"], undefined);\n      })(this, function(Bokeh, version) {\n        var define;\n        return (function(modules, entry, aliases, externals) {\n          const bokeh = typeof Bokeh !== \"undefined\" && (version != null ? Bokeh[version] : Bokeh);\n          if (bokeh != null) {\n            return bokeh.register_plugin(modules, entry, aliases);\n          } else {\n            throw new Error(\"Cannot find Bokeh \" + version + \". You have to load it prior to loading plugins.\");\n          }\n        })\n      ({\n      \"ed583be1cf\": /* index.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const tslib_1 = require(\"tslib\");\n          const AwesomePanelExtensions = tslib_1.__importStar(require(\"ea89eb96d7\") /* ./bokeh_extensions */);\n          exports.AwesomePanelExtensions = AwesomePanelExtensions;\n          const base_1 = require(\"@bokehjs/base\");\n          base_1.register_models(AwesomePanelExtensions);\n      },\n      \"ea89eb96d7\": /* bokeh_extensions\\index.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          var fast_anchor_1 = require(\"3ab92f5894\") /* ./fast/fast_anchor */;\n          __esExport(\"FastAnchor\", fast_anchor_1.FastAnchor);\n          var fast_button_1 = require(\"1d9a6373ec\") /* ./fast/fast_button */;\n          __esExport(\"FastButton\", fast_button_1.FastButton);\n          var fast_checkbox_group_1 = require(\"b62557482c\") /* ./fast/fast_checkbox_group */;\n          __esExport(\"FastCheckboxGroup\", fast_checkbox_group_1.FastCheckboxGroup);\n          var fast_switch_group_1 = require(\"b714a2453d\") /* ./fast/fast_switch_group */;\n          __esExport(\"FastSwitchGroup\", fast_switch_group_1.FastSwitchGroup);\n          var fast_textarea_input_1 = require(\"e9b1cd48b7\") /* ./fast/fast_textarea_input */;\n          __esExport(\"FastTextAreaInput\", fast_textarea_input_1.FastTextAreaInput);\n          var fast_text_input_1 = require(\"92a4b5b2b8\") /* ./fast/fast_text_input */;\n          __esExport(\"FastTextInput\", fast_text_input_1.FastTextInput);\n          var pivot_table_1 = require(\"eb2d75c5b0\") /* ./pivot_table */;\n          __esExport(\"PivotTable\", pivot_table_1.PivotTable);\n          var icon_1 = require(\"5f262d0d3a\") /* ./icon */;\n          __esExport(\"Icon\", icon_1.Icon);\n          var web_component_1 = require(\"eae326731a\") /* ./web_component */;\n          __esExport(\"WebComponent\", web_component_1.WebComponent);\n      },\n      \"3ab92f5894\": /* bokeh_extensions\\fast\\fast_anchor.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const html_box_1 = require(\"@bokehjs/models/layouts/html_box\");\n          class FastAnchorView extends html_box_1.HTMLBoxView {\n              setAttr(attribute, value) {\n                  const anchor_el = this.anchor_el;\n                  if (value === null) {\n                      anchor_el.setAttribute(attribute, false);\n                  }\n                  else {\n                      anchor_el.setAttribute(attribute, value);\n                  }\n              }\n              connect_signals() {\n                  super.connect_signals();\n                  this.connect(this.model.properties.name.change, () => {\n                      if (this.model.name === null) {\n                          this.anchor_el.innerHTML = \"\";\n                      }\n                      else {\n                          this.anchor_el.innerHTML = this.model.name;\n                      }\n                  });\n                  this.connect(this.model.properties.appearance.change, () => {\n                      this.setAttr(\"appearance\", this.model.appearance);\n                  });\n                  this.connect(this.model.properties.href.change, () => {\n                      this.setAttr(\"href\", this.model.href);\n                  });\n                  this.connect(this.model.properties.hreflang.change, () => {\n                      this.setAttr(\"hreflang\", this.model.hreflang);\n                  });\n                  this.connect(this.model.properties.ping.change, () => {\n                      this.setAttr(\"ping\", this.model.ping);\n                  });\n                  this.connect(this.model.properties.href.change, () => {\n                      this.setAttr(\"referrerpolicy\", this.model.referrerpolicy);\n                  });\n                  this.connect(this.model.properties.download.change, () => {\n                      this.setAttr(\"download\", this.model.download);\n                  });\n                  this.connect(this.model.properties.referrer.change, () => {\n                      this.setAttr(\"referrer\", this.model.referrer);\n                  });\n                  this.connect(this.model.properties.rel.change, () => {\n                      this.setAttr(\"rel\", this.model.rel);\n                  });\n                  this.connect(this.model.properties.target.change, () => {\n                      this.setAttr(\"mimetype\", this.model.mimetype);\n                  });\n              }\n              render() {\n                  super.render();\n                  const anchor_el = document.createElement(\"fast-anchor\");\n                  this.anchor_el = anchor_el;\n                  this.anchor_el.style.width = \"100%\";\n                  this.el.appendChild(this.anchor_el);\n                  if (this.model.name !== null) {\n                      this.anchor_el.innerHTML = this.model.name;\n                  }\n                  if (this.model.appearance !== null) {\n                      anchor_el.appearance = this.model.appearance;\n                  }\n                  if (this.model.href !== null) {\n                      anchor_el.href = this.model.href;\n                  }\n                  if (this.model.hreflang !== null) {\n                      anchor_el.hreflang = this.model.hreflang;\n                  }\n                  if (this.model.ping !== null) {\n                      anchor_el.ping = this.model.ping;\n                  }\n                  if (this.model.referrerpolicy !== null) {\n                      anchor_el.referrerpolicy = this.model.referrerpolicy;\n                  }\n                  if (this.model.download !== null) {\n                      anchor_el.download = this.model.download;\n                  }\n                  if (this.model.referrer !== null) {\n                      anchor_el.ref = this.model.referrer;\n                  }\n                  if (this.model.rel !== null) {\n                      anchor_el.rel = this.model.rel;\n                  }\n                  if (this.model.target !== null) {\n                      anchor_el.target = this.model.target;\n                  }\n                  if (this.model.mimetype !== null) {\n                      anchor_el.mimetype = this.model.mimetype;\n                  }\n              }\n          }\n          exports.FastAnchorView = FastAnchorView;\n          FastAnchorView.__name__ = \"FastAnchorView\";\n          class FastAnchor extends html_box_1.HTMLBox {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_FastAnchor() {\n                  this.prototype.default_view = FastAnchorView;\n                  this.define(({ String }) => ({\n                      appearance: [String,],\n                      download: [String,],\n                      href: [String,],\n                      hreflang: [String,],\n                      ping: [String,],\n                      referrerpolicy: [String,],\n                      referrer: [String,],\n                      rel: [String,],\n                      target: [String,],\n                      mimetype: [String,],\n                  }));\n              }\n          }\n          exports.FastAnchor = FastAnchor;\n          FastAnchor.__name__ = \"FastAnchor\";\n          FastAnchor.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_anchor\";\n          FastAnchor.init_FastAnchor();\n      },\n      \"1d9a6373ec\": /* bokeh_extensions\\fast\\fast_button.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const button_1 = require(\"@bokehjs/models/widgets/button\");\n          // Browse the fast-button api here  https://explore.fast.design/components/fast-button\n          class FastButtonView extends button_1.ButtonView {\n              _render_button(..._) {\n                  const button = document.createElement(\"fast-button\");\n                  button.innerText = this.model.label;\n                  button.disabled = this.model.disabled;\n                  button.appearance = this.model.appearance;\n                  button.autofocus = this.model.autofocus;\n                  button.style.width = \"100%\";\n                  button.style.height = \"100%\";\n                  return button;\n              }\n          }\n          exports.FastButtonView = FastButtonView;\n          FastButtonView.__name__ = \"FastButtonView\";\n          class FastButton extends button_1.Button {\n              // __view_type__: FastButtonView\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_FastButton() {\n                  this.prototype.default_view = FastButtonView;\n                  this.define(({ Boolean, String }) => ({\n                      appearance: [String, \"neutral\"],\n                      autofocus: [Boolean, false],\n                  }));\n              }\n          }\n          exports.FastButton = FastButton;\n          FastButton.__name__ = \"FastButton\";\n          FastButton.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_button\";\n          FastButton.init_FastButton();\n      },\n      \"b62557482c\": /* bokeh_extensions\\fast\\fast_checkbox_group.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const tslib_1 = require(\"tslib\");\n          const checkbox_group_1 = require(\"@bokehjs/models/widgets/checkbox_group\");\n          const inputs = tslib_1.__importStar(require(\"@bokehjs/styles/widgets/inputs.css\"));\n          const dom_1 = require(\"@bokehjs/core/dom\");\n          const array_1 = require(\"@bokehjs/core/util/array\");\n          // Browse the fast-button api here  https://explore.fast.design/components/fast-button\n          class FastCheckboxGroupView extends checkbox_group_1.CheckboxGroupView {\n              render() {\n                  // Cannot call super.render() as this will add the group twice\n                  // super.render()\n                  const group = dom_1.div({ class: [inputs.input_group, this.model.inline ? inputs.inline : null] });\n                  this.el.innerHTML = \"\";\n                  this.el.appendChild(group);\n                  const { active, labels } = this.model;\n                  this._inputs = [];\n                  for (let i = 0; i < labels.length; i++) {\n                      let fastCheckBox = document.createElement(\"fast-checkbox\");\n                      if (this.model.readonly)\n                          // Setting the property did not work for me. Thus I set the attribute\n                          fastCheckBox.setAttribute(\"readonly\", true);\n                      fastCheckBox.innerHTML = labels[i];\n                      const checkbox = fastCheckBox;\n                      checkbox.value = `${i}`;\n                      // const checkbox = input({type: `checkbox`, value: `${i}`})\n                      checkbox.addEventListener(\"change\", () => this.change_active(i));\n                      this._inputs.push(checkbox);\n                      if (this.model.disabled)\n                          checkbox.disabled = true;\n                      if (array_1.includes(active, i))\n                          checkbox.checked = true;\n                      // const label_el = label({}, checkbox, span({}, labels[i]))\n                      group.appendChild(checkbox);\n                  }\n              }\n          }\n          exports.FastCheckboxGroupView = FastCheckboxGroupView;\n          FastCheckboxGroupView.__name__ = \"FastCheckboxGroupView\";\n          class FastCheckboxGroup extends checkbox_group_1.CheckboxGroup {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_FastCheckboxGroup() {\n                  this.prototype.default_view = FastCheckboxGroupView;\n                  this.define(({ Boolean }) => ({\n                      readonly: [Boolean,],\n                  }));\n              }\n          }\n          exports.FastCheckboxGroup = FastCheckboxGroup;\n          FastCheckboxGroup.__name__ = \"FastCheckboxGroup\";\n          FastCheckboxGroup.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_checkbox_group\";\n          FastCheckboxGroup.init_FastCheckboxGroup();\n      },\n      \"b714a2453d\": /* bokeh_extensions\\fast\\fast_switch_group.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const tslib_1 = require(\"tslib\");\n          const checkbox_group_1 = require(\"@bokehjs/models/widgets/checkbox_group\");\n          const inputs = tslib_1.__importStar(require(\"@bokehjs/styles/widgets/inputs.css\"));\n          const dom_1 = require(\"@bokehjs/core/dom\");\n          const array_1 = require(\"@bokehjs/core/util/array\");\n          // Browse the fast-switch api here https://explore.fast.design/components/fast-switch\n          class FastSwitchGroupView extends checkbox_group_1.CheckboxGroupView {\n              render() {\n                  // Cannot call super.render() as this will add the group twice\n                  // super.render()\n                  const group = dom_1.div({ class: [inputs.input_group, this.model.inline ? inputs.inline : null] });\n                  this.el.innerHTML = \"\";\n                  this.el.appendChild(group);\n                  const { active, labels } = this.model;\n                  this._inputs = [];\n                  for (let i = 0; i < labels.length; i++) {\n                      let FastSwitch = document.createElement(\"fast-switch\");\n                      if (this.model.readonly)\n                          // Setting the property did not work for me. Thus I set the attribute\n                          FastSwitch.setAttribute(\"readonly\", true);\n                      FastSwitch.innerHTML = labels[i];\n                      FastSwitch.innerHTML = labels[i];\n                      const fastSwitch = FastSwitch;\n                      fastSwitch.value = `${i}`;\n                      // const checkbox = input({type: `checkbox`, value: `${i}`})\n                      fastSwitch.addEventListener(\"change\", () => this.change_active(i));\n                      this._inputs.push(fastSwitch);\n                      if (this.model.disabled)\n                          fastSwitch.disabled = true;\n                      if (array_1.includes(active, i))\n                          fastSwitch.checked = true;\n                      const checked_message = document.createElement(\"span\");\n                      checked_message.setAttribute(\"slot\", \"checked-message\");\n                      checked_message.innerHTML = this.model.checked_message;\n                      fastSwitch.appendChild(checked_message);\n                      const unchecked_message = document.createElement(\"span\");\n                      unchecked_message.setAttribute(\"slot\", \"unchecked-message\");\n                      unchecked_message.innerHTML = this.model.unchecked_message;\n                      fastSwitch.appendChild(unchecked_message);\n                      // const label_el = label({}, checkbox, span({}, labels[i]))\n                      group.appendChild(fastSwitch);\n                  }\n              }\n          }\n          exports.FastSwitchGroupView = FastSwitchGroupView;\n          FastSwitchGroupView.__name__ = \"FastSwitchGroupView\";\n          class FastSwitchGroup extends checkbox_group_1.CheckboxGroup {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_FastSwitchGroup() {\n                  this.prototype.default_view = FastSwitchGroupView;\n                  this.define(({ Boolean, String }) => ({\n                      readonly: [Boolean,],\n                      checked_message: [String,],\n                      unchecked_message: [String,],\n                  }));\n              }\n          }\n          exports.FastSwitchGroup = FastSwitchGroup;\n          FastSwitchGroup.__name__ = \"FastSwitchGroup\";\n          FastSwitchGroup.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_switch_group\";\n          FastSwitchGroup.init_FastSwitchGroup();\n      },\n      \"e9b1cd48b7\": /* bokeh_extensions\\fast\\fast_textarea_input.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const textarea_input_1 = require(\"@bokehjs/models/widgets/textarea_input\");\n          const input_widget_1 = require(\"@bokehjs/models/widgets/input_widget\");\n          // I tried to inherit from TextAreaInputView but I could not\n          // get it working. It created two textareainputs.\n          class FastTextAreaInputView extends input_widget_1.InputWidgetView {\n              get input_el_any() {\n                  return this.input_el;\n              }\n              connect_signals() {\n                  super.connect_signals();\n                  this.connect(this.model.properties.name.change, () => { var _a; return this.input_el.name = (_a = this.model.name) !== null && _a !== void 0 ? _a : \"\"; });\n                  this.connect(this.model.properties.value.change, () => { this.input_el.value = this.model.value; });\n                  this.connect(this.model.properties.disabled.change, () => this.input_el.disabled = this.model.disabled);\n                  this.connect(this.model.properties.placeholder.change, () => this.input_el.placeholder = this.model.placeholder);\n                  this.connect(this.model.properties.rows.change, () => this.input_el.rows = this.model.rows);\n                  this.connect(this.model.properties.cols.change, () => this.input_el.cols = this.model.cols);\n                  this.connect(this.model.properties.max_length.change, () => this.input_el_any.setAttribute(\"maxlength\", this.model.max_length));\n                  this.connect(this.model.properties.appearance.change, () => this.input_el_any.appearance = this.model.appearance);\n                  this.connect(this.model.properties.autofocus.change, () => this.input_el_any.autofocus = this.model.autofocus);\n                  this.connect(this.model.properties.resize.change, () => this.input_el_any.resize = this.model.resize);\n                  this.connect(this.model.properties.spellcheck.change, () => this.input_el_any.spellcheck = this.model.spellcheck);\n                  this.connect(this.model.properties.min_length.change, () => this.input_el_any.setAttribute(\"minlength\", this.model.min_length));\n                  this.connect(this.model.properties.required.change, () => this.input_el_any.required = this.model.required);\n                  // Could not get readonly working as a property.\n                  // https://github.com/microsoft/fast/issues/3852\n                  this.connect(this.model.properties.readonly.change, () => {\n                      if (this.model.readonly === true) {\n                          this.input_el_any.setAttribute(\"readonly\", \"\");\n                      }\n                      else {\n                          this.input_el_any.removeAttribute(\"readonly\");\n                      }\n                  });\n              }\n              render() {\n                  super.render();\n                  const fastTextArea = document.createElement(\"fast-text-area\");\n                  this.input_el = fastTextArea;\n                  this.input_el.className = \"bk-fast-input\";\n                  this.input_el.addEventListener(\"change\", () => this.change_input());\n                  this.group_el.appendChild(this.input_el);\n                  // For some unknown reason we need to set these properties after the above\n                  // Otherwise for example the value is reset to \"\"\n                  fastTextArea.name = this.model.name;\n                  fastTextArea.value = this.model.value;\n                  fastTextArea.disabled = this.model.disabled;\n                  fastTextArea.placeholder = this.model.placeholder;\n                  fastTextArea.cols = this.model.cols;\n                  fastTextArea.rows = this.model.rows;\n                  if (this.model.max_length != null)\n                      fastTextArea.setAttribute(\"maxlength\", this.model.max_length);\n                  fastTextArea.appearance = this.model.appearance;\n                  fastTextArea.autofocus = this.model.autofocus;\n                  fastTextArea.resize = this.model.resize;\n                  fastTextArea.spellcheck = this.model.spellcheck;\n                  if (this.model.min_length != null)\n                      fastTextArea.setAttribute(\"minlength\", this.model.min_length);\n                  fastTextArea.required = this.model.required;\n                  if (this.model.readonly === true)\n                      fastTextArea.setAttribute(\"readonly\", \"\");\n              }\n              change_input() {\n                  this.model.value = this.input_el.value;\n                  super.change_input();\n              }\n          }\n          exports.FastTextAreaInputView = FastTextAreaInputView;\n          FastTextAreaInputView.__name__ = \"FastTextAreaInputView\";\n          class FastTextAreaInput extends textarea_input_1.TextAreaInput {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_FastTextAreaInput() {\n                  this.prototype.default_view = FastTextAreaInputView;\n                  this.define(({ Boolean, Number, String }) => ({\n                      // name inherited\n                      // value inherited\n                      // placeholder inherited\n                      // max_length inherited\n                      // disabled inherited\n                      // cols inherited\n                      // rows inherited\n                      appearance: [String,],\n                      autofocus: [Boolean,],\n                      resize: [String,],\n                      spellcheck: [Boolean,],\n                      min_length: [Number,],\n                      required: [Boolean,],\n                      readonly: [Boolean,],\n                  }));\n              }\n          }\n          exports.FastTextAreaInput = FastTextAreaInput;\n          FastTextAreaInput.__name__ = \"FastTextAreaInput\";\n          FastTextAreaInput.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_textarea_input\";\n          FastTextAreaInput.init_FastTextAreaInput();\n      },\n      \"92a4b5b2b8\": /* bokeh_extensions\\fast\\fast_text_input.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const text_input_1 = require(\"@bokehjs/models/widgets/text_input\");\n          const input_widget_1 = require(\"@bokehjs/models/widgets/input_widget\");\n          // I tried to inherit from TextInputView but I could not\n          // get it working. It created two textinputs.\n          class FastTextInputView extends input_widget_1.InputWidgetView {\n              connect_signals() {\n                  super.connect_signals();\n                  this.connect(this.model.properties.name.change, () => { var _a; return this.input_el.name = (_a = this.model.name) !== null && _a !== void 0 ? _a : \"\"; });\n                  this.connect(this.model.properties.value.change, () => { this.input_el.value = this.model.value; console.log(\"value\"); });\n                  this.connect(this.model.properties.value_input.change, () => this.input_el.value = this.model.value_input);\n                  this.connect(this.model.properties.disabled.change, () => this.input_el.disabled = this.model.disabled);\n                  this.connect(this.model.properties.placeholder.change, () => this.input_el.placeholder = this.model.placeholder);\n                  this.connect(this.model.properties.appearance.change, () => this.input_el_any.appearance = this.model.appearance);\n                  this.connect(this.model.properties.autofocus.change, () => this.input_el_any.autofocus = this.model.autofocus);\n                  this.connect(this.model.properties.type_of_text.change, () => this.input_el_any.type = this.model.type_of_text);\n                  this.connect(this.model.properties.max_length.change, () => this.input_el_any.setAttribute(\"maxlength\", this.model.max_length));\n                  this.connect(this.model.properties.min_length.change, () => this.input_el_any.setAttribute(\"minlength\", this.model.min_length));\n                  this.connect(this.model.properties.pattern.change, () => this.input_el_any.pattern = this.model.pattern);\n                  // Could not get size working. It raises an error\n                  // this.connect(this.model.properties.size.change, () => this.input_el_any.size = this.model.size)\n                  this.connect(this.model.properties.spellcheck.change, () => this.input_el_any.spellcheck = this.model.spellcheck);\n                  this.connect(this.model.properties.required.change, () => this.input_el_any.required = this.model.required);\n                  // Could not get readonly working as a property.\n                  // https://github.com/microsoft/fast/issues/3852\n                  this.connect(this.model.properties.readonly.change, () => this.input_el_any.setAttribute(\"readonly\", this.model.readonly));\n              }\n              get input_el_any() {\n                  return this.input_el;\n              }\n              render() {\n                  super.render();\n                  const fastTextField = document.createElement(\"fast-text-field\");\n                  this.input_el = fastTextField;\n                  this.input_el.className = \"bk-fast-input\";\n                  this.input_el.addEventListener(\"change\", () => this.change_input());\n                  this.input_el.addEventListener(\"input\", () => this.change_input_oninput());\n                  this.group_el.appendChild(this.input_el);\n                  // For some unknown reason we need to set these properties after the above\n                  // Otherwise for example the value is reset to \"\"\n                  fastTextField.name = this.model.name;\n                  fastTextField.value = this.model.value;\n                  fastTextField.appearance = this.model.appearance;\n                  fastTextField.autofocus = this.model.autofocus;\n                  fastTextField.placeholder = this.model.placeholder;\n                  fastTextField.disabled = this.model.disabled;\n                  fastTextField.type = this.model.type_of_text;\n                  fastTextField.setAttribute(\"maxlength\", this.model.max_length);\n                  fastTextField.setAttribute(\"minlength\", this.model.min_length);\n                  fastTextField.pattern = this.model.pattern;\n                  // Could not get size working. It raises an error.\n                  // fastTextField.size = this.model.size;\n                  fastTextField.spellcheck = this.model.spellcheck;\n                  fastTextField.required = this.model.required;\n                  fastTextField.disabled = this.model.disabled;\n                  fastTextField.setAttribute(\"readonly\", this.model.readonly);\n              }\n              change_input() {\n                  this.model.value = this.input_el.value;\n                  super.change_input();\n              }\n              change_input_oninput() {\n                  this.model.value_input = this.input_el.value;\n                  super.change_input();\n              }\n          }\n          exports.FastTextInputView = FastTextInputView;\n          FastTextInputView.__name__ = \"FastTextInputView\";\n          class FastTextInput extends text_input_1.TextInput {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_FastTextInput() {\n                  this.prototype.default_view = FastTextInputView;\n                  this.define(({ Any, Boolean, Number, String }) => ({\n                      // name inherited\n                      // value inherited\n                      appearance: [String,],\n                      autofocus: [Boolean,],\n                      // placeholder inherited\n                      type_of_text: [String,],\n                      // max_length: [Number, ],\n                      min_length: [Number,],\n                      pattern: [String,],\n                      size: [Any,],\n                      spellcheck: [Boolean,],\n                      required: [Boolean,],\n                      // disabled inherited\n                      readonly: [Boolean, false],\n                  }));\n              }\n          }\n          exports.FastTextInput = FastTextInput;\n          FastTextInput.__name__ = \"FastTextInput\";\n          FastTextInput.__module__ = \"awesome_panel_extensions.bokeh_extensions.fast.fast_text_input\";\n          FastTextInput.init_FastTextInput();\n      },\n      \"eb2d75c5b0\": /* bokeh_extensions\\pivot_table.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          // Bokeh model for perspective-viewer\n          // See https://github.com/finos/perspective/tree/main/packages/perspective-viewer\n          // See https://docs.bokeh.org/en/latest/docs/reference/models/layouts.html\n          const html_box_1 = require(\"@bokehjs/models/layouts/html_box\");\n          const dom_1 = require(\"@bokehjs/core/dom\");\n          const shared_1 = require(\"88538263fa\") /* ./shared */;\n          // The view of the Bokeh extension/ HTML element\n          // Here you can define how to render the model as well as react to model changes or View events.\n          class PivotTableView extends html_box_1.HTMLBoxView {\n              connect_signals() {\n                  super.connect_signals();\n                  this.connect(this.model.source.properties.data.change, this.setData);\n              }\n              render() {\n                  super.render();\n                  this.container = dom_1.div({ class: \"pnx-pivot-table\" });\n                  shared_1.set_size(this.container, this.model);\n                  this.el.appendChild(this.container);\n                  this.setData();\n              }\n              setData() {\n                  console.log(\"setData\");\n                  console.log(this.model.source.data);\n                  let data = shared_1.transform_cds_to_records(this.model.source);\n                  this.pivot_table_element = $(this.container);\n                  console.log(data);\n                  this.pivot_table_element.pivotUI(data, {});\n              }\n          }\n          exports.PivotTableView = PivotTableView;\n          PivotTableView.__name__ = \"PivotTableView\";\n          // The Bokeh .ts model corresponding to the Bokeh .py model\n          class PivotTable extends html_box_1.HTMLBox {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_PivotTable() {\n                  this.prototype.default_view = PivotTableView;\n                  this.define(({ Any }) => ({\n                      source: [Any,],\n                      source_stream: [Any,],\n                      source_patch: [Any,],\n                  }));\n              }\n          }\n          exports.PivotTable = PivotTable;\n          PivotTable.__name__ = \"PivotTable\";\n          PivotTable.__module__ = \"awesome_panel_extensions.bokeh_extensions.pivot_table\";\n          PivotTable.init_PivotTable();\n      },\n      \"88538263fa\": /* bokeh_extensions\\shared.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          /** Function copied from the panel\\models\\layout.ts file of Panel\n           * It is used for some models like deckgl, progress and vtlklayout\n           * I have not yet understood why\n           * @param el\n           * @param model\n           */\n          function set_size(el, model) {\n              let width_policy = model.width != null ? \"fixed\" : \"fit\";\n              let height_policy = model.height != null ? \"fixed\" : \"fit\";\n              const { sizing_mode } = model;\n              if (sizing_mode != null) {\n                  if (sizing_mode == \"fixed\")\n                      width_policy = height_policy = \"fixed\";\n                  else if (sizing_mode == \"stretch_both\")\n                      width_policy = height_policy = \"max\";\n                  else if (sizing_mode == \"stretch_width\")\n                      width_policy = \"max\";\n                  else if (sizing_mode == \"stretch_height\")\n                      height_policy = \"max\";\n                  else {\n                      switch (sizing_mode) {\n                          case \"scale_width\":\n                              width_policy = \"max\";\n                              height_policy = \"min\";\n                              break;\n                          case \"scale_height\":\n                              width_policy = \"min\";\n                              height_policy = \"max\";\n                              break;\n                          case \"scale_both\":\n                              width_policy = \"max\";\n                              height_policy = \"max\";\n                              break;\n                          default:\n                              throw new Error(\"unreachable\");\n                      }\n                  }\n              }\n              if (width_policy == \"fixed\" && model.width)\n                  el.style.width = model.width + \"px\";\n              else if (width_policy == \"max\")\n                  el.style.width = \"100%\";\n              if (height_policy == \"fixed\" && model.height)\n                  el.style.height = model.height + \"px\";\n              else if (height_policy == \"max\")\n                  el.style.height = \"100%\";\n          }\n          exports.set_size = set_size;\n          /** Transform the data of the cds to 'records' format, i.e. a list of objects\n           *\n           *  For example transforms to [{\"x\": 1, \"y\": 2}, {\"x\": 3, \"y\": 4}]\n           *\n           *  Some js libraries like perspective-viewer uses this format to load data.\n           *\n           * @param cds\n           */\n          function transform_cds_to_records(cds) {\n              const data = [];\n              const columns = cds.columns();\n              const cdsLength = cds.get_length();\n              if (columns.length === 0 || cdsLength === null) {\n                  return [];\n              }\n              for (let i = 0; i < cdsLength; i++) {\n                  const item = {};\n                  for (const column of columns) {\n                      let array = cds.get_array(column);\n                      const shape = array[0].shape == null ? null : array[0].shape;\n                      if ((shape != null) && (shape.length > 1) && (typeof shape[0] == \"number\"))\n                          item[column] = array.slice(i * shape[1], i * shape[1] + shape[1]);\n                      else\n                          item[column] = array[i];\n                  }\n                  data.push(item);\n              }\n              return data;\n          }\n          exports.transform_cds_to_records = transform_cds_to_records;\n          /** Helper function used to incrementally build a html element string\n           *\n           *  For example toAttribute(\"columns\", ['x','y']) returns ' columns=\"['x','y']\"\n           *  For example toAttribute(\"columns\", null) returns \"\"\n           *\n           * @param attribute\n           * @param value\n           */\n          function toAttribute(attribute, value) {\n              if (value === null) {\n                  return \"\";\n              }\n              if (typeof value !== \"string\") {\n                  value = JSON.stringify(value);\n              }\n              return \" \" + attribute + \"='\" + value + \"'\";\n          }\n          exports.toAttribute = toAttribute;\n      },\n      \"5f262d0d3a\": /* bokeh_extensions\\icon.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const abstract_icon_1 = require(\"@bokehjs/models/widgets/abstract_icon\");\n          // See https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro\n          /**\n           * @param {String} HTML representing a single element\n           * @return {Element}\n           */\n          function htmlToElement(html) {\n              var template = document.createElement('template');\n              html = html.trim(); // Never return a text node of whitespace as the result\n              template.innerHTML = html;\n              return template.content.firstChild;\n          }\n          class IconView extends abstract_icon_1.AbstractIconView {\n              connect_signals() {\n                  super.connect_signals();\n                  this.connect(this.model.change, () => this.render());\n              }\n              render() {\n                  super.render();\n                  if (this.model.text === null && this.model.text === \"\") {\n                      return;\n                  }\n                  this.el.innerHTML = \"\";\n                  const iconEl = htmlToElement(this.model.text);\n                  this.el.appendChild(iconEl);\n                  this.el.style.display = \"inline\";\n                  this.el.style.height = `${this.model.size}em`;\n                  this.el.style.width = `${this.model.size}em`;\n                  iconEl.style.verticalAlign = \"middle\";\n                  iconEl.style.height = `${this.model.size}em`;\n                  iconEl.style.width = `${this.model.size}em`;\n                  iconEl.style.fill = this.model.fill_color;\n                  if (this.model.spin_duration > 0) {\n                      // See https://codepen.io/eveness/pen/BjLaoa\n                      const animationDuration = `${this.model.spin_duration}ms`;\n                      iconEl.style.setProperty(\"-webkit-animation-name\", \"spin\");\n                      iconEl.style.setProperty(\"-webkit-animation-duration\", animationDuration);\n                      iconEl.style.setProperty(\"-webkit-animation-iteration-count\", \"infinite\");\n                      iconEl.style.setProperty(\"-webkit-animation-timing-function\", \"linear\");\n                      iconEl.style.setProperty(\"-moz-animation-name\", \"spin\");\n                      iconEl.style.setProperty(\"-moz-animation-duration\", animationDuration);\n                      iconEl.style.setProperty(\"-moz-animation-iteration-count\", \"infinite\");\n                      iconEl.style.setProperty(\"-moz-animation-timing-function\", \"linear\");\n                      iconEl.style.setProperty(\"-ms-animation-name\", \"spin\");\n                      iconEl.style.setProperty(\"-ms-animation-duration\", animationDuration);\n                      iconEl.style.setProperty(\"-ms-animation-iteration-count\", \"infinite\");\n                      iconEl.style.setProperty(\"-ms-animation-timing-function\", \"linear\");\n                      iconEl.style.setProperty(\"animation-name\", \"spin\");\n                      iconEl.style.setProperty(\"animation-duration\", animationDuration);\n                      iconEl.style.setProperty(\"animation-iteration-count\", \"infinite\");\n                      iconEl.style.setProperty(\"animation-timing-function\", \"linear\");\n                  }\n                  iconEl.classList.add(\"icon\");\n                  if (this.model.label != null && this.model.label !== \"\") {\n                      const label = this.model.label.toLowerCase().replace(\" \", \"\");\n                      iconEl.classList.add(`icon-${label}`);\n                  }\n              }\n          }\n          exports.IconView = IconView;\n          IconView.__name__ = \"IconView\";\n          class Icon extends abstract_icon_1.AbstractIcon {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_Icon() {\n                  this.prototype.default_view = IconView;\n                  this.define(({ String, Number, Int }) => ({\n                      label: [String,],\n                      text: [String,],\n                      size: [Number, 1.0],\n                      fill_color: [String, \"currentColor\"],\n                      spin_duration: [Int, 0],\n                  }));\n              }\n          }\n          exports.Icon = Icon;\n          Icon.__name__ = \"Icon\";\n          Icon.__module__ = \"awesome_panel_extensions.bokeh_extensions.icon\";\n          Icon.init_Icon();\n      },\n      \"eae326731a\": /* bokeh_extensions\\web_component.js */ function _(require, module, exports, __esModule, __esExport) {\n          __esModule();\n          const tslib_1 = require(\"tslib\");\n          const dom_1 = require(\"@bokehjs/core/dom\");\n          const html_box_1 = require(\"@bokehjs/models/layouts/html_box\");\n          const inputs = tslib_1.__importStar(require(\"@bokehjs/styles/widgets/inputs.css\"));\n          function htmlDecode(input) {\n              var doc = new DOMParser().parseFromString(input, \"text/html\");\n              return doc.documentElement.textContent;\n          }\n          class WebComponentView extends html_box_1.HTMLBoxView {\n              connect_signals() {\n                  super.connect_signals();\n                  this.connect(this.model.properties.name.change, () => this.handleNameChange());\n                  this.connect(this.model.properties.innerHTML.change, () => this.render());\n                  this.connect(this.model.properties.attributesLastChange.change, () => this.handleAttributesLastChangeChange());\n                  this.connect(this.model.properties.propertiesLastChange.change, () => this.handlePropertiesLastChangeChange());\n                  this.connect(this.model.properties.columnDataSource.change, () => this.handleColumnDataSourceChange());\n              }\n              handleNameChange() {\n                  if (this.label_el)\n                      this.label_el.textContent = this.model.name;\n              }\n              render() {\n                  super.render();\n                  if (this.el.innerHTML !== this.model.innerHTML)\n                      this.createOrUpdateWebComponentElement();\n              }\n              after_layout() {\n                  if (\"after_layout\" in this.webComponentElement)\n                      this.webComponentElement.after_layout();\n              }\n              createOrUpdateWebComponentElement() {\n                  if (this.webComponentElement)\n                      this.webComponentElement.onchange = null;\n                  // @Philippfr: How do we make sure the component is automatically sized according to the\n                  // parameters of the WebComponent like width, height, sizing_mode etc?\n                  // Should we set height and width to 100% or similar?\n                  // For now I've set min_height as a part of .py __init__ for some of the Wired components?\n                  const title = this.model.name;\n                  if (this.model.componentType === \"inputgroup\" && title) {\n                      this.group_el = dom_1.div({ class: inputs.input_group }, this.label_el);\n                      this.group_el.innerHTML = htmlDecode(this.model.innerHTML);\n                      this.webComponentElement = this.group_el.firstElementChild;\n                      this.label_el = dom_1.label({ style: { display: title.length == 0 ? \"none\" : \"\" } }, title);\n                      this.group_el.insertBefore(this.label_el, this.webComponentElement);\n                      this.el.appendChild(this.group_el);\n                  }\n                  else {\n                      this.el.innerHTML = htmlDecode(this.model.innerHTML);\n                      this.webComponentElement = this.el.firstElementChild;\n                  }\n                  this.activate_scripts(this.webComponentElement.parentNode);\n                  // Initialize properties\n                  this.initPropertyValues();\n                  this.handlePropertiesLastChangeChange();\n                  this.handleColumnDataSourceChange();\n                  // Subscribe to events\n                  this.webComponentElement.onchange = (ev) => this.handlePropertiesChange(ev);\n                  this.addEventListeners();\n                  this.addAttributesMutationObserver();\n              }\n              addAttributesMutationObserver() {\n                  if (!this.model.attributesToWatch)\n                      return;\n                  let options = {\n                      childList: false,\n                      attributes: true,\n                      characterData: false,\n                      subtree: false,\n                      attributeFilter: Object.keys(this.model.attributesToWatch),\n                      attributeOldValue: false,\n                      characterDataOldValue: false\n                  };\n                  const handleAttributesChange = (_) => {\n                      let attributesLastChange = new Object();\n                      for (let attribute in this.model.attributesToWatch) {\n                          const value = this.webComponentElement.getAttribute(attribute);\n                          attributesLastChange[attribute] = value;\n                      }\n                      if (this.model.attributesLastChange !== attributesLastChange)\n                          this.model.attributesLastChange = attributesLastChange;\n                  };\n                  let observer = new MutationObserver(handleAttributesChange);\n                  observer.observe(this.webComponentElement, options);\n              }\n              addEventListeners() {\n                  this.eventsCount = {};\n                  for (let event in this.model.eventsToWatch) {\n                      this.eventsCount[event] = 0;\n                      this.webComponentElement.addEventListener(event, (ev) => this.eventHandler(ev), false);\n                  }\n              }\n              transform_cds_to_records(cds) {\n                  const data = [];\n                  const columns = cds.columns();\n                  const cdsLength = cds.get_length();\n                  if (columns.length === 0 || cdsLength === null) {\n                      return [];\n                  }\n                  for (let i = 0; i < cdsLength; i++) {\n                      const item = {};\n                      for (const column of columns) {\n                          let array = cds.get_array(column);\n                          const shape = array[0].shape == null ? null : array[0].shape;\n                          if ((shape != null) && (shape.length > 1) && (typeof shape[0] == \"number\"))\n                              item[column] = array.slice(i * shape[1], i * shape[1] + shape[1]);\n                          else\n                              item[column] = array[i];\n                      }\n                      data.push(item);\n                  }\n                  return data;\n              }\n              // https://stackoverflow.com/questions/5999998/check-if-a-variable-is-of-function-type\n              isFunction(functionToCheck) {\n                  if (functionToCheck) {\n                      const stringName = {}.toString.call(functionToCheck);\n                      return stringName === '[object Function]' || stringName === '[object AsyncFunction]';\n                  }\n                  else {\n                      return false;\n                  }\n              }\n              /**\n               * Handles changes to `this.model.columnDataSource`\n               * by\n               * updating the data source of `this.webComponentElement`\n               * using the function or property specifed in `this.model.columnDataSourceLoadFunction`\n               */\n              handleColumnDataSourceChange() {\n                  // @Philippfr: Right now we just reload all the data\n                  // For example Perspective has an `update` function to append data\n                  // Is this something we could/ should support?\n                  if (this.model.columnDataSource) {\n                      let data; // list\n                      const columnDataSourceOrient = this.model.columnDataSourceOrient;\n                      if (columnDataSourceOrient === \"records\")\n                          data = this.transform_cds_to_records(this.model.columnDataSource);\n                      else\n                          data = this.model.columnDataSource.data; // @ts-ignore\n                      if (this.model.columnDataSourceLoadFunction === null) {\n                          return;\n                      }\n                      const loadFunctionName = this.model.columnDataSourceLoadFunction.toString();\n                      const loadFunction = this.webComponentElement[loadFunctionName];\n                      if (this.isFunction(loadFunction))\n                          this.webComponentElement[loadFunctionName](data);\n                      else\n                          this.webComponentElement[loadFunctionName] = data;\n                  }\n                  // Todo: handle situation where this.model.columnDataSource is null\n              }\n              activate_scripts(el) {\n                  Array.from(el.querySelectorAll(\"script\")).forEach((oldScript) => {\n                      const newScript = document.createElement(\"script\");\n                      Array.from(oldScript.attributes)\n                          .forEach(attr => newScript.setAttribute(attr.name, attr.value));\n                      newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n                      if (oldScript.parentNode)\n                          oldScript.parentNode.replaceChild(newScript, oldScript);\n                  });\n              }\n              // See https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key\n              /**\n               * Example:\n               *\n               * `get_nested_property(element, \"textInput.value\")` returns `element.textInput.value`\n               *\n               * @param element\n               * @param property_\n               */\n              get_nested_property(element, property_) {\n                  property_ = property_.replace(/\\[(\\w+)\\]/g, '.$1'); // convert indexes to properties\n                  property_ = property_.replace(/^\\./, ''); // strip a leading dot\n                  let a = property_.split('.');\n                  for (let i = 0, n = a.length; i < n; ++i) {\n                      let k = a[i];\n                      if (k in element)\n                          element = element[k];\n                      else\n                          return \"\";\n                  }\n                  return element;\n              }\n              set_nested_property(element, property_, value) {\n                  // @Phillipfr: I need your help to understand and solve this\n                  // hack: Setting the value of the WIRED-SLIDER before its ready\n                  // will destroy the setter.\n                  // I don't yet understand this.\n                  // if ([\"WIRED-SLIDER\"].indexOf(element.tagName)>=0){\n                  //   const setter = element.__lookupSetter__(property_);\n                  //   if (!setter){return}\n                  // }\n                  const pList = property_.split('.');\n                  if (pList.length === 1)\n                      element[property_] = value;\n                  else {\n                      const len = pList.length;\n                      for (let i = 0; i < len - 1; i++) {\n                          const elem = pList[i];\n                          if (!element[elem])\n                              element[elem] = {};\n                          element = element[elem];\n                      }\n                      element[pList[len - 1]] = value;\n                  }\n              }\n              /**\n               * Handles events from `eventsToWatch` by\n               *\n               * - Incrementing the count of the event\n               * - Checking if any properties have changed\n               *\n               * @param ev The Event Fired\n               */\n              eventHandler(ev) {\n                  let event = ev.type;\n                  this.eventsCount[event] += 1;\n                  let eventsCountLastChanged = {};\n                  eventsCountLastChanged[event] = this.eventsCount[event];\n                  this.model.eventsCountLastChange = eventsCountLastChanged;\n                  this.checkIfPropertiesChanged();\n              }\n              /** Checks if any properties have changed. In case this is communicated to the server.\n               *\n               * For example the Wired `DropDown` does not run the `onchange` event handler when the selection changes.\n               * Insted the `select` event is fired. Thus we can subscribe to this event and manually check for property changes.\n               */\n              checkIfPropertiesChanged() {\n                  const propertiesChange = {};\n                  for (const property in this.model.propertiesToWatch) {\n                      const oldValue = this.propertyValues[property];\n                      const newValue = this.get_nested_property(this.webComponentElement, property);\n                      if (oldValue != newValue) {\n                          propertiesChange[property] = newValue;\n                          this.propertyValues[property] = newValue;\n                      }\n                  }\n                  if (Object.keys(propertiesChange).length)\n                      this.model.propertiesLastChange = propertiesChange;\n              }\n              /** Handles the `WebComponentElement` `(on)change` event\n               *\n               * Communicates any changed properties in `propertiesToWatch` to the server\n               * by updating `this.model.propertiesLastChange`.\n               * @param ev\n               */\n              handlePropertiesChange(ev) {\n                  const properties_change = new Object();\n                  for (const property in this.model.propertiesToWatch) {\n                      if (ev.detail && property in ev.detail) {\n                          properties_change[property] = ev.detail[property];\n                          this.propertyValues[property] = ev.detail[property];\n                      }\n                      else if (ev.target && property in ev.target) {\n                          properties_change[property] = ev.target[property];\n                          this.propertyValues[property] = ev.target[property];\n                      }\n                  }\n                  if (Object.keys(properties_change).length)\n                      this.model.propertiesLastChange = properties_change;\n              }\n              initPropertyValues() {\n                  this.propertyValues = new Object();\n                  if (!this.webComponentElement) {\n                      return;\n                  }\n                  for (let property in this.model.propertiesToWatch) {\n                      let old_value = this.propertyValues[property];\n                      let new_value = this.get_nested_property(this.webComponentElement, property);\n                      if (new_value !== old_value) {\n                          this.propertyValues[property] = new_value;\n                      }\n                  }\n              }\n              /**\n               * Handles changes to `this.model.attributesLastChange`\n               * by\n               * updating the attributes of `this.webComponentElement` accordingly\n               */\n              handleAttributesLastChangeChange() {\n                  if (!this.webComponentElement)\n                      return;\n                  let attributesLastChange = this.model.attributesLastChange;\n                  for (let attribute in this.model.attributesLastChange) {\n                      if (attribute in this.model.attributesToWatch) {\n                          let old_value = this.webComponentElement.getAttribute(attribute);\n                          let new_value = attributesLastChange[attribute];\n                          if (old_value !== new_value) {\n                              if (new_value === null)\n                                  this.webComponentElement.removeAttribute(attribute);\n                              else\n                                  this.webComponentElement.setAttribute(attribute, new_value);\n                          }\n                      }\n                  }\n              }\n              /**\n              * Handles changes to `this.model.propertiesLastChange`\n              * by\n              * updating the properties of `this.webComponentElement` accordingly\n              */\n              handlePropertiesLastChangeChange() {\n                  if (!this.webComponentElement) {\n                      return;\n                  }\n                  let propertiesLastChange = this.model.propertiesLastChange;\n                  for (let property in this.model.propertiesLastChange) {\n                      if (property in this.model.propertiesToWatch) {\n                          let value = propertiesLastChange[property];\n                          this.set_nested_property(this.webComponentElement, property, value);\n                      }\n                  }\n              }\n          }\n          exports.WebComponentView = WebComponentView;\n          WebComponentView.__name__ = \"WebComponentView\";\n          class WebComponent extends html_box_1.HTMLBox {\n              constructor(attrs) {\n                  super(attrs);\n              }\n              static init_WebComponent() {\n                  this.prototype.default_view = WebComponentView;\n                  this.define(({ Any, String }) => ({\n                      // @Philipfr: How do I make property types more specific\n                      componentType: [String, 'htmlbox'],\n                      innerHTML: [String, ''],\n                      attributesToWatch: [Any],\n                      attributesLastChange: [Any],\n                      propertiesToWatch: [Any],\n                      propertiesLastChange: [Any],\n                      eventsToWatch: [Any],\n                      eventsCountLastChange: [Any],\n                      columnDataSource: [Any],\n                      columnDataSourceOrient: [Any],\n                      columnDataSourceLoadFunction: [Any],\n                  }));\n              }\n          }\n          exports.WebComponent = WebComponent;\n          WebComponent.__name__ = \"WebComponent\";\n          WebComponent.__module__ = \"awesome_panel_extensions.bokeh_extensions.web_component\";\n          WebComponent.init_WebComponent();\n      },\n      }, \"ed583be1cf\", {\"index\":\"ed583be1cf\",\"bokeh_extensions/index\":\"ea89eb96d7\",\"bokeh_extensions/fast/fast_anchor\":\"3ab92f5894\",\"bokeh_extensions/fast/fast_button\":\"1d9a6373ec\",\"bokeh_extensions/fast/fast_checkbox_group\":\"b62557482c\",\"bokeh_extensions/fast/fast_switch_group\":\"b714a2453d\",\"bokeh_extensions/fast/fast_textarea_input\":\"e9b1cd48b7\",\"bokeh_extensions/fast/fast_text_input\":\"92a4b5b2b8\",\"bokeh_extensions/pivot_table\":\"eb2d75c5b0\",\"bokeh_extensions/shared\":\"88538263fa\",\"bokeh_extensions/icon\":\"5f262d0d3a\",\"bokeh_extensions/web_component\":\"eae326731a\"}, {});});\n      //# sourceMappingURL=awesome_panel_extensions.js.map\n\n      /* END awesome_panel_extensions.js */\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": [
    "import param\n",
    "import panel as pn\n",
    "from awesome_panel_extensions.frameworks.fast import FastTemplate, FastSwitch\n",
    "\n",
    "pn.config.sizing_mode = \"stretch_width\"\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Parameters\n",
    "\n",
    "Let's explore the parameters of the `FastSwitch`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {},
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.holoviews_exec.v0+json": "",
      "text/html": [
       "\n",
       "\n",
       "\n",
       "<!DOCTYPE html>\n",
       "<html lang=\"en\">\n",
       "\n",
       "<head>\n",
       "    \n",
       "    <meta charset=\"utf-8\">\n",
       "    <title>Panel App</title>\n",
       "    \n",
       "    \n",
       "        \n",
       "        \n",
       "        \n",
       "        \n",
       "        \n",
       "        \n",
       "    \n",
       "    \n",
       "        <style>\n",
       "            body {\n",
       "                margin: 0px;\n",
       "                padding: 0;\n",
       "                font-style: normal;\n",
       "                font-variant-ligatures: normal;\n",
       "                font-variant-caps: normal;\n",
       "                font-variant-numeric: normal;\n",
       "                font-variant-east-asian: normal;\n",
       "                font-weight: normal;\n",
       "                font-stretch: normal;\n",
       "                font-size: 16px;\n",
       "                line-height: normal;\n",
       "                font-family: aktiv-grotesk, \"Segoe UI\", Arial, Helvetica, sans-serif;\n",
       "            }\n",
       "            .bk-root .bk-fast-input {\n",
       "                display: inline-block;\n",
       "                width: 100%;\n",
       "                flex-grow: 1;\n",
       "                -webkit-flex-grow: 1;\n",
       "            }\n",
       "        </style>\n",
       "    \n",
       "    \n",
       "</head>\n",
       "\n",
       "\n",
       "<body>\n",
       "    <fast-design-system-provider use-defaults>\n",
       "        \n",
       "        \n",
       "            \n",
       "            \n",
       "            \n",
       "                <div class=\"bk-root\" id=\"01f44e6e-b551-4f9c-9db9-8d6a1d5296e7\" data-root-id=\"1012\"></div>\n",
       "            \n",
       "            \n",
       "        \n",
       "        \n",
       "        <script type=\"application/json\" id=\"1015\">\n",
       "          {\"5f21dfeb-4fc8-4e9e-8100-99ce0f38f27c\":{\"defs\":[{\"extends\":null,\"module\":null,\"name\":\"DataModel\",\"overrides\":[],\"properties\":[]}],\"roots\":{\"references\":[{\"attributes\":{\"active\":[0],\"checked_message\":\"Sure you are!\",\"height\":31,\"labels\":[\"I'm a fast-switch!\"],\"margin\":[5,10,5,10],\"sizing_mode\":\"fixed\",\"unchecked_message\":\"No. You are now a Panel FastSwitch &amp;#128521\"},\"id\":\"1013\",\"type\":\"awesome_panel_extensions.bokeh_extensions.fast.fast_switch_group.FastSwitchGroup\"},{\"attributes\":{\"client_comm_id\":\"91b7eda62e264cc8a832c536c9f45410\",\"comm_id\":\"7047aa62d2904ddcac43181e6c9aa41b\",\"name\":\"comm_manager\",\"plot_id\":\"1012\"},\"id\":\"1014\",\"type\":\"panel.models.comm_manager.CommManager\"},{\"attributes\":{\"children\":[{\"id\":\"1013\"}],\"margin\":[0,0,0,0],\"name\":\"0\",\"sizing_mode\":\"stretch_width\"},\"id\":\"1012\",\"type\":\"Row\"}],\"root_ids\":[\"1012\",\"1014\"]},\"title\":\"Panel Application\",\"version\":\"2.3.0\"}}\n",
       "        </script>\n",
       "        <script type=\"text/javascript\">\n",
       "          (function() {\n",
       "            var fn = function() {\n",
       "              Bokeh.safely(function() {\n",
       "                (function(root) {\n",
       "                  function embed_document(root) {\n",
       "                    \n",
       "                  var docs_json = document.getElementById('1015').textContent;\n",
       "                  var render_items = [{\"docid\":\"5f21dfeb-4fc8-4e9e-8100-99ce0f38f27c\",\"root_ids\":[\"1012\"],\"roots\":{\"1012\":\"01f44e6e-b551-4f9c-9db9-8d6a1d5296e7\"}}];\n",
       "                  root.Bokeh.embed.embed_items(docs_json, render_items);\n",
       "                \n",
       "                  }\n",
       "                  if (root.Bokeh !== undefined) {\n",
       "                    embed_document(root);\n",
       "                  } else {\n",
       "                    var attempts = 0;\n",
       "                    var timer = setInterval(function(root) {\n",
       "                      if (root.Bokeh !== undefined) {\n",
       "                        clearInterval(timer);\n",
       "                        embed_document(root);\n",
       "                      } else {\n",
       "                        attempts++;\n",
       "                        if (attempts > 100) {\n",
       "                          clearInterval(timer);\n",
       "                          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "                        }\n",
       "                      }\n",
       "                    }, 10, root)\n",
       "                  }\n",
       "                })(window);\n",
       "              });\n",
       "            };\n",
       "            if (document.readyState != \"loading\") fn();\n",
       "            else document.addEventListener(\"DOMContentLoaded\", fn);\n",
       "          })();\n",
       "        </script>\n",
       "        \n",
       "    </fast-design-system-provider>\n",
       "    <script type=\"module\" src=\"https://unpkg.com/@microsoft/fast-components\"></script>\n",
       "</body>\n",
       "\n",
       "</html>"
      ],
      "text/plain": [
       "FastTemplate\n",
       "    [0] Row(sizing_mode='stretch_width')\n",
       "        [0] FastSwitch(checked_message='Sure you are!', name=\"I'm a fast-switch!\", sizing_mode='fixed', unchecked_message='No. You are n..., value=True)"
      ]
     },
     "execution_count": 3,
     "metadata": {
      "application/vnd.holoviews_exec.v0+json": {
       "id": "1012"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "switch = FastSwitch(name=\"I'm a fast-switch!\", sizing_mode=\"fixed\", value=True, checked_message=\"Sure you are!\", unchecked_message=\"No. You are now a Panel FastSwitch &#128521\")\n",
    "\n",
    "app=pn.Row(\n",
    "    switch\n",
    ")\n",
    "template=FastTemplate(main=[app])\n",
    "template"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {},
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.holoviews_exec.v0+json": "",
      "text/html": [
       "<div id='1016'>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "  <div class=\"bk-root\" id=\"19a52066-97a5-4d1e-929e-f5c12638eb00\" data-root-id=\"1016\"></div>\n",
       "</div>\n",
       "<script type=\"application/javascript\">(function(root) {\n",
       "  function embed_document(root) {\n",
       "    var docs_json = {\"694985be-a16b-4116-8dc7-a7b9434efb51\":{\"defs\":[{\"extends\":null,\"module\":null,\"name\":\"DataModel\",\"overrides\":[],\"properties\":[]}],\"roots\":{\"references\":[{\"attributes\":{\"children\":[{\"id\":\"1018\"},{\"id\":\"1019\"},{\"id\":\"1020\"},{\"id\":\"1021\"},{\"id\":\"1022\"},{\"id\":\"1023\"},{\"id\":\"1024\"},{\"id\":\"1025\"},{\"id\":\"1026\"}],\"margin\":[5,5,5,5],\"name\":\"I'm a fast-switch!\",\"sizing_mode\":\"stretch_width\",\"width\":300},\"id\":\"1017\",\"type\":\"Column\"},{\"attributes\":{\"margin\":[5,10,5,10],\"options\":[[\"fixed\",\"fixed\"],[\"stretch_width\",\"stretch_width\"],[\"stretch_height\",\"stretch_height\"],[\"stretch_both\",\"stretch_both\"],[\"scale_width\",\"scale_width\"],[\"scale_height\",\"scale_height\"],[\"scale_both\",\"scale_both\"],[\"None\",\"None\"]],\"sizing_mode\":\"stretch_width\",\"title\":\"Sizing mode\",\"value\":\"fixed\"},\"id\":\"1021\",\"type\":\"Select\"},{\"attributes\":{\"active\":[0],\"labels\":[\"Value\"],\"margin\":[5,10,5,10],\"sizing_mode\":\"stretch_width\"},\"id\":\"1023\",\"type\":\"CheckboxGroup\"},{\"attributes\":{\"margin\":[5,10,5,10],\"max_length\":5000,\"sizing_mode\":\"stretch_width\",\"title\":\"Unchecked message\",\"value\":\"No. You are now a Panel FastSwitch &#128521\"},\"id\":\"1025\",\"type\":\"TextInput\"},{\"attributes\":{\"margin\":[5,10,5,10],\"max_length\":5000,\"sizing_mode\":\"stretch_width\",\"title\":\"Name\",\"value\":\"I'm a fast-switch!\"},\"id\":\"1018\",\"type\":\"TextInput\"},{\"attributes\":{\"low\":0,\"margin\":[5,10,5,10],\"mode\":\"int\",\"placeholder\":\"0\",\"sizing_mode\":\"stretch_width\",\"title\":\"Height\",\"value\":31,\"value_throttled\":31},\"id\":\"1020\",\"type\":\"Spinner\"},{\"attributes\":{\"children\":[{\"id\":\"1017\"}],\"css_classes\":[\"panel-widget-box\"],\"margin\":[5,5,5,5],\"name\":\"WidgetBox00148\",\"sizing_mode\":\"stretch_width\"},\"id\":\"1016\",\"type\":\"Column\"},{\"attributes\":{\"labels\":[\"Disabled\"],\"margin\":[5,10,5,10],\"sizing_mode\":\"stretch_width\"},\"id\":\"1022\",\"type\":\"CheckboxGroup\"},{\"attributes\":{\"margin\":[5,10,5,10],\"max_length\":5000,\"sizing_mode\":\"stretch_width\",\"title\":\"Checked message\",\"value\":\"Sure you are!\"},\"id\":\"1024\",\"type\":\"TextInput\"},{\"attributes\":{\"client_comm_id\":\"8cd2c6c34de44c8bb29d92ca66dbfcc0\",\"comm_id\":\"ff039f03710f42af9bd8bba18debdfea\",\"plot_id\":\"1016\"},\"id\":\"1027\",\"type\":\"panel.models.comm_manager.CommManager\"},{\"attributes\":{\"low\":0,\"margin\":[5,10,5,10],\"mode\":\"int\",\"placeholder\":\"0\",\"sizing_mode\":\"stretch_width\",\"title\":\"Width\",\"value\":0,\"value_throttled\":0},\"id\":\"1019\",\"type\":\"Spinner\"},{\"attributes\":{\"labels\":[\"Readonly\"],\"margin\":[5,10,5,10],\"sizing_mode\":\"stretch_width\"},\"id\":\"1026\",\"type\":\"CheckboxGroup\"}],\"root_ids\":[\"1016\",\"1027\"]},\"title\":\"Bokeh Application\",\"version\":\"2.3.0\"}};\n",
       "    var render_items = [{\"docid\":\"694985be-a16b-4116-8dc7-a7b9434efb51\",\"root_ids\":[\"1016\"],\"roots\":{\"1016\":\"19a52066-97a5-4d1e-929e-f5c12638eb00\"}}];\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 > 100) {\n",
       "          clearInterval(timer);\n",
       "          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "        }\n",
       "      }\n",
       "    }, 10, root)\n",
       "  }\n",
       "})(window);</script>"
      ],
      "text/plain": [
       "WidgetBox(sizing_mode='stretch_width')\n",
       "    [0] Param(FastSwitch, name=\"I'm a fast-switch!\", parameters=['name', 'value', ...], show_name=False, sizing_mode='stretch_width')"
      ]
     },
     "execution_count": 4,
     "metadata": {
      "application/vnd.holoviews_exec.v0+json": {
       "id": "1016"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "switch_parameters = [\"name\", \"value\", \"checked_message\", \"unchecked_message\", \"disabled\", \"readonly\", \"width\", \"height\", \"sizing_mode\"]\n",
    "settings_pane = pn.WidgetBox(pn.Param(switch, parameters=switch_parameters, show_name=False))\n",
    "settings_pane"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## pn.Param\n",
    "\n",
    "Let's verify that that `FastSwitch` can be used as a widget by `pn.Param`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {},
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.holoviews_exec.v0+json": "",
      "text/html": [
       "\n",
       "\n",
       "\n",
       "<!DOCTYPE html>\n",
       "<html lang=\"en\">\n",
       "\n",
       "<head>\n",
       "    \n",
       "    <meta charset=\"utf-8\">\n",
       "    <title>Panel App</title>\n",
       "    \n",
       "    \n",
       "        \n",
       "        \n",
       "        \n",
       "        \n",
       "        \n",
       "        \n",
       "    \n",
       "    \n",
       "        <style>\n",
       "            body {\n",
       "                margin: 0px;\n",
       "                padding: 0;\n",
       "                font-style: normal;\n",
       "                font-variant-ligatures: normal;\n",
       "                font-variant-caps: normal;\n",
       "                font-variant-numeric: normal;\n",
       "                font-variant-east-asian: normal;\n",
       "                font-weight: normal;\n",
       "                font-stretch: normal;\n",
       "                font-size: 16px;\n",
       "                line-height: normal;\n",
       "                font-family: aktiv-grotesk, \"Segoe UI\", Arial, Helvetica, sans-serif;\n",
       "            }\n",
       "            .bk-root .bk-fast-input {\n",
       "                display: inline-block;\n",
       "                width: 100%;\n",
       "                flex-grow: 1;\n",
       "                -webkit-flex-grow: 1;\n",
       "            }\n",
       "        </style>\n",
       "    \n",
       "    \n",
       "</head>\n",
       "\n",
       "\n",
       "<body>\n",
       "    <fast-design-system-provider use-defaults>\n",
       "        \n",
       "        \n",
       "            \n",
       "            \n",
       "            \n",
       "                <div class=\"bk-root\" id=\"4ec24789-4d09-4335-b611-42d362c20fef\" data-root-id=\"1029\"></div>\n",
       "            \n",
       "            \n",
       "        \n",
       "        \n",
       "        <script type=\"application/json\" id=\"1033\">\n",
       "          {\"6e18728a-ded6-490c-b20f-fa52f4617b00\":{\"defs\":[{\"extends\":null,\"module\":null,\"name\":\"DataModel\",\"overrides\":[],\"properties\":[]}],\"roots\":{\"references\":[{\"attributes\":{\"children\":[{\"id\":\"1030\"},{\"id\":\"1031\"}],\"margin\":[5,5,5,5],\"name\":\"0\",\"sizing_mode\":\"stretch_width\",\"width\":300},\"id\":\"1029\",\"type\":\"Column\"},{\"attributes\":{\"margin\":[5,10,5,10],\"name\":\"\",\"sizing_mode\":\"stretch_width\",\"text\":\"&lt;b&gt;Parameterized Switch App&lt;/b&gt;\"},\"id\":\"1030\",\"type\":\"Div\"},{\"attributes\":{\"active\":[0],\"checked_message\":\".. and very powerful &amp;#128170;\",\"height\":31,\"labels\":[\"Panel is awesome\"],\"margin\":[5,10,5,10],\"sizing_mode\":\"stretch_width\",\"unchecked_message\":\".. But it takes time to learn &amp;#x1f9e0; and discover the power &amp;#128170;! \"},\"id\":\"1031\",\"type\":\"awesome_panel_extensions.bokeh_extensions.fast.fast_switch_group.FastSwitchGroup\"},{\"attributes\":{\"client_comm_id\":\"d55811c924754211999535d75af41f92\",\"comm_id\":\"215d92375f574cd49a05c0f70ef6a2d8\",\"name\":\"comm_manager\",\"plot_id\":\"1029\"},\"id\":\"1032\",\"type\":\"panel.models.comm_manager.CommManager\"}],\"root_ids\":[\"1029\",\"1032\"]},\"title\":\"Panel Application\",\"version\":\"2.3.0\"}}\n",
       "        </script>\n",
       "        <script type=\"text/javascript\">\n",
       "          (function() {\n",
       "            var fn = function() {\n",
       "              Bokeh.safely(function() {\n",
       "                (function(root) {\n",
       "                  function embed_document(root) {\n",
       "                    \n",
       "                  var docs_json = document.getElementById('1033').textContent;\n",
       "                  var render_items = [{\"docid\":\"6e18728a-ded6-490c-b20f-fa52f4617b00\",\"root_ids\":[\"1029\"],\"roots\":{\"1029\":\"4ec24789-4d09-4335-b611-42d362c20fef\"}}];\n",
       "                  root.Bokeh.embed.embed_items(docs_json, render_items);\n",
       "                \n",
       "                  }\n",
       "                  if (root.Bokeh !== undefined) {\n",
       "                    embed_document(root);\n",
       "                  } else {\n",
       "                    var attempts = 0;\n",
       "                    var timer = setInterval(function(root) {\n",
       "                      if (root.Bokeh !== undefined) {\n",
       "                        clearInterval(timer);\n",
       "                        embed_document(root);\n",
       "                      } else {\n",
       "                        attempts++;\n",
       "                        if (attempts > 100) {\n",
       "                          clearInterval(timer);\n",
       "                          console.log(\"Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing\");\n",
       "                        }\n",
       "                      }\n",
       "                    }, 10, root)\n",
       "                  }\n",
       "                })(window);\n",
       "              });\n",
       "            };\n",
       "            if (document.readyState != \"loading\") fn();\n",
       "            else document.addEventListener(\"DOMContentLoaded\", fn);\n",
       "          })();\n",
       "        </script>\n",
       "        \n",
       "    </fast-design-system-provider>\n",
       "    <script type=\"module\" src=\"https://unpkg.com/@microsoft/fast-components\"></script>\n",
       "</body>\n",
       "\n",
       "</html>"
      ],
      "text/plain": [
       "FastTemplate\n",
       "    [0] Param(ParameterizedApp, parameters=['panel_is_awesome'], sizing_mode='stretch_width', widgets={'panel_is_awesome': {'typ...})"
      ]
     },
     "execution_count": 5,
     "metadata": {
      "application/vnd.holoviews_exec.v0+json": {
       "id": "1029"
      }
     },
     "output_type": "execute_result"
    }
   ],
   "source": [
    "WIDGETS = {\n",
    "    \"panel_is_awesome\": {\"type\": FastSwitch, \"checked_message\": \".. and very powerful &#128170;\", \"unchecked_message\": \".. But it takes time to learn &#x1f9e0; and discover the power &#128170;! \"}\n",
    "}\n",
    "\n",
    "class ParameterizedApp(param.Parameterized):\n",
    "    panel_is_awesome = param.Boolean(default=True, label=\"Panel is awesome\")\n",
    "    view = param.Parameter()\n",
    "    \n",
    "    \n",
    "    def __init__(self, **params):\n",
    "        super().__init__(**params)\n",
    "        \n",
    "        self.view = pn.Param(self, parameters=[\"panel_is_awesome\"], widgets=WIDGETS, name=\"Parameterized Switch App\")\n",
    "            \n",
    "parameterized_app = ParameterizedApp()\n",
    "paremeterized_template = FastTemplate(main=[parameterized_app.view])\n",
    "paremeterized_template"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Resources\n",
    "\n",
    "- [fast.design](https://fast.design/)\n",
    "- [fast-switch](https://explore.fast.design/components/fast-switch)\n",
    "\n",
    "## Known Issues\n",
    "\n",
    "- When `readonly` only the name/ label has the readonly hover icon. See [Fast Github Issue 3893](https://github.com/microsoft/fast/issues/3893).\n",
    "\n",
    "<table>\n",
    "    <tr>\n",
    "        <td><img src=\"https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-extensions/main/assets/images/frameworks/fast/fast-panel-logo.png\"></td>\n",
    "    </tr>\n",
    "</table>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}