From 1903f4b4a70944557e59ac89af3b39c3a736bb72 Mon Sep 17 00:00:00 2001 From: Colin Date: Fri, 16 Dec 2022 15:51:21 -0700 Subject: [PATCH] [skip ci] Add defaultSession file --- .../base/circular/defaultSession.ts | 22 +++ embedded_demos/base/linear/defaultSession.ts | 130 ++++++++++++++++++ embedded_demos/copy_files.sh | 9 ++ .../src/App.tsx | 31 +---- .../src/defaultSession.ts | 22 +++ .../defaultSession.js | 22 +++ .../genomeView.js | 24 +--- .../index.html | 9 ++ .../src/App.tsx | 31 +---- .../src/defaultSession.ts | 22 +++ .../src/App.tsx | 64 +-------- .../src/defaultSession.ts | 130 ++++++++++++++++++ .../src/tracks.ts | 1 + .../pages/index.tsx | 64 +-------- .../utils/defaultSession.ts | 130 ++++++++++++++++++ .../utils/tracks.ts | 1 + .../defaultSession.js | 130 ++++++++++++++++++ .../genomeView.js | 59 +------- .../index.html | 7 + .../tracks.js | 1 + .../src/App.tsx | 17 +-- .../src/defaultSession.ts | 130 ++++++++++++++++++ .../src/App.tsx | 64 +-------- .../src/defaultSession.ts | 130 ++++++++++++++++++ .../src/tracks.ts | 1 + website/docs/embedded_components.md | 24 ++-- 26 files changed, 937 insertions(+), 338 deletions(-) create mode 100644 embedded_demos/base/circular/defaultSession.ts create mode 100644 embedded_demos/base/linear/defaultSession.ts create mode 100644 embedded_demos/jbrowse-react-circular-genome-view-cra5/src/defaultSession.ts create mode 100644 embedded_demos/jbrowse-react-circular-genome-view-vanillajs/defaultSession.js create mode 100644 embedded_demos/jbrowse-react-circular-genome-view/src/defaultSession.ts create mode 100644 embedded_demos/jbrowse-react-linear-genome-view-cra5/src/defaultSession.ts create mode 100644 embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/defaultSession.ts create mode 100644 embedded_demos/jbrowse-react-linear-genome-view-vanillajs/defaultSession.js create mode 100644 embedded_demos/jbrowse-react-linear-genome-view-vite/src/defaultSession.ts create mode 100644 embedded_demos/jbrowse-react-linear-genome-view/src/defaultSession.ts diff --git a/embedded_demos/base/circular/defaultSession.ts b/embedded_demos/base/circular/defaultSession.ts new file mode 100644 index 0000000000..582c6b2e64 --- /dev/null +++ b/embedded_demos/base/circular/defaultSession.ts @@ -0,0 +1,22 @@ +export default { + name: 'My session', + view: { + id: 'circularView', + type: 'CircularView', + bpPerPx: 5000000, + tracks: [ + { + id: 'uPdLKHik1', + type: 'VariantTrack', + configuration: 'pacbio_sv_vcf', + displays: [ + { + id: 'v9QVAR3oaB', + type: 'ChordVariantDisplay', + configuration: 'pacbio_sv_vcf-ChordVariantDisplay', + }, + ], + }, + ], + }, +} diff --git a/embedded_demos/base/linear/defaultSession.ts b/embedded_demos/base/linear/defaultSession.ts new file mode 100644 index 0000000000..d9e0281ccc --- /dev/null +++ b/embedded_demos/base/linear/defaultSession.ts @@ -0,0 +1,130 @@ +export default { + name: 'this session', + margin: 0, + view: { + id: 'linearGenomeView', + minimized: false, + type: 'LinearGenomeView', + offsetPx: 191980240, + bpPerPx: 0.1554251851851852, + displayedRegions: [ + { + refName: '10', + start: 0, + end: 133797422, + reversed: false, + assemblyName: 'GRCh38', + }, + ], + tracks: [ + { + id: '4aZAiE-A3', + type: 'ReferenceSequenceTrack', + configuration: 'GRCh38-ReferenceSequenceTrack', + minimized: false, + displays: [ + { + id: 'AD3gqvG0_6', + type: 'LinearReferenceSequenceDisplay', + height: 180, + configuration: + 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', + showForward: true, + showReverse: true, + showTranslation: true, + }, + ], + }, + { + id: 'T6uhrtY40O', + type: 'AlignmentsTrack', + configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', + minimized: false, + displays: [ + { + id: 'FinKswChSr', + type: 'LinearAlignmentsDisplay', + PileupDisplay: { + id: 'YAAaF494z', + type: 'LinearPileupDisplay', + height: 134, + configuration: { + type: 'LinearPileupDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_LinearPileupDisplay_xyz', + }, + showSoftClipping: false, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + SNPCoverageDisplay: { + id: 'VTQ_VGbAVJ', + type: 'LinearSNPCoverageDisplay', + height: 45, + configuration: { + type: 'LinearSNPCoverageDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', + }, + selectedRendering: '', + resolution: 1, + constraints: {}, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + snpCovHeight: 45, + configuration: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', + height: 179, + lowerPanelType: 'LinearPileupDisplay', + }, + ], + }, + { + id: 'EUnTnpVI6', + type: 'QuantitativeTrack', + configuration: 'hg38.100way.phyloP100way', + minimized: false, + displays: [ + { + id: 'mrlawr9Wtg', + type: 'LinearWiggleDisplay', + height: 100, + configuration: 'hg38.100way.phyloP100way-LinearWiggleDisplay', + selectedRendering: '', + resolution: 1, + constraints: {}, + }, + ], + }, + { + id: 'Cbnwl72EX', + type: 'VariantTrack', + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf', + minimized: false, + displays: [ + { + id: 'dvXz01Wf6w', + type: 'LinearVariantDisplay', + height: 100, + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay', + }, + ], + }, + ], + hideHeader: false, + hideHeaderOverview: false, + hideNoTracksActive: false, + trackSelectorType: 'hierarchical', + trackLabels: 'overlapping', + showCenterLine: false, + showCytobandsSetting: true, + showGridlines: true, + }, +} diff --git a/embedded_demos/copy_files.sh b/embedded_demos/copy_files.sh index 630926aa10..1544ed1fbe 100755 --- a/embedded_demos/copy_files.sh +++ b/embedded_demos/copy_files.sh @@ -10,6 +10,12 @@ cp base/linear/tracks.ts jbrowse-react-linear-genome-view-cra5/src/ cp base/linear/tracks.ts jbrowse-react-linear-genome-view-vite/src/ cp base/linear/tracks.ts jbrowse-react-linear-genome-view-nextjs/utils/ cp base/linear/tracks.ts jbrowse-react-linear-genome-view-vanillajs/tracks.js +cp base/linear/defaultSession.ts jbrowse-react-linear-genome-view/src/ +cp base/linear/defaultSession.ts jbrowse-react-linear-genome-view-cra5/src/ +cp base/linear/defaultSession.ts jbrowse-react-linear-genome-view-vite/src/ +cp base/linear/defaultSession.ts jbrowse-react-linear-genome-view-nextjs/utils/ +cp base/linear/defaultSession.ts jbrowse-react-linear-genome-view-vanillajs/defaultSession.js + ## circular @@ -19,3 +25,6 @@ cp base/circular/assembly.ts jbrowse-react-circular-genome-view-vanillajs/assemb cp base/circular/tracks.ts jbrowse-react-circular-genome-view/src/ cp base/circular/tracks.ts jbrowse-react-circular-genome-view-cra5/src/ cp base/circular/tracks.ts jbrowse-react-circular-genome-view-vanillajs/tracks.js +cp base/circular/defaultSession.ts jbrowse-react-circular-genome-view/src/ +cp base/circular/defaultSession.ts jbrowse-react-circular-genome-view-cra5/src/ +cp base/circular/defaultSession.ts jbrowse-react-circular-genome-view-vanillajs/defaultSession.js diff --git a/embedded_demos/jbrowse-react-circular-genome-view-cra5/src/App.tsx b/embedded_demos/jbrowse-react-circular-genome-view-cra5/src/App.tsx index 6f8239812f..44bebed5cb 100644 --- a/embedded_demos/jbrowse-react-circular-genome-view-cra5/src/App.tsx +++ b/embedded_demos/jbrowse-react-circular-genome-view-cra5/src/App.tsx @@ -7,33 +7,12 @@ import { import assembly from './assembly' import tracks from './tracks' +import defaultSession from './defaultSession' -const defaultSession = { - name: 'My session', - view: { - id: 'circularView', - type: 'CircularView', - bpPerPx: 5000000, - tracks: [ - { - id: 'uPdLKHik1', - type: 'VariantTrack', - configuration: 'pacbio_sv_vcf', - displays: [ - { - id: 'v9QVAR3oaB', - type: 'ChordVariantDisplay', - configuration: 'pacbio_sv_vcf-ChordVariantDisplay', - }, - ], - }, - ], - }, -} +type ViewModel = ReturnType function View() { - const [viewState, setViewState] = - useState>() + const [viewState, setViewState] = useState() const [patches, setPatches] = useState('') const [stateSnapshot, setStateSnapshot] = useState('') @@ -63,11 +42,11 @@ function View() {

The code for this app is available at{' '} - https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view-cra5 + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-circular-genome-view-cra5 .

diff --git a/embedded_demos/jbrowse-react-circular-genome-view-cra5/src/defaultSession.ts b/embedded_demos/jbrowse-react-circular-genome-view-cra5/src/defaultSession.ts new file mode 100644 index 0000000000..582c6b2e64 --- /dev/null +++ b/embedded_demos/jbrowse-react-circular-genome-view-cra5/src/defaultSession.ts @@ -0,0 +1,22 @@ +export default { + name: 'My session', + view: { + id: 'circularView', + type: 'CircularView', + bpPerPx: 5000000, + tracks: [ + { + id: 'uPdLKHik1', + type: 'VariantTrack', + configuration: 'pacbio_sv_vcf', + displays: [ + { + id: 'v9QVAR3oaB', + type: 'ChordVariantDisplay', + configuration: 'pacbio_sv_vcf-ChordVariantDisplay', + }, + ], + }, + ], + }, +} diff --git a/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/defaultSession.js b/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/defaultSession.js new file mode 100644 index 0000000000..582c6b2e64 --- /dev/null +++ b/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/defaultSession.js @@ -0,0 +1,22 @@ +export default { + name: 'My session', + view: { + id: 'circularView', + type: 'CircularView', + bpPerPx: 5000000, + tracks: [ + { + id: 'uPdLKHik1', + type: 'VariantTrack', + configuration: 'pacbio_sv_vcf', + displays: [ + { + id: 'v9QVAR3oaB', + type: 'ChordVariantDisplay', + configuration: 'pacbio_sv_vcf-ChordVariantDisplay', + }, + ], + }, + ], + }, +} diff --git a/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/genomeView.js b/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/genomeView.js index 7e6de068b4..53647685c7 100644 --- a/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/genomeView.js +++ b/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/genomeView.js @@ -1,35 +1,13 @@ /* global JBrowseReactCircularGenomeView React, ReactDOM */ import assembly from './assembly.js' import tracks from './tracks.js' +import defaultSession from './defaultSession.js' const { createViewState, JBrowseCircularGenomeView } = JBrowseReactCircularGenomeView const { createElement } = React const { render } = ReactDOM -const defaultSession = { - name: 'My session', - view: { - id: 'circularView', - type: 'CircularView', - bpPerPx: 5000000, - tracks: [ - { - id: 'uPdLKHik1', - type: 'VariantTrack', - configuration: 'pacbio_sv_vcf', - displays: [ - { - id: 'v9QVAR3oaB', - type: 'ChordVariantDisplay', - configuration: 'pacbio_sv_vcf-ChordVariantDisplay', - }, - ], - }, - ], - }, -} - const updates = document.getElementById('update') const state = new createViewState({ assembly, diff --git a/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/index.html b/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/index.html index 8118d6efa0..42d9f47762 100644 --- a/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/index.html +++ b/embedded_demos/jbrowse-react-circular-genome-view-vanillajs/index.html @@ -23,6 +23,15 @@

Using JBrowse Circular Genome View!

+

Code

+ +

+ The code for this app is available at + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-circular-view-vanillajs +

diff --git a/embedded_demos/jbrowse-react-circular-genome-view/src/App.tsx b/embedded_demos/jbrowse-react-circular-genome-view/src/App.tsx index 5e17bd3103..da85ee14be 100644 --- a/embedded_demos/jbrowse-react-circular-genome-view/src/App.tsx +++ b/embedded_demos/jbrowse-react-circular-genome-view/src/App.tsx @@ -7,33 +7,12 @@ import { import assembly from './assembly' import tracks from './tracks' +import defaultSession from './defaultSession' -const defaultSession = { - name: 'My session', - view: { - id: 'circularView', - type: 'CircularView', - bpPerPx: 5000000, - tracks: [ - { - id: 'uPdLKHik1', - type: 'VariantTrack', - configuration: 'pacbio_sv_vcf', - displays: [ - { - id: 'v9QVAR3oaB', - type: 'ChordVariantDisplay', - configuration: 'pacbio_sv_vcf-ChordVariantDisplay', - }, - ], - }, - ], - }, -} +type ViewModel = ReturnType function View() { - const [viewState, setViewState] = - useState>() + const [viewState, setViewState] = useState() const [patches, setPatches] = useState('') const [stateSnapshot, setStateSnapshot] = useState('') @@ -63,11 +42,11 @@ function View() {

The code for this app is available at{' '} - https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-circular-genome-view .

diff --git a/embedded_demos/jbrowse-react-circular-genome-view/src/defaultSession.ts b/embedded_demos/jbrowse-react-circular-genome-view/src/defaultSession.ts new file mode 100644 index 0000000000..582c6b2e64 --- /dev/null +++ b/embedded_demos/jbrowse-react-circular-genome-view/src/defaultSession.ts @@ -0,0 +1,22 @@ +export default { + name: 'My session', + view: { + id: 'circularView', + type: 'CircularView', + bpPerPx: 5000000, + tracks: [ + { + id: 'uPdLKHik1', + type: 'VariantTrack', + configuration: 'pacbio_sv_vcf', + displays: [ + { + id: 'v9QVAR3oaB', + type: 'ChordVariantDisplay', + configuration: 'pacbio_sv_vcf-ChordVariantDisplay', + }, + ], + }, + ], + }, +} diff --git a/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/App.tsx b/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/App.tsx index 559a2b1e19..8c293a5e1b 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/App.tsx +++ b/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/App.tsx @@ -8,64 +8,7 @@ import makeWorkerInstance from '@jbrowse/react-linear-genome-view/esm/makeWorker import assembly from './assembly' import tracks from './tracks' - -const defaultSession = { - name: 'this session', - view: { - id: 'linearGenomeView', - type: 'LinearGenomeView', - tracks: [ - { - id: '7PWx6ki1_', - type: 'ReferenceSequenceTrack', - configuration: 'GRCh38-ReferenceSequenceTrack', - displays: [ - { - id: 'pa_7lx6FDh', - type: 'LinearReferenceSequenceDisplay', - height: 210, - configuration: - 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', - }, - ], - }, - { - id: 'KHwe41KXk', - type: 'AlignmentsTrack', - configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', - displays: [ - { - id: '_-kwYVczT8', - type: 'LinearAlignmentsDisplay', - PileupDisplay: { - id: '1HTk32IDZJ', - type: 'LinearPileupDisplay', - height: 100, - configuration: { - type: 'LinearPileupDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_pileup_xyz', - }, - }, - SNPCoverageDisplay: { - id: 'ZBXRXmuDrc', - type: 'LinearSNPCoverageDisplay', - height: 45, - configuration: { - type: 'LinearSNPCoverageDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', - }, - }, - configuration: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', - height: 250, - }, - ], - }, - ], - }, -} +import defaultSession from './defaultSession' type ViewModel = ReturnType @@ -78,7 +21,6 @@ function View() { const state = createViewState({ assembly, tracks, - location: '10:29,838,655..29,838,737', onChange: (patch: any) => { setPatches(previous => previous + JSON.stringify(patch) + '\n') }, @@ -107,11 +49,11 @@ function View() {

The code for this app is available at{' '} - https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view-cra5 + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view-cra5 .

diff --git a/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/defaultSession.ts b/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/defaultSession.ts new file mode 100644 index 0000000000..d9e0281ccc --- /dev/null +++ b/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/defaultSession.ts @@ -0,0 +1,130 @@ +export default { + name: 'this session', + margin: 0, + view: { + id: 'linearGenomeView', + minimized: false, + type: 'LinearGenomeView', + offsetPx: 191980240, + bpPerPx: 0.1554251851851852, + displayedRegions: [ + { + refName: '10', + start: 0, + end: 133797422, + reversed: false, + assemblyName: 'GRCh38', + }, + ], + tracks: [ + { + id: '4aZAiE-A3', + type: 'ReferenceSequenceTrack', + configuration: 'GRCh38-ReferenceSequenceTrack', + minimized: false, + displays: [ + { + id: 'AD3gqvG0_6', + type: 'LinearReferenceSequenceDisplay', + height: 180, + configuration: + 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', + showForward: true, + showReverse: true, + showTranslation: true, + }, + ], + }, + { + id: 'T6uhrtY40O', + type: 'AlignmentsTrack', + configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', + minimized: false, + displays: [ + { + id: 'FinKswChSr', + type: 'LinearAlignmentsDisplay', + PileupDisplay: { + id: 'YAAaF494z', + type: 'LinearPileupDisplay', + height: 134, + configuration: { + type: 'LinearPileupDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_LinearPileupDisplay_xyz', + }, + showSoftClipping: false, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + SNPCoverageDisplay: { + id: 'VTQ_VGbAVJ', + type: 'LinearSNPCoverageDisplay', + height: 45, + configuration: { + type: 'LinearSNPCoverageDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', + }, + selectedRendering: '', + resolution: 1, + constraints: {}, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + snpCovHeight: 45, + configuration: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', + height: 179, + lowerPanelType: 'LinearPileupDisplay', + }, + ], + }, + { + id: 'EUnTnpVI6', + type: 'QuantitativeTrack', + configuration: 'hg38.100way.phyloP100way', + minimized: false, + displays: [ + { + id: 'mrlawr9Wtg', + type: 'LinearWiggleDisplay', + height: 100, + configuration: 'hg38.100way.phyloP100way-LinearWiggleDisplay', + selectedRendering: '', + resolution: 1, + constraints: {}, + }, + ], + }, + { + id: 'Cbnwl72EX', + type: 'VariantTrack', + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf', + minimized: false, + displays: [ + { + id: 'dvXz01Wf6w', + type: 'LinearVariantDisplay', + height: 100, + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay', + }, + ], + }, + ], + hideHeader: false, + hideHeaderOverview: false, + hideNoTracksActive: false, + trackSelectorType: 'hierarchical', + trackLabels: 'overlapping', + showCenterLine: false, + showCytobandsSetting: true, + showGridlines: true, + }, +} diff --git a/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/tracks.ts b/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/tracks.ts index 7d6e91fa7f..fb6422b271 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/tracks.ts +++ b/embedded_demos/jbrowse-react-linear-genome-view-cra5/src/tracks.ts @@ -29,6 +29,7 @@ const tracks = [ metaFilePath: { uri: 'https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz_meta.json', }, + assemblyNames: ['GRCh38'], }, }, }, diff --git a/embedded_demos/jbrowse-react-linear-genome-view-nextjs/pages/index.tsx b/embedded_demos/jbrowse-react-linear-genome-view-nextjs/pages/index.tsx index 936274d008..6a677baaa9 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-nextjs/pages/index.tsx +++ b/embedded_demos/jbrowse-react-linear-genome-view-nextjs/pages/index.tsx @@ -7,64 +7,7 @@ import { import assembly from '../utils/assembly' import tracks from '../utils/tracks' - -const defaultSession = { - name: 'this session', - view: { - id: 'linearGenomeView', - type: 'LinearGenomeView', - tracks: [ - { - id: '7PWx6ki1_', - type: 'ReferenceSequenceTrack', - configuration: 'GRCh38-ReferenceSequenceTrack', - displays: [ - { - id: 'pa_7lx6FDh', - type: 'LinearReferenceSequenceDisplay', - height: 210, - configuration: - 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', - }, - ], - }, - { - id: 'KHwe41KXk', - type: 'AlignmentsTrack', - configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', - displays: [ - { - id: '_-kwYVczT8', - type: 'LinearAlignmentsDisplay', - PileupDisplay: { - id: '1HTk32IDZJ', - type: 'LinearPileupDisplay', - height: 100, - configuration: { - type: 'LinearPileupDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_pileup_xyz', - }, - }, - SNPCoverageDisplay: { - id: 'ZBXRXmuDrc', - type: 'LinearSNPCoverageDisplay', - height: 45, - configuration: { - type: 'LinearSNPCoverageDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', - }, - }, - configuration: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', - height: 250, - }, - ], - }, - ], - }, -} +import defaultSession from '../utils/defaultSession' type ViewModel = ReturnType @@ -77,7 +20,6 @@ function View() { const state = createViewState({ assembly, tracks, - location: '10:29,838,655..29,838,737', onChange: (patch: any) => { setPatches(previous => previous + JSON.stringify(patch) + '\n') }, @@ -98,11 +40,11 @@ function View() {

The code for this app is available at{' '} - https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view-nextjs + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view-nextjs .

diff --git a/embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/defaultSession.ts b/embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/defaultSession.ts new file mode 100644 index 0000000000..d9e0281ccc --- /dev/null +++ b/embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/defaultSession.ts @@ -0,0 +1,130 @@ +export default { + name: 'this session', + margin: 0, + view: { + id: 'linearGenomeView', + minimized: false, + type: 'LinearGenomeView', + offsetPx: 191980240, + bpPerPx: 0.1554251851851852, + displayedRegions: [ + { + refName: '10', + start: 0, + end: 133797422, + reversed: false, + assemblyName: 'GRCh38', + }, + ], + tracks: [ + { + id: '4aZAiE-A3', + type: 'ReferenceSequenceTrack', + configuration: 'GRCh38-ReferenceSequenceTrack', + minimized: false, + displays: [ + { + id: 'AD3gqvG0_6', + type: 'LinearReferenceSequenceDisplay', + height: 180, + configuration: + 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', + showForward: true, + showReverse: true, + showTranslation: true, + }, + ], + }, + { + id: 'T6uhrtY40O', + type: 'AlignmentsTrack', + configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', + minimized: false, + displays: [ + { + id: 'FinKswChSr', + type: 'LinearAlignmentsDisplay', + PileupDisplay: { + id: 'YAAaF494z', + type: 'LinearPileupDisplay', + height: 134, + configuration: { + type: 'LinearPileupDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_LinearPileupDisplay_xyz', + }, + showSoftClipping: false, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + SNPCoverageDisplay: { + id: 'VTQ_VGbAVJ', + type: 'LinearSNPCoverageDisplay', + height: 45, + configuration: { + type: 'LinearSNPCoverageDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', + }, + selectedRendering: '', + resolution: 1, + constraints: {}, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + snpCovHeight: 45, + configuration: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', + height: 179, + lowerPanelType: 'LinearPileupDisplay', + }, + ], + }, + { + id: 'EUnTnpVI6', + type: 'QuantitativeTrack', + configuration: 'hg38.100way.phyloP100way', + minimized: false, + displays: [ + { + id: 'mrlawr9Wtg', + type: 'LinearWiggleDisplay', + height: 100, + configuration: 'hg38.100way.phyloP100way-LinearWiggleDisplay', + selectedRendering: '', + resolution: 1, + constraints: {}, + }, + ], + }, + { + id: 'Cbnwl72EX', + type: 'VariantTrack', + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf', + minimized: false, + displays: [ + { + id: 'dvXz01Wf6w', + type: 'LinearVariantDisplay', + height: 100, + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay', + }, + ], + }, + ], + hideHeader: false, + hideHeaderOverview: false, + hideNoTracksActive: false, + trackSelectorType: 'hierarchical', + trackLabels: 'overlapping', + showCenterLine: false, + showCytobandsSetting: true, + showGridlines: true, + }, +} diff --git a/embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/tracks.ts b/embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/tracks.ts index 7d6e91fa7f..fb6422b271 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/tracks.ts +++ b/embedded_demos/jbrowse-react-linear-genome-view-nextjs/utils/tracks.ts @@ -29,6 +29,7 @@ const tracks = [ metaFilePath: { uri: 'https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz_meta.json', }, + assemblyNames: ['GRCh38'], }, }, }, diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/defaultSession.js b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/defaultSession.js new file mode 100644 index 0000000000..d9e0281ccc --- /dev/null +++ b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/defaultSession.js @@ -0,0 +1,130 @@ +export default { + name: 'this session', + margin: 0, + view: { + id: 'linearGenomeView', + minimized: false, + type: 'LinearGenomeView', + offsetPx: 191980240, + bpPerPx: 0.1554251851851852, + displayedRegions: [ + { + refName: '10', + start: 0, + end: 133797422, + reversed: false, + assemblyName: 'GRCh38', + }, + ], + tracks: [ + { + id: '4aZAiE-A3', + type: 'ReferenceSequenceTrack', + configuration: 'GRCh38-ReferenceSequenceTrack', + minimized: false, + displays: [ + { + id: 'AD3gqvG0_6', + type: 'LinearReferenceSequenceDisplay', + height: 180, + configuration: + 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', + showForward: true, + showReverse: true, + showTranslation: true, + }, + ], + }, + { + id: 'T6uhrtY40O', + type: 'AlignmentsTrack', + configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', + minimized: false, + displays: [ + { + id: 'FinKswChSr', + type: 'LinearAlignmentsDisplay', + PileupDisplay: { + id: 'YAAaF494z', + type: 'LinearPileupDisplay', + height: 134, + configuration: { + type: 'LinearPileupDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_LinearPileupDisplay_xyz', + }, + showSoftClipping: false, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + SNPCoverageDisplay: { + id: 'VTQ_VGbAVJ', + type: 'LinearSNPCoverageDisplay', + height: 45, + configuration: { + type: 'LinearSNPCoverageDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', + }, + selectedRendering: '', + resolution: 1, + constraints: {}, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + snpCovHeight: 45, + configuration: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', + height: 179, + lowerPanelType: 'LinearPileupDisplay', + }, + ], + }, + { + id: 'EUnTnpVI6', + type: 'QuantitativeTrack', + configuration: 'hg38.100way.phyloP100way', + minimized: false, + displays: [ + { + id: 'mrlawr9Wtg', + type: 'LinearWiggleDisplay', + height: 100, + configuration: 'hg38.100way.phyloP100way-LinearWiggleDisplay', + selectedRendering: '', + resolution: 1, + constraints: {}, + }, + ], + }, + { + id: 'Cbnwl72EX', + type: 'VariantTrack', + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf', + minimized: false, + displays: [ + { + id: 'dvXz01Wf6w', + type: 'LinearVariantDisplay', + height: 100, + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay', + }, + ], + }, + ], + hideHeader: false, + hideHeaderOverview: false, + hideNoTracksActive: false, + trackSelectorType: 'hierarchical', + trackLabels: 'overlapping', + showCenterLine: false, + showCytobandsSetting: true, + showGridlines: true, + }, +} diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/genomeView.js b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/genomeView.js index cb5646bed6..1d1b20f6b0 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/genomeView.js +++ b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/genomeView.js @@ -1,73 +1,16 @@ /* global JBrowseReactLinearGenomeView React, ReactDOM */ import assembly from './assembly.js' import tracks from './tracks.js' +import defaultSession from './defaultSession.js' const { createViewState, JBrowseLinearGenomeView } = JBrowseReactLinearGenomeView const updates = document.getElementById('update') -const defaultSession = { - name: 'this session', - view: { - id: 'linearGenomeView', - type: 'LinearGenomeView', - tracks: [ - { - id: '7PWx6ki1_', - type: 'ReferenceSequenceTrack', - configuration: 'GRCh38-ReferenceSequenceTrack', - displays: [ - { - id: 'pa_7lx6FDh', - type: 'LinearReferenceSequenceDisplay', - height: 210, - configuration: - 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', - }, - ], - }, - { - id: 'KHwe41KXk', - type: 'AlignmentsTrack', - configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', - displays: [ - { - id: '_-kwYVczT8', - type: 'LinearAlignmentsDisplay', - PileupDisplay: { - id: '1HTk32IDZJ', - type: 'LinearPileupDisplay', - height: 100, - configuration: { - type: 'LinearPileupDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_pileup_xyz', - }, - }, - SNPCoverageDisplay: { - id: 'ZBXRXmuDrc', - type: 'LinearSNPCoverageDisplay', - height: 45, - configuration: { - type: 'LinearSNPCoverageDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', - }, - }, - configuration: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', - height: 250, - }, - ], - }, - ], - }, -} const state = new createViewState({ assembly, tracks, - location: '1:100,987,269..100,987,368', defaultSession, onChange: patch => { updates.innerHTML += JSON.stringify(patch) + '\n' diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/index.html b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/index.html index 386549300b..4854242f5b 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/index.html +++ b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/index.html @@ -28,6 +28,13 @@

Using JBrowse Linear Genome View!

BRCA2
+

+ The code for this app is available at + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-view-vanillajs +

diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/tracks.js b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/tracks.js index 7d6e91fa7f..fb6422b271 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/tracks.js +++ b/embedded_demos/jbrowse-react-linear-genome-view-vanillajs/tracks.js @@ -29,6 +29,7 @@ const tracks = [ metaFilePath: { uri: 'https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz_meta.json', }, + assemblyNames: ['GRCh38'], }, }, }, diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vite/src/App.tsx b/embedded_demos/jbrowse-react-linear-genome-view-vite/src/App.tsx index 5a73174ea4..11cd54243e 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view-vite/src/App.tsx +++ b/embedded_demos/jbrowse-react-linear-genome-view-vite/src/App.tsx @@ -7,10 +7,12 @@ import { import assembly from './assembly' import tracks from './tracks' +import defaultSession from './defaultSession' + +type ViewModel = ReturnType function View() { - const [viewState, setViewState] = - useState>() + const [viewState, setViewState] = useState() const [patches, setPatches] = useState('') const [stateSnapshot, setStateSnapshot] = useState('') @@ -18,16 +20,11 @@ function View() { const state = createViewState({ assembly, tracks, - location: '10:29,838,655..29,838,737', + defaultSession, onChange: patch => { setPatches(previous => previous + JSON.stringify(patch) + '\n') }, }) - state.session.view.showTrack('GRCh38-ReferenceSequenceTrack') - state.session.view.showTrack('genes') - state.session.view.showTrack( - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', - ) setViewState(state) }, []) @@ -43,11 +40,11 @@ function View() {

The code for this app is available at{' '} - https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view-vite + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view-vite .

diff --git a/embedded_demos/jbrowse-react-linear-genome-view-vite/src/defaultSession.ts b/embedded_demos/jbrowse-react-linear-genome-view-vite/src/defaultSession.ts new file mode 100644 index 0000000000..d9e0281ccc --- /dev/null +++ b/embedded_demos/jbrowse-react-linear-genome-view-vite/src/defaultSession.ts @@ -0,0 +1,130 @@ +export default { + name: 'this session', + margin: 0, + view: { + id: 'linearGenomeView', + minimized: false, + type: 'LinearGenomeView', + offsetPx: 191980240, + bpPerPx: 0.1554251851851852, + displayedRegions: [ + { + refName: '10', + start: 0, + end: 133797422, + reversed: false, + assemblyName: 'GRCh38', + }, + ], + tracks: [ + { + id: '4aZAiE-A3', + type: 'ReferenceSequenceTrack', + configuration: 'GRCh38-ReferenceSequenceTrack', + minimized: false, + displays: [ + { + id: 'AD3gqvG0_6', + type: 'LinearReferenceSequenceDisplay', + height: 180, + configuration: + 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', + showForward: true, + showReverse: true, + showTranslation: true, + }, + ], + }, + { + id: 'T6uhrtY40O', + type: 'AlignmentsTrack', + configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', + minimized: false, + displays: [ + { + id: 'FinKswChSr', + type: 'LinearAlignmentsDisplay', + PileupDisplay: { + id: 'YAAaF494z', + type: 'LinearPileupDisplay', + height: 134, + configuration: { + type: 'LinearPileupDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_LinearPileupDisplay_xyz', + }, + showSoftClipping: false, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + SNPCoverageDisplay: { + id: 'VTQ_VGbAVJ', + type: 'LinearSNPCoverageDisplay', + height: 45, + configuration: { + type: 'LinearSNPCoverageDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', + }, + selectedRendering: '', + resolution: 1, + constraints: {}, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + snpCovHeight: 45, + configuration: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', + height: 179, + lowerPanelType: 'LinearPileupDisplay', + }, + ], + }, + { + id: 'EUnTnpVI6', + type: 'QuantitativeTrack', + configuration: 'hg38.100way.phyloP100way', + minimized: false, + displays: [ + { + id: 'mrlawr9Wtg', + type: 'LinearWiggleDisplay', + height: 100, + configuration: 'hg38.100way.phyloP100way-LinearWiggleDisplay', + selectedRendering: '', + resolution: 1, + constraints: {}, + }, + ], + }, + { + id: 'Cbnwl72EX', + type: 'VariantTrack', + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf', + minimized: false, + displays: [ + { + id: 'dvXz01Wf6w', + type: 'LinearVariantDisplay', + height: 100, + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay', + }, + ], + }, + ], + hideHeader: false, + hideHeaderOverview: false, + hideNoTracksActive: false, + trackSelectorType: 'hierarchical', + trackLabels: 'overlapping', + showCenterLine: false, + showCytobandsSetting: true, + showGridlines: true, + }, +} diff --git a/embedded_demos/jbrowse-react-linear-genome-view/src/App.tsx b/embedded_demos/jbrowse-react-linear-genome-view/src/App.tsx index 21e8bbce8a..7ed29782b5 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view/src/App.tsx +++ b/embedded_demos/jbrowse-react-linear-genome-view/src/App.tsx @@ -7,64 +7,7 @@ import { import assembly from './assembly' import tracks from './tracks' - -const defaultSession = { - name: 'this session', - view: { - id: 'linearGenomeView', - type: 'LinearGenomeView', - tracks: [ - { - id: '7PWx6ki1_', - type: 'ReferenceSequenceTrack', - configuration: 'GRCh38-ReferenceSequenceTrack', - displays: [ - { - id: 'pa_7lx6FDh', - type: 'LinearReferenceSequenceDisplay', - height: 210, - configuration: - 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', - }, - ], - }, - { - id: 'KHwe41KXk', - type: 'AlignmentsTrack', - configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', - displays: [ - { - id: '_-kwYVczT8', - type: 'LinearAlignmentsDisplay', - PileupDisplay: { - id: '1HTk32IDZJ', - type: 'LinearPileupDisplay', - height: 100, - configuration: { - type: 'LinearPileupDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_pileup_xyz', - }, - }, - SNPCoverageDisplay: { - id: 'ZBXRXmuDrc', - type: 'LinearSNPCoverageDisplay', - height: 45, - configuration: { - type: 'LinearSNPCoverageDisplay', - displayId: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', - }, - }, - configuration: - 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', - height: 250, - }, - ], - }, - ], - }, -} +import defaultSession from './defaultSession' type ViewModel = ReturnType @@ -77,7 +20,6 @@ function View() { const state = createViewState({ assembly, tracks, - location: '10:29,838,655..29,838,737', onChange: (patch: any) => { setPatches((previous) => previous + JSON.stringify(patch) + '\n') }, @@ -100,11 +42,11 @@ function View() {

The code for this app is available at{' '} - https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view + https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view .

diff --git a/embedded_demos/jbrowse-react-linear-genome-view/src/defaultSession.ts b/embedded_demos/jbrowse-react-linear-genome-view/src/defaultSession.ts new file mode 100644 index 0000000000..d9e0281ccc --- /dev/null +++ b/embedded_demos/jbrowse-react-linear-genome-view/src/defaultSession.ts @@ -0,0 +1,130 @@ +export default { + name: 'this session', + margin: 0, + view: { + id: 'linearGenomeView', + minimized: false, + type: 'LinearGenomeView', + offsetPx: 191980240, + bpPerPx: 0.1554251851851852, + displayedRegions: [ + { + refName: '10', + start: 0, + end: 133797422, + reversed: false, + assemblyName: 'GRCh38', + }, + ], + tracks: [ + { + id: '4aZAiE-A3', + type: 'ReferenceSequenceTrack', + configuration: 'GRCh38-ReferenceSequenceTrack', + minimized: false, + displays: [ + { + id: 'AD3gqvG0_6', + type: 'LinearReferenceSequenceDisplay', + height: 180, + configuration: + 'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay', + showForward: true, + showReverse: true, + showTranslation: true, + }, + ], + }, + { + id: 'T6uhrtY40O', + type: 'AlignmentsTrack', + configuration: 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome', + minimized: false, + displays: [ + { + id: 'FinKswChSr', + type: 'LinearAlignmentsDisplay', + PileupDisplay: { + id: 'YAAaF494z', + type: 'LinearPileupDisplay', + height: 134, + configuration: { + type: 'LinearPileupDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_LinearPileupDisplay_xyz', + }, + showSoftClipping: false, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + SNPCoverageDisplay: { + id: 'VTQ_VGbAVJ', + type: 'LinearSNPCoverageDisplay', + height: 45, + configuration: { + type: 'LinearSNPCoverageDisplay', + displayId: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay_snpcoverage_xyz', + }, + selectedRendering: '', + resolution: 1, + constraints: {}, + filterBy: { + flagInclude: 0, + flagExclude: 1540, + }, + }, + snpCovHeight: 45, + configuration: + 'NA12878.alt_bwamem_GRCh38DH.20150826.CEU.exome-LinearAlignmentsDisplay', + height: 179, + lowerPanelType: 'LinearPileupDisplay', + }, + ], + }, + { + id: 'EUnTnpVI6', + type: 'QuantitativeTrack', + configuration: 'hg38.100way.phyloP100way', + minimized: false, + displays: [ + { + id: 'mrlawr9Wtg', + type: 'LinearWiggleDisplay', + height: 100, + configuration: 'hg38.100way.phyloP100way-LinearWiggleDisplay', + selectedRendering: '', + resolution: 1, + constraints: {}, + }, + ], + }, + { + id: 'Cbnwl72EX', + type: 'VariantTrack', + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf', + minimized: false, + displays: [ + { + id: 'dvXz01Wf6w', + type: 'LinearVariantDisplay', + height: 100, + configuration: + 'ALL.wgs.shapeit2_integrated_snvindels_v2a.GRCh38.27022019.sites.vcf-LinearVariantDisplay', + }, + ], + }, + ], + hideHeader: false, + hideHeaderOverview: false, + hideNoTracksActive: false, + trackSelectorType: 'hierarchical', + trackLabels: 'overlapping', + showCenterLine: false, + showCytobandsSetting: true, + showGridlines: true, + }, +} diff --git a/embedded_demos/jbrowse-react-linear-genome-view/src/tracks.ts b/embedded_demos/jbrowse-react-linear-genome-view/src/tracks.ts index 7d6e91fa7f..fb6422b271 100644 --- a/embedded_demos/jbrowse-react-linear-genome-view/src/tracks.ts +++ b/embedded_demos/jbrowse-react-linear-genome-view/src/tracks.ts @@ -29,6 +29,7 @@ const tracks = [ metaFilePath: { uri: 'https://jbrowse.org/genomes/GRCh38/ncbi_refseq/trix/GCA_000001405.15_GRCh38_full_analysis_set.refseq_annotation.sorted.gff.gz_meta.json', }, + assemblyNames: ['GRCh38'], }, }, }, diff --git a/website/docs/embedded_components.md b/website/docs/embedded_components.md index f143b41cb8..9046d37e2d 100644 --- a/website/docs/embedded_components.md +++ b/website/docs/embedded_components.md @@ -19,13 +19,13 @@ This component consists of a single JBrowse 2 linear view. Here is a table of different usages of the `@jbrowse/react-linear-genome-view` using different bundlers -| Bundler | Demo | Source code | Note | -| ------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| create-react-app v4 | [demo](https://jbrowse.org/demos/lgv/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-linear-genome-view)) | no polyfills needed in create-react-app v4. on newer versions of node, you can need to use `export NODE_OPTIONS=--openssl-legacy-provider` before building cra4 apps | -| create-react-app v5 | [demo](https://jbrowse.org/demos/lgv-cra5/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view-cra5) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-linear-genome-view-cra5)) | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules. This demo also uses webworkers, which is a unique ability with webpack 5. See https://jbrowse.org/storybook/lgv/main/?path=/story/linear-view--with-web-worker for details | -| vite | [demo](https://jbrowse.org/demos/lgv-vite) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view-vite) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-linear-genome-view-vite)) | for vite, we use rollup to polyfill some node polyfills similar to craco in create-react-app v5. note, may not work with newly released vite 3.x, works in dev but fails in production so this example uses vite 2.x | -| next.js | [demo](https://jbrowse.org/demos/lgv-nextjs) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view-nextjs) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-linear-genome-view-nextjs)) | uses next.js 13. Currently is hardcoded to use /demos/lgv-nextjs/ as sub-uri, update next.config.js to customize as needed | -| vanilla js | [demo](https://jbrowse.org/demos/lgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-linear-genome-view-vanillajs) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-linear-genome-view-vanillajs)) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling. see also dev tutorial here https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/01_introduction/ | +| Bundler | Demo | Source code | Note | +| ------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| create-react-app v4 | [demo](https://jbrowse.org/demos/lgv/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-linear-genome-view)) | no polyfills needed in create-react-app v4. on newer versions of node, you can need to use `export NODE_OPTIONS=--openssl-legacy-provider` before building cra4 apps | +| create-react-app v5 | [demo](https://jbrowse.org/demos/lgv-cra5/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view-cra5) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-linear-genome-view-cra5)) | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules. This demo also uses webworkers, which is a unique ability with webpack 5. See https://jbrowse.org/storybook/lgv/main/?path=/story/linear-view--with-web-worker for details | +| vite | [demo](https://jbrowse.org/demos/lgv-vite) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view-vite) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-linear-genome-view-vite)) | for vite, we use rollup to polyfill some node polyfills similar to craco in create-react-app v5. note, may not work with newly released vite 3.x, works in dev but fails in production so this example uses vite 2.x | +| next.js | [demo](https://jbrowse.org/demos/lgv-nextjs) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view-nextjs) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-linear-genome-view-nextjs)) | uses next.js 13. Currently is hardcoded to use /demos/lgv-nextjs/ as sub-uri, update next.config.js to customize as needed | +| vanilla js | [demo](https://jbrowse.org/demos/lgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-linear-genome-view-vanillajs) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-linear-genome-view-vanillajs)) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling. see also dev tutorial here https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/01_introduction/ | ## JBrowse React Circular Genome View @@ -39,8 +39,8 @@ This component consists of a single JBrowse 2 circular view. Here is a table of different usages of the `@jbrowse/react-circular-genome-view` using different bundlers -| Syntax | Demo | Source code | Note | -| ------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| create-react-app v4 | [demo](https://jbrowse.org/demos/cgv/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-circular-genome-view)) | no polyfills needed in create-react-app v4. on newer versions of node, you can need to use `export NODE_OPTIONS=--openssl-legacy-provider` before building cra4 apps | -| create-react-app v5 | [demo](https://jbrowse.org/demos/cgv-cra5/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view-cra5) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-circular-genome-view-cra5)) | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules | -| vanilla js | [demo](https://jbrowse.org/demos/cgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view-vanillajs) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-circular-genome-view-vanillajs)) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling | +| Syntax | Demo | Source code | Note | +| ------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| create-react-app v4 | [demo](https://jbrowse.org/demos/cgv/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-circular-genome-view) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-circular-genome-view)) | no polyfills needed in create-react-app v4. on newer versions of node, you can need to use `export NODE_OPTIONS=--openssl-legacy-provider` before building cra4 apps | +| create-react-app v5 | [demo](https://jbrowse.org/demos/cgv-cra5/) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-circular-genome-view-cra5) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-circular-genome-view-cra5)) | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules | +| vanilla js | [demo](https://jbrowse.org/demos/cgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/embedded_demos/jbrowse-react-circular-genome-view-vanillajs) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fembedded_demos%2Fjbrowse-react-circular-genome-view-vanillajs)) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling |