_computed_image_dimensions(): {height: number, width: number} {
    /*
    Heuristics to determine ColorBar image dimensions if set to "auto"

    Note: Returns the height/width values for the ColorBar's scale image, not
    the dimensions of the entire ColorBar.

    If the short dimension (the width of a vertical bar or height of a
    horizontal bar) is set to "auto", the resulting dimension will be set to
    25 px.

    For a ColorBar in a side panel with the long dimension (the height of a
    vertical bar or width of a horizontal bar) set to "auto", the
    resulting dimension will be as long as the adjacent frame edge, so that the
    bar "fits" to the plot.

    For a ColorBar in the plot frame with the long dimension set to "auto", the
    resulting dimension will be the greater of:
      * The length of the color palette * 25px
      * The parallel frame dimension * 0.30
        (i.e the frame height for a vertical ColorBar)
    But not greater than:
      * The parallel frame dimension * 0.80
    */

    let height, width;
    const frame_height = this.plot.plot_canvas.frame._height.value;
    const frame_width = this.plot.plot_canvas.frame._width.value;
    const title_extent = this._title_extent();

    switch (this.orientation) {
      case "vertical":
        if (this.height === 'auto') {
          if (this.panel != null) {
            height = frame_height - (2 * this.padding) - title_extent;
          } else {
            height = max([this.color_mapper.palette.length * SHORT_DIM,
                          frame_height * LONG_DIM_MIN_SCALAR]);
            height = min([height,
                          (frame_height * LONG_DIM_MAX_SCALAR) - (2 * this.padding) - title_extent]);
          }
        } else {
          ({ height } = this);
        }

        width = this.width === 'auto' ? SHORT_DIM : this.width;
        break;

      case "horizontal":
        height = this.height === 'auto' ? SHORT_DIM : this.height;

        if (this.width === 'auto') {
          if (this.panel != null) {
            width = frame_width - (2 * this.padding);
          } else {
            width = max([this.color_mapper.palette.length * SHORT_DIM,
                         frame_width * LONG_DIM_MIN_SCALAR]);
            width = min([width,
                         (frame_width * LONG_DIM_MAX_SCALAR) - (2 * this.padding)]);
          }
        } else {
          ({ width } = this);
        }
        break;
    }

    return {"height": height, "width": width};
  }

  _computed_image_dimensions(): {height: number, width: number} {
    /*
    Heuristics to determine ColorBar image dimensions if set to "auto"

    Note: Returns the height/width values for the ColorBar's scale image, not
    the dimensions of the entire ColorBar.

    If the short dimension (the width of a vertical bar or height of a
    horizontal bar) is set to "auto", the resulting dimension will be set to
    25 px.

    For a ColorBar in a side panel with the long dimension (the height of a
    vertical bar or width of a horizontal bar) set to "auto", the
    resulting dimension will be as long as the adjacent frame edge, so that the
    bar "fits" to the plot.

    For a ColorBar in the plot frame with the long dimension set to "auto", the
    resulting dimension will be the greater of:
      * The length of the color palette * 25px
      * The parallel frame dimension * 0.30
        (i.e the frame height for a vertical ColorBar)
    But not greater than:
      * The parallel frame dimension * 0.80
    */

    const frame_height = this.plot_view.frame._height.value
    const frame_width = this.plot_view.frame._width.value
    const title_extent = this._title_extent()

    let height: number, width: number
    switch (this.model.orientation) {
      case "vertical": {
        if (this.model.height == 'auto') {
          if (this.panel != null)
            height = frame_height - 2*this.model.padding - title_extent
          else {
            height = max([this.model.color_mapper.palette.length*SHORT_DIM, frame_height*LONG_DIM_MIN_SCALAR])
            height = min([height, frame_height*LONG_DIM_MAX_SCALAR - 2*this.model.padding - title_extent])
          }
        } else
          height = this.model.height

        width = this.model.width == 'auto' ? SHORT_DIM : this.model.width
        break
      }
      case "horizontal": {
        height = this.model.height == 'auto' ? SHORT_DIM : this.model.height

        if (this.model.width == 'auto') {
          if (this.panel != null)
            width = frame_width - 2*this.model.padding
          else {
            width = max([this.model.color_mapper.palette.length*SHORT_DIM, frame_width*LONG_DIM_MIN_SCALAR])
            width = min([width, frame_width*LONG_DIM_MAX_SCALAR - 2*this.model.padding])
          }
        } else
          width = this.model.width
        break
      }
      default:
        throw new Error("unreachable code")
    }

    return {width, height}
  }

  compute_legend_bbox(): LegendBBox {
    const legend_names = this.model.get_legend_names()

    const {glyph_height, glyph_width} = this.model
    const {label_height, label_width} = this.model

    this.max_label_height = max(
      [get_text_height(this.visuals.label_text.font_value()).height, label_height, glyph_height],
    )

    // this is to measure text properties
    const { ctx } = this.plot_view.canvas_view
    ctx.save()
    this.visuals.label_text.set_value(ctx)
    this.text_widths = {}
    for (const name of legend_names) {
      this.text_widths[name] = max([ctx.measureText(name).width, label_width])
    }
    ctx.restore()

    const max_label_width = Math.max(max(values(this.text_widths)), 0)

    const legend_margin = this.model.margin
    const {legend_padding} = this
    const legend_spacing = this.model.spacing
    const {label_standoff} =  this.model

    let legend_height: number, legend_width: number
    if (this.model.orientation == "vertical") {
      legend_height = legend_names.length*this.max_label_height + Math.max(legend_names.length - 1, 0)*legend_spacing + 2*legend_padding
      legend_width = max_label_width + glyph_width + label_standoff + 2*legend_padding
    } else {
      legend_width = 2*legend_padding + Math.max(legend_names.length - 1, 0)*legend_spacing
      for (const name in this.text_widths) {
        const width = this.text_widths[name]
        legend_width += max([width, label_width]) + glyph_width + label_standoff
      }
      legend_height = this.max_label_height + 2*legend_padding
    }

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

    const {location} = this.model
    let sx: number, sy: number
    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
        default:
          throw new Error("unreachable code")
      }
    } else if (isArray(location) && location.length == 2) {
      const [vx, vy] = location
      sx = panel.xview.compute(vx)
      sy = panel.yview.compute(vy) - legend_height
    } else
      throw new Error("unreachable code")

    return {x: sx, y: sy, width: legend_width, height: legend_height}
  }

 _tick_extent(): number {
   if (this.model.color_mapper.low != null && this.model.color_mapper.high != null)
     return max([this.model.major_tick_out, this.model.minor_tick_out])
   else
     return 0
 }

  _set_data(_source, indices) {
    if ((this.image_data == null) || (this.image_data.length !== this._image.length)) {
      this.image_data = new Array(this._image.length);
    }

    if ((this._width == null) || (this._width.length !== this._image.length)) {
      this._width = new Array(this._image.length);
    }

    if ((this._height == null) || (this._height.length !== this._image.length)) {
      this._height = new Array(this._image.length);
    }

    for (let i = 0, end = this._image.length; i < end; i++) {
      let buf, canvas;
      if ((indices != null) && (indices.indexOf(i) < 0)) {
        continue;
      }

      let shape = [];
      if (this._image_shape != null) {
        shape = this._image_shape[i];
      }

      if (shape.length > 0) {
        buf = this._image[i].buffer;
        this._height[i] = shape[0];
        this._width[i] = shape[1];
      } else {
        const flat = concat(this._image[i]);
        buf = new ArrayBuffer(flat.length * 4);
        const color = new Uint32Array(buf);
        for (let j = 0, endj = flat.length; j < endj; j++) {
          color[j] = flat[j];
        }
        this._height[i] = this._image[i].length;
        this._width[i] = this._image[i][0].length;
      }

      if ((this.image_data[i] != null) && (this.image_data[i].width === this._width[i]) && (this.image_data[i].height === this._height[i])) {
        canvas = this.image_data[i];
      } else {
        canvas = document.createElement('canvas');
        canvas.width = this._width[i];
        canvas.height = this._height[i];
      }
      const ctx = canvas.getContext('2d');
      const image_data = ctx.getImageData(0, 0, this._width[i], this._height[i]);
      const buf8 = new Uint8Array(buf);
      image_data.data.set(buf8);
      ctx.putImageData(image_data, 0, 0);
      this.image_data[i] = canvas;

      this.max_dw = 0;
      if (this._dw.units === "data") {
        this.max_dw = max(this._dw);
      }
      this.max_dh = 0;
      if (this._dh.units === "data") {
        this.max_dh = max(this._dh);
      }
    }
  }