Loading configuration

import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
import { JBrowseApp, useCreateViewState } from '@jbrowse/react-app2'

import config from '../volvox-config.json' with { type: 'json' }

// The config's URIs are relative to where it was downloaded from. addRelativeUris
// tags each with a baseUri so JBrowse resolves them against that directory.
const configUrl =
  'https://jbrowse.org/code/jb2/main/test_data/volvox/config.json'
addRelativeUris(config, new URL(configUrl))

export default function WithImportConfigJson() {
  // `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.
  const state = useCreateViewState({ config })
  return <JBrowseApp viewState={state} />
}

import { useEffect, useState } from 'react'

import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'
import {
  JBrowseApp,
  createViewState,
  destroyViewState,
  loadPlugins,
} from '@jbrowse/react-app2'

type ViewState = ReturnType<typeof createViewState>

// The config's URIs are relative to where it lives. addRelativeUris tags each
// with a baseUri so JBrowse resolves them against that directory at load time.
//
// A config.json may also name plugins. Unlike JBrowse Web, the embedded app
// doesn't fetch those for you — createViewState is synchronous and fetching is
// not — so hand config.plugins to loadPlugins and pass the result back in. Its
// baseUri does for plugin urls what addRelativeUris does for data urls: a
// config elsewhere names them relative to itself, not to your app.
const configUrl =
  'https://jbrowse.org/code/jb2/main/test_data/volvox/config.json'

export default function WithFetchConfigJson() {
  const [state, setState] = useState<ViewState>()
  useEffect(() => {
    // The engine is not owned by React, so unmounting alone leaves its RPC
    // worker threads and its autoruns running — see the external-plugin example
    // for why an engine built in an effect has to be destroyed by that effect.
    const mount = {
      unmounted: false,
      engine: undefined as ViewState | undefined,
    }
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    ;(async () => {
      const response = await fetch(configUrl)
      if (!response.ok) {
        throw new Error(`HTTP ${response.status} fetching config ${configUrl}`)
      }
      const config = await response.json()
      addRelativeUris(config, new URL(configUrl))
      const plugins = await loadPlugins(config.plugins ?? [], {
        baseUri: configUrl,
      })
      if (mount.unmounted) {
        return
      }
      mount.engine = createViewState({ config, plugins })
      setState(mount.engine)
    })()
    return () => {
      mount.unmounted = true
      if (mount.engine) {
        destroyViewState(mount.engine)
      }
    }
  }, [])

  return state ? <JBrowseApp viewState={state} /> : null
}

import { useRef, useState } from 'react'

import { JBrowse } from '@jbrowse/react-app2'

import type { ViewModel } from '@jbrowse/react-app2'

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

const assemblies = [{ name: 'volvox', uri: `${base}/volvox.2bit` }]

// a track config you want to add at runtime instead of up front — it could be
// any track config object, e.g. one a user built or fetched
const genesTrackConf = {
  type: 'FeatureTrack',
  trackId: 'volvox_genes',
  name: 'Volvox genes',
  assemblyNames: ['volvox'],
  adapter: { type: 'Gff3TabixAdapter', uri: `${base}/volvox.sort.gff3.gz` },
}

export default function AddTracksProgrammatically() {
  // ref to the live engine, for imperative control after launch
  const ref = useRef<ViewModel>(null)
  const [added, setAdded] = useState(false)

  function addTrack() {
    const state = ref.current
    if (state) {
      state.jbrowse.addTrackConf(genesTrackConf)
      state.session.views[0]?.showTrack('volvox_genes')
      setAdded(true)
    }
  }

  return (
    <div>
      <button
        disabled={added}
        onClick={() => {
          addTrack()
        }}
      >
        {added ? 'Genes track added' : 'Add genes track'}
      </button>
      <JBrowse
        ref={ref}
        assemblies={assemblies}
        tracks={[]}
        sessionName="Programmatic tracks"
        views={[
          {
            type: 'LinearGenomeView',
            init: { assembly: 'volvox', loc: 'ctgA:1..50000' },
          },
        ]}
      />
    </div>
  )
}

import { useEffect, useState } from 'react'

import { ErrorMessage } from '@jbrowse/core/ui'
import { getEnv } from '@jbrowse/core/util'
import {
  JBrowseApp,
  createViewState,
  destroyViewState,
} from '@jbrowse/react-app2'

type ViewState = ReturnType<typeof createViewState>

export default function WithLaunchLinearGenomeView() {
  const [viewState, setViewState] = useState<ViewState>()
  const [error, setError] = useState<unknown>()

  useEffect(() => {
    // The engine is not owned by React, so unmounting alone leaves its RPC
    // worker threads and its autoruns running — see the external-plugin example
    // for why an engine built in an effect has to be destroyed by that effect.
    // One box rather than a `let`, because the cleanup below assigns from a
    // separate call and the compiler's narrowing doesn't see through that.
    const mount = { engine: undefined as ViewState | undefined }
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    ;(async () => {
      try {
        const state = createViewState({
          config: {
            assemblies: [
              {
                name: 'GRCh38',
                aliases: ['hg38'],
                uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
                refNameAliases: {
                  uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
                },
              },
            ],
            tracks: [
              {
                type: 'QuantitativeTrack',
                trackId: 'hg38.100way.phyloP100way',
                name: 'hg38.100way.phyloP100way',
                category: ['Conservation'],
                assemblyNames: ['hg38'],
                adapter: {
                  type: 'BigWigAdapter',
                  uri: 'https://hgdownload.soe.ucsc.edu/goldenpath/hg38/phyloP100way/hg38.phyloP100way.bw',
                },
              },
            ],
          },
        })
        const { pluginManager } = getEnv(state)

        mount.engine = state
        setViewState(state)
        // Strict so a bad assembly/loc reaches the catch below and renders the
        // error, instead of being swallowed into a silently blank view
        await pluginManager.evaluateAsyncExtensionPointStrict(
          'LaunchView-LinearGenomeView',
          {
            tracks: ['hg38.100way.phyloP100way'],
            loc: 'chr10:1-100000',
            assembly: 'hg38',
            session: state.session,
          },
        )
      } catch (e) {
        console.error(e)
        setError(e)
      }
    })()
    return () => {
      if (mount.engine) {
        destroyViewState(mount.engine)
      }
    }
  }, [])

  return viewState ? (
    <>
      {error ? <ErrorMessage error={error} /> : null}
      <JBrowseApp viewState={viewState} />
    </>
  ) : null
}