A JavaScript Mauve/.xmfa viewer for multiple whole genome alignments. The UI is highly inspired by the original Mauve viewer, with web/application integration in mind. Note this is a work in progress.
Alignment of 11 Brucella reference genomes:
Zooming in to view features/annotations of Ecoli:
The original Mauve viewer is great, but it's written in Java and doesn't run in the browser. I'm particularly interested in creating a general purpose solution for genome alignment tools, such as Mummer4.
Collaboration is welcome!
- panning, scaling, zoom
- tooltips (Todo: make customizable)
- SVG Download
- Canvas resizing
- Performance improvements?
- d3 v5 (currently)
MauveViewer does not currently package d3.js and takes a reference to d3 when instantiating the viewer. See below.
First, make sure the CSS is included:
<link rel="stylesheet" type="text/css" href="dist/mauve-viewer.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="dist/mauve-viewer.js"></script>
See example here.
import * as d3 from 'd3';
import MauveViewer from 'dist/mauve-viewer';
requirejs.config({
baseUrl: 'dist',
});
requirejs([
'mauve-viewer', 'path/to/d3'
], function (MauveViewer, d3) {
...
})See example here.
<body>
<!-- note: canvas auto-resizing is not implemented yet -->
<div class="mauve-viewer" style="margin: 0 auto; width:1024px;"></div>
</body>let mauveViewer = new MauveViewer({
d3: d3,
ele: document.querySelector('.mauve-viewer'),
lcbs: [
[
{
"name": "track 1",
"start": 200,
"end": 300,
"strand": "+",
"lcb_idx": 1
},
{
"name": "track 2",
"start": 100,
"end": 200,
"strand": "+",
"lcb_idx": 2
}
]
]
})| Param | Type | Required? |
|---|---|---|
| d3 | Reference to d3 | ✓ |
| ele | DOM element | ✓ |
| lcbs | LCBs (list of lists) | ✓ |
| labels | Object (see below) | - |
| features | Object (see below) | - |
| contigs | Object (see below) | - |
| Param | Type | Required? | Default |
|---|---|---|---|
| onFeatureClick | function(Object) {} | - | - |
Each LCB is grouped as an Array of Objects. To parse .xmfa files into json-formatted LCBs, you may consider using this script. It's based on biojs-io-xmfa. It can be ran as follows:
git clone https://github.com/nconrad/p3_mauve && cd p3_mauve
npm install
node ./scripts/mauve-parser.js --input test-data/alignment.xmfa > lcbs.json
lcbs.json:
[
[
{
"name": "224914.11.fasta",
"start": 6,
"end": 2003350,
"strand": "-",
"lcb_idx": 1
}, ...
], ...
] This is a mapping from the name/path of the fasta file to a more meaningful name, such as the organism name.
{
"224914.11.fasta": "Brucella melitensis bv. 1 str. 16M",
"204722.5.fasta": "Brucella suis 1330",
"444178.3.fasta": "Brucella ovis ATCC 25840",
"262698.4.fasta": "Brucella abortus bv. 1 str. 9-941",
"483179.4.fasta": "Brucella canis ATCC 23365"
}{
"224914.11": [
{
"annotation": "PATRIC",
"feature_type": "tRNA",
"patric_id": "fig|224914.11.rna.23",
"product": "tRNA-Met-CAT",
"strand": "+",
"sequence_id": "NC_003317",
"start": 558758,
"end": 558834,
"accession": "NC_003317",
"xStart": 558758,
"xEnd": 558834
},
...
], ...
}{
"224914.11": [
{
"gi": 17986284,
"sequence_type": "chromosome",
"topology": "circular",
"chromosome": "I",
"length": 2117144,
"sequence_id": "NC_003317",
"description": "Brucella melitensis 16M chromosome I, complete sequence.",
"accession": "NC_003317",
"gc_content": 57.2,
"xStart": 1,
"xEnd": 2117144
}, ...
], ...
}npm install
npm start
npm run build
This creates a new build in dist/.
In the meantime, please cite this repo:
N. Conrad, A Whole Genome Alignment Visualization Tool for the Web, (2019), GitHub repository, https://github.com/nconrad/mauve-viewer
Released under the MIT license.