bokeh issue on loading katex in jupyter notebook

Question

I'm trying to replicate the bokeh latex example mentioned at https://docs.bokeh.org/en/latest/docs/user_guide/extensions_gallery/latex.html#userguide-extensions-examples-latex in jupyter notebook for LabelSet. I could see the katex.min.js being loaded from web console. However when the LatexLabel renders, it states katex not defined. Katex JS doc says, it should be available globally once js is loaded.

import * as p from "core/properties"
import {LabelSet, LabelSetView} from "models/annotations/label_set"
declare const katex: any

export class LatexLabelSetView extends LabelSetView {
  model: LatexLabelSet

  render(): void {
    const draw = this._v_css_text.bind(this)
    const {ctx} = this.plot_view.canvas_view
    const [sx, sy] = this._map_data()

    for (let i = 0, end = this._text.length; i < end; i++) {
      try {
        draw(ctx, i, this._text[i], sx[i] + this._x_offset[i], sy[i] - this._y_offset[i], this._angle[i])
        katex.render(this._text[i], this.el, {displayMode: true})
      }
      catch(e) {
        console.log( 'Error: ' + e);
      }
    }
  }
}

class LatexLabelSet(LabelSet):
    __javascript__ = ["https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"]
    __css__ = ["https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"]
    __implementation__ = TypeScript(TS_CODE)

Also tried adding the script element into document root. No luck though.

export class LatexLabelSet extends LabelSet {
  properties: LatexLabelSet.Props

  constructor(attrs?: Partial<LatexLabelSet.Attrs>) {
    super(attrs)
  }

  static init_LatexLabelSet() {
    let jsNode = document.createElement('script')
    jsNode.id = 'bokeh-katex-js'
    jsNode.src = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
    let cssNode = document.createElement('link')
    cssNode.id = 'bokeh-katex-css'
    cssNode.rel= 'stylesheet'
    cssNode.href = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
    document.getElementsByClassName('bk-root')[0].appendChild(cssNode)
    document.getElementsByClassName('bk-root')[0].appendChild(jsNode)
    this.prototype.default_view = LatexLabelSetView
  }
}

Any directions would be helpful.

Maybe back up some, does it work outside the notebook? Also, it is really, really important to include relevant version information in all questions, every time. — bigreddot, Nov 11 '19 at 04:52
I'm using Bokeh `1.0.2` and katex js `0.11` on python 3.7 . I have not tried outside notbook. I will try saving it to a file. — revendar, Nov 11 '19 at 05:00
Also are you calling `output_notebook` *after* you define this custom model? It is the `output_notebook` call that actually makes any custom model definitions available on the JS side, so it absolutely must come after the custom model definition. — bigreddot, Nov 11 '19 at 05:00
Yes. I'm calling `output_notebook` after I have the Figure object(along with custom model) prepared. — revendar, Nov 11 '19 at 05:02
I also tried adding the script element into document root. But nothing changed. Updated question with that detail — revendar, Nov 11 '19 at 05:04
1.0.2 is fairly old at this point, and the BokehJS API is only now reaching a level of stability. You should refer to the example from your actual version: https://docs.bokeh.org/en/1.0.2/docs/user_guide/extensions_gallery/latex.html#userguide-extensions-examples-latex — bigreddot, Nov 11 '19 at 05:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/202137/discussion-between-revendar-and-bigreddot). — revendar, Nov 11 '19 at 07:43
I don't use SO chat (already to many channels to monitor). I'm happy to continue on the project Discourse https://discourse.bokeh.org — bigreddot, Nov 11 '19 at 10:27

score 1 · Answer 1 · edited Sep 15 '21 at 18:54

Bokeh 2.4 adds support for LaTeX (and MathML) to some elements in Bokeh directly (no need to use an extension). Currently, you can use LaTeX on axis labels, tick labels, div widgets, and paragraph widgets, and this also works in Jupyter notebooks. LaTeX support for more elements should be added soon. For more information about the new math text feature and how to use them, see the Bokeh 2.4 release blogpost, the new blackbody radiation example, and the Bokeh user guide!

score -1 · Answer 2 · edited Sep 15 '21 at 18:56

Note from maintainers: Initial built in LaTeX support was added in version 2.4, see this new answer https://stackoverflow.com/a/69198423/3406693

As stated in https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#components, this is not possible to achieve within the notebook.

It says

Note that in Jupyter Notebooks, it is not possible to use components and show in the same notebook cell.

Indeed, if you use the code below, it opens a new tab with the plot and the formula, but if you call output_notebook(), the text does not appear and the browser console throws Uncaught ReferenceError: katex is not defined.

p = figure(title="LaTex Demonstration")
p.line([0,0,1,1,0],[0,1,1,0,0])
latex = LatexLabel(text=r"e^{i\pi}+1=0", 
                   x=0.4, y=0.55,
                   render_mode='css', text_font_size='16pt',
                   background_fill_alpha=0)
p.add_layout(latex)
show(p)

Working in new tab:

Not working inside notebook:

bokeh issue on loading katex in jupyter notebook

2 Answers2