Export & errors

import { useRef, useState } from 'react'

import { ErrorBanner } from '@jbrowse/core/ui'
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

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

const assembly = {
  name: 'volvox',
  uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
}

const tracks = [
  {
    type: 'FeatureTrack',
    trackId: 'volvox_gff3',
    name: 'Volvox genes',
    assemblyNames: ['volvox'],
    adapter: {
      type: 'Gff3TabixAdapter',
      uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
    },
  },
]

export default function ExportSvg() {
  const ref = useRef<ViewModel>(null)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState<unknown>()

  async function download(format: 'svg' | 'png') {
    setBusy(true)
    setError(undefined)
    try {
      await ref.current?.session.view.exportSvg({
        filename: `volvox.${format}`,
        format,
      })
    } catch (e) {
      setError(e)
    } finally {
      setBusy(false)
    }
  }

  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        <button
          disabled={busy}
          style={{ marginRight: 8 }}
          onClick={() => {
            void download('svg')
          }}
        >
          Export SVG
        </button>
        <button
          disabled={busy}
          onClick={() => {
            void download('png')
          }}
        >
          Export PNG
        </button>
        {busy ? ' Rendering…' : null}
      </div>
      {error ? <ErrorBanner error={error} /> : null}
      <LinearGenomeView
        ref={ref}
        assembly={assembly}
        tracks={tracks}
        init={{ loc: 'ctgA:1..50,000', tracks: ['volvox_gff3'] }}
      />
    </div>
  )
}

import { useState } from 'react'

import { ErrorBanner } from '@jbrowse/core/ui'
import {
  JBrowseLinearGenomeView,
  createViewState,
} from '@jbrowse/react-linear-genome-view2'

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

export default function WithErrorHandler() {
  const [result] = useState<{ viewState: ViewModel } | { error: unknown }>(
    () => {
      try {
        return {
          viewState: createViewState({
            assembly: {
              name: 'volvox',
              uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
            },
            tracks: [
              {
                type: 'BadTrack',
                notProperTrack: 'error',
                shouldHaveTrackIdAndStuff: 'test',
              },
            ],
            location: 'ctgA:1105..1221',
          }),
        }
      } catch (error) {
        return { error }
      }
    },
  )
  return 'error' in result ? (
    <ErrorBanner error={result.error} />
  ) : (
    <JBrowseLinearGenomeView viewState={result.viewState} />
  )
}