Widgets in a side drawer

Put the track selector and feature details in a drawer.

Open the track selector with view.tracklist rather than calling activateTrackSelector on the built engine: the launch waits for the view to resize around the drawer before navigating. Without height, an open drawer bounds the view to the window’s height.

View source — 28 lines

import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} from '@jbrowse/react-linear-genome-view2'

export default function DrawerWidget() {
  const state = useCreateViewState({
    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',
      },
    ],
    height: '100vh',
    menuBar: true,
    view: {
      loc: 'ctgA:1105..1221',
      tracks: ['volvox_gff3'],
      tracklist: true,
    },
  })
  return state ? <JBrowseLinearGenomeView viewState={state} /> : null
}