A DNA sequence viewer. Supports custom, GenBank, FASTA, or NCBI accession input
SeqViz
is a customizable DNA sequence viewer. It currently provides:
-
Multiple input formats
- Sequence
- File (FASTA, GenBank, SBOL, SnapGene)
- Accession (NCBI or iGEM)
-
Circular plasmid viewer
- Annotations with names and colors
- Index of sequence
- Name of plasmid
- Base pair length of sequence
-
Linear sequence viewer
- Annotations with names and colors
- Amino acid translations
- Sequence and complement nucleotide bases
- Index of sequence
- Enzyme cut sites
- Highlighted sequence search results
-
Selections
- Clicking on an
annotation
,translation
,enzyme
orsearchElement
, or dragging over the sequence, will create a selection - Information about selections is available via
options.onSelection()
(see viewer options)
- Clicking on an
npm install seqviz
<script src="https://unpkg.com/seqviz"></script>
import { SeqViz } from "seqviz";
export default () => (
<SeqViz
name="J23100"
seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC"
annotations={[{ name: "promoter", start: 0, end: 34, direction: 1, color: "blue" }]}
/>
);
<script>
window.seqviz
.Viewer("root", {
name: "L09136",
seq: "tcgcgcgtttcggtgatgacggtgaaaacctctgacacatgca",
style: { height: "100vh", width: "100vw" }
})
.render();
</script>
The viewer's constructor (Vanilla-JS) accepts two arguments.
element
-- either a string id attribute like"root"
or"app-root"
or an element; e.g. fromdocument.getElementById()
options
-- options as documented in greater detail below
Renders the viewer to the DOM at the node passed in ${element}
.
Renders the viewer and returns as an HTML string.
Update the viewer's configuration and re-renders.
All the following are usable as props via the React component (seqviz.SeqViz
) or as properties of an options
object via the JS implementation (seqviz.Viewer()
).
The DNA sequence to render.
An NCBI accession ID or iGEM part ID. Populates options.name
, options.seq
, and options.annotations
.
A File, Blob, or body (string/utf8) from a FASTA, Genbank, SnapGene, or SBOL file. Populates options.name
, options.seq
, and options.annotations
.
One of ["linear", "circular", "both", "both_flip"]) the type of viewer to show. "both" by default. "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.
The name of the sequence/plasmid.
The complement sequence. Inferred from seq
by default.
Whether to show the complement sequence.
Whether to show the index line and ticks below the sequence.
An array of annotation
objects for the viewer. Each annotation
object requires 0-based start (inclusive) and end (exclusive) indexes. For forward arrows, set the annotation's direction to 1
and -1
for reverse arrows. A direction of 0
or no direction produces annotations without arrows. Names (optional) are rendered on top the annotation.
[
{ 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 basepair.
An array of translation
objects for rendering ranges of amino acids beneath the DNA sequence. Like annotation
's, translation
objects requires 0-based start (inclusive) and end (exclusive) indexes relative the DNA sequence. A direction is required (1 (FWD) or -1 (REV)).
[
{ start: 0, end: 90, direction: 1 }, // [0, 90)
{ start: 191, end: 522, direction: -1 }
];
An array of restriction enzyme names whose recognition sites should be shown. Example: ["PstI", "EcoRI"]
. This is case-insensitive. The list of supported enzymes is in src/utils/enzymes.js.
Unsupported enzymes can also be passed through an object where the keys are the enzymes' names and the values are the enzymes:
{
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
}
}
How zoomed the viewer(s) should be 0-100
. Keyed by viewer type (options.viewer
).
An object mapping bp to color where bp is a nucleotide or 0-based index. Example:
{ "A": "#FF0000", "T": "blue", 12: "#00FFFF" }
An array of color hex codes for annotation coloring. Defaults to:
[
"#9DEAED", // cyan
"#8FDE8C", // green
"#CFF283", // light green
"#8CDEBD", // teal
"#F0A3CE", // pink
"#F7C672", // orange
"#F07F7F", // red
"#FAA887", // red-orange
"#F099F7", // magenta
"#C59CFF", // purple
"#6B81FF", // blue
"#85A6FF" // light blue
];
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 a defined height and/or width. For example:
{ height: "100vh", width: "100vw" }
Callback function executed after selection events. Should accept a single selection
argument: (selection) => {}
.
This occurs after drag/drop selection and clicks. If an annotation
, translation
, enzyme
or searchElement
was clicked, the selection
object will have info on the selected element. The example below is of a selection
object following an annotation
click.
{
// selection
"name": "lacZ fragment",
"type": "ANNOTATION",
"seq": "ctatgcggcatcagagcagattgtactgagagtgcaccatatgcggtgtgaaataccgcacagatgcgtaaggagaaaataccgcatcaggcgccattcgccattcaggctgcgcaactgttgggaagggcgatcggtgcgggcctcttcgctattacgccagctggcgaaagggggatgtgctgcaaggcgattaagttgggtaacgccagggttttcccagtcacgacgttgtaaaacgacggccagtgccaagcttgcatgcctgcaggtcgactctagaggatccccgggtaccgagctcgaattcgtaatcatggtcat",
"gc": 55.3,
"tm": 85,
"start": 133,
"end": 457,
"length": 324,
"direction": -1
"clockwise": true,
"color": "#8FDE8C",
}
A search
object for specifying search results to highlight on the viewer. An example is below:
{ "query": "aatggtctc", "mismatch": 1 }
Searching supports the following nucleotide wildcards within the query
.
{
"y": ["c", "t"],
"r": ["a", "g"],
"w": ["a", "t"],
"s": ["c", "g"],
"k": ["g", "t"],
"m": ["a", "c"],
"d": ["a", "g", "t"],
"v": ["a", "c", "g"],
"h": ["a", "c", "t"],
"b": ["c", "g", "t"],
"x": ["a", "c", "g", "t"],
"n": ["a", "c", "g", "t"]
}
mismatch
is an int
denoting the maximum allowable mismatch between the query and a match within the viewer's sequence (see: Hamming distance).
Callback executed after a search event. Called once on initial render. Accepts a single searchResults
argument: (searchResults) => {}
. An example of a searchResults
array is below.
[
{
start: 728,
end: 733,
direction: 1,
index: 0
},
{
start: 1788,
end: 1793,
direction: -1,
index: 1
}
];
A functions that returns whether to copy the selected range on the viewer(s) to the user's clipboard.
An example of an options.copyEvent
function for copying after ctrl+c
or meta+c
events:
event => event.key === "c" && (event.metaKey || event.ctrlKey);
By default, the circular viewer rotates when scrolling with a mouse over the viewer. That can be disabled by setting rotateOnScroll
to false.
This is a feature specific to BioBricks (options.accession
). The library currently supports BBa_K1362091
, BBa_K823055
, pSB1A3
, pSB1A7
, pSB1AC3
, pSB1AK3
, pSB1AT3
, pSB1C3
, pSB1K3
, and pSB1T3
.
Custom backbones, as DNA strings, are also supported (for example: ATGATATAGAT
).
You can see a demonstration with iGEM BioBricks at: tools.latticeautomation.com/seqviz.
For developers, the demo source code is at seqviz/demo.
You can also check out an example of using SeqViz to view NCBI GenBank entries in our Medium post.
This library is currently being maintained by Lattice Automation.
You can report bugs at Issues or contact us directly at contact@latticeautomation.com