🔍 Code Extractor

Generates JavaScript code for autoloading a Bokeh document into a web page element, bundling necessary resources and creating render items for embedding.

Purpose

This function creates the JavaScript autoload script that enables embedding Bokeh visualizations into web pages dynamically. It bundles document resources, creates render items with specified tokens and element IDs, and generates the final JavaScript code using Bokeh's AUTOLOAD_JS template. This is typically used in server-side rendering scenarios where Bokeh content needs to be embedded into existing HTML pages.

Source Code

def autoload_js_script(doc, resources, token, element_id, app_path, absolute_url):
    resources = Resources.from_bokeh(resources)
    bundle = bundle_resources(doc.roots, resources)

    render_items = [RenderItem(token=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)))

    return AUTOLOAD_JS.render(bundle=bundle, elementid=element_id)

Parameters

Parameter Details

doc: A Bokeh Document object containing the visualization roots and models to be rendered. This represents the complete state of the Bokeh application or plot.

resources: Bokeh resources specification (can be 'inline', 'cdn', or a Resources object) that determines how JavaScript and CSS dependencies are loaded. Will be converted to a Resources object internally.

token: A unique token string used to identify this specific render session. This token is used for security and session management in the Bokeh server protocol.

element_id: The HTML element ID where the Bokeh content should be rendered. This must match an existing element in the target HTML page.

app_path: The application path on the server where the Bokeh app is hosted. Used to construct proper URLs for WebSocket connections and resource loading.

absolute_url: The absolute URL to the Bokeh server application. Used for generating fully qualified URLs in the autoload script for cross-origin or external embedding scenarios.

Return Value

Returns a string containing the complete JavaScript code that can be embedded in an HTML page. This script, when executed, will load all necessary Bokeh resources and render the document into the specified HTML element. The returned string is ready to be inserted into a <script> tag.

Dependencies

• bokeh
• param

Required Imports

from bokeh.core.templates import AUTOLOAD_JS
from bokeh.embed.bundle import Script
from bokeh.embed.elements import script_for_render_items
from bokeh.embed.util import RenderItem
from resources import Resources
from resources import bundle_resources

Usage Example

from bokeh.document import Document
from bokeh.plotting import figure
from bokeh.resources import CDN
import uuid

# Create a Bokeh document with a plot
doc = Document()
p = figure(title='Example Plot')
p.line([1, 2, 3], [4, 5, 6])
doc.add_root(p)

# Generate autoload script
token = str(uuid.uuid4())
element_id = 'bokeh-plot-container'
app_path = '/myapp'
absolute_url = 'http://localhost:5006/myapp'

js_script = autoload_js_script(
    doc=doc,
    resources=CDN,
    token=token,
    element_id=element_id,
    app_path=app_path,
    absolute_url=absolute_url
)

# The js_script can now be embedded in HTML:
# <div id="bokeh-plot-container"></div>
# <script>{js_script}</script>

Best Practices

• Ensure the element_id matches an existing HTML element in the target page before the script executes
• Use unique tokens for each render session to prevent conflicts and ensure security
• The absolute_url should be accessible from the client browser for proper WebSocket connections
• Consider using CDN resources for production to reduce server load, or inline resources for offline scenarios
• The returned script should be inserted after the target HTML element exists in the DOM
• Keep the doc object in scope and properly managed on the server side as it maintains the application state

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• class AutoloadJsHandler 75.3% similar

  A custom Tornado request handler that generates and serves the Bokeh autoload JavaScript chunk for embedding Bokeh applications in web pages.

  From: /tf/active/vicechatdev/patches/server.py

• function server_html_page_for_session 62.4% similar

  Generates a complete HTML page for a Bokeh server session by bundling resources and rendering document roots with session token.

  From: /tf/active/vicechatdev/patches/server.py

• function modify_document 60.7% similar

  Modifies a Bokeh document by executing a Python script/module within the document's context, with support for autoreload functionality and error handling.

  From: /tf/active/vicechatdev/patches/server.py

• function init_doc 53.4% similar

  Initializes a Bokeh document by registering session information and setting up document lifecycle event handlers for Panel applications.

  From: /tf/active/vicechatdev/patches/server.py

• function _eval_panel 50.5% similar

  Evaluates and initializes a panel component (function, template, or panel object) within a Bokeh document context, handling different panel types and modifying the document accordingly.

  From: /tf/active/vicechatdev/patches/server.py