Skip to content

Instantly share code, notes, and snippets.

@jlstevens

jlstevens/dashboard.html

Created February 26, 2025 15:55
Show Gist options
  • Save jlstevens/aab872dd3011fe82ad1c494360bb4011 to your computer and use it in GitHub Desktop.
Save jlstevens/aab872dd3011fe82ad1c494360bb4011 to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard test
Raw
dashboard.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Test dashboard</title>
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.holoviz.org/panel/1.5.2/dist/images/apple-touch-icon.png">
<link rel="icon" href="https://cdn.holoviz.org/panel/1.5.2/dist/images/favicon.ico" type="">
<meta name="name" content="Test dashboard">
<style>
html, body {
display: flow-root;
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css" />
<style type="text/css">
:host(.pn-loading):before, .pn-loading:before {
background-color: #c3c3c3;
mask-size: auto calc(min(50%, 400px));
-webkit-mask-size: auto calc(min(50%, 400px));
}
.py-error { display: none; }</style><script type="esms-options">{"shimMode": true}</script>
<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/reactiveesm/es-module-shims@^1.10.0/dist/es-module-shims.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.5.2/dist/panel.min.js"></script>
<script type="module" src="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/@microsoft/[email protected]/dist/fast-components.js"></script>
<script type="module" src="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/fast/js/fast_design.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script> <!-- Template CSS -->
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.5.2/dist/css/loadingspinner.css">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.5.2/dist/css/listpanel.css">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.5.2/dist/css/markdown.css">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.5.2/dist/css/loading.css?v=1.5.2">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/theme/default.css?v=1.5.2">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/fastbasetemplate/fast.css?v=1.5.2">
<link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/fastlisttemplate/fast_list_template.css?v=1.5.2">
<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);
--design-background-text-color: var(--header-color);
--design-background-color: var(--header-background);
background: var(--header-background);
color: var(--header-color);
}
#sidebar {
min-width: var(--sidebar-width);
max-width: var(--sidebar-width);
}
</style>
<style type="text/css">
:host(.pn-loading):before, .pn-loading:before {
background-color: #c3c3c3;
mask-size: auto calc(min(50%, 400px));
-webkit-mask-size: auto calc(min(50%, 400px));
}
</style>
<!-- Template JS -->
<script src="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/fastbasetemplate/fast_template.js"></script>
<script src="https://cdn.holoviz.org/panel/1.5.2/dist/bundled/@microsoft/[email protected]/dist/fast-components.js" type="module"></script>
<script src="https://cdn.holoviz.org/panel/1.5.2/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("0.23");
header_design.setAccentColor("#ffffff");
header_design.setNeutralColor("#0072B5");
});
</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="/" >&nbsp;Test dashboard</a>
<span class="title">-</span>
<a class="title" href="" >Test dashboard</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="a2fba49e-5f7f-4df4-9d17-5a2746ece5d3" data-root-id="p1014" 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 stretch_width">
<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="a1c0ab51-c547-4a8b-bb48-ecfecc60587a" data-root-id="p1015" style="display: contents;"></div>
</fast-card>
</div>
</div>
<fast-dialog id="pn-Modal" hidden>
<fast-button class="pn-modal-close" id="pn-closeModal">&times;</fast-button>
<div class="pn-modal-content">
</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="b39d3bb4-09ec-4548-bb82-89d703721676" data-root-id="p1009" style="display: contents;"></div>
<div id="c7218a16-4199-427e-afe2-3076fa301699" data-root-id="p1011" style="display: contents;"></div>
<div id="dacacb61-b53c-47fa-8065-08ac651e3d58" data-root-id="p1002" style="display: contents;"></div>
<div id="ca44f93d-6655-488a-b99b-95c148554d25" data-root-id="p1012" style="display: contents;"></div>
<script type="text/javascript">
const pyodideWorker = new Worker("./dashboard.js");
pyodideWorker.busy = false
pyodideWorker.queue = []
let patching = 0
function send_change(jsdoc, event) {
if ((event.setter_id != null && event.setter_id == 'py') || (patching > 0)) {
return
} else if (pyodideWorker.busy && event.model && event.attr) {
let events = []
for (const old_event of pyodideWorker.queue) {
if (!(old_event.model === event.model && old_event.attr === event.attr)) {
events.push(old_event)
}
}
events.push(event)
pyodideWorker.queue = events
return
}
const patch = jsdoc.create_json_patch([event])
pyodideWorker.busy = true
pyodideWorker.postMessage({type: 'patch', patch: patch})
}
pyodideWorker.onmessage = async (event) => {
const msg = event.data
const body = document.getElementsByTagName('body')[0]
const loading_msgs = document.getElementsByClassName('pn-loading-msg')
if (msg.type === 'idle') {
if (pyodideWorker.queue.length) {
const patch = pyodideWorker.jsdoc.create_json_patch(pyodideWorker.queue)
pyodideWorker.busy = true
pyodideWorker.queue = []
pyodideWorker.postMessage({type: 'patch', patch: patch})
} else {
pyodideWorker.busy = false
}
} else if (msg.type === 'status') {
let loading_msg
if (loading_msgs.length) {
loading_msg = loading_msgs[0]
} else if (body.classList.contains('pn-loading')) {
loading_msg = document.createElement('div')
loading_msg.classList.add('pn-loading-msg')
body.appendChild(loading_msg)
}
if (loading_msg != null) {
loading_msg.innerHTML = msg.msg
}
} else if (msg.type === 'render') {
const docs_json = JSON.parse(msg.docs_json)
const render_items = JSON.parse(msg.render_items)
const root_ids = JSON.parse(msg.root_ids)
// Remap roots in message to element IDs
const root_els = document.querySelectorAll('[data-root-id]')
const data_roots = []
for (const el of root_els) {
el.innerHTML = ''
data_roots.push([el.getAttribute('data-root-id'), el.id])
}
data_roots.sort((a, b) => a[0]<b[0] ? -1: 1)
const roots = {}
for (let i=0; i<data_roots.length; i++) {
roots[root_ids[i]] = data_roots[i][1]
}
render_items[0]['roots'] = roots
render_items[0]['root_ids'] = root_ids
// Clear pre-rendered contents
Bokeh.index.roots.map((v) => v.remove())
// Embed content
const [views] = await Bokeh.embed.embed_items(docs_json, render_items)
// Remove loading spinner and message
body.classList.remove("pn-loading", "arc")
for (const loading_msg of loading_msgs) {
loading_msg.remove()
}
// Setup bi-directional syncing
pyodideWorker.jsdoc = jsdoc = [...views.roots.values()][0].model.document
jsdoc.on_change(send_change.bind(null, jsdoc), false)
pyodideWorker.postMessage({'type': 'rendered'})
pyodideWorker.postMessage({'type': 'location', location: JSON.stringify(window.location)})
} else if (msg.type === 'patch') {
try {
patching += 1
pyodideWorker.jsdoc.apply_json_patch(msg.patch, msg.buffers)
} finally {
patching -= 1
}
}
};
</script>
<script type="application/json" id="p1076">
{"9c345381-d871-40fc-88cd-d9899e9498fc":{"version":"3.6.0","title":"Test dashboard","roots":[{"type":"object","name":"panel.models.location.Location","id":"p1002","attributes":{"name":"location","reload":false}},{"type":"object","name":"panel.models.markup.HTML","id":"p1009","attributes":{"name":"js_area","stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1006","attributes":{"url":"https://cdn.holoviz.org/panel/1.5.2/dist/css/loading.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1005","attributes":{"url":"https://cdn.holoviz.org/panel/1.5.2/dist/bundled/theme/fast.css"}}],"width":0,"height":0,"margin":0,"sizing_mode":"fixed","align":"start","disable_math":true}},{"type":"object","name":"panel.models.reactive_html.ReactiveHTML","id":"p1011","attributes":{"name":"actions","subscribed_events":{"type":"set","entries":["dom_event"]},"stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"id":"p1005"}],"margin":0,"align":"start","data":{"type":"object","name":"TemplateActions1","id":"p1010","attributes":{"name":"TemplateActions00864"}},"scripts":{"type":"map","entries":[["open_modal",["document.getElementById(&amp;#x27;pn-Modal&amp;#x27;).style.display = &amp;#x27;block&amp;#x27;\nwindow.dispatchEvent(new Event(&amp;#x27;resize&amp;#x27;));"]],["close_modal",["document.getElementById(&amp;#x27;pn-Modal&amp;#x27;).style.display = &amp;#x27;none&amp;#x27;"]]]}}},{"type":"object","name":"panel.models.browser.BrowserInfo","id":"p1012","attributes":{"name":"browser_info"}},{"type":"object","name":"panel.models.markup.HTML","id":"p1014","attributes":{"name":"busy_indicator","css_classes":["loader","light"],"stylesheets":[":host { --loading-spinner-size: 20px; }","\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"type":"object","name":"ImportedStyleSheet","id":"p1013","attributes":{"url":"https://cdn.holoviz.org/panel/1.5.2/dist/css/loadingspinner.css"}},{"id":"p1005"}],"min_width":20,"min_height":20,"margin":[5,10],"align":"start"}},{"type":"object","name":"panel.models.layout.Column","id":"p1015","attributes":{"name":"main-5962463120","tags":["main"],"stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"type":"object","name":"ImportedStyleSheet","id":"p1007","attributes":{"url":"https://cdn.holoviz.org/panel/1.5.2/dist/css/listpanel.css"}},{"type":"object","name":"ImportedStyleSheet","id":"p1004","attributes":{"url":"https://cdn.holoviz.org/panel/1.5.2/dist/bundled/theme/default.css"}},{"id":"p1005"}],"min_width":300,"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"panel.models.layout.Column","id":"p1016","attributes":{"name":"MyFile","stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"id":"p1007"},{"id":"p1004"},{"id":"p1005"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"FileInput","id":"p1017","attributes":{"stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"id":"p1004"},{"id":"p1005"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","accept":""}}]}},{"type":"object","name":"panel.models.layout.Column","id":"p1018","attributes":{"name":"Column00893","stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"id":"p1007"},{"id":"p1004"},{"id":"p1005"}],"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"panel.models.markup.HTML","id":"p1020","attributes":{"css_classes":["markdown"],"stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"type":"object","name":"ImportedStyleSheet","id":"p1019","attributes":{"url":"https://cdn.holoviz.org/panel/1.5.2/dist/css/markdown.css"}},{"id":"p1004"},{"id":"p1005"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&amp;lt;p&amp;gt;Please upload a telemetry file&amp;lt;/p&amp;gt;\n"}}]}},{"type":"object","name":"Figure","id":"p1027","attributes":{"width":300,"height":300,"margin":[5,10],"sizing_mode":"fixed","align":"start","x_range":{"type":"object","name":"Range1d","id":"p1021","attributes":{"tags":[[["x",null]],[]],"end":3.0,"reset_start":0.0,"reset_end":3.0}},"y_range":{"type":"object","name":"Range1d","id":"p1022","attributes":{"tags":[[["y",null]],{"type":"map","entries":[["invert_yaxis",false],["autorange",false]]}],"start":0.8,"end":3.2,"reset_start":0.8,"reset_end":3.2}},"x_scale":{"type":"object","name":"LinearScale","id":"p1037"},"y_scale":{"type":"object","name":"LinearScale","id":"p1038"},"title":{"type":"object","name":"Title","id":"p1030","attributes":{"text_color":"#2B2B2B","text_font":"Open Sans, sans-serif","text_font_size":"1.15em"}},"outline_line_color":"#888888","outline_line_alpha":0.5,"outline_line_width":1,"renderers":[{"type":"object","name":"GlyphRenderer","id":"p1069","attributes":{"data_source":{"type":"object","name":"ColumnDataSource","id":"p1060","attributes":{"selected":{"type":"object","name":"Selection","id":"p1061","attributes":{"indices":[],"line_indices":[]}},"selection_policy":{"type":"object","name":"UnionRenderers","id":"p1062"},"data":{"type":"map","entries":[["x",{"type":"ndarray","array":{"type":"bytes","data":"AAAAAAEAAAACAAAAAwAAAA=="},"shape":[4],"dtype":"int32","order":"little"}],["y",{"type":"ndarray","array":{"type":"bytes","data":"AQAAAAIAAAADAAAAAQAAAA=="},"shape":[4],"dtype":"int32","order":"little"}]]}}},"view":{"type":"object","name":"CDSView","id":"p1070","attributes":{"filter":{"type":"object","name":"AllIndices","id":"p1071"}}},"glyph":{"type":"object","name":"Line","id":"p1066","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#30a2da","line_width":2}},"selection_glyph":{"type":"object","name":"Line","id":"p1072","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#30a2da","line_width":2}},"nonselection_glyph":{"type":"object","name":"Line","id":"p1067","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#30a2da","line_alpha":0.1,"line_width":2}},"muted_glyph":{"type":"object","name":"Line","id":"p1068","attributes":{"tags":["apply_ranges"],"x":{"type":"field","field":"x"},"y":{"type":"field","field":"y"},"line_color":"#30a2da","line_alpha":0.2,"line_width":2}}}}],"toolbar":{"type":"object","name":"Toolbar","id":"p1036","attributes":{"tools":[{"type":"object","name":"WheelZoomTool","id":"p1026","attributes":{"tags":["hv_created"],"renderers":"auto","zoom_together":"none"}},{"type":"object","name":"SaveTool","id":"p1049"},{"type":"object","name":"PanTool","id":"p1050"},{"type":"object","name":"BoxZoomTool","id":"p1051","attributes":{"overlay":{"type":"object","name":"BoxAnnotation","id":"p1052","attributes":{"syncable":false,"line_color":"black","line_alpha":1.0,"line_width":2,"line_dash":[4,4],"fill_color":"lightgrey","fill_alpha":0.5,"level":"overlay","visible":false,"left":{"type":"number","value":"nan"},"right":{"type":"number","value":"nan"},"top":{"type":"number","value":"nan"},"bottom":{"type":"number","value":"nan"},"left_units":"canvas","right_units":"canvas","top_units":"canvas","bottom_units":"canvas","handles":{"type":"object","name":"BoxInteractionHandles","id":"p1058","attributes":{"all":{"type":"object","name":"AreaVisuals","id":"p1057","attributes":{"fill_color":"white","hover_fill_color":"lightgray"}}}}}}}},{"type":"object","name":"ResetTool","id":"p1059"}],"active_drag":{"id":"p1050"},"active_scroll":{"id":"p1026"}}},"left":[{"type":"object","name":"LinearAxis","id":"p1044","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1045","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1046"},"axis_label":"y","axis_label_standoff":10,"axis_label_text_color":"#2B2B2B","axis_label_text_font":"Open Sans, sans-serif","axis_label_text_font_size":"1.25em","axis_label_text_font_style":"normal","major_label_policy":{"type":"object","name":"AllLabels","id":"p1047"},"major_label_text_color":"#2B2B2B","major_label_text_font":"Open Sans, sans-serif","major_label_text_font_size":"1.025em","axis_line_color":"#2B2B2B","axis_line_alpha":0.1,"major_tick_line_color":"#2B2B2B","major_tick_line_alpha":0.5,"minor_tick_line_color":"#2B2B2B","minor_tick_line_alpha":0.25}}],"below":[{"type":"object","name":"LinearAxis","id":"p1039","attributes":{"ticker":{"type":"object","name":"BasicTicker","id":"p1040","attributes":{"mantissas":[1,2,5]}},"formatter":{"type":"object","name":"BasicTickFormatter","id":"p1041"},"axis_label":"x","axis_label_standoff":10,"axis_label_text_color":"#2B2B2B","axis_label_text_font":"Open Sans, sans-serif","axis_label_text_font_size":"1.25em","axis_label_text_font_style":"normal","major_label_policy":{"type":"object","name":"AllLabels","id":"p1042"},"major_label_text_color":"#2B2B2B","major_label_text_font":"Open Sans, sans-serif","major_label_text_font_size":"1.025em","axis_line_color":"#2B2B2B","axis_line_alpha":0.1,"major_tick_line_color":"#2B2B2B","major_tick_line_alpha":0.5,"minor_tick_line_color":"#2B2B2B","minor_tick_line_alpha":0.25}}],"center":[{"type":"object","name":"Grid","id":"p1043","attributes":{"axis":{"id":"p1039"},"grid_line_color":null,"grid_line_alpha":0.25}},{"type":"object","name":"Grid","id":"p1048","attributes":{"dimension":1,"axis":{"id":"p1044"},"grid_line_color":null,"grid_line_alpha":0.25}}],"background_fill_color":"#ffffff","border_fill_color":"#F7F7F7","border_fill_alpha":0,"min_border_top":10,"min_border_bottom":10,"min_border_left":10,"min_border_right":10,"output_backend":"webgl"}},{"type":"object","name":"panel.models.markup.HTML","id":"p1073","attributes":{"css_classes":["markdown"],"stylesheets":["\n:host(.pn-loading):before, .pn-loading:before {\n background-color: #c3c3c3;\n mask-size: auto calc(min(50%, 400px));\n -webkit-mask-size: auto calc(min(50%, 400px));\n}",{"id":"p1006"},{"id":"p1019"},{"id":"p1004"},{"id":"p1005"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&amp;lt;p&amp;gt;WASM test: Pandas version 2.2.2&amp;lt;/p&amp;gt;\n"}}]}}],"defs":[{"type":"model","name":"ReactiveHTML1"},{"type":"model","name":"FlexBox1","properties":[{"name":"align_content","kind":"Any","default":"flex-start"},{"name":"align_items","kind":"Any","default":"flex-start"},{"name":"flex_direction","kind":"Any","default":"row"},{"name":"flex_wrap","kind":"Any","default":"wrap"},{"name":"gap","kind":"Any","default":""},{"name":"justify_content","kind":"Any","default":"flex-start"}]},{"type":"model","name":"FloatPanel1","properties":[{"name":"config","kind":"Any","default":{"type":"map"}},{"name":"contained","kind":"Any","default":true},{"name":"position","kind":"Any","default":"right-top"},{"name":"offsetx","kind":"Any","default":null},{"name":"offsety","kind":"Any","default":null},{"name":"theme","kind":"Any","default":"primary"},{"name":"status","kind":"Any","default":"normalized"}]},{"type":"model","name":"GridStack1","properties":[{"name":"mode","kind":"Any","default":"warn"},{"name":"ncols","kind":"Any","default":null},{"name":"nrows","kind":"Any","default":null},{"name":"allow_resize","kind":"Any","default":true},{"name":"allow_drag","kind":"Any","default":true},{"name":"state","kind":"Any","default":[]}]},{"type":"model","name":"drag1","properties":[{"name":"slider_width","kind":"Any","default":5},{"name":"slider_color","kind":"Any","default":"black"},{"name":"value","kind":"Any","default":50}]},{"type":"model","name":"click1","properties":[{"name":"terminal_output","kind":"Any","default":""},{"name":"debug_name","kind":"Any","default":""},{"name":"clears","kind":"Any","default":0}]},{"type":"model","name":"FastWrapper1","properties":[{"name":"object","kind":"Any","default":null},{"name":"style","kind":"Any","default":null}]},{"type":"model","name":"NotificationAreaBase1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0}]},{"type":"model","name":"NotificationArea1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"notifications","kind":"Any","default":[]},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0},{"name":"types","kind":"Any","default":[{"type":"map","entries":[["type","warning"],["background","#ffc107"],["icon",{"type":"map","entries":[["className","fas fa-exclamation-triangle"],["tagName","i"],["color","white"]]}]]},{"type":"map","entries":[["type","info"],["background","#007bff"],["icon",{"type":"map","entries":[["className","fas fa-info-circle"],["tagName","i"],["color","white"]]}]]}]}]},{"type":"model","name":"Notification","properties":[{"name":"background","kind":"Any","default":null},{"name":"duration","kind":"Any","default":3000},{"name":"icon","kind":"Any","default":null},{"name":"message","kind":"Any","default":""},{"name":"notification_type","kind":"Any","default":null},{"name":"_destroyed","kind":"Any","default":false}]},{"type":"model","name":"TemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"BootstrapTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"TemplateEditor1","properties":[{"name":"layout","kind":"Any","default":[]}]},{"type":"model","name":"MaterialTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"ReactiveESM1"},{"type":"model","name":"JSComponent1"},{"type":"model","name":"ReactComponent1"},{"type":"model","name":"AnyWidgetComponent1"},{"type":"model","name":"request_value1","properties":[{"name":"fill","kind":"Any","default":"none"},{"name":"_synced","kind":"Any","default":null},{"name":"_request_sync","kind":"Any","default":0}]}]}}
</script>
<script type="text/javascript">
(function() {
const fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
const docs_json = document.getElementById('p1076').textContent;
const render_items = [{"docid":"9c345381-d871-40fc-88cd-d9899e9498fc","roots":{"p1002":"dacacb61-b53c-47fa-8065-08ac651e3d58","p1009":"b39d3bb4-09ec-4548-bb82-89d703721676","p1011":"c7218a16-4199-427e-afe2-3076fa301699","p1012":"ca44f93d-6655-488a-b99b-95c148554d25","p1014":"a2fba49e-5f7f-4df4-9d17-5a2746ece5d3","p1015":"a1c0ab51-c547-4a8b-bb48-ecfecc60587a"},"root_ids":["p1002","p1009","p1011","p1012","p1014","p1015"]}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
let attempts = 0;
const timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
clearInterval(timer);
embed_document(root);
} else {
attempts++;
if (attempts > 100) {
clearInterval(timer);
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
}
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn, {once: true});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment