@visa-ge/ng-igv

IGV.js genome browser as an Angular library (Igv / <igv>) and a framework-agnostic web component (<ng-igv>).

Note: npm 0.1.0 shipped the web component only. 0.2.0 unifies the Angular library and the custom element under one version.

Requirements

• IGV.js (igv peer / CDN) — must be available as a global igv (loaded before the browser creates)
• Angular 21+ for the library import path
• lodash (peer)

Angular usage

npm install @visa-ge/ng-igv

Ensure IGV.js is loaded (e.g. via angular.json scripts or a CDN script tag), then:

import { Igv, Location, Track } from '@visa-ge/ng-igv';

@Component({
  imports: [Igv],
  template: `
    <igv
      [genome]="genome"
      [location]="location"
      [tracks]="tracks"
      [reference]="reference"
      (locationChange)="onLocation($event)"
      (trackRemoved)="onTrackRemoved($event)"
    />
  `,
})
export class GenomeView {
  genome = 'hg38';
  location: Location = { chr: 'all' };
  tracks: Track[] = [];
  reference = undefined;

  onLocation(loc: Location) {}
  onTrackRemoved(name: string) {}
}

You can also import NgIgvComponent (same class as Igv).

Inputs / outputs

| Name | Kind | Description | |------|------|-------------| | genome | input | Assembly id (default "hg38") | | reference | input | Custom Reference object (assembly? supported) | | location | input | { chr, range? } | | tracks | input | Track[] | | refresh | input | Trigger a visibility refresh | | locationChange | output | User navigation | | trackRemoved | output | Track name (skips "Refseq Genes") |

Web component usage (<ng-igv>)

Load IGV.js first, then this package’s main.js:

<!DOCTYPE html>
<html>
<head>
  <script src="https://igv.org/web/release/2.15.11/dist/igv.min.js"></script>
  <script src="node_modules/@visa-ge/ng-igv/main.js"></script>
</head>
<body>
  <ng-igv genome="hg38" style="width: 100%; height: 400px;"></ng-igv>
</body>
</html>

Properties mirror the Angular inputs (genome, location, tracks, reference, refresh). Events: locationChange, trackRemoved.

Import path alias (optional):

import '@visa-ge/ng-igv/element'; // → main.js

React / Vue

Use the custom element tag after loading IGV.js and main.js the same way as in plain HTML.

Build (maintainers)

npm run build          # lib (FESM) + elements → dist/visa-ge-ng-igv with main.js
npm run build:lib
npm run build:elements

Do not bundle IGV.js into main.js — consumers load it separately.

License

MIT