Use local data instead of remote data for LGV component test (#3611)

GMOD · Mar 24, 2023 · b766f03 · b766f03
1 parent 01b7689
commit b766f03
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 323 deletions.
diff --git a/component_tests/cgv/src/App.tsx b/component_tests/cgv/src/App.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import '@fontsource/roboto'
 import {
   createViewState,
   JBrowseCircularGenomeView,
@@ -8,19 +7,14 @@ import {
 import assembly from './assembly'
 import tracks from './tracks'
 
-function View() {
+export default function View() {
   const [viewState, setViewState] =
     useState<ReturnType<typeof createViewState>>()
-  const [patches, setPatches] = useState('')
-  const [stateSnapshot, setStateSnapshot] = useState('')
 
   useEffect(() => {
     const state = createViewState({
       assembly,
       tracks,
-      onChange: (patch: any) => {
-        setPatches(previous => previous + JSON.stringify(patch) + '\n')
-      },
     })
     state.session.view.showTrack('volvox_sv_test_renamed')
     setViewState(state)
@@ -30,75 +24,5 @@ function View() {
     return null
   }
 
-  return (
-    <>
-      <h1>
-        JBrowse 2 React Circular Genome View Demo (with create-react-app v4)
-      </h1>
-      <JBrowseCircularGenomeView viewState={viewState} />
-      <h3>Code</h3>
-      <p>
-        The code for this app is available at{' '}
-        <a
-          href="https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view"
-          target="_blank"
-          rel="noreferrer"
-        >
-          https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view
-        </a>
-        .
-      </p>
-      <h3>Control the view</h3>
-      <div>
-        <p>
-          This is an example of controlling the view from other elements on the
-          page. Clicking on a button will rotate the view.
-        </p>
-        <button
-          onClick={() => {
-            viewState.session.view.rotateClockwise()
-          }}
-        >
-          Rotate clockwise
-        </button>
-        <button
-          onClick={() => {
-            viewState.session.view.rotateCounterClockwise()
-          }}
-        >
-          Rotate counter clockwise
-        </button>
-      </div>
-      <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} />
-      <h3>React to the view</h3>
-      <p>
-        Using <code>onChange</code> in <code>createViewState</code>, you can
-        observe what is happening in the view and react to it. The changes in
-        the state of the view are emitted as{' '}
-        <a href="http://jsonpatch.com/" target="_blank" rel="noreferrer">
-          JSON patches
-        </a>
-        . The patches for the component on this page are shown below.
-      </p>
-      <textarea value={patches} readOnly rows={5} cols={80} wrap="off" />
-    </>
-  )
+  return <JBrowseCircularGenomeView viewState={viewState} />
 }
-
-export default View
diff --git a/component_tests/lgv/cypress/integration/basic.spec.ts b/component_tests/lgv/cypress/integration/basic.spec.ts
@@ -1,20 +1,10 @@
 describe('JBrowse embedded view', () => {
-  it('page loads', () => {
-    Cypress.on(
-      // from https://github.com/cypress-io/cypress/issues/8418
-      'uncaught:exception',
-      // @ts-expect-error thinks we are es5 and don't have includes, may be able to update
-      err => !err.message.includes('ResizeObserver loop limit exceeded'),
-    )
-    cy.visit('/')
-    cy.contains('JBrowse 2 React Linear Genome View Demo')
-  })
   it('track loads', () => {
     cy.visit('/')
 
     // eslint-disable-next-line testing-library/await-async-query,testing-library/prefer-screen-queries
     cy.findByTestId('Blockset-pileup', { timeout: 30000 }).findByTestId(
-      'prerendered_canvas_{GRCh38}10:29838637..29838705-0_done',
+      'prerendered_canvas_{volvox}ctgA:1..82-0_done',
       { timeout: 30000 },
     )
   })

diff --git a/component_tests/lgv/public/volvox-sorted.cram b/component_tests/lgv/public/volvox-sorted.cram
diff --git a/component_tests/lgv/public/volvox-sorted.cram.crai b/component_tests/lgv/public/volvox-sorted.cram.crai
diff --git a/component_tests/lgv/public/volvox.2bit b/component_tests/lgv/public/volvox.2bit
diff --git a/component_tests/lgv/src/App.tsx b/component_tests/lgv/src/App.tsx
@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react'
-import '@fontsource/roboto'
+import React, { useEffect, useState } from 'react'
 import {
   createViewState,
   JBrowseLinearGenomeView,
@@ -8,143 +7,24 @@ 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,
-          },
-        ],
-      },
-    ],
-  },
-}
+type ViewModel = ReturnType<typeof createViewState>
 
-function View() {
-  const [viewState, setViewState] =
-    useState<ReturnType<typeof createViewState>>()
-  const [patches, setPatches] = useState('')
-  const [stateSnapshot, setStateSnapshot] = useState('')
+export default function View() {
+  const [viewState, setViewState] = useState<ViewModel>()
 
   useEffect(() => {
     const state = createViewState({
       assembly,
       tracks,
-      location: '10:29,838,655..29,838,737',
-      onChange: (patch: unknown) => {
-        setPatches(previous => previous + JSON.stringify(patch) + '\n')
-      },
-      defaultSession,
+      location: 'ctgA:1-100',
     })
+    state.session.view.showTrack('volvox_cram')
     setViewState(state)
   }, [])
 
   if (!viewState) {
     return null
   }
 
-  return (
-    <>
-      <h1>JBrowse 2 React Linear Genome View Demo</h1>
-      <JBrowseLinearGenomeView viewState={viewState} />
-      <h3>Control the view</h3>
-      <div>
-        <p>
-          This is an example of controlling the view from other elements on the
-          page. Clicking on a button will navigate the view to the location of
-          that gene.
-        </p>
-        <button
-          onClick={() => {
-            viewState.session.view.navToLocString('10:94762681..94855547')
-          }}
-        >
-          CYP2C19
-        </button>
-        <button
-          onClick={() => {
-            viewState.session.view.navToLocString('13:32315086..32400266')
-          }}
-        >
-          BRCA2
-        </button>
-      </div>
-      <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} />
-      <h3>React to the view</h3>
-      <p>
-        Using <code>onChange</code> in <code>createViewState</code>, you can
-        observe what is happening in the view and react to it. The changes in
-        the state of the view are emitted as{' '}
-        <a href="http://jsonpatch.com/" target="_blank" rel="noreferrer">
-          JSON patches
-        </a>
-        . The patches for the component on this page are shown below.
-      </p>
-      <textarea value={patches} readOnly rows={5} cols={80} wrap="off" />
-    </>
-  )
+  return <JBrowseLinearGenomeView viewState={viewState} />
 }
-
-export default View
diff --git a/component_tests/lgv/src/assembly.ts b/component_tests/lgv/src/assembly.ts
@@ -1,38 +1,40 @@
 const assembly = {
-  name: 'GRCh38',
-  aliases: ['hg38'],
+  name: 'volvox',
+  aliases: ['vvx'],
   sequence: {
     type: 'ReferenceSequenceTrack',
-    trackId: 'GRCh38-ReferenceSequenceTrack',
+    trackId: 'volvox_refseq',
+    metadata: {
+      date: '2020-08-20',
+    },
+    formatAbout: {
+      hideUris: true,
+      config: "jexl:{extraField:'important data'}",
+    },
     adapter: {
-      type: 'BgzipFastaAdapter',
-      fastaLocation: {
-        uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
-      },
-      faiLocation: {
-        uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz.fai',
-      },
-      gziLocation: {
-        uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz.gzi',
+      type: 'TwoBitAdapter',
+      twoBitLocation: {
+        uri: 'volvox.2bit',
+        locationType: 'UriLocation',
       },
     },
-    displays: [
-      {
-        type: 'LinearReferenceSequenceDisplay',
-        displayId:
-          'GRCh38-ReferenceSequenceTrack-LinearReferenceSequenceDisplay',
-        renderer: {
-          type: 'DivSequenceRenderer',
-        },
-      },
-    ],
   },
   refNameAliases: {
     adapter: {
-      type: 'RefNameAliasAdapter',
-      location: {
-        uri: '/GRCh38.aliases.txt',
-      },
+      type: 'FromConfigAdapter',
+      adapterId: 'W6DyPGJ0UU',
+      features: [
+        {
+          refName: 'ctgA',
+          uniqueId: 'alias1',
+          aliases: ['A', 'contigA'],
+        },
+        {
+          refName: 'ctgB',
+          uniqueId: 'alias2',
+          aliases: ['B', 'contigB'],
+        },
+      ],
     },
   },
 }