diff --git a/pyscriptjs/examples/panel_deckgl.html b/pyscriptjs/examples/panel_deckgl.html
index 52fc83e..b70e99a 100644
--- a/pyscriptjs/examples/panel_deckgl.html
+++ b/pyscriptjs/examples/panel_deckgl.html
@@ -2,10 +2,12 @@
- Pyscript/Panel DeckGL Demo
+
+
+
+
-
-
+ Pyscript/Panel DeckGL Demo
@@ -24,23 +26,18 @@
-
-
+
-
-
-
+
@@ -98,6 +95,8 @@ class App(pn.viewable.Viewer):
view = param.DataFrame(precedence=-1)
+ arc_view = param.DataFrame(precedence=-1)
+
radius = param.Integer(default=50, bounds=(20, 1000))
elevation = param.Integer(default=10, bounds=(0, 50))
@@ -111,14 +110,17 @@ class App(pn.viewable.Viewer):
def __init__(self, **params):
self.deck_gl = None
super().__init__(**params)
- self.deck_gl = pn.pane.DeckGL(dict(self.spec), mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_both', margin=0)
- self.deck_gl.param.watch(self.update_spec, 'hover_state')
+ self.deck_gl = pn.pane.DeckGL(
+ dict(self.spec), mapbox_api_key=MAPBOX_KEY, throttle={'click': 10},
+ sizing_mode='stretch_both', margin=0)
+ self.deck_gl.param.watch(self._update_arc_view, 'click_state')
self._playing = False
- self._cb = pn.state.add_periodic_callback(self._update, 1000//self.speed, start=False)
+ self._cb = pn.state.add_periodic_callback(
+ self._update_hour, 1000//self.speed, start=False
+ )
- @param.depends('speed', watch=True)
- def _update_speed(self):
- self._cb.period = 1000//self.speed
+ def __panel__(self):
+ return self.deck_gl
@property
def spec(self):
@@ -168,24 +170,32 @@ class App(pn.viewable.Viewer):
"getTargetColor": [240, 100, 0, 180]
}
- @property
- def arc_view(self):
- data = self.data if self.view is None else self.view
- if not self.deck_gl or not self.deck_gl.hover_state:
- return data.iloc[:0]
- lon, lat = self.deck_gl.hover_state['coordinate']
- tol = 0.001
- return data[
- (df.pickup_x>=float(lon-tol)) &
- (df.pickup_x<=float(lon+tol)) &
- (df.pickup_y>=float(lat-tol)) &
- (df.pickup_y<=float(lat+tol))
- ]
-
- def _update(self):
+ def _update_hour(self):
self.hour = (self.hour+1) % 24
+
+ @param.depends('view', watch=True)
+ def _update_arc_view(self, event=None):
+ data = self.data if self.view is None else self.view
+ if not self.deck_gl or not self.deck_gl.click_state:
+ self.arc_view = data.iloc[:0]
+ else:
+ lon, lat = self.deck_gl.click_state['coordinate']
+ tol = 0.001
+ self.arc_view = data[
+ (df.pickup_x>=float(lon-tol)) &
+ (df.pickup_x<=float(lon+tol)) &
+ (df.pickup_y>=float(lat-tol)) &
+ (df.pickup_y<=float(lat+tol))
+ ]
+
+ @param.depends('hour', watch=True)
+ def _update_hourly_view(self):
self.view = self.data[self.data.hour==self.hour]
+ @param.depends('speed', watch=True)
+ def _update_speed(self):
+ self._cb.period = 1000//self.speed
+
@param.depends('play', watch=True)
def _play_pause(self):
if self._playing:
@@ -198,12 +208,10 @@ class App(pn.viewable.Viewer):
self.param.speed.precedence = 1
self._playing = not self._playing
- @param.depends('view', 'radius', 'elevation', watch=True)
- def update_spec(self, *events):
+ @param.depends('view', 'radius', 'elevation', 'arc_view', watch=True)
+ def update_spec(self):
self.deck_gl.object = dict(self.spec)
- def __panel__(self):
- return self.deck_gl
data = await fetch('https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv')
df = pd.read_csv(StringIO(await data.text()))