initialize(): void {
    super.initialize()

    this.reset = new Signal0(this, "reset")

    for (const xr of values(this.extra_x_ranges).concat(this.x_range)) {
      let plots = xr.plots
      if (isArray(plots)) {
        plots = plots.concat(this)
        xr.setv({plots: plots}, {silent: true})
      }
    }

    for (const yr of values(this.extra_y_ranges).concat(this.y_range)) {
      let plots = yr.plots
      if (isArray(plots)) {
        plots = plots.concat(this)
        yr.setv({plots: plots}, {silent: true})
      }
    }
    // Min border applies to the edge of everything
    if (this.min_border != null) {
      if (this.min_border_top == null)
        this.min_border_top = this.min_border
      if (this.min_border_bottom == null)
        this.min_border_bottom = this.min_border
      if (this.min_border_left == null)
        this.min_border_left = this.min_border
      if (this.min_border_right == null)
        this.min_border_right = this.min_border
    }

    // Setup side renderers
    for (const side of ['above', 'below', 'left', 'right']) {
      const layout_renderers = this.getv(side)
      for (const renderer of layout_renderers)
        renderer.add_panel(side)
    }

    this._init_title_panel()
    this._init_toolbar_panel()

    this._plot_canvas = this._init_plot_canvas()
    this.plot_canvas.toolbar = this.toolbar

    // Set width & height to be the passed in plot_width and plot_height
    // We may need to be more subtle about this - not sure why people use one
    // or the other.
    if (this.width == null)
      this.width = this.plot_width
    if (this.height == null)
      this.height = this.plot_height
  }

  map_data(): void {
    const self = this as any

    for (let [xname, yname] of this.model._coords) {
      const sxname = `s${xname}`
      const syname = `s${yname}`
      xname = `_${xname}`
      yname = `_${yname}`

      if (self[xname] != null && (isArray(self[xname][0]) || isTypedArray(self[xname][0]))) {
        const ni = self[xname].length

        self[sxname] = new Array(ni)
        self[syname] = new Array(ni)

        for (let i = 0; i < ni; i++) {
          const nj = self[xname][i].length
          self[sxname][i] = new Array(nj)
          self[syname][i] = new Array(nj)
          for (let j = 0; j < nj; j++) {
            const nk = self[xname][i][j].length
            self[sxname][i][j] = new Array(nk)
            self[syname][i][j] = new Array(nk)
            for (let k = 0; k < nk; k++) {
              const [sx, sy] = this.map_to_screen(self[xname][i][j][k], self[yname][i][j][k])
              self[sxname][i][j][k] = sx
              self[syname][i][j][k] = sy
            }
          }
        }
      }
    }
  }

  get computed_bounds(): [number, number] {
    const [range,] = this.ranges

    const user_bounds = this.bounds // XXX: ? 'auto'
    const range_bounds: [number, number] = [range.min, range.max]

    if (user_bounds == 'auto')
      return [range.min, range.max]
    else if (isArray(user_bounds)) {
      let start: number
      let end: number

      const [user_start, user_end] = user_bounds
      const [range_start, range_end] = range_bounds

      if (abs(user_start - user_end) > abs(range_start - range_end)) {
        start = max(min(user_start, user_end), range_start)
        end = min(max(user_start, user_end), range_end)
      } else {
        start = min(user_start, user_end)
        end = max(user_start, user_end)
      }

      return [start, end]
    } else
      throw new Error(`user bounds '${user_bounds}' not understood`)
  }

  render(): void {
    super.render()
    empty(this.el)

    const labelEl = label({for: this.model.id}, this.model.title)
    this.el.appendChild(labelEl)

    let contents: HTMLElement[]
    if (isArray(this.model.options))
      contents = this.build_options(this.model.options)
    else {
      contents = []
      const options = this.model.options
      for (const key in options) {
        const value = options[key]
        contents.push(optgroup({label: key}, this.build_options(value)))
      }
    }

    this.selectEl = select({
      class: "bk-widget-form-input",
      id: this.model.id,
      name: this.model.name,
      disabled: this.model.disabled}, contents)

    this.selectEl.addEventListener("change", () => this.change_input())
    this.el.appendChild(this.selectEl)
  }

  computed_bounds(): [number, number] {
    const [range,] = this.ranges()

    const user_bounds = this.bounds
    const range_bounds = [range.min, range.max]

    let start: number
    let end: number
    if (isArray(user_bounds)) {
      start = Math.min(user_bounds[0], user_bounds[1])
      end = Math.max(user_bounds[0], user_bounds[1])

      if (start < range_bounds[0])
        start = range_bounds[0]
      // XXX:
      //else if (start > range_bounds[1])
      //  start = null

      if (end > range_bounds[1])
        end = range_bounds[1]
      // XXX:
      //else if (end < range_bounds[0])
      //  end = null
    } else {
      [start, end] = range_bounds
    }

    return [start, end]
  }

  computed_bounds(): [number, number] {
    const [range,] = this.ranges()

    const user_bounds = this.bounds
    const range_bounds = [range.min, range.max]

    let start: number
    let end: number
    if (isArray(user_bounds)) {
      start = Math.min(user_bounds[0], user_bounds[1])
      end = Math.max(user_bounds[0], user_bounds[1])

      if (start < range_bounds[0])
        start = range_bounds[0]
      // XXX:
      //else if (start > range_bounds[1])
      //  start = null

      if (end > range_bounds[1])
        end = range_bounds[1]
      // XXX:
      //else if (end < range_bounds[0])
      //  end = null
    } else {
      [start, end] = range_bounds
      for (const axis of this.plot.select(Axis)) {
        if (axis.dimension == this.dimension && axis.x_range_name == this.x_range_name
                                             && axis.y_range_name == this.y_range_name) {
          [start, end] = axis.computed_bounds
        }
      }
    }

    return [start, end]
  }

  compute_legend_location() {
    let sx, sy;
    const legend_dimensions = this.compute_legend_dimensions();
    const [legend_height, legend_width] = [legend_dimensions.height, legend_dimensions.width];

    const legend_margin = this.model.margin;

    const panel = this.model.panel != null ? this.model.panel : this.plot_view.frame;
    const [hr, vr] = panel.bbox.ranges;

    const { location } = this.model;
    if (isString(location)) {
      switch (location) {
        case 'top_left':
          sx = hr.start + legend_margin;
          sy = vr.start + legend_margin;
          break;
        case 'top_center':
          sx = ((hr.end + hr.start)/2) - (legend_width/2);
          sy = vr.start + legend_margin;
          break;
        case 'top_right':
          sx = hr.end - legend_margin - legend_width;
          sy = vr.start + legend_margin;
          break;
        case 'bottom_right':
          sx = hr.end - legend_margin - legend_width;
          sy = vr.end - legend_margin - legend_height;
          break;
        case 'bottom_center':
          sx = ((hr.end + hr.start)/2) - (legend_width/2);
          sy = vr.end - legend_margin - legend_height;
          break;
        case 'bottom_left':
          sx = hr.start + legend_margin;
          sy = vr.end - legend_margin - legend_height;
          break;
        case 'center_left':
          sx = hr.start + legend_margin;
          sy = ((vr.end + vr.start)/2) - (legend_height/2);
          break;
        case 'center':
          sx = ((hr.end + hr.start)/2) - (legend_width/2);
          sy = ((vr.end + vr.start)/2) - (legend_height/2);
          break;
        case 'center_right':
          sx = hr.end - legend_margin - legend_width;
          sy = ((vr.end + vr.start)/2) - (legend_height/2);
          break;
      }
    } else if (isArray(location) && (location.length === 2)) {
      const [vx, vy] = location;
      sx = panel.xview.compute(vx);
      sy = panel.yview.compute(vy) - legend_height;
    }

    return {sx, sy};
  }

 _set_vertices(xs: number[] | number, ys: number[] | number): void {
   const point_glyph: any = this.model.vertex_renderer.glyph
   const point_cds = this.model.vertex_renderer.data_source
   const [pxkey, pykey] = [point_glyph.x.field, point_glyph.y.field]
   if (pxkey) {
     if (isArray(xs))
       point_cds.data[pxkey] = xs
     else
       point_glyph.x = {value: xs}
   }
   if (pykey) {
     if (isArray(ys))
       point_cds.data[pykey] = ys
     else
       point_glyph.y = {value: ys}
   }
   this._emit_cds_changes(point_cds, true, true, false)
 }

export function patch_to_column(col: Arrayable, patch: Patch[], shapes: Shape[]): Set<number> {
  const patched: Set<number> = new Set()
  let patched_range = false

  for (const [ind, val] of patch) {

    // make the single index case look like the length-3 multi-index case
    let item: Arrayable, shape: Shape
    let index: [number, number | Slice, number | Slice]
    let value: unknown[]
    if (isArray(ind)) {
      const [i] = ind
      patched.add(i)
      shape = shapes[i]
      item = col[i]
      value = val as unknown[]

      // this is basically like NumPy's "newaxis", inserting an empty dimension
      // makes length 2 and 3 multi-index cases uniform, so that the same code
      // can handle both
      if (ind.length === 2) {
        shape = [1, shape[0]]
        index = [ind[0], 0, ind[1]]
      } else
        index = ind
    } else  {
      if (isNumber(ind)) {
        value = [val]
        patched.add(ind)
      } else {
        value = val as unknown[]
        patched_range = true
      }

      index = [0, 0, ind]
      shape = [1, col.length]
      item = col
    }

    // now this one nested loop handles all cases
    let flat_index = 0
    const [istart, istop, istep] = slice(index[1], shape[0])
    const [jstart, jstop, jstep] = slice(index[2], shape[1])

    for (let i = istart; i < istop; i += istep) {
      for (let j = jstart; j < jstop; j += jstep) {
        if (patched_range) {
          patched.add(j)
        }
        item[(i*shape[1]) + j] = value[flat_index]
        flat_index++
      }
    }
  }

  return patched
}

  get_array<T>(key: string): T[] {
    let column = this.data[key]

    if (column == null)
      this.data[key] = column = []
    else if (!isArray(column))
      this.data[key] = column = Array.from(column)

    return column as T[]
  }