8000 Merge pull request #9 from anaconda/panel_updates · rmyers/pyscript@a55a49c · GitHub
[go: up one dir, main page]
Skip to content

Commit a55a49c

Browse files
fpligerfpliger
authored
Merge pull request pyscript#9 from anaconda/panel_updates
Update examples
2 parents 6f2f6ac + fa438a1 commit a55a49c

File tree

3 files changed

+56
-35
lines changed

3 files changed

+56
-35
lines changed

‎pyscriptjs/examples/bokeh_interactive.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h1>Bokeh Example</h1>
6767

6868
def _link_docs(pydoc, jsdoc):
6969
def jssync(event):
70-
if (event.setter_id is not None):
70+
if getatt 8000 r(event, 'setter_id', None) is not None:
7171
return
7272
events = [event]
7373
json_patch = jsdoc.create_json_patch_string(pyodide.to_js(events))

‎pyscriptjs/examples/panel.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
<title>Panel Example</title>
44
<meta charset="iso-8859-1">
55
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
6-
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
76
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
87
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
9-
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
10-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.0-rc.5/dist/panel.min.js"></script>
8+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.0-rc.10/dist/panel.min.js"></script>
119
<link rel="stylesheet" href="../build/pyscript.css" />
1210
<script defer src="../build/pyscript.js"></script>
1311
</head>
@@ -22,7 +20,7 @@ <h1>Panel Example</h1>
2220
import asyncio
2321
import micropip
2422

25-
await micropip.install(['panel==0.13.0rc9'])
23+
await micropip.install(['panel==0.13.0rc10'])
2624

2725
import panel as pn
2826

‎pyscriptjs/examples/panel_kmeans.html

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<meta charset="utf-8">
55
<title>Pyscript/Panel KMeans Demo</title>
66

7-
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/icons/favicon.ico" type="">
7+
<link rel="icon" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/icons/favicon.ico" type="">
88
<meta name="name" content="PyScript/Panel KMeans Demo">
99

1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
11-
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/widgets.css" type="text/css" />
12-
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/markdown.css" type="text/css" />
13-
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/loading.css" type="text/css" />
14-
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/css/dataframe.css" type="text/css" />
11+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/css/widgets.css" type="text/css" />
12+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/css/markdown.css" type="text/css" />
13+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/css/loading.css" type="text/css" />
14+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/css/dataframe.css" type="text/css" />
1515

1616
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
1717
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
@@ -20,14 +20,14 @@
2020
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
2121
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
2222
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
23-
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/panel.min.js"></script>
23+
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/panel.min.js"></script>
2424
<script type="text/javascript">
2525
Bokeh.set_log_level("info");
2626
</script>
2727

2828
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
29-
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/bundled/bootstraptemplate/bootstrap.css">
30-
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.8/dist/bundled/defaulttheme/default.css">
29+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/bundled/bootstraptemplate/bootstrap.css">
30+
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0-rc.10/dist/bundled/defaulttheme/default.css">
3131

3232
<style>
3333
#sidebar {
@@ -83,7 +83,7 @@
8383
from io import StringIO
8484
from js import fetch
8585

86-
await micropip.install(['panel==0.13.0rc9', 'altair'])
86+
await micropip.install(['panel==0.13.0rc10', 'altair'])
8787

8888
import altair as alt
8989
import panel as pn
@@ -102,45 +102,68 @@
102102
y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm')
103103
n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3)
104104

105-
@pn.depends(x.param.value, y.param.value, n_clusters.param.value)
106-
def get_clusters(x, y, n_clusters):
105+
brush = alt.selection_interval(name='brush') # selection of type "interval"
106+
107+
def get_clusters(n_clusters):
107108
kmeans = KMeans(n_clusters=n_clusters)
108109
est = kmeans.fit(penguins[cols].values)
109110
df = penguins.copy()
110111
df['labels'] = est.labels_.astype('str')
112+
return df
113+
114+
def get_chart(x, y, df):
111115
centers = df.groupby('labels').mean()
112-
table.value = df
113-
return (
114-
alt.Chart(df)
115-
.mark_point(size=100)
116-
.encode(
117-
x=alt.X(x, scale=alt.Scale(zero=False)),
118-
y=alt.Y(y, scale=alt.Scale(zero=False)),
119-
shape='labels',
120-
color='species'
121-
).properties(width=800) +
116+
return (alt.Chart(df)
117+
.mark_point(size=100)
118+
.encode(
119+
x=alt.X(x, scale=alt.Scale(zero=False)),
120+
y=alt.Y(y, scale=alt.Scale(zero=False)),
121+
shape='labels',
122+
color='species'
123+
).add_selection(brush).properties(width=800) +
122124
alt.Chart(centers)
123-
.mark_point(size=200, shape='cross', color='black')
125+
.mark_point(size=250, shape='cross', color='black')
124126
.encode(x=x+':Q', y=y+':Q')
125-
)
127+
)
128+
129+
chart = pn.pane.Vega()
130+
table = pn.widgets.Tabulator(pagination='remote', page_size=10)
131+
132+
def update_table(event=None):
133+
table.value = get_clusters(n_clusters.value)
134+
135+
n_clusters.param.watch(update_table, 'value')
136+
137+
@pn.depends(x, y, n_clusters, watch=True)
138+
def update_chart(*events):
139+
chart.object = get_chart(x.value, y.value, table.value)
140+
chart.selection.param.watch(update_filters, 'brush')
141+
142+
def update_filters(event=None):
143+
filters = []
144+
for k, v in (getattr(event, 'new') or {}).items():
145+
filters.append(dict(field=k, type='>=', value=v[0]))
146+
filters.append(dict(field=k, type='<=', value=v[1]))
147+
table.filters = filters
126148

127-
table = pn.widgets.Tabulator(penguins, pagination='remote', page_size=10)
149+
update_table()
150+
update_chart()
128151

129152
intro = """
130153
This app provides an example of **building a simple dashboard using
131154
Panel**.\n\nIt demonstrates how to take the output of **k-means
132-
clustering on the Penguins dataset** using scikit-learn, parameterizing
133-
the number of clusters and the variables to plot.\n\nThe entire
134-
clustering and plotting pipeline is expressed as a **single reactive
135-
function** that responsively returns an updated plot when one of the
136-
widgets changes.\n\n The **`x` marks the center** of the cluster.
155+
clustering on the Penguins dataset** using scikit-learn,
156+
parameterizing the number of clusters and the variables to
157+
plot.\n\nThe plot and the table are linked, i.e. selecting on the plot
158+
will filter the data in the table.\n\n The **`x` marks the center** of
159+
the cluster.
137160
"""
138161

139162
await show(x, 'x-widget')
140163
await show(y, 'y-widget')
141164
await show(n_clusters, 'n-widget')
142165
await show(intro, 'intro')
143-
await show(get_clusters, 'cluster-plot')
166+
await show(chart, 'cluster-plot')
144167
await show(table, 'table')
145168
</py-script>
146169
<script>

0 commit comments

Comments
 (0)
0