8000 Interactive Bokeh and Panel examples · evolution99/pyscript@da71ee5 · GitHub
[go: up one dir, main page]
Skip to content

Commit da71ee5

Browse files
philippjfrphilippjfr
committed
Interactive Bokeh and Panel examples
1 parent 5a90c34 commit da71ee5

File tree

2 files changed

+193
-0
lines changed

2 files changed

+193
-0
lines changed

‎pyscriptjs/public/bokeh_interactive.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<html><head>
2+
<title>Bokeh Example</title>
3+
<meta charset="iso-8859-1">
4+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
5+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
6+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
7+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
8+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
9+
10+
<script type="text/javascript">
11+
Bokeh.set_log_level("info");
12+
</script>
13+
<link rel="stylesheet" href="build/pyscript.css" />
14+
15+
<script defer src="build/pyscript.js"></script>
16+
17+
</head>
18+
<body>
19+
<py-env>
20+
- bokeh
21+
- numpy
22+
</py-env>
23+
<h1>Bokeh Example</h1>
24+
<div id="myplot"></div>
25+
26+
<py-script>
27+
import asyncio
28+
import json
29+
import pyodide
30+
31+
from js import Bokeh, console, JSON
32+
33+
from bokeh import __version__
34+
from bokeh.document import Document
35+
from bokeh.embed.util import OutputDocumentFor, standalone_docs_json
36+
from bokeh.models import Slider, Div
37+
from bokeh.layouts import Row
38+
from bokeh.protocol.messages.patch_doc import process_document_events
39+
40+
# create a new plot with default tools, using figure
41+
p = Slider(start=0.1, end=10, value=1, step=.1, title="Amplitude")
42+
div = Div(text=f'Amplitude is: {p.value}')
43+
44+
def callback(attr, old, new):
45+
div.text = f'Amplitude is: {new}'
46+
47+
p.on_change('value', callback)
48+
49+
row = Row(children=[p, div])
50+
51+
print("about to embed")
52+
53+
def doc_json(model, target):
54+
with OutputDocumentFor([model]) as doc:
55+
doc.title = ""
56+
docs_json = standalone_docs_json([model])
57+
58+
doc_json = list(docs_json.values())[0]
59+
root_id = doc_json['roots']['root_ids'][0]
60+
61+
return doc, json.dumps(dict(
62+
target_id = target,
63+
root_id = root_id,
64+
doc = doc_json,
65+
version = __version__,
66+
))
67+
68+
def link_docs(pydoc, jsdoc):
69+
def jssync(event):
70+
if (event.setter_id is not None):
71+
return
72+
events = [event]
73+
json_patch = jsdoc.create_json_patch_string(pyodide.to_js(events))
74+
pydoc.apply_json_patch(json.loads(json_patch))
75+
76+
jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False))
77+
78+
def pysync(event):
79+
json_patch = process_document_events([event], use_buffers=False)[0]
80+
81+
jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js')
82+
83+
pydoc.on_change(pysync)
84+
85+
async def show(plot, target):
86+
pydoc, model_json = doc_json(plot, target)
87+
views = await Bokeh.embed.embed_item(JSON.parse(model_json))
88+
print("Done embedding...")
89+
jsdoc = views[0].model.document
90+
link_docs(pydoc, jsdoc)
91+
92+
await show(row, 'myplot')
93+
</py-script>
94+
95+
</body>
96+
</html>

‎pyscriptjs/public/panel.html

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<html><head>
2+
<title>Bokeh Example</title>
3+
<meta charset="iso-8859-1">
4+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
5+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
6+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
7+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
8+
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
9+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.0-rc.5/dist/panel.min.js"></script>
10+
11+
<script type="text/javascript">
12+
Bokeh.set_log_level("info");
13+
</script>
14+
<link rel="stylesheet" href="build/pyscript.css" />
15+
16+
<script defer src="build/pyscript.js"></script>
17+
18+
</head>
19+
<body>
20+
<py-env>
21+
- bokeh
22+
- numpy
23+
</py-env>
24+
<h1>Bokeh Example</h1>
25+
<div id="myplot"></div>
26+
27+
<py-script>
28+
import json
29+
import pyodide
30+
import asyncio
31+
import micropip
32+
33+
from js import Bokeh, console, JSON
34+
35+
import bokeh
36+
37+
from bokeh.document import Document
38+
from bokeh.embed.util import OutputDocumentFor, standalone_docs_json
39+
from bokeh.protocol.messages.patch_doc import process_document_events
40+
41+
await micropip.install(['panel==0.13.0rc5'])
42+
43+
import panel as pn
44+
45+
def callback(new):
46+
return f'Amplitude is: {new}'
47+
48+
slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
49+
50+
row = pn.Row(slider, pn.bind(callback, slider))
51+
52+
print("about to embed")
53+
54+
def doc_json(model, target):
55+
doc = model.server_doc()
56+
model = doc.roots[0]
57+
docs_json = standalone_docs_json([model])
58+
59+
doc_json = list(docs_json.values())[0]
60+
root_id = doc_json['roots']['root_ids'][0]
61+
62+
return doc, json.dumps(dict(
63+
target_id = target,
64+
root_id = root_id,
65+
doc = doc_json,
66+
version = bokeh.__version__,
67+
))
68+
69+
def link_docs(pydoc, jsdoc):
70+
def jssync(event):
71+
if (event.setter_id is not None):
72+
return
73+
events = [event]
74+
json_patch = jsdoc.create_json_patch_string(pyodide.to_js(events))
75+
pydoc.apply_json_patch(json.loads(json_patch))
76+
77+
jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False))
78+
79+
def pysync(event):
80+
json_patch = process_document_events([event], use_buffers=False)[0]
81+
82+
jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js')
83+
84+
pydoc.on_change(pysync)
85+
86+
async def show(plot, target):
87+
pydoc, model_json = doc_json(plot, target)
88+
views = await Bokeh.embed.embed_item(JSON.parse(model_json))
89+
print("Done embedding...")
90+
jsdoc = views[0].model.document
91+
link_docs(pydoc, jsdoc)
92+
93+
await show(row, 'myplot')
94+
</py-script>
95+
96+
</body>
97+
</html>

0 commit comments

Comments
 (0)
0