Bokehで時前のモデルを作る方法

custom.py

from bokeh.core.properties import String, Instance
from bokeh.models import HTMLBox, Slider

class Custom(HTMLBox):
    __implementation__ = 'custom.ts'
    text = String(default='Custom Text')
    slider = Instance(Slider)

from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import Slider

slider = Slider(start=0, end=10, step=0.1, value=0, title='value')
custom = Custom(text='Special Slider Display', slider=slider)
layout = column(slider, custom)
show(layout)

custom.ts

// https://github.com/bokeh/bokeh/issues/9587 の議論が大変、参考になった。ドキュメントが大幅に間違っている？

import {HTMLBox, HTMLBoxView} from "models/layouts/html_box"

import {div} from "core/dom"
import * as p from "core/properties"
import { Slider } from "models/widgets/slider"

export class CustomView extends HTMLBoxView {
  model: Custom

  connect_signals(): void {
    super.connect_signals()
    this.connect(this.model.slider.change, () => {
      this.render()
      this.invalidate_layout()
    })
  }

  render(): void {
    super.render()
    this.el.appendChild(div({
      style: {
        padding: '2px',
        color: '#b88d8e',
        backgroundColor: '#2a3153',
      },
    }, `${this.model.text}: ${this.model.slider.value}`))
  }
}

export namespace Custom {
  export type Attrs = p.AttrsOf<Props>
  export type Props = HTMLBox.Props & {
    slider: p.Property<Slider>
    text: p.Property<string>
  }
}

export interface Custom extends Custom.Attrs {}

export class Custom extends HTMLBox {
  properties: Custom.Props

  static init_Custom(): void {
    this.prototype.default_view = CustomView

    this.define<Custom.Props>({
      text: [ p.String ],
      slider: [ p.Instance ],
    })
  }
}

詳しい説明は研究室の Scrapbox に