TeX working on div widgets

bokeh · mattpap · Sep 13, 2021 · Sep 10, 2021 · Sep 11, 2021 · Sep 11, 2021
commit 2bcffb9ec6b951448f8d55dd221694000f91895e
diff --git a/bokeh/embed/bundle.py b/bokeh/embed/bundle.py
@@ -420,7 +420,14 @@ def _use_mathjax(objs: Sequence[Model | Document]) -> bool:
         bool
     '''
     from ..models.text import MathText
-    return _any(objs, lambda obj: isinstance(obj, MathText))
+
+    def model_require_mathjax(model: Model) -> bool:
+        ''' If any model explicit require MathJax with enable_tex option set to true
+        '''
+        properties = model._property_values
+        return properties.get('enable_tex', False)
+
+    return _any(objs, lambda obj: isinstance(obj, MathText) or model_require_mathjax(obj))
 
 def _use_gl(objs: Sequence[Model | Document]) -> bool:
     ''' Whether a collection of Bokeh objects contains a plot requesting WebGL

diff --git a/bokeh/models/widgets/markups.py b/bokeh/models/widgets/markups.py
@@ -94,6 +94,9 @@ class Div(Markup):
 
     This Bokeh model corresponds to an HTML ``<div>`` element.
 
+    Content can be interpreted as \
+    `TeX and LaTeX input <https://docs.mathjax.org/en/latest/basic/mathematics.html#tex-and-latex-input/>` \
+    setting enable_tex to ``True``
     '''
 
     __example__ = "sphinx/source/docs/user_guide/examples/interaction_div.py"
@@ -103,6 +106,11 @@ class Div(Markup):
     The default value is ``False``, meaning contents are rendered as HTML.
     """)
 
+    enable_tex = Bool(False, help="""
+    Whether the contents should be rendered including TeX/LaTeX input.
+    The default value is ``False``, and only applies when rendering as HTML (that is, when render_as_text is ``False``)
+    """)
+
 class PreText(Paragraph):
     ''' A block (paragraph) of pre-formatted text.
 

diff --git a/bokehjs/src/lib/external/mathjax.d.ts b/bokehjs/src/lib/external/mathjax.d.ts
@@ -1,7 +1,13 @@
 declare namespace MathJax {
   type TeXMacros = {[key: string]: string | [string, number]}
+  type ConvertOptions = {
+    display?: boolean
+    em?: number
+    ex?: number
+    containerWidth?: number
+  }
 
-  function tex2svg(input: string, macros?: TeXMacros): HTMLElement
+  function tex2svg(input: string, options?: ConvertOptions, macros?: TeXMacros): HTMLElement
   function ascii2svg(input: string): HTMLElement
   function mathml2svg(input: string): HTMLElement
 }
diff --git a/bokehjs/src/lib/models/text/math_text.ts b/bokehjs/src/lib/models/text/math_text.ts
@@ -414,7 +414,7 @@ export class TeXView extends MathTextView {
 
   protected _process_text(text: string): HTMLElement | undefined {
     // TODO: allow plot/document level configuration of macros
-    return this.provider.MathJax?.tex2svg(text, this.model.macros)
+    return this.provider.MathJax?.tex2svg(text, undefined, this.model.macros)
   }
 }
 
@@ -423,6 +423,7 @@ export namespace TeX {
 
   export type Props = MathText.Props & {
     macros: p.Property<{[key: string]: string | [string, number]}>
+    inline: p.Property<boolean>
   }
 }
 
@@ -439,8 +440,9 @@ export class TeX extends MathText {
   static {
     this.prototype.default_view = TeXView
 
-    this.define<TeX.Props>(({Number, String, Dict, Tuple, Or}) => ({
+    this.define<TeX.Props>(({Boolean, Number, String, Dict, Tuple, Or}) => ({
       macros: [ Dict(Or(String, Tuple(String, Number))), {} ],
+      inline: [ Boolean, false ],
     }))
   }
 }
diff --git a/bokehjs/src/lib/models/text/mathjax/index.ts b/bokehjs/src/lib/models/text/mathjax/index.ts
@@ -12,19 +12,26 @@ RegisterHTMLHandler(adaptor)
 
 const svg = new SVG({fontCache: "local"})
 
-const options = {
-  display: true,
-  em: 16,
-  ex: 8,
-  containerWidth: 80*16,
+type ConvertOptions = {
+  display?: boolean
+  em?: number
+  ex?: number
+  containerWidth?: number
 }
 
 type TeXMacros = {[key: string]: string | [string, number]}
 
-export function tex2svg(formula: string, macros: TeXMacros = {}): HTMLElement {
+export function tex2svg(formula: string, options?: ConvertOptions, macros: TeXMacros = {}): HTMLElement {
+  const convert_options: ConvertOptions = {
+    display: true,
+    em: 16,
+    ex: 8,
+    containerWidth: 80*16,
+    ...options,
+  }
   const tex = new TeX({packages: AllPackages, macros})
   const tex_to_svg = mathjax.document("", {InputJax: tex, OutputJax: svg})
-  return tex_to_svg.convert(formula, options)
+  return tex_to_svg.convert(formula, convert_options)
 }
 
 export function ascii2svg(_formula: string): HTMLElement {
@@ -38,5 +45,5 @@ export function ascii2svg(_formula: string): HTMLElement {
 export function mathml2svg(formula: string): HTMLElement {
   const mathml = new MathML({})
   const mathml_to_svg = mathjax.document("", {InputJax: mathml, OutputJax: svg})
-  return mathml_to_svg.convert(formula, options)
+  return mathml_to_svg.convert(formula)
 }
diff --git a/bokehjs/src/lib/models/text/utils.ts b/bokehjs/src/lib/models/text/utils.ts
@@ -0,0 +1,61 @@
+import {PlainText, TeX} from "../index"
+
+export function find_math_parts(text: string): (PlainText | TeX)[] {
+  type Delimiter = {
+    start: string
+    end: string
+    inline: boolean
+    nextIndex?: number
+  }
+
+  const delimiters: Delimiter[] = [
+    {start: "$$", end: "$$", inline: false},
+    {start: "\\[", end: "\\]", inline: false},
+    {start: "\\(", end: "\\)", inline: true},
+  ]
+
+  const result: (PlainText | TeX)[] = []
+  let remaining_text = text
+
+  const find_end = (delimiter?: Delimiter) => {
+    if (!delimiter) {
+      result.push(new PlainText({text: remaining_text}))
+      remaining_text = ""
+      return
+    }
+
+    if (remaining_text.includes(delimiter.start)) {
+      const index = remaining_text.indexOf(delimiter.start)
+
+      if (remaining_text.slice(index + 2).includes(delimiter.end)) {
+        result.push(new PlainText({text: remaining_text.slice(0, index)}))
+        remaining_text = remaining_text.slice(index + 2)
+
+        const closing_index = remaining_text.indexOf(delimiter.end)
+        result.push(
+          new TeX({
+            text: remaining_text.slice(0, closing_index),
+            inline: delimiter.inline,
+          })
+        )
+        remaining_text = remaining_text.slice(closing_index + 2)
+      }
+    }
+  }
+
+  const find_next_delimiter = () =>
+    delimiters
+      .map((delimiter) => ({
+        ...delimiter,
+        nextIndex: remaining_text.indexOf(delimiter.start),
+      }))
+      .sort((a, b) => a.nextIndex - b.nextIndex)
+      .filter((delimiter) => delimiter.nextIndex >= 0)[0]
+
+  while (remaining_text) {
+    console.log(find_next_delimiter())
+    find_end(find_next_delimiter())
+  }
+
+  return result.filter(Boolean).filter(el => el.text)
+}
diff --git a/bokehjs/src/lib/models/widgets/div.ts b/bokehjs/src/lib/models/widgets/div.ts
@@ -1,14 +1,36 @@
 import {Markup, MarkupView} from "./markup"
 import * as p from "core/properties"
+import {BundleProvider, MathJaxProvider} from "models/text/providers"
+import {find_math_parts} from "models/text/utils"
+import {TeX} from "models"
 
+const default_provider: MathJaxProvider = new BundleProvider()
 export class DivView extends MarkupView {
   override model: Div
 
+  get provider(): MathJaxProvider {
+    return default_provider
+  }
+
+  override async lazy_initialize() {
+    await super.lazy_initialize()
+
+    if (this.provider.status == "not_started")
+      await this.provider.fetch()
+  }
+
   override render(): void {
     super.render()
     if (this.model.render_as_text)
       this.markup_el.textContent = this.model.text
-    else
+    else if (this.model.enable_tex) {
+      const html_with_svgs = find_math_parts(this.model.text).map(el => {
+        if (el instanceof TeX) return this.provider.MathJax?.tex2svg(el.text, {display: !el.inline}).outerHTML
+        else return el.text
+      }).join("")
+
+      this.markup_el.innerHTML = html_with_svgs
+    } else
       this.markup_el.innerHTML = this.model.text
   }
 }
@@ -18,6 +40,7 @@ export namespace Div {
 
   export type Props = Markup.Props & {
     render_as_text: p.Property<boolean>
+    enable_tex: p.Property<boolean>
   }
 }
 
@@ -36,6 +59,7 @@ export class Div extends Markup {
 
     this.define<Div.Props>(({Boolean}) => ({
       render_as_text: [ Boolean, false ],
+      enable_tex: [ Boolean, false ],
     }))
   }
 }
diff --git a/bokehjs/test/integration/widgets.ts b/bokehjs/test/integration/widgets.ts
@@ -207,6 +207,16 @@ describe("Widgets", () => {
     foo_col.visible = false
     await view.ready
   })
+
+  it("should allow TeX on Divs with mathstrings and enable_tex = true", async () => {
+    const obj = new Div({
+      text: `When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are
+        $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$`,
+      enable_tex: true,
+    })
+
+    await display(obj, [320, 120])
+  })
 })
 
 describe("Rows of widgets", () => {