@visa-ge/ng-igv

v0.1.0

Published

6 months ago

ng-igv genome browser as a web component - framework agnostic

0High
0Medium
0Low

nictru

genomics igv genome-browser web-component custom-element bioinformatics visualization

@visage/ng-igv Web Component

A lightweight, framework-agnostic IGV genome browser web component built with Angular Elements.

Installation

npm install @visage/ng-igv

Usage

HTML

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

React

import { useEffect } from 'react';

function GenomeBrowser() {
  useEffect(() => {
    // Ensure IGV.js is loaded before using the component
    if (!window.igv) {
      const script = document.createElement('script');
      script.src = 'https://igv.org/web/release/2.15.11/dist/igv.min.js';
      document.head.appendChild(script);
    }
  }, []);

  return (
    <div>
      <h2>Genome Browser</h2>
      <ng-igv 
        genome="hg38"
        style={{width: '100%', height: '400px'}}
      />
    </div>
  );
}

Vue

<template>
  <div>
    <h2>Genome Browser</h2>
    <ng-igv 
      genome="hg38"
      :style="{width: '100%', height: '400px'}"
    />
  </div>
</template>

<script>
export default {
  name: 'GenomeBrowser',
  mounted() {
    // Ensure IGV.js is loaded
    if (!window.igv) {
      const script = document.createElement('script');
      script.src = 'https://igv.org/web/release/2.15.11/dist/igv.min.js';
      document.head.appendChild(script);
    }
  }
}
</script>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | genome | string | "hg38" | Genome assembly (hg38, hg19, mm10, etc.) | | location | Location | {chr: 'all'} | Genomic location to display | | tracks | Track[] | [] | Array of tracks to display | | reference | Reference | undefined | Custom reference genome configuration |

Events

| Event | Description | Event Detail | |-------|-------------|--------------| | locationChange | Fired when user navigates | {chr: string, range?: {start: number, end: number}} | | trackRemoved | Fired when tracks are removed | string (track name) |

TypeScript Support

interface Location {
  chr: string;
  range?: {
    start: number;
    end: number;
  };
}

interface Track {
  name: string;
  url: string;
  type?: string;
  format?: string;
  // ... other IGV track properties
}

Requirements

IGV.js: Must be loaded before the web component
Modern Browser: Support for Custom Elements

Bundle Size

Uncompressed: ~262KB
Gzipped: ~73KB

Build

Run npm run build-ng-igv to build the web component.

Publishing

After building, run npm run publish-ng-igv to publish to NPM.

License

MIT