pyscript · MarcSkovMadsen · Jul 26, 2024
diff --git a/panel/README.md b/panel/README.md
@@ -1,6 +1,8 @@
 # Simple Panel Example
 
-This is a basic example of a Panel application with PyScript - similar to the Hello World application, this example is aimed for you to get up and running with Panel and PyScript so you can extend it to your own needs.
+This is a basic example of a [Panel](https://panel.holoviz.org/) application with PyScript - similar to the Hello World application, this example is aimed for you to get up and running with Panel and PyScript so you can extend it to your own needs.
+
+For more about using Panel with Pyscript, see [Running Panel in WASM](https://panel.holoviz.org/how_to/wasm/index.html).
 
 ## Libraries Used
 

diff --git a/panel/assets/css/examples.css b/panel/assets/css/examples.css
@@ -51,7 +51,7 @@ nav {
     white-space: nowrap;
 }
 
-.app-header {
+.app-header, .app-header a {
     display: flex;
     align-items: center;
     padding: 0.5rem 1rem;

diff --git a/panel/index.html b/panel/index.html
@@ -7,12 +7,12 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
         <!-- PyScript CSS -->
-        <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
+        <link rel="stylesheet" href="https://pyscript.net/releases/2024.7.1/core.css">
         <!-- CSS for examples -->
         <link rel="stylesheet" href="./assets/css/examples.css" />
 
         <!-- This script tag bootstraps PyScript -->
-        <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
+        <script type="module" src="https://pyscript.net/releases/2024.7.1/core.js"></script>
 
         <!-- for splashscreen -->
         <style>
@@ -28,15 +28,15 @@
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
         <!-- bokeh scripts -->
-        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.2.2.js"></script>
-        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.2.2.min.js"></script>
-        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.2.2.min.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.5.0.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.5.0.min.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.5.0.min.js"></script>
         <script type="text/javascript">
             Bokeh.set_log_level("info");
         </script>
 
         <!-- panel scripts -->
-        <script defer src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.8/dist/panel.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/panel.min.js"></script>
     </head>
 
     <body>

diff --git a/panel/main.py b/panel/main.py
@@ -1,10 +1,12 @@
 import panel as pn
 
-pn.extension(sizing_mode="stretch_width")
+pn.extension()
+
+slider = pn.widgets.FloatSlider(start=0, end=10, name="Amplitude")
 
-slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
 
 def callback(new):
-    return f'Amplitude is: {new}'
+    return f"Amplitude is: {new}"
+
 
-pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app')
+pn.Row(slider, pn.bind(callback, slider)).servable(target="simple_app")
diff --git a/panel/pyscript.toml b/panel/pyscript.toml
@@ -1,3 +1,6 @@
 name = "Simple Panel"
 description = "A basic Panel application to be used with PyScript."
-packages = ["panel==1.3.8", "bokeh==3.2.2"]
+packages = [
+    "https://cdn.holoviz.org/panel/wheels/bokeh-3.5.0-py3-none-any.whl",
+    "https://cdn.holoviz.org/panel/wheels/panel-1.5.0b2-py3-none-any.whl"
+]
diff --git a/panel_deckgl/README.md b/panel_deckgl/README.md
@@ -1,10 +1,12 @@
 # NYC Taxi Panel DeckGL Example
 
-This example demonstrates how to use Panel and DeckGL to create a web-based dashboard for exploring a large dataset of taxi trips in New York City. The example uses the [NYC Taxi Dataset](https://www1.nyc.gov/site/tlc/about/tlc-trip-record-data.page) to visualize the pickup and dropoff locations of taxi trips on a map, and to explore the distribution of trip attributes such as trip distance, fare amount, and tip amount.
+This example demonstrates how to use [Panel](https://panel.holoviz.org/) and [DeckGL](https://deck.gl/) to create a web-based dashboard for exploring a large dataset of taxi trips in New York City. The example uses the [NYC Taxi Dataset](https://www1.nyc.gov/site/tlc/about/tlc-trip-record-data.page) to visualize the pickup and dropoff locations of taxi trips on a map, and to explore the distribution of trip attributes such as trip distance, fare amount, and tip amount.
+
+For more about Panel and DeckGl check out the [Panel DeckGL reference guide](https://panel.holoviz.org/reference/panes/DeckGL.html).
 
 ## Libraries Used
 
-- [Panel](https://panel.holoviz.org): A high-level app and dashboarding solution for Python
+- [Panel](https://panel.holoviz.org): A high-level app and dashboarding solution for Python.
 - [DeckGL](https://deck.gl): A WebGL-powered framework for visual exploratory data analysis of large datasets
 - [Bokeh](https://bokeh.org): A powerful framework for building web-based interactive visualizations
 - [Pandas](https://pandas.pydata.org): A fast, powerful, flexible, and easy-to-use open-source data analysis and data manipulation library built on top of the Python programming language

diff --git a/panel_deckgl/index.html b/panel_deckgl/index.html
@@ -7,12 +7,12 @@
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
         <!-- PyScript CSS -->
-        <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
+        <link rel="stylesheet" href="https://pyscript.net/releases/2024.7.1/core.css">
         <!-- CSS for examples -->
         <link rel="stylesheet" href="./assets/css/examples.css" />
 
         <!-- This script tag bootstraps PyScript -->
-        <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
+        <script type="module" src="https://pyscript.net/releases/2024.7.1/core.js"></script>
 
         <!-- for splashscreen -->
         <style>
@@ -32,31 +32,33 @@
 
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" type="text/css"/>
 
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.2/dist/css/widgets.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.2/dist/css/markdown.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.2/dist/bundled/bootstraptemplate/bootstrap.css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.2/dist/bundled/theme/default.css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/css/widgets.css" type="text/css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/css/markdown.css" type="text/css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/bundled/bootstraptemplate/bootstrap.css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/bundled/theme/default.css"/>
 
         <!-- deck-gl scripts -->
-        <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/h3-js.umd.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@deck.gl/[email protected]/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js"></script>
-        <script type="text/javascript" src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
-        <link rel='stylesheet' href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css"/>
+        <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/h3-js.umd.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@deck.gl/[email protected]/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/[email protected]/dist/dist.min.js"></script>
+        <script type="text/javascript" src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@deck.gl/carto@^9.0.20/dist.min.js"></script>
+        <link rel='stylesheet' href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css"/>
 
         <!-- bokeh scripts -->
-        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.2.2.js"></script>
-        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.2.2.min.js"></script>
-        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.2.2.min.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.5.0.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.5.0.min.js"></script>
+        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.5.0.min.js"></script>
         <script type="text/javascript">
             Bokeh.set_log_level("info");
         </script>
 
         <!-- panel scripts -->
-        <script defer src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.8/dist/panel.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/panel.min.js"></script>
 
     </head>
 

diff --git a/panel_deckgl/main.py b/panel_deckgl/main.py
@@ -1,10 +1,18 @@
-import panel as pn
-import pandas as pd
 import param
-
 from pyodide.http import open_url
 
-MAPBOX_KEY = "pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ"
+import pandas as pd
+import panel as pn
+
+pn.extension("deckgl")
+
+MAPBOX_KEY = ""
+
+if MAPBOX_KEY:
+    map_style = "mapbox://styles/mapbox/dark-v9"
+else:
+    map_style = "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+
 
 class App(param.Parameterized):
     data = param.DataFrame(precedence=-1)
@@ -14,22 +22,22 @@ class App(param.Parameterized):
     elevation = param.Integer(default=10, bounds=(0, 50))
     hour = param.Integer(default=0, bounds=(0, 23))
     speed = param.Integer(default=1, bounds=(0, 10), precedence=-1)
-    play = param.Event(label='▷')
+    play = param.Event(label="▷")
 
     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,
-            throttle={'click': 10},
-            sizing_mode='stretch_both',
-            margin=0
+            throttle={"click": 10},
+            sizing_mode="stretch_both",
+            margin=0,
         )
-        self.deck_gl.param.watch(self._update_arc_view, 'click_state')
+        self.deck_gl.param.watch(self._update_arc_view, "click_state")
         self._playing = False
         self._cb = pn.state.add_periodic_callback(
-            self._update_hour, 1000//self.speed, start=False
+            self._update_hour, 1000 // self.speed, start=False
         )
 
     @property
@@ -42,13 +50,11 @@ def spec(self):
                 "maxZoom": 15,
                 "minZoom": 5,
                 "pitch": 40.5,
-                "zoom": 11
+                "zoom": 11,
             },
             "layers": [self.hex_layer, self.arc_layer],
-            "mapStyle": "mapbox://styles/mapbox/dark-v9",
-            "views": [
-                {"@@type": "MapView", "controller": True}
-            ]
+            "mapStyle": map_style,
+            "views": [{"@@type": "MapView", "controller": True}],
         }
 
     @property
@@ -63,70 +69,71 @@ def hex_layer(self):
             "radius": self.radius,
             "extruded": True,
             "getPosition": "@@=[pickup_x, pickup_y]",
-            "id": "8a553b25-ef3a-489c-bbe2-e102d18a3211"
+            "id": "8a553b25-ef3a-489c-bbe2-e102d18a3211",
         }
 
     @property
     def arc_layer(self):
         return {
             "@@type": "ArcLayer",
-            "id": 'arc-layer',
+            "id": "arc-layer",
             "data": self.arc_view,
             "pickable": True,
             "getWidth": 1,
             "getSourcePosition": "@@=[pickup_x, pickup_y]",
             "getTargetPosition": "@@=[dropoff_x, dropoff_y]",
             "getSourceColor": [0, 255, 0, 180],
-            "getTargetColor": [240, 100, 0, 180]
+            "getTargetColor": [240, 100, 0, 180],
         }
 
     def _update_hour(self):
-        self.hour = (self.hour+1) % 24
+        self.hour = (self.hour + 1) % 24
 
-    @param.depends('view', watch=True)
+    @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]
             return
-        lon, lat = self.deck_gl.click_state['coordinate']
+        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))
+            (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, on_init=True)
+    @param.depends("hour", watch=True, on_init=True)
     def _update_hourly_view(self):
-        self.view = self.data[self.data.hour==self.hour]
+        self.view = self.data[self.data.hour == self.hour]
 
-    @param.depends('speed', watch=True)
+    @param.depends("speed", watch=True)
     def _update_speed(self):
-        self._cb.period = 1000//self.speed
+        self._cb.period = 1000 // self.speed
 
-    @param.depends('play', watch=True)
+    @param.depends("play", watch=True)
     def _play_pause(self):
         if self._playing:
             self._cb.stop()
-            self.param.play.label = '▷'
+            self.param.play.label = "▷"
             self.param.speed.precedence = -1
         else:
             self._cb.start()
-            self.param.play.label = '❚❚'
+            self.param.play.label = "❚❚"
             self.param.speed.precedence = 1
         self._playing = not self._playing
 
-    @param.depends('view', 'radius', 'elevation', 'arc_view', watch=True)
+    @param.depends("view", "radius", "elevation", "arc_view", watch=True)
     def update_spec(self):
         if self.deck_gl:
             self.deck_gl.object = dict(self.spec)
 
-url = 'https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv'
+
+url = "https://s3.eu-west-1.amazonaws.com/assets.holoviews.org/data/nyc_taxi_wide.csv"
 df = pd.read_csv(open_url(url))
 app = App(data=df)
-controls = pn.Param(app.param, sizing_mode='stretch_width', show_name=False)
+controls = pn.Param(app.param, sizing_mode="stretch_width", show_name=False)
 
-app.deck_gl.servable(target='plot')
-controls.servable(target='widgets')
+app.deck_gl.servable(target="plot")
+controls.servable(target="widgets")
diff --git a/panel_deckgl/pyscript.toml b/panel_deckgl/pyscript.toml
@@ -1,3 +1,8 @@
 name = "NYC Taxi Panel DeckGL"
 description = "A Panel application that uses the NYC Taxi dataset and DeckGL to generate a data visualisation on a map."
-packages = ["bokeh==3.2.2", "numpy", "pandas", "panel==1.3.8"]
+packages = [
+    "https://cdn.holoviz.org/panel/wheels/bokeh-3.5.0-py3-none-any.whl",
+    "https://cdn.holoviz.org/panel/wheels/panel-1.5.0b2-py3-none-any.whl",
+    "numpy",
+    "pandas"
+]
diff --git a/panel_kmeans/README.md b/panel_kmeans/README.md
@@ -1,15 +1,15 @@
 # Panel KMeans Examples
 
-This application provides an example of **building a simple dashboard using Panel**.
+This application provides an example of **building a simple dashboard using [Panel](https://panel.holoviz.org/)**.
 
-It 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.
+It 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.
 
 The plot and the table are linked, i.e. selecting on the plot
 will filter the data in the table. The **`x` marks the center** of the cluster.
 
+Check out the [Panel and Vega/ Altair](https://panel.holoviz.org/reference/panes/Vega.html) reference guide for more information.
+
 ## Libraries Used
 
 - [Panel](https://panel.holoviz.org/)