Interactive Demo

Try out the BGC Viewer components with live, interactive examples.

Live Demo

Show Domains Show Labels Zoom: 1.00x

BGC Track Viewer Demo

Interactive viewer would appear here

Code Example

Here's the code for the interactive demo above:

<template>
  <div class="demo-container">
    <div class="controls">
      <label>
        <input type="checkbox" v-model="showDomains"> Show Domains
      </label>
      <label>
        <input type="checkbox" v-model="showLabels"> Show Labels
      </label>
    </div>

    <TrackViewer
      :data="bgcData"
      :options="viewerOptions"
      @gene-click="handleGeneClick"
      @zoom-change="handleZoomChange"
    />

    <div v-if="selectedGene" class="gene-details">
      <h3>Selected Gene: {{ selectedGene.name }}</h3>
      <p>Position: {{ selectedGene.start }} - {{ selectedGene.end }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { TrackViewer } from 'bgc-viewer';

const showDomains = ref(true);
const showLabels = ref(true);
const selectedGene = ref(null);

const viewerOptions = computed(() => ({
  width: 900,
  height: 350,
  showDomains: showDomains.value,
  showLabels: showLabels.value
}));

const handleGeneClick = (gene) => {
  selectedGene.value = gene;
};

const handleZoomChange = (zoom) => {
  console.log('Zoom level:', zoom);
};
</script>

Try It Yourself

You can experiment with different options:

• Toggle domain visibility
• Toggle labels
• Click on genes to see details
• Zoom and pan the view
• Export the visualization

More Examples

Check out these additional examples:

• Basic Usage
• Track Viewer Component
• Web Components