8000 Improvements for deckgl demo · Positive-Conative/pyscript@05dbc2e · GitHub
[go: up one dir, main page]
Skip to content

Commit 05dbc2e

Browse files
philippjfrphilippjfr
committed
Improvements for deckgl demo
1 parent bb1c80c commit 05dbc2e

File tree

1 file changed

+45
-37
lines changed

1 file changed

+45
-37
lines changed

‎pyscriptjs/examples/panel_deckgl.html

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Pyscript/Panel DeckGL Demo</title>
5+
<meta name="apple-mobile-web-app-capable" content="yes">
6+
<meta name="apple-mobile-web-app-status-bar-style" content="default">
7+
<meta name="theme-color" content="#0072b5">
8+
<meta name="name" content="Pyscript/Panel DeckGL Demo">
69

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

1012
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css" />
1113
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/css/widgets.css" type="text/css" />
@@ -24,23 +26,18 @@
2426
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
2527
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
2628
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.13.0/dist/panel.js"></script>
27-
<script type="text/javascript">
28-
Bokeh.set_log_level("info");
29-
</script>
30-
29+
3130
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
3231
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/bootstraptemplate/bootstrap.css">
3332
<link rel="stylesheet" href="https://unpkg.com/@holoviz/panel@0.13.0/dist/bundled/defaulttheme/default.css">
3433

34+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
35+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
3536
<style>
3637
#sidebar {
37-
width: 350px;
38+
width: 400px;
3839
}
3940
</style>
40-
41-
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
42-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
43-
4441
<link rel="stylesheet" href="../build/pyscript.css" />
4542
<script defer src="../build/pyscript.js"></script>
4643
</head>
@@ -98,6 +95,8 @@
9895

9996
view = param.DataFrame(precedence=-1)
10097

98+
arc_view = param.DataFrame(precedence=-1)
99+
101100
radius = param.Integer(default=50, bounds=(20, 1000))
102101

103102
elevation = param.Integer(default=10, bounds=(0, 50))
@@ -111,14 +110,17 @@
111110
def __init__(self, **params):
112111
self.deck_gl = None
113112
super().__init__(**params)
114-
self.deck_gl = pn.pane.DeckGL(dict(self.spec), mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_both', margin=0)
115-
self.deck_gl.param.watch(self.update_spec, 'hover_state')
113+
self.deck_gl = pn.pane.DeckGL(
114+
dict(self.spec), mapbox_api_key=MAPBOX_KEY, throttle={'click': 10},
115+
sizing_mode='stretch_both', margin=0)
116+
self.deck_gl.param.watch(self._update_arc_view, 'click_state')
116117
self._playing = False
117-
self._cb = pn.state.add_periodic_callback(self._update, 1000//self.speed, start=False)
118+
self._cb = pn.state.add_periodic_callback(
119+
self._update_hour, 1000//self.speed, start=False
120+
)
118121

119-
@param.depends('speed', watch=True)
120-
def _update_speed(self):
121-
self._cb.period = 1000//self.speed
122+
def __panel__(self):
123+
return self.deck_gl
122124

123125
@property
124126
def spec(self):
@@ -168,24 +170,32 @@
168170
"getTargetColor": [240, 100, 0, 180]
169171
}
170172

171-
@property
172-
def arc_view(self):
173-
data = self.data if self.view is None else self.view
174-
if not self.deck_gl or not self.deck_gl.hover_state:
175-
return data.iloc[:0]
176-
lon, lat = self.deck_gl.hover_state['coordinate']
177-
tol = 0.001
178-
return data[
179-
(df.pickup_x>=float(lon-tol)) &
180-
(df.pickup_x<=float(lon+tol)) &
181-
(df.pickup_y>=float(lat-tol)) &
182-
(df.pickup_y<=float(lat+tol))
183-
]
184-
185-
def _update(self):
173+
def _update_hour(self):
186174
self.hour = (self.hour+1) % 24
175+
176+
@param.depends('view', watch=True)
177+
def _update_arc_view(self, event=None):
178+
data = self.data if self.view is None else self.view
179+
if not self.deck_gl or not self.deck_gl.click_state:
180+
self.arc_view = data.iloc[:0]
181+
else:
182+
lon, lat = self.deck_gl.click_state['coordinate']
183+
tol = 0.001
184+
self.arc_view = data[
185+
(df.pickup_x>=float(lon-tol)) &
186+
(df.pickup_x<=float(lon+tol)) &
187+
(df.pickup_y>=float(lat-tol)) &
188+
(df.pickup_y<=float(lat+tol))
189+
]
190+
191+
@param.depends('hour', watch=True)
192+
def _update_hourly_view(self):
187193
self.view = self.data[self.data.hour==self.hour]
188194

195+
@param.depends('speed', watch=True)
196+
def _update_speed(self):
197+
self._cb.period = 1000//self.speed
198+
189199
@param.depends('play', watch=True)
190200
def _play_pause(self):
191201
if self._playing:
@@ -198,12 +208,10 @@
198208
self.param.speed.precedence = 1
199209
self._playing = not self._playing
200210

201-
@param.depends('view', 'radius', 'elevation', watch=True)
202-
def update_spec(self, *events):
211+
@param.depends('view', 'radius', 'elevation', 'arc_view', watch=True)
212+
def update_spec(self):
203213
self.deck_gl.object = dict(self.spec)
204214

205-
def __panel__(self):
206-
return self.deck_gl
207215

208216
data = await fetch('https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv')
209217
df = pd.read_csv(StringIO(await data.text()))

0 commit comments

Comments
 (0)
0