JBrowse 2 · Build Your Own examples

A plot declared in JSON

Alu copies as bars: height is age, color is lineage.

Read the config as ggplot2: bar is geom_col(), encoding.y is aes(y), the color’s domain and range are scale_fill_manual(), and the formula step is mutate(). The mark display guide maps every name. milliDiv, RepeatMasker’s divergence from the subfamily consensus, increases with a copy’s age: AluJ oldest, AluY youngest (Batzer and Deininger 2002).

View source — 99 lines
import {
  EmbedProvider,
  Legend,
  Scalebar,
  Toolbar,
  TrackStack,
  TrackToggle,
} from '@jbrowse/display-ui/embed'
import { useCreateViewState } from '@jbrowse/react-linear-genome-view2'
import { observer } from 'mobx-react'

const lineage = {
  type: 'formula',
  expr: 'jexl:substring(feature.name, 0, 4)',
  as: 'lineage',
}

const color = {
  field: 'lineage',
  scale: 'categorical',
  domain: ['AluJ', 'AluS', 'AluY', 'FLAM', 'FRAM'],
  range: ['#4575b4', '#fdae61', '#d73027', '#8c8c8c', '#8c8c8c'],
}

const aluTrack = (
  trackId: string,
  name: string,
  transform: Record<string, unknown>[],
) => ({
  type: 'FeatureTrack',
  trackId,
  name,
  assemblyNames: ['hg38'],
  adapter: {
    type: 'BedTabixAdapter',
    uri: 'https://jbrowse.org/demos/gene_density/Alu.bed.gz',
  },
  displays: [
    {
      type: 'LinearMarkDisplay',
      displayId: `${trackId}-LinearMarkDisplay`,
      height: 140,
      showLegend: false,
      marks: [
        {
          mark: 'bar',
          transform,
          encoding: { y: 'milliDiv', color },
        },
      ],
    },
  ],
})

const PlotFromJson = observer(function PlotFromJson() {
  const state = useCreateViewState({
    assembly: {
      name: 'hg38',
      uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
      refNameAliases: {
        uri: 'https://jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
      },
    },
    tracks: [
      aluTrack('alu_age', 'Every Alu copy', [lineage]),
      aluTrack('alu_young', 'AluY only', [
        lineage,
        { type: 'filter', expr: "jexl:startsWith(feature.name, 'AluY')" },
      ]),
    ],
    view: {
      loc: 'chr1:151,000,000..151,030,000',
      tracks: ['alu_age'],
    },
  })
  if (!state) {
    return null
  }
  const { view } = state.session
  const shown = view.tracks[0]?.configuration.trackId
  return (
    <EmbedProvider session={state.session}>
      <Toolbar>
        <TrackToggle view={view} trackId="alu_age">
          Every Alu copy
        </TrackToggle>
        <TrackToggle view={view} trackId="alu_young">
          AluY only
        </TrackToggle>
        {shown ? <Legend view={view} trackId={shown} /> : null}
      </Toolbar>
      <TrackStack view={view}>
        <Scalebar view={view} />
      </TrackStack>
    </EmbedProvider>
  )
})

export default PlotFromJson