Observe the session

An observer reading the open views.

Anything marked #getter or #property on the session model or a view model is reactive. There is no change callback: to save the session, take getSnapshot(viewState.session) and pass it back as the session option.

View source — 60 lines

import { JBrowseApp, useCreateViewState } from '@jbrowse/react-app2'
import { observer } from 'mobx-react'

const base = 'https://jbrowse.org/code/jb2/main/test_data/volvox'

const config = {
  assemblies: [
    { name: 'volvox', uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit' },
  ],
  tracks: [
    {
      trackId: 'volvox_cram',
      name: 'volvox-sorted.cram',
      uri: `${base}/volvox-sorted.cram`,
    },
  ],
  defaultSession: {
    name: 'observe',
    views: [
      {
        id: 'view-0',
        type: 'LinearGenomeView',
        assembly: 'volvox',
        loc: 'ctgA:1..50000',
        tracks: ['volvox_cram'],
      },
    ],
  },
}

const SessionSummary = observer(function SessionSummary({
  viewState,
}: {
  viewState: NonNullable<ReturnType<typeof useCreateViewState>>
}) {
  const { views } = viewState.session
  return (
    <div style={{ padding: 8, fontFamily: 'monospace', fontSize: 12 }}>
      <div>{views.length} view(s) open</div>
      <ul style={{ margin: 0 }}>
        {views.map(view => (
          <li key={view.id}>
            {view.type} — {view.coarseVisibleLocStrings || 'no region'}
          </li>
        ))}
      </ul>
    </div>
  )
})

export default function ObserveSession() {
  const viewState = useCreateViewState({ config })

  return viewState ? (
    <div>
      <SessionSummary viewState={viewState} />
      <JBrowseApp viewState={viewState} />
    </div>
  ) : null
}