update_position(): void {
    super.update_position()

    this.header_el.style.position = "absolute" // XXX: do it in position()
    position(this.header_el, this.header.bbox)

    const loc = this.model.tabs_location
    const vertical = loc == "above" || loc == "below"

    const scroll_el_size = size(this.scroll_el)
    const headers_el_size = scroll_size(this.headers_el)
    if (vertical) {
      const {width} = this.header.bbox
      if (headers_el_size.width > width)
        this.wrapper_el.style.maxWidth = `${width - scroll_el_size.width}px`
      else
        undisplay(this.scroll_el)
    } else {
      const {height} = this.header.bbox
      if (headers_el_size.height > height)
        this.wrapper_el.style.maxHeight = `${height - scroll_el_size.height}px`
      else
        undisplay(this.scroll_el)
    }

    const {child_views} = this
    for (const child_view of child_views)
      hide(child_view.el)

    show(child_views[this.model.active].el)
  }

  render(): void {
    if (!this.model.visible && this.model.render_mode == 'css')
      undisplay(this.el)

    if (!this.model.visible)
      return

    this._draw_span()
  }

  render(): void {
    if (!this.model.visible && this.model.render_mode == 'css')
      undisplay(this.el)

    if (!this.model.visible)
      return

    // don't render if *all* position are null
    if (this.model.left == null && this.model.right == null && this.model.top == null && this.model.bottom == null) {
      undisplay(this.el)
      return
    }

    const {frame} = this.plot_view
    const xscale = frame.xscales[this.model.x_range_name]
    const yscale = frame.yscales[this.model.y_range_name]

    const _calc_dim = (dim: number | null, dim_units: SpatialUnits, scale: Scale, view: CoordinateTransform, frame_extrema: number): number => {
      let sdim
      if (dim != null) {
        if (this.model.screen)
          sdim = dim
        else {
          if (dim_units == 'data')
            sdim = scale.compute(dim)
          else
            sdim = view.compute(dim)
        }
      } else
        sdim = frame_extrema
      return sdim
    }

    this.sleft   = _calc_dim(this.model.left,   this.model.left_units,   xscale, frame.xview, frame._left.value)
    this.sright  = _calc_dim(this.model.right,  this.model.right_units,  xscale, frame.xview, frame._right.value)
    this.stop    = _calc_dim(this.model.top,    this.model.top_units,    yscale, frame.yview, frame._top.value)
    this.sbottom = _calc_dim(this.model.bottom, this.model.bottom_units, yscale, frame.yview, frame._bottom.value)

    const draw = this.model.render_mode == 'css' ? this._css_box.bind(this) : this._canvas_box.bind(this)

    draw(this.sleft, this.sright, this.sbottom, this.stop)
  }

  render(): void {
    if (!this.model.visible && this.model.render_mode == 'css')
      undisplay(this.el)

    if (!this.model.visible)
      return

    const draw = this.model.render_mode == 'canvas' ? this._v_canvas_text.bind(this) : 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++) {
      draw(ctx, i, this._text[i], sx[i] + this._x_offset[i], sy[i] - this._y_offset[i], this._angle[i])
    }
  }

  render(): void {
    if (!this.model.visible) {
      if (this.model.render_mode == 'css')
        undisplay(this.el)
      return
    }

    const {text} = this.model
    if (text == null || text.length == 0)
      return

    this.model.text_baseline = this.model.vertical_align
    this.model.text_align = this.model.align

    const [sx, sy] = this._get_location()
    const angle = this.panel!.get_label_angle_heuristic('parallel')

    const draw = this.model.render_mode == 'canvas' ? this._canvas_text.bind(this) : this._css_text.bind(this)
    draw(this.plot_view.canvas_view.ctx, text, sx, sy, angle)
  }

  render(): void {
    if (!this.model.visible && this.model.render_mode == 'css')
      undisplay(this.el)

    if (!this.model.visible)
      return

    // Here because AngleSpec does units tranform and label doesn't support specs
    let angle: number
    switch (this.model.angle_units) {
      case "rad": {
        angle = -this.model.angle
        break
      }
      case "deg": {
        angle = (-this.model.angle*Math.PI)/180.0
        break
      }
      default:
        throw new Error("unreachable code")
    }

    const panel = this.panel != null ? this.panel : this.plot_view.frame

    const xscale = this.plot_view.frame.xscales[this.model.x_range_name]
    const yscale = this.plot_view.frame.yscales[this.model.y_range_name]

    let sx = this.model.x_units == "data" ? xscale.compute(this.model.x) : panel.xview.compute(this.model.x)
    let sy = this.model.y_units == "data" ? yscale.compute(this.model.y) : panel.yview.compute(this.model.y)

    sx += this.model.x_offset
    sy -= this.model.y_offset

    const draw = this.model.render_mode == 'canvas' ? this._canvas_text.bind(this) : this._css_text.bind(this)
    draw(this.plot_view.canvas_view.ctx, this.model.text, sx, sy, angle)
  }

 initialize(): void {
   super.initialize()
   this.plot_view.canvas_overlays.appendChild(this.el)
   this.el.classList.add("bk-shading")
   undisplay(this.el)
 }

  protected _draw_tips(): void {
    const {data} = this.model
    empty(this.el)
    undisplay(this.el)

    if (this.model.custom)
      this.el.classList.add("bk-tooltip-custom")
    else
      this.el.classList.remove("bk-tooltip-custom")

    if (data.length == 0)
      return

    const {frame} = this.plot_view

    for (const [sx, sy, content] of data) {
      if (this.model.inner_only && !frame.bbox.contains(sx, sy))
          continue

      const tip = div({}, content)
      this.el.appendChild(tip)
    }

    const [sx, sy] = data[data.length - 1] // XXX: this previously depended on {sx, sy} leaking from the for-loop

    const side = compute_side(this.model.attachment, sx, sy, frame._hcenter.value, frame._vcenter.value)

    this.el.classList.remove("bk-right")
    this.el.classList.remove("bk-left")
    this.el.classList.remove("bk-above")
    this.el.classList.remove("bk-below")

    const arrow_size = 10  // XXX: keep in sync with less

    display(this.el)  // XXX: {offset,client}Width() gives 0 when display="none"

    // slightly confusing: side "left" (for example) is relative to point that
    // is being annotated but CS class "bk-left" is relative to the tooltip itself
    let left: number, top: number
    switch (side) {
      case "right":
        this.el.classList.add("bk-left")
        left = sx + (this.el.offsetWidth - this.el.clientWidth) + arrow_size
        top = sy - this.el.offsetHeight/2
        break
      case "left":
        this.el.classList.add("bk-right")
        left = sx - this.el.offsetWidth - arrow_size
        top = sy - this.el.offsetHeight/2
        break
      case "below":
        this.el.classList.add("bk-above")
        top = sy + (this.el.offsetHeight - this.el.clientHeight) + arrow_size
        left = Math.round(sx - this.el.offsetWidth/2)
        break
      case "above":
        this.el.classList.add("bk-below")
        top = sy - this.el.offsetHeight - arrow_size
        left = Math.round(sx - this.el.offsetWidth/2)
        break
      default:
        throw new Error("unreachable code")
    }

    if (this.model.show_arrow)
      this.el.classList.add("bk-tooltip-arrow")

    // TODO (bev) this is not currently bulletproof. If there are
    // two hits, not colocated and one is off the screen, that can
    // be problematic
    if (this.el.childNodes.length > 0) {
      this.el.style.top = `${top}px`
      this.el.style.left = `${left}px`
    } else
      undisplay(this.el)
  }

 initialize(options: any): void {
   super.initialize(options)
   // TODO (bev) really probably need multiple divs
   this.plot_view.canvas_overlays.appendChild(this.el)
   undisplay(this.el)
 }

  protected _draw_span(): void {
    const loc = this.model.for_hover ? this.model.computed_location : this.model.location
    if (loc == null) {
      undisplay(this.el)
      return
    }

    const {frame} = this.plot_view

    const xscale = frame.xscales[this.model.x_range_name]
    const yscale = frame.yscales[this.model.y_range_name]

    const _calc_dim = (scale: Scale, view: CoordinateTransform): number => {
      if (this.model.for_hover)
        return this.model.computed_location!
      else {
        if (this.model.location_units == 'data')
          return scale.compute(loc)
        else
          return view.compute(loc)
      }
    }

    let height: number, sleft: number, stop: number, width: number
    if (this.model.dimension == 'width') {
      stop = _calc_dim(yscale, frame.yview)
      sleft = frame._left.value
      width = frame._width.value
      height = this.model.properties.line_width.value()
    } else {
      stop = frame._top.value
      sleft = _calc_dim(xscale, frame.xview)
      width = this.model.properties.line_width.value()
      height = frame._height.value
    }

    if (this.model.render_mode == "css") {
      this.el.style.top = `${stop}px`
      this.el.style.left = `${sleft}px`
      this.el.style.width = `${width}px`
      this.el.style.height = `${height}px`
      this.el.style.backgroundColor = this.model.properties.line_color.value()
      this.el.style.opacity = this.model.properties.line_alpha.value()
      display(this.el)
    } else if (this.model.render_mode == "canvas") {
      const {ctx} = this.plot_view.canvas_view
      ctx.save()

      ctx.beginPath()
      this.visuals.line.set_value(ctx)
      ctx.moveTo(sleft, stop)
      if (this.model.dimension == "width") {
        ctx.lineTo(sleft + width, stop)
      } else {
        ctx.lineTo(sleft, stop + height)
      }
      ctx.stroke()

      ctx.restore()
    }
  }