Gene lanes across genomes

Twelve E. coli genomes under one view, joined on gene symbol.

The twelve genomes go to assemblies, and the view opens on the first. The ortholog display and its adapter come from two comparative plugins, which plugins adds to the linear view’s own set.

A track written in full, with its adapter and displays, goes to useCreateViewState unchanged. The uri shorthand expands only a track with no adapter.

View source — 111 lines

import {
  EmbedProvider,
  Legend,
  LocationBox,
  NavButton,
  Scalebar,
  Toolbar,
  TrackStack,
} from '@jbrowse/display-ui/embed'
import ComparativeAdaptersPlugin from '@jbrowse/plugin-comparative-adapters'
import LinearComparativeViewPlugin from '@jbrowse/plugin-linear-comparative-view'
import { useCreateViewState } from '@jbrowse/react-linear-genome-view2'
import { observer } from 'mobx-react'

import type { LinearGenomeViewModel } from '@jbrowse/react-linear-genome-view2'

const base = 'https://jbrowse.org/demos/ecoli_orthologs'

const genomes = [
  'MG1655',
  'DH10B',
  'Sakai',
  'EDL933',
  'CFT073',
  'UTI89',
  'S88',
  'UMN026',
  'IAI39',
  'IAI1',
  '55989',
  'ED1a',
]

const loci = [
  { label: 'atp operon', loc: 'NC_000913.3:3,910,000-3,925,000' },
  { label: 'O-antigen cluster', loc: 'NC_000913.3:2,095,000-2,115,000' },
]

const Loci = observer(function Loci({ view }: { view: LinearGenomeViewModel }) {
  return (
    <Toolbar>
      <LocationBox view={view} />
      {loci.map(({ label, loc }) => (
        <NavButton key={label} view={view} loc={loc}>
          {label}
        </NavButton>
      ))}
    </Toolbar>
  )
})

const GeneLanes = observer(function GeneLanes() {
  const state = useCreateViewState({
    plugins: [LinearComparativeViewPlugin, ComparativeAdaptersPlugin],
    assemblies: genomes.map(name => ({
      name,
      uri: `${base}/${name}.chrom.sizes`,
    })),
    tracks: [
      ...genomes.map(name => ({
        trackId: `${name}_genes`,
        name: `${name} genes`,
        assemblyNames: [name],
        uri: `${base}/${name}.gff.gz`,
      })),
      {
        type: 'SyntenyTrack',
        trackId: 'orthologs',
        name: 'E. coli orthologs by gene symbol',
        assemblyNames: genomes,
        adapter: {
          type: 'MCScanBlocksAdapter',
          mcscanBlocksLocation: { uri: `${base}/ecoli.blocks.gz` },
          blockAssemblies: genomes,
          bedLocations: genomes.map(name => ({
            uri: `${base}/${name}.bed.gz`,
          })),
        },
        displays: [
          {
            type: 'MultiWaySyntenyDisplay',
            displayId: 'orthologs-MultiWaySyntenyDisplay',
            encoding: { color: 'cluster' },
            height: 330,
            legend: { show: false },
          },
        ],
      },
    ],
    view: {
      loc: loci[0]!.loc,
      tracks: ['orthologs'],
    },
  })
  if (!state) {
    return null
  }
  const { session } = state
  const { view } = session
  return (
    <EmbedProvider session={session}>
      <Loci view={view} />
      <Legend view={view} trackId="orthologs" style={{ paddingBottom: 6 }} />
      <TrackStack view={view}>
        <Scalebar view={view} />
      </TrackStack>
    </EmbedProvider>
  )
})

export default GeneLanes