Browser-based interactive structural variant visualization, ported from samplot.

samplot.js reads indexed BAM files directly in the browser and renders samplot-style visualizations on an HTML5 Canvas — no server-side processing required.

• Browser-native BAM reading via @gmod/bam
• Canvas rendering matching Python samplot's visual style
• Coverage tracks with high/low mapping quality separation
• Paired-end read visualization colored by event type (DEL/DUP/INV)
• Split-read visualization
• Variant bar with SV size annotation
• Interactive navigation (zoom, pan)
• Support for remote BAM URLs and local file selection
• Multi-sample display

<div id="samplot-container" style="width:800px;"></div>
<script src="samplot.js"></script>
<script>
  const viewer = new Samplot({
    container: '#samplot-container',
    samples: [
      { url: '/data/NA12878.bam', label: 'NA12878' },
      { url: '/data/NA12889.bam', label: 'NA12889' },
      { url: '/data/NA12890.bam', label: 'NA12890' },
    ],
    chrom: 'chr4',
    start: 115928726,
    end: 115931880,
    svType: 'DEL',
  });
  viewer.plot();
</script>

import Samplot from 'samplot-js';

const viewer = new Samplot({
  container: document.getElementById('my-container'),
  samples: [
    { url: 'https://example.com/sample.bam', label: 'Sample 1' },
  ],
  chrom: 'chr4',
  start: 115928726,
  end: 115931880,
  svType: 'DEL',
});

await viewer.plot();

const viewer = new Samplot({
  container: '#container',
  samples: [
    {
      bamFile: bamFileObject,      // File from <input type="file">
      indexFile: baiFileObject,    // Corresponding .bai file
      label: 'My Sample',
    },
  ],
  chrom: 'chr4',
  start: 115928726,
  end: 115931880,
  svType: 'DEL',
});

await viewer.plot();

Each sample object accepts either remote URLs or local File objects:

// Remote BAM
{ url: 'https://...bam', indexUrl: 'https://...bam.bai', label: 'Name' }

// Local files
{ bamFile: File, indexFile: File, label: 'Name' }

Fetch reads and render the plot. Returns a Promise<void>.

Optional options can override chrom, start, end, svType.

Navigate to a new region (refetches data).

Returns the processed sample data for programmatic access.

Clean up the instance and remove the canvas.

The visualization matches Python samplot's output:

# Install dependencies
npm install

# Run tests
npm test

# Build UMD bundle
npm run build

# Development build (unminified)
npm run build:dev

src/
├── index.js          # Main Samplot class and public API
├── bam-reader.js     # BAM file reading via @gmod/bam
├── data-processor.js # Read classification and coverage computation
├── renderer.js       # Canvas-based rendering engine
├── constants.js      # Colors, defaults, flag constants
└── utils.js          # Coordinate mapping and formatting utilities

This JavaScript port focuses on short-read WGS visualization. The following features from Python samplot are supported:

• ✅ Multi-sample BAM visualization
• ✅ Paired-end read display with event type coloring
• ✅ Split-read display
• ✅ Coverage tracks (stacked high/low quality)
• ✅ Variant bar with size annotation
• ✅ Coordinate axes and legends

Features not yet ported:

• ❌ Long-read visualization (PacBio, ONT)
• ❌ Linked-read (10X) visualization
• ❌ Annotation tracks (BED, GFF)
• ❌ Transcript tracks
• ❌ CRAM file support
• ❌ VCF batch processing

MIT — see LICENSE