Flip regions

import { useState } from 'react'

import { ErrorBanner } from '@jbrowse/core/ui'
import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} 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',
    },
  },
]

function FlipButton({ viewState }: { viewState: ViewModel }) {
  const [error, setError] = useState<unknown>()
  return (
    <div>
      <button
        onClick={() => {
          try {
            viewState.session.view.horizontallyFlip()
          } catch (e) {
            setError(e)
          }
        }}
      >
        Horizontally flip
      </button>
      {error ? <ErrorBanner error={error} /> : null}
    </div>
  )
}

export default function HorizontallyFlip() {
  const state = useCreateViewState({
    assembly,
    tracks,
    init: { loc: 'ctgA:1-50000' },
  })
  const flipped = useCreateViewState({
    assembly,
    tracks,
    init: { loc: 'ctgA:1-50000[rev]' },
  })
  return (
    <div>
      <h3>Flip imperatively from a button</h3>
      {state ? (
        <>
          <FlipButton viewState={state} />
          <JBrowseLinearGenomeView viewState={state} />
        </>
      ) : null}
      <h3>Open already flipped via a [rev] locstring</h3>
      {flipped ? <JBrowseLinearGenomeView viewState={flipped} /> : null}
    </div>
  )
}

import {
  JBrowseLinearGenomeView,
  useCreateViewState,
} from '@jbrowse/react-linear-genome-view2'

export default function WithMultipleDisplayedRegionsFlipped() {
  const state = useCreateViewState({
    assembly: {
      name: 'GRCh38',
      uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/fasta/GRCh38.fa.gz',
      aliases: ['hg38'],
      refNameAliases: {
        uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
      },
      geneticCodes: { MT: 2 },
    },
    tracks: [
      {
        type: 'FeatureTrack',
        trackId: 'ncbi-refseq-genes',
        name: 'NCBI RefSeq Genes',
        category: ['Genes'],
        assemblyNames: ['GRCh38'],
        adapter: {
          type: 'Gff3TabixAdapter',
          uri: 'https://s3.amazonaws.com/jbrowse.org/genomes/GRCh38/ncbi_refseq/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz',
        },
      },
    ],
    defaultSession: {
      name: 'Multi-region flipped example',
      view: {
        type: 'LinearGenomeView',
        loc: 'chr1:113073119..113073695 chr1:113091267..113091433[rev]',
        assembly: 'GRCh38',
        tracks: ['ncbi-refseq-genes'],
      },
    },
  })
  return state ? (
    <div>
      <button
        onClick={() => {
          state.session.view.horizontallyFlip()
        }}
      >
        Flip horizontally
      </button>
      <JBrowseLinearGenomeView viewState={state} />
    </div>
  ) : null
}