JBrowse 2 · React App examples

Spreadsheet view

Load a VCF into a sortable, filterable spreadsheet.

SpreadsheetView opens a tabular file (e.g. a VCF) as a sortable, filterable spreadsheet. init takes the assembly and a uri to the file. Note that uri is on init, not in a track config:

{
  type: 'SpreadsheetView',
  init: {
    assembly: 'volvox',
    uri: 'test_data/volvox/volvox.filtered.vcf.gz',
  },
}

Like every view type, this is declared as a defaultSession.views entry. See Linear synteny view for the general pattern. To pair a spreadsheet with a circular view that highlights breakends, see the SV inspector. The view’s properties and actions are listed in the SpreadsheetView state model.

View source
import { JBrowse } from '@jbrowse/react-app2'

import { volvoxConfig } from '../volvoxConfig.ts'

export default function SpreadsheetExample() {
  return (
    <JBrowse
      assemblies={volvoxConfig.assemblies}
      tracks={volvoxConfig.tracks}
      views={[
        {
          type: 'SpreadsheetView',
          init: {
            assembly: 'volvox',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.filtered.vcf.gz',
          },
        },
      ]}
    />
  )
}