Fit the app to a container

By default the app fills the viewport (100vh). Set the --jbrowse-app-height CSS variable to make it fit a sized container instead — e.g. below your own header bar.

The app root defaults to height: 100vh, filling the browser window. To embed it inside your own layout — below a header bar, in a dashboard panel, in a split pane — set the --jbrowse-app-height CSS custom property on any ancestor:

.my-jbrowse-container {
  --jbrowse-app-height: 100%;
}

<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
  <header>My app chrome</header>
  <div className="my-jbrowse-container" style={{ flex: 1, minHeight: 0 }}>
    <JBrowse {/* ... */} />
  </div>
</div>

The variable feeds height: var(--jbrowse-app-height, 100vh) on the app root, so a value of 100% makes the app fill its container. For a percentage to resolve, that container must have a definite height — here the flex child with minHeight: 0 fills the space left below the header. A fixed value like --jbrowse-app-height: 600px works too and needs no sized ancestor.

Live demo

View source

import { JBrowse } from '@jbrowse/react-app2'

const assemblies = [
  {
    name: 'volvox',
    sequence: {
      adapter: {
        type: 'TwoBitAdapter',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      },
    },
    refNameAliases: {
      adapter: {
        type: 'FromConfigAdapter',
        adapterId: 'W6DyPGJ0UU',
        features: [
          { refName: 'ctgA', uniqueId: 'alias1', aliases: ['A'] },
          { refName: 'ctgB', uniqueId: 'alias2', aliases: ['B'] },
        ],
      },
    },
  },
]

const tracks = [
  {
    type: 'AlignmentsTrack',
    trackId: 'volvox_cram',
    name: 'volvox-sorted.cram',
    assemblyNames: ['volvox'],
    category: ['Alignments'],
    adapter: {
      type: 'CramAdapter',
      uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-sorted.cram',
    },
  },
]

// The app root defaults to height:100vh (full window). Setting the
// --jbrowse-app-height variable on an ancestor with a definite height makes the
// app fit that box instead — here the flex child below a header bar. It's set
// in a stylesheet rule because a CSS custom property can't go in a typed React
// inline-style object without a cast.
export default function FitToContainer() {
  return (
    <>
      <style>{`.jbrowseFitDemo { --jbrowse-app-height: 100%; }`}</style>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div
          style={{
            padding: '8px 12px',
            fontSize: 14,
            background: '#eef2ff',
            borderBottom: '1px solid #c7d2fe',
          }}
        >
          Your own app chrome lives here. The embedded JBrowse below fills the
          remaining space instead of forcing the full viewport height.
        </div>
        <div className="jbrowseFitDemo" style={{ flex: 1, minHeight: 0 }}>
          <JBrowse
            assemblies={assemblies}
            tracks={tracks}
            views={[
              {
                type: 'LinearGenomeView',
                init: {
                  assembly: 'volvox',
                  loc: 'ctgA:1..50000',
                  tracks: ['volvox_cram'],
                  tracklist: true,
                },
              },
            ]}
          />
        </div>
      </div>
    </>
  )
}