/
App.tsx
64 lines (56 loc) · 1.76 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React, { useState, useEffect } from 'react'
import { createViewState, JBrowseApp } from '@jbrowse/react-app'
import makeWorkerInstance from '@jbrowse/react-app/esm/makeWorkerInstance'
import '@fontsource/roboto'
import config from './config'
type ViewModel = ReturnType<typeof createViewState>
function View() {
const [viewState, setViewState] = useState<ViewModel>()
const [stateSnapshot, setStateSnapshot] = useState('')
useEffect(() => {
const state = createViewState({
config,
makeWorkerInstance,
})
setViewState(state)
}, [])
if (!viewState) {
return null
}
return (
<>
<h1>JBrowse 2 React App Demo (with create-react-app v5)</h1>
<JBrowseApp viewState={viewState} />
<h3>Code</h3>
<p>
The code for this app is available at{' '}
<a
href="https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-app-cra5"
target="_blank"
rel="noreferrer"
>
https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-app-cra5
</a>
.
</p>
<h3>See the state</h3>
<div>
<p>
The button below will show you the current session, which includes
things like what region the view is showing and which tracks are open.
This session JSON object can be used in the{' '}
<code>defaultSession</code> of <code>createViewState</code>.
</p>
<button
onClick={() => {
setStateSnapshot(JSON.stringify(viewState.session, undefined, 2))
}}
>
Show session
</button>
</div>
<textarea value={stateSnapshot} readOnly rows={20} cols={80} />
</>
)
}
export default View