protected _add_attribution(): void {
    const { attribution } = this.model.tile_source

    if (isString(attribution) && (attribution.length > 0)) {
      if ((this.attributionEl == null)) {
        const right = this.plot_model.canvas._right.value - this.plot_model.frame._right.value
        const bottom = this.plot_model.canvas._bottom.value - this.plot_model.frame._bottom.value
        const max_width = this.map_frame._width.value
        this.attributionEl = div({
          class: 'bk-tile-attribution',
          style: {
            position: "absolute",
            bottom: `${bottom}px`,
            right: `${right}px`,
            'max-width': `${max_width}px`,
            padding: "2px",
            'background-color': 'rgba(255,255,255,0.8)',
            'font-size': '9pt',
            'font-family': 'sans-serif',
          },
        })

        const overlays = this.plot_view.canvas_view.events_el
        overlays.appendChild(this.attributionEl)
      }

      this.attributionEl.innerHTML = attribution
    }
  }

  protected _add_attribution(): void {
    const {attribution} = this.model.tile_source

    if (isString(attribution) && attribution.length > 0) {
      if (this.attributionEl == null) {
        const right = this.plot_model.canvas._right.value - this.plot_model.frame._right.value
        const bottom = this.plot_model.canvas._bottom.value - this.plot_model.frame._bottom.value
        const max_width = this.map_frame._width.value
        this.attributionEl = div({
          class: 'bk-tile-attribution',
          style: {
            position: "absolute",
            bottom: `${bottom}px`,
            right: `${right}px`,
            'max-width': `${max_width - 4 /*padding*/}px`,
            padding: "2px",
            'background-color': 'rgba(255,255,255,0.5)',
            'font-size': '7pt',
            'font-family': 'sans-serif',
            'line-height': '1.05',
            'white-space': 'nowrap',
            overflow: 'hidden',
            'text-overflow': 'ellipsis',
          },
        })

        const overlays = this.plot_view.canvas_view.events_el
        overlays.appendChild(this.attributionEl)
      }

      this.attributionEl.innerHTML = attribution
      this.attributionEl.title = this.attributionEl.textContent!.replace(/\s*\n\s*/g, " ")
    }
  }

  async function _run_suite(suite: Suite, seq: Suite[]) {
    for (const sub_suite of suite.suites) {
      await _run_suite(sub_suite, seq.concat(sub_suite))
    }

    for (const test of suite.tests) {
      const {fn, description} = test

      if (grep != null) {
        const descriptions = seq.map((s) => s.description).concat(description)

        if (isString(grep)) {
          if (!descriptions.some((d) => d.includes(grep)))
            continue
        } else {
          if (!descriptions.some((d) => d.search(grep) != -1))
            continue
        }
      }

      current_test = test
      await fn()
      current_test = null
    }
  }

export function cat_v_compute<T>(data: ArrayableOf<Factor>, factors: ArrayableOf<Factor>,
    targets: Arrayable<T>, values: Arrayable<T>, start: number, end: number, extra_value: T): void {

  for (let i = 0, N = data.length; i < N; i++) {
    let d = data[i]

    let key: number
    if (isString(d))
      key = index_of(factors as Arrayable<L1Factor>, d)
    else {
      if (start != null) {
        if (end != null)
          d = d.slice(start, end) as Factor
        else
          d = d.slice(start) as Factor
      } else if (end != null)
        d = d.slice(0, end) as Factor

      if (d.length == 1)
        key = index_of(factors as Arrayable<L1Factor>, d[0])
      else
        key = find_index(factors as Arrayable<L2Factor | L3Factor>, (x) => _cat_equals(x, d))
    }

    let value: T
    if (key < 0 || key >= targets.length)
      value = extra_value
    else
      value = targets[key]

    values[i] = value
  }
}

  // XXX: not really string[], but Factor[]. This needs to be clarified across the repo.
  _get_values(data: string[], palette: number[], _image_glyph: boolean = false): number[] {
    const values = [];

    for (let d of data) {
      let color, key;

      if (isString(d)) {
        key = this.factors.indexOf(d);
      } else {
        if (this.start != null) {
          if (this.end != null) {
            d = d.slice(this.start, this.end);
          } else {
            d = d.slice(this.start);
          }
        } else if (this.end != null) {
          d = d.slice(0, this.end);
        }
        if (d.length === 1) {
          key = this.factors.indexOf(d[0]);
        } else {
          key = findIndex(this.factors, x => _equals(x, d));
        }
      }

      if ((key < 0) || (key >= palette.length)) {
        color = this.nan_color;
      } else {
        color = palette[key];
      }

      values.push(color);
    }
    return values;
  }

  protected _v_compute<T>(data: Arrayable<Factor>, values: Arrayable<T>,
      palette: Arrayable<T>, {nan_color}: {nan_color: T}): void {

    for (let i = 0, end = data.length; i < end; i++) {
      let d = data[i]

      let key: number
      if (isString(d))
        key = this.factors.indexOf(d)
      else {
        if (this.start != null) {
          if (this.end != null)
            d = d.slice(this.start, this.end) as Factor
          else
            d = d.slice(this.start) as Factor
        } else if (this.end != null)
          d = d.slice(0, this.end) as Factor

        if (d.length == 1)
          key = this.factors.indexOf(d[0])
        else
          key = findIndex(this.factors, (x) => _equals(x, d))
      }

      let color: T
      if (key < 0 || key >= palette.length)
        color = nan_color
      else
        color = palette[key]

      values[i] = color
    }
  }

  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};
  }

  _render_seq(ctx: Context2d, seq: (Draw | number)[]): void {
    let c: Draw = "M"
    let p = [0, 0]
    let i = 0

    while (i < seq.length) {
      if (isString(seq[i])) {
        c = seq[i] as Draw
        i += 1
      }

      switch (c) {
        case "M": {
          const [x, y] = seq.slice(i, i+2) as number[]
          ctx.moveTo(x, y)
          p = [x, y]
          i += 2
          break
        }
        case "L": {
          const [x, y] = seq.slice(i, i+2) as number[]
          ctx.lineTo(x, y)
          p = [x, y]
          i += 2
          break
        }
        case "C": {
          const [cx0, cy0, cx1, cy1, x, y] = seq.slice(i, i+6) as number[]
          ctx.bezierCurveTo(cx0, cy0, cx1, cy1, x, y)
          p = [x, y]
          i += 6
          break
        }
        case "Q": {
          const [cx0, cy0, x, y] = seq.slice(i, i+4) as number[]
          ctx.quadraticCurveTo(cx0, cy0, x, y)
          p = [x, y]
          i += 4
          break
        }
        case "A": {
          const [rx, ry, x_rotation, large_arc, sweep, x, y] = seq.slice(i, i+7) as number[]

          const [px, py] = p
          const segments = arc_to_bezier(px, py, rx, ry, -x_rotation, large_arc, 1 - sweep, x, y)

          for (const [cx0, cy0, cx1, cy1, x, y] of segments)
            ctx.bezierCurveTo(cx0, cy0, cx1, cy1, x, y)

          p = [x, y]
          i += 7
          break
        }
        default:
          throw new Error(`unexpected command: ${c}`)
      }
    }
  }

    const options = this.model.options.map((opt) => {
      let value, _label
      if (isString(opt))
        value = _label  = opt
      else
        [value, _label] = opt

      return option({value}, _label)
    })

    return values.map((el) => {
      let value, _label
      if (isString(el))
        value = _label  = el
      else
        [value, _label] = el

      const selected = this.model.value == value
      return option({selected: selected, value: value}, _label)
    })