How to use the ve-range-utils.getSequenceWithinRange function in ve-range-utils

let { annotation } = annotationRange;
    if (!hasMounted) {
      return

tabHeight //height of the little clickable tabs (passed because they are measured together with the editor panels and thus need to be subtracted)
        // fitHeight //used to allow the editor to expand to fill the height of its containing component
      } = this.props;
      //do this in two steps to determine propsToPass
      let {
        children,
        vectorInteractionWrapperStyle = {},
        disableEditorClickAndDrag = false,
        ...propsToPass
      } = this.props;
      const { width, height } = this.props.dimensions || {};
      propsToPass.width = width;
      propsToPass.height = height - tabHeight;
      // if (fitHeight) {
      // }
      let selectedBps = getSequenceWithinRange(
        selectionLayer,
        sequenceData.sequence
      );
      if (!disableEditorClickAndDrag) {
        propsToPass = {
          ...propsToPass,
          selectionLayerRightClicked: this.selectionLayerRightClicked,
          searchLayerRightClicked: this.searchLayerRightClicked,
          backgroundRightClicked: this.backgroundRightClicked,
          featureRightClicked: this.featureRightClicked,
          partRightClicked: this.partRightClicked,
          orfRightClicked: this.orfRightClicked,
          deletionLayerRightClicked: this.deletionLayerRightClicked,
          cutsiteRightClicked: this.cutsiteRightClicked,
          translationRightClicked: this.translationRightClicked,
          primerRightClicked: this.primerRightClicked,

return layerRangeOverlaps.map(function(layer, index) {
              let isStart = layer.start === insertedBpsLayer.start;
              let seqInRow = getSequenceWithinRange(
                {
                  start: layer.start - insertedBpsLayer.start,
                  end: layer.end - insertedBpsLayer.start
                },
                sequence
              );
              let startOffset = layer.start - row.start;
              let width = seqInRow.length * charWidth;
              let height = sequenceHeight;
              let bufferBottom = 4;
              let bufferLeft = 2;
              let arrowHeight = isStart ? 8 : 0;
              return (

const { selectionLayer } = props;
        let toastFired;
        if (props.uppercaseSequenceMapFont !== "noPreference") {
          toastFired = true;
          props.updateSequenceCase("noPreference");
          window.toastr.success(
            `Sequence Case Edited Successfully. To avoid confusion we set: 'View > Sequence Case' to 'No Preference'`,
            {
              timeout: 10000
            }
          );
        }
        const func = type.includes("lower") ? "toLowerCase" : "toUpperCase";
        let newSeq;
        let orginalSeq = isSelection
          ? getSequenceWithinRange(selectionLayer, sequence)
          : sequence;
        if (type.includes("flip")) {
          newSeq = invertString(orginalSeq);
        } else {
          newSeq = orginalSeq[func]();
        }
        if (newSeq !== orginalSeq) {
          !toastFired &&
            window.toastr.success(`Sequence Case Edited Successfully`);
          //don't trigger a mutation unless something has actually changed
          props.updateSequenceData({
            ...props.sequenceData,
            sequence: isSelection
              ? adjustBpsToReplaceOrInsert(
                  sequence,
                  newSeq,