From 90012c2dcf6498ce6bebcc60db70f5a9633024a5 Mon Sep 17 00:00:00 2001 From: softwareentrepreneer Date: Thu, 2 Jan 2025 02:05:14 +0800 Subject: [PATCH] add layout and fix rendering using python script, not notebook env --- docs/layout.ipynb | 295 ++++++++++++++++++++++++++++++++ docs/myst.yml | 1 + pfund_plot/__init__.py | 2 +- pfund_plot/layout.py | 73 +++++++- pfund_plot/plots/candlestick.py | 5 +- pfund_plot/plots/dataframe.py | 23 ++- pfund_plot/renderer.py | 112 ++++++++---- pfund_plot/state.py | 45 +++++ pfund_plot/utils/utils.py | 8 +- poetry.lock | 21 +-- pyproject.toml | 4 +- 11 files changed, 520 insertions(+), 69 deletions(-) create mode 100644 docs/layout.ipynb create mode 100644 pfund_plot/state.py diff --git a/docs/layout.ipynb b/docs/layout.ipynb new file mode 100644 index 0000000..756a0af --- /dev/null +++ b/docs/layout.ipynb @@ -0,0 +1,295 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# Layout" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "`pfund-plot` allows you to quickly arrange multiple plots in a grid layout, which is convenient when you want to display multiple plots in one place." + ] + }, + { + "cell_type": "code", + "execution_count": 1, + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "application/javascript": "(function(root) {\n function now() {\n return new Date();\n }\n\n const force = true;\n const py_version = '3.6.2'.replace('rc', '-rc.').replace('.dev', '-dev.');\n const reloading = false;\n const Bokeh = root.Bokeh;\n\n // Set a timeout for this load but only if we are not already initializing\n if (typeof (root._bokeh_timeout) === \"undefined\" || (force || !root._bokeh_is_initializing)) {\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, js_exports, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n if (js_modules == null) js_modules = [];\n if (js_exports == null) js_exports = {};\n\n root._bokeh_onload_callbacks.push(callback);\n\n if (root._bokeh_is_loading > 0) {\n // Don't load bokeh if it is still initializing\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n } else if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {\n // There is nothing to load\n run_callbacks();\n return null;\n }\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 window._bokeh_on_load = on_load\n\n function on_error(e) {\n const src_el = e.srcElement\n console.error(\"failed to load \" + (src_el.href || src_el.src));\n }\n\n const skip = [];\n if (window.requirejs) {\n window.requirejs.config({'packages': {}, 'paths': {'plotly': 'https://cdn.plot.ly/plotly-2.31.1.min'}, 'shim': {}});\n require([\"plotly\"], function(Plotly) {\n window.Plotly = Plotly\n on_load()\n })\n root._bokeh_is_loading = css_urls.length + 1;\n } else {\n root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;\n }\n\n const existing_stylesheets = []\n const links = document.getElementsByTagName('link')\n for (let i = 0; i < links.length; i++) {\n const link = links[i]\n if (link.href != null) {\n existing_stylesheets.push(link.href)\n }\n }\n for (let i = 0; i < css_urls.length; i++) {\n const url = css_urls[i];\n const escaped = encodeURI(url)\n if (existing_stylesheets.indexOf(escaped) !== -1) {\n on_load()\n continue;\n }\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 } if (((window.Plotly !== undefined) && (!(window.Plotly instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/plotly-2.31.1.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } var existing_scripts = []\n const scripts = document.getElementsByTagName('script')\n for (let i = 0; i < scripts.length; i++) {\n var script = scripts[i]\n if (script.src != null) {\n existing_scripts.push(script.src)\n }\n }\n for (let i = 0; i < js_urls.length; i++) {\n const url = js_urls[i];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n const 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 (let i = 0; i < js_modules.length; i++) {\n const url = js_modules[i];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n var element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error;\n element.async = false;\n element.src = url;\n element.type = \"module\";\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n document.head.appendChild(element);\n }\n for (const name in js_exports) {\n const url = js_exports[name];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) >= 0 || root[name] != null) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n var element = document.createElement('script');\n element.onerror = on_error;\n element.async = false;\n element.type = \"module\";\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n element.textContent = `\n import ${name} from \"${url}\"\n window.${name} = ${name}\n window._bokeh_on_load()\n `\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 const js_urls = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/jquery/jquery.slim.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/plotly-2.31.1.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-3.6.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.6.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.6.2.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.6.2.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/panel.min.js\"];\n const js_modules = [];\n const js_exports = {};\n const css_urls = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/mapbox-gl-js/v3.0.1/mapbox-gl.css?v=1.5.5\"];\n const inline_js = [ function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\nfunction(Bokeh) {} // ensure no trailing comma for IE\n ];\n\n function run_inline_js() {\n if ((root.Bokeh !== undefined) || (force === true)) {\n for (let i = 0; i < inline_js.length; i++) {\n try {\n inline_js[i].call(root, root.Bokeh);\n } catch(e) {\n if (!reloading) {\n throw e;\n }\n }\n }\n // Cache old bokeh versions\n if (Bokeh != undefined && !reloading) {\n var NewBokeh = root.Bokeh;\n if (Bokeh.versions === undefined) {\n Bokeh.versions = new Map();\n }\n if (NewBokeh.version !== Bokeh.version) {\n Bokeh.versions.set(NewBokeh.version, NewBokeh)\n }\n root.Bokeh = Bokeh;\n }\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 root._bokeh_is_initializing = false\n }\n\n function load_or_wait() {\n // Implement a backoff loop that tries to ensure we do not load multiple\n // versions of Bokeh and its dependencies at the same time.\n // In recent versions we use the root._bokeh_is_initializing flag\n // to determine whether there is an ongoing attempt to initialize\n // bokeh, however for backward compatibility we also try to ensure\n // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version\n // before older versions are fully initialized.\n if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {\n // If the timeout and bokeh was not successfully loaded we reset\n // everything and try loading again\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_is_initializing = false;\n root._bokeh_onload_callbacks = undefined;\n root._bokeh_is_loading = 0\n console.log(\"Bokeh: BokehJS was loaded multiple times but one version failed to initialize.\");\n load_or_wait();\n } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === \"undefined\" && root._bokeh_onload_callbacks !== undefined)) {\n setTimeout(load_or_wait, 100);\n } else {\n root._bokeh_is_initializing = true\n root._bokeh_onload_callbacks = []\n const bokeh_loaded = root.Bokeh != null && (root.Bokeh.version === py_version || (root.Bokeh.versions !== undefined && root.Bokeh.versions.has(py_version)));\n if (!reloading && !bokeh_loaded) {\n if (root.Bokeh) {\n root.Bokeh = undefined;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n }\n load_libs(css_urls, js_urls, js_modules, js_exports, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n }\n // Give older versions of the autoload script a head-start to ensure\n // they initialize before we start loading newer version.\n setTimeout(load_or_wait, 100)\n}(window));", + "application/vnd.holoviews_load.v0+json": "" + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "application/javascript": "\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", + "application/vnd.holoviews_load.v0+json": "" + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "application/vnd.holoviews_exec.v0+json": "", + "text/html": [ + "
\n", + "
\n", + "
\n", + "" + ] + }, + "metadata": { + "application/vnd.holoviews_exec.v0+json": { + "id": "cda8e746-1e65-476e-80e6-84f036987c06" + } + }, + "output_type": "display_data" + }, + { + "data": { + "text/html": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "application/javascript": "(function(root) {\n function now() {\n return new Date();\n }\n\n const force = false;\n const py_version = '3.6.2'.replace('rc', '-rc.').replace('.dev', '-dev.');\n const reloading = true;\n const Bokeh = root.Bokeh;\n\n // Set a timeout for this load but only if we are not already initializing\n if (typeof (root._bokeh_timeout) === \"undefined\" || (force || !root._bokeh_is_initializing)) {\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, js_exports, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n if (js_modules == null) js_modules = [];\n if (js_exports == null) js_exports = {};\n\n root._bokeh_onload_callbacks.push(callback);\n\n if (root._bokeh_is_loading > 0) {\n // Don't load bokeh if it is still initializing\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n } else if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {\n // There is nothing to load\n run_callbacks();\n return null;\n }\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 window._bokeh_on_load = on_load\n\n function on_error(e) {\n const src_el = e.srcElement\n console.error(\"failed to load \" + (src_el.href || src_el.src));\n }\n\n const skip = [];\n if (window.requirejs) {\n window.requirejs.config({'packages': {}, 'paths': {'plotly': 'https://cdn.plot.ly/plotly-2.31.1.min', 'tabulator': 'https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.0/dist/js/tabulator.min', 'moment': 'https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min', 'perspective': 'https://cdn.jsdelivr.net/npm/@finos/perspective@2.9.0/dist/cdn/perspective', 'perspective-worker': 'https://cdn.jsdelivr.net/npm/@finos/perspective@2.9.0/dist/cdn/perspective.worker', 'perspective-viewer': 'https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@2.9.0/dist/cdn/perspective-viewer', 'perspective-viewer-datagrid': 'https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@2.9.0/dist/cdn/perspective-viewer-datagrid', 'perspective-viewer-d3fc': 'https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@2.9.0/dist/cdn/perspective-viewer-d3fc', 'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack-all'}, 'shim': {'gridstack': {'exports': 'GridStack'}}});\n require([\"plotly\"], function(Plotly) {\n window.Plotly = Plotly\n on_load()\n })\n require([\"tabulator\"], function(Tabulator) {\n window.Tabulator = Tabulator\n on_load()\n })\n require([\"moment\"], function(moment) {\n window.moment = moment\n on_load()\n })\n require([\"perspective\"], function(perspective) {\n window.perspective = perspective\n on_load()\n })\n require([\"perspective-worker\"], function() {\n on_load()\n })\n require([\"perspective-viewer\"], function(PerspectiveViewer) {\n window.PerspectiveViewer = PerspectiveViewer\n on_load()\n })\n require([\"perspective-viewer-datagrid\"], function(PerspectiveViewerDatagrid) {\n window.PerspectiveViewerDatagrid = PerspectiveViewerDatagrid\n on_load()\n })\n require([\"perspective-viewer-d3fc\"], function(PerspectiveViewerD3fc) {\n window.PerspectiveViewerD3fc = PerspectiveViewerD3fc\n on_load()\n })\n require([\"gridstack\"], function(GridStack) {\n window.GridStack = GridStack\n on_load()\n })\n root._bokeh_is_loading = css_urls.length + 9;\n } else {\n root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;\n }\n\n const existing_stylesheets = []\n const links = document.getElementsByTagName('link')\n for (let i = 0; i < links.length; i++) {\n const link = links[i]\n if (link.href != null) {\n existing_stylesheets.push(link.href)\n }\n }\n for (let i = 0; i < css_urls.length; i++) {\n const url = css_urls[i];\n const escaped = encodeURI(url)\n if (existing_stylesheets.indexOf(escaped) !== -1) {\n on_load()\n continue;\n }\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 } if (((window.Plotly !== undefined) && (!(window.Plotly instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/plotly-2.31.1.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.Tabulator !== undefined) && (!(window.Tabulator instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/js/tabulator.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.moment !== undefined) && (!(window.moment instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/luxon/build/global/luxon.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.customElements.get('perspective-viewer') !== undefined) && (!(window.customElements.get('perspective-viewer') instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective@2.9.0/dist/cdn/perspective.js', 'https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/cdn/perspective-viewer.js', 'https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-datagrid@2.9.0/dist/cdn/perspective-viewer-datagrid.js', 'https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-d3fc@2.9.0/dist/cdn/perspective-viewer-d3fc.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.GridStack !== undefined) && (!(window.GridStack instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } var existing_scripts = []\n const scripts = document.getElementsByTagName('script')\n for (let i = 0; i < scripts.length; i++) {\n var script = scripts[i]\n if (script.src != null) {\n existing_scripts.push(script.src)\n }\n }\n for (let i = 0; i < js_urls.length; i++) {\n const url = js_urls[i];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n const 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 (let i = 0; i < js_modules.length; i++) {\n const url = js_modules[i];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n var element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error;\n element.async = false;\n element.src = url;\n element.type = \"module\";\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n document.head.appendChild(element);\n }\n for (const name in js_exports) {\n const url = js_exports[name];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) >= 0 || root[name] != null) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n var element = document.createElement('script');\n element.onerror = on_error;\n element.async = false;\n element.type = \"module\";\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n element.textContent = `\n import ${name} from \"${url}\"\n window.${name} = ${name}\n window._bokeh_on_load()\n `\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 const js_urls = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/jquery/jquery.slim.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/plotly-2.31.1.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/js/tabulator.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/luxon/build/global/luxon.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js\"];\n const js_modules = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective@2.9.0/dist/cdn/perspective.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/cdn/perspective-viewer.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-datagrid@2.9.0/dist/cdn/perspective-viewer-datagrid.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-d3fc@2.9.0/dist/cdn/perspective-viewer-d3fc.js\"];\n const js_exports = {\"perspective\": \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective@2.9.0/dist/cdn/perspective.js\"};\n const css_urls = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/fonts.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/themes.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/variables.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/monokai.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/solarized.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/solarized-dark.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/vaporwave.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/dracula.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/pro.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/pro-dark.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/gruvbox.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/gruvbox-dark.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/mapbox-gl-js/v3.0.1/mapbox-gl.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/css/tabulator_simple.min.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack.min.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-extra.min.css?v=1.5.5\"];\n const inline_js = [ function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\nfunction(Bokeh) {} // ensure no trailing comma for IE\n ];\n\n function run_inline_js() {\n if ((root.Bokeh !== undefined) || (force === true)) {\n for (let i = 0; i < inline_js.length; i++) {\n try {\n inline_js[i].call(root, root.Bokeh);\n } catch(e) {\n if (!reloading) {\n throw e;\n }\n }\n }\n // Cache old bokeh versions\n if (Bokeh != undefined && !reloading) {\n var NewBokeh = root.Bokeh;\n if (Bokeh.versions === undefined) {\n Bokeh.versions = new Map();\n }\n if (NewBokeh.version !== Bokeh.version) {\n Bokeh.versions.set(NewBokeh.version, NewBokeh)\n }\n root.Bokeh = Bokeh;\n }\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 root._bokeh_is_initializing = false\n }\n\n function load_or_wait() {\n // Implement a backoff loop that tries to ensure we do not load multiple\n // versions of Bokeh and its dependencies at the same time.\n // In recent versions we use the root._bokeh_is_initializing flag\n // to determine whether there is an ongoing attempt to initialize\n // bokeh, however for backward compatibility we also try to ensure\n // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version\n // before older versions are fully initialized.\n if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {\n // If the timeout and bokeh was not successfully loaded we reset\n // everything and try loading again\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_is_initializing = false;\n root._bokeh_onload_callbacks = undefined;\n root._bokeh_is_loading = 0\n console.log(\"Bokeh: BokehJS was loaded multiple times but one version failed to initialize.\");\n load_or_wait();\n } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === \"undefined\" && root._bokeh_onload_callbacks !== undefined)) {\n setTimeout(load_or_wait, 100);\n } else {\n root._bokeh_is_initializing = true\n root._bokeh_onload_callbacks = []\n const bokeh_loaded = root.Bokeh != null && (root.Bokeh.version === py_version || (root.Bokeh.versions !== undefined && root.Bokeh.versions.has(py_version)));\n if (!reloading && !bokeh_loaded) {\n if (root.Bokeh) {\n root.Bokeh = undefined;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n }\n load_libs(css_urls, js_urls, js_modules, js_exports, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n }\n // Give older versions of the autoload script a head-start to ensure\n // they initialize before we start loading newer version.\n setTimeout(load_or_wait, 100)\n}(window));", + "application/vnd.holoviews_load.v0+json": "" + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "application/javascript": "\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", + "application/vnd.holoviews_load.v0+json": "" + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "text/html": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "application/javascript": "(function(root) {\n function now() {\n return new Date();\n }\n\n const force = false;\n const py_version = '3.6.2'.replace('rc', '-rc.').replace('.dev', '-dev.');\n const reloading = true;\n const Bokeh = root.Bokeh;\n\n // Set a timeout for this load but only if we are not already initializing\n if (typeof (root._bokeh_timeout) === \"undefined\" || (force || !root._bokeh_is_initializing)) {\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, js_exports, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n if (js_modules == null) js_modules = [];\n if (js_exports == null) js_exports = {};\n\n root._bokeh_onload_callbacks.push(callback);\n\n if (root._bokeh_is_loading > 0) {\n // Don't load bokeh if it is still initializing\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n } else if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {\n // There is nothing to load\n run_callbacks();\n return null;\n }\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 window._bokeh_on_load = on_load\n\n function on_error(e) {\n const src_el = e.srcElement\n console.error(\"failed to load \" + (src_el.href || src_el.src));\n }\n\n const skip = [];\n if (window.requirejs) {\n window.requirejs.config({'packages': {}, 'paths': {'plotly': 'https://cdn.plot.ly/plotly-2.31.1.min', 'tabulator': 'https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.0/dist/js/tabulator.min', 'moment': 'https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min', 'perspective': 'https://cdn.jsdelivr.net/npm/@finos/perspective@2.9.0/dist/cdn/perspective', 'perspective-worker': 'https://cdn.jsdelivr.net/npm/@finos/perspective@2.9.0/dist/cdn/perspective.worker', 'perspective-viewer': 'https://cdn.jsdelivr.net/npm/@finos/perspective-viewer@2.9.0/dist/cdn/perspective-viewer', 'perspective-viewer-datagrid': 'https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid@2.9.0/dist/cdn/perspective-viewer-datagrid', 'perspective-viewer-d3fc': 'https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc@2.9.0/dist/cdn/perspective-viewer-d3fc', 'gridstack': 'https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack-all'}, 'shim': {'gridstack': {'exports': 'GridStack'}}});\n require([\"plotly\"], function(Plotly) {\n window.Plotly = Plotly\n on_load()\n })\n require([\"tabulator\"], function(Tabulator) {\n window.Tabulator = Tabulator\n on_load()\n })\n require([\"moment\"], function(moment) {\n window.moment = moment\n on_load()\n })\n require([\"perspective\"], function(perspective) {\n window.perspective = perspective\n on_load()\n })\n require([\"perspective-worker\"], function() {\n on_load()\n })\n require([\"perspective-viewer\"], function(PerspectiveViewer) {\n window.PerspectiveViewer = PerspectiveViewer\n on_load()\n })\n require([\"perspective-viewer-datagrid\"], function(PerspectiveViewerDatagrid) {\n window.PerspectiveViewerDatagrid = PerspectiveViewerDatagrid\n on_load()\n })\n require([\"perspective-viewer-d3fc\"], function(PerspectiveViewerD3fc) {\n window.PerspectiveViewerD3fc = PerspectiveViewerD3fc\n on_load()\n })\n require([\"gridstack\"], function(GridStack) {\n window.GridStack = GridStack\n on_load()\n })\n root._bokeh_is_loading = css_urls.length + 9;\n } else {\n root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;\n }\n\n const existing_stylesheets = []\n const links = document.getElementsByTagName('link')\n for (let i = 0; i < links.length; i++) {\n const link = links[i]\n if (link.href != null) {\n existing_stylesheets.push(link.href)\n }\n }\n for (let i = 0; i < css_urls.length; i++) {\n const url = css_urls[i];\n const escaped = encodeURI(url)\n if (existing_stylesheets.indexOf(escaped) !== -1) {\n on_load()\n continue;\n }\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 } if (((window.Plotly !== undefined) && (!(window.Plotly instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/plotly-2.31.1.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.Tabulator !== undefined) && (!(window.Tabulator instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/js/tabulator.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.moment !== undefined) && (!(window.moment instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/luxon/build/global/luxon.min.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.customElements.get('perspective-viewer') !== undefined) && (!(window.customElements.get('perspective-viewer') instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective@2.9.0/dist/cdn/perspective.js', 'https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/cdn/perspective-viewer.js', 'https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-datagrid@2.9.0/dist/cdn/perspective-viewer-datagrid.js', 'https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-d3fc@2.9.0/dist/cdn/perspective-viewer-d3fc.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } if (((window.GridStack !== undefined) && (!(window.GridStack instanceof HTMLElement))) || window.requirejs) {\n var urls = ['https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js'];\n for (var i = 0; i < urls.length; i++) {\n skip.push(encodeURI(urls[i]))\n }\n } var existing_scripts = []\n const scripts = document.getElementsByTagName('script')\n for (let i = 0; i < scripts.length; i++) {\n var script = scripts[i]\n if (script.src != null) {\n existing_scripts.push(script.src)\n }\n }\n for (let i = 0; i < js_urls.length; i++) {\n const url = js_urls[i];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n const 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 (let i = 0; i < js_modules.length; i++) {\n const url = js_modules[i];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) !== -1 || existing_scripts.indexOf(escaped) !== -1) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n var element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error;\n element.async = false;\n element.src = url;\n element.type = \"module\";\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n document.head.appendChild(element);\n }\n for (const name in js_exports) {\n const url = js_exports[name];\n const escaped = encodeURI(url)\n if (skip.indexOf(escaped) >= 0 || root[name] != null) {\n if (!window.requirejs) {\n on_load();\n }\n continue;\n }\n var element = document.createElement('script');\n element.onerror = on_error;\n element.async = false;\n element.type = \"module\";\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n element.textContent = `\n import ${name} from \"${url}\"\n window.${name} = ${name}\n window._bokeh_on_load()\n `\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 const js_urls = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/jquery/jquery.slim.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/plotly-2.31.1.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/js/tabulator.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/luxon/build/global/luxon.min.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-all.js\"];\n const js_modules = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective@2.9.0/dist/cdn/perspective.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/cdn/perspective-viewer.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-datagrid@2.9.0/dist/cdn/perspective-viewer-datagrid.js\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer-d3fc@2.9.0/dist/cdn/perspective-viewer-d3fc.js\"];\n const js_exports = {\"perspective\": \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective@2.9.0/dist/cdn/perspective.js\"};\n const css_urls = [\"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/fonts.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/themes.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/variables.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/monokai.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/solarized.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/solarized-dark.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/vaporwave.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/dracula.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/pro.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/pro-dark.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/gruvbox.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/perspective/@finos/perspective-viewer@2.9.0/dist/css/gruvbox-dark.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/plotlyplot/mapbox-gl-js/v3.0.1/mapbox-gl.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/datatabulator/tabulator-tables@6.3.0/dist/css/tabulator_simple.min.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack.min.css?v=1.5.5\", \"https://cdn.holoviz.org/panel/1.5.5/dist/bundled/gridstack/gridstack@7.2.3/dist/gridstack-extra.min.css?v=1.5.5\"];\n const inline_js = [ function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\nfunction(Bokeh) {} // ensure no trailing comma for IE\n ];\n\n function run_inline_js() {\n if ((root.Bokeh !== undefined) || (force === true)) {\n for (let i = 0; i < inline_js.length; i++) {\n try {\n inline_js[i].call(root, root.Bokeh);\n } catch(e) {\n if (!reloading) {\n throw e;\n }\n }\n }\n // Cache old bokeh versions\n if (Bokeh != undefined && !reloading) {\n var NewBokeh = root.Bokeh;\n if (Bokeh.versions === undefined) {\n Bokeh.versions = new Map();\n }\n if (NewBokeh.version !== Bokeh.version) {\n Bokeh.versions.set(NewBokeh.version, NewBokeh)\n }\n root.Bokeh = Bokeh;\n }\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 root._bokeh_is_initializing = false\n }\n\n function load_or_wait() {\n // Implement a backoff loop that tries to ensure we do not load multiple\n // versions of Bokeh and its dependencies at the same time.\n // In recent versions we use the root._bokeh_is_initializing flag\n // to determine whether there is an ongoing attempt to initialize\n // bokeh, however for backward compatibility we also try to ensure\n // that we do not start loading a newer (Panel>=1.0 and Bokeh>3) version\n // before older versions are fully initialized.\n if (root._bokeh_is_initializing && Date.now() > root._bokeh_timeout) {\n // If the timeout and bokeh was not successfully loaded we reset\n // everything and try loading again\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_is_initializing = false;\n root._bokeh_onload_callbacks = undefined;\n root._bokeh_is_loading = 0\n console.log(\"Bokeh: BokehJS was loaded multiple times but one version failed to initialize.\");\n load_or_wait();\n } else if (root._bokeh_is_initializing || (typeof root._bokeh_is_initializing === \"undefined\" && root._bokeh_onload_callbacks !== undefined)) {\n setTimeout(load_or_wait, 100);\n } else {\n root._bokeh_is_initializing = true\n root._bokeh_onload_callbacks = []\n const bokeh_loaded = root.Bokeh != null && (root.Bokeh.version === py_version || (root.Bokeh.versions !== undefined && root.Bokeh.versions.has(py_version)));\n if (!reloading && !bokeh_loaded) {\n if (root.Bokeh) {\n root.Bokeh = undefined;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n }\n load_libs(css_urls, js_urls, js_modules, js_exports, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n }\n // Give older versions of the autoload script a head-start to ensure\n // they initialize before we start loading newer version.\n setTimeout(load_or_wait, 100)\n}(window));", + "application/vnd.holoviews_load.v0+json": "" + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "application/javascript": "\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", + "application/vnd.holoviews_load.v0+json": "" + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "import pandas as pd\n", + "import pfund_plot as plt\n", + "from bokeh.sampledata import stocks\n", + "\n", + "df = pd.DataFrame(stocks.AAPL)\n", + "\n", + "# This will create a layout with 3 plots using panel's GridStack.\n", + "with plt.layout(streaming=True, display_mode=\"browser\") as layout:\n", + " layout.add(\n", + " plt.ohlc(df),\n", + " plt.df(df, backend='tabulator'),\n", + " plt.df(df, backend='perspective')\n", + " )" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Customized layout" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "Since `pfund-plot` is built on top of panel, you can customize the layout in the same way you would with panel." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "import panel as pn\n", + "\n", + "fig1 = plt.df(df, backend='tabulator', streaming=True)\n", + "fig2 = plt.df(df, backend='perspective', streaming=True)\n", + "fig3 = plt.ohlc(df, streaming=True)\n", + "\n", + "# use pn.Row, Column, or GridStack to customize the layout, e.g.\n", + "fig = pn.Row(fig1, fig2, fig3) \n", + "pn.serve(fig, show=True)" + ] + } + ], + "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.11.11" + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} diff --git a/docs/myst.yml b/docs/myst.yml index 8780f4d..f3683d3 100644 --- a/docs/myst.yml +++ b/docs/myst.yml @@ -18,6 +18,7 @@ project: children: - file: getting-started/quickstart/candlestick.ipynb - file: getting-started/quickstart/dataframe.ipynb + - file: layout.ipynb - file: customization.ipynb - file: rendering.ipynb - file: cli_commands.md diff --git a/pfund_plot/__init__.py b/pfund_plot/__init__.py index b1cffb6..e9bc68d 100644 --- a/pfund_plot/__init__.py +++ b/pfund_plot/__init__.py @@ -13,7 +13,7 @@ candlestick_plot as ohlc, candlestick_plot as kline, ) -from pfund_plot.layout import layout_plot as layout +from pfund_plot.layout import layout hvplot.extension('bokeh', 'plotly') diff --git a/pfund_plot/layout.py b/pfund_plot/layout.py index 44bd1d3..083d8b6 100644 --- a/pfund_plot/layout.py +++ b/pfund_plot/layout.py @@ -1,17 +1,74 @@ from __future__ import annotations -from typing import TYPE_CHECKING +from typing import TYPE_CHECKING, Literal if TYPE_CHECKING: from pfund_plot.types.core import tFigure - from pfund_plot.types.literals import tDisplayMode -import panel as pn - +from contextlib import contextmanager + +from panel.layout.gridstack import GridStack + +from pfund_plot.state import state from pfund_plot.renderer import render -def layout_plot( +__all__ = ['layout'] + + +@contextmanager +def layout( + streaming: bool = False, + display_mode: Literal['browser', 'desktop'] = 'browser', + num_cols: int = 3, + allow_drag: bool = True, + # FIXME: plots can't be resized when using GridStack, not sure if it's a bottleneck or a bug + # allow_resize: bool = True, +): + assert display_mode.lower() in ['browser', 'desktop'], "display_mode must be 'browser' or 'desktop'" + + # Setup state + state.layout.in_layout = True + state.layout.streaming = streaming + state.layout.components = [] + + try: + yield state.layout + finally: + components = state.layout.components + return _layout_plot( + *components, + display_mode=display_mode, + num_cols=num_cols, + allow_drag=allow_drag, + # allow_resize=allow_resize, + ) + + +def _layout_plot( *figs: tFigure, - display_mode: tDisplayMode = 'notebook', + display_mode: Literal['browser', 'desktop'] = 'browser', + num_cols: int = 3, + allow_drag: bool = True, + # allow_resize: bool = False, ): - # use gridstack to layout the plots automatically - return render(combined_fig, display_mode) + if not state.layout.in_layout: + raise ValueError("layout_plot() must be called within a layout context manager") + + gstack = GridStack( + sizing_mode='stretch_both', + allow_drag=allow_drag, + allow_resize=False, + ) + + # standardize the figures + max_height = max(fig.height or 0 for fig in figs) + for fig in figs: + fig.param.update(height=max_height, width=None, sizing_mode='stretch_width') + + num_figs = len(figs) + # num_rows = math.ceil(num_figs / num_cols) + for i in range(num_figs): + gstack[i // num_cols, i % num_cols] = figs[i] + + periodic_callbacks = state.layout.periodic_callbacks + state.reset_layout() + return render(gstack, display_mode, periodic_callbacks=periodic_callbacks) diff --git a/pfund_plot/plots/candlestick.py b/pfund_plot/plots/candlestick.py index 56431d6..e2cee0d 100644 --- a/pfund_plot/plots/candlestick.py +++ b/pfund_plot/plots/candlestick.py @@ -17,6 +17,7 @@ from pfund_plot.utils.validate import validate_data_type from pfund_plot.utils.utils import get_sizing_mode from pfund_plot.renderer import render +from pfund_plot.state import state __all__ = ['candlestick_plot'] @@ -130,6 +131,8 @@ def candlestick_plot( display_mode = DisplayMode[display_mode.lower()] + if state.layout.in_layout: + streaming = streaming or state.layout.streaming data_type: DataType = validate_data_type(data, streaming, import_hvplot=True) if data_type == DataType.datafeed: # TODO: get streaming data in the format of dataframe, and then call _validate_df @@ -236,4 +239,4 @@ def _update_plot(): height=height, width=width, ) - return render(fig, display_mode, periodic_callback=periodic_callback) + return render(fig, display_mode, periodic_callbacks=[periodic_callback]) diff --git a/pfund_plot/plots/dataframe.py b/pfund_plot/plots/dataframe.py index cb486eb..d456cea 100644 --- a/pfund_plot/plots/dataframe.py +++ b/pfund_plot/plots/dataframe.py @@ -17,6 +17,7 @@ from pfund_plot.utils.validate import validate_data_type from pfund_plot.utils.utils import get_notebook_type, get_sizing_mode from pfund_plot.renderer import render +from pfund_plot.state import state __all__ = ['dataframe_plot'] @@ -71,6 +72,8 @@ def dataframe_plot( ''' display_mode, backend = DisplayMode[display_mode.lower()], DataFrameBackend[backend.lower()] + if state.layout.in_layout: + streaming = streaming or state.layout.streaming data_type: DataType = validate_data_type(data, streaming, import_hvplot=False) if data_type == DataType.datafeed: # TODO: get streaming data in the format of dataframe, and then call _validate_df @@ -79,9 +82,10 @@ def dataframe_plot( else: df = data df = convert_to_pandas_df(df) - use_iframe_in_notebook = (backend == DataFrameBackend.perspective) - iframe_style = None + + use_iframe_in_notebook, iframe_style = False, None if display_mode == DisplayMode.notebook: + use_iframe_in_notebook = (backend == DataFrameBackend.perspective) height = height or DEFAULT_HEIGHT_FOR_NOTEBOOK if 'sizing_mode' not in kwargs: kwargs['sizing_mode'] = get_sizing_mode(height, width) @@ -96,15 +100,17 @@ def dataframe_plot( ) max_streaming_data = SUGGESTED_MIN_STREAMING_DATA_FOR_TABULATOR notebook_type: NotebookType = get_notebook_type() + # FIXME: this is a workaround for a bug in panel Tabulator, see if panel will fix it, or create a github issue + if display_mode == DisplayMode.notebook and notebook_type in [NotebookType.jupyter, NotebookType.marimo]: + pagination = 'remote' + else: + pagination = 'local' table: Widget = pn.widgets.Tabulator( df, page_size=page_size if not max_streaming_data else max(page_size, max_streaming_data), header_filters=header_filters, disabled=True, # not allow user to edit the table - # HACK: jupyter notebook is running in a server, use remote pagination to work around the update error when streaming=True - # the error is: "ValueError: Must have equal len keys and value when setting with an iterable" - # FIXME: this is a workaround for a bug in panel Tabulator, see if panel will fix it, or create a github issue - pagination='local' if notebook_type == NotebookType.vscode else 'remote', + pagination=pagination, formatters={ # NOTE: %f somehow doesn't work for microseconds, and %N (nanoseconds) only preserves up to milliseconds precision # so just use %3N to display milliseconds precision @@ -148,7 +154,8 @@ def _update_table(): # TEMP: fake streaming data # NOTE: must be pandas dataframe, pandas series, or dict new_data = df.tail(1) - new_data['symbol'] = f'AAPL_{n}' + if 'symbol' in new_data.columns: + new_data['symbol'] = f'AAPL_{n}' n += 1 if backend == DataFrameBackend.tabulator: @@ -160,7 +167,7 @@ def _update_table(): return render( table, display_mode, - periodic_callback=periodic_callback, + periodic_callbacks=[periodic_callback], use_iframe_in_notebook=use_iframe_in_notebook, iframe_style=iframe_style, ) diff --git a/pfund_plot/renderer.py b/pfund_plot/renderer.py index 533ea84..c1c40d1 100644 --- a/pfund_plot/renderer.py +++ b/pfund_plot/renderer.py @@ -5,7 +5,6 @@ from panel.widgets import Widget from panel.pane import Pane from panel.io.threads import StoppableThread - from panel.io.state import PeriodicCallback from pfund_plot.types.core import tOutput import time @@ -13,10 +12,12 @@ from multiprocessing import Process, Event import panel as pn +from panel.io.callbacks import PeriodicCallback from pfund import print_warning from pfund_plot.const.enums import DisplayMode, NotebookType from pfund_plot.utils.utils import get_notebook_type, get_free_port +from pfund_plot.state import state def run_webview(title: str, port: int, window_ready: Event): @@ -31,32 +32,41 @@ def run_webview(title: str, port: int, window_ready: Event): wv.start() -def _handle_periodic_callback(periodic_callback: PeriodicCallback | None): +def _handle_periodic_callback(periodic_callback: PeriodicCallback | None, notebook_type: NotebookType | None): # the main idea is don't use the thread created by periodic_callback.start(), instead create a marimo thread to stream updates def _handle_marimo_streaming(periodic_callback: PeriodicCallback): import marimo as mo get_streaming_active, set_streaming_active = mo.state(True) def stream_updates(): + time.sleep(1) # HACK: wait some time to avoid data loss while get_streaming_active(): # Use the getter function periodic_callback.callback() time.sleep(periodic_callback.period / 1000) stream_thread = mo.Thread(target=stream_updates, daemon=True) stream_thread.start() - - notebook_type: NotebookType = get_notebook_type() + if periodic_callback: - if notebook_type == NotebookType.marimo: - _handle_marimo_streaming(periodic_callback) + # postpone the periodic callback until the layout plot is called; otherwise there will be data loss + if state.layout.in_layout: + state.layout.add_periodic_callback(periodic_callback) else: - periodic_callback.start() + if notebook_type == NotebookType.marimo: + _handle_marimo_streaming(periodic_callback) + else: + periodic_callback.start() + + +def run_callbacks(periodic_callbacks: list[PeriodicCallback], notebook_type: NotebookType | None): + for callback in periodic_callbacks: + _handle_periodic_callback(callback, notebook_type) def render( fig: Panel | Pane | Widget, display_mode: Literal["notebook", "browser", "desktop"] | DisplayMode, - periodic_callback: PeriodicCallback | None = None, + periodic_callbacks: list[PeriodicCallback] | PeriodicCallback | None = None, use_iframe_in_notebook: bool = False, iframe_style: str | None = None, ) -> tOutput: @@ -75,16 +85,25 @@ def render( iframe_style: the style of the iframe when use_iframe_in_notebook is True. ''' if isinstance(display_mode, str): - display_mode = DisplayMode[display_mode.lower()] - + display_mode = DisplayMode[display_mode.lower()] + + if isinstance(periodic_callbacks, PeriodicCallback): + periodic_callbacks = [periodic_callbacks] + + notebook_type: NotebookType | None = get_notebook_type() + # NOTE: handling differs between notebook environment and python script + is_notebook_env = (notebook_type is not None) + if display_mode == DisplayMode.notebook: if not use_iframe_in_notebook: - panel_fig: Panel | Widget = fig + panel_fig: Panel | Pane | Widget = fig + run_callbacks(periodic_callbacks, notebook_type) else: if iframe_style is None: print_warning("No iframe_style is provided for iframe in notebook") port = get_free_port() - server: StoppableThread = pn.serve(fig, show=False, threaded=True, port=port) + if notebook_type == NotebookType.jupyter: + print_warning(f"If the plot can't be displayed, try to use 'from IPython.display import IFrame' and 'IFrame(src='http://localhost:{port}', width=..., height=...)'") panel_fig: Pane = pn.pane.HTML( f'''