protected _index_data(): SpatialIndex {
    const points = []
    for (let i = 0, end = this._xs.length; i < end; i++) {
      if (this._xs[i] == null || this._xs[i].length === 0)
        continue

      const _xsi = this._xs[i]
      const xs: number[] = []
      for (let j = 0, n = _xsi.length; j < n; j++) {
        const x = _xsi[j]
        if (!isStrictNaN(x))
          xs.push(x)
      }

      const _ysi = this._ys[i]
      const ys: number[] = []
      for (let j = 0, n = _ysi.length; j < n; j++) {
        const y = _ysi[j]
        if (!isStrictNaN(y))
          ys.push(y)
      }

      const [minX, maxX] = [min(xs), max(xs)]
      const [minY, maxY] = [min(ys), max(ys)]

      points.push({minX, minY, maxX, maxY, i})
    }

    return new SpatialIndex(points)
  }

  protected _index_hole_data(): SpatialIndex {
    // need advice on how to use this sure if this could be more useful
    const points = []
    for (let i = 0, end = this._xs.length; i < end; i++) {
      for (let j = 0, endj = this._xs[i].length; j < endj; j++) {
        if (this._xs[i][j].length > 1 ) {
          for (let k = 1, endk = this._xs[i][j].length; k < endk; k++) {
            const xs = this._xs[i][j][k]  // only use holes
            const ys = this._ys[i][j][k]  // only use holes

            if (xs.length == 0)
              continue

            points.push({
              minX: min(xs),
              minY: min(ys),
              maxX: max(xs),
              maxY: max(ys),
              i,
            })
          }
        }
      }
    }
    return new SpatialIndex(points)
  }

  protected _index_data(): SpatialIndex {
    const xss = this._build_discontinuous_object(this._xs as any) // XXX
    const yss = this._build_discontinuous_object(this._ys as any) // XXX

    const points = []
    for (let i = 0, end = this._xs.length; i < end; i++) {
      for (let j = 0, endj = xss[i].length; j < endj; j++) {
        const xs = xss[i][j]
        const ys = yss[i][j]

        if (xs.length == 0)
          continue

        points.push({
          minX: min(xs),
          minY: min(ys),
          maxX: max(xs),
          maxY: max(ys),
          i,
        })
      }
    }

    return new SpatialIndex(points)
  }

  compute(x: number): number {
    this.sort(false)

    if (this.clip) {
      if (x < this._x_sorted[0] || x > this._x_sorted[this._x_sorted.length-1])
        return NaN
    } else {
      if (x < this._x_sorted[0])
        return this._y_sorted[0]
      if (x > this._x_sorted[this._x_sorted.length-1])
        return this._y_sorted[this._y_sorted.length-1]
    }

    let ind: number
    switch (this.mode) {
      case "after": {
        ind = find_last_index(this._x_sorted, num => x >= num)
        break
      }
      case "before": {
        ind = find_index(this._x_sorted, num => x <= num)
        break
      }
      case "center": {
        const diffs = this._x_sorted.map((tx) => Math.abs(tx - x))
        const mdiff = min(diffs)
        ind = find_index(diffs, num => mdiff === num)
        break
      }
      default:
        throw new Error(`unknown mode: ${this.mode}`)
    }

    return ind != -1 ? this._y_sorted[ind] : NaN
  }

  _get_values(data: number[], palette: number[], image_glyph: boolean = false): number[] {
    const n = palette.length;
    const low = this.low != null ? this.low : min(data);
    const high = this.high != null ? this.high : max(data);
    const scale = n / (log1p(high) - log1p(low));  // subtract the low offset
    const max_key = palette.length - 1;
    const values = [];

    const nan_color = image_glyph ? this._nan_color : this.nan_color;
    const high_color = image_glyph ? this._high_color : this.high_color;
    const low_color = image_glyph ? this._low_color : this.low_color;

    for (const d of data) {
      // Check NaN
      if (isNaN(d)) {
        values.push(nan_color);
        continue;
      }

      if (d > high) {
        if (this.high_color != null) {
          values.push(high_color);
        } else {
          values.push(palette[max_key]);
        }
        continue;
      }

      // This handles the edge case where d == high, since the code below maps
      // values exactly equal to high to palette.length, which is greater than
      // max_key
      if (d === high) {
        values.push(palette[max_key]);
        continue;
      }

      if (d < low) {
        if (this.low_color != null) {
          values.push(low_color);
        } else {
          values.push(palette[0]);
        }
        continue;
      }

      // Get the key
      const log = log1p(d) - log1p(low);  // subtract the low offset
      let key = Math.floor(log * scale);

      // Deal with upper bound
      if (key > max_key) {
        key = max_key;
      }

      values.push(palette[key]);
    }
    return values;
  }

  // utility function to get limits along both dimensions, given
  // optional dimensional constraints
  _get_dim_limits([sx0, sy0]: [number, number], [sx1, sy1]: [number, number],
      frame: CartesianFrame, dims: Dimensions): [[number, number], [number, number]] {

    const hr = frame.bbox.h_range
    let sxlim: [number, number]
    if (dims == 'width' || dims == 'both') {
      sxlim = [min([sx0, sx1]),           max([sx0, sx1])]
      sxlim = [max([sxlim[0], hr.start]), min([sxlim[1], hr.end])]
    } else
      sxlim = [hr.start, hr.end]

    const vr = frame.bbox.v_range
    let sylim: [number, number]
    if (dims == 'height' || dims == 'both') {
      sylim = [min([sy0, sy1]),           max([sy0, sy1])]
      sylim = [max([sylim[0], vr.start]), min([sylim[1], vr.end])]
    } else
      sylim = [vr.start, vr.end]

    return [sxlim, sylim]
  }

  protected _index_data(): SpatialIndex {
    const points = []
    for (let i = 0, end = this._xs.length; i < end; i++) {
      for (let j = 0, endj = this._xs[i].length; j < endj; j++) {
        const xs = this._xs[i][j][0]  // do not use holes
        const ys = this._ys[i][j][0]  // do not use holes

        if (xs.length == 0)
          continue

        points.push({
          minX: min(xs),
          minY: min(ys),
          maxX: max(xs),
          maxY: max(ys),
          i,
        })
      }
    }
    this.hole_index = this._index_hole_data()  // should this be set here?
    return new SpatialIndex(points)
  }

  _index_data() {
    const xss = this._build_discontinuous_object(this._xs);
    const yss = this._build_discontinuous_object(this._ys);

    const points = [];
    for (let i = 0, end = this._xs.length; i < end; i++) {
      for (let j = 0, endj = xss[i].length; j < endj; j++) {
        const xs = xss[i][j];
        const ys = yss[i][j];
        if (xs.length === 0) {
          continue;
        }
        points.push({
          minX: min(xs),
          minY: min(ys),
          maxX: max(xs),
          maxY: max(ys),
          i,
        });
      }
    }

    return new RBush(points);
  }

  _get_values(data: number[], palette: number[], image_glyph: boolean = false): number[] {
    const low = this.low != null ? this.low : min(data);
    const high = this.high != null ? this.high : max(data);
    const max_key = palette.length - 1;
    const values = [];

    const nan_color = image_glyph ? this._nan_color : this.nan_color;
    const low_color = image_glyph ? this._low_color : this.low_color;
    const high_color = image_glyph ? this._high_color : this.high_color;

    const norm_factor = 1 / (high - low);
    const normed_interval = 1 / palette.length;

    for (const d of data) {
      if (isNaN(d)) {
        values.push(nan_color);
        continue;
      }

      // This handles the edge case where d == high, since the code below maps
      // values exactly equal to high to palette.length, which is greater than
      // max_key
      if (d === high) {
        values.push(palette[max_key]);
        continue;
      }

      const normed_d = (d - low) * norm_factor;
      const key = Math.floor(normed_d / normed_interval);
      if (key < 0) {
        if (this.low_color != null) {
          values.push(low_color);
        } else {
          values.push(palette[0]);
        }
      } else if (key > max_key) {
        if (this.high_color != null) {
          values.push(high_color);
        } else {
          values.push(palette[max_key]);
        }
      } else {
        values.push(palette[key]);
      }
    }
    return values;
  }

  compute(x) {
    // Apply the transform to a single value
    let descending, ret;
    this.sort(descending = false);

    if (this.clip === true) {
      if ((x < this._x_sorted[0]) || (x > this._x_sorted[this._x_sorted.length-1])) {
        return(null);
      }
    } else {
      if (x < this._x_sorted[0]) {
        return this._y_sorted[0];
      }
      if (x > this._x_sorted[this._x_sorted.length-1]) {
        return this._y_sorted[this._y_sorted.length-1];
      }
    }

    let ind = -1;
    if (this.mode === "after") {
      ind = findLastIndex(this._x_sorted, num => x >= num);
    }

    if (this.mode === "before") {
      ind = findIndex(this._x_sorted, num => x <= num);
    }

    if (this.mode === "center") {
      const diffs = (this._x_sorted.map((tx) => Math.abs(tx - x)));
      const mdiff = min(diffs);
      ind = findIndex(diffs, num => mdiff === num);
    }

    if (ind !== -1) {
      ret = this._y_sorted[ind];
    } else {
      ret = null;
    }

    return(ret);
  }