How to use ve-sequence-utils - 10 common examples

if (payloadToUse.pairwiseAlignments) {
      if (
        payloadToUse.pairwiseAlignments[0][0].alignmentData.matchStart !==
        undefined
      ) {
        payloadToUse.pairwiseAlignments = payloadToUse.pairwiseAlignments.map(
          addDashesForMatchStartAndEndForTracks
        );
      }
      const templateSeq = payloadToUse.pairwiseAlignments[0][0];
      //we need to get all of the sequences in a single alignment (turning inserts into single BP red highlights)
      const pairwiseOverviewAlignmentTracks = [
        {
          //add the template seq as the first track in the Pairwise Alignment Overview
          ...templateSeq,
          sequenceData: tidyUpSequenceData(templateSeq.sequenceData),
          alignmentData: { sequence: templateSeq.sequenceData.sequence } //remove the gaps from the template sequence
        }
      ]; // start with just the template seq in there!

      payloadToUse.pairwiseAlignments.forEach(([template, alignedSeq]) => {
        const condensedSeq = condensePairwiseAlignmentDifferences(
          template.alignmentData.sequence,
          alignedSeq.alignmentData.sequence
        );
        let re = /r+/gi;
        let match;
        const additionalSelectionLayers = [];
        while ((match = re.exec(condensedSeq)) != null) {
          additionalSelectionLayers.push({
            start: match.index,
            end: match.index + match[0].length - 1,

handler: props => {
      props.onCreateNewFromSubsequence(
        getSequenceDataBetweenRange(props.sequenceData, props.selectionLayer),
        props
      );
    }
    // hotkey: "mod+x"

handleComplementSequence: props => () => {
      const { sequenceData, updateSequenceData } = props;
      updateSequenceData(getComplementSequenceAndAnnotations(sequenceData));
      window.toastr.success("Complemented Sequence Successfully");
    },
    /* eslint-enable no-unused-vars */

payloadToUse.pairwiseAlignments.forEach(([template, alignedSeq]) => {
        const condensedSeq = condensePairwiseAlignmentDifferences(
          template.alignmentData.sequence,
          alignedSeq.alignmentData.sequence
        );
        let re = /r+/gi;
        let match;
        const additionalSelectionLayers = [];
        while ((match = re.exec(condensedSeq)) != null) {
          additionalSelectionLayers.push({
            start: match.index,
            end: match.index + match[0].length - 1,
            ...highlightRangeProps
          });
        }
        re = /g+/gi;
        // let match;
        while ((match = re.exec(condensedSeq)) != null) {

onClick={handleSubmit(data => {
              let updatedData;
              if (data.forward === true && data.strand !== 1) {
                updatedData = { ...data, strand: 1 };
              } else if (data.forward === false && data.strand !== -1) {
                updatedData = { ...data, strand: -1 };
              } else {
                updatedData = data;
              }
              const hasJoinedLocations =
                updatedData.locations && updatedData.locations.length > 1;

              const newFeat = tidyUpAnnotation(
                convertRangeTo0Based({
                  ...updatedData,
                  ...(annotationTypePlural === "primers" //if we're making a primer it should automatically have a type of primer
                    ? { type: "primer" }
                    : {}),
                  locations: undefined, //by default clear locations
                  ...(hasJoinedLocations && {
                    //only add locations if there are locations
                    start: updatedData.locations[0].start, //override the start and end to use the start and end of the joined locations
                    end:
                      updatedData.locations[updatedData.locations.length - 1]
                        .end,
                    locations: updatedData.locations.map(convertRangeTo0Based)
                  })
                }),
                {

onClick={handleSubmit(data => {
              let updatedData;
              if (data.forward === true && data.strand !== 1) {
                updatedData = { ...data, strand: 1 };
              } else if (data.forward === false && data.strand !== -1) {
                updatedData = { ...data, strand: -1 };
              } else {
                updatedData = data;
              }
              const hasJoinedLocations =
                updatedData.locations && updatedData.locations.length > 1;

              const newFeat = tidyUpAnnotation(
                convertRangeTo0Based({
                  ...updatedData,
                  locations: undefined, //by default clear locations
                  ...(hasJoinedLocations && {
                    //only add locations if there are locations
                    start: updatedData.locations[0].start, //override the start and end to use the start and end of the joined locations
                    end:
                      updatedData.locations[updatedData.locations.length - 1]
                        .end,
                    locations: updatedData.locations.map(convertRangeTo0Based)
                  })
                }),
                {
                  sequenceData,
                  annotationType: "features"
                }

return (
        _sequenceDataToInsert,
        _existingSequenceData,
        _caretPositionOrRange,
        _options
      ) => {
        const {
          sequenceDataToInsert,
          existingSequenceData,
          caretPositionOrRange,
          options
        } = props.beforeSequenceInsertOrDelete
          ? props.beforeSequenceInsertOrDelete(
              tidyUpSequenceData(_sequenceDataToInsert),
              tidyUpSequenceData(_existingSequenceData),
              _caretPositionOrRange,
              _options
            ) || {}
          : {};
        return [
          insertSequenceDataAtPositionOrRange(
            sequenceDataToInsert || _sequenceDataToInsert,
            existingSequenceData || _existingSequenceData,
            caretPositionOrRange || _caretPositionOrRange,
            options || _options
          ),
          options || _options || {}
        ];
      };
    },

translations: true,
          primaryProteinSequence: false,
          parts: true,
          orfs: true,
          cutsites: true,
          primers: true,
          ...annotationsToSupport
        }
      };
    }
  }
  const initialValuesToUse = {
    ...toSpread,
    ...rest,
    ...(sequenceData && {
      sequenceData: tidyUpSequenceData(sequenceData, {
        convertAnnotationsFromAAIndices,
        //if we have sequence data coming in make sure to tidy it up for the user :)
        annotationsAsObjects: true
      })
    })
  };

  store.dispatch({
    type: "VECTOR_EDITOR_UPDATE",
    payload: initialValuesToUse,
    meta: {
      editorName,
      disregardUndo: true,
      ...extraMeta
    }
  });

updateSeqData = sequenceData => {
    this.activeSeqData = sequenceData;
    this.props.vectorEditorInitialize(
      {
        sequenceData:
          (sequenceData && tidyUpSequenceData(sequenceData)) ||
          tidyUpSequenceData({
            sequence: "gTAGAGACAAGA"
          })
      },
      {
        editorName: "veVersionHistoryView"
      }
    );
  };
  componentDidMount = async () => {

return (
        _sequenceDataToInsert,
        _existingSequenceData,
        _caretPositionOrRange,
        _options
      ) => {
        const {
          sequenceDataToInsert,
          existingSequenceData,
          caretPositionOrRange,
          options
        } = props.beforeSequenceInsertOrDelete
          ? props.beforeSequenceInsertOrDelete(
              tidyUpSequenceData(_sequenceDataToInsert),
              tidyUpSequenceData(_existingSequenceData),
              _caretPositionOrRange,
              _options
            ) || {}
          : {};
        return [
          insertSequenceDataAtPositionOrRange(
            sequenceDataToInsert || _sequenceDataToInsert,
            existingSequenceData || _existingSequenceData,
            caretPositionOrRange || _caretPositionOrRange,
            options || _options
          ),
          options || _options || {}
        ];
      };
    },