bokeh.core.templates¶

Provide Jinja2 templates used by Bokeh to embed Bokeh models (e.g. plots, widgets, layouts) in various ways.

AUTOLOAD_JS = <Template 'autoload_js.js'>¶

Renders JavaScript code for “autoloading”.

The code automatically and asynchronously loads BokehJS (if necessary) and then replaces the AUTOLOAD_TAG <script> tag that calls it with the rendered model.

Parameters:	elementid (str) – the unique id for the script tag js_urls (list) – URLs of JS files making up Bokeh library css_urls (list) – CSS urls to inject

Template: autoload_js.js

(function(global) {
  function now() {
    return new Date();
  }

  var force = {{ force|default(False)|json }};

  if (typeof (window._bokeh_onload_callbacks) === "undefined" || force === true) {
    window._bokeh_onload_callbacks = [];
    window._bokeh_is_loading = undefined;
  }


  {% block autoload_init %}
  {% endblock %}

  function run_callbacks() {
    window._bokeh_onload_callbacks.forEach(function(callback) { callback() });
    delete window._bokeh_onload_callbacks
    console.info("Bokeh: all callbacks have finished");
  }

  function load_libs(js_urls, callback) {
    window._bokeh_onload_callbacks.push(callback);
    if (window._bokeh_is_loading > 0) {
      console.log("Bokeh: BokehJS is being loaded, scheduling callback at", now());
      return null;
    }
    if (js_urls == null || js_urls.length === 0) {
      run_callbacks();
      return null;
    }
    console.log("Bokeh: BokehJS not loaded, scheduling load and callback at", now());
    window._bokeh_is_loading = js_urls.length;
    for (var i = 0; i < js_urls.length; i++) {
      var url = js_urls[i];
      var s = document.createElement('script');
      s.src = url;
      s.async = false;
      s.onreadystatechange = s.onload = function() {
        window._bokeh_is_loading--;
        if (window._bokeh_is_loading === 0) {
          console.log("Bokeh: all BokehJS libraries loaded");
          run_callbacks()
        }
      };
      s.onerror = function() {
        console.warn("failed to load library " + url);
      };
      console.log("Bokeh: injecting script tag for BokehJS library: ", url);
      document.getElementsByTagName("head")[0].appendChild(s);
    }
  };

  {%- if elementid -%}
  var element = document.getElementById({{ elementid|json }});
  if (element == null) {
    console.log("Bokeh: ERROR: autoload.js configured with elementid '{{ elementid }}' but no matching script tag was found. ")
    return false;
  }
  {%- endif %}

  var js_urls = {{ js_urls|json }};

  var inline_js = [
    {%- for js in js_raw %}
    function(Bokeh) {
      {{ js|indent(6) }}
    },
    {% endfor -%}
    function(Bokeh) {
      {%- for url in css_urls %}
      console.log("Bokeh: injecting CSS: {{ url }}");
      Bokeh.embed.inject_css({{ url|json }});
      {%- endfor %}
      {%- for css in css_raw %}
      console.log("Bokeh: injecting raw CSS");
      Bokeh.embed.inject_raw_css({{ css }});
      {%- endfor %}
    }
  ];

  function run_inline_js() {
    {% block run_inline_js %}
    for (var i = 0; i < inline_js.length; i++) {
      inline_js[i](window.Bokeh);
    }
    {% endblock %}
  }

  if (window._bokeh_is_loading === 0) {
    console.log("Bokeh: BokehJS loaded, going straight to plotting");
    run_inline_js();
  } else {
    load_libs(js_urls, function() {
      console.log("Bokeh: BokehJS plotting callback run at", now());
      run_inline_js();
    });
  }
}(this));

AUTOLOAD_NB_JS = <Template 'autoload_nb_js.js'>¶

Template: autoload_nb_js.js

{% extends "autoload_js.js" %}

{% block autoload_init %}
  if (typeof (window._bokeh_timeout) === "undefined" || force === true) {
    window._bokeh_timeout = Date.now() + {{ timeout|default(0)|json }};
    window._bokeh_failed_load = false;
  }

  var NB_LOAD_WARNING = {'data': {'text/html':
     "<div style='background-color: #fdd'>\n"+
     "<p>\n"+
     "BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \n"+
     "may be due to a slow or bad network connection. Possible fixes:\n"+
     "</p>\n"+
     "<ul>\n"+
     "<li>re-rerun `output_notebook()` to attempt to load from CDN again, or</li>\n"+
     "<li>use INLINE resources instead, as so:</li>\n"+
     "</ul>\n"+
     "<code>\n"+
     "from bokeh.resources import INLINE\n"+
     "output_notebook(resources=INLINE)\n"+
     "</code>\n"+
     "</div>"}};

  function display_loaded() {
    if (window.Bokeh !== undefined) {
      var el = document.getElementById({{ elementid|json }});
      el.textContent = "BokehJS " + Bokeh.version + " successfully loaded.";
    } else if (Date.now() < window._bokeh_timeout) {
      setTimeout(display_loaded, 100)
    }
  }

  {%- if comms_target -%}
  if ((window.Jupyter !== undefined) && Jupyter.notebook.kernel) {
    comm_manager = Jupyter.notebook.kernel.comm_manager
    comm_manager.register_target({{ comms_target|json }}, function () {});
  }
  {%- endif -%}
{% endblock %}

{% block run_inline_js %}
    if ((window.Bokeh !== undefined) || (force === true)) {
      for (var i = 0; i < inline_js.length; i++) {
        inline_js[i](window.Bokeh);
      }
      {%- if elementid -%}
      if (force === true) {
        display_loaded();
      }
      {%- endif -%}
    } else if (Date.now() < window._bokeh_timeout) {
      setTimeout(run_inline_js, 100);
    } else if (!window._bokeh_failed_load) {
      console.log("Bokeh: BokehJS failed to load within specified timeout.");
      window._bokeh_failed_load = true;
    } else if (force !== true) {
      var cell = $(document.getElementById({{ elementid|json }})).parents('.cell').data().cell;
      cell.output_area.append_execute_result(NB_LOAD_WARNING)
    }
{% endblock %}

AUTOLOAD_TAG = <Template 'autoload_tag.html'>¶

Renders <script> tags that automatically load BokehJS (if necessary) and then renders a Bokeh model or document. The document may be specified as either an embedded doc ID or a server session ID. If a specific model ID is not specified, the entire document will be rendered.

Parameters:	src_path (str) – path to AUTOLOAD script elementid (str) – the a unique id for the script tag modelid (str) – The Bokeh model id for the object to render (if missing, render the whole doc; if present, only render the one model) docid (str) – The id of the embedded Bokeh document to render

Note

This script injects a <div> in place, so must be placed under <body>.

Template: autoload_tag.html

<script
    src="{{ src_path }}"
    id="{{ elementid }}"
    data-bokeh-model-id="{{ modelid }}"
    data-bokeh-doc-id="{{ docid }}"
></script>

CSS_RESOURCES = <Template 'css_resources.html'>¶

Renders HTML that loads Bokeh CSS according to the configuration in a Resources object.

Parameters:	css_files (list[str]) – a list of URIs for CSS files to include css_raw (list[str]) – a list of raw CSS snippets to put between <style> tags

Template: css_resources.html

{%- for file in css_files %}
<link rel="stylesheet" href="{{ file }}" type="text/css" />
{%- endfor %}

{%- for css in css_raw %}
<style>
    {{ css|indent(8) }}
</style>
{%- endfor %}

DOC_JS = <Template 'doc_js.js'>¶

Template: doc_js.js

var docs_json = {{ docs_json }};
var render_items = {{ render_items }};

Bokeh.embed.embed_items(docs_json, render_items{%- if app_path -%}, "{{ app_path }}" {%- endif -%}{%- if absolute_url -%}, "{{ absolute_url }}" {%- endif -%});

FILE = <Template 'file.html'>¶

Renders Bokeh models into a basic .html file.

Parameters:	title (str) – value for <title> tags plot_resources (str) – typically the output of RESOURCES plot_script (str) – typically the output of PLOT_SCRIPT plot_div (str) – typically the output of PLOT_DIV

Users can customize the file output by providing their own Jinja2 template that accepts these same parameters.

Template: file.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{ title if title else "Bokeh Plot" }}</title>
        {{ bokeh_css }}
        {{ bokeh_js }}
        <style>
          html {
            width: 100%;
            height: 100%;
          }
          body {
            width: 90%;
            height: 100%;
            margin: auto;
          }
        </style>
    </head>
    <body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
    </body>
</html>

JS_RESOURCES = <Template 'js_resources.html'>¶

Renders HTML that loads BokehJS JavaScript code and CSS according to the configuration in a Resources object.

Parameters:	js_files (list[str]) – a list of URIs for JS files to include js_raw (list[str]) – a list of raw JS snippets to put between <style> tags

Template: js_resources.html

{%- for file in js_files %}
<script type="text/javascript" src="{{ file }}"></script>
{%- endfor %}

{%- for js in js_raw %}
<script type="text/javascript">
    {{ js|indent(8) }}
</script>
{%- endfor %}

NOTEBOOK_LOAD = <Template 'notebook_load.html'>¶

Renders HTML for loading BokehJS JavaScript code and CSS into a Jupyter Notebook according to a Resources object.

Parameters:

plot_resources (str) – typically the output of RESOURCES verbose (bool) – whether to display verbose info about BokehJS configuration, etc bokeh_version (str) – the current version of Bokeh js_info (str) – information about the location, version, etc. of BokehJS code css_info (str) – information about the location, version, etc. of BokehJS css warnings (list[str]) – a list of warnings to display to user

Template: notebook_load.html

    {%- if not hide_banner %}
    <div class="bk-root">
        <a href="http://bokeh.pydata.org" target="_blank" class="bk-logo bk-logo-small bk-logo-notebook"></a>
        <span id="{{ element_id }}">Loading BokehJS ...</span>
    </div>

    {%- if verbose %}
    <style>
        p.bokeh_notebook { margin-left: 24px; }
        table.bokeh_notebook {
            border: 1px solid #e7e7e7;
            margin: 5px;
            margin-left: 24px;
            width: 80%;
        }
        tr.bokeh_notebook {
            border: 1px solid #e7e7e7;
            background-color: #FFF;
        }
        th.bokeh_notebook {
            border: 1px solid #e7e7e7;
            background-color: #f8f8f8;
            text-align: center;
        }
        td.bokeh_notebook {
            border: 1px solid #e7e7e7;
            background-color: #d2d7ec;
            text-align: left;
        }
    </style>
    <p class="bokeh_notebook">Using Settings:</p>
    <table class="bokeh_notebook">
        <tr class="bokeh_notebook">
            <th class="bokeh_notebook">Bokeh</th>
            <th class="bokeh_notebook">version</th>
            <td class="bokeh_notebook">{{ bokeh_version }}</td>
        </tr>
        <tr class="bokeh_notebook">
            <th class="bokeh_notebook" rowspan="2">BokehJS</th>
            <th class="bokeh_notebook">js</th>
            <td class="bokeh_notebook">{{ js_info }}</td>
        </tr>
        <tr class="bokeh_notebook">
            <th class="bokeh_notebook">css</th>
            <td class="bokeh_notebook">{{ css_info }}</td>
        </tr>
    </table>
    {%- endif %}
    {%- for warning in warnings %}
    <p style="background-color: #f2d7dc;">{{ warning }}</p>
    {%- endfor %}
    {%- endif %}

NOTEBOOK_DIV = <Template 'notebook_div.html'>¶

Renders a div to display a Bokeh model into a Jupyter Notebook.

Parameters:	plot_script (str) – typically the output of PLOT_SCRIPT plot_div (str) – typically the output of PLOT_DIV

Template: notebook_div.html

{{ plot_div|indent(4) }}
<script type="text/javascript">
  {{ plot_script|indent(2) }}
</script>

PLOT_DIV = <Template 'plot_div.html'>¶

Renders a basic plot div, that can be used in conjunction with PLOT_JS.

Parameters:	elementid (str) – a unique identifier for the <div> a PLOT_JS template should be configured with the same elementid

Template: plot_div.html

<div class="bk-root">
    <div class="bk-plotdiv" id="{{ elementid }}"></div>
</div>

SCRIPT_TAG = <Template 'script_tag.html'>¶

Renders a <script> tag for raw JavaScript code.

Parameters:	js_code (str) – raw JavaScript code to put in the tag.

Template: script_tag.html

<script type="text/javascript">
    {{ js_code }}
</script>

NOTEBOOK_CELL_OBSERVER = <Template 'notebook_cell_observer.js'>¶

Registers a MutationObserver that can detect deletion of cells with a class of ‘bokeh_class’

Parameters:	inner_block (str) – Javascript block to be executed when deletion detected

The supplied Javascript is executed with the id of the destroyed div in

scope as variable destroyed_id.

Template: notebook_cell_observer.js

var target = document.getElementById('notebook-container');

var observer = new MutationObserver(function(mutations) {

   for (var i = 0; i < mutations.length; i++) {
      for (var j=0; j < mutations[i].removedNodes.length; j++) {
        for (var k=0; k < mutations[i].removedNodes[j].childNodes.length; k++)
          var bokeh_selector = $(mutations[i].removedNodes[j].childNodes[k]).find(".bokeh_class");
          if (bokeh_selector) {
            if (bokeh_selector.length > 0) {
               var destroyed_id = bokeh_selector[0].id;
                {{inner_block}}
            }
          }
      }
   }
});
observer.observe(target, { childList: true, subtree:true });