panel
panel copied to clipboard
panel convert: Error raised while processing Document events: Error: reference ... isn't known
I'm on the main
branch of Panel (post 1.3.1) using Bokeh 3.3.0. I'm trying to create a PanelLite playground. I'm having a hard time getting an Panel app with a template to work. I'm trying to find the cause which is hard.
One problem I see is
Reproduce
app.py
import panel as pn
pn.extension()
button = pn.widgets.Button(name="Click Me")
component = pn.Row(button, pn.bind(lambda c: c, button.param.clicks))
pn.template.FastListTemplate(title="Panel Pyodide", main=[component]).servable()
panel convert app.py --skip-embed
app.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Panel Pyodide</title>
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.holoviz.org/panel/1.3.1/dist/images/apple-touch-icon.png">
<link rel="icon" href="https://cdn.holoviz.org/panel/1.3.1/dist/images/favicon.ico" type=""><meta name="name" content="Panel Pyodide"> <style>
html, body {
display: flow-root;
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<style type="text/css">
:host(.pn-loading),
.pn-loading {
overflow: hidden;
}
:host(.pn-loading):before,
.pn-loading:before {
position: absolute;
height: 100%;
width: 100%;
content: '';
z-index: 1000;
background-color: rgb(255, 255, 255, 0.5);
border-color: lightgray;
background-repeat: no-repeat;
background-position: center;
background-size: auto 50%;
border-width: 1px;
cursor: progress;
}
:host(.pn-loading) .pn-loading-msg,
.pn-loading .pn-loading-msg {
position: absolute;
top: 72%;
font-size: 2em;
color: black;
width: 100%;
text-align: center;
}
:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
background-size: auto calc(min(50%, 400px));
}
</style><script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.3.0.min.js"></script>
<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.1/dist/panel.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script><!-- Template CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/theme/default.css">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fastbasetemplate/fast.css">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fastlisttemplate/fast_list_template.css">
<style type="text/css">
:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
background-size: auto calc(min(50%, 400px));
}
</style>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>
:root {
--background-color: #ffffff;
--body-font: Open Sans, sans-serif;
--corner-radius: 3;
--header-background: #0072B5;
--header-color: #ffffff;
--sidebar-width: 330px;
}
body {
color: #2B2B2B;
background-color: var(--background-color);
font-family: var(--body-font);
}
#header a {
color: currentColor;
}
#header-design-provider {
--neutral-fill-hover: var(--header-background);
--neutral-fill-rest: var(--header-background);
--neutral-foreground-rest: var(--header-color);
background: var(--header-background);
color: var(--header-color);
}
#sidebar {
min-width: var(--sidebar-width);
max-width: var(--sidebar-width);
}
</style>
<!-- Template JS -->
<script src="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fastbasetemplate/fast_template.js"></script>
<script src="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/@microsoft/[email protected]/dist/fast-components.js" type="module"></script>
<script src="https://cdn.holoviz.org/panel/1.3.1/dist/bundled/fast/js/fast_design.js" type="module"></script>
<!-- Fast Script -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
const header_design = new window.fastDesignProvider("#header-design-provider");
const body_design = window.bodyDesign = new window.fastDesignProvider("#body-design-provider");
body_design.setLuminance(1.0);
body_design.setAccentColor("#0072B5")
body_design.setNeutralColor("#000000");
header_design.setLuminance(1.0);
header_design.setAccentColor("#ffffff");
header_design.setNeutralColor("#ffffff");
});
</script>
</head>
<body class="pn-loading pn-arc">
<fast-design-system-provider id="body-design-provider" use-defaults>
<div id="container">
<fast-design-system-provider id="header-design-provider">
<nav id="header" class="shadow" >
<div class="app-header">
<a class="title" href="" >Panel Pyodide</a>
</div>
<div id="header-items">
</div>
<div class="pn-toggle-theme">
<fast-switch id="theme-switch" style="float: right;" onChange="toggleLightDarkTheme('default')" checked>
<span slot="checked-message">
<svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
</span>
<span slot="unchecked-message">
<svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
</span>
</fast-switch>
<fast-tooltip anchor="theme-switch" position="bottom">
Toggle the Theme
</fast-tooltip>
</div>
<div class="pn-busy-container" id="busy-container">
<div id="f4f3e401-1bf8-48fb-b201-dc50a5f1e9db" data-root-id="p1016" style="display: contents;"></div>
</div>
<fast-tooltip anchor="busy-container" position="left">
Busy Indicator
</fast-tooltip>
</nav>
</fast-design-system-provider>
<div class="row" id="content">
<div class="main" id="main">
<div class="card-margin None">
<fast-card class="pn-wrapper">
<span class="fullscreen-button" onclick="toggleFullScreen(this)">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
<path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
</svg>
</span>
<div id="514ec927-ac5f-4b9a-882a-500946577119" data-root-id="p1017" style="display: contents;"></div>
</fast-card>
</div>
</div>
<fast-dialog id="pn-Modal" hidden>
<fast-button class="pn-modal-close" id="pn-closeModal">×</fast-button>
<div>
</div>
</fast-dialog>
</div>
</div>
</fast-design-system-provider>
<script type="text/javascript">
</script>
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").classList.remove("hidden");
document.getElementById("sidebar-button").onclick = closeNav;
}
function closeNav() {
document.getElementById("sidebar").classList.add("hidden");
document.getElementById("sidebar-button").onclick = openNav;
}
var modal = document.getElementById("pn-Modal");
var span = document.getElementById("pn-closeModal");
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<div id="d153cf48-42c8-4593-af30-46f015eaa98b" data-root-id="p1009" style="display: contents;"></div>
<div id="9c53e5c6-d191-4fa3-a050-860fc2c17531" data-root-id="p1012" style="display: contents;"></div>
<div id="391e2b57-3c83-4c07-a76d-aa94351bf9de" data-root-id="p1002" style="display: contents;"></div>
<div id="80f7218f-2939-4226-af56-9e086ee34819" data-root-id="p1013" style="display: contents;"></div>
<script type="text/javascript">
async function main() {
let pyodide = await loadPyodide();
await pyodide.loadPackage("micropip");
await pyodide.runPythonAsync(`
import micropip
await micropip.install(['https://cdn.holoviz.org/panel/wheels/bokeh-3.3.0-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.3.1/dist/wheels/panel-1.3.1-py3-none-any.whl', 'pyodide-http==0.2.1']);
`);
code = `
import asyncio
from panel.io.pyodide import init_doc, write_doc
init_doc()
import panel as pn
pn.extension()
button = pn.widgets.Button(name="Click Me")
component = pn.Row(button, pn.bind(lambda c: c, button.param.clicks))
pn.template.FastListTemplate(title="Panel Pyodide", main=[component]).servable()
await write_doc()`
await pyodide.runPythonAsync(code);
}
main();
</script>
</body>
</html>
python -m http.server
Open localhost:8000/app.html.
Error raised while processing Document events: Error: reference aa08158b-2f3a-4d99-9ddc-f65efce0de6d isn't known
Hmm, I can see the error but the app works fine for me.
This problem also makes conversion to Pyscript unusable at the moment because the error is printed in the page.
import panel as pn
pn.extension()
pn.template.FastListTemplate(
title="hello", main=[pn.panel("Hello")]
).servable()
panel convert script.py --to pyscript
panel==1.3.6
I can still reproduce the problem in Panel 1.4.0 with panel convert app.py --to pyodide-worker --out pyodide
.