npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

seqviz

v3.10.9

Published

A viewer for DNA, RNA, and protein sequences that supports many input formats

Downloads

5,145

Readme

SeqViz is a DNA, RNA, and protein sequence viewer.

Used By

Table of Contents

Demo

You can see a demo at tools.latticeautomation.com/seqviz. The source is in /demo.

Features

Linear and Circular Sequence Viewers

  • Annotations, primers, and highlights with names and colors
  • Amino acid translations
  • Enzyme cut sites
  • Searching with mismatches and highlighting

Sequence and Element Selection

  • Selecting a range on the viewer(s), or clicking an annotation, translation, primer, cutSite, or searchResult, highlights the selection and passes it to the onSelection() callback.

Usage

Installation

npm

npm install seqviz

CDN

<script src="https://unpkg.com/seqviz"></script>

Instantiation

React

import { SeqViz } from "seqviz";

export default () => (
  <SeqViz
    name="J23100"
    seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC"
    annotations={[{ name: "promoter", start: 0, end: 34, direction: 1, color: "blue" }]}
  />
);

Non-React

More details are in the Viewer without React section.

<script>
  window.seqviz
    .Viewer("root", {
      name: "L09136",
      seq: "tcgcgcgtttcggtgatgacggtgaaaacctctgacacatgca",
      style: { height: "100vh", width: "100vw" },
    })
    .render();
</script>

Props

All the following are usable as props for the React component (seqviz.SeqViz) or as options for the plain JS implementation (seqviz.Viewer()).

Required

seq (='')

A sequence to render. Can be a DNA, RNA, or amino acid sequence.

File or Accession

These props are @deprecated and may be removed in a future major release. We recommend parsing sequence files outside of SeqViz with the seqparse package.

  • file is a FASTA, GenBank, SnapGene, JBEI, or SBOL file (string | File)
  • accession is an NCBI accession-ID (string)

For example:

import seqparse from "seqparse";

export default () => {
  const [seq, setSeq] = useState({ name: "", seq: "", annotations: [] });

  // fetch and parse a sequence from NCBI: https://www.ncbi.nlm.nih.gov/nuccore/MN623123.1
  useEffect(async () => setSeq(await seqparse("MN623123.1")));

  return <SeqViz name={seq.name} seq={seq.seq} annotations={seq.annotations} />;
};

Optional

viewer (='both')

The type and orientation of the sequence viewers. One of "linear" | "circular" | "both" | "both_flip". both means the circular viewer fills the left side of SeqViz, and the linear viewer fills the right. both_flip is the opposite: the linear viewer is on the left, and the circular viewer is on the right.

name (='')

The name of the sequence/plasmid. Shown at the center of the circular viewer.

annotations (=[])

An array of Annotations to render. Each Annotation requires 0-based start (inclusive) and end (exclusive) indexes. names are rendered on top of the annotations. Set the annotation's direction to 1 for forward arrows and -1 for reverse arrows.

annotations = [
  { start: 0, end: 22, name: "Strong promoter", direction: 1 }, // [0, 22)
  { start: 23, end: 273, name: "GFP" },
  { start: 300, end: 325, name: "Weak promoter", direction: -1, color: "#FAA887" },
];

In the example above, the "Strong promoter" would span the first to twenty-second base pair.

primers (=[])

An array of Primers to render. Each Primer requires 0-based start (inclusive) and end (exclusive) indexes. names are rendered on top of the primers. Set the primer's direction to 1 for forward primer and -1 for reverse primer.

primers = [
  { start: 33, end: 53, name: "LacZ Foward Primer", direction: 1 },
  { start: 3098, end: 3128, name: "LacZ Reverse Primer", direction: -1, color: "#FAA887" },
];

In the example above, the forward and reverse primers of LacZ are define by the direction parameter. Notice that color could be used optionally.

translations (=[])

An array of translations: sequence ranges to translate and render as amino acids sequences. Requires 0-based start (inclusive) and end (exclusive) indexes relative the DNA sequence. A direction is required: 1 (FWD) or -1 (REV). It will also render a handle to select the entire range. A color is optional for the handle. If the empry string ("") is provided as the name, the handle will not be rendered.

translations = [
  { start: 0, end: 90, direction: 1, name: "ORF 1", color: "#FAA887" }, // [0, 90)
  { start: 191, end: 522, direction: -1, name: "" },
];

enzymes (=[])

An array of restriction enzymes to show recognition sites for. A list of pre-defined enzymes in src/enzymes.ts can be referenced by name. Example:

enzymes = [
  "EcoRI",
  "PstI",
  {
    name: "Cas9",
    rseq: "NGG", // recognition sequence
    fcut: 0, // cut index on FWD strand, relative to start of rseq
    rcut: 1, // cut index on REV strand, relative to start of rseq
    color: "#D7E5F0", // color to highlight recognition site with
    // (optional) only show recognition sites between 100th and 250th index [100, 250)
    range: {
      start: 100,
      end: 250,
    },
  },
];

highlights (=[])

Ranges of sequence to highlight. A default color from colors is used if none is provided.

highlights = [
  { start: 36, end: 66, color: "magenta" },
  { start: 70, end: 80 },
];

zoom (={ linear: 50 })

How zoomed the viewer(s) should be 0-100. Key'ed by viewer type, but only linear is supported.

colors (=[])

An array of colors to use for annotations, translations, and highlights. Defaults are in src/colors.ts.

bpColors (={})

An object mapping base pairs to their color. The key/bp is either a nucleotide type or 0-based index. Example:

bpColors = { A: "#FF0000", T: "blue", 12: "#00FFFF" };

style (={})

Style for seqviz's outer container div. Empty by default. Useful for setting the height and width of the viewer if the element around seqviz lacks one. For example:

style = { height: "100vh", width: "100vw" };

selection (={})

This (optional) selection prop is useful if you want to externally manage and set the selection state:

selection = {
  start: 133,
  end: 457,
  clockwise: true,
};

onSelection (=(_: Selection) => {})

A callback executed after selection events. It accepts a single Selection type argument.

This occurs after drag/drop selections and clicks. It will have meta on annotation, translation, enzyme, highlight or search elements if one was selected. The example below shows an annotation selection:

{
  "end": 457,
  "length": 324,
  "name": "lacZ fragment",
  "start": 133,
  "type": "ANNOTATION",
}

search (={})

Sequence search parameters. Takes a query sequence and the maximum allowable mismatch for a match (default: 0). Matches are highlighted.

search = { query: "aatggtctc", mismatch: 1 };

Searching supports wildcard symbols, e.g. { query: "AANAA" }. All symbols supported are in src/sequence.ts.

onSearch (=(_: Range) => {})

A callback executed after a search event. This is called once on initial render and every time the sequence changes thereafter. An example of search results is below:

[
  {
    start: 728,
    end: 733,
    direction: 1,
    index: 0,
  },
  {
    start: 1788,
    end: 1793,
    direction: -1,
    index: 1,
  },
];

copyEvent (=(e: KeyboardEvent) => e.key === "c" && (e.metaKey || e.ctrlKey))

A function returning whether to copy the viewer(s) current selection during a keyboard event. The default method copies sequence after any ctrl+c or meta+c keyboard events.

selectAllEvent (=(e: KeyboardEvent) => e.key === "a" && (e.metaKey || e.ctrlKey))

A function returning whether to select the whole sequence during a keyboard event. The default method select whole sequence after any ctrl+a or meta+a keyboard events.

showComplement (=true)

Whether to show the complement sequence.

rotateOnScroll (=true)

By default, the circular viewer rotates when scrolling over the viewer. That can be disabled with rotateOnScroll: false.

disableExternalFonts (=false)

If true, SeqViz will not download fonts from external sites. By default the library will attempt to download "Roboto Mono:300,400,500" after first mount.

refs (={ circular: undefined, linear: undefined })

See: custom viewer positioning

Custom Viewer Positioning

This makes use of the children and refs props to allow custom rendering of the sequence viewers. For example, to render the linear viewer above the circular viewer:

import { useRef } from "react";
import { Circular, Linear, SeqViz } from "seqviz";

export default () => {
  const circular = useRef();
  const linearRef = useRef();

  return (
    <SeqViz name="J23100" seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC" refs={{ circular, linear }}>
      {({ circularProps, linearProps, ...props }) => (
        <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
          <div ref={linear} style={{ height: "25%", width: "100%" }}>
            <Linear {...linearProps} {...props} />
          </div>
          <div ref={circular} style={{ height: "75%", width: "100%" }}>
            <Circular {...circularProps} {...props} />
          </div>
        </div>
      )}
    </SeqViz>
  );
};

Without React

For usability in non-React apps, we provide a thin wrapper around the React component. The viewer's constructor accepts two arguments:

const element = document.getElementById("root");
const viewer = seqviz.Viewer(element, props);
// Render the viewer to the DOM at the node passed in $element`.
viewer.render();
// To later update the viewer's configuration and re-renders.
viewer.setState(props);
// To render the viewer, eg for server-side rendering, and returns it as an HTML string.
viewer.renderToString();

Contact Us

This library is maintained by Lattice Automation.

You can report bugs and request features at Issues or contact us directly at [email protected]