BandageJS
Scroll or pinch to zoom · drag to pan · drag a node to move it · click a bubble label to open it · click a node for its details Pinch to zoom · drag to pan · tap a bubble label to open it · tap a node for its details

Drop a GFA file anywhere on the page

Open a graph

GFA 1, plain or gzipped, including rGFA tags and P or W lines for paths and walks.

From your computer

Or drop the file anywhere on the page.

From a url

A GFA, or a gbz-base .gbz.db or gfa-to-tabix .walks.bed.gz to cut a region from. The server has to allow cross-origin reads. The page's address then links back to the graph.

From a pangenome database

Cut a region out of a gbz-base .gbz.db or a gfa-to-tabix walk file set by range requests, such as the HPRC release 2 graph.

User guide

Mouse

Scroll
Zoom about the pointer
Drag
Pan
Drag a node
Move it
Click a node
Its details beside the drawing: where it lies, its links at each end, the walks through it, its bubble and its genes. Click a neighbour there to move to it
Click a bubble label
Open the bubble on its own; Back returns
Click a walk's panel title
Highlight that walk alone, out of the side by side panels
Point at a walk row under the graph
Ring its node in the drawing and tick each walk through it
Click a walk row under the graph
Highlight its walk, or clear it
Point at a bar in the Walk rows layout
Name the node its walk passes there
Click a haplotype's bar in the Walk rows layout
Select its walk, with a link to JBrowse

Touch

Pinch
Zoom
Drag
Pan
Tap a node
Select it
Tap a bubble label
Open the bubble on its own

Keyboard

+ −
Zoom in and out
0
Fit the graph to the window
Escape
Deselect the node, or close a menu or dialog
Enter on a bubble label
Open the bubble
/
Find a node: type part of its name, Enter zooms to it and selects it
Escape in Find node
Clear it
g
Go to a region or gene on the reference: type chr6:160,614,798-160,647,758, one position, or a gene's name, and Enter frames it. Outside the window cut from a database, it cuts there instead. ‹ and › step half a window along the reference
?
This guide

Reading the drawing

Colour
Where a node lies along the reference, as the key in the corner shows; charcoal nodes lie off it. View → Colour picks another scheme
Width
Read depth, while Layout settings → Width by depth is on
Grey links
Join node ends, their arrowheads pointing the way they read
Dashed links
Deletions: a link that skips reference sequence
Halos and their labels
Bubbles, labelled by kind, such as “≤241 bp ins”; click a label to open the bubble
Gold outlines round a node
The exons of the gene whose name stands above them

Genes

File → Reference genome says which assembly the graph's reference is on, and so which genes it shows, and takes JBrowse configs to find more. See genes and reference assemblies.

BandageJS

A pangenome and assembly graph viewer for the browser. It runs the force-directed layout of Bandage in wasm, and adds reference-anchored layouts, bubbles and haplotype walks. Released under the GPL-3.0-or-later license.

README · Source on GitHub · Report a problem

Layout settings

Force-directed

Quality, spacing and bubble spread apply to the force-directed layout.

Colour highlighted haplotypes

Open pangenome database

A .gbz.db from gbz-base, or a <prefix>.<sample>.walks.bed.gz from gfa-to-tabix --walks with its .tbi beside it. Either is read by range requests from any server that allows cross-origin reads. The defaults are the HPRC release 2 graph.

Reference assembly

Hubs

JBrowse config.json files the page finds genomes in, first to last.