Observe the selected feature

import { assembleLocString, isFeature } from '@jbrowse/core/util'
import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} from '@jbrowse/react-linear-genome-view2'
import { observer } from 'mobx-react'

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

const SelectedFeature = observer(function SelectedFeature({
  viewState,
}: {
  viewState: ViewModel
}) {
  const { selection } = viewState.session
  return isFeature(selection) ? (
    <p>
      Selected <b>{selection.get('name') || selection.id()}</b> at{' '}
      {assembleLocString({
        refName: selection.get('refName'),
        start: selection.get('start'),
        end: selection.get('end'),
      })}
    </p>
  ) : (
    <p>Click a feature to select it.</p>
  )
})

export default function ObserveSelection() {
  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',
      },
    ],
    defaultSession: {
      name: 'Observe selection',
      view: {
        type: 'LinearGenomeView',
        assembly: 'volvox',
        loc: 'ctgA:1..50,000',
        tracks: ['volvox_gff3'],
      },
    },
  })
  return state ? (
    <div>
      <JBrowseLinearGenomeView viewState={state} />
      <SelectedFeature viewState={state} />
    </div>
  ) : null
}