Add examples

support Bokeh 3 Buffers

Author: sdc50

bokeh_django/consumers.py

@@ -154,7 +154,10 @@ async def handle(self, body: bytes) -> None:
         resources = self.resources(server_url) if resources_param != "none" else None
 
         root_url = urljoin(absolute_url, self._prefix) if absolute_url else self._prefix
-        bundle = bundle_for_objs_and_resources(None, resources)  # , root_url=root_url) TODO add root_url argument in bokeh
+        try:
+            bundle = bundle_for_objs_and_resources(None, resources, root_url=root_url)
+        except TypeError:
+            bundle = bundle_for_objs_and_resources(None, resources)
 
         render_items = [RenderItem(token=session.token, elementid=element_id, use_for_title=False)]
         bundle.add(Script(script_for_render_items({}, render_items, app_path=app_path, absolute_url=absolute_url)))
@@ -298,12 +301,21 @@ async def _send_bokeh_message(self, message: Message) -> int:
                 await self.send(text_data=message.content_json)
                 sent += len(message.content_json)
 
-                for header, payload in message._buffers:
+                for buffer in message._buffers:
+                    if isinstance(buffer, tuple):
+                        header, payload = buffer
+                    else:
+                        # buffer is bokeh.core.serialization.Buffer (Bokeh 3)
+                        header = {'id': buffer.id}
+                        payload = buffer.data.tobytes()
+
                     await self.send(text_data=json.dumps(header))
                     await self.send(bytes_data=payload)
                     sent += len(header) + len(payload)
-        except Exception:  # Tornado 4.x may raise StreamClosedError
+
+        except Exception as e:  # Tornado 4.x may raise StreamClosedError
             # on_close() is / will be called anyway
+            log.exception(e)
             log.warning("Failed sending message as connection was closed")
         return sent
 

examples/django_embed/.gitignore

@@ -0,0 +1 @@
+/db.sqlite3

examples/django_embed/README.md

@@ -0,0 +1,7 @@
+Install django, panel and channels (pip only) and run:
+
+```sh
+./manage.py runserver 0.0.0.0:8000
+```
+
+then navigate to <http://127.0.0.1:8000/shape_viewer>, <http://127.0.0.1:8000/sea_surface>, or <http://127.0.0.1:8000/sea_surface_with_template>.

examples/django_embed/bokeh_apps/sea_surface.py

@@ -0,0 +1,25 @@
+from bokeh.io import curdoc
+from bokeh.layouts import column
+from bokeh.models import ColumnDataSource, Slider
+from bokeh.plotting import figure
+from bokeh.sampledata.sea_surface_temperature import sea_surface_temperature
+
+df = sea_surface_temperature.copy()
+source = ColumnDataSource(data=df)
+
+plot = figure(x_axis_type="datetime", y_range=(0, 25), y_axis_label="Temperature (Celsius)",
+                title="Sea Surface Temperature at 43.18, -70.43")
+plot.line("time", "temperature", source=source)
+
+def callback(attr, old, new):
+    if new == 0:
+        data = df
+    else:
+        data = df.rolling(f"{new}D").mean()
+    source.data = ColumnDataSource(data=data).data
+
+slider = Slider(start=0, end=30, value=0, step=1, title="Smoothing by N Days")
+slider.on_change("value", callback)
+
+doc = curdoc()
+doc.add_root(column(slider, plot))

examples/django_embed/django_embed/__init__.py

@@ -0,0 +1,17 @@
+"""
+ASGI config for django_embed project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://channels.readthedocs.io/en/latest/deploying.html
+"""
+
+import os
+
+import django
+from channels.routing import get_default_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'django_embed.settings')
+django.setup()
+application = get_default_application()

examples/django_embed/django_embed/asgi.py

@@ -0,0 +1,10 @@
+from channels.auth import AuthMiddlewareStack
+from channels.routing import ProtocolTypeRouter, URLRouter
+from django.apps import apps
+
+bokeh_app_config = apps.get_app_config('bokeh_django')
+
+application = ProtocolTypeRouter({
+    'websocket': AuthMiddlewareStack(URLRouter(bokeh_app_config.routes.get_websocket_urlpatterns())),
+    'http': AuthMiddlewareStack(URLRouter(bokeh_app_config.routes.get_http_urlpatterns())),
+})

examples/django_embed/django_embed/routing.py

@@ -0,0 +1,121 @@
+"""
+Django settings for django_embed project.
+
+Generated by 'django-admin startproject' using Django 2.2.1.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/2.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/2.2/ref/settings/
+"""
+
+from os.path import abspath, dirname, join
+from pathlib import Path
+
+from bokeh.settings import bokehjsdir
+
+# Build paths inside the project like this: join(BASE_DIR, ...)
+MODULE_DIR = dirname(abspath(__file__))
+BASE_DIR = dirname(MODULE_DIR)
+BASE_PATH = Path(BASE_DIR)
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'i^gyfuyz+zy66k%%hmy-kun(#n)2cj&)zry*+robiqh^x!x_&4'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'channels',
+    'bokeh_django',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'django_embed.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [join(MODULE_DIR, "templates")],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+ASGI_APPLICATION = 'django_embed.routing.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator'},
+    {'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator'},
+    {'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator'},
+    {'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator'},
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/2.2/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/2.2/howto/static-files/
+
+STATIC_URL = '/static/'
+
+STATICFILES_DIRS = [bokehjsdir()]
+
+THEMES_DIR = join(MODULE_DIR, "themes")

examples/django_embed/django_embed/settings.py

@@ -0,0 +1,81 @@
+import numpy as np
+import panel as pn
+import param
+
+from bokeh.plotting import figure
+
+
+class Shape(param.Parameterized):
+
+    radius = param.Number(default=1, bounds=(0, 1))
+
+    def __init__(self, **params) -> None:
+        super().__init__(**params)
+        self.figure = figure(x_range=(-1, 1), y_range=(-1, 1))
+        self.renderer = self.figure.line(*self._get_coords())
+
+    def _get_coords(self):
+        return [], []
+
+    def view(self):
+        return self.figure
+
+class Circle(Shape):
+
+    n = param.Integer(default=100, precedence=-1)
+
+    def __init__(self, **params) -> None:
+        super().__init__(**params)
+
+    def _get_coords(self):
+        angles = np.linspace(0, 2*np.pi, self.n+1)
+        return (self.radius*np.sin(angles),
+                self.radius*np.cos(angles))
+
+    @param.depends('radius', watch=True)
+    def update(self):
+        xs, ys = self._get_coords()
+        self.renderer.data_source.data.update({'x': xs, 'y': ys})
+
+class NGon(Circle):
+
+    n = param.Integer(default=3, bounds=(3, 10), precedence=1)
+
+    @param.depends('radius', 'n', watch=True)
+    def update(self):
+        xs, ys = self._get_coords()
+        self.renderer.data_source.data.update({'x': xs, 'y': ys})
+
+shapes = [NGon(), Circle()]
+
+class ShapeViewer(param.Parameterized):
+
+    shape = param.ObjectSelector(default=shapes[0], objects=shapes)
+
+    @param.depends('shape')
+    def view(self):
+        return self.shape.view()
+
+    @param.depends('shape', 'shape.radius')
+    def title(self):
+        return '## %s (radius=%.1f)' % (type(self.shape).__name__, self.shape.radius)
+
+    def panel(self):
+        expand_layout = pn.Column()
+
+        return pn.Column(
+            pn.pane.HTML('<h1>Bokeh Integration Example using Param and Panel</h1>'),
+            pn.widgets.Tabulator(),
+            pn.Row(
+                pn.Column(
+                    pn.panel(self.param, expand_button=False, expand=True, expand_layout=expand_layout),
+                    "#### Subobject parameters:",
+                    expand_layout),
+                pn.Column(self.title, self.view)
+            ),
+            sizing_mode='stretch_width',
+        )
+
+
+def shape_viewer():
+    return ShapeViewer().panel()

examples/django_embed/django_embed/shape_viewer.py

@@ -0,0 +1,15 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Embedding a Bokeh Apps In Django via autoload.js</title>
+</head>
+
+<body>
+  <div>
+    This Bokeh app below is served by a Django server (via autoload.js):
+  </div>
+  {{ script|safe }}
+</body>
+</html>