Export the view (SVG/PNG)

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 = [
  {
    trackId: 'volvox_gff3',
    name: 'Volvox genes',
    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}
        view={{ loc: 'ctgA:1..50,000', tracks: ['volvox_gff3'] }}
      />
    </div>
  )
}