From e5492522d65476a62331e9878e983292dc572066 Mon Sep 17 00:00:00 2001
From: MarcSkovMadsen <marc.skov.madsen@gmail.com>
Date: Fri, 26 Jul 2024 11:52:03 +0000
Subject: [PATCH] update to panel 1.5.0

---
 panel/README.md                 |   4 +-
 panel/assets/css/examples.css   |   2 +-
 panel/index.html                |  12 ++--
 panel/main.py                   |  10 +--
 panel/pyscript.toml             |   5 +-
 panel_deckgl/README.md          |   6 +-
 panel_deckgl/index.html         |  38 ++++++------
 panel_deckgl/main.py            |  81 +++++++++++++-----------
 panel_deckgl/pyscript.toml      |   7 ++-
 panel_kmeans/README.md          |  10 +--
 panel_kmeans/index.html         |  22 +++----
 panel_kmeans/main.py            | 107 ++++++++++++++++++--------------
 panel_kmeans/pyscript.toml      |   9 ++-
 panel_streaming/README.md       |   2 +-
 panel_streaming/index.html      |  22 +++----
 panel_streaming/main.py         |  40 +++++++-----
 panel_streaming/pyscript.toml   |   5 +-
 panel_with_hvplot/index.html    |  26 ++++----
 panel_with_hvplot/main.py       |   3 -
 panel_with_hvplot/pyscript.toml |   9 ++-
 20 files changed, 240 insertions(+), 180 deletions(-)

diff --git a/panel/README.md b/panel/README.md
index 4538d2f..c659908 100644
--- 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
index 46e20f0..0ac743f 100644
--- 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
index 13f3b96..24046c0 100644
--- 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
index 1c4d171..71165c3 100644
--- 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
index 46cc01c..3dd7177 100644
--- 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
index 1444b9f..aaf18a6 100644
--- 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
index 197c61e..17c7e04 100644
--- 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/h3-js@3.7.2/dist/h3-js.umd.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/deck.gl@8.6.7/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@deck.gl/json@8.6.7/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/csv@3.1.7/dist/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/json@3.1.7/dist/dist.min.js"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/3d-tiles@3.1.7/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/h3-js@4.1.0/dist/h3-js.umd.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.20/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@deck.gl/json@9.0.20/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/csv@4.2.2/dist/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/json@4.2.2/dist/dist.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@loaders.gl/3d-tiles@4.2.2/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
index e501b9c..11d5104 100644
--- 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,7 +22,7 @@ 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
@@ -22,14 +30,14 @@ def __init__(self, **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
index b838d98..04c2c6d 100644
--- 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
index d79d56c..a8802c1 100644
--- 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/)
diff --git a/panel_kmeans/index.html b/panel_kmeans/index.html
index 556e97f..94b8609 100644
--- a/panel_kmeans/index.html
+++ b/panel_kmeans/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,10 +32,10 @@
     
         <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.1/dist/css/widgets.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/css/markdown.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/bundled/bootstraptemplate/bootstrap.css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/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"/>
         
         <!-- vega scripts -->
         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
@@ -43,18 +43,18 @@
         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
 
         <!-- tabulator scipt -->
-        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
+        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
         
         <!-- 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>
 
         <!-- CSS for sidebar -->
         <style>
diff --git a/panel_kmeans/main.py b/panel_kmeans/main.py
index f9afc80..07f7988 100644
--- a/panel_kmeans/main.py
+++ b/panel_kmeans/main.py
@@ -1,75 +1,90 @@
-import altair as alt
-import panel as pn
-import pandas as pd
 import param
-
 from sklearn.cluster import KMeans
-from pyodide.http import open_url
 
-pn.config.sizing_mode = 'stretch_width'
+import altair as alt
+import pandas as pd
+import panel as pn
 
-url = 'https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv'
-penguins = pd.read_csv(open_url(url)).dropna()
+pn.extension("tabulator", "vega", sizing_mode="stretch_width")
+
+url = "https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-07-28/penguins.csv"
+penguins = pd.read_csv(url).dropna()
 cols = list(penguins.columns)[2:6]
 
-x = pn.widgets.Select(name='x', options=cols, value='bill_depth_mm').servable(target='x-widget')
-y = pn.widgets.Select(name='y', options=cols, value='bill_length_mm').servable(target='y-widget')
-n_clusters = pn.widgets.IntSlider(name='n_clusters', start=1, end=5, value=3).servable(target='n-widget')
+x = pn.widgets.Select(name="x", options=cols, value="bill_depth_mm").servable(
+    target="x-widget"
+)
+y = pn.widgets.Select(name="y", options=cols, value="bill_length_mm").servable(
+    target="y-widget"
+)
+n_clusters = pn.widgets.IntSlider(name="n_clusters", start=1, end=5, value=3).servable(
+    target="n-widget"
+)
+
+brush = alt.selection_interval(name="brush")  # selection of type "interval"
 
-brush = alt.selection_interval(name='brush')  # selection of type "interval"
 
 def get_clusters(n_clusters):
     kmeans = KMeans(n_clusters=n_clusters, n_init=10)
     est = kmeans.fit(penguins[cols].values)
     df = penguins.copy()
-    df['labels'] = est.labels_.astype('str')
+    df["labels"] = est.labels_.astype("str")
     return df
 
+
 def get_chart(x, y, df):
-    centers = df.groupby('labels').mean(numeric_only=True)
-    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'
-            ).add_params(brush).properties(width=800) +
-        alt.Chart(centers)
-            .mark_point(size=250, shape='cross', color='black')
-            .encode(x=x+':Q', y=y+':Q')
+    centers = df.groupby("labels").mean(numeric_only=True)
+    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",
+    ).add_params(brush).properties(width=800) + alt.Chart(centers).mark_point(
+        size=250, shape="cross", color="black"
+    ).encode(
+        x=x + ":Q", y=y + ":Q"
     )
 
-intro = pn.pane.Markdown("""
-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 plot and the table are linked, i.e. selecting on the plot
-will filter the data in the table.\n\n The **`x` marks the center** of
-the cluster.
-""").servable(target='intro')
 
-chart = pn.pane.Vega().servable(target='cluster-plot')
-table = pn.widgets.Tabulator(pagination='remote', page_size=10).servable(target='table')
+intro = pn.pane.Markdown(
+    """
+This app provides an example of **building a simple dashboard using Panel**.
+
+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.
+"""
+).servable(target="intro")
+
+chart = pn.pane.Vega(debounce=10).servable(target="cluster-plot")
+table = pn.widgets.Tabulator(pagination="remote", page_size=10).servable(target="table")
+
 
 def update_table(event=None):
     table.value = get_clusters(n_clusters.value)
 
-n_clusters.param.watch(update_table, 'value')
+
+n_clusters.param.watch(update_table, "value")
+update_table()
+
 
 @pn.depends(x, y, n_clusters, watch=True)
 def update_chart(*events):
     chart.object = get_chart(x.value, y.value, table.value)
 
-@param.depends('brush', watch=True)
-def update_filters(event=None):
-    filters = []
-    for k, v in (getattr(event, 'new') or {}).items():
-        filters.append(dict(field=k, type='>=', value=v[0]))
-        filters.append(dict(field=k, type='<=', value=v[1]))
-    table.filters = filters
 
-update_table()
 update_chart()
+
+
+@param.depends(chart.selection.param.brush, watch=True)
+def update_filters(event):
+    filters = []
+    for k, v in (event or {}).items():
+        filters.append(dict(field=k, type=">=", value=v[0]))
+        filters.append(dict(field=k, type="<=", value=v[1]))
+    table.filters = filters
diff --git a/panel_kmeans/pyscript.toml b/panel_kmeans/pyscript.toml
index ddf7c2a..77f37e4 100644
--- a/panel_kmeans/pyscript.toml
+++ b/panel_kmeans/pyscript.toml
@@ -1,3 +1,10 @@
 name = "KMeans in Panel"
 description = "An example of how to build a dashboard using Panel."
-packages = ["bokeh==3.2.2", "altair", "numpy", "pandas", "scikit-learn", "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",
+    "altair",
+    "numpy",
+    "pandas",
+    "scikit-learn"
+]
diff --git a/panel_streaming/README.md b/panel_streaming/README.md
index f8aafb6..2ab378f 100644
--- a/panel_streaming/README.md
+++ b/panel_streaming/README.md
@@ -1,6 +1,6 @@
 # Panel Streaming Example
 
-This application provides an example of how to handle streaming data and display it in a Panel application.
+This application provides an example of how to handle streaming data and display it in a [Panel](https://panel.holoviz.org/) application.
 
 ## Libraries Used
 
diff --git a/panel_streaming/index.html b/panel_streaming/index.html
index 20301bd..549ee2f 100644
--- a/panel_streaming/index.html
+++ b/panel_streaming/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,24 +32,24 @@
 
         <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.1/dist/css/widgets.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/css/markdown.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/bundled/bootstraptemplate/bootstrap.css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/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"/>
 
         <!-- tabulator scipt -->
-        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
+        <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
 
         <!-- 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_streaming/main.py b/panel_streaming/main.py
index 683175b..9ecd6e7 100644
--- a/panel_streaming/main.py
+++ b/panel_streaming/main.py
@@ -1,16 +1,21 @@
-import panel as pn
+import warnings
+
+warnings.filterwarnings("ignore", category=DeprecationWarning)
+
 import numpy as np
-import pandas as pd
 
+import pandas as pd
+import panel as pn
 from bokeh.models import ColumnDataSource
 from bokeh.plotting import figure
 
-df = pd.DataFrame(np.random.randn(10, 4), columns=list('ABCD')).cumsum()
+df = pd.DataFrame(np.random.randn(10, 4), columns=list("ABCD")).cumsum()
+
+rollover = pn.widgets.IntInput(name="Rollover", value=15)
+follow = pn.widgets.Checkbox(name="Follow", value=True, align="end")
 
-rollover = pn.widgets.IntInput(name='Rollover', value=15)
-follow = pn.widgets.Checkbox(name='Follow', value=True, align='end')
+tabulator = pn.widgets.Tabulator(df, height=450, width=400).servable(target="table")
 
-tabulator = pn.widgets.Tabulator(df, height=450, width=400).servable(target='table')
 
 def color_negative_red(val):
     """
@@ -18,28 +23,31 @@ def color_negative_red(val):
     the css property `'color: red'` for negative
     strings, black otherwise.
     """
-    color = 'red' if val < 0 else 'green'
-    return 'color: %s' % color
+    color = "red" if val < 0 else "green"
+    return "color: %s" % color
+
 
-tabulator.style.applymap(color_negative_red)
+tabulator.style.map(color_negative_red)
 
 p = figure(height=450, width=600)
 
 cds = ColumnDataSource(data=ColumnDataSource.from_df(df))
 
-p.line('index', 'A', source=cds, line_color='red')
-p.line('index', 'B', source=cds, line_color='green')
-p.line('index', 'C', source=cds, line_color='blue')
-p.line('index', 'D', source=cds, line_color='purple')
+p.line("index", "A", source=cds, line_color="red")
+p.line("index", "B", source=cds, line_color="green")
+p.line("index", "C", source=cds, line_color="blue")
+p.line("index", "D", source=cds, line_color="purple")
+
 
 def stream():
     data = df.iloc[-1] + np.random.randn(4)
     tabulator.stream(data, rollover=rollover.value, follow=follow.value)
     value = {k: [v] for k, v in tabulator.value.iloc[-1].to_dict().items()}
-    value['index'] = [tabulator.value.index[-1]]
+    value["index"] = [tabulator.value.index[-1]]
     cds.stream(value)
 
+
 cb = pn.state.add_periodic_callback(stream, 200)
 
-pn.pane.Bokeh(p).servable(target='plot')
-pn.Row(cb.param.period, rollover, follow, width=400).servable(target='controls')
+pn.pane.Bokeh(p).servable(target="plot")
+pn.Row(rollover, follow, width=400).servable(target="controls")
diff --git a/panel_streaming/pyscript.toml b/panel_streaming/pyscript.toml
index ad808c8..d9ecf97 100644
--- a/panel_streaming/pyscript.toml
+++ b/panel_streaming/pyscript.toml
@@ -1,3 +1,6 @@
 name = "Streaming in Panel"
 description = "A simple Panel application showing how to handle streaming data."
-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",
+]
diff --git a/panel_with_hvplot/index.html b/panel_with_hvplot/index.html
index 6911c2d..20749b9 100644
--- a/panel_with_hvplot/index.html
+++ b/panel_with_hvplot/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,24 +28,24 @@
         <link rel="icon" type="image/png" href="./assets/favicon.png" />
 
         <!-- panel CSS -->
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/bundled/theme/default.css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/bundled/theme/material_variables.css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/bundled/theme/material.css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/css/loading.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/css/listpanel.css" type="text/css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.1/dist/css/select.css" type="text/css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/bundled/theme/default.css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/bundled/theme/material_variables.css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/bundled/theme/material.css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/css/loading.css" type="text/css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/css/listpanel.css" type="text/css"/>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/css/select.css" type="text/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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.3.8/dist/bundled/material-components-web@7.0.0/dist/material-components-web.min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/panel.min.js"></script>
+        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@1.5.0-b.2/dist/bundled/material-components-web@7.0.0/dist/material-components-web.min.js"></script>
 
     </head>
 
diff --git a/panel_with_hvplot/main.py b/panel_with_hvplot/main.py
index 13e21ce..6ee7e10 100644
--- a/panel_with_hvplot/main.py
+++ b/panel_with_hvplot/main.py
@@ -1,13 +1,10 @@
 import hvplot.pandas
 import numpy as np
 from js import console
-from pyodide_http import patch_all
 
 import pandas as pd
 import panel as pn
 
-patch_all()
-
 pn.extension(design="material")
 
 csv_file = (
diff --git a/panel_with_hvplot/pyscript.toml b/panel_with_hvplot/pyscript.toml
index 5f800d6..72cebcb 100644
--- a/panel_with_hvplot/pyscript.toml
+++ b/panel_with_hvplot/pyscript.toml
@@ -1,3 +1,10 @@
 name = "Panel and hvPlot"
 description = "Leverage hvPlot interactive feature and extending it with Panel."
-packages = ["bokeh==3.2.2", "panel==1.3.8", "markdown-it-py", "numpy", "pandas", "hvplot", "pyodide-http"]
+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",
+    "markdown-it-py",
+    "numpy",
+    "pandas",
+    "hvplot"
+]