react-msaview (JBrowseMSA)

A multiple sequence alignment viewer, also known as JBrowseMSA.

Quick start

import { MSAViewer } from 'react-msaview'

;<MSAViewer
  msa=">human\nMKAA\n>mouse\nMKAG"
  tree="(human:0.1,mouse:0.2);"
  colorScheme="clustal"
/>

No model creation, no width management, no theme provider needed.

For R users:

library(msaviewr)
msaview(msa = "alignment.stock", color_scheme = "clustal")

Docs

• User guide
• Usage / API - React component, UMD bundle, and R package
• R package README - ggtree, Biostrings, Shiny

Demo

See ProteinBrowser for a full suite of protein analysis tools.

Packages

| Package | Description | | --------------------------------------------- | ---------------------------------------------------------- | | packages/lib | Main react-msaview React component | | packages/app | Demo application (deployed at https://gmod.org/JBrowseMSA) | | packages/cli | Command-line tools | | packages/msa-parsers | MSA file format parsers | | packages/r-msaview | R htmlwidget (ggtree/Biostrings/treeio interop) | | packages/svgcanvas | SVG canvas rendering (ESM fork of svgcanvas) | | packages/r-msaview | R htmlwidget (ape, ggtree, Biostrings, Shiny) |

Development

git clone https://github.com/GMOD/react-msaview
cd react-msaview
pnpm install

Run the demo app

pnpm dev

This starts the app with hot module reloading. Changes to packages/lib/src/ will automatically reload.

Build all packages

pnpm build

Run tests

pnpm test

Other commands

pnpm lint        # Run ESLint
pnpm format      # Format with Prettier
pnpm typecheck   # Typecheck all packages
pnpm clean       # Clean all dist folders

Notes

This repo also supports https://github.com/GMOD/jbrowse-plugin-msaview which is a JBrowse 2 plugin for viewing MSAs.

This repo also builds on abrowse (https://github.com/ihh/abrowse) and phylo-react (https://www.npmjs.com/package/phylo-react).