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

snipRange,
  row,
  sequenceLength,
  bpsPerRow,
  snipConnectorStyle,
  charWidth,
  index
) {
  //tnr: we basically need to first determine what the range start and end are..
  // var _snipRange = {
  //     ...snipRange,
  //     end: norm(snipRange.end-1,sequenceLength)
  // }
  //then mask the range by the row

  let overlaps = getOverlapsOfPotentiallyCircularRanges(
    snipRange,
    { ...row, end: row.end + 1 },
    sequenceLength
  );
  return overlaps.map(function(overlap, index2) {
    let { xStart, width } = getXStartAndWidthOfRangeWrtRow(
      overlap,
      row,
      bpsPerRow,
      charWidth,
      sequenceLength
    );
    width -= charWidth;
    //the second logical operator catches the special case where we're at the very end of the sequence..
    let newCursorStyle = assign({}, snipConnectorStyle, {
      left: xStart + 2,

.map(function(deletionLayer, index) {
          let rangeSpansSequence =
            deletionLayer.start === deletionLayer.end + 1 ||
            (deletionLayer.start === 0 &&
              deletionLayer.end === sequenceLength - 1);
          let { /* className = "", style = {},  */ color } = deletionLayer;
          let overlaps = getOverlapsOfPotentiallyCircularRanges(
            deletionLayer,
            row,
            sequenceLength
          );
          return overlaps.map(function(overlap) {
            let { xStart, width } = getXStartAndWidthOfRangeWrtRow(
              overlap,
              row,
              bpsPerRow,
              charWidth,
              sequenceLength
            );
            let deletionStart = overlap.start === deletionLayer.start;
            let deletionEnd = overlap.end === deletionLayer.end;

            return [

.map(function(lineageLine, index) {
          let rangeSpansSequence =
            lineageLine.start === lineageLine.end + 1 ||
            (lineageLine.start === 0 && lineageLine.end === sequenceLength - 1);
          let { /* className = "", style = {}, */ color } = lineageLine;
          let overlaps = getOverlapsOfPotentiallyCircularRanges(
            lineageLine,
            row,
            sequenceLength
          );
          return overlaps.map(function(overlap) {
            let { xStart, width } = getXStartAndWidthOfRangeWrtRow(
              overlap,
              row,
              bpsPerRow,
              charWidth,
              sequenceLength,
              ...(getGaps ? getGaps(row) : [])
            );
            let lineageStart =
              (getGaps ? getGaps(overlap.start).gapsBefore : 0) +
                overlap.start ===

range => {
            const trimmedRange = getOverlapsOfPotentiallyCircularRanges(
              range,
              rangeToShow,
              sequenceLength,
              true
            );
            if (!trimmedRange || !trimmedRange.length) return [];
            return { ...range, ...trimmedRange };
          }
        );

let normedCaretPos;
            if (atCaret) {
              normedCaretPos = normalizePositionByRangeLength(
                replacementLayer.caretPosition,
                sequenceLength
              );
            }
            let insertedBpsLayer = {
              ...replacementLayer,
              start: atCaret ? normedCaretPos : replacementLayer.start,
              end:
                (atCaret ? normedCaretPos : replacementLayer.start) +
                replacementLayer.sequence.length
            };
            let { sequence } = insertedBpsLayer;
            let layerRangeOverlaps = getOverlapsOfPotentiallyCircularRanges(
              insertedBpsLayer,
              row,
              sequenceLength
            );
            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;

selectionLayer,
                customTitle: customTitle || topLevelCustomTitle,
                sequenceLength,
                isProtein
              });
        const onSelectionContextMenu = function(event) {
          selectionLayerRightClicked &&
            selectionLayerRightClicked({
              event,
              annotation: selectionLayer
            });
        };

        let classNameToPass = className + " " + globalClassname;
        if (start > -1) {
          let overlaps = getOverlapsOfPotentiallyCircularRanges(
            selectionLayer,
            row,
            sequenceLength
          );
          //DRAW SELECTION LAYER
          if (overlaps.length) hasSelection = true;
          return overlaps.map(function(overlap, index) {
            const key = topIndex + "-" + index;
            let isTrueStart = false;
            let isTrueEnd = false;
            if (overlap.start === selectionLayer.start) {
              isTrueStart = true;
            }
            if (overlap.end === selectionLayer.end) {
              isTrueEnd = true;
            }

function(layer) {
        if (layer.caretPosition > -1) {
          return [];
        }
        let overlaps = getOverlapsOfPotentiallyCircularRanges(
          layer,
          row,
          sequenceLength
        );
        return overlaps;
      }
    );