Every chromosome in one view

One view shows the 24 human chromosomes side by side.

view.showAllRegionsInAssembly() shows all 455 sequences in hg38. The _alt, _random and chrUn_ scaffolds are each too narrow to draw, so the view elides them into grey blocks. A FASTA file has no field that marks chromosomes, so the demo lists the 24 by name.

View source — 52 lines

import {
  EmbedProvider,
  RegionSeams,
  Scalebar,
  TrackStack,
} from '@jbrowse/display-ui/embed'
import { useCreateViewState } from '@jbrowse/react-linear-genome-view2'
import { observer } from 'mobx-react'

const chromosomes = [
  ...Array.from({ length: 22 }, (_, i) => `chr${i + 1}`),
  'chrX',
  'chrY',
]

const EveryChromosome = observer(function EveryChromosome() {
  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: [
      {
        trackId: 'hg38_phylop',
        name: 'phyloP 100-way conservation',
        uri: 'https://hgdownload.soe.ucsc.edu/goldenpath/hg38/phyloP100way/hg38.phyloP100way.bw',
        displayDefaults: { height: 120, color: '#3a7ca5' },
      },
    ],
    view: {
      loc: chromosomes.join(' '),
      tracks: ['hg38_phylop'],
    },
  })
  if (!state) {
    return null
  }
  const { session } = state
  return (
    <EmbedProvider session={session}>
      <TrackStack view={session.view}>
        <Scalebar view={session.view} />
        <RegionSeams view={session.view} />
      </TrackStack>
    </EmbedProvider>
  )
})

export default EveryChromosome