@jbrowse/plugin-sequence 2.3.1 → 2.3.3

package/src/IndexedFastaAdapter/IndexedFastaAdapter.test.ts

@@ -1,4 +1,5 @@
 import { toArray } from 'rxjs/operators'
+import { firstValueFrom } from 'rxjs'
 import Adapter from './IndexedFastaAdapter'
 import configSchema from './configSchema'
 
@@ -26,7 +27,7 @@ test('adapter can fetch sequence from volvox.fa', async () => {
     end: 20000,
   })
 
-  const featuresArray = await features.pipe(toArray()).toPromise()
+  const featuresArray = await firstValueFrom(features.pipe(toArray()))
   expect(featuresArray).toMatchSnapshot()
 
   const features2 = adapter.getFeatures({
@@ -35,7 +36,7 @@ test('adapter can fetch sequence from volvox.fa', async () => {
     end: 55000,
   })
 
-  const featuresArray2 = await features2.pipe(toArray()).toPromise()
+  const featuresArray2 = await firstValueFrom(features2.pipe(toArray()))
   expect(featuresArray2[0].get('end')).toBe(50001)
 
   const features3 = adapter.getFeatures({
@@ -47,6 +48,6 @@ test('adapter can fetch sequence from volvox.fa', async () => {
   const data = await adapter.getHeader()
   expect(data?.trim()).toBe('hello world')
 
-  const featuresArray3 = await features3.pipe(toArray()).toPromise()
+  const featuresArray3 = await firstValueFrom(features3.pipe(toArray()))
   expect(featuresArray3).toMatchSnapshot()
 })

package/src/LinearReferenceSequenceDisplay/model.ts

@@ -1,4 +1,4 @@
-import { types } from 'mobx-state-tree'
+import { addDisposer, types } from 'mobx-state-tree'
 import {
   BaseLinearDisplay,
   LinearGenomeViewModel,
@@ -8,24 +8,46 @@ import {
   ConfigurationReference,
 } from '@jbrowse/core/configuration'
 import { getContainingView } from '@jbrowse/core/util'
+import { autorun } from 'mobx'
 
+/**
+ * #stateModel LinearReferenceSequenceDisplay
+ * base model `BaseLinearDisplay`
+ */
 export function modelFactory(configSchema: AnyConfigurationSchemaType) {
   return types
     .compose(
       'LinearReferenceSequenceDisplay',
       BaseLinearDisplay,
       types.model({
+        /**
+         * #property
+         */
         type: types.literal('LinearReferenceSequenceDisplay'),
+        /**
+         * #property
+         */
         configuration: ConfigurationReference(configSchema),
-        showForward: types.optional(types.boolean, true),
-        showReverse: types.optional(types.boolean, true),
-        showTranslation: types.optional(types.boolean, true),
-        height: 180,
+        /**
+         * #property
+         */
+        showForward: true,
+        /**
+         * #property
+         */
+        showReverse: true,
+        /**
+         * #property
+         */
+        showTranslation: true,
       }),
     )
     .views(self => {
       const { renderProps: superRenderProps } = self
       return {
+        /**
+         * #method
+         */
         renderProps() {
           const { showForward, showReverse, showTranslation } = self
           return {
@@ -37,56 +59,78 @@ export function modelFactory(configSchema: AnyConfigurationSchemaType) {
             showTranslation,
           }
         },
-        regionCannotBeRendered(/* region */) {
-          const view = getContainingView(self) as LinearGenomeViewModel
-          if (view && view.bpPerPx >= 1) {
-            return 'Zoom in to see sequence'
-          }
-          return undefined
-        },
-
-        get rendererTypeName() {
-          return self.configuration.renderer.type
-        },
       }
     })
+    .views(self => ({
+      /**
+       * #method
+       */
+      regionCannotBeRendered(/* region */) {
+        const view = getContainingView(self) as LinearGenomeViewModel
+        return view?.bpPerPx >= 1 ? 'Zoom in to see sequence' : undefined
+      },
+      /**
+       * #getter
+       */
+      get rendererTypeName() {
+        return self.configuration.renderer.type
+      },
+    }))
     .actions(self => ({
+      /**
+       * #action
+       */
       toggleShowForward() {
         self.showForward = !self.showForward
       },
+      /**
+       * #action
+       */
       toggleShowReverse() {
         self.showReverse = !self.showReverse
       },
+      /**
+       * #action
+       */
       toggleShowTranslation() {
         self.showTranslation = !self.showTranslation
       },
+      afterAttach() {
+        // auto-adjust height depending on settings
+        addDisposer(
+          self,
+          autorun(() => {
+            const t = self.showTranslation ? 100 : 0
+            const r = self.showReverse ? 20 : 0
+            const s = self.showForward ? 20 : 0
+            self.setHeight(t + r + s)
+          }),
+        )
+      },
     }))
     .views(self => ({
+      /**
+       * #method
+       */
       trackMenuItems() {
         return [
           {
             label: 'Show forward',
             type: 'checkbox',
             checked: self.showForward,
-            onClick: () => {
-              self.toggleShowForward()
-            },
+            onClick: () => self.toggleShowForward(),
           },
           {
             label: 'Show reverse',
             type: 'checkbox',
             checked: self.showReverse,
-            onClick: () => {
-              self.toggleShowReverse()
-            },
+            onClick: () => self.toggleShowReverse(),
           },
           {
             label: 'Show translation',
             type: 'checkbox',
             checked: self.showTranslation,
-            onClick: () => {
-              self.toggleShowTranslation()
-            },
+            onClick: () => self.toggleShowTranslation(),
           },
         ]
       },

package/src/SequenceSearchAdapter/SequenceSearchAdapter.ts

@@ -11,6 +11,7 @@ import {
   doesIntersect2,
 } from '@jbrowse/core/util'
 import { toArray } from 'rxjs/operators'
+import { firstValueFrom } from 'rxjs'
 
 export default class extends BaseFeatureDataAdapter {
   public async configure() {
@@ -47,7 +48,7 @@ export default class extends BaseFeatureDataAdapter {
         },
         opts,
       )
-      const feats = await ret.pipe(toArray()).toPromise()
+      const feats = await firstValueFrom(ret.pipe(toArray()))
       const residues: string = feats[0]?.get('seq') || ''
       const search = this.getConf('search')
       const searchForward = this.getConf('searchForward')

package/src/TwoBitAdapter/TwoBitAdapter.test.ts

@@ -1,4 +1,5 @@
 import { toArray } from 'rxjs/operators'
+import { firstValueFrom } from 'rxjs'
 import Adapter from './TwoBitAdapter'
 import configSchema from './configSchema'
 
@@ -18,7 +19,7 @@ test('adapter can fetch features from volvox.2bit', async () => {
     end: 20000,
   })
 
-  const featuresArray = await features.pipe(toArray()).toPromise()
+  const featuresArray = await firstValueFrom(features.pipe(toArray()))
   expect(featuresArray).toMatchSnapshot()
 
   const features2 = adapter.getFeatures({
@@ -27,7 +28,7 @@ test('adapter can fetch features from volvox.2bit', async () => {
     end: 55000,
   })
 
-  const featuresArray2 = await features2.pipe(toArray()).toPromise()
+  const featuresArray2 = await firstValueFrom(features2.pipe(toArray()))
   expect(featuresArray2[0].get('end')).toBe(50001)
 
   const features3 = adapter.getFeatures({
@@ -36,7 +37,7 @@ test('adapter can fetch features from volvox.2bit', async () => {
     end: 20000,
   })
 
-  const featuresArray3 = await features3.pipe(toArray()).toPromise()
+  const featuresArray3 = await firstValueFrom(features3.pipe(toArray()))
   expect(featuresArray3).toMatchSnapshot()
 })
 

package/src/{index.test.js → index.test.ts}

@@ -3,7 +3,6 @@ import { getSnapshot } from 'mobx-state-tree'
 import ThisPlugin from '.'
 
 test('plugin in a stock JBrowse', () => {
-  console.warn = jest.fn()
   const pluginManager = new PluginManager([new ThisPlugin()])
   pluginManager.createPluggableElements()
   pluginManager.configure()
@@ -12,14 +11,10 @@ test('plugin in a stock JBrowse', () => {
   )
 
   const TwoBitAdapter = pluginManager.getAdapterType('TwoBitAdapter')
-  const config = TwoBitAdapter.configSchema.create({ type: 'TwoBitAdapter' })
-  expect(getSnapshot(config)).toMatchSnapshot()
+  const cfg = TwoBitAdapter.configSchema.create({ type: 'TwoBitAdapter' })
+  expect(getSnapshot(cfg)).toMatchSnapshot()
 
-  const IndexedFastaAdapter = pluginManager.getAdapterType(
-    'IndexedFastaAdapter',
-  )
-  const config2 = IndexedFastaAdapter.configSchema.create({
-    type: 'IndexedFastaAdapter',
-  })
-  expect(getSnapshot(config2)).toMatchSnapshot()
+  const FastaAdapter = pluginManager.getAdapterType('IndexedFastaAdapter')
+  const cfg2 = FastaAdapter.configSchema.create({ type: 'IndexedFastaAdapter' })
+  expect(getSnapshot(cfg2)).toMatchSnapshot()
 })

package/src/DivSequenceRenderer/components/DivSequenceRendering.test.js

@@ -1,211 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import { createJBrowseTheme } from '@jbrowse/core/ui'
-import PrecomputedLayout from '@jbrowse/core/util/layouts/PrecomputedLayout'
-import SimpleFeature from '@jbrowse/core/util/simpleFeature'
-import { ThemeProvider } from '@mui/material'
-import DivSequenceRendering from './DivSequenceRendering'
-import DivRenderingConfigSchema from '../configSchema'
-
-function Rendering(props) {
-  return (
-    <ThemeProvider theme={createJBrowseTheme()}>
-      <DivSequenceRendering {...props} />
-    </ThemeProvider>
-  )
-}
-
-class ErrorCatcher extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = { hasError: false, errorText: '' }
-  }
-
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true, errorText: String(error) }
-  }
-
-  render() {
-    const { hasError, errorText } = this.state
-    if (hasError) {
-      // You can render any custom fallback UI
-      return <h1 className="error">{errorText}</h1>
-    }
-    const { children } = this.props
-    return children
-  }
-}
-
-describe('<DivSequenceRendering />', () => {
-  // This just keeps our testing logs clean by not displaying `console.error`s
-  // from errors we intentionally throw in our tests. Hopefully React will
-  // someday provide a way for error boundaries to prevent error logging so we
-  // won't have to do this: https://github.com/facebook/react/issues/15069
-  const originalError = console.error
-  beforeAll(() => {
-    console.error = (...args) => {
-      if (
-        args[0].includes(
-          'feature one did not contain a valid `seq` attribute',
-        ) ||
-        args[0].includes(
-          'The above error occurred in the <SequenceDivs> component',
-        )
-      ) {
-        return
-      }
-      originalError.call(console, ...args)
-    }
-  })
-
-  afterAll(() => {
-    console.error = originalError
-  })
-
-  it('renders with no features', () => {
-    const { container } = render(
-      <Rendering
-        width={500}
-        height={500}
-        regions={[{ refName: 'zonk', start: 0, end: 300 }]}
-        layout={new PrecomputedLayout({ rectangles: {}, totalHeight: 20 })}
-        config={DivRenderingConfigSchema.create()}
-        bpPerPx={3}
-      />,
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders with one, zoomed way out', () => {
-    const { container } = render(
-      <Rendering
-        width={500}
-        height={500}
-        regions={[{ refName: 'zonk', start: 0, end: 1000 }]}
-        features={
-          new Map([
-            [
-              'one',
-              new SimpleFeature({
-                uniqueId: 'one',
-                start: 1,
-                end: 3,
-                seq: 'AB',
-              }),
-            ],
-          ])
-        }
-        config={DivRenderingConfigSchema.create({})}
-        bpPerPx={3}
-      />,
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders with one feature with no seq, zoomed in, should throw', () => {
-    const { container } = render(
-      <ErrorCatcher>
-        <Rendering
-          width={500}
-          height={500}
-          regions={[{ refName: 'zonk', start: 0, end: 1000 }]}
-          features={
-            new Map([
-              ['one', new SimpleFeature({ uniqueId: 'one', start: 1, end: 3 })],
-            ])
-          }
-          config={DivRenderingConfigSchema.create({})}
-          bpPerPx={0.05}
-        />
-      </ErrorCatcher>,
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders with one feature with an incorrect seq, zoomed in, should throw', () => {
-    const { container } = render(
-      <ErrorCatcher>
-        <Rendering
-          width={500}
-          height={500}
-          regions={[{ refName: 'zonk', start: 0, end: 1000 }]}
-          features={
-            new Map([
-              [
-                'one',
-                new SimpleFeature({
-                  uniqueId: 'one',
-                  start: 1,
-                  end: 3,
-                  seq: 'ABC',
-                }),
-              ],
-            ])
-          }
-          config={DivRenderingConfigSchema.create({})}
-          bpPerPx={0.05}
-        />
-      </ErrorCatcher>,
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders with one feature with a correct seq, zoomed in, should render nicely', () => {
-    const { container } = render(
-      <Rendering
-        width={500}
-        height={500}
-        regions={[{ refName: 'zonk', start: 0, end: 1000 }]}
-        features={
-          new Map([
-            [
-              'one',
-              new SimpleFeature({
-                uniqueId: 'one',
-                start: 1,
-                end: 10,
-                seq: 'ABCDEFGHI',
-              }),
-            ],
-          ])
-        }
-        config={DivRenderingConfigSchema.create({})}
-        bpPerPx={0.05}
-      />,
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-
-  it('renders with one feature reversed with a correct seq, zoomed in, should render nicely', () => {
-    const { container } = render(
-      <Rendering
-        width={500}
-        height={500}
-        regions={[{ refName: 'zonk', start: 0, end: 1000, reversed: true }]}
-        features={
-          new Map([
-            [
-              'one',
-              new SimpleFeature({
-                uniqueId: 'one',
-                start: 1,
-                end: 10,
-                seq: 'ABCDEFGHI',
-              }),
-            ],
-          ])
-        }
-        config={DivRenderingConfigSchema.create({})}
-        bpPerPx={0.05}
-      />,
-    )
-
-    expect(container).toMatchSnapshot()
-  })
-})

package/src/DivSequenceRenderer/components/__snapshots__/DivSequenceRendering.test.js.snap

@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DivSequenceRendering /> renders with no features 1`] = `
-<div>
-  <svg
-    data-testid="sequence_track"
-    height="200"
-    style="width: 100px; height: 200px;"
-    width="100"
-  />
-</div>
-`;
-
-exports[`<DivSequenceRendering /> renders with one feature reversed with a correct seq, zoomed in, should render nicely 1`] = `
-<div>
-  <svg
-    data-testid="sequence_track"
-    height="200"
-    style="width: 20000px; height: 200px;"
-    width="20000"
-  />
-</div>
-`;
-
-exports[`<DivSequenceRendering /> renders with one feature with a correct seq, zoomed in, should render nicely 1`] = `
-<div>
-  <svg
-    data-testid="sequence_track"
-    height="200"
-    style="width: 20000px; height: 200px;"
-    width="20000"
-  />
-</div>
-`;
-
-exports[`<DivSequenceRendering /> renders with one feature with an incorrect seq, zoomed in, should throw 1`] = `
-<div>
-  <svg
-    data-testid="sequence_track"
-    height="200"
-    style="width: 20000px; height: 200px;"
-    width="20000"
-  />
-</div>
-`;
-
-exports[`<DivSequenceRendering /> renders with one feature with no seq, zoomed in, should throw 1`] = `
-<div>
-  <svg
-    data-testid="sequence_track"
-    height="200"
-    style="width: 20000px; height: 200px;"
-    width="20000"
-  />
-</div>
-`;
-
-exports[`<DivSequenceRendering /> renders with one, zoomed way out 1`] = `
-<div>
-  <svg
-    data-testid="sequence_track"
-    height="200"
-    style="width: 333.3333333333333px; height: 200px;"
-    width="333.3333333333333"
-  />
-</div>
-`;