Make all generated HTML elements have unique and safe IDs (#13636)

* Make all generated HTML elements have unique and safe IDs

* Fix type of `title in `html_page_for_render_items()`

* Fix `__all__` in src/bokeh/embed/notebook.py

* Make function's signature more readable

* Add regression tests

src/bokeh/embed/elements.py

@@ -39,7 +39,7 @@
 )
 from ..document.document import DEFAULT_TITLE
 from ..settings import settings
-from ..util.serialization import make_id
+from ..util.serialization import make_globally_unique_css_safe_id
 from .util import RenderItem
 from .wrappers import wrap_in_onload, wrap_in_safely, wrap_in_script_tag
 
@@ -79,29 +79,34 @@ def div_for_render_item(item: RenderItem) -> str:
     '''
     return PLOT_DIV.render(doc=item, macros=MACROS)
 
-def html_page_for_render_items(bundle: Bundle | tuple[str, str], docs_json: dict[ID, DocJson],
-        render_items: list[RenderItem], title: str, template: Template | str | None = None,
-        template_variables: dict[str, Any] = {}) -> str:
+def html_page_for_render_items(
+    bundle: Bundle | tuple[str, str],
+    docs_json: dict[ID, DocJson],
+    render_items: list[RenderItem],
+    title: str | None,
+    template: Template | str | None = None,
+    template_variables: dict[str, Any] = {},
+) -> str:
     ''' Render an HTML page from a template and Bokeh render items.
 
     Args:
         bundle (tuple):
-            a tuple containing (bokehjs, bokehcss)
+            A tuple containing (bokeh_js, bokeh_css).
 
         docs_json (JSON-like):
-            Serialized Bokeh Document
+            Serialized Bokeh Document.
 
-        render_items (RenderItems)
-            Specific items to render from the document and where
+        render_items (RenderItems):
+            Specific items to render from the document and where.
 
-        title (str or None)
-            A title for the HTML page. If None, DEFAULT_TITLE is used
+        title (str or None):
+            A title for the HTML page. If None, DEFAULT_TITLE is used.
 
-        template (str or Template or None, optional) :
+        template (str or Template or None, optional):
             A Template to be used for the HTML page. If None, FILE is used.
 
         template_variables (dict, optional):
-            Any Additional variables to pass to the template
+            Any Additional variables to pass to the template.
 
     Returns:
         str
@@ -112,7 +117,7 @@ def html_page_for_render_items(bundle: Bundle | tuple[str, str], docs_json: dict
 
     bokeh_js, bokeh_css = bundle
 
-    json_id = make_id()
+    json_id = make_globally_unique_css_safe_id()
     json = escape(serialize_json(docs_json), quote=False)
     json = wrap_in_script_tag(json, "application/json", json_id)
 

src/bokeh/embed/notebook.py

@@ -40,7 +40,7 @@
 #-----------------------------------------------------------------------------
 
 __all__ = (
-    'notebook_content'
+    'notebook_content',
 )
 
 #-----------------------------------------------------------------------------

src/bokeh/embed/server.py

@@ -31,7 +31,7 @@
 # Bokeh imports
 from ..core.templates import AUTOLOAD_REQUEST_TAG, FILE
 from ..resources import DEFAULT_SERVER_HTTP_URL
-from ..util.serialization import make_id
+from ..util.serialization import make_globally_unique_css_safe_id
 from ..util.strings import format_docstring
 from .bundle import bundle_for_objs_and_resources
 from .elements import html_page_for_render_items
@@ -107,7 +107,7 @@ def server_document(url: str = "default", relative_urls: bool = False, resources
 
     app_path = _get_app_path(url)
 
-    elementid = make_id()
+    elementid = make_globally_unique_css_safe_id()
     src_path = _src_path(url, elementid)
 
     src_path += _process_app_path(app_path)
@@ -197,7 +197,7 @@ def server_session(model: Model | None = None, session_id: ID | None = None, url
 
     app_path = _get_app_path(url)
 
-    elementid = make_id()
+    elementid = make_globally_unique_css_safe_id()
     modelid = "" if model is None else model.id
     src_path = _src_path(url, elementid)
 

tests/unit/bokeh/embed/test_elements.py

@@ -16,8 +16,13 @@
 # Imports
 #-----------------------------------------------------------------------------
 
+# Standard library imports
+import re
+
 # Bokeh imports
 from bokeh.core.types import ID
+from bokeh.document.json import DocJson
+from bokeh.embed.bundle import URL, Bundle
 from bokeh.embed.util import RenderItem
 
 # Module under test
@@ -42,7 +47,30 @@ def test_render(self) -> None:
             """<div id="foo123" style="display: contents;"></div>"""
 
 class Test_html_page_for_render_items:
-    pass
+    def test_issue_13629(self) -> None:
+        bundle = Bundle(js_files=[
+            URL(url='http://localhost:5006/static/js/bokeh.js'),
+        ])
+        render_item = RenderItem(docid=ID("doc123"), elementid=ID("foo123"))
+        docs_json = {
+            ID("doc123"): DocJson(
+                version="3.4",
+                title="Bokeh Plot",
+                roots=[],
+            ),
+        }
+        html = bee.html_page_for_render_items(bundle, docs_json, [render_item], None)
+
+        script_pattern = re.compile(r'<script\s*type="application/json"\s*id="([^"]*)"\s*>')
+        uuid_pattern = re.compile(r"^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$")
+
+        result = script_pattern.search(html)
+        assert result is not None
+
+        (id,) = result.groups()
+
+        result = uuid_pattern.match(id)
+        assert result is not None
 
 class Test_script_for_render_items:
     pass