Visualize Your DNA with SeqViz

Published in

lattice-automation

5 min readAug 8, 2019

The greatest thing about the internet is that it is a powerful conduit for sharing. And not just opinions and information — more and more tools, for tasks as generic as photo editing and text editing, to tasks as niche as making a meme gif or converting MPEG files to MP4, are being shared on the web for all to use. No license to purchase, no contracts to sign, just simple and ready to use.

Lattice Automation is releasing one such tool to add to your list: SeqViz, a simple, open-source, customizable sequence viewer for the web.

Demo at: https://tools.latticeautomation.com/seqviz/

Simple to Use, Simple to Integrate

Install

npm install seqviz

SeqViz provides circular and linear sequence viewers out of the box.

Usage

SeqViz is written in React but can in any Javascript environment.

React

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

Vanilla-JS

<script>
  window.seqviz
    .Viewer("root", {
      name: "L09136",
      seq: "tcgcgcgtttcggtgatgacggtgaaaacctctgacacatgca"
    })
    .render();
</script>

It also comes with parsers for common sequence file formats to facilitate ease of input. The library can currently read:

FASTA format (.seq, .fa, .fas, .fasta)
GENBANK format (.gb, .gbk, .genbank, .ape)
SNAPGENE format (.dna)
JBEI format
SBOL 1.0 and SBOL 2.0 formats
Benchling format
BioBricks

with more parser support coming soon. If the format you use is not yet supported by SeqViz, you can provide the library with a string or JSON representation of the sequence, or a string accession id, if the part can be found in the NCBI or iGEM registries. The library will fetch and interpret the data for you and render it to the sequence viewer. Read more on sequence data accepted by SeqViz in the documentation.

Open-sourced, Open to Improvement

SeqViz is free and open-sourced for the betterment of the SynBio community

You can see all of the code for the library as it continues to evolve for better performance, neater aesthetics, and more plentiful features. SeqViz is hosted and maintained by Lattice Automation but provided under the MIT Software License. This means that you are free to use, modify, and improve upon the library, while Lattice helps manage the source code, patch vulnerabilities, incrementally improve the tools, and even provide external utilities.

SeqViz is built upon years of domain expertise in visualizing sequences.

Lattice Automation has built custom sequence viewers for companies like Corteva Agriscience (see our company engagements for more information), and we also provide our own platform for end-to-end synthetic biology development in the form of Loom Tools for Synthetic Biology (engage with our Alpha testing program by messaging contact@latticeautomation.com). The SeqViz source code is a culmination of all that we have learned about displaying sequence information in the browser and it will continue to grow as we develop our commercial products.

We invite you to contribute feature requests and code additions directly to the library via GitHub. Visit https://github.com/Lattice-Automation/seqviz for the full library and demonstration code, as well as information on how to start contributing.

Custom Look, Custom Feel

A Google Maps for DNA Sequences.

A demo of the SeqViz library used to visualize BioBricks is available at tools.latticeautomation.com/seqviz. The demo has user interface for most of the libraries customizable settings, including 1) how to display the sequence controlled by the Topology dropdown, 2) zooming in and out on the linear viewer controlled by the Zoom slider, 3) searching for subsequences in the search box, 4) controlling whether or not data is fetched from our annotation service with the Auto-annotate sliding checkbox, 5) controlling whether annotations, complement strand, and numbered axis are shown on the viewers with their respective sliding checkboxes, and 6) controlling whether cut sites of 4 enzymes specifically relevant to BioBricks are shown in the viewers with the Enzyme selection buttons

SeqViz was built to be a customizable library you can plug into an existing online resource (a website, wiki page, or webpage). While it provides you with an aesthetic viewer out of the box, it has no requirements on how you structure the user interface around it or how you pass it information, as long as the information is consumable by Javascript. If you have an existing ReactJS project, for example, you can simply import SeqViz as a dependency and use it as a React component. If you would like to allow people to interact with your sequence viewer you can build UI elements for

Choosing whether to view the sequence in a Plasmid viewer or a Linear viewer or both
Choosing whether to show annotations
Choosing whether to show the complement strand nucleotide bases
Choosing whether to show an index line enumerating the bases
Zooming in and out on the Linear viewer
Choosing a list of colors to draw your annotations with
Searching sequences for a subsequence
Searching sequences for certain enzyme cut sites

The GenBank **AF165912** sample part retrieved by accession id, displayed on a plasmid and linear sequence viewer with a search for ATG start codon. You can generate the view above with the code below, passing in the appropriate id in the HTML input box.

Built for Interaction

Click, drag, and scroll through your custom sequence viewer.

SeqViz is built to be reactive and interactive. You can drag to select and click on annotations. As you interact with the viewer, the library will return an object containing information about your selected subsequence which contains helpful information like base-pair indices, length of the selection, Tm, GC%, name and type of feature selected, etc. Access this information through the onSelection() function to display it in your custom UI or use it in your application elsewhere. Read more about the onSelection() function on the documentation.

A demo of the SeqViz library used to visualize BioBricks is available at tools.latticeautomation.com/seqviz. If you select an annotation on the viewer you have the option of viewing its meta-information by clicking the Show Meta button.

The library will also return an object containing search results when the constructor is provided with a search query. This includes the full list of matches, including the start and end indices of each match. You can access this information through the onSearch() function (more information in the repo documentation).