Nextstrain pathogens

import { useState } from 'react'

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

import covid from './nextstrain_covid.json'
import ebola from './nextstrain_ebola.json'
import measles from './nextstrain_measles.json'
import rsvA from './nextstrain_rsv_a.json'
import zika from './nextstrain_zika.json'

const pathogens = [
  { slug: 'covid', label: 'SARS-CoV-2', config: covid },
  { slug: 'zika', label: 'Zika', config: zika },
  { slug: 'ebola', label: 'Ebola', config: ebola },
  { slug: 'measles', label: 'Measles', config: measles },
  { slug: 'rsv-a', label: 'RSV-A', config: rsvA },
]

function PathogenView({
  config,
}: {
  config: (typeof pathogens)[number]['config']
}) {
  const { assembly, tracks, defaultSession, location } = config
  const state = useCreateViewState({
    assembly,
    tracks,
    defaultSession,
    location,
  })
  return state ? <JBrowseLinearGenomeView viewState={state} /> : null
}

export default function NextstrainPathogens() {
  const [slug, setSlug] = useState('covid')
  const pathogen = pathogens.find(p => p.slug === slug)!
  return (
    <div>
      <label>
        Pathogen{' '}
        <select
          value={slug}
          onChange={event => {
            setSlug(event.target.value)
          }}
        >
          {pathogens.map(p => (
            <option key={p.slug} value={p.slug}>
              {p.label}
            </option>
          ))}
        </select>
      </label>
      <PathogenView key={slug} config={pathogen.config} />
    </div>
  )
}