Fitting the view in a fixed-height box

The height prop, or a host box of your own.

height keeps the header pinned and scrolls only the tracks. A host box with a height of its own bounds the view too, but scrolls the whole component, header included.

View source — 40 lines

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

export default function FixedHeight() {
  return (
    <LinearGenomeView
      height="400px"
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          trackId: 'volvox_gff3',
          name: 'Volvox genes',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
        },
        {
          trackId: 'volvox_microarray',
          name: 'Microarray (BigWig)',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox_microarray.bw',
          displayDefaults: { height: 150 },
        },
        {
          trackId: 'volvox-long-reads-sv-bam',
          name: 'volvox-long reads with SV',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-long-reads-sv.bam',
          displayDefaults: { height: 200 },
        },
      ]}
      view={{
        loc: 'ctgA:1..50,000',
        tracks: [
          'volvox_gff3',
          'volvox_microarray',
          'volvox-long-reads-sv-bam',
        ],
      }}
    />
  )
}