From da71ee5025139fd92cfe02cf2eda72981a1c6893 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Fri, 8 Apr 2022 23:56:43 +0200 Subject: [PATCH 1/4] Interactive Bokeh and Panel examples --- pyscriptjs/public/bokeh_interactive.html | 96 +++++++++++++++++++++++ pyscriptjs/public/panel.html | 97 ++++++++++++++++++++++++ 2 files changed, 193 insertions(+) create mode 100644 pyscriptjs/public/bokeh_interactive.html create mode 100644 pyscriptjs/public/panel.html diff --git a/pyscriptjs/public/bokeh_interactive.html b/pyscriptjs/public/bokeh_interactive.html new file mode 100644 index 0000000..822eaea --- /dev/null +++ b/pyscriptjs/public/bokeh_interactive.html @@ -0,0 +1,96 @@ + + Bokeh Example + + + + + + + + + + + + + + + +- bokeh +- numpy + +

Bokeh Example

+
+ + +import asyncio +import json +import pyodide + +from js import Bokeh, console, JSON + +from bokeh import __version__ +from bokeh.document import Document +from bokeh.embed.util import OutputDocumentFor, standalone_docs_json +from bokeh.models import Slider, Div +from bokeh.layouts import Row +from bokeh.protocol.messages.patch_doc import process_document_events + +# create a new plot with default tools, using figure +p = Slider(start=0.1, end=10, value=1, step=.1, title="Amplitude") +div = Div(text=f'Amplitude is: {p.value}') + +def callback(attr, old, new): + div.text = f'Amplitude is: {new}' + +p.on_change('value', callback) + +row = Row(children=[p, div]) + +print("about to embed") + +def doc_json(model, target): + with OutputDocumentFor([model]) as doc: + doc.title = "" + docs_json = standalone_docs_json([model]) + + doc_json = list(docs_json.values())[0] + root_id = doc_json['roots']['root_ids'][0] + + return doc, json.dumps(dict( + target_id = target, + root_id = root_id, + doc = doc_json, + version = __version__, + )) + +def link_docs(pydoc, jsdoc): + def jssync(event): + if (event.setter_id is not None): + return + events = [event] + json_patch = jsdoc.create_json_patch_string(pyodide.to_js(events)) + pydoc.apply_json_patch(json.loads(json_patch)) + + jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False)) + + def pysync(event): + json_patch = process_document_events([event], use_buffers=False)[0] + + jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js') + + pydoc.on_change(pysync) + +async def show(plot, target): + pydoc, model_json = doc_json(plot, target) + views = await Bokeh.embed.embed_item(JSON.parse(model_json)) + print("Done embedding...") + jsdoc = views[0].model.document + link_docs(pydoc, jsdoc) + +await show(row, 'myplot') + + + + diff --git a/pyscriptjs/public/panel.html b/pyscriptjs/public/panel.html new file mode 100644 index 0000000..25cc314 --- /dev/null +++ b/pyscriptjs/public/panel.html @@ -0,0 +1,97 @@ + + Bokeh Example + + + + + + + + + + + + + + + + +- bokeh +- numpy + +

Bokeh Example

+
+ + +import json +import pyodide +import asyncio +import micropip + +from js import Bokeh, console, JSON + +import bokeh + +from bokeh.document import Document +from bokeh.embed.util import OutputDocumentFor, standalone_docs_json +from bokeh.protocol.messages.patch_doc import process_document_events + +await micropip.install(['panel==0.13.0rc5']) + +import panel as pn + +def callback(new): + return f'Amplitude is: {new}' + +slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude') + +row = pn.Row(slider, pn.bind(callback, slider)) + +print("about to embed") + +def doc_json(model, target): + doc = model.server_doc() + model = doc.roots[0] + docs_json = standalone_docs_json([model]) + + doc_json = list(docs_json.values())[0] + root_id = doc_json['roots']['root_ids'][0] + + return doc, json.dumps(dict( + target_id = target, + root_id = root_id, + doc = doc_json, + version = bokeh.__version__, + )) + +def link_docs(pydoc, jsdoc): + def jssync(event): + if (event.setter_id is not None): + return + events = [event] + json_patch = jsdoc.create_json_patch_string(pyodide.to_js(events)) + pydoc.apply_json_patch(json.loads(json_patch)) + + jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False)) + + def pysync(event): + json_patch = process_document_events([event], use_buffers=False)[0] + + jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js') + + pydoc.on_change(pysync) + +async def show(plot, target): + pydoc, model_json = doc_json(plot, target) + views = await Bokeh.embed.embed_item(JSON.parse(model_json)) + print("Done embedding...") + jsdoc = views[0].model.document + link_docs(pydoc, jsdoc) + +await show(row, 'myplot') + + + + From a597f5cef28e0f852a1a7fbbe4724951a0a7fc31 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Fri, 8 Apr 2022 23:59:29 +0200 Subject: [PATCH 2/4] Clean up panel example --- pyscriptjs/public/panel.html | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/pyscriptjs/public/panel.html b/pyscriptjs/public/panel.html index 25cc314..2bb1aae 100644 --- a/pyscriptjs/public/panel.html +++ b/pyscriptjs/public/panel.html @@ -1,5 +1,5 @@ - Bokeh Example + Panel Example @@ -21,19 +21,17 @@ - bokeh - numpy -

Bokeh Example

+

Panel Example

- - -import json -import pyodide + import asyncio +import json import micropip +import pyodide from js import Bokeh, console, JSON -import bokeh - +from bokeh import __version__ from bokeh.document import Document from bokeh.embed.util import OutputDocumentFor, standalone_docs_json from bokeh.protocol.messages.patch_doc import process_document_events @@ -63,7 +61,7 @@ def doc_json(model, target): target_id = target, root_id = root_id, doc = doc_json, - version = bokeh.__version__, + version = __version__, )) def link_docs(pydoc, jsdoc): @@ -91,7 +89,6 @@ async def show(plot, target): link_docs(pydoc, jsdoc) await show(row, 'myplot') - - + From 5f2566898481ca7ac0c9fb931710997fd2f5b4be Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Sat, 9 Apr 2022 01:14:38 +0200 Subject: [PATCH 3/4] Simplify panel example --- pyscriptjs/public/panel.html | 60 ++++-------------------------------- 1 file changed, 6 insertions(+), 54 deletions(-) diff --git a/pyscriptjs/public/panel.html b/pyscriptjs/public/panel.html index 2bb1aae..f81075d 100644 --- a/pyscriptjs/public/panel.html +++ b/pyscriptjs/public/panel.html @@ -23,72 +23,24 @@

Panel Example

- + import asyncio -import json import micropip import pyodide -from js import Bokeh, console, JSON - -from bokeh import __version__ -from bokeh.document import Document -from bokeh.embed.util import OutputDocumentFor, standalone_docs_json -from bokeh.protocol.messages.patch_doc import process_document_events - -await micropip.install(['panel==0.13.0rc5']) +await micropip.install(['panel==0.13.0rc8']) import panel as pn +slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude') + def callback(new): return f'Amplitude is: {new}' -slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude') - row = pn.Row(slider, pn.bind(callback, slider)) -print("about to embed") +await pn.io.pyodide.show(row, 'myplot') + -def doc_json(model, target): - doc = model.server_doc() - model = doc.roots[0] - docs_json = standalone_docs_json([model]) - - doc_json = list(docs_json.values())[0] - root_id = doc_json['roots']['root_ids'][0] - - return doc, json.dumps(dict( - target_id = target, - root_id = root_id, - doc = doc_json, - version = __version__, - )) - -def link_docs(pydoc, jsdoc): - def jssync(event): - if (event.setter_id is not None): - return - events = [event] - json_patch = jsdoc.create_json_patch_string(pyodide.to_js(events)) - pydoc.apply_json_patch(json.loads(json_patch)) - - jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False)) - - def pysync(event): - json_patch = process_document_events([event], use_buffers=False)[0] - - jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js') - - pydoc.on_change(pysync) - -async def show(plot, target): - pydoc, model_json = doc_json(plot, target) - views = await Bokeh.embed.embed_item(JSON.parse(model_json)) - print("Done embedding...") - jsdoc = views[0].model.document - link_docs(pydoc, jsdoc) - -await show(row, 'myplot') - From dff11a8b517a12f4b00e3a35c0e2ce276a77b7fc Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Sat, 9 Apr 2022 17:15:03 +0200 Subject: [PATCH 4/4] Add Panel KMeans clustering example --- pyscriptjs/public/bokeh_interactive.html | 12 +- pyscriptjs/public/panel.html | 33 ++--- pyscriptjs/public/panel_kmeans.html | 157 +++++++++++++++++++++++ 3 files changed, 177 insertions(+), 25 deletions(-) create mode 100644 pyscriptjs/public/panel_kmeans.html diff --git a/pyscriptjs/public/bokeh_interactive.html b/pyscriptjs/public/bokeh_interactive.html index 822eaea..1cb1b8b 100644 --- a/pyscriptjs/public/bokeh_interactive.html +++ b/pyscriptjs/public/bokeh_interactive.html @@ -65,7 +65,7 @@ def doc_json(model, target): version = __version__, )) -def link_docs(pydoc, jsdoc): +def _link_docs(pydoc, jsdoc): def jssync(event): if (event.setter_id is not None): return @@ -76,9 +76,11 @@ def link_docs(pydoc, jsdoc): jsdoc.on_change(pyodide.create_proxy(jssync), pyodide.to_js(False)) def pysync(event): - json_patch = process_document_events([event], use_buffers=False)[0] - - jsdoc.apply_json_patch(JSON.parse(json_patch), {}, setter_id='js') + json_patch, buffers = process_document_events([event], use_buffers=True) + buffer_map = {} + for (ref, buffer) in buffers: + buffer_map[ref['id']] = buffer + jsdoc.apply_json_patch(JSON.parse(json_patch), pyodide.to_js(buffer_map), setter_id='js') pydoc.on_change(pysync) @@ -87,7 +89,7 @@ async def show(plot, target): views = await Bokeh.embed.embed_item(JSON.parse(model_json)) print("Done embedding...") jsdoc = views[0].model.document - link_docs(pydoc, jsdoc) + _link_docs(pydoc, jsdoc) await show(row, 'myplot') diff --git a/pyscriptjs/public/panel.html b/pyscriptjs/public/panel.html index f81075d..6319144 100644 --- a/pyscriptjs/public/panel.html +++ b/pyscriptjs/public/panel.html @@ -1,4 +1,5 @@ - + + Panel Example @@ -7,28 +8,21 @@ - - - - - - - -- bokeh -- numpy - -

Panel Example

-
- + + + + - bokeh + - numpy + +

Panel Example

+
+ import asyncio import micropip -import pyodide -await micropip.install(['panel==0.13.0rc8']) +await micropip.install(['panel==0.13.0rc9']) import panel as pn @@ -40,7 +34,6 @@ def callback(new): row = pn.Row(slider, pn.bind(callback, slider)) await pn.io.pyodide.show(row, 'myplot') - - + diff --git a/pyscriptjs/public/panel_kmeans.html b/pyscriptjs/public/panel_kmeans.html new file mode 100644 index 0000000..ee8e902 --- /dev/null +++ b/pyscriptjs/public/panel_kmeans.html @@ -0,0 +1,157 @@ + + + + + Pyscript/Panel KMeans Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - bokeh + - numpy + - pandas + - scikit-learn + + +
+ + +
+ +
+
+
+
+
+
+
+ +import asyncio +import micropip + +from io import StringIO +from js import fetch + +await micropip.install(['panel==0.13.0rc9', 'altair']) + +import altair as alt +import panel as pn +import pandas as pd + +from panel.io.pyodide import show +from sklearn.cluster import KMeans + +pn.config.sizing_mode = 'stretch_width' + +data = await fetch('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv') +penguins = pd.read_csv(StringIO(await data.text())).dropna() +cols = list(penguins.columns)[2:6] + +x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm') +y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm') +n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3) + +@pn.depends(x.param.value, y.param.value, n_clusters.param.value) +def get_clusters(x, y, n_clusters): + kmeans = KMeans(n_clusters=n_clusters) + est = kmeans.fit(penguins[cols].values) + df = penguins.copy() + df['labels'] = est.labels_.astype('str') + centers = df.groupby('labels').mean() + table.value = df + return ( + alt.Chart(df) + .mark_point(size=100) + .encode( + x=alt.X(x, scale=alt.Scale(zero=False)), + y=alt.Y(y, scale=alt.Scale(zero=False)), + shape='labels', + color='species' + ).properties(width=800) + + alt.Chart(centers) + .mark_point(size=200, shape='cross', color='black') + .encode(x=x+':Q', y=y+':Q') +) + +table = pn.widgets.Tabulator(penguins, pagination='remote', page_size=10) + +intro = """ +This app provides an example of **building a simple dashboard using +Panel**.\n\nIt demonstrates how to take the output of **k-means +clustering on the Penguins dataset** using scikit-learn, parameterizing +the number of clusters and the variables to plot.\n\nThe entire +clustering and plotting pipeline is expressed as a **single reactive +function** that responsively returns an updated plot when one of the +widgets changes.\n\n The **`x` marks the center** of the cluster. +""" + +await show(x, 'x-widget') +await show(y, 'y-widget') +await show(n_clusters, 'n-widget') +await show(intro, 'intro') +await show(get_clusters, 'cluster-plot') +await show(table, 'table') + + + +