Show a track programmatically

Open a track imperatively via showTrack instead of through the init prop.

To open a track in response to something at runtime — a button, a search hit, a prop — call showTrack after construction rather than baking the trackId into init. That needs the unmanaged createViewState flow, since the managed <CircularGenomeView> reads its props once on mount:

const s = createViewState({ assembly, tracks })
s.session.view.showTrack('volvox_sv_test')

For tracks that should be open on first paint, list them in the managed component’s init instead. The view’s other actions are in the CircularView state model.

View source — 63 lines

import { useEffect } from 'react'

import {
  JBrowseCircularGenomeView,
  useCreateViewState,
} from '@jbrowse/react-circular-genome-view2'

const assembly = {
  name: 'volvox',
  aliases: ['vvx'],
  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', 'contigA'] },
        { refName: 'ctgB', uniqueId: 'alias2', aliases: ['B', 'contigB'] },
      ],
    },
  },
}

const tracks = [
  {
    type: 'VariantTrack',
    trackId: 'volvox_sv_test',
    name: 'volvox structural variant test',
    category: ['VCF'],
    assemblyNames: ['volvox'],
    adapter: {
      type: 'VcfTabixAdapter',
      uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.dup.vcf.gz',
    },
  },
]

export default function ShowTrack() {
  // `useCreateViewState`, not `useState(() => createViewState(…))`: React
  // double-invokes a state initializer under StrictMode and throws the second
  // result away, which for an engine is a whole orphaned worker pool per mount.
  // It also destroys this one when the component unmounts.
  const state = useCreateViewState({ assembly, tracks })

  // open a track imperatively instead of via the init prop
  // showTrack API: https://jbrowse.org/jb2/docs/models/circularview/#action-showtrack
  //
  // In an effect rather than beside the construction above, which is what the
  // hook costs — and nothing is lost: the assembly is still a network round
  // trip away, so this lands long before there is anything to draw. `showTrack`
  // returns the track it already added when it is already shown, so StrictMode
  // running this twice shows it once.
  useEffect(() => {
    state.session.view.showTrack('volvox_sv_test')
  }, [state])

  return <JBrowseCircularGenomeView viewState={state} />
}