JBrowse 2 · Linear Genome View examples

Colors, labels & sizing

Color, label, size and highlight a feature track.

Track color shorthand

View source — 26 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithTrackColorShorthand() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          type: 'FeatureTrack',
          trackId: 'volvox_genes_green',
          name: 'Volvox genes (green via shorthand)',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'Gff3TabixAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
          },
          displayDefaults: { color: 'green' },
        },
      ]}
      init={{ loc: 'ctgA:1..50,000', tracks: ['volvox_genes_green'] }}
    />
  )
}

Jexl feature colors and labels

The jexl guide lists the functions and variables an expression can use.

View source — 31 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithJexlFeatureColorsAndLabels() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          type: 'FeatureTrack',
          trackId: 'volvox_genes_jexl',
          name: 'Volvox genes (jexl color + label)',
          assemblyNames: ['volvox'],
          adapter: {
            type: 'Gff3TabixAdapter',
            uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
          },
          displayDefaults: {
            color: "jexl:get(feature,'strand')==1?'#1f77b4':'#d62728'",
            labels: {
              name: "jexl:get(feature,'name')+' ['+get(feature,'type')+']'",
            },
          },
        },
      ]}
      init={{ loc: 'ctgA:1..50,000', tracks: ['volvox_genes_jexl'] }}
    />
  )
}

Track sizing: grow & fit

View source — 53 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

const assembly = {
  name: 'hg19',
  aliases: ['GRCh37'],
  uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz',
  refNameAliases: {
    uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/hg19/hg19_aliases.txt',
  },
}

const adapter = {
  type: 'Gff3TabixAdapter',
  uri: 'https://jbrowse.org/ucsc/hg19/ncbiRefSeq.gff.gz',
  csi: true,
}

const tracks = [
  {
    type: 'FeatureTrack',
    trackId: 'refseq_grow',
    name: 'NCBI RefSeq — grow (expand to fit all features)',
    assemblyNames: ['hg19'],
    adapter,
    displayDefaults: {
      heightMode: 'grow',
    },
  },
  {
    type: 'FeatureTrack',
    trackId: 'refseq_fit',
    name: 'NCBI RefSeq — fit (squeeze all features into view)',
    assemblyNames: ['hg19'],
    adapter,
    displayDefaults: {
      heightMode: 'fit',
      height: 150,
    },
  },
]

export default function WithTrackSizing() {
  return (
    <LinearGenomeView
      assembly={assembly}
      tracks={tracks}
      init={{
        loc: 'chr17:7,560,000..7,600,000',
        tracks: ['refseq_grow', 'refseq_fit'],
      }}
    />
  )
}

Highlight a feature, and sort it to the top

Prefer name. A span is interbase (0-based, half-open), so coordinates copied from the location box match nothing. featureHighlights is display state, not a config slot, so it goes in displaySnapshot; in displayDefaults it is dropped without a word.

View source — 40 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithFeatureHighlights() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'hg38',
        uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
        refNameAliases: {
          uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
        },
        geneticCodes: { chrM: 2 },
      }}
      tracks={[
        {
          type: 'FeatureTrack',
          trackId: 'ncbi-refseq-genes',
          name: 'NCBI RefSeq Genes',
          assemblyNames: ['hg38'],
          adapter: {
            type: 'Gff3TabixAdapter',
            uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz',
          },
        },
      ]}
      init={{
        loc: 'chr12:25,150,000-25,400,000',
        tracks: [
          {
            trackId: 'ncbi-refseq-genes',
            displaySnapshot: {
              height: 220,
              featureHighlights: [{ refName: 'chr12', name: 'KRAS' }],
            },
          },
        ],
      }}
    />
  )
}