How to use the sequence alignment function？

[Oliwans]

Hello, I read the documentation carefully and found out that the documentation uses window.createAlignmentView to create a sequence alignment.

I use react to develop and use the tag to display the sequence. If I want to use the sequence Alignment function, I saw the demo and checked the source code, but I still don't know how to use it in react? Click the button in the picture below, where should the method triggered by it be written? The following is my code example, but it doesn’t work，I hope to use some fake data, just show it, and I will use other tools to generate real data， thank you！

import React from "react";
import { Editor, updateEditor, AlignmentView } from "open-vector-editor";
import store from "./store";

import "./App.css";

function App() {
  React.useEffect(() => {
    updateEditor(store, "DemoEditor", {
      sequenceData: {
        circular: true,
        sequence:
          "gtagagagagagtgagcccgacccccgtagagagagagtgagcccgacccccgtagagagagagtgagcccgacccccgtagagagagagtgagcccgaccccc",
        features: [
          {
            id: "2oi452",
            name: "I'm a feature :)",
            start: 10,
            end: 20
          }
        ],
panelsShown: [
        [
          {
            id: "circular",
            name: "Circular Map",
            active: true,
          },
          {
            id: "rail",
            name: "Linear Map",
            active: false,
          },
          {
            id: "jbeiAlignment1",
            type: "alignment", //panel must be of type alignment
            name: "Jbei Alignment p1243124",
            active: true
          }
        ],
        [
          {
            id: "sequence",
            name: "Sequence Map",
            active: true,
          },
          {
            id: "properties",
            name: "Properties",
            active: false,
          },
        ],
      ],
      }
    });
  });
  const editorProps = {
    editorName: "DemoEditor",
    isFullscreen: true,
    showMenuBar: true,
ToolBarProps: {
      toolList: global.viewRole
        ? [
            "cutsiteTool",
            "featureTool",
            "oligoTool",
            "orfTool",
            "partTool",
            "findTool",
            "visibilityTool",
          ]
        : [
            // "saveTool",
            "downloadTool",
            // "importTool",
            // "undoTool",
            // "redoTool",
            "cutsiteTool",
            "featureTool",
            "alignmentTool",
            "oligoTool",
            "orfTool",
            // "viewTool",
            "partTool",
            // "editTool",
            "findTool",
            "visibilityTool",
            // "propertiesTool",
          ],
    },
  };

  return (
    <div>
      <Editor {...editorProps} />
      <AlignmentView {...{
        id: "jbeiAlignment1", //give your alignment a unique id
        pairwiseAlignments: [  // this is an array of [referenceSequence, alignedSequence]
          [
            { //reference sequence must come first!
              sequenceData: {
                id: "FWER1231", //every sequenceData and alignmentData should have a unique id
                name: "GFPuv58",
                sequence:   "ttgagggg",
                features: [{id: "feat1", start: 2, end:4, name: "GFP CDS"}]
              },
              alignmentData: {
                sequence:   "ttgag--ggg--" //this length should be the same as the below alignmentData length!
              }
            },{ //aligned sequence must come second!
              sequenceData: {
                name: "GFPuv58",
                sequence:   "gagccgggtt"
              },
              alignmentData: {
                sequence:   "--gagccgggtt" //this length should be the same as the above alignmentData length!
              }
            }
          ]
        ],
        alignmentTracks: [
          { //reference sequence must come first!
            sequenceData: {
              id: "FWER1231", //every sequenceData and alignmentData should have a unique id
              name: "GFPuv58",
              sequence: "ttgayyggggyy",
              features: [{id: "feat1", start: 2, end:4, name: "GFP CDS"}]
            },
            alignmentData: {
              sequence: "ttgag--ggg--" //this length should be the same as the below alignmentData length!
            }
          }
        ],
        //additional view options:

        alignmentAnnotationVisibility: {
              features: true,
              translations: false,
              parts: true,
              orfs: true,
              orfTranslations: false,
              axis: true,
              cutsites: false,
              primers: true,
              reverseSequence: false,
              fivePrimeThreePrimeHints: true, 
              axisNumbers: true
          },
          alignmentAnnotationLabelVisibility: {
              features: true,
              parts: true,
              cutsites: false
          },
      }}/>
    </div>
  );
}

export default App;

[tnrich]

Hi @Oliwans sorry for the delayed response. You're hitting up against a part of the code that isn't very well documented and hasn't been used by anyone outside of Teselagen as far as I know. I've just added some functionality that should allow you to use the built in alignmentTool:

To use that functionality you'll need to pass a prop to the <Editor/> like so:

<Editor 
handleAlignment={async function handleAlignment({
  sequencesToAlign,
  isPairwiseAlignment,
  isAlignToRefSeq
}) {
  //your logic here 
  ...
  //return an object like: 
  return {
    //one of the following should be defined depending on the type of alignment you're doing: 
    alignedSequences  //should conform to the documented alignmentData object type
    pairwiseAlignments 
    alignmentsToRefSeq
  }

}}
/>

Lemme know if that works for you.